{"_id":"@bolttech/ob-atoms-tabs","_rev":"4-0aa91127c4048a2a8048cc22f4b925f4","name":"@bolttech/ob-atoms-tabs","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-tabs","version":"1.0.0","_id":"@bolttech/ob-atoms-tabs@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":"e18a5b32973725ecafa409da202f245232b6be91","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tabs/-/ob-atoms-tabs-1.0.0.tgz","fileCount":9,"integrity":"sha512-V4rt+BbN5oXVLBFFBh0pbOwdpqiBofH/JNALPiVwDBYpI4573VBPbdsiA8m8gsNDi/tRiF4++zGDtPut0Ee/cg==","signatures":[{"sig":"MEUCIQD0IKyj50eG4IVz6ba3k+kJuPhKN9liv43X/NZys8KJnwIgbFrDJoDbL3n4HANUQWUKh/SbGxgl/bLGUiqRhvB0ekE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83369},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"75ae60d15e25f71dd4d99169ebde6a55df2a1468","_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-tabs_1.0.0_1778516110348_0.39673979341784693","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-tabs","version":"1.0.1","_id":"@bolttech/ob-atoms-tabs@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":"4c1543e04eb87844b41f2834ddb8e46a1e1968c6","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tabs/-/ob-atoms-tabs-1.0.1.tgz","fileCount":5,"integrity":"sha512-TyPBqUBNZaCAUZEOMzVIcS+pGtqBQZaIXmvYmOnV+n121n4ULxCw4m8qGC0625swHokGRD/fEweeIqQ9MWFhWw==","signatures":[{"sig":"MEUCIQCwLQF8JQWgw01m9+HO8k0cYs29qpi9rzMsWzE0E6ZTiQIgfJi5igMVWNV5JRuq7QLBSwkkk/auy7wDmCRdjvAdQr0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77937},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"d5d5d7e4f8ce6be120ba51cef9aaf1d0e7ac5d46","_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"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tabs_1.0.1_1780925910678_0.9224105852451476","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-tabs","version":"1.0.2","_id":"@bolttech/ob-atoms-tabs@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":"97b0d9dca929ca9825160ba54700fd0e4ebd2644","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tabs/-/ob-atoms-tabs-1.0.2.tgz","fileCount":9,"integrity":"sha512-LIe9igIumAFAZVK+aHtayFveTx4Xy/PhbSZLsK7L2mqp4IHCgNFiUZBwB54qpOGYz1oYsfmE9hwwQwJK8PEdQA==","signatures":[{"sig":"MEUCICy1ZTUPFbAX5oxKt0qhaJSPprLqUTWH5/UY+oxxVtCCAiEA9iS+hwl2annZ+Q/zfIp/asvYZv5c/OeHw4mI/4a0s0U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIAgVC4ivLmV/uR9Qy1Q1n3Tfd5aybvuGAPL+yHmJpSOcAiEAxhj/TP/YLTy/2OzvQPtbdVCQnk827IZ5jnQQrL52NcM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82007},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"9271cf04e42b5ccfecaf39c02d4a8b839aa2c5ca","_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"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tabs_1.0.2_1788779472382_0.5954135808049961","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"_id":"@bolttech/ob-atoms-tabs@1.0.3","dist":{"shasum":"e37661389355df8c1acf13102aaa07d5a564ebf6","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tabs/-/ob-atoms-tabs-1.0.3.tgz","fileCount":8,"integrity":"sha512-U4GcNzj2pPu1NSTHREKFzOwwDCme6fS0qW3pd27aWhvWoreF0QswVr+ibIn/1tEc/Z+ZmPAxlAxXLBUH0ukg2A==","signatures":[{"sig":"MEUCIQCzc+Rf8tXw2pLl1QN9kRELJQPCW8S9Oz9U2Lt7fB5N1gIgEHr+VNQEeCD3JXYyQ/qBS2cQHhMsUzRIhhyublupGRM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDQBS3GoAJWsZAOFBO/f3OK1ZRFFxfMNpLhQbZQiLXFuQIhAKqMi2j5/xAxhBx5q5IOwlwlDfGE3JZ28znLUcuUfboH"}],"unpackedSize":85645},"main":"./index.cjs.js","name":"@bolttech/ob-atoms-tabs","type":"commonjs","types":"./index.d.ts","gitHead":"4ec50693d29460dfbe48a3829573db23c25fb952","version":"1.0.3","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"The **Tabs** component is a versatile React component designed to create a tabbed interface. It allows you to organize content into tabs and switch between them seamlessly.","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","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-atoms-tabs_1.0.3_1788796771871_0.844548909085937"}}},"time":{"created":"2026-05-11T16:15:10.209Z","modified":"2026-09-07T15:59:32.210Z","1.0.0":"2026-05-11T16:15:10.492Z","1.0.1":"2026-06-08T13:38:30.816Z","1.0.2":"2026-09-07T11:11:12.476Z","1.0.3":"2026-09-07T15:59:31.966Z"},"description":"The **Tabs** component is a versatile React component designed to create a tabbed interface. It allows you to organize content into tabs and switch between them seamlessly.","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":"# Tabs Component\n\nThe **Tabs** component is a versatile React component designed to create a tabbed interface. It allows you to organize content into tabs and switch between them seamlessly.\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 **Tabs** component in your React application, follow these steps:\n\n### Installation\n\n```bash\nnpm install @bolttech/atoms-tab @bolttech/atoms-tabs\n```\n\nor\n\n```bash\nyarn add @bolttech/atoms-tab @bolttech/atoms-tabs\n```\n\nOnce you have the required dependencies installed, you can start using the `Tabs` component in your React application.\n\n## Usage\n\nThe **Tabs** component provides a tabbed interface for organizing and displaying content. It can be easily customized to fit your design requirements.\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'; // You can import your Tab component here\nimport {Tabs} from '@bolttech/atoms-tabs';\n\nfunction App() {\n const [selectedTab, setSelectedTab] = useState('tab-1');\n\n const handleTabChange = (event, value) => {\n setSelectedTab(value);\n };\n\n return (\n \n Tab 1\n Tab 2\n {/* Add more Tab components as needed */}\n \n\n
\n {/* Content associated with Tab 1 */}\n \n Content for Tab 1\n \n {/* Content associated with Tab 2 */}\n \n Content for Tab 2\n \n
\n );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **Tabs** component accepts the following props:\n\n| Prop | Type | Description |\n|----------------|---------------|-------------------------------------------------------|\n| `selected` | string | The value of the currently selected tab. |\n| `id` | string | The ID attribute of the tabs container element. |\n| `dataTestId` | string | The data-testid attribute for testing purposes. |\n| `variant` | string | The variant style of the tabs (e.g., 'basic'). |\n| `children` | ReactNode | The Tab components to be rendered as tabs. |\n| `align` | string | The alignment of the tabs (e.g., 'left', 'center'). |\n| `onChange` | function | A function to handle tab change events. |\n\n## Example\n\nHere's an example of using the **Tabs** component:\n\n```jsx\n\n Tab 1\n Tab 2\n\n```\n\nThis will render a tabbed interface with two tabs: \"Tab 1\" and \"Tab 2\".\n\n## Contributing\n\nContributions to the **Tabs** 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"}