Repository: onesine/react-tailwindcss-select
Branch: master
Commit: c187e4e06963
Files: 39
Total size: 84.0 KB

Directory structure:
gitextract_exwwbg6a/

├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── page-components/
│   ├── Alert.jsx
│   ├── Button.jsx
│   ├── Checkbox.jsx
│   ├── Header.jsx
│   ├── Link.jsx
│   ├── SelectContainer.jsx
│   └── TailwindColors.jsx
├── pages/
│   ├── _app.js
│   └── index.js
├── postcss.config.js
├── rollup.config.js
├── src/
│   ├── components/
│   │   ├── DisabledItem.tsx
│   │   ├── GroupItem.tsx
│   │   ├── Icons.tsx
│   │   ├── Item.tsx
│   │   ├── Options.tsx
│   │   ├── SearchInput.tsx
│   │   ├── Select.tsx
│   │   ├── SelectProvider.tsx
│   │   ├── Spinner.tsx
│   │   └── type.ts
│   ├── constants/
│   │   └── index.ts
│   ├── hooks/
│   │   └── use-onclick-outside.ts
│   ├── index.css
│   └── index.tsx
├── tailwind.config.js
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .eslintignore
================================================
# Folders
dist/
assets/
pages/
components/
styles/

# Files
README.md

================================================
FILE: .eslintrc.json
================================================
{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "plugin:react-hooks/recommended",
        "next/core-web-vitals"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "plugins": ["react", "@typescript-eslint", "import", "prettier", "@next/eslint-plugin-next"],
    "rules": {
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],
        "import/order": [
            "error",
            {
                "alphabetize": {
                    "order": "asc",
                    "caseInsensitive": true
                },
                "newlines-between": "always"
            }
        ],
        "react/prop-types": "off",
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "@typescript-eslint/no-var-requires": 0,
        "prettier/prettier": ["error", { "endOfLine": "auto" }, { "usePrettierrc": true }]
    }
}


================================================
FILE: .gitignore
================================================
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
node_modules
/.next/
/.rollup.cache/

# test coverage
coverage

# builds
build
dist
.rpt2_cache
.eslintcache
tsconfig.tsbuildinfo

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.yarn
.yarnrc.yml

npm-debug.log*
yarn-debug.log*
yarn-error.log*

.vscode
.idea

================================================
FILE: .npmignore
================================================
## Folders
src
node_modules
.vscode
.idea
assets
.git
pages
page-components
styles
.next
.rollup.cache
## Files
babel.config.json
tsconfig.json
rollup.config.js
next.config.js
next-env.d.ts
.gitignore
.eslintignore
.eslintrc.json
.prettierrc
.prettierignore
.DS_Store
npm-debug.log
package-lock.json
yarn.lock
tailwind.config.js
postcss.config.js
tsconfig.tsbuildinfo


================================================
FILE: .prettierignore
================================================
# Folders
dist/
assets/
.next/
.rollup.cache/

# Files
README.md

================================================
FILE: .prettierrc
================================================
{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": false,
    "trailingComma": "none",
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "proseWrap": "always"
}


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing

Thanks for your interest in contributing to `react-tailwindcss-select`! Please take a moment to
review this document **before submitting a pull request**.

