{"_id":"@atom_design/controls","_rev":"2-62de4477757c54f4abd1b695f2fff230","name":"@atom_design/controls","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom_design/controls","version":"1.0.0","keywords":["react-native","controls","checkbox","radio","toggle","ui-components","form","switch","accessibility","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","_id":"@atom_design/controls@1.0.0","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"ce36b0b695008b3e85a2df2ef4ee1fbb87458124","tarball":"https://registry.npmjs.org/@atom_design/controls/-/controls-1.0.0.tgz","fileCount":5,"integrity":"sha512-t3FLHx9O5FTDmIra86iUioDrSDh3l7pILdk3NxxHdwt7fYQxp6VuHCUHWDcSZKdhxW6W7YJVNE8YhYIbqaJIaw==","signatures":[{"sig":"MEQCIBWw0w7lUVa0FrwdaBdQxH2TpsMGyYmYflNPrb8jQTvOAiAd5zP3jK50swb8mWjg/JfXAU10CPHuxg4pugO1F7Mh1A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28298},"main":"index.js","types":"index.d.ts","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"React Native Controls component: checkbox, radio, toggle with check-all support and full accessibility.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","prop-types":">=15.0.0","react-native":">=0.64.0","react-native-vector-icons":">=9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/controls_1.0.0_1764755368384_0.7479695142082912","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom_design/controls","version":"1.0.1","description":"React Native Controls component: checkbox, radio, toggle with check-all support and full accessibility.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","controls","checkbox","radio","toggle","ui-components","form","switch","accessibility","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0","react-native-vector-icons":">=9.0.0"},"_id":"@atom_design/controls@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-gQbtX32wwavi6ud+WlDB66sGUQLWtZLuIn0HAjy9n5SJPlJcxSYySq7y+SI6sSYgmv2KB0bnD2TGN8bJpm0zDw==","shasum":"e7ec8604849dea0bb7199a1da5b11ef38fe52716","tarball":"https://registry.npmjs.org/@atom_design/controls/-/controls-1.0.1.tgz","fileCount":5,"unpackedSize":27804,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB/O9BQLPjXR0acFjbdZicl0fDcX95cSg/+fNU1mZnl0AiBFDwHTWTX1ZYMU4IJ/NH0H1Zio8jDtmyaJmkit6YNrpA=="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/controls_1.0.1_1764755611747_0.37039742966805544"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T09:49:28.319Z","modified":"2025-12-03T09:53:32.138Z","1.0.0":"2025-12-03T09:49:28.576Z","1.0.1":"2025-12-03T09:53:31.936Z"},"author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","controls","checkbox","radio","toggle","ui-components","form","switch","accessibility","atom-design"],"description":"React Native Controls component: checkbox, radio, toggle with check-all support and full accessibility.","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom_design/controls\n\nA flexible and accessible **Controls Component** for React Native — supporting **Checkbox**, **Radio**, and **Toggle** controls with consistent styling and full accessibility support. Part of the **Atom Design System**.\n\n---\n\n## ✨ Features\n\n- 📦 **Three Control Types** - Checkbox, Radio, and Toggle in one component\n- ✅ **Check All Support** - Built-in \"Select All\" for checkbox groups\n- 🎨 **Customizable Styling** - Colors, sizes, and layout options\n- ♿ **Fully Accessible** - Screen reader support with proper ARIA roles\n- 📱 **Touch-Friendly** - Optimized touch targets for mobile\n- 🔒 **Disabled States** - Per-option and global disable support\n- 📐 **Flexible Layouts** - Row and column arrangements\n- 🎯 **TypeScript Support** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/controls\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom_design/controls\n```\n\n### Peer Dependencies\n\nMake sure you have the required peer dependencies installed:\n\n```bash\nnpm install react-native-vector-icons prop-types\n```\n\nFor `react-native-vector-icons` setup, follow the [installation guide](https://github.com/oblador/react-native-vector-icons#installation).\n\n---\n\n## 📥 Import\n\n```javascript\nimport Controls from '@atom_design/controls';\n// or\nimport { Controls } from '@atom_design/controls';\n```\n\n---\n\n## 🎯 Basic Usage\n\n### Checkbox Group\n\n```jsx\nimport React, { useState } from 'react';\nimport Controls from '@atom_design/controls';\n\nfunction CheckboxExample() {\n  const [selected, setSelected] = useState([]);\n\n  return (\n    <Controls\n      type=\"checkbox\"\n      options={[\n        { label: 'Email notifications', value: 'email' },\n        { label: 'SMS notifications', value: 'sms' },\n        { label: 'Push notifications', value: 'push' },\n      ]}\n      value={selected}\n      onChange={setSelected}\n      checkAll\n    />\n  );\n}\n```\n\n### Radio Group\n\n```jsx\nimport React, { useState } from 'react';\nimport Controls from '@atom_design/controls';\n\nfunction RadioExample() {\n  const [size, setSize] = useState('medium');\n\n  return (\n    <Controls\n      type=\"radio\"\n      options={[\n        { label: 'Small', value: 'small' },\n        { label: 'Medium', value: 'medium' },\n        { label: 'Large', value: 'large' },\n      ]}\n      value={size}\n      onChange={setSize}\n      layout=\"row\"\n    />\n  );\n}\n```\n\n### Toggle Switch\n\n```jsx\nimport React, { useState } from 'react';\nimport Controls from '@atom_design/controls';\n\nfunction ToggleExample() {\n  const [enabled, setEnabled] = useState(false);\n\n  return (\n    <Controls\n      type=\"toggle\"\n      label=\"Dark mode\"\n      value={enabled}\n      onChange={setEnabled}\n    />\n  );\n}\n```\n\n---\n\n## 📋 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `'checkbox' \\| 'radio' \\| 'toggle'` | `'checkbox'` | Type of control to render |\n| `options` | `Option[]` | `[]` | Array of options (for checkbox/radio) |\n| `value` | `string[] \\| string \\| boolean` | - | Current value(s) based on type |\n| `onChange` | `function` | - | Callback when value changes |\n| `label` | `string` | - | Label text for toggle control |\n| `layout` | `'row' \\| 'column'` | `'column'` | Layout direction for radio/checkbox |\n| `checkAll` | `boolean` | `false` | Show \"Check All\" option for checkbox |\n| `onCheckAll` | `function` | - | Callback when check all is toggled |\n| `disabled` | `boolean` | `false` | Disable all controls |\n| `size` | `'small' \\| 'medium' \\| 'large'` | `'medium'` | Size of controls |\n| `activeColor` | `string` | `'#d9232d'` | Color when selected/active |\n| `inactiveColor` | `string` | `'#ccc'` | Color when unselected/inactive |\n| `checkAllLabel` | `string` | `'Select All'` | Label for check all option |\n| `style` | `ViewStyle` | - | Container style override |\n| `labelStyle` | `TextStyle` | - | Label text style override |\n| `testID` | `string` | - | Test ID for testing frameworks |\n| `accessibilityLabel` | `string` | - | Accessibility label for screen readers |\n\n### Option Interface\n\n```typescript\ninterface Option {\n  label: string;      // Display text\n  value: string;      // Unique identifier\n  disabled?: boolean; // Disable specific option\n}\n```\n\n---\n\n## 🎨 Customization Examples\n\n### Custom Colors\n\n```jsx\n<Controls\n  type=\"checkbox\"\n  options={options}\n  value={selected}\n  onChange={setSelected}\n  activeColor=\"#4CAF50\"\n  inactiveColor=\"#9E9E9E\"\n/>\n```\n\n### Different Sizes\n\n```jsx\n// Small controls\n<Controls type=\"radio\" options={options} value={value} onChange={setValue} size=\"small\" />\n\n// Large controls\n<Controls type=\"checkbox\" options={options} value={selected} onChange={setSelected} size=\"large\" />\n```\n\n### Disabled Options\n\n```jsx\n<Controls\n  type=\"checkbox\"\n  options={[\n    { label: 'Available', value: '1' },\n    { label: 'Coming Soon', value: '2', disabled: true },\n    { label: 'Also Available', value: '3' },\n  ]}\n  value={selected}\n  onChange={setSelected}\n/>\n```\n\n### Row Layout for Radio\n\n```jsx\n<Controls\n  type=\"radio\"\n  options={[\n    { label: 'S', value: 'small' },\n    { label: 'M', value: 'medium' },\n    { label: 'L', value: 'large' },\n    { label: 'XL', value: 'xlarge' },\n  ]}\n  value={size}\n  onChange={setSize}\n  layout=\"row\"\n/>\n```\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView, StyleSheet } from 'react-native';\nimport Controls from '@atom_design/controls';\n\nconst ControlsTestScreen = () => {\n  // Checkbox state\n  const [notifications, setNotifications] = useState(['email']);\n  \n  // Radio state\n  const [priority, setPriority] = useState('medium');\n  \n  // Toggle states\n  const [darkMode, setDarkMode] = useState(false);\n  const [autoSave, setAutoSave] = useState(true);\n\n  const notificationOptions = [\n    { label: 'Email notifications', value: 'email' },\n    { label: 'SMS notifications', value: 'sms' },\n    { label: 'Push notifications', value: 'push' },\n    { label: 'In-app notifications', value: 'inapp' },\n  ];\n\n  const priorityOptions = [\n    { label: 'Low', value: 'low' },\n    { label: 'Medium', value: 'medium' },\n    { label: 'High', value: 'high' },\n    { label: 'Urgent', value: 'urgent' },\n  ];\n\n  return (\n    <ScrollView style={styles.container}>\n      <Text style={styles.header}>Atom Design - Controls</Text>\n\n      {/* Checkbox Demo */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Checkbox Group</Text>\n        <Text style={styles.description}>With \"Check All\" option</Text>\n        <Controls\n          type=\"checkbox\"\n          options={notificationOptions}\n          value={notifications}\n          onChange={setNotifications}\n          checkAll\n          onCheckAll={(all) => console.log('All checked:', all)}\n        />\n        <Text style={styles.result}>\n          Selected: {notifications.length > 0 ? notifications.join(', ') : 'None'}\n        </Text>\n      </View>\n\n      {/* Radio Demo - Column Layout */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Radio Group (Column)</Text>\n        <Controls\n          type=\"radio\"\n          options={priorityOptions}\n          value={priority}\n          onChange={setPriority}\n          layout=\"column\"\n        />\n        <Text style={styles.result}>Selected: {priority}</Text>\n      </View>\n\n      {/* Radio Demo - Row Layout */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Radio Group (Row)</Text>\n        <Controls\n          type=\"radio\"\n          options={[\n            { label: 'S', value: 'small' },\n            { label: 'M', value: 'medium' },\n            { label: 'L', value: 'large' },\n          ]}\n          value={priority === 'low' ? 'small' : priority === 'high' ? 'large' : 'medium'}\n          onChange={(v) => console.log('Size:', v)}\n          layout=\"row\"\n          activeColor=\"#FF5722\"\n        />\n      </View>\n\n      {/* Toggle Demos */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Toggle Switches</Text>\n        \n        <View style={styles.toggleRow}>\n          <Controls\n            type=\"toggle\"\n            label=\"Dark Mode\"\n            value={darkMode}\n            onChange={setDarkMode}\n          />\n        </View>\n\n        <View style={styles.toggleRow}>\n          <Controls\n            type=\"toggle\"\n            label=\"Auto-save documents\"\n            value={autoSave}\n            onChange={setAutoSave}\n            activeColor=\"#4CAF50\"\n          />\n        </View>\n\n        <View style={styles.toggleRow}>\n          <Controls\n            type=\"toggle\"\n            label=\"Disabled toggle\"\n            value={false}\n            onChange={() => {}}\n            disabled\n          />\n        </View>\n      </View>\n\n      {/* Size Variants */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Size Variants</Text>\n        \n        <Text style={styles.label}>Small:</Text>\n        <Controls\n          type=\"checkbox\"\n          options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}\n          value={['a']}\n          onChange={() => {}}\n          size=\"small\"\n        />\n\n        <Text style={styles.label}>Medium (default):</Text>\n        <Controls\n          type=\"checkbox\"\n          options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}\n          value={['a']}\n          onChange={() => {}}\n          size=\"medium\"\n        />\n\n        <Text style={styles.label}>Large:</Text>\n        <Controls\n          type=\"checkbox\"\n          options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}\n          value={['a']}\n          onChange={() => {}}\n          size=\"large\"\n        />\n      </View>\n\n      {/* Disabled States */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Disabled Controls</Text>\n        <Controls\n          type=\"checkbox\"\n          options={[\n            { label: 'Available option', value: '1' },\n            { label: 'Disabled option', value: '2', disabled: true },\n            { label: 'Another available', value: '3' },\n          ]}\n          value={['1']}\n          onChange={() => {}}\n        />\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F5F5F5',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginVertical: 20,\n    color: '#1A1A1A',\n  },\n  section: {\n    backgroundColor: '#FFFFFF',\n    marginHorizontal: 16,\n    marginBottom: 16,\n    padding: 16,\n    borderRadius: 12,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginBottom: 8,\n    color: '#1A1A1A',\n  },\n  description: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 12,\n  },\n  label: {\n    fontSize: 14,\n    fontWeight: '500',\n    marginTop: 12,\n    marginBottom: 8,\n    color: '#333',\n  },\n  result: {\n    marginTop: 12,\n    fontSize: 14,\n    color: '#d9232d',\n    fontStyle: 'italic',\n  },\n  toggleRow: {\n    marginVertical: 8,\n  },\n});\n\nexport default ControlsTestScreen;\n```\n\n---\n\n## ♿ Accessibility\n\nThe Controls component includes comprehensive accessibility support:\n\n- **Checkbox**: Uses `accessibilityRole=\"checkbox\"` with proper `accessibilityState`\n- **Radio**: Uses `accessibilityRole=\"radio\"` with checked state\n- **Toggle**: Uses `accessibilityRole=\"switch\"` with on/off state\n- All controls support `accessibilityLabel` and `accessibilityHint`\n- Proper keyboard navigation support\n- Screen reader friendly labels\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript definitions are included:\n\n```typescript\nimport Controls, { ControlsProps, Option } from '@atom_design/controls';\n\nconst options: Option[] = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n];\n\nconst MyComponent: React.FC = () => {\n  const [value, setValue] = useState<string[]>([]);\n\n  return (\n    <Controls\n      type=\"checkbox\"\n      options={options}\n      value={value}\n      onChange={setValue}\n    />\n  );\n};\n```\n\n---\n\n## 📄 License\n\nMIT © Atom Design\n\n---\n\n## 👤 Author\n\n**Atom Design Team**\n\nPart of the Atom Design System for React Native.\n","readmeFilename":"README.md"}