{"_id":"@bolttech/ob-atoms-toggle","_rev":"4-3deeb5f9c9bb4ac4c2d6a7e9ca8afdce","name":"@bolttech/ob-atoms-toggle","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-toggle","version":"1.0.0","_id":"@bolttech/ob-atoms-toggle@1.0.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"fe3ff24dd88a09258e82713cb6fb0b51995f8d09","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-toggle/-/ob-atoms-toggle-1.0.0.tgz","fileCount":9,"integrity":"sha512-wQUyvj55OWLdJatEE1lMhbbmlDvKw/E5byjnW1H1RPPTpZZ3di/xPVlrFO3UDN6XJBDXGMGPtrgC9SgTRpYcKg==","signatures":[{"sig":"MEUCIQCLEUUs1iZIjoFXsnEKQt/jWqZw5ScrOH5homYbyeLROwIgQmdTEMAE6ngS8AIElCLAifFLP/5Hx3SunJdPUHCbwAg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51835},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"b834a1484d52e9e9c73fefc4ca90f8af245369a4","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-toggle_1.0.0_1778516165818_0.2611359687733894","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-toggle","version":"1.0.1","_id":"@bolttech/ob-atoms-toggle@1.0.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"274c5cf6ddc97b2d0b8c85927d2262da3fb687cc","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-toggle/-/ob-atoms-toggle-1.0.1.tgz","fileCount":5,"integrity":"sha512-9USvCDlU3Cpl0ImERoV57z4ClwWatxDvzUR876cbVYGQvEYJb/Zoz3HwhJqm6BybGmLmJRbJhsVezbKKIgCz3w==","signatures":[{"sig":"MEMCHwQm8/FKgmPa4uHRWrwNEIWGHvFdCgvS833zMWLT7HwCID443xELwXIT/burxdnM+GhuqQG4qwYz9+rvFKJPfw4A","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43831},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"478eec577f3028e9f359c47ec1a813a42e48da70","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-icon":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-toggle_1.0.1_1780926097759_0.7419156391022634","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-toggle","version":"1.0.2","_id":"@bolttech/ob-atoms-toggle@1.0.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"518e2683074ee16e267735d3e98953d5befe2528","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-toggle/-/ob-atoms-toggle-1.0.2.tgz","fileCount":9,"integrity":"sha512-Ae1ebPZgOZ2+CRrm4bSCo7wvIjb1EfCd4x2cQmokr5nxLl8rHqxU/z0x123qLcPTo7jpSagzoN74KD5vcWYdyA==","signatures":[{"sig":"MEUCIB/WKSl2nscVmAhCYPhbFSGWiBRN1ZUMLWADXF/nbJtuAiEAiuRDhdigRuAdUpUsZ96+IGGjhYv532bx8pCMmLi3xv0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50320},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"c7541e81d6ccfa34a8d2da3205a27ce623282e17","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-icon":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-toggle_1.0.2_1788779482227_0.33908352901773675","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-toggle","version":"1.0.3","dependencies":{"react":"19.1.2","@bolttech/ui-utils":"0.6.7","classnames":"^2.5.1","@bolttech/ob-atoms-icon":"1.0.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-toggle@1.0.3","gitHead":"c136092185347fb19308c65ac82cff45e481145e","description":"A fully accessible toggle/switch component with support for different variants and keyboard navigation.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-fdWgwGks0N9S81eYiPac/HGXJ+ssg0kUo9lrP/p49IR5nHwK2/T8dARJMHkuc8XmlZ8rtskUVi7PyfoKDjl2HA==","shasum":"b5a05698f0307dfdd8764ca3fbc95482ef7aab4b","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-toggle/-/ob-atoms-toggle-1.0.3.tgz","fileCount":8,"unpackedSize":53930,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDwDFa++OX+m7yYZNupNAl8ppqRKhXhk/uVPdEAYMbhTAiEA0Bl5t5MnAC/X3ARsNEU9rFKPjzlen0DhuK8owIqoaEE="}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-atoms-toggle_1.0.3_1788796730604_0.752415605851201"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:16:05.680Z","modified":"2026-09-07T15:58:50.886Z","1.0.0":"2026-05-11T16:16:05.989Z","1.0.1":"2026-06-08T13:41:37.890Z","1.0.2":"2026-09-07T11:11:22.370Z","1.0.3":"2026-09-07T15:58:50.736Z"},"description":"A fully accessible toggle/switch component with support for different variants and keyboard navigation.","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# Toggle Component\n\nA fully accessible toggle/switch component with support for different variants and keyboard navigation.\n\n## Features\n\n- ✅ Fully keyboard accessible (Tab, Enter, Space)\n- ✅ ARIA compliant with `role=\"switch\"` and `aria-checked`\n- ✅ Two variants: default and icon\n- ✅ Disabled state support\n- ✅ Form integration with name attribute\n- ✅ Customizable callbacks (onChange, onBlur, onFocus)\n\n## Installation\n\n```bash\nnpm install @bolttech/atoms-toggle\n```\n\n## Usage\n\n```tsx\nimport { Toggle } from '@bolttech/atoms-toggle/ob';\nimport { useState } from 'react';\n\nfunction MyComponent() {\n const [isEnabled, setIsEnabled] = useState(false);\n\n return (\n \n );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `id` | `string` | `'toggle-id'` | Unique identifier for the component |\n| `dataTestId` | `string` | `'toggle-data-testid'` | Test identifier for testing libraries |\n| `name` | `string` | - | Name attribute for form integration |\n| `value` | `boolean` | `false` | Checked state of the toggle |\n| `variant` | `'default' \\| 'icon'` | `'default'` | Visual variant of the toggle |\n| `disabled` | `boolean` | `false` | Whether the toggle is disabled |\n| `onChange` | `(value: boolean) => void` | - | Callback fired when toggle state changes |\n| `onBlur` | `ChangeEventHandler` | - | Callback fired when toggle loses focus |\n| `onFocus` | `ChangeEventHandler` | - | Callback fired when toggle receives focus |\n\n## Variants\n\n### Default\n\nStandard toggle with a sliding handle.\n\n```tsx\n\n```\n\n### Icon\n\nToggle with check/close icons inside.\n\n```tsx\n\n```\n\n## Examples\n\n### Basic Toggle\n\n```tsx\nconst [enabled, setEnabled] = useState(false);\n\n\n```\n\n### Disabled Toggle\n\n```tsx\n\n```\n\n### With Form Integration\n\n```tsx\n\n```\n\n### With Event Handlers\n\n```tsx\n console.log('Toggle focused')}\n onBlur={(e) => console.log('Toggle blurred')}\n/>\n```\n\n## Accessibility\n\nThe Toggle component is fully accessible and follows WCAG 2.1 AA guidelines:\n\n- Uses `role=\"switch\"` for proper semantic meaning\n- Includes `aria-checked` to announce state\n- Keyboard navigable with Tab key\n- Activatable with Enter or Space keys\n- Provides `aria-label` for screen readers\n- Supports disabled state\n\n## Testing\n\nRun unit tests:\n\n```bash\nnx test toggle\n```\n\n## Styling\n\nThe component uses CSS custom properties for theming. Customize by overriding these variables:\n\n- `--toggle-off-selected-track-background`\n- `--toggle-on-selected-track-active`\n- `--toggle-off-selected-handle-active`\n- `--toggle-on-selected-handle-active`\n- And more...\n\n## License\n\nSee the main repository license.\n","readmeFilename":"README.md"}