{"_id":"@asnewyla/select","_rev":"2-05b52cbe0163031294da627636440eb1","name":"@asnewyla/select","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@asnewyla/select","version":"0.2.0","keywords":["react","select","combobox","form","styled","accessible"],"license":"MIT","_id":"@asnewyla/select@0.2.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"3e612cad732cb4b1ee02d5c2a349f3415b5c8fb7","tarball":"https://registry.npmjs.org/@asnewyla/select/-/select-0.2.0.tgz","fileCount":11,"integrity":"sha512-vPPNTBszR9sJiqGNkHczeJ7YFBwM2NLA7PSQY6t8cpg/xHmUxm4KehArLh85ffstPX2dX2YBdENicoaSGUv8LA==","signatures":[{"sig":"MEYCIQC02KOsR0PiEJZCnHfDRwzprm8aTXHNjRjgGi14PD9pUQIhAKMw/Ps16f73slF2LV5lJlcYM1YNGcYuQpK9H3SnQykB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53053},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css"},"scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/select"},"description":"Styled select/combobox with label, validation error display, and accessibility","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.19.0","dependencies":{"@asnewyla/unstyled-select":"0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","jsdom":"^24.0.0","react":"^18.3.0","vitest":"^2.0.0","react-dom":"^18.3.0","typescript":"^5.5.0","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.0","@testing-library/user-event":"^14.5.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/select_0.2.0_1787691189566_0.5893654801129506","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@asnewyla/select","version":"0.2.1","description":"Styled select/combobox with label, validation error display, and accessibility","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/select"},"publishConfig":{"access":"public"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css"},"sideEffects":["*.css"],"keywords":["react","select","combobox","form","styled","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@asnewyla/unstyled-select":"0.2.0"},"devDependencies":{"@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@vitest/coverage-v8":"^2.0.0","jsdom":"^24.0.0","react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.1.0","typescript":"^5.5.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","type-check":"tsc --noEmit"},"_nodeVersion":"24.19.0","_id":"@asnewyla/select@0.2.1","dist":{"integrity":"sha512-7P3QApsT059N62WQOMYcPvMLRs3sgwiUmcOqaMxs+DCsFYDsSsEqFieFyYSplDmaygNnwLksW9TCbFo/s6Z23g==","shasum":"43410961bb86492ce2a376481ac9c13821044ea4","tarball":"https://registry.npmjs.org/@asnewyla/select/-/select-0.2.1.tgz","fileCount":11,"unpackedSize":53565,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDAdU16faBGvQKN6TOdjn5/ZlTS/TJZd3u7zNqYieAX6AiACy1ylKzf+uPLcgCTIOTojJpApXYR76Cws4WB8IXK4cg=="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/select_0.2.1_1787860427376_0.27907997430185194"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-25T20:53:09.230Z","modified":"2026-08-27T19:53:47.722Z","0.2.0":"2026-08-25T20:53:09.699Z","0.2.1":"2026-08-27T19:53:47.550Z"},"license":"MIT","keywords":["react","select","combobox","form","styled","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/select"},"description":"Styled select/combobox with label, validation error display, and accessibility","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"readme":"# @asnewyla/select\n\nStyled select/combobox built on `@asnewyla/unstyled-select`. Label\nassociation, inline validation error, client-side search/filter, and\nremovable chips for multi-select — full keyboard/focus accessibility.\n\n## Install\n\n```bash\nnpm install @asnewyla/select\n```\n\nImport the stylesheet once, anywhere in your app:\n\n```ts\nimport '@asnewyla/select/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Select } from '@asnewyla/select';\n\nconst fruitOptions = [\n  { value: 'apple', label: 'Apple' },\n  { value: 'banana', label: 'Banana' },\n  { value: 'cherry', label: 'Cherry', disabled: true },\n];\n\n<Select\n  label=\"Fruit\"\n  options={fruitOptions}\n  placeholder=\"Choose a fruit\"\n/>\n\n<Select\n  label=\"Fruit\"\n  options={fruitOptions}\n  error=\"Pick a fruit to continue\"\n/>\n\n// Controlled\n<Select\n  label=\"Fruit\"\n  options={fruitOptions}\n  value={selected}\n  onChange={setSelected}\n/>\n\n// Multi-select — selected options render as removable chips\n<Select\n  label=\"Fruit\"\n  options={fruitOptions}\n  multiple\n  defaultValue={['apple', 'banana']}\n  onChange={(values) => console.log(values)}\n/>\n```\n\n### Props\n\nEverything `@asnewyla/unstyled-select` accepts, plus:\n\n| Prop | Type | Default |\n|---|---|---|\n| `label` | `string` (**required**) | — |\n| `error` | `string` | — |\n\n`error` doubles as the invalid-state flag — there's no separate `invalid`\nprop, and `renderValue` isn't exposed either (its multi-select chip\nrendering is what this package provides). Setting `error` sets\n`aria-invalid`/`data-invalid` on the trigger and links it via\n`aria-describedby` to the rendered error message. Same convention\n`@asnewyla/input` and `@asnewyla/checkbox` use.\n\n### Multi-select chips\n\nEach selected option renders as a chip with its own remove button\n(`aria-label=\"Remove <label>\"`). Removing a chip calls `onChange` with\nthat option deselected — the same toggle clicking it again in the listbox\nwould trigger. The listbox is still there for adding more options; chips\nare just an alternate way to see and remove what's already selected.\n\nSingle-select shows the selected label as plain text, unchanged from\n`@asnewyla/unstyled-select`'s own default — chips are a multi-select-only\naffordance.\n\n### Theming\n\nOverride the CSS custom properties — defaults adapt automatically to\n`prefers-color-scheme` via `@asnewyla/tokens`:\n\n```css\n:root {\n  --xd-color-primary: #0d9488;\n  --xd-color-destructive: #dc2626;\n  --xd-color-surface: #ffffff;\n}\n```\n\n### Not yet supported\n\nInherits `@asnewyla/unstyled-select`'s own limitations — see its README:\nno native `FormData` form participation, and the listbox popup renders\ninline (no portal), so it can be visually clipped by an `overflow: hidden`\nor scrolling ancestor.\n\n## License\n\nMIT\n","readmeFilename":""}