{"_id":"@asnewyla/radio-group","_rev":"2-cc8d9d633af522ce3ebdb12a094789eb","name":"@asnewyla/radio-group","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@asnewyla/radio-group","version":"0.2.0","keywords":["react","radio-group","radio","accessible"],"license":"MIT","_id":"@asnewyla/radio-group@0.2.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"9bddfdfe8d39fdccbff854e51c1e04e58a340c53","tarball":"https://registry.npmjs.org/@asnewyla/radio-group/-/radio-group-0.2.0.tgz","fileCount":9,"integrity":"sha512-z6ww1qwRv9cF2G0Z2FbeWAajqASgY1PFVm5HpVRE1OaU6djyOqGpZUVc8bdAVIj2G57Hm5gNdAlJdKa97vzRQA==","signatures":[{"sig":"MEUCIQDXwloXGMXQBaQvpUNk0rD4mKoouzhVCGCgmWsww0R8ZQIgJPQHD6MCpQKDcIzx1aLVFSx9QpwM5xrEaIMyWOSsyIQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13564},"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"}},"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/radio-group"},"description":"Groups radios and shares selected value/name via context","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","dependencies":{"@asnewyla/radio":"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/radio-group_0.2.0_1787564638859_0.056160818137124924","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"_id":"@asnewyla/radio-group@0.2.1","dist":{"shasum":"a7e654da777a194216b6b12bb4532e1b16d6db00","tarball":"https://registry.npmjs.org/@asnewyla/radio-group/-/radio-group-0.2.1.tgz","fileCount":9,"integrity":"sha512-hY6GPeizLzsd28g8k3FyRTvuhM8t5WvbqXiLMpNKtIIsT5Y4OTQRor3B6NhS3qzSDpg9zV0g2l1cjUJRTrefIw==","signatures":[{"sig":"MEUCIQC4mxs0zNkp79FC+lF4OKjyGqlg1Uzt7wAKZ6gvlobxxgIgHnxons7CmmL6hl785ToD3s03tsdS9zuKgmSizQNZgis=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCtE8Vb4pOj56i623c6svtFGbmlMhOpMfZPMPzhtf8rnwIgGIG2aid4qqu8ez8Wmuaws+efF37SWKbIUarSMYSMFl8="}],"unpackedSize":13564},"main":"dist/index.js","name":"@asnewyla/radio-group","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"license":"MIT","scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest run --coverage"},"version":"0.2.1","_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"keywords":["react","radio-group","radio","accessible"],"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/radio-group"},"description":"Groups radios and shares selected value/name via context","directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"sideEffects":false,"_nodeVersion":"24.19.0","dependencies":{"@asnewyla/radio":"0.2.1"},"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":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/radio-group_0.2.1_1787860587564_0.9046191959588525"}}},"time":{"created":"2026-08-24T09:43:58.677Z","modified":"2026-08-27T19:56:27.783Z","0.2.0":"2026-08-24T09:43:59.015Z","0.2.1":"2026-08-27T19:56:27.642Z"},"license":"MIT","keywords":["react","radio-group","radio","accessible"],"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/radio-group"},"description":"Groups radios and shares selected value/name via context","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"readme":"# @asnewyla/radio-group\n\nGroups `@asnewyla/radio`'s `Radio` into a `role=\"radiogroup\"`, owning which\nvalue is currently selected (controlled or uncontrolled) as one shared\nsource of truth.\n\n## Install\n\n```bash\nnpm install @asnewyla/radio-group\n```\n\n## Usage\n\n```tsx\nimport { RadioGroup } from '@asnewyla/radio-group';\nimport { Radio } from '@asnewyla/radio';\n\n// Uncontrolled\n<RadioGroup name=\"size\" defaultValue=\"md\">\n  <Radio label=\"Small\" value=\"sm\" />\n  <Radio label=\"Medium\" value=\"md\" />\n  <Radio label=\"Large\" value=\"lg\" />\n</RadioGroup>\n\n// Controlled\n<RadioGroup name=\"size\" value={size} onChange={setSize}>\n  <Radio label=\"Small\" value=\"sm\" />\n  <Radio label=\"Medium\" value=\"md\" />\n  <Radio label=\"Large\" value=\"lg\" />\n</RadioGroup>\n```\n\nMember `Radio`s don't need their own `checked`/`onChange`/`name` — they\nread `checked` from the group's selected value (comparing it against\ntheir own `value`), route selection through the group's `onChange`, and\ninherit `name` automatically. A `Radio`'s own explicit `checked` prop\nstill takes precedence if you pass one anyway, matching how `Button`\nresolves props against `ButtonGroupContext`.\n\n### Props\n\n| Prop | Type | Default |\n|---|---|---|\n| `name` | `string` (**required**) | — |\n| `value` / `defaultValue` | `string` | — |\n| `onChange` | `(value: string) => void` | — |\n| `children` | `React.ReactNode` (**required**) | — |\n\nEvery other native `<div>` prop (`aria-label`, `className`, ...) is\naccepted and forwarded to the `role=\"radiogroup\"` root element.\n\n## Why this exists\n\nTwo `Radio`s sharing a native `name` already get correct browser-level\nexclusivity for free — clicking one genuinely unchecks the other at the\nDOM level, no JavaScript required. But each one only learns about its\n*own* checked state through its *own* `change` event; browsers never fire\none on a radio that gets deselected as a side effect of a sibling being\nselected. Without `RadioGroup`, that means the deselected radio's visual\nstate (driven by `data-checked`, not `:checked`) can go stale even though\nthe underlying `<input>` really is unchecked.\n\n`RadioGroup` fixes this by being the single owner of \"which value is\nselected\" — every member `Radio` reads its `checked` state from the same\ncontext value on every render, so there's no per-radio state to fall out\nof sync in the first place. See `@asnewyla/unstyled-radio`'s README for\nthe underlying limitation this exists to fix, and how to reproduce it\nwithout `RadioGroup`.\n\n## License\n\nMIT\n","readmeFilename":""}