-   [Pull requests](#pull-requests)
-   [Installation](#installation)
-   [Coding standards](#coding-standards)
-   [Running playground](#running-playgrounds)
-   [Before you make a Pull Request](#before-you-make-a-pull-request)

## Pull requests

**Please ask first before starting work on any significant new features.**

It's never a fun experience to have your pull request declined after investing a lot of time and
effort into a new feature. To avoid this from happening, we request that contributors create
[an issue](https://github.com/onesine/react-tailwindcss-select/issues) to first discuss any
significant new features.

## Installation

You only require a `yarn install` in the root directory to install everything you need.

```sh
yarn install
```

## Coding standards

We use `prettier` for making sure that the codebase is formatted consistently. To automatically fix
any style violations in your code, you can run:

**Using yarn**

```sh
yarn pret:fix
```

**Using npm**

```sh
npm pret:fix
```

## Running playground

We currently use `next.js` as server for live testing.

You can run the `dev` script and open your browser to `http://localhost:8888`.

See complete `props` usage in `pages/index.js` file.

**Using yarn**

```sh
yarn dev
```

**Using npm**

```sh
npm dev
```

## Before you make a Pull Request

We recommend to run these scripts in sequence before you make your commit message amd open a Pull
Request

**Let's clean the code first**

```sh
yarn pret:fix
```

**Test a build of your changes**

```sh
yarn build

```


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2020 Onesine

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
<h1 align="center" style="border-bottom: 0 white">
    📦 React tailwindcss select
</h1>

<p align="center">
    React-tailwindcss-select is a simple component ready to be inserted into your project <br> This component inspired by <a href="https://react-select.com">React-select</a> is a select input made with <a href="https://tailwindcss.com/">Tailwindcss</a> and <a href="https://reactjs.com">React</a>.
</p>

<p align="center">
    <a href="https://github.com/onesine/react-tailwindcss-select/blob/master/LICENSE">
        <img src="https://img.shields.io/npm/l/react-tailwindcss-select.svg" alt="MIT License">
    </a>
    <a href="https://www.npmjs.com/package/react-tailwindcss-select">
        <img src="https://img.shields.io/npm/v/react-tailwindcss-select.svg">
    </a>
    <a href="https://github.com/yarnpkg/berry">
        <img src="https://img.shields.io/badge/developed%20with-Yarn%202-blue">
    </a>
</p>

## Features

-   ✅ Select field for a single item
-   ✅ Selection field for multiple items
-   ✅ Optional button to clear the field
-   ✅ Optional search for an item
-   ✅ Optional deactivation of an option
-   ✅ TypeScript support
-   ✅ Group options
-   ✅ Customization of the select field style
-   ⬜ Fixed Options (multiple items select)

## Why ❔

A select with the above features is above all indispensable in many projects. On a project using
tailwindcss, when I install [react-select](https://react-select.com) or other such packages, the
style of the latter is affected by that of [tailwind](https://tailwindcss.com/).

Rather than looking for a component that uses [tailwind](https://tailwindcss.com/), I preferred to
make my own based on react-select which I like (and also because I generally like to reinvent the
wheel 😅).

<p align="center">
    <img src="https://raw.githubusercontent.com/onesine/react-tailwindcss-select/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09.png" alt="preview react-tailwindcss-select">
</p>

## Online Demo

You can find the online demo at [here](https://demo-react-tailwindcss-select.vercel.app/)

## Install

You can use yarn

```bash
yarn add react-tailwindcss-select
```

Or via npm

```bash
npm install react-tailwindcss-select
```

make sure you have installed the peer dependencies as well with the below versions.

```
"react": "^18.2.0"
```

## Usage

This component also exports a tiny CSS file built by tailwind. All CSS classes used in designing and
customizing the select component are all custom tailwind classes which ensures that an existing
tailwind project would not need to include this CSS file again.

### Tailwind Project

A tailwind project would only have to import the react component using
`import Select from 'react-tailwindcss-select'` and specify the component in the tailwind
configuration to generate the styles of the classes used by react-tailwindcss-select.

Use this code to add the component to the tailwind configuration

```javascript
// in your tailwind.config.js
module.exports = {
    // ...
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/react-tailwindcss-select/dist/index.esm.js"
    ]
    // ...
};
```

### None Tailwind Project

On a project that does not use tailwind, you need to import the component's CSS as well. To do this
use these two codes: `import Select from 'react-tailwindcss-select'` and
`import 'react-tailwindcss-select/dist/index.css'`

> **Warning**
>
> In this case when you don't use tailwind on your project, think about isolating the component and
> its style so that tailwind doesn't affect the style of the elements in your project. For this, you
> can use the
> [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

Then use react-tailwindcss-select in your app:

#### With React Component

```javascript
import React from "react";
import Select from "react-tailwindcss-select";

const options = [
    { value: "fox", label: "🦊 Fox" },
    { value: "Butterfly", label: "🦋 Butterfly" },
    { value: "Honeybee", label: "🐝 Honeybee" }
];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { animal: null };

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(value) {
        console.log("value:", value);
        this.setState({ animal: value });
    }

    render() {
        const { animal } = this.state;

        return (
            <Select
                value={animal}
                onChange={this.handleChange}
                options={options}
            />
        );
    }
}
```

#### With React Hooks

```javascript
import { useState } from "react";
import Select from "react-tailwindcss-select";

const options = [
    { value: "fox", label: "🦊 Fox" },
    { value: "Butterfly", label: "🦋 Butterfly" },
    { value: "Honeybee", label: "🐝 Honeybee" }
];

const App = () => {
    const [animal, setAnimal] = useState(null);

    const handleChange = value => {
        console.log("value:", value);
        setAnimal(value);
    };

    return (
        <Select
            value={animal}
            onChange={handleChange}
            options={options}
        />
    );
};

export default App;
```

## Theming options

**Supported themes**
![Theme supported](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_theme.png?raw=true)

To change the default theme, simply add the `primaryColor` props to your select field with the theme
value. By default, the `primaryColor` is set to `blue`

### Indigo example

```javascript
import { useState } from "react";
import Select from "react-tailwindcss-select";

const options = [
    { value: "fox", label: "🦊 Fox" },
    { value: "Butterfly", label: "🦋 Butterfly" },
    { value: "Honeybee", label: "🐝 Honeybee" }
];

const App = () => {
    const [animal, setAnimal] = useState(null);

    const handleChange = value => {
        console.log("value:", value);
        setAnimal(value);
    };

    return (
        <Select
            primaryColor={"indigo"}
            value={animal}
            onChange={handleChange}
            options={options}
        />
    );
};

export default App;
```

## Props

This table shows all the options available in react-tailwindcss-select.

| Option                                        | Type       | Default            | Description                                                                            |
|-----------------------------------------------|------------|--------------------|----------------------------------------------------------------------------------------|
| [`classNames`](#classNames)                   | `Object`   | `undefined`        | This prop allows you to style most of the components used by this library.             |
| `isClearable`                                 | `Boolean`  | `true`             | Indicates if you can empty the select field.                                           |
| `isDisabled`                                  | `Boolean`  | `false`            | Indicates if you can disable the select field.                                         |
| `isMultiple`                                  | `Boolean`  | `false`            | Indicates if you can do a multiple selection.                                          |
| `isSearchable`                                | `Boolean`  | `false`            | Indicates if you can search the elements of the select field.                          |
| [`formatGroupLabel`](#formatGroupLabel)       | `Function` | `null`             | Allows you to use a custom rendering template for each subgroup title                  |
| [`formatOptionLabel`](#formatOptionLabel)     | `Function` | `null`             | Allows you to use a custom rendering template for each option in the list              |
| `loading`                                     | `Boolean`  | `false`            | Indicates if you want a loader to appear in the field.                                 |
| `menuIsOpen`                                  | `Boolean`  | `false`            | Indicates if you want the options menu to be displayed by default.                     |
| `noOptionsMessage`                            | `String`   | `No results found` | Default message when there is no option in the select field.                           |
| [`onChange`](#onChange)                       | `Function` |                    | This callback, if present, is triggered when the select field value is modified.       |
| [`onSearchInputChange`](#onSearchInputChange) | `Function` |                    | This callback, if present, is triggered when the search input field value is modified. |
| [`options`](#options)                         | `Array`    | `[]`               | All options or options groups available in the selection field.                        |
| `placeholder`                                 | `String`   | `Select...`        | The placeholder shown for the select field.                                            |
| `primaryColor`                                | `String`   | `blue`             | Default theme of the field.                                                            |
| `searchInputPlaceholder`                      | `String`   | `Search...`        | The placeholder shown for the search input field.                                      |
| [`value`](#value)                             | `Object`   | `null`             | Current value of select field.                                                         |

### onChange

This callback, if present, is triggered when the select field value is modified. This callback takes
as a parameter the current value(s) selected. These values respect the same structure as the
elements of the options.

```js
currentValue => {
    console.log("currentValue:", currentValue);
};
```

### onSearchInputChange

This callback, if present, is triggered when the search input field value is modified. This callback takes
as parameter a `React.ChangeEvent<HTMLInputElement>`.

```js
e => {
    console.log("value:", e.target.value);
};
```

### options

All options are available in the select field. Each option element must have a `value` property that
serves as an identifier for the element, a `label` property that is the text that is displayed in
the options list, and an optional `disabled` property to specify whether the element is active.

```js
// default element
const options = [{ value: "fox", label: "🦊 Fox" }];
// default element with `disabled`
const options = [{ value: "fox", label: "🦊 Fox", disabled: true }];
```

#### Group item

If you want to group options you can use the following code.

```js
const options = [
    {
        label: "Mammal",
        options: [
            { value: "Dolphin", label: "🐬 Dolphin" },
            { value: "Giraffe", label: "🦒 Giraffe" }
        ]
    },
    {
        label: "Carnivore",
        options: [
            { value: "Tiger", label: "🐅 Tiger" },
            { value: "Lion", label: "🦁 Lion" }
        ]
    },
    // 👉 You can put the grouped and ungrouped options together
    { value: "Zombie", label: "🧟 Zombie" }
];
```

> **Info**
>
> 👉 You can put the grouped and ungrouped options together.

### value

The current value of the select field. These objects must follow the same structure as an `options`
element. Thus, the following would work:

```js
// default element Simple Select
const value = { value: "fox", label: "🦊 Fox" };
// default element with `disabled` Simple Select
const value = { value: "fox", label: "🦊 Fox", disabled: true };
// default element Multiple Select
const value = [{ value: "fox", label: "🦊 Fox" }];
// default element with `disabled` Multiple Select
const value = [{ value: "fox", label: "🦊 Fox", disabled: true }];
```

### formatGroupLabel

`formatGroupLabel` allows you to use a custom rendering template for each subgroup title <br />

```jsx
import { useState } from "react";
import Select from "react-tailwindcss-select";

const options = [
    {
        label: "Mammal",
        options: [
            { value: "Dolphin", label: "🐬 Dolphin" },
            { value: "Giraffe", label: "🦒 Giraffe" }
        ]
    },
    {
        label: "Carnivore",
        options: [
            { value: "Tiger", label: "🐅 Tiger" },
            { value: "Lion", label: "🦁 Lion" }
        ]
    }
];

const App = () => {
    const [animal, setAnimal] = useState(null);

    const handleChange = value => {
        console.log("value:", value);
        setAnimal(value);
    };

    return (
        <Select
            value={animal}
            onChange={handleChange}
            options={options}
            isMultiple={true}
            formatGroupLabel={data => (
                <div className={`py-2 text-xs flex items-center justify-between`}>
                    // 👉 data represents each subgroup
                    <span className="font-bold">{data.label}</span>
                    <span className="bg-gray-200 h-5 h-5 p-1.5 flex items-center justify-center rounded-full">
                        {data.options.length}
                    </span>
                </div>
            )}
        />
    );
};

export default App;
```

> **Info**
>
> 👉 data represents each subgroup.

### formatOptionLabel

`formatOptionLabel` allows you to use a custom rendering template for each option in the list.
<br />

```jsx
import { useState } from "react";
import Select from "react-tailwindcss-select";

const options = [
    { value: "fox", label: "🦊 Fox" },
    { value: "Butterfly", label: "🦋 Butterfly" },
    { value: "Honeybee", label: "🐝 Honeybee" }
];

const App = () => {
    const [animal, setAnimal] = useState(null);

    const handleChange = value => {
        console.log("value:", value);
        setAnimal(value);
    };

    return (
        <Select
            value={animal}
            onChange={handleChange}
            options={options}
            formatOptionLabel={data => (
                <li
                    className={`block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${
                        !data.isSelected
                            ? `text-white bg-blue-500`
                            : `bg-blue-100 text-blue-500`
                    }`}
                >
                    // data represents each option in the list
                    {data.label}
                </li>
            )}
        />
    );
};

export default App;
```

> **Info**
>
> 👉 data represents each option in the list.

### classNames

As of version 1.6.0 of `react-tailwindcss-select` you can now use the `classNames` prop for styling.

> **Info**
>
> 👉 Note: this is not to be confused with the className prop, which will add a class to the component.

`classNames` takes an object with keys to represent the various inner components that `react-tailwindcss-select` is made up of.

Each key takes a callback function or a string. If a key is not filled in, the default classes of the component will be used.

#### All keys

```typescript
interface SelectProps {
    // ....
    classNames?: {
        menuButton?: (value?: { isDisabled?: boolean }) => string;
        menu?: string;
        tagItem?: (value?: { item?: Option, isDisabled?: boolean }) => string;
        tagItemText?: string;
        tagItemIconContainer?: string;
        tagItemIcon?: string;
        list?: string;
        listGroupLabel?: string;
        listItem?: (value?: { isSelected?: boolean }) => string;
        listDisabledItem?: string;
        ChevronIcon?: (value?: { open?: boolean }) => string;
        searchContainer?: string;
        searchBox?: string;
        searchIcon?: string;
        closeIcon?: string;
    };
    // ...
}
```

#### Example of a custom style

```javascript
import { useState } from "react";
import Select from "react-tailwindcss-select";

const options = [
    { value: "fox", label: "🦊 Fox" },
    { value: "Butterfly", label: "🦋 Butterfly" },
    { value: "Honeybee", label: "🐝 Honeybee" }
];

const App = () => {
    const[animal, setAnimal] =useState(null);

    const handleChange = value => {
        console.log("value:", value);
        setAnimal(value);
    };

    return(
        <Select
            value={animal}
            onChange={handleChange}
            options={options}
            classNames={{
                menuButton: ({ isDisabled }) => (
                    `flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none ${
                        isDisabled
                            ? "bg-gray-200"
                            : "bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20"
                    }`
                ),
                menu: "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
                listItem: ({ isSelected }) => (
                    `block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${
                        isSelected
                            ? `text-white bg-blue-500`
                            : `text-gray-500 hover:bg-blue-100 hover:text-blue-500`
                    }`
                )
            }}
        />
    );
};

export default App;
```

## PlayGround

Clone the `master` branch and run commands:

```sh
# Using npm
npm install && npm dev

# Using yarn
yarn install && yarn dev

```

Open a browser and navigate to `http://localhost:8888`

## Contributing

Got ideas on how to make this better? Open an issue!

Don't forget to see [CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-select/blob/master/CONTRIBUTING.md)

## Thanks

This component is inspired by the excellent [react-select](https://react-select.com/) library by Jed
Watson.

I thank you in advance for your contribution to this project.

## License

MIT Licensed. Copyright (c) Lewhe Onesine 2022.


================================================
FILE: next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true
};

module.exports = nextConfig;


================================================
FILE: package.json
================================================
{
    "name": "react-tailwindcss-select",
    "version": "1.8.5",
    "description": "A select input made with React js and Tailwind CSS",
    "main": "dist/index.cjs.js",
    "module": "dist/index.esm.js",
    "types": "dist/index.d.ts",
    "author": "onesine",
    "license": "MIT",
    "scripts": {
        "watch": "rollup -c -w",
        "clean": "rm -rf dist",
        "tailwind-build": "tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
        "lint": "eslint .",
        "lint:fix": "eslint --fix .",
        "pret": "prettier -c .",
        "pret:fix": "prettier -w .",
        "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
        "build": "npm run pret && npm run lint && npm run clean && rollup -c && npm run tailwind-build",
        "dev": "next dev -p 8888"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/onesine/react-tailwindcss-select"
    },
    "keywords": [
        "combobox",
        "form",
        "input",
        "multiselect",
        "react",
        "react-component",
        "react-tailwind",
        "select",
        "tailwind",
        "tailwindcss",
        "ui"
    ],
    "peerDependencies": {
        "react": "^18.2.0"
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^24.0.1",
        "@rollup/plugin-node-resolve": "^15.0.1",
        "@rollup/plugin-typescript": "^11.0.0",
        "@tailwindcss/forms": "^0.5.2",
        "@types/node": "18.14.6",
        "@types/react": "^18.0.21",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "autoprefixer": "^10.4.13",
        "eslint": "^8.28.0",
        "eslint-config-next": "^13.2.3",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.31.11",
        "eslint-plugin-react-hooks": "^4.6.0",
        "next": "^13.2.3",
        "postcss": "^8.4.14",
        "prettier": "^2.8.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "rollup": "^2.77.2",
        "tailwindcss": "^3.1.7",
        "tslib": "^2.4.0",
        "typescript": "^4.8.4"
    }
}


================================================
FILE: page-components/Alert.jsx
================================================
const Alert = ({ children, title, type = "info" }) => {
    return (
        <div
            className="bg-blue-100 border-t-4 border-blue-500 rounded-b text-blue-900 px-2 md:px-4 py-3 shadow-md"
            role="alert"
        >
            <div className="flex">
                <div className="py-0.5 md:py-1">
                    {type === "info" && (
                        <svg
                            className="h-5 md:h-6 h-5 md:w-6 text-blue-500 mr-2 md:mr-4"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                    )}
                </div>

                <div>
                    <p className="font-bold">{title}</p>

                    {children}
                </div>
            </div>
        </div>
    );
};

export default Alert;


================================================
FILE: page-components/Button.jsx
================================================
const Button = ({ children, icon = null, active = false, onClick }) => {
    return (
        <button
            onClick={onClick}
            className={`transition duration-75 flex items-center space-x-2 ${
                active ? "shadow bg-white" : ""
            } py-1.5 lg:py-2 rounded-lg px-2 lg:px-3 text-xs lg:text-sm text-gray-600 font-bold`}
        >
            {icon !== null && icon === "eyes" && (
                <svg
                    className={`w-4 h4 lg:w-5 lg:h-5 ${active ? "text-blue-500" : ""}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                </svg>
            )}

            {icon !== null && icon === "code" && (
                <svg
                    className={`w-4 h4 lg:w-5 lg:h-5 ${active ? "text-blue-500" : ""}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
                    />
                </svg>
            )}

            <span className={`${active ? "text-gray-700" : "text-gray-500"}`}>{children}</span>
        </button>
    );
};

export default Button;


================================================
FILE: page-components/Checkbox.jsx
================================================
const Checkbox = ({ children, checked, onChange, id }) => {
    return (
        <label htmlFor={id} className="space-x-2 inline-block mr-2">
            <input
                id={id}
                checked={checked}
                onChange={onChange}
                className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50"
                type="checkbox"
            />
            <span className="text-xs font-semibold cursor-pointer">{children}</span>
        </label>
    );
};

export default Checkbox;


================================================
FILE: page-components/Header.jsx
================================================
const Header = ({ children }) => {
    return (
        <div className="flex justify-end mb-4">
            <div className="bg-slate-100 p-0.5 rounded-lg flex items-center">{children}</div>
        </div>
    );
};

export default Header;


================================================
FILE: page-components/Link.jsx
================================================
export const DarkLink = ({ children, url }) => {
    return (
        <a
            target="_blank"
            rel="noreferrer"
            className="text-slate-100 hover:underline active:text-blue-700 font-semibold"
            href={url}
        >
            {children}
        </a>
    );
};

export const LightLink = ({ children, url }) => {
    return (
        <a
            target="_blank"
            rel="noreferrer"
            className="hover:underline active:text-blue-700 font-semibold"
            href={url}
        >
            {children}
        </a>
    );
};


================================================
FILE: page-components/SelectContainer.jsx
================================================
const SelectContainer = ({ children }) => {
    return (
        <div className="w-full mt-10 md:mt-14 flex items-center justify-center">
            <div className="w-full md:w-3/4 lg:w-4/6 xl:w-2/4">{children}</div>
        </div>
    );
};

export default SelectContainer;


================================================
FILE: page-components/TailwindColors.jsx
================================================
const TailwindColors = ({ changeColor }) => {
    return (
        <div className="w-full mt-3 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-5">
            <div
                onClick={() => changeColor("blue")}
                className="h-7 px-2 text-xs font-semibold bg-blue-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                blue
            </div>
            <div
                onClick={() => changeColor("orange")}
                className="h-7 px-2 text-xs font-semibold bg-orange-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                orange
            </div>
            <div
                onClick={() => changeColor("yellow")}
                className="h-7 px-2 text-xs font-semibold bg-yellow-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                yellow
            </div>
            <div
                onClick={() => changeColor("red")}
                className="h-7 px-2 text-xs font-semibold bg-red-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                red
            </div>
            <div
                onClick={() => changeColor("purple")}
                className="h-7 px-2 text-xs font-semibold bg-purple-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                purple
            </div>
            <div
                onClick={() => changeColor("amber")}
                className="h-7 px-2 text-xs font-semibold bg-amber-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                amber
            </div>
            <div
                onClick={() => changeColor("lime")}
                className="h-7 px-2 text-xs font-semibold bg-lime-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                lime
            </div>
            <div
                onClick={() => changeColor("green")}
                className="h-7 px-2 text-xs font-semibold bg-green-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                green
            </div>
            <div
                onClick={() => changeColor("emerald")}
                className="h-7 px-2 text-xs font-semibold bg-emerald-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                emerald
            </div>
            <div
                onClick={() => changeColor("teal")}
                className="h-7 px-2 text-xs font-semibold bg-teal-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                teal
            </div>
            <div
                onClick={() => changeColor("cyan")}
                className="h-7 px-2 text-xs font-semibold bg-cyan-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                cyan
            </div>
            <div
                onClick={() => changeColor("sky")}
                className="h-7 px-2 text-xs font-semibold bg-sky-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                sky
            </div>
            <div
                onClick={() => changeColor("indigo")}
                className="h-7 px-2 text-xs font-semibold bg-indigo-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                indigo
            </div>
            <div
                onClick={() => changeColor("violet")}
                className="h-7 px-2 text-xs font-semibold bg-violet-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                violet
            </div>
            <div
                onClick={() => changeColor("purple")}
                className="h-7 px-2 text-xs font-semibold bg-purple-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                purple
            </div>
            <div
                onClick={() => changeColor("fuchsia")}
                className="h-7 px-2 text-xs font-semibold bg-fuchsia-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                fuchsia
            </div>
            <div
                onClick={() => changeColor("pink")}
                className="h-7 px-2 text-xs font-semibold bg-pink-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                pink
            </div>
            <div
                onClick={() => changeColor("rose")}
                className="h-7 px-2 text-xs font-semibold bg-rose-500 rounded-md flex items-center justify-center text-white cursor-pointer"
            >
                rose
            </div>
        </div>
    );
};

export default TailwindColors;


================================================
FILE: pages/_app.js
================================================
import "../src/index.css";

const App = ({ Component, pageProps }) => {
    return <Component {...pageProps} />;
};

export default App;


================================================
FILE: pages/index.js
================================================
import Head from "next/head";
import Select from "../src";
import Header from "../page-components/Header";
import Button from "../page-components/Button";
import SelectContainer from "../page-components/SelectContainer";
import { useCallback, useEffect, useState } from "react";
import TailwindColors from "../page-components/TailwindColors";
import Checkbox from "../page-components/Checkbox";
import Alert from "../page-components/Alert";
import { DarkLink, LightLink } from "../page-components/Link";

const MANGAS = [
    {
        label: "SHONEN",
        options: [
            { value: "One Piece", label: "🤩 One Piece", disabled: false },
            { value: "Naruto Shippûden", label: "🤭 Naruto Shippûden", disabled: false },
            { value: "Hunter x Hunter", label: "🥰 Hunter x Hunter", disabled: false }
        ]
    },
    {
        label: "SHOJO",
        options: [
            { value: "Orange", label: "🤩 Orange", disabled: false },
            { value: "Nana", label: "🤭 Nana", disabled: false },
            { value: "Tonari no Kaibutsu-kun", label: "🥰 Tonari no Kaibutsu-kun", disabled: false }
        ]
    },
    {
        label: "SEINEN",
        options: [
            { value: "Death Note", label: "🤩 Death Note", disabled: false },
            { value: "Btooom!", label: "🤭 Btooom!", disabled: false },
            { value: "Black Lagoon", label: "🥰 Black Lagoon", disabled: false }
        ]
    },
    {
        label: "JOSEI",
        options: [
            { value: "Nodame Cantabile", label: "🤩 Nodame Cantabile", disabled: false },
            { value: "Chihayafuru", label: "🤭 Chihayafuru", disabled: false },
            { value: "Blue", label: "🥰 Blue", disabled: false }
        ]
    },
    { value: "Naruto Shippûden", label: "🤭 Naruto Shippûden", disabled: false },
    { value: "One Piece", label: "🤩 One Piece", disabled: false },
    { value: "Bleach", label: "🥹 Bleach", disabled: false },
    { value: "Boruto", label: "😡 Boruto", disabled: false },
    { value: "Hunter x Hunter", label: "🥰 Hunter x Hunter", disabled: false },
    { value: "Dragon Ball Z", label: "🥵 Dragon Ball Z", disabled: false },
    { value: "Fullmetal Alchemist", label: "🫡 Fullmetal Alchemist", disabled: false },
    { value: "My Hero Academia", label: "🤯 My Hero Academia", disabled: false },
    { value: "Black Clover", label: "😍 Black Clover", disabled: false }
];

const SELECT_OPTIONS = [
    "isClearable",
    "isSearchable",
    "isMultiple",
    "isDisabled",
    "loading",
    "isGroupOption"
];

const printAlertContent = (element, value) => {
    const printText = (text, value) =>
        value ? <p className="text-xs md:text-sm transition duration-75">{text}</p> : null;

    switch (element) {
        case "isClearable":
            return printText("You can empty the field", value);
        case "isSearchable":
            return printText("You can search for an item in the option list", value);
        case "isMultiple":
            return printText("You can select several options", value);
        case "isDisabled":
            return printText("The field is disabled", value);
        case "loading":
            return printText("A loader appears on the field", value);
        case "isGroupOption":
            return printText("The options of the select field are grouped", value);
        default:
            return null;
    }
};

const Home = () => {
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);
    const [showCode, setShowCode] = useState(false);
    const [value, setValue] = useState(null);
    const [isClearable, setIsClearable] = useState(false);
    const [isMultiple, setIsMultiple] = useState(false);
    const [isSearchable, setIsSearchable] = useState(false);
    const [isDisabled, setIsDisabled] = useState(false);
    const [isGroupOption, setIsGroupOption] = useState(false);
    const [primaryColor, setPrimaryColor] = useState("purple");

    useEffect(() => {
        setLoading(true);
        const timer = setTimeout(() => {
            setOptions(MANGAS);
            setLoading(false);
        }, 3000);

        return () => {
            clearTimeout(timer);
        };
    }, []);

    const filterOptions = useCallback(
        data => {
            return data.filter(item => (isGroupOption ? "options" in item : !("options" in item)));
        },
        [isGroupOption]
    );

    const toggleShowCode = useCallback(() => {
        setShowCode(!showCode);
    }, [showCode]);

    const dispatch = useCallback(
        (type = null, action, valueData = null) => {
            switch (type) {
                case "isClearable":
                    if (action === "set") setIsClearable(valueData);
                    if (action === "get") return isClearable;
                    break;
                case "isSearchable":
                    if (action === "set") setIsSearchable(valueData);
                    if (action === "get") return isSearchable;
                    break;
                case "isMultiple":
                    if (action === "set") {
                        if (value !== null) {
                            setValue(null);
                        }
                        setIsMultiple(valueData);
                    }
                    if (action === "get") return isMultiple;
                    break;
                case "isDisabled":
                    if (action === "set") setIsDisabled(valueData);
                    if (action === "get") return isDisabled;
                    break;
                case "loading":
                    if (action === "set") setLoading(valueData);
                    if (action === "get") return loading;
                    break;
                case "isGroupOption":
                    if (action === "set") {
                        setIsGroupOption(valueData);
                    }

                    if (action === "get") return isGroupOption;
                    break;
                default:
                    break;
            }
        },
        [isClearable, isDisabled, isGroupOption, isMultiple, isSearchable, loading, value]
    );

    const handleCheck = useCallback(
        (value, item) => {
            dispatch(item, "set", value);
        },
        [dispatch]
    );

    return (
        <>
            <Head>
                <title>react-tailwindcss-select PlayGround</title>
            </Head>

            <div className="w-full min-h-screen px-5 md:px-20 lg:px-36 md:flex md:flex-col md:justify-between">
                <h1 className="text-slate-600 mt-4 md:mt-8 lg:mt-20 mb-24 md:mb-8 md:text-xl lg:text-3xl text-center font-semibold">
                    Demo react-tailwindcss-select
                </h1>

                <div className="w-full">
                    <Header>
                        <Button active={!showCode} icon={"eyes"} onClick={toggleShowCode}>
                            Preview
                        </Button>

                        <Button active={showCode} icon={"code"} onClick={toggleShowCode}>
                            Code
                        </Button>
                    </Header>

                    <div
                        className={`transition duration-75 ${
                            showCode ? "bg-slate-800" : "bg-gray-100"
                        } px-2 pb-6 md:p-8 min-h-[15rem] rounded-md border md:min-h-[20rem] lg:min-h-[25rem] w-full`}
                    >
                        {showCode ? (
                            <div>
                                <h2 className="text-white mt-8 font-semibold text-xl md:text-3xl lg:text-5xl xl:text-6xl">
                                    This part will be available soon.
                                </h2>
                                <p className="mt-3 md:mt-5 lg:mt-8 text-slate-400 text-xs md:text-sm lg:text-base">
                                    You can access the source code of the demo project{" "}
                                    <DarkLink url="https://github.com/onesine/demo-react-tailwindcss-select">
                                        here
                                    </DarkLink>
                                    . <br />
                                    Any contribution to the package will be welcome. You can access
                                    the package source code{" "}
                                    <DarkLink url="https://github.com/onesine/react-tailwindcss-select">
                                        here
                                    </DarkLink>
                                    <br />
                                    Thanks for testing{" "}
                                    <DarkLink url="https://www.npmjs.com/package/react-tailwindcss-select">
                                        react-tailwindcss-select
                                    </DarkLink>{" "}
                                    and have a nice 👋 day.
                                </p>
                            </div>
                        ) : (
                            <SelectContainer>
                                <Select
                                    /*classNames={{
                                        menuButton: (state) => "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20",
                                        menu: "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
                                        listItem: ({isSelected}) => "list-none py-1.5 px-2 hover:bg-blue-500 rounded-md hover:text-white cursor-pointer",
                                        tagItem: ({isDisabled, item}) => {
                                            console.log("item:", item)
                                            return 'flex space-x-2 p-0.5 rounded bg-blue-500 text-white';
                                        }
                                    }}*/
                                    primaryColor={primaryColor}
                                    options={filterOptions(options)}
                                    onChange={value => setValue(value)}
                                    value={value}
                                    loading={loading}
                                    isClearable={isClearable}
                                    isSearchable={isSearchable}
                                    isMultiple={isMultiple}
                                    /*formatGroupLabel={(data) => (
                                        <div className={`py-2 text-xs flex items-center justify-between`}>
                                            <span className="font-bold">{data.label}</span>
                                            <span className="bg-gray-200 h-5 h-5 p-1.5 flex items-center justify-center rounded-full">{data.options.length}</span>
                                        </div>
                                    )}*/
                                    isDisabled={isDisabled}
                                />

                                <div className="mt-2">
                                    {SELECT_OPTIONS.map((item, index) => (
                                        <Checkbox
                                            id={item}
                                            key={index}
                                            checked={dispatch(item, "get")}
                                            onChange={e => handleCheck(e.target.checked, item)}
                                        >
                                            {item}
                                        </Checkbox>
                                    ))}
                                </div>

                                <TailwindColors changeColor={color => setPrimaryColor(color)} />

                                <p className="mt-3 text-center text-xs text-gray-500 font-semibold">
                                    If you want to try a theme proposed by one of these colors. You
                                    can click disappointed.
                                </p>

                                {(isClearable ||
                                    isSearchable ||
                                    isMultiple ||
                                    isDisabled ||
                                    loading ||
                                    isGroupOption) && (
                                    <div className="mt-10 transition duration-75">
                                        <Alert title={"Information"}>
                                            {printAlertContent("isClearable", isClearable)}
                                            {printAlertContent("isSearchable", isSearchable)}
                                            {printAlertContent("isMultiple", isMultiple)}
                                            {printAlertContent("isDisabled", isDisabled)}
                                            {printAlertContent("loading", loading)}
                                            {printAlertContent("isGroupOption", isGroupOption)}
                                        </Alert>
                                    </div>
                                )}
                            </SelectContainer>
                        )}
                    </div>
                </div>

                <p className="text-center py-10 text-slate-500 text-sm">
                    Made with ❤️ by <LightLink url="https://twitter.com/LewheO">Onesine</LightLink>,
                    powered by <LightLink url="https://reactjs.org/">react</LightLink> and{" "}
                    <LightLink url="https://tailwindcss.com/">tailwindcss</LightLink>.
                </p>
            </div>
        </>
    );
};

export default Home;


================================================
FILE: postcss.config.js
================================================
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
    }
};


================================================
FILE: rollup.config.js
================================================
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";

const packageJson = require("./package.json");
const options = require("./tsconfig.json");

module.exports = {
    input: "src/index.tsx",
    output: [
        {
            file: packageJson.main,
            format: "cjs",
            exports: "auto",
            sourcemap: true
        },
        {
            file: packageJson.module,
            format: "esm",
            exports: "auto",
            sourcemap: true
        }
    ],
    external: ["react"],
    plugins: [resolve(), commonjs(), typescript({ ...options.compilerOptions, jsx: "react" })]
};


================================================
FILE: src/components/DisabledItem.tsx
================================================
import React, { useContext } from "react";

import { SelectContext } from "./SelectProvider";

interface DisabledItemProps {
    children: JSX.Element | string;
}

const DisabledItem: React.FC<DisabledItemProps> = ({ children }) => {
    const { classNames } = useContext(SelectContext);
    return (
        <div
            className={
                classNames && classNames.listDisabledItem
                    ? classNames.listDisabledItem
                    : "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none"
            }
        >
            {children}
        </div>
    );
};

export default DisabledItem;


================================================
FILE: src/components/GroupItem.tsx
================================================
import React from "react";

import Item from "./Item";
import { useSelectContext } from "./SelectProvider";
import { GroupOption } from "./type";

interface GroupItemProps {
    item: GroupOption;
    primaryColor: string;
}

const GroupItem: React.FC<GroupItemProps> = ({ item, primaryColor }) => {
    const { classNames, formatGroupLabel } = useSelectContext();

    return (
        <>
            {item.options.length > 0 && (
                <>
                    {formatGroupLabel ? (
                        <>{formatGroupLabel(item)}</>
                    ) : (
                        <div
                            className={
                                classNames?.listGroupLabel
                                    ? classNames.listGroupLabel
                                    : "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700"
                            }
                        >
                            {item.label}
                        </div>
                    )}

                    {item.options.map((item, index) => (
                        <Item primaryColor={primaryColor} key={index} item={item} />
                    ))}
                </>
            )}
        </>
    );
};

export default GroupItem;


================================================
FILE: src/components/Icons.tsx
================================================
import React from "react";

interface Props {
    className?: string;
}

export const CloseIcon: React.FC<Props> = ({ className = "" }) => {
    return (
        <svg
            className={className}
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                fillRule="evenodd"
                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                clipRule="evenodd"
            />
        </svg>
    );
};

export const ChevronIcon: React.FC<Props> = ({ className = "" }) => {
    return (
        <svg
            className={className}
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                fillRule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clipRule="evenodd"
            />
        </svg>
    );
};

export const SearchIcon: React.FC<Props> = ({ className = "" }) => {
    return (
        <svg
            className={className}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
        </svg>
    );
};


================================================
FILE: src/components/Item.tsx
================================================
import React, { useCallback, useMemo } from "react";

import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants";

import DisabledItem from "./DisabledItem";
import { useSelectContext } from "./SelectProvider";
import { Option } from "./type";

interface ItemProps {
    item: Option;
    primaryColor: string;
}

const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
    const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext();

    const isSelected = useMemo(() => {
        return value !== null && !Array.isArray(value) && value.value === item.value;
    }, [item.value, value]);

    const textHoverColor = useMemo(() => {
        if (COLORS.includes(primaryColor)) {
            return THEME_DATA.textHover[primaryColor as keyof typeof THEME_DATA.textHover];
        }
        return THEME_DATA.textHover[DEFAULT_THEME];
    }, [primaryColor]);

    const bgColor = useMemo(() => {
        if (COLORS.includes(primaryColor)) {
            return THEME_DATA.bg[primaryColor as keyof typeof THEME_DATA.bg];
        }
        return THEME_DATA.bg[DEFAULT_THEME];
    }, [primaryColor]);

    const bgHoverColor = useMemo(() => {
        if (COLORS.includes(primaryColor)) {
            return THEME_DATA.bgHover[primaryColor as keyof typeof THEME_DATA.bgHover];
        }
        return THEME_DATA.bgHover[DEFAULT_THEME];
    }, [primaryColor]);

    const getItemClass = useCallback(() => {
        const baseClass =
            "block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded";
        const selectedClass = isSelected
            ? `text-white ${bgColor}`
            : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;

        return classNames && classNames.listItem
            ? classNames.listItem({ isSelected })
            : `${baseClass} ${selectedClass}`;
    }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);

    return (
        <>
            {formatOptionLabel ? (
                <div onClick={() => handleValueChange(item)}>
                    {formatOptionLabel({ ...item, isSelected })}
                </div>
            ) : (
                <>
                    {item.disabled ? (
                        <DisabledItem>{item.label}</DisabledItem>
                    ) : (
                        <li
                            tabIndex={0}
                            onKeyDown={(e: React.KeyboardEvent<HTMLLIElement>) => {
                                if (e.key === ' ' || e.key === 'Enter') {
                                    handleValueChange(item)
                                }
                            }}
                            aria-selected={isSelected}
                            role={"option"}
                            onClick={() => handleValueChange(item)}
                            className={getItemClass()}
                        >
                            {item.label}
                        </li>
                    )}
                </>
            )}
        </>
    );
};

export default Item;


================================================
FILE: src/components/Options.tsx
================================================
import React, { useCallback, useContext, useMemo } from "react";

import { DEFAULT_THEME } from "../constants";

import DisabledItem from "./DisabledItem";
import GroupItem from "./GroupItem";
import Item from "./Item";
import { SelectContext } from "./SelectProvider";
import { Option, Options as ListOption } from "./type";

interface OptionsProps {
    list: ListOption;
    noOptionsMessage: string;
    text: string;
    isMultiple: boolean;
    value: Option | Option[] | null;
    primaryColor: string;
}

const Options: React.FC<OptionsProps> = ({
    list,
    noOptionsMessage,
    text,
    isMultiple,
    value,
    primaryColor = DEFAULT_THEME
}) => {
    const { classNames } = useContext(SelectContext);
    const filterByText = useCallback(() => {
        const filterItem = (item: Option) => {
            return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1;
        };

        let result = list.map(item => {
            if ("options" in item) {
                return {
                    label: item.label,
                    options: item.options.filter(filterItem)
                };
            }
            return item;
        });

        result = result.filter(item => {
            if ("options" in item) {
                return item.options.length > 0;
            }
            return filterItem(item);
        });

        return result;
    }, [text, list]);

    const removeValues = useCallback(
        (array: ListOption) => {
            if (!isMultiple) {
                return array;
            }

            if (Array.isArray(value)) {
                const valueId = value.map(item => item.value);

                const filterItem = (item: Option) => !valueId.includes(item.value);

                let newArray = array.map(item => {
                    if ("options" in item) {
                        return {
                            label: item.label,
                            options: item.options.filter(filterItem)
                        };
                    }
                    return item;
                });

                newArray = newArray.filter(item => {
                    if ("options" in item) {
                        return item.options.length > 0;
                    } else {
                        return filterItem(item);
                    }
                });

                return newArray;
            }
            return array;
        },
        [isMultiple, value]
    );

    const filterResult = useMemo(() => {
        return removeValues(filterByText());
    }, [filterByText, removeValues]);

    return (
        <div
            role="options"
            className={classNames && classNames.list ? classNames.list : "max-h-72 overflow-y-auto"}
        >
            {filterResult.map((item, index) => (
                <React.Fragment key={index}>
                    {"options" in item ? (
                        <>
                            <div className="px-2.5">
                                <GroupItem
                                    primaryColor={primaryColor || DEFAULT_THEME}
                                    item={item}
                                />
                            </div>

                            {index + 1 < filterResult.length && <hr className="my-1" />}
                        </>
                    ) : (
                        <div className="px-2.5">
                            <Item primaryColor={primaryColor || DEFAULT_THEME} item={item} />
                        </div>
                    )}
                </React.Fragment>
            ))}

            {filterResult.length === 0 && <DisabledItem>{noOptionsMessage}</DisabledItem>}
        </div>
    );
};

export default Options;


================================================
FILE: src/components/SearchInput.tsx
================================================
import React, { forwardRef, useContext } from "react";

import { SearchIcon } from "./Icons";
import { SelectContext } from "./SelectProvider";

interface SearchInputProps {
    placeholder?: string;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    name?: string;
}

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(
    { placeholder = "", value = "", onChange, name = "" },
    ref
) {
    const { classNames } = useContext(SelectContext);
    return (
        <div
            className={
                classNames && classNames.searchContainer
                    ? classNames.searchContainer
                    : "relative py-1 px-2.5"
            }
        >
            <SearchIcon
                className={
                    classNames && classNames.searchIcon
                        ? classNames.searchIcon
                        : "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500"
                }
            />
            <input
                ref={ref}
                className={
                    classNames && classNames.searchBox
                        ? classNames.searchBox
                        : "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none"
                }
                type="text"
                placeholder={placeholder}
                value={value}
                onChange={onChange}
                name={name}
            />
        </div>
    );
});

export default SearchInput;


================================================
FILE: src/components/Select.tsx
================================================
import React, { useCallback, useEffect, useRef, useState } from "react";

import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants";
import useOnClickOutside from "../hooks/use-onclick-outside";

import { ChevronIcon, CloseIcon } from "./Icons";
import Options from "./Options";
import SearchInput from "./SearchInput";
import SelectProvider from "./SelectProvider";
import Spinner from "./Spinner";
import { Option, Options as ListOption, SelectProps } from "./type";

const Select: React.FC<SelectProps> = ({
    options = [],
    value = null,
    onChange,
    onSearchInputChange,
    placeholder = "Select...",
    searchInputPlaceholder = "Search...",
    isMultiple = false,
    isClearable = false,
    isSearchable = false,
    isDisabled = false,
    loading = false,
    menuIsOpen = false,
    noOptionsMessage = "No options found",
    primaryColor = DEFAULT_THEME,
    formatGroupLabel = null,
    formatOptionLabel = null,
    classNames
}) => {
    const [open, setOpen] = useState<boolean>(menuIsOpen);
    const [list, setList] = useState<ListOption>(options);
    const [inputValue, setInputValue] = useState<string>("");
    const ref = useRef<HTMLDivElement>(null);
    const searchBoxRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        const formatItem = (item: Option) => {
            if ("disabled" in item) return item;
            return {
                ...item,
                disabled: false
            };
        };

        setList(
            options.map(item => {
                if ("options" in item) {
                    return {
                        label: item.label,
                        options: item.options.map(formatItem)
                    };
                } else {
                    return formatItem(item);
                }
            })
        );
    }, [options]);

    useEffect(() => {
        if (isSearchable) {
            if (open) {
                searchBoxRef.current?.select();
            } else {
                setInputValue("");
            }
        }
    }, [open, isSearchable]);

    const toggle = useCallback(() => {
        if (!isDisabled) {
            setOpen(!open);
        }
    }, [isDisabled, open]);

    const closeDropDown = useCallback(() => {
        if (open) setOpen(false);
    }, [open]);

    useOnClickOutside(ref, () => {
        closeDropDown();
    });

    const onPressEnterOrSpace = useCallback(
        (e: React.KeyboardEvent<HTMLDivElement>) => {
            e.preventDefault();
            if ((e.code === "Enter" || e.code === "Space") && !isDisabled) {
                toggle();
            }
        },
        [isDisabled, toggle]
    );

    const handleValueChange = useCallback(
        (selected: Option) => {
            function update() {
                if (!isMultiple && !Array.isArray(value)) {
                    closeDropDown();
                    onChange(selected);
                }

                if (isMultiple && (Array.isArray(value) || value === null)) {
                    onChange(value === null ? [selected] : [...value, selected]);
                }
            }

            if (selected !== value) {
                update();
            }
        },
        [closeDropDown, isMultiple, onChange, value]
    );

    const clearValue = useCallback(
        (e: React.MouseEvent<HTMLDivElement>) => {
            e.stopPropagation();
            onChange(null);
        },
        [onChange]
    );

    const removeItem = useCallback(
        (e: React.MouseEvent<HTMLDivElement>, item: Option) => {
            if (isMultiple && Array.isArray(value) && value.length) {
                e.stopPropagation();
                const result = value.filter(current => item.value !== current.value);
                onChange(result.length ? result : null);
            }
        },
        [isMultiple, onChange, value]
    );

    const getSelectClass = useCallback(() => {
        let ringColor = THEME_DATA.ring[DEFAULT_THEME];
        if (COLORS.includes(primaryColor)) {
            ringColor = THEME_DATA.ring[primaryColor as keyof typeof THEME_DATA.ring];
        }

        let borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME];
        if (COLORS.includes(primaryColor)) {
            borderFocus =
                THEME_DATA.borderFocus[primaryColor as keyof typeof THEME_DATA.borderFocus];
        }
        const baseClass =
            "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none";
        const defaultClass = `${baseClass} ${
            isDisabled
                ? "bg-gray-200"
                : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`
        }`;

        return classNames && classNames.menuButton
            ? classNames.menuButton({ isDisabled })
            : defaultClass;
    }, [classNames, isDisabled, primaryColor]);

    const getTagItemClass = useCallback(
        (item: Option) => {
            const baseClasse = "bg-gray-200 border rounded-sm flex space-x-1";
            const disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1";
            return classNames?.tagItem
                ? classNames.tagItem({ item, isDisabled })
                : `${baseClasse} ${disabledClass}`;
        },
        [classNames, isDisabled]
    );

    return (
        <SelectProvider
            otherData={{
                formatGroupLabel,
                formatOptionLabel,
                classNames
            }}
            value={value}
            handleValueChange={handleValueChange}
        >
            <div className="relative w-full" ref={ref}>
                <div
                    aria-expanded={open}
                    onKeyDown={onPressEnterOrSpace}
                    onClick={toggle}
                    className={getSelectClass()}
                >
                    <div className="grow pl-2.5 py-2 pr-2 flex flex-wrap gap-1">
                        {!isMultiple ? (
                            <p className="truncate cursor-default select-none">
                                {value && !Array.isArray(value) ? value.label : placeholder}
                            </p>
                        ) : (
                            <>
                                {value === null && placeholder}

                                {Array.isArray(value) &&
                                    value.map((item, index) => (
                                        <div className={getTagItemClass(item)} key={index}>
                                            <p
                                                className={
                                                    classNames?.tagItemText
                                                        ? classNames.tagItemText
                                                        : "text-gray-600 truncate cursor-default select-none"
                                                }
                                            >
                                                {item.label}
                                            </p>
                                            {!isDisabled && (
                                                <div
                                                    role="button"
                                                    tabIndex={0}
                                                    onClick={e => removeItem(e, item)}
                                                    className={
                                                        classNames?.tagItemIconContainer
                                                            ? classNames.tagItemIconContainer
                                                            : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600"
                                                    }
                                                >
                                                    <CloseIcon
                                                        className={
                                                            classNames?.tagItemIcon
                                                                ? classNames.tagItemIcon
                                                                : "w-3 h-3 mt-0.5"
                                                        }
                                                    />
                                                </div>
                                            )}
                                        </div>
                                    ))}
                            </>
                        )}
                    </div>

                    <div className="flex flex-none items-center py-1.5">
                        {loading && (
                            <div className="px-1.5">
                                <Spinner primaryColor={primaryColor} />
                            </div>
                        )}

                        {isClearable && !isDisabled && value !== null && (
                            <div className="px-1.5 cursor-pointer" onClick={clearValue}>
                                <CloseIcon
                                    className={
                                        classNames?.closeIcon
                                            ? classNames.closeIcon
                                            : "w-5 h-5 p-0.5"
                                    }
                                />
                            </div>
                        )}

                        <div className="h-full">
                            <span className="w-px h-full inline-block text-white bg-gray-300 text-opacity-0" />
                        </div>

                        <div className="px-1.5">
                            <ChevronIcon
                                className={`transition duration-300 w-6 h-6 p-0.5${
                                    open ? " transform rotate-90 text-gray-500" : " text-gray-300"
                                }`}
                            />
                        </div>
                    </div>
                </div>

                {open && !isDisabled && (
                    <div
                        className={
                            classNames?.menu
                                ? classNames.menu
                                : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"
                        }
                    >
                        {isSearchable && (
                            <SearchInput
                                ref={searchBoxRef}
                                value={inputValue}
                                placeholder={searchInputPlaceholder}
                                onChange={e => {
                                    if (
                                        onSearchInputChange &&
                                        typeof onSearchInputChange === "function"
                                    )
                                        onSearchInputChange(e);
                                    setInputValue(e.target.value);
                                }}
                            />
                        )}

                        <Options
                            list={list}
                            noOptionsMessage={noOptionsMessage}
                            text={inputValue}
                            isMultiple={isMultiple}
                            value={value}
                            primaryColor={primaryColor || DEFAULT_THEME}
                        />
                    </div>
                )}
            </div>
        </SelectProvider>
    );
};

export default Select;


================================================
FILE: src/components/SelectProvider.tsx
================================================
import React, { createContext, useContext, useMemo } from "react";

import { ClassNames, GroupOption, Option } from "./type";

interface Store {
    value: Option | Option[] | null;
    handleValueChange: (selected: Option) => void;
    formatGroupLabel: ((data: GroupOption) => JSX.Element) | null;
    formatOptionLabel: ((data: Option) => JSX.Element) | null;
    classNames?: ClassNames;
}

interface Props {
    value: Option | Option[] | null;
    handleValueChange: (selected: Option) => void;
    children: JSX.Element;
    otherData: {
        formatGroupLabel: ((data: GroupOption) => JSX.Element) | null;
        formatOptionLabel: ((data: Option) => JSX.Element) | null;
        classNames?: ClassNames;
    };
}

export const SelectContext = createContext<Store>({
    value: null,
    handleValueChange: selected => {
        console.log("selected:", selected);
    },
    formatGroupLabel: null,
    formatOptionLabel: null,
    classNames: undefined
});

export const useSelectContext = (): Store => {
    return useContext(SelectContext);
};

const SelectProvider: React.FC<Props> = ({ value, handleValueChange, otherData, children }) => {
    const store = useMemo(() => {
        return {
            value,
            handleValueChange,
            formatGroupLabel:
                otherData && typeof otherData.formatGroupLabel === "function"
                    ? otherData.formatGroupLabel
                    : null,
            formatOptionLabel:
                otherData && typeof otherData.formatOptionLabel === "function"
                    ? otherData.formatOptionLabel
                    : null,
            classNames: otherData?.classNames || undefined
        };
    }, [handleValueChange, otherData, value]);

    return <SelectContext.Provider value={store}>{children}</SelectContext.Provider>;
};

export default SelectProvider;


================================================
FILE: src/components/Spinner.tsx
================================================
import React, { useMemo } from "react";

import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants";

interface Props {
    primaryColor?: string;
}

const Spinner: React.FC<Props> = ({ primaryColor = DEFAULT_THEME }) => {
    const spinnerColor = useMemo(() => {
        if (COLORS.includes(primaryColor)) {
            return THEME_DATA.text[primaryColor as keyof typeof THEME_DATA.text];
        }
        return THEME_DATA.text[DEFAULT_THEME];
    }, [primaryColor]);

    return (
        <svg
            className={`animate-spin mr-0.5 h-5 w-5 ${spinnerColor}`}
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
        >
            <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
            />
            <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
        </svg>
    );
};

export default Spinner;


================================================
FILE: src/components/type.ts
================================================
import React from "react";

export interface Option {
    value: string;
    label: string;
    disabled?: boolean;
    isSelected?: boolean;
}

export interface GroupOption {
    label: string;
    options: Option[];
}

export type Options = Array<Option | GroupOption>;

export interface ClassNames {
    menuButton?: (value?: { isDisabled?: boolean }) => string;
    menu?: string;
    tagItem?: (value?: { item?: Option; isDisabled?: boolean }) => string;
    tagItemText?: string;
    tagItemIconContainer?: string;
    tagItemIcon?: string;
    list?: string;
    listGroupLabel?: string;
    listItem?: (value?: { isSelected?: boolean }) => string;
    listDisabledItem?: string;
    ChevronIcon?: (value?: { open?: boolean }) => string;
    searchContainer?: string;
    searchBox?: string;
    searchIcon?: string;
    closeIcon?: string;
}

export type SelectValue = Option | Option[] | null;

export interface SelectProps {
    options: Options;
    value: SelectValue;
    onChange: (value: SelectValue) => void;
    onSearchInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    placeholder?: string;
    isMultiple?: boolean;
    isClearable?: boolean;
    isSearchable?: boolean;
    isDisabled?: boolean;
    loading?: boolean;
    menuIsOpen?: boolean;
    searchInputPlaceholder?: string;
    noOptionsMessage?: string;
    primaryColor: string;
    formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null;
    formatOptionLabel?: ((data: Option) => JSX.Element) | null;
    classNames?: ClassNames;
}


================================================
FILE: src/constants/index.ts
================================================
export const COLORS = [
    "blue",
    "orange",
    "yellow",
    "red",
    "purple",
    "amber",
    "lime",
    "green",
    "emerald",
    "teal",
    "cyan",
    "sky",
    "violet",
    "indigo",
    "purple",
    "fuchsia",
    "pink",
    "rose"
];

export const DEFAULT_THEME = "blue";

export const THEME_DATA = {
    bg: {
        blue: "bg-blue-500",
        orange: "bg-orange-500",
        yellow: "bg-yellow-500",
        red: "bg-red-500",
        purple: "bg-purple-500",
        amber: "bg-amber-500",
        lime: "bg-lime-500",
        green: "bg-green-500",
        emerald: "bg-emerald-500",
        teal: "bg-teal-500",
        cyan: "bg-cyan-500",
        sky: "bg-sky-500",
        indigo: "bg-indigo-500",
        violet: "bg-violet-500",
        fuchsia: "bg-fuchsia-500",
        pink: "bg-pink-500",
        rose: "bg-rose-500"
    },
    bgHover: {
        blue: "hover:bg-blue-100",
        orange: "hover:bg-orange-100",
        yellow: "hover:bg-yellow-100",
        red: "hover:bg-red-100",
        purple: "hover:bg-purple-100",
        amber: "hover:bg-amber-100",
        lime: "hover:bg-lime-100",
        green: "hover:bg-green-100",
        emerald: "hover:bg-emerald-100",
        teal: "hover:bg-teal-100",
        cyan: "hover:bg-cyan-100",
        sky: "hover:bg-sky-100",
        indigo: "hover:bg-indigo-100",
        violet: "hover:bg-violet-100",
        fuchsia: "hover:bg-fuchsia-100",
        pink: "hover:bg-pink-100",
        rose: "hover:bg-rose-100"
    },
    ring: {
        blue: "focus:ring-blue-500/20",
        orange: "focus:ring-orange-500/20",
        yellow: "focus:ring-yellow-500/20",
        red: "focus:ring-red-500/20",
        purple: "focus:ring-purple-500/20",
        amber: "focus:ring-amber-500/20",
        lime: "focus:ring-lime-500/20",
        green: "focus:ring-green-500/20",
        emerald: "focus:ring-emerald-500/20",
        teal: "focus:ring-teal-500/20",
        cyan: "focus:ring-cyan-500/20",
        sky: "focus:ring-sky-500/20",
        indigo: "focus:ring-indigo-500/20",
        violet: "focus:ring-violet-500/20",
        fuchsia: "focus:ring-fuchsia-500/20",
        pink: "focus:ring-pink-500/20",
        rose: "focus:ring-rose-500/20"
    },
    borderFocus: {
        blue: "focus:border-blue-500",
        orange: "focus:border-orange-500",
        yellow: "focus:border-yellow-500",
        red: "focus:border-red-500",
        purple: "focus:border-purple-500",
        amber: "focus:border-amber-500",
        lime: "focus:border-lime-500",
        green: "focus:border-green-500",
        emerald: "focus:border-emerald-500",
        teal: "focus:border-teal-500",
        cyan: "focus:border-cyan-500",
        sky: "focus:border-sky-500",
        indigo: "focus:border-indigo-500",
        violet: "focus:border-violet-500",
        fuchsia: "focus:border-fuchsia-500",
        pink: "focus:border-pink-500",
        rose: "focus:border-rose-500"
    },
    text: {
        blue: "text-blue-500",
        orange: "text-orange-500",
        yellow: "text-yellow-500",
        red: "text-red-500",
        purple: "text-purple-500",
        amber: "text-amber-500",
        lime: "text-lime-500",
        green: "text-green-500",
        emerald: "text-emerald-500",
        teal: "text-teal-500",
        cyan: "text-cyan-500",
        sky: "text-sky-500",
        indigo: "text-indigo-500",
        violet: "text-violet-500",
        fuchsia: "text-fuchsia-500",
        pink: "text-pink-500",
        rose: "text-rose-500"
    },
    textHover: {
        blue: "hover:text-blue-500",
        orange: "hover:text-orange-500",
        yellow: "hover:text-yellow-500",
        red: "hover:text-red-500",
        purple: "hover:text-purple-500",
        amber: "hover:text-amber-500",
        lime: "hover:text-lime-500",
        green: "hover:text-green-500",
        emerald: "hover:text-emerald-500",
        teal: "hover:text-teal-500",
        cyan: "hover:text-cyan-500",
        sky: "hover:text-sky-500",
        indigo: "hover:text-indigo-500",
        violet: "hover:text-violet-500",
        fuchsia: "hover:text-fuchsia-500",
        pink: "hover:text-pink-500",
        rose: "hover:text-rose-500"
    }
};


================================================
FILE: src/hooks/use-onclick-outside.ts
================================================
import React, { useEffect } from "react";

export default function useOnClickOutside(
    ref: React.RefObject<HTMLDivElement>,
    handler: (e?: MouseEvent | TouchEvent) => void
) {
    useEffect(() => {
        const listener = (event: MouseEvent | TouchEvent) => {
            if (!ref.current || ref.current.contains(event.target as Node)) {
                return;
            }

            handler(event);
        };

        document.addEventListener("mousedown", listener);
        document.addEventListener("touchstart", listener);

        return () => {
            document.removeEventListener("mousedown", listener);
            document.removeEventListener("touchstart", listener);
        };
    }, [ref, handler]);
}


================================================
FILE: src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;


================================================
FILE: src/index.tsx
================================================
import Select from "./components/Select";

export default Select;


================================================
FILE: tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./page-components/**/*.{js,ts,jsx,tsx}",
        "./src/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {}
    },
    plugins: [require("@tailwindcss/forms")]
};


================================================
FILE: tsconfig.json
================================================
{
    "compilerOptions": {
        "target": "esnext",
        "lib": ["dom", "esnext"],
        "module": "esnext",
        "jsx": "preserve",
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "baseUrl": "src/",
        "declaration": true,
        "outDir": "./dist",
        "inlineSources": true,
        "sourceMap": true,
        "rootDir": "src",
        "allowJs": true,
        "skipLibCheck": true,
        "noEmit": true,
        "incremental": true,
        "resolveJsonModule": true,
        "isolatedModules": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}