{"_id":"99foundr-super-select","_rev":"2-54f5228b7312bdb31abd118a98726f18","name":"99foundr-super-select","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"99foundr-super-select","version":"1.0.0","keywords":["react","select","multiselect","combobox","accessibility","headless","virtualized"],"author":{"name":"Varun Jain","email":"varun@jainvarun.com"},"license":"MIT","_id":"99foundr-super-select@1.0.0","maintainers":[{"name":"codervj","email":"varun@jainvarun.com"}],"dist":{"shasum":"4dff2c591370c1f06964ab8edb3b0f9499a1408e","tarball":"https://registry.npmjs.org/99foundr-super-select/-/99foundr-super-select-1.0.0.tgz","fileCount":3,"integrity":"sha512-3Q7inxf8NIczFSSsM9ePsjKHZfxa0YNo5+s1DhJKWWQbaXyof2h7L2x+qoRSaRZYgItFF3Sk0ez7asBNBuhqWQ==","signatures":[{"sig":"MEYCIQDX/K0ZtjHRBmfGE0SN/HL9T2+hMSr9XbIlxX84ePK2DwIhALP5l0YmzR3TaXFWoDXNHc3sA6ju38qEIQN9EuoEgUNn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7550},"main":"dist/index.cjs","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles/base.css":"./dist/styles/base.css","./styles/bootstrap.css":"./dist/styles/bootstrap.css"},"gitHead":"0a09268d452e98984b3110b3030f66a17639fc01","scripts":{"dev":"vite","lint":"eslint .","test":"jest","build":"rollup -c","format":"prettier -w .","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"codervj","email":"varun@jainvarun.com"},"_npmVersion":"11.4.2","description":"A lightweight, accessible, highly customizable React multi-select component library.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.2.0","dependencies":{"react-window":"^1.8.10"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","vite":"^5.3.5","react":"^18.3.1","eslint":"^9.2.0","rollup":"^4.16.4","ts-jest":"^29.1.2","prettier":"^3.3.3","react-dom":"^18.3.1","typescript":"^5.5.4","@types/jest":"^29.5.12","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@types/react-window":"^1.8.8","eslint-plugin-react":"^7.34.2","@vitejs/plugin-react":"^4.3.1","rollup-plugin-terser":"^7.0.2","@storybook/react-vite":"^8.5.3","@testing-library/react":"^16.2.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@rollup/plugin-node-resolve":"^15.2.3","@storybook/addon-essentials":"^8.5.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/99foundr-super-select_1.0.0_1773165734723_0.5025475354550719","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"99foundr-super-select","version":"1.0.1","description":"A lightweight, accessible, highly customizable React multi-select component library.","license":"MIT","author":{"name":"Varun Jain","email":"varun@jainvarun.com"},"keywords":["react","select","multiselect","combobox","accessibility","headless","virtualized"],"main":"dist/index.cjs","module":"dist/index.mjs","unpkg":"dist/index.umd.js","types":"dist/index.d.ts","sideEffects":["*.css"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles/base.css":"./dist/styles/base.css","./styles/bootstrap.css":"./dist/styles/bootstrap.css"},"scripts":{"dev":"vite","build":"rollup -c","test":"jest","storybook":"storybook dev -p 6006","build-storybook":"storybook build","lint":"eslint .","format":"prettier -w ."},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"react-window":"^1.8.10"},"devDependencies":{"@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@storybook/addon-essentials":"^8.5.3","@storybook/react-vite":"^8.5.3","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^16.2.0","@types/jest":"^29.5.12","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@types/react-window":"^1.8.8","eslint":"^9.2.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react":"^7.34.2","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","prettier":"^3.3.3","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^4.16.4","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","ts-jest":"^29.1.2","typescript":"^5.5.4","vite":"^5.3.5","@vitejs/plugin-react":"^4.3.1"},"_id":"99foundr-super-select@1.0.1","gitHead":"a246aaf407394151e97a0ddfc522a3de6e159ccd","_nodeVersion":"24.2.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-sTh8n9Pmw7uWCfQU9p5Ir1os+Zs4H0FJgqXqBMpq+yZmJtCJjdc02u6D5u2EucNm8HuD/f4zC6qRiveE3gdMOg==","shasum":"e6445fac17e00ce1458072d990f11d036fa0c52b","tarball":"https://registry.npmjs.org/99foundr-super-select/-/99foundr-super-select-1.0.1.tgz","fileCount":3,"unpackedSize":7553,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBMMAj4k6SO89WFaoetIwR2lhHrZjttydAd2PFh+iTLsAiEArVJrKy70lknYN/zJttWAwYg86BzA9Dlf/qd2bFnFtAU="}]},"_npmUser":{"name":"codervj","email":"varun@jainvarun.com"},"directories":{},"maintainers":[{"name":"codervj","email":"varun@jainvarun.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/99foundr-super-select_1.0.1_1773166138389_0.6085960906237"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-10T18:02:14.635Z","modified":"2026-03-10T18:08:58.661Z","1.0.0":"2026-03-10T18:02:14.878Z","1.0.1":"2026-03-10T18:08:58.543Z"},"author":{"name":"Varun Jain","email":"varun@jainvarun.com"},"license":"MIT","keywords":["react","select","multiselect","combobox","accessibility","headless","virtualized"],"description":"A lightweight, accessible, highly customizable React multi-select component library.","maintainers":[{"name":"codervj","email":"varun@jainvarun.com"}],"readme":"# 99foundr-super-select\n\nA lightweight, accessible, highly customizable React select and multi-select component library designed natively for React with optional headless mode, Bootstrap compatibility, and virtualized lists.\n\n## Installation\n\n```bash\nnpm i 99foundr-super-select\n```\n\nor\n\n```bash\nyarn add 99foundr-super-select\n```\n\n## Usage\n\n### Single Select\n\n```tsx\nimport React, { useState } from \"react\";\nimport { Select } from \"react-super-select\";\nimport \"react-super-select/styles/base.css\";\n\nconst options = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Cherry\", value: \"cherry\" },\n];\n\nexport const Example = () => {\n  const [value, setValue] = useState(null);\n  return <Select options={options} value={value} onChange={setValue} />;\n};\n```\n\n### Multi Select\n\n```tsx\nimport React, { useState } from \"react\";\nimport { MultiSelect } from \"react-super-select\";\nimport \"react-super-select/styles/base.css\";\n\nconst options = [\n  { label: \"Alpha\", value: \"a\" },\n  { label: \"Beta\", value: \"b\" },\n  { label: \"Gamma\", value: \"c\" },\n];\n\nexport const Example = () => {\n  const [value, setValue] = useState([]);\n  return (\n    <MultiSelect\n      options={options}\n      value={value}\n      onChange={setValue}\n      clearable\n      searchable\n    />\n  );\n};\n```\n\n### Async Search\n\n```tsx\n<Select\n  options={[]}\n  value={value}\n  onChange={setValue}\n  loadOptions={async (input) => {\n    return [\n      { label: `Result ${input} A`, value: `${input}-a` },\n      { label: `Result ${input} B`, value: `${input}-b` },\n    ];\n  }}\n/>\n```\n\n## Styling Guide\n\nThe library supports three styling modes:\n\n1. Headless: import no CSS and provide all styles yourself.\n2. Default Theme: import the minimal base styles.\n3. Bootstrap Theme: import Bootstrap-compatible styles.\n\n```tsx\nimport \"react-super-select/styles/base.css\"; // default theme\n// or\nimport \"react-super-select/styles/bootstrap.css\"; // bootstrap theme\n```\n\n### Class Overrides\n\nUse the `classNames` prop to override classes per element.\n\n```tsx\n<Select\n  options={options}\n  value={value}\n  onChange={setValue}\n  classNames={{\n    container: \"my-container\",\n    control: \"my-control\",\n    dropdown: \"my-dropdown\",\n    option: \"my-option\",\n  }}\n/>\n```\n\n## Accessibility Guide\n\nThis library follows the WAI-ARIA combobox pattern:\n\n- Container: `role=\"combobox\"`\n- Dropdown: `role=\"listbox\"`\n- Option: `role=\"option\"`\n- Multi-select listbox: `aria-multiselectable=\"true\"`\n- Selected options: `aria-selected=\"true\"`\n\nKeyboard interactions:\n\n- ArrowDown: next option\n- ArrowUp: previous option\n- Enter: select\n- Escape: close dropdown\n- Backspace: remove last tag (multi)\n- Tab: exit\n\n## API Documentation\n\n### `Select`\n\nProps:\n\n- `options: Option[]`\n- `value: Option | null`\n- `onChange: (value: Option | null) => void`\n- `searchable?: boolean`\n- `clearable?: boolean`\n- `disabled?: boolean`\n- `searchType?: \"startsWith\" | \"contains\" | \"fuzzy\"`\n- `classNames?: ClassNames`\n- `components?: CustomComponents`\n- `portal?: boolean | HTMLElement`\n- `taggable?: boolean`\n- `onCreateOption?: (input: string) => Option`\n- `loadOptions?: (input: string) => Promise<Option[]>`\n- `debounceMs?: number`\n\n### `MultiSelect`\n\nProps:\n\n- All `Select` props\n- `value: Option[]`\n- `onChange: (value: Option[]) => void`\n- `maxSelections?: number`\n\n### `Option` type\n\n```ts\ntype Option = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n  group?: string;\n  meta?: Record<string, any>;\n};\n```\n\n### `ClassNames`\n\n```ts\ntype ClassNames = {\n  container?: string;\n  control?: string;\n  input?: string;\n  dropdown?: string;\n  option?: string;\n  optionActive?: string;\n  optionSelected?: string;\n  tag?: string;\n  tagRemove?: string;\n  placeholder?: string;\n};\n```\n\n### `CustomComponents`\n\n```ts\ntype CustomComponents = {\n  Option?: React.ComponentType;\n  Tag?: React.ComponentType;\n  Dropdown?: React.ComponentType;\n  SearchInput?: React.ComponentType;\n};\n```\n\n## Performance Benchmarks\n\n- Core bundle target: under 8kb gzipped\n- Full bundle target: under 18kb gzipped\n- First render target: under 20ms\n- Dropdown open target: under 10ms\n\nInternal optimizations include memoized components, virtualization for large lists (over 200 options), and debounced search input (250ms).\n\n## SSR Support\n\nThe components are safe for Next.js, Remix, and Astro. All browser-only APIs are accessed in effects.\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}