{"_id":"@asnewyla/checkbox","_rev":"2-200edc8634f1aed244cce9ec23b81d8f","name":"@asnewyla/checkbox","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@asnewyla/checkbox","version":"0.2.0","keywords":["react","checkbox","form","styled","accessible"],"license":"MIT","_id":"@asnewyla/checkbox@0.2.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"3dd16db5c15b74f9ef24ea955946ffd8d43dbb9e","tarball":"https://registry.npmjs.org/@asnewyla/checkbox/-/checkbox-0.2.0.tgz","fileCount":11,"integrity":"sha512-FrdjQCv8nFR6ISLfoqbobLhMuLWPxQ50Lgw46DHMKeiNRq4XnvE4LEG/sUNffgbvz/WZSDCUa9MoRW7/6/CTrw==","signatures":[{"sig":"MEQCIAH1ZW3E/oODgeNT4WDrJQtYJ9YLfOwh3vDP6m7QA8D+AiAfClh0K2Dr8Iv91NM7ZnZYUvONrbZkc4+uuWe3xEqr2g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17646},"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/checkbox"},"description":"Styled checkbox with label, validation error display, and accessibility","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.19.0","dependencies":{"@asnewyla/unstyled-checkbox":"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/checkbox_0.2.0_1787564636678_0.5325160524722912","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@asnewyla/checkbox","version":"0.2.1","description":"Styled checkbox with label, validation error display, and accessibility","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/checkbox"},"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","checkbox","form","styled","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@asnewyla/unstyled-checkbox":"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/checkbox@0.2.1","dist":{"integrity":"sha512-wgM/fAtAE8TN9697YWPLeMuu1+nvTucXm1dqt9jXQjM/568FNZDeMQpvUu1rWuEEeXuqYxMTnJ8NKZiGJYvyBQ==","shasum":"a8169f8a03e05e99d2e7d321af8cb2d81d44c2ac","tarball":"https://registry.npmjs.org/@asnewyla/checkbox/-/checkbox-0.2.1.tgz","fileCount":11,"unpackedSize":17926,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAzGqVVNU17lWB+3rvJplFQTOqUqv/i9JU2hOBv8V0IQAiEArhBMSgtwLfMc1zwPm9N7CcOBsr74l/+eMU3HfFESPYE="}]},"_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/checkbox_0.2.1_1787860427336_0.7369707381408581"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-24T09:43:56.428Z","modified":"2026-08-27T19:53:47.606Z","0.2.0":"2026-08-24T09:43:56.812Z","0.2.1":"2026-08-27T19:53:47.465Z"},"license":"MIT","keywords":["react","checkbox","form","styled","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/checkbox"},"description":"Styled checkbox with label, validation error display, and accessibility","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"readme":"# @asnewyla/checkbox\n\nStyled checkbox built on `@asnewyla/unstyled-checkbox`. Label association,\ninline validation error, indeterminate state, full keyboard/focus\naccessibility.\n\n## Install\n\n```bash\nnpm install @asnewyla/checkbox\n```\n\nImport the stylesheet once, anywhere in your app:\n\n```ts\nimport '@asnewyla/checkbox/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Checkbox } from '@asnewyla/checkbox';\n\n<Checkbox label=\"Accept terms\" />\n\n<Checkbox\n  label=\"Accept terms\"\n  error=\"You must accept the terms to continue\"\n/>\n\n// Controlled\n<Checkbox\n  label=\"Accept terms\"\n  checked={accepted}\n  onChange={(e) => setAccepted(e.target.checked)}\n/>\n\n// Indeterminate (\"select all\" style)\n<Checkbox label=\"Select all\" indeterminate />\n```\n\n### Props\n\n| Prop | Type | Default |\n|---|---|---|\n| `label` | `string` (**required**) | — |\n| `error` | `string` | — |\n| `checked` / `defaultChecked` | `boolean` | — |\n| `indeterminate` | `boolean` | `false` |\n| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | — |\n| `disabled` | `boolean` | `false` |\n| `id` | `string` | auto-generated via `useId()` |\n\n`error` doubles as the invalid-state flag — there's no separate `invalid`\nprop. Setting `error` sets `aria-invalid` on the input and links it via\n`aria-describedby` to the rendered error message; there's no way to end up\nwith one without the other. Same convention `@asnewyla/input` uses.\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}\n```\n\n## License\n\nMIT\n","readmeFilename":""}