{"_id":"@bolttech/ob-molecules-collapse-group","_rev":"4-6a4138b22f1944fa28b76930371275a2","name":"@bolttech/ob-molecules-collapse-group","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-molecules-collapse-group","version":"1.0.0","_id":"@bolttech/ob-molecules-collapse-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":"4cb4390ef09615acbdf42b6f9e007042909d5063","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-collapse-group/-/ob-molecules-collapse-group-1.0.0.tgz","fileCount":8,"integrity":"sha512-4RiOaXHRCsVAdQZu83vK7NkIXenNcb3ZKKIxRFrKw+p6XfCvZUu4JDFwvAUN5SGkynnpHKBQHC1EWHiiuGVq2A==","signatures":[{"sig":"MEYCIQDGvHR799MschkEjUJyu9NLx1rjf8AD1eiS9vr09W71sgIhAI547yRZPLulE0Sx37wEGZYvzc2zKKFJqhiqakwGnu6v","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40430},"main":"./index.esm.js","type":"module","types":"./index.d.ts","module":"./index.esm.js","gitHead":"39037e9dd71f38c04686873f9c5a7ce82b90ee17","_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-collapse-group_1.0.0_1778516326544_0.18289562747808485","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-molecules-collapse-group","version":"1.0.1","_id":"@bolttech/ob-molecules-collapse-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":"e5da9b00b9b820f18b6e28d8631bd45d7ffd469b","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-collapse-group/-/ob-molecules-collapse-group-1.0.1.tgz","fileCount":4,"integrity":"sha512-9lCQC7q1DtTiXJQJI5GGPCNoG3Hm8BUvK5L4dIVr83C/EjO8xSfSpxvUrw8etCM1ZkbmAQLPSsggVZIUn7yDCg==","signatures":[{"sig":"MEUCIQDI8109gyzQsxojAHy2qetlxNmM0PNcMIYENsBlDbfRZwIgZV6l3r1xdTP0SJ/hJ2wMv53IO5/MEmn50CGP0h/lepw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38131},"main":"./index.esm.js","type":"module","types":"./index.d.ts","module":"./index.esm.js","gitHead":"7d3459934e01799ec39c0e2e7d5adbd5c86c36de","_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-collapse":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-collapse-group_1.0.1_1780927577326_0.8764601544412902","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-molecules-collapse-group","version":"1.0.2","_id":"@bolttech/ob-molecules-collapse-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":"8e7f3fa6dd7ee5ed5525e9143618a2da06411def","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-collapse-group/-/ob-molecules-collapse-group-1.0.2.tgz","fileCount":8,"integrity":"sha512-xe7bccP9B93BOSNCQufLytkO45wzFW4eFeUDYt1oDKkanfWDPgE4BSKjPVQy4gqvQQL+5EbFt2A+zUQG9Wc1eQ==","signatures":[{"sig":"MEUCIF9Zh0PRio1jGbx2aHCmlA+55cxCBEehoi2v+SODcFLyAiEA1HIdNmREe+1Jb3oT6DUQe0y6EvN9GVYRj7Qoh7J8PEI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40495},"main":"./index.esm.js","type":"module","types":"./index.d.ts","module":"./index.esm.js","gitHead":"9523a0a657863aa831992d19d3c3c4be7d15a48f","_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-collapse":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-collapse-group_1.0.2_1788779621735_0.534102722106669","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-molecules-collapse-group","version":"1.0.3","dependencies":{"react":"19.1.2","@bolttech/ob-atoms-collapse":"1.0.1","@bolttech/ui-utils":"0.6.7"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-molecules-collapse-group@1.0.3","gitHead":"5441cd3f0b53822cf98783346ffe931e150e81a4","description":"A flexible container component that groups multiple Collapse components with consistent spacing and layout.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-8TSMAZLvosz4mTT/8BO9s+vKNC3OSd97e2voPeTOWmYSYUg5opH24Abe4ztInwhqiezZtmYaC6fgIleWZBpGqQ==","shasum":"1fdbdd6e4a355872be4fe611d337e558c68c1f9b","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-collapse-group/-/ob-molecules-collapse-group-1.0.3.tgz","fileCount":8,"unpackedSize":42968,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDWEPy38z47GcK4N8iylUHdpv+/IAWiuNOlmWtWRBaqsQIhAMKRTCOMY/1S/U3kEkzw1+bcNfj3Ddi1NwoU3Y9VvQLW"}]},"_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-molecules-collapse-group_1.0.3_1788796837199_0.8790589436551217"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:18:46.483Z","modified":"2026-09-07T16:00:37.525Z","1.0.0":"2026-05-11T16:18:46.669Z","1.0.1":"2026-06-08T14:06:17.456Z","1.0.2":"2026-09-07T11:13:41.860Z","1.0.3":"2026-09-07T16:00:37.330Z"},"description":"A flexible container component that groups multiple Collapse components with consistent spacing and layout.","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":"# CollapseGroup Component\n\nA flexible container component that groups multiple Collapse components with consistent spacing and layout.\n\n## Installation\n\n```bash\nnpm install @bolttech/ob-collapse-group\n```\n\n## Usage\n\n```tsx\nimport { CollapseGroup } from '@bolttech/ob-collapse-group';\nimport { Collapse } from '@bolttech/atoms-collapse/ob';\n\nexport function MyComponent() {\n  return (\n    <CollapseGroup dataTestId=\"my-group\">\n      <Collapse title=\"Section 1\">Content 1</Collapse>\n      <Collapse title=\"Section 2\">Content 2</Collapse>\n      <Collapse title=\"Section 3\">Content 3</Collapse>\n    </CollapseGroup>\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `children` | `React.ReactElement<typeof Collapse>[]` | No | Array of Collapse components to display |\n| `dataTestId` | `string` | No | Test ID for identifying the component in tests |\n| `ref` | `React.Ref<HTMLDivElement>` | No | Forward ref to the root div element |\n\n## Features\n\n- **Responsive Spacing**: Automatically adjusts gap between items based on screen size (mobile vs desktop)\n- **Ref Forwarding**: Supports ref forwarding for direct DOM access\n- **Data Attributes**: Supports custom data attributes for testing and integration\n- **Flexible Children**: Accepts any number of Collapse components\n\n## Styling\n\nThe component uses CSS custom properties for spacing:\n- `--collapse-group-mobile-gap`: Gap between items on mobile devices\n- `--collapse-group-desktop-gap`: Gap between items on desktop devices\n\n## Examples\n\n### Basic Usage\n\n```tsx\n<CollapseGroup>\n  <Collapse title=\"FAQ 1\">Answer 1</Collapse>\n  <Collapse title=\"FAQ 2\">Answer 2</Collapse>\n</CollapseGroup>\n```\n\n### With Test ID\n\n```tsx\n<CollapseGroup dataTestId=\"settings\">\n  <Collapse title=\"General\">General settings</Collapse>\n  <Collapse title=\"Advanced\">Advanced settings</Collapse>\n</CollapseGroup>\n```\n\n### With Ref\n\n```tsx\nconst groupRef = useRef<HTMLDivElement>(null);\n\n<CollapseGroup ref={groupRef} dataTestId=\"group\">\n  <Collapse title=\"Item 1\">Content 1</Collapse>\n</CollapseGroup>\n```\n\n### With Custom Data Attributes\n\n```tsx\n<CollapseGroup dataTestId=\"group\" data-analytics=\"collapse-group-1\">\n  <Collapse title=\"Item\">Content</Collapse>\n</CollapseGroup>\n```\n\n## Testing\n\nThe component is fully tested with react-testing-library. Test coverage includes:\n- Rendering with and without children\n- Ref forwarding\n- Data attributes application\n- CSS class application\n- Test ID generation\n\n```tsx\nimport { render } from '@testing-library/react';\nimport { CollapseGroup } from '@bolttech/ob-collapse-group';\n\ntest('renders collapse group', () => {\n  const { getByTestId } = render(\n    <CollapseGroup dataTestId=\"test\">\n      <div>Content</div>\n    </CollapseGroup>\n  );\n  expect(getByTestId('test-collapse-group')).toBeInTheDocument();\n});\n```\n\n## Accessibility\n\n- Semantic HTML structure with proper div hierarchy\n- Supports standard HTML attributes\n- Works with screen readers when used with accessible Collapse components\n","readmeFilename":"README.md"}