{"_id":"@bolttech/ob-molecules-accordion-group","_rev":"4-cfd65e137ae2302d0a4c4d2ac3e42fa9","name":"@bolttech/ob-molecules-accordion-group","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-molecules-accordion-group","version":"1.0.0","_id":"@bolttech/ob-molecules-accordion-group@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":"3698de0a52d407a506ebf56f30f310e3d63504c6","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-accordion-group/-/ob-molecules-accordion-group-1.0.0.tgz","fileCount":8,"integrity":"sha512-RIwq2TG7jt3Ocx1bQ/1b/LRekl1QZthHERenI+sDWrqpN2MXh4IbUVYxaovK10JRwo0TbTy9eqvUBBTt60a2tQ==","signatures":[{"sig":"MEYCIQCOMqoSV2Wuz5snzuWZbyeDSiL1DueaB0XedIDI6nA+uwIhAIKeixXH/8pfuIkuVAKJPvzjgIFAHa+bOenrgya4vkRN","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82472},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"43114f137b103bb707710ba191fb60c31b0bacfb","_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-molecules-accordion-group_1.0.0_1778516271226_0.9809895692958988","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-molecules-accordion-group","version":"1.0.1","_id":"@bolttech/ob-molecules-accordion-group@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":"3860087d31cd5d1c7daa5b2a6b341da9d00652a7","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-accordion-group/-/ob-molecules-accordion-group-1.0.1.tgz","fileCount":4,"integrity":"sha512-/h2qtCliw3IKBdiJXLD3P1YadBepL+RMq+xM19jsFxuj4LwQ/F5JcEK0DZUuft3owzxbScS3rMtYtHEAAcAJ+w==","signatures":[{"sig":"MEUCIBE0kv7Hye2OTtJYAKn1TylRrk6pbsSzHLmS/APW2JaOAiEAqQmaPFtyOvjegs5e3tLOAtC/9BmexyGhhUVg0YU9/Wc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80497},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"4000074872b259da8a7c23fe2aeda10ea351b4f5","_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","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-accordion":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-accordion-group_1.0.1_1780927452938_0.11585323407848924","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-molecules-accordion-group","version":"1.0.2","_id":"@bolttech/ob-molecules-accordion-group@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":"f32a7dad15251d0c587981d802723706203d87e7","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-accordion-group/-/ob-molecules-accordion-group-1.0.2.tgz","fileCount":8,"integrity":"sha512-FcOVThfrtZgOEZxoqnkwULpPVirZlzLKP2n6qgtCPbasGL72JM/3s1adtHE/uZcQvrtD4yBovmFla9t3GGF78w==","signatures":[{"sig":"MEQCIB0x++F1PUvY7EJ+N+KcEKbIhK+yuO05oGSGDUCWAQ8yAiBiS1OVMuEq+wEFiUwOYJzsRvg2kOVsbx2hctb/zM30ng==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIA89Bz371pJqJWL7EasJZmgEMe3pLvQuizbmzTZwBxt0AiEA6/BFHzqspWpm20cuX76N/sfB2MvGyu/uu9zue8WxJS8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82863},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"23a7b243bd9948a82ff88932121956cd1a14fb25","_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","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-accordion":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-accordion-group_1.0.2_1788779814102_0.3701889015890423","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"_id":"@bolttech/ob-molecules-accordion-group@1.0.3","dist":{"shasum":"fa6963b9fcfd4efc141c1298fa446c6cfdbf47e2","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-accordion-group/-/ob-molecules-accordion-group-1.0.3.tgz","fileCount":8,"integrity":"sha512-ZFamzd85ElOwr9MxBwbogcZYoU7kSQ5rs68i4HlXzSDWOjr/vRfTDVTYkxB1Qf2Ny1BejfPwfFgIHGnV5/S0VQ==","signatures":[{"sig":"MEUCIHf6wA8BRRN/0+0+tn7FbjsjcahG/IIJSLkhGszcOYKZAiEAyJ1N5TEBzgbr+j1axOiqgJGG3PQXKQ6TWxww9245soI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICJq0cou0rIHnmllhDGmRWddet89WwaVX20wvDpcxZlaAiBcacaBYYYrNAJlv+abw3pjUOBoXESe9Q70FwjXRha7Mw=="}],"unpackedSize":88336},"main":"./index.cjs.js","name":"@bolttech/ob-molecules-accordion-group","type":"commonjs","types":"./index.d.ts","gitHead":"8561f7cb4ebfaa14ca986ca63267a60f4d8166ba","version":"1.0.3","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"A flexible accordion group component that manages multiple accordion items with support for single or multi-open modes.","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"}],"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-accordion":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-molecules-accordion-group_1.0.3_1788796891340_0.7875116205613266"}}},"time":{"created":"2026-05-11T16:17:51.150Z","modified":"2026-09-07T16:01:31.618Z","1.0.0":"2026-05-11T16:17:51.368Z","1.0.1":"2026-06-08T14:04:13.076Z","1.0.2":"2026-09-07T11:16:54.248Z","1.0.3":"2026-09-07T16:01:31.426Z"},"description":"A flexible accordion group component that manages multiple accordion items with support for single or multi-open modes.","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":"# AccordionGroup Component\n\nA flexible accordion group component that manages multiple accordion items with support for single or multi-open modes.\n\n## Features\n\n- **Single/Multi Mode**: Control whether one or multiple accordions can be open simultaneously\n- **Controlled State**: Manage accordion open/close state through props\n- **Callbacks**: Optional onClick callbacks for each accordion item\n- **Custom Icons**: Support for custom icons or automatic icon toggling\n- **Disabled State**: Disable individual accordion items\n- **Ref Forwarding**: Full ref support for DOM access\n- **Data Attributes**: Support for custom data attributes\n\n## Installation\n\n```bash\nnpm install @bolttech/molecules-accordion-group\n```\n\n## Usage\n\n### Basic Example\n\n```tsx\nimport { AccordionGroup } from '@bolttech/molecules-accordion-group/ob';\n\nconst data = [\n {\n id: 'accordion-1',\n headerText: 'Section 1',\n contentText: 'Content for section 1',\n showContent: false,\n disabled: false,\n },\n {\n id: 'accordion-2',\n headerText: 'Section 2',\n contentText: 'Content for section 2',\n showContent: false,\n disabled: false,\n },\n];\n\nexport function MyComponent() {\n return ;\n}\n```\n\n### Multi-Open Mode\n\nAllow multiple accordions to be open at the same time:\n\n```tsx\n\n```\n\n### With Callbacks\n\nHandle accordion state changes with callbacks:\n\n```tsx\nconst data = [\n {\n id: 'accordion-1',\n headerText: 'Section 1',\n contentText: 'Content for section 1',\n showContent: false,\n disabled: false,\n onClick: (isOpen) => console.log('Accordion 1 is now', isOpen ? 'open' : 'closed'),\n },\n];\n\n\n```\n\n### With Custom Icons\n\nProvide custom icons for each accordion:\n\n```tsx\nconst data = [\n {\n id: 'accordion-1',\n headerText: 'Section 1',\n contentText: 'Content for section 1',\n showContent: false,\n disabled: false,\n icon: 'chevron_right',\n },\n];\n\n\n```\n\n### With Children\n\nRender complex content using children:\n\n```tsx\nconst data = [\n {\n id: 'accordion-1',\n headerText: 'Section 1',\n contentText: 'Simple text content',\n showContent: false,\n disabled: false,\n children: ,\n },\n];\n\n\n```\n\n### With Ref\n\nAccess the container DOM element:\n\n```tsx\nimport { useRef } from 'react';\n\nexport function MyComponent() {\n const ref = useRef(null);\n\n return ;\n}\n```\n\n## Props\n\n### IAccordionGroupProps\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `data` | `IAccordionProps[]` | Yes | - | Array of accordion items to display |\n| `multi` | `boolean` | No | `false` | Allow multiple accordions to be open simultaneously |\n| `className` | `string` | No | - | Custom CSS class for the container |\n| `data-*` | `any` | No | - | Custom data attributes |\n\n### IAccordionProps (Item)\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `id` | `string` | Yes | - | Unique identifier for the accordion |\n| `headerText` | `string` | Yes | - | Text displayed in the accordion header |\n| `contentText` | `string` | No | - | Text displayed in the accordion content |\n| `showContent` | `boolean` | No | `false` | Initial open/closed state |\n| `disabled` | `boolean` | No | `false` | Disable the accordion item |\n| `icon` | `string` | No | - | Custom icon name (defaults to 'add'/'remove' based on state) |\n| `onClick` | `(isOpen: boolean) => void` | No | - | Callback when accordion is clicked |\n| `children` | `ReactNode` | No | - | Additional content to render in the accordion |\n\n## Behavior\n\n### Single Mode (default)\n\n- Only one accordion can be open at a time\n- Opening an accordion automatically closes any previously open accordion\n- Clicking an open accordion closes it\n\n### Multi Mode\n\n- Multiple accordions can be open simultaneously\n- Each accordion operates independently\n- Clicking an accordion toggles only that accordion\n\n### Icon Behavior\n\n- If no custom icon is provided, the component automatically toggles between 'add' and 'remove' icons based on the accordion state\n- If a custom icon is provided, it remains static\n\n### Disabled State\n\n- Disabled accordions cannot be clicked\n- Disabled accordions do not trigger onClick callbacks\n- Disabled accordions maintain their visual state\n\n## Accessibility\n\n- Proper ARIA attributes (`aria-expanded`, `aria-disabled`, `aria-controls`, `aria-hidden`)\n- Semantic HTML structure with `
` and `

