{"_id":"@asnewyla/unstyled-switch","name":"@asnewyla/unstyled-switch","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@asnewyla/unstyled-switch","version":"0.2.0","description":"Unstyled switch (toggle) input primitive with accessibility","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/unstyled-switch"},"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"},"./test-utils":{"types":"./dist/test-utils.d.ts","import":"./dist/test-utils.mjs","require":"./dist/test-utils.js"}},"sideEffects":false,"keywords":["react","switch","toggle","unstyled","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0"},"peerDependenciesMeta":{"@testing-library/react":{"optional":true},"@testing-library/user-event":{"optional":true}},"devDependencies":{"react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.1.0","vitest":"^2.0.0","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@testing-library/jest-dom":"^6.4.0","jsdom":"^24.0.0","typescript":"^5.5.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/unstyled-switch@0.2.0","dist":{"integrity":"sha512-UlU/xyPyLGMiIHd5WhIfMrfCyCKNrP2dEHSDuF69SWZi7kg718FBIJkkGn9Zl8wYNYkrRHTazLfO0pqhMSQutw==","shasum":"713383c05b3902e9c1acefe61fe07cb3ee90650d","tarball":"https://registry.npmjs.org/@asnewyla/unstyled-switch/-/unstyled-switch-0.2.0.tgz","fileCount":15,"unpackedSize":19236,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCXgIMRZ54C9mNlP/ye4bsOpif4jcujbAGSNPHKEntDfQIgUcR/X67oxbW72Xpq/bnWqh1Y/XZije56HNx7cdounvo="}]},"_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/unstyled-switch_0.2.0_1787946282077_0.2659759525268919"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-28T19:44:41.906Z","0.2.0":"2026-08-28T19:44:42.203Z","modified":"2026-08-28T19:44:42.368Z"},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"description":"Unstyled switch (toggle) input primitive with accessibility","keywords":["react","switch","toggle","unstyled","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/unstyled-switch"},"license":"MIT","readme":"# @asnewyla/unstyled-switch\n\nUnstyled, accessible switch (toggle) input primitive. A real\n`<input type=\"checkbox\">` under a `role=\"switch\"` override — handles\nchecked state, focus, and invalid-state tracking without imposing any\nvisual styling — the base layer under `@asnewyla/switch`.\n\n## Install\n\n```bash\nnpm install @asnewyla/unstyled-switch\n```\n\n## Usage\n\n```tsx\nimport { UnstyledSwitch } from '@asnewyla/unstyled-switch';\n\n// Uncontrolled\n<UnstyledSwitch aria-label=\"Notifications\" defaultChecked={false} />\n\n// Controlled\n<UnstyledSwitch\n  aria-label=\"Notifications\"\n  checked={enabled}\n  onChange={(e) => setEnabled(e.target.checked)}\n/>\n\n// Invalid state\n<UnstyledSwitch aria-label=\"Notifications\" invalid />\n```\n\n### Props\n\n| Prop | Type | Default |\n|---|---|---|\n| `checked` / `defaultChecked` | `boolean` | — |\n| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | — |\n| `disabled` | `boolean` | `false` |\n| `invalid` | `boolean` | `false` |\n\nUncontrolled by default, same as a native `<input type=\"checkbox\">` — pass\n`checked` + `onChange` to control it yourself. No `indeterminate` — that's\na checkbox concept, not a switch one; a switch is always fully on or off.\n\n### Why a checkbox, not a custom widget\n\nRenders `<input type=\"checkbox\" role=\"switch\">` — the standard WAI-ARIA\nswitch pattern, not a hand-rolled `<div role=\"switch\">`. This gets native\nkeyboard activation (Space toggles), native form participation, and\ncorrect browser/screen-reader behavior for free, with `role=\"switch\"` as\nthe only thing distinguishing it from `@asnewyla/unstyled-checkbox`\nvisually and semantically to assistive tech (\"on/off\" announced instead\nof \"checked/unchecked\").\n\n### Accessibility\n\nState is exposed two ways, deliberately asymmetric:\n\n- `data-checked` (and `data-focused`/`data-disabled`/`data-invalid`) —\n  present only when true, omitted otherwise. The styling hook for\n  `@asnewyla/switch` (or your own styled wrapper), same `data-*`\n  convention every `@asnewyla/*` primitive uses.\n- `aria-checked` — always present as an explicit `\"true\"`/`\"false\"`\n  string, never omitted. This is what actually conveys state to\n  assistive tech once `role=\"switch\"` overrides the input's native\n  semantics; a real browser computes this from the native `checked`\n  property on its own, but setting it explicitly here is cheap insurance\n  rather than relying on that alone.\n\n`aria-invalid`/`data-invalid` follow the same pattern as every other\n`@asnewyla/*` primitive.\n\n## License\n\nMIT\n","readmeFilename":"","_rev":"1-a2f73845454088e4208d0d3b1f73988c"}