{"_id":"@bolttech/ob-atoms-tab","_rev":"4-b2ecc6bcf4f6e5307bf4c04772503f51","name":"@bolttech/ob-atoms-tab","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-tab","version":"1.0.0","_id":"@bolttech/ob-atoms-tab@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":"b00d512cc14fe246d7fd32f22d1fb5dc0082a83b","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab/-/ob-atoms-tab-1.0.0.tgz","fileCount":8,"integrity":"sha512-ApRttOori09FQbA2/QcEYZPH/ET4oNtBMjDOJBS+dbkh8eJEv6zy3vE96rnEEsvbIQ8xH3VFcr8smh92J7s6jQ==","signatures":[{"sig":"MEQCIEJW4T8mWwBlsXpEULoBwpilw4shzf/QGwX7P6CfvmekAiBFK0lOY3F4dWgkWiB6czuI6PVYPOC0gPTsRcd9DHDgYQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40513},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"58810f06d9c22b872e054184bca8d29dbba1bb6e","_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_1.0.0_1778516078313_0.11618293611806618","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-tab","version":"1.0.1","_id":"@bolttech/ob-atoms-tab@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":"81844d8bbf5b94ce4be65661221beedb491dffb1","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab/-/ob-atoms-tab-1.0.1.tgz","fileCount":4,"integrity":"sha512-JH4h3e4+aVmhGiQy8TuUmA01RmFTuaVVTmAM5BPNdBxEtPV7ju4++gvmVXEDqoTSk79zDETlRXBCpY44NcEc7A==","signatures":[{"sig":"MEUCIQC+qGZEIulg+Lg6xFhxSj/hafOOcy5hhAzQXDi/eMQO7wIgTu+ljgdWPjJoTZKX2Ld/nsDTjfqrPexrQDPLEYZzdE8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38169},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"f6640df290bdc0f2fdc6890f9ef3893f39d8f756","_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_1.0.1_1780925783157_0.877329245326369","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-tab","version":"1.0.2","_id":"@bolttech/ob-atoms-tab@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":"776cc6bb1831ed85311a1e84350490b786c20f8e","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab/-/ob-atoms-tab-1.0.2.tgz","fileCount":8,"integrity":"sha512-MxZxJigfdFgpXoJMOGxUudwl2ZxBkF9eeUwZak76s1Wyo53Z9PeSAhRA9bYZs/FpzpfxFLNGybKpEt+xZ+4gIA==","signatures":[{"sig":"MEYCIQDjNIJAtzrmOASklN4vwgjy06pv6CsVJQA6lEwARY9ghwIhAI9PT/7rhnVU2Z/VgQ90UDtzVx1zEoFtSAhfh8eszF0C","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40534},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"cef33f1ad5ae5a8801495f3103e45e3d6d7eecec","_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_1.0.2_1788779365774_0.6825976655926662","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-tab","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@1.0.3","gitHead":"6971fd05099c222d3f293305a0e90c75bb09b752","description":"The **Tab** component is a React component designed to provide a simple and customizable tab element. This component allows users to create interactive tab-based navigation.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-vmC4giGCmzUirHggtqiNpFY5sekd5jg1ZA1yfS7nxme4uTkbvlomAUlgYdInrJSPGff8YQfyqthXARwWkE62eg==","shasum":"75768e97e1b2f70b4f828150297f66cc936650ef","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tab/-/ob-atoms-tab-1.0.3.tgz","fileCount":8,"unpackedSize":42351,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH23S+3joWMU2qQxPAxkLUF1vaKDUQsal+Jdma1TfeMvAiAiSjussOwIOPRW+9UBt9AcwjyH0hgBvubu4E1n8SUCLg=="}]},"_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_1.0.3_1788796645984_0.9939184172174962"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:14:38.223Z","modified":"2026-09-07T15:57:26.299Z","1.0.0":"2026-05-11T16:14:38.463Z","1.0.1":"2026-06-08T13:36:23.319Z","1.0.2":"2026-09-07T11:09:25.904Z","1.0.3":"2026-09-07T15:57:26.126Z"},"description":"The **Tab** component is a React component designed to provide a simple and customizable tab element. This component allows users to create interactive tab-based 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":"# Tab Component\n\nThe **Tab** component is a React component designed to provide a simple and customizable tab element. This component allows users to create interactive tab-based navigation.\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 **Tab** component in your React application, follow these steps:\n\n### Installation\n\n```bash\nnpm install @bolttech/atoms-tab\n```\n\nor\n\n```bash\nyarn add @bolttech/atoms-tab\n```\n\nOnce you have the required dependencies installed, you can start using the `Tab` component in your React application.\n\n## Usage\n\nThe **Tab** component provides a basic tab element that can be used within tab-based navigation. It supports customization through various props.\n\nTo use the component, import it and include it in your JSX:\n\n```jsx\nimport React from 'react';\nimport {Tab} from '@bolttech/atoms-tab';\n\nfunction App() {\n  return (\n    <Tab value=\"tab-1\" dataTestId=\"my-tab\">\n      Tab 1\n    </Tab>\n    <Tab value=\"tab-2\" dataTestId=\"my-tab\" disabled>\n      Tab 2 (Disabled)\n    </Tab>\n  );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **Tab** component accepts the following props:\n\n| Prop         | Type          | Description                                       |\n|--------------|---------------|---------------------------------------------------|\n| `id`         | string        | The ID attribute of the tab element.             |\n| `dataTestId` | string        | The data-testid attribute for testing purposes.  |\n| `children`   | ReactNode     | The content of the tab element.                 |\n| `value`      | string        | The value associated with the tab.               |\n| `disabled`   | boolean       | Determines whether the tab is disabled.         |\n\n## Example\n\nHere's an example of using the **Tab** component:\n\n```jsx\n<Tab value=\"tab-1\" dataTestId=\"my-tab\">\n  Tab 1\n</Tab>\n<Tab value=\"tab-2\" dataTestId=\"my-tab\" disabled>\n  Tab 2 (Disabled)\n</Tab>\n```\n\nThis will render two **Tab** components, one with the label \"Tab 1\" and another labeled \"Tab 2 (Disabled)\" that is disabled.\n\n## Contributing\n\nContributions to the **Tab** 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"}