` elements\n- Keyboard navigation support through native button elements\n\n## Examples\n\n### Controlled Component Pattern\n\n```tsx\nimport { useState } from 'react';\nimport { AccordionGroup } from '@bolttech/molecules-accordion-group/ob';\n\nexport function ControlledAccordion() {\n const [data, setData] = useState([\n {\n id: 'accordion-1',\n headerText: 'Section 1',\n contentText: 'Content 1',\n showContent: false,\n disabled: false,\n },\n ]);\n\n const handleAccordionClick = (index: number, isOpen: boolean) => {\n const newData = [...data];\n newData[index].showContent = isOpen;\n setData(newData);\n };\n\n return ;\n}\n```\n\n### With Form Content\n\n```tsx\nconst data = [\n {\n id: 'form-section-1',\n headerText: 'Personal Information',\n showContent: false,\n disabled: false,\n children: (\n
\n \n \n
\n ),\n },\n];\n\n\n```\n\n## Testing\n\nThe component includes comprehensive unit tests covering:\n- Rendering and basic functionality\n- Single and multi-open modes\n- State management and updates\n- Callbacks and event handling\n- Icon toggling\n- Disabled state\n- Ref forwarding\n- Data attributes\n\nRun tests with:\n\n```bash\nnpx nx test molecules-accordion-group\n```\n","readmeFilename":"README.md"}