{"_id":"@atom-design-mog/controls","_rev":"2-df804e999b602bc7d9860988c01e527b","name":"@atom-design-mog/controls","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/controls","version":"1.0.0","keywords":["react-native","controls","checkbox","radio","toggle","ui-components"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/controls@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"49051ae601bc9c42d504bcf690e3fd749d7bfdd9","tarball":"https://registry.npmjs.org/@atom-design-mog/controls/-/controls-1.0.0.tgz","fileCount":3,"integrity":"sha512-l6unfVsWPCDsl0mLU0V8Dh+ccVVop+ZrKk2L4ZNZ2AN6oJjP5C75Nbv+yzF2R5FKIcTFY3jfF3TbTe+KvylFbQ==","signatures":[{"sig":"MEUCIQDqLUVvTMhe+XoeR+4v3vqBA+Pf9cG0fSrOEPbG3vXPQgIgVfsplA3dOrPChZ6dthcPEaBILEgOD0pkQrOpkicuEXk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5967},"main":"index.js","_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.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/controls_1.0.0_1763726173720_0.6746421887819127","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/controls","version":"1.0.1","description":"React Native Controls component: checkbox, radio, toggle with check-all support.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","controls","checkbox","radio","toggle","ui-components"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/controls@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-SUQ24us5yMD57+6JWMShKCg7yD2IsXmgJyHBjP1x3W11zc6gwQkgeeZbDV0DkfZXkYbcbfN9kRFgTYq14awoKQ==","shasum":"a8ab7f230dc18fe327368b591442c74235a70e5f","tarball":"https://registry.npmjs.org/@atom-design-mog/controls/-/controls-1.0.1.tgz","fileCount":4,"unpackedSize":9512,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBCYDH4A+/jEt89bE+KCF8rsBgUEZGQRX+lnqIIw1JWIAiEA0VrDKPS9z711+p0dn8flqSdYu6wIiiMGELdXgBh3u7A="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/controls_1.0.1_1763968227412_0.2529344254590622"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T11:56:13.576Z","modified":"2025-11-24T07:10:27.789Z","1.0.0":"2025-11-21T11:56:13.889Z","1.0.1":"2025-11-24T07:10:27.577Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","controls","checkbox","radio","toggle","ui-components"],"description":"React Native Controls component: checkbox, radio, toggle with check-all support.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/controls\n\nA flexible and lightweight **Controls Component** for React Native — supporting **Checkbox**, **Radio**, and **Toggle** in a clean, consistent, design-system-friendly way. Part of the Atom Design System.\n\n---\n\n## 🚀 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/controls\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/controls\n```\n\n---\n\n## 🎮 Import\n\n```js\nimport Controls from '@atom-design-mog/controls';\n```\n\n---\n\n## 🎛 Usage Examples\n\n1) Checkbox Group\n\n```jsx\nconst [checkboxValue, setCheckboxValue] = useState([]);\n\n\n```\n\n2) Radio Group\n\n```jsx\nconst [radioValue, setRadioValue] = useState('2');\n\n\n```\n\n3) Toggle\n\n```jsx\nconst [toggleValue, setToggleValue] = useState(false);\n\n\n```\n\n---\n\n## 🧩 Props\n\n| Prop | Type | Used For | Description |\n| -------------- | ----------------------------------- | --------------- | ----------------------------------------------------- |\n| **type** | `'checkbox' \\| 'radio' \\| 'toggle'` | all | Type of control |\n| **options** | `[{ label, value }]` | checkbox, radio | Options to select |\n| **value** | array | string | boolean | all | Checkbox → array
Radio → value
Toggle → boolean |\n| **onChange** | function | all | Returns updated value back to parent |\n| **label** | string | toggle | Label next to toggle switch |\n| **layout** | `'row' \\| 'column'` | radio | Direction of radio items |\n| **checkAll** | boolean | checkbox | Enables “Check All” |\n| **onCheckAll** | function | checkbox | Callback when all items checked/un-checked |\n\n\n---\n\n## ⭐ Features\n\n- Supports checkbox, radio, and toggle controls\n- Checkbox supports “Check All” and indeterminate state\n- Radio supports row or column layouts\n- Toggle supports a label and custom styling via props\n- Fully controlled component — the parent owns state\n- Lightweight and easy to integrate into any design system\n\n---\n\n## 🧪 Example Test Screen\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView } from 'react-native';\nimport Controls from '@atom-design-mog/controls';\n\nexport default function TestControlsScreen() {\n const [checkboxValue, setCheckboxValue] = useState([]);\n const [radioValue, setRadioValue] = useState('1');\n const [toggleValue, setToggleValue] = useState(false);\n\n const options = [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3' },\n ];\n\n return (\n \n \n \n Checkbox Selection\n \n \n\n \n Radio Buttons (Row)\n \n \n\n \n Toggle Control\n \n \n \n \n );\n}\n```\n\n---\n\n## 👤 Author\nAvi Gupta\n","readmeFilename":"README.md"}