open-index/open-npm huggingface dataset:
npm package: @kilcekru/esbuild-plugin-css-extra
Description: Esbuild plugin for supporting less, postcss & css-modules
Author: Kilcekru
Latest version: 0.1.2

# @kilcekru/esbuild-plugin-css-extra

Esbuild plugin to support Less, PostCSS & css modules.

## Installation

`npm install @kilcekru/esbuild-plugin-css-extra`

## Usage

```javascript
import esbuild from "esbuild";
import { CssExtraPlugin } from "@kilcekru/esbuild-plugin-css-extra";

esbuild.build({
  ...
  plugins: [
    CssExtraPlugin(),
  ],
  ...
});
*/
```

## License

Licensed under [MIT](https://github.com/Kilcekru/esbuild-plugin-css-extra/blob/main/LICENSE).
npm package: @kildesu/jikan
Description: An utility package to handle French dates without the overhead of time or zones.
Author: KilDesu
Latest version: 1.0.9

# Jikan

This package is a wrapper around [Luxon](https://github.com/moment/luxon/) without the overhead of time zones and time, only raw dates are handled.

It also adds more parsing formats as well as a method to extract dates from strings.

```bash
npm install jikan
```

You can also use any other package manager like `pnpm` or `bun`.
npm package: @kildevaeld/solid-form
Description: ```ts
Author: Rasmus Kildevæld
Latest version: 0.4.0

# Solid forms


```ts

import { createForm, required } from "@kildevaeld/solid-form"


function App() {

  const api = createForm({
    defaultValues: () => ({
      name: 'Rasmus'
    }),
    validations: {
      name: [required()]
    },
    async submit(values) => {

    }
  })

  return <form submit={api.submit}>
    <div classlist={{invalid: api.field('name').isValid()}}>
      <label>Name<label>
      <input type="text" ref={api.field('name')} />
    </div>
    <button type="submit" disabled={api.isSubmitting()}>Submit</button>
  <form>
}

```
npm package: @kilfro/tags-input
Description: Component for inputing tags
Author: Kirill Frolov
Latest version: 1.0.6

# @kilfro/tags-input

> 

[![Build Status](https://travis-ci.org/kilfro/tags-input.svg?branch=master)](https://travis-ci.org/kilfro/tags-input) [![NPM](https://img.shields.io/npm/v/@kilfro/tags-input.svg)](https://www.npmjs.com/package/@kilfro/tags-input) 

This is a simple react component for inputting tags.

![demo](https://github.com/kilfro/tags-input/blob/master/demo.png?raw=true)

## Install

```bash
npm install --save @kilfro/tags-input
```

## Usage

```jsx
import React, { useState } from 'react'
import TagsInput from '@kilfro/tags-input'

const Example = () => {
  const [tags, setTags] = useState([])

  return(
    <TagsInput values={tags} onChange={setTags} />
  )
}
```

## Props

Name | Type | Default | Description
--- | --- | --- | ---
values | array | | List of values
onChange | function | | Callback function to change values
TagItemWrapper | component | | Custom wrapper for tags. [More info](#custom-tag-wrapper)
placeholder | string | | Placeholder for input field
autoPasted | boolean | false | Automatically splitting pasted string to tags by splitter. [More info](#pasting-from-the-clipboard)
splitter | string | ```' '``` | String for autosplit long string to tags
inputStyle | object | | Inline styles for input field
inputClassName | string | | Class names for input field
tagsPosition| `'top' \| 'bottom'`| `'bottom'` | Use to change position of tags list

## Custom tag wrapper 

You can use prop `TagItemWrapper` to change tag item wrapper. Your custom component has to implement two props: 
* `children` as tag values;
* `removeHandler` as callback function to remove tag.

Example:

```jsx
import React, { useState } from 'react'
import TagsInput from '@kilfro/tags-input'

const MyWrapper = ({ children, removeHandler }) => {
    const style = {
        margin: 5,
        backgroundColor: 'gray',
        fontWeight: 'bold',
        color: 'white',
    }

    return (
        <button style={style} onClick={removeHandler}>{children}</button>
    )
}

const Example = () => {
  const [tags, setTags] = useState([])

  return(
    <TagsInput 
      values={tags} 
      onChange={setTags} 
      TagItemWrapper={MyWrapper}
    />
  )
}
```
## Pasting from the clipboard

If prop `autoPasted` is `true`, input will split pasted string and add new values automatically.
You can also change splitter (by default this is `space`) using prop `splitter`.

## Key events

Tag input handles some key events:
* `Enter` - add typed value;
* `Esc` - clear input;
* `ArrowUp` - change typed value to upper case;
* `ArrowDown` - change typed value to lowwer case.

## License

MIT © [Kirill Frolov](https://github.com/kilfro)