{"_id":"@bolttech/ob-atoms-tab-panel","_rev":"4-a8d3c18407537b5fbe048d5f6a22335d","name":"@bolttech/ob-atoms-tab-panel","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-tab-panel","version":"1.0.0","_id":"@bolttech/ob-atoms-tab-panel@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":"742aa42abc0f7feceeaabf830cd1a58713929ad0","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab-panel/-/ob-atoms-tab-panel-1.0.0.tgz","fileCount":8,"integrity":"sha512-RXEc4oKrKO0q66aS8z7y+vYEtsGNnbRyTu31VU7mZG1t85k2erdGlgxuK8YPyXlVMpk2XMfsG9Ycz76rFZVZLA==","signatures":[{"sig":"MEUCIAvVLozX/9vhBynT9omw4bzHoQ1tDhAR8GhlakOd64XIAiEA+f1VtL5hqkG79mVSPbuHbp3GV3NPUThMiLJwXoRkdW8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45099},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"b6dab76a2df1343eb392be778e46776804d78481","_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-tab-panel_1.0.0_1778516093459_0.3213703803748067","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-tab-panel","version":"1.0.1","_id":"@bolttech/ob-atoms-tab-panel@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":"b3d99ee720c11b53dfeaeaf402d07ba491f29796","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab-panel/-/ob-atoms-tab-panel-1.0.1.tgz","fileCount":4,"integrity":"sha512-j95yt0UBXMrXK8DoiWSg+VwPBpYQnm2fKii5qiaSHlhi/U3aOWpGYYksmssdHfPupeW6tI5ucFjFNP+e+BWzpg==","signatures":[{"sig":"MEYCIQDwUdv+IVLm2heJB82M5E7mvfn1wEiF/iGEDhTQkd+dBwIhALKtgL5zbnBfpt0jvmeqT5FNmcjslxZ7yHkMNUj9mk9X","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43215},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"eb75f7d85fb6a0055cbdd061970b33be95e55f60","_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"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tab-panel_1.0.1_1780925834856_0.41379764714349876","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-tab-panel","version":"1.0.2","_id":"@bolttech/ob-atoms-tab-panel@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":"72635ac4177fd115ce64ecb206271c8e95559784","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab-panel/-/ob-atoms-tab-panel-1.0.2.tgz","fileCount":8,"integrity":"sha512-V5JFW2KrcmlDtwFqrxy3CoaA4tc12FjddZttDn5t6nu2GVeQGupBvQc1iV68ftCnTcICIm0r3VHvmP78ISEBvw==","signatures":[{"sig":"MEYCIQDvIl2VqJY/DDQWmCqKYqBQD0BSWDMaTrLeyObUNND1gQIhAPtzENBmB4/AxyWCStrDse7ML88m+dIejVWWKMi1gaSp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45118},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"75a1c72bea5d9eb20819e614625427a50c9dc802","_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"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tab-panel_1.0.2_1788779380548_0.12896359190189788","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-tab-panel","version":"1.0.3","dependencies":{"@bolttech/ui-utils":"0.6.7","react":"19.1.2"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-tab-panel@1.0.3","gitHead":"97f5bfd928dd187e9d42909f7c6f90d62b926163","description":"The **TabPanel** component is a React component designed to provide a container for tab content. This component is used in conjunction with tabs to display relevant content for the selected tab.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-kCKuQ58WzbqzbFEzY9OxI0UvpZH002orhKzwW4vFR/Bj5MeE5MNpotJyXlw9Bs40Px7BWRjCP8+gqVITEx8+Mw==","shasum":"ff8c8ef0517294de3dd206379ebf5c717d2ea10f","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab-panel/-/ob-atoms-tab-panel-1.0.3.tgz","fileCount":8,"unpackedSize":47592,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDmtFAdRKsm1hinDigDIMqvNVa1vx796XZCOeUhUoYObwIgYQJCZHnw3SaxW5vbaZIAUsbkWC8/JDz7OOUWIVeTnXg="}]},"_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-tab-panel_1.0.3_1788796661571_0.7599100251680204"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:14:53.386Z","modified":"2026-09-07T15:57:41.879Z","1.0.0":"2026-05-11T16:14:53.632Z","1.0.1":"2026-06-08T13:37:15.007Z","1.0.2":"2026-09-07T11:09:40.667Z","1.0.3":"2026-09-07T15:57:41.701Z"},"description":"The **TabPanel** component is a React component designed to provide a container for tab content. This component is used in conjunction with tabs to display relevant content for the selected tab.","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":"# TabPanel Component\n\nThe **TabPanel** component is a React component designed to provide a container for tab content. This component is used in conjunction with tabs to display relevant content for the selected tab.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Example](#example)\n- [Contributing](#contributing)\n\n## Installation\n\nTo use the **TabPanel** component in your React application, follow these steps:\n\n### Installation\n\n```bash\nnpm install @bolttech/atoms-tab @bolttech/atoms-tab-panel\n```\n\nor\n\n```bash\nyarn add @bolttech/atoms-tab @bolttech/atoms-tab-panel\n```\n\nOnce you have the required dependencies installed, you can start using the `TabPanel` component in your React application.\n\n## Usage\n\nThe **TabPanel** component provides a container for tab content. It works alongside tab components to display the content associated with the selected tab.\n\nTo use the component, import it and include it in your JSX:\n\n```jsx\nimport React, {useState} from 'react';\nimport {Tab} from '@bolttech/atoms-tab';\nimport {TabPanel} from '@bolttech/atoms-tab-panel';\n\nfunction App() {\n  const [selectedTab, setSelectedTab] = useState('tab-1');\n\n  return (\n    <Tab value=\"tab-1\" dataTestId=\"my-tab\" onClick={() => setSelectedTab('tab-1')}>\n      Tab 1\n    </Tab>\n    <Tab value=\"tab-2\" dataTestId=\"my-tab\" onClick={() => setSelectedTab('tab-2')}>\n      Tab 2\n    </Tab>\n\n    <TabPanel value=\"tab-1\" selectedValue={selectedTab} dataTestId=\"my-tab-panel\">\n      Content for Tab 1\n    </TabPanel>\n    <TabPanel value=\"tab-2\" selectedValue={selectedTab} dataTestId=\"my-tab-panel\">\n      Content for Tab 2\n    </TabPanel>\n  );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **TabPanel** component accepts the following props:\n\n| Prop           | Type          | Description                                           |\n|----------------|---------------|-------------------------------------------------------|\n| `value`        | string        | The value associated with the tab panel.             |\n| `selectedValue` | string        | The value of the selected tab.                      |\n| `id`           | string        | The ID attribute of the tab panel element.           |\n| `dataTestId`   | string        | The data-testid attribute for testing purposes.      |\n| `children`     | ReactNode     | The content of the tab panel.                       |\n\n## Example\n\nHere's an example of using the **TabPanel** component:\n\n```jsx\n<TabPanel value=\"tab-1\" selectedValue={selectedTab} dataTestId=\"my-tab-panel\">\n  Content for Tab 1\n</TabPanel>\n<TabPanel value=\"tab-2\" selectedValue={selectedTab} dataTestId=\"my-tab-panel\">\n  Content for Tab 2\n</TabPanel>\n```\n\nThis will render two **TabPanel** components with content that is displayed based on the selected tab.\n\n## Contributing\n\nContributions to the **TabPanel** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.\n","readmeFilename":"README.md"}