{"_id":"@cristianmpx/tailwind-custom-select","_rev":"3-1ba7e73169fdbbb76c68ad9e88c18aa3","name":"@cristianmpx/tailwind-custom-select","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@cristianmpx/tailwind-custom-select","version":"1.0.0","keywords":["react","select","tailwind","component","dropdown"],"author":{"name":"Cristian Marin"},"license":"MIT","_id":"@cristianmpx/tailwind-custom-select@1.0.0","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/tailwind-custom-select#readme","bugs":{"url":"https://github.com/cristianm-developer/tailwind-custom-select/issues"},"dist":{"shasum":"37a42e94ccad5980f3d20a01e539247ae97fb3d7","tarball":"https://registry.npmjs.org/@cristianmpx/tailwind-custom-select/-/tailwind-custom-select-1.0.0.tgz","fileCount":12,"integrity":"sha512-Xckqo7m0bKQ90V2GSbMEJMuxWiyPJ5y5HK9CE62QTpcjpss8npdwBhnyPAB4RkTFmUYb5Ix7i6MREdNDtocNIw==","signatures":[{"sig":"MEUCIFM/gnBoNWxm7cpkeq9fz2D57cbTwPCh1GAKltBXYTKNAiEAzl0/0wZSUAIxP68diPoSSvSxfmHZ3chfIQPfcMY7gfY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":198105},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"90db661bd0e1fc9af5002e902a267099b403284b","scripts":{"build":"rollup -c","deploy":"gh-pages -d storybook-static","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"},"repository":{"url":"git+https://github.com/cristianm-developer/tailwind-custom-select.git","type":"git"},"_npmVersion":"10.9.0","description":"A implementation of react-custom-select styled with Tailwind Css","directories":{},"_nodeVersion":"22.12.0","dependencies":{"gh-pages":"^6.3.0","tailwind-custom-select":"file:tailwind-custom-select-1.0.0.tgz","@cristianmpx/react-custom-select":"^1.0.17"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.3","url":"^0.11.4","path":"^0.12.7","rollup":"^4.46.2","postcss":"^8.5.6","save-dev":"^0.0.1-security","storybook":"^9.1.1","css-loader":"^7.1.2","typescript":"^5.9.2","@types/node":"^24.2.0","tailwindcss":"^4.1.11","@types/react":"^19.1.9","autoprefixer":"^10.4.21","style-loader":"^4.0.0","postcss-loader":"^8.1.1","@storybook/react":"^9.1.1","@types/react-dom":"^19.1.7","@tailwindcss/postcss":"^4.1.11","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^12.1.4","@storybook/react-webpack5":"^9.1.1","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4","@storybook/addon-webpack5-compiler-swc":"^3.0.0"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-custom-select_1.0.0_1754524368092_0.17776699598904688","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cristianmpx/tailwind-custom-select","version":"1.0.1","keywords":["react","select","tailwind","component","dropdown"],"author":{"name":"Cristian Marin"},"license":"MIT","_id":"@cristianmpx/tailwind-custom-select@1.0.1","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/tailwind-custom-select#readme","bugs":{"url":"https://github.com/cristianm-developer/tailwind-custom-select/issues"},"dist":{"shasum":"05bdf6e04dad101d3a5debf49bb47d01b9a98e92","tarball":"https://registry.npmjs.org/@cristianmpx/tailwind-custom-select/-/tailwind-custom-select-1.0.1.tgz","fileCount":12,"integrity":"sha512-KWPBA4GOwQpPIJtP8LhcjMP93MQ0k0rxXVIjzoEjUQuXQZFO9tzYifWjytl2iip9w3Herue/yBX3gMETKoXalA==","signatures":[{"sig":"MEQCIHgolT2eaj3SNGsgg2bH9qyyczHnl/49dXL6BreCHOLYAiAHp095UBvQfHXWURFZr37IYRBhlsY1D9H3hYjOn/88oA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":211151},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"b60a1ce50b4214fdca097ddbfd797796e91194b1","scripts":{"build":"rollup -c","deploy":"gh-pages -d storybook-static","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"},"repository":{"url":"git+https://github.com/cristianm-developer/tailwind-custom-select.git","type":"git"},"_npmVersion":"10.9.0","description":"A implementation of react-custom-select styled with Tailwind Css","directories":{},"_nodeVersion":"22.12.0","dependencies":{"gh-pages":"^6.3.0","tailwind-custom-select":"file:tailwind-custom-select-1.0.0.tgz","@cristianmpx/react-custom-select":"^1.0.17"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.3","url":"^0.11.4","path":"^0.12.7","rollup":"^4.46.2","postcss":"^8.5.6","save-dev":"^0.0.1-security","storybook":"^9.1.1","css-loader":"^7.1.2","typescript":"^5.9.2","@types/node":"^24.2.0","tailwindcss":"^4.1.11","@types/react":"^19.1.9","autoprefixer":"^10.4.21","style-loader":"^4.0.0","postcss-loader":"^8.1.1","@storybook/react":"^9.1.1","@types/react-dom":"^19.1.7","@tailwindcss/postcss":"^4.1.11","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^12.1.4","@storybook/react-webpack5":"^9.1.1","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4","@storybook/addon-webpack5-compiler-swc":"^3.0.0"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-custom-select_1.0.1_1754524449972_0.5034263546333193","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@cristianmpx/tailwind-custom-select","version":"1.0.2","description":"A implementation of react-custom-select styled with Tailwind Css","main":"dist/index.js","module":"dist/index.esm.js","type":"module","types":"dist/index.d.ts","scripts":{"storybook":"storybook dev -p 6006","build-storybook":"storybook build","build":"rollup -c","deploy":"gh-pages -d storybook-static"},"keywords":["react","select","tailwind","component","dropdown"],"repository":{"type":"git","url":"git+https://github.com/cristianm-developer/tailwind-custom-select.git"},"author":{"name":"Cristian Marin"},"license":"MIT","dependencies":{"@cristianmpx/react-custom-select":"^1.0.17"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1"},"devDependencies":{"gh-pages":"^6.3.0","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-typescript":"^12.1.4","@storybook/addon-postcss":"^2.0.0","@storybook/addon-webpack5-compiler-swc":"^3.0.0","@storybook/react":"^9.1.1","@storybook/react-webpack5":"^9.1.1","@tailwindcss/postcss":"^4.1.11","@types/node":"^24.2.0","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","autoprefixer":"^10.4.21","css-loader":"^7.1.2","path":"^0.12.7","postcss":"^8.5.6","postcss-loader":"^8.1.1","rollup":"^4.46.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","save-dev":"^0.0.1-security","storybook":"^9.1.1","style-loader":"^4.0.0","tailwindcss":"^4.1.11","tsx":"^4.20.3","typescript":"^5.9.2","url":"^0.11.4"},"_id":"@cristianmpx/tailwind-custom-select@1.0.2","gitHead":"b60a1ce50b4214fdca097ddbfd797796e91194b1","bugs":{"url":"https://github.com/cristianm-developer/tailwind-custom-select/issues"},"homepage":"https://github.com/cristianm-developer/tailwind-custom-select#readme","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-CtE4JA0lP07S9i0K86PGbzUI1j7vj0x4QrVCxFm7Fy+o/5/3BD10w7mKRS77h0dh289XynJFivvX5A30L2ATTw==","shasum":"5d27f1bd133398d0736820db344c7b08c905ef1a","tarball":"https://registry.npmjs.org/@cristianmpx/tailwind-custom-select/-/tailwind-custom-select-1.0.2.tgz","fileCount":12,"unpackedSize":211075,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCiEpPvJ4dmlr5VANqY8Ng6Gp3qmQ5RPoJBE9tk9UxbjgIgJTXXSMenyFTZ0WaQJG+rcGVmCTgtCNqR2exXDiE22hY="}]},"_npmUser":{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"},"directories":{},"maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-custom-select_1.0.2_1754524510856_0.9405733597459973"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-06T23:52:47.988Z","modified":"2025-08-06T23:55:11.234Z","1.0.0":"2025-08-06T23:52:48.340Z","1.0.1":"2025-08-06T23:54:10.195Z","1.0.2":"2025-08-06T23:55:11.036Z"},"bugs":{"url":"https://github.com/cristianm-developer/tailwind-custom-select/issues"},"author":{"name":"Cristian Marin"},"license":"MIT","homepage":"https://github.com/cristianm-developer/tailwind-custom-select#readme","keywords":["react","select","tailwind","component","dropdown"],"repository":{"type":"git","url":"git+https://github.com/cristianm-developer/tailwind-custom-select.git"},"description":"A implementation of react-custom-select styled with Tailwind Css","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"readme":"# Tailwind Custom Select\r\n\r\nThis is an extended version of the original [`@cristianmpx/react-custom-select`](https://www.npmjs.com/package/@cristianmpx/react-custom-select) component. It enhances the original by integrating Tailwind CSS intrinsic styles to provide a native-like appearance for select elements.\r\n\r\n## Features\r\n\r\n- Uses Tailwind CSS intrinsic styles to mimic the native select element appearance more closely.\r\n- Highly customizable using Tailwind's `@apply` directive on native classes, allowing you to extend and override styles easily.\r\n- Retains all the functionality and usage patterns of the original `@cristianmpx/react-custom-select` package.\r\n\r\n## Installation\r\n\r\nInstall the package with npm:\r\n\r\n```bash\r\nnpm install @cristianmpx/tailwind-custom-select\r\n```\r\n\r\n## Usage\r\n\r\nYou can use this package just like the original `@cristianmpx/react-custom-select`. Below is an example of how to import and use the `TailwindSelect` component in a React project with TypeScript and Storybook:\r\n\r\n```tsx\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\nimport { TailwindSelect } from './tailwindSelectCustom';\r\nimport { Option, Prefix, Value } from '@cristianmpx/react-custom-select';\r\n\r\nconst meta: Meta<typeof TailwindSelect> = {\r\n  title: 'TailwindSelect',\r\n  component: TailwindSelect,\r\n  tags: ['autodocs'],\r\n  argTypes: {},\r\n};\r\n\r\nexport default meta;\r\ntype Story = StoryObj<typeof TailwindSelect>;\r\n\r\nexport const Basic: Story = {\r\n  render: () => {\r\n    return (\r\n      <TailwindSelect>\r\n        <Prefix>User: </Prefix>\r\n        <Option>Apple</Option>\r\n        <Option>Apple2</Option>\r\n        <Option>Apple3</Option>\r\n        <Option>Apple4</Option>\r\n\r\n      </TailwindSelect>\r\n    );\r\n  },\r\n};\r\n```\r\n\r\n## Preview\r\n\r\nYou can see a live preview of this component and its behavior at:  \r\n[https://cristianm-developer.github.io/tailwind-custom-select/](https://cristianm-developer.github.io/tailwind-custom-select/)\r\n\r\n## Customizing Appearance\r\n\r\nThis extended version leverages Tailwind CSS intrinsic styles to provide a more native look and feel. You can customize the appearance further by using Tailwind's `@apply` directive on the native classes used within the component.\r\n\r\nFor example, to customize the select element's appearance, you can add styles in your CSS like:\r\n\r\n```css\r\n.custom-select {\r\n  @apply bg-white border border-gray-300 rounded-md shadow-sm;\r\n}\r\n\r\n.custom-select:focus {\r\n  @apply outline-none ring-2 ring-blue-500;\r\n}\r\n```\r\n\r\nAdjust the classes as needed to fit your design requirements.\r\n\r\n## Contributing\r\n\r\nContributions and suggestions are welcome. Please refer to the original repository for contribution guidelines.\r\n\r\n## License\r\n\r\nThis project inherits the license of the original `@cristianmpx/react-custom-select` package.","readmeFilename":"README.md"}