{"_id":"@darksnow-ui/radio-group","name":"@darksnow-ui/radio-group","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/radio-group","version":"1.0.0","description":"radio-group component for DarkSnow UI","keywords":["react","radio-group","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/radio-group"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-radio-group":"^1.2.1","@radix-ui/react-icons":"^1.3.2","clsx":"^2.1.1","@darksnow/ui-utils":"1.0.0"},"devDependencies":{"@types/react":"^19.1.0","@types/react-dom":"^19.1.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/radio-group@1.0.0","_integrity":"sha512-qfgOFDhOoUpUclNm7ZyXPICMgdiL8SR11eAYgnvgji4BSwhMbkol+cY/JTCnxvn18ccT67q/0x+QVdH8iYBxkQ==","_resolved":"/tmp/11ef0ed4255bde18dc9c53e58e634add/darksnow-ui-radio-group-1.0.0.tgz","_from":"file:darksnow-ui-radio-group-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qfgOFDhOoUpUclNm7ZyXPICMgdiL8SR11eAYgnvgji4BSwhMbkol+cY/JTCnxvn18ccT67q/0x+QVdH8iYBxkQ==","shasum":"2adb48d692a44058aba9c496889b35acc93815c6","tarball":"https://registry.npmjs.org/@darksnow-ui/radio-group/-/radio-group-1.0.0.tgz","fileCount":8,"unpackedSize":15875,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC4zeA3OnplOCQFUy+Sr+bYJkPH6dLwYUKqwX5oGOnChgIhALmTFERiN+maZQxav7DNZ5B/og0D8EaRNW0Zm9aADTib"}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/radio-group_1.0.0_1749338987379_0.9794815870222127"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:47.279Z","1.0.0":"2025-06-07T23:29:47.539Z","modified":"2025-06-07T23:29:47.809Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"radio-group component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","radio-group","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/radio-group"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# Radio Group\n\nA set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. Built on top of Radix UI Radio Group primitive.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/radio-group\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-dom\n```\n\n## Usage\n\n```tsx\nimport { RadioGroup, RadioGroupItem } from \"@darksnow-ui/radio-group\"\nimport { Label } from \"@darksnow-ui/label\"\n\nexport function RadioGroupExample() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n```\n\n## Components\n\n### RadioGroup\n\nThe root container for radio group items.\n\n| Prop         | Type              | Default | Description                    |\n|--------------|-------------------|---------|--------------------------------|\n| defaultValue | string            | -       | Default selected value         |\n| value        | string            | -       | Controlled selected value      |\n| onValueChange| function          | -       | Called when value changes      |\n| name         | string            | -       | Form name attribute            |\n| disabled     | boolean           | false   | Disables all radio items       |\n| orientation  | \"horizontal\" \\| \"vertical\" | \"vertical\" | Layout orientation |\n| className    | string            | -       | Additional CSS classes         |\n\n### RadioGroupItem\n\nA single radio item within the group.\n\n| Prop      | Type              | Default | Description                    |\n|-----------|-------------------|---------|--------------------------------|\n| value     | string            | -       | The value for this radio item  |\n| disabled  | boolean           | false   | Disables this radio item       |\n| id        | string            | -       | HTML id attribute              |\n| className | string            | -       | Additional CSS classes         |\n\n## Examples\n\n### Basic Radio Group\n\n```tsx\n<RadioGroup defaultValue=\"option-one\">\n  <div className=\"flex items-center space-x-2\">\n    <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n    <Label htmlFor=\"option-one\">Option One</Label>\n  </div>\n  <div className=\"flex items-center space-x-2\">\n    <RadioGroupItem value=\"option-two\" id=\"option-two\" />\n    <Label htmlFor=\"option-two\">Option Two</Label>\n  </div>\n</RadioGroup>\n```\n\n### Controlled Radio Group\n\n```tsx\nfunction ControlledRadioGroup() {\n  const [value, setValue] = useState(\"option-one\")\n\n  return (\n    <RadioGroup value={value} onValueChange={setValue}>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n        <Label htmlFor=\"option-one\">Option One</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"option-two\" id=\"option-two\" />\n        <Label htmlFor=\"option-two\">Option Two</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n```\n\n### Disabled Radio Group\n\n```tsx\n<RadioGroup disabled defaultValue=\"option-one\">\n  <div className=\"flex items-center space-x-2\">\n    <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n    <Label htmlFor=\"option-one\">Option One</Label>\n  </div>\n  <div className=\"flex items-center space-x-2\">\n    <RadioGroupItem value=\"option-two\" id=\"option-two\" />\n    <Label htmlFor=\"option-two\">Option Two</Label>\n  </div>\n</RadioGroup>\n```\n\n### Horizontal Layout\n\n```tsx\n<RadioGroup orientation=\"horizontal\" defaultValue=\"option-one\" className=\"flex space-x-4\">\n  <div className=\"flex items-center space-x-2\">\n    <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n    <Label htmlFor=\"option-one\">Option One</Label>\n  </div>\n  <div className=\"flex items-center space-x-2\">\n    <RadioGroupItem value=\"option-two\" id=\"option-two\" />\n    <Label htmlFor=\"option-two\">Option Two</Label>\n  </div>\n</RadioGroup>\n```\n\n## Accessibility\n\n- Full keyboard navigation support\n- Screen reader accessible with proper ARIA attributes\n- Focus management between radio items\n- Arrow key navigation within groups\n- Space key to select items\n- Proper labeling support\n\n## Styling\n\nThe Radio Group components use DarkSnow UI design tokens:\n\n- **Container**: Grid layout with configurable gap\n- **Items**: Circular border with accent colors\n- **Indicator**: Filled circle when selected\n- **Focus**: Ring outline on focus\n- **Disabled**: Reduced opacity and disabled cursor\n\n## Best Practices\n\n1. **Always use labels**: Associate each radio item with a descriptive label\n2. **Logical grouping**: Group related options together\n3. **Default selection**: Consider providing a sensible default value\n4. **Clear options**: Make option text clear and distinct\n5. **Appropriate sizing**: Use consistent spacing between options\n\n## Related Components\n\n- [Checkbox](/components/ui/checkbox) - For multiple selections\n- [Select](/components/ui/select) - For dropdown selections\n- [Label](/components/ui/label) - For labeling form controls\n","readmeFilename":"README.md","_rev":"1-fbca2c5fba20ca017d4c6b917923b3f9"}