{"_id":"@bolttech/ob-molecules-side-panel","_rev":"4-ed7ed259dfea74fbf3cb83de512dbac4","name":"@bolttech/ob-molecules-side-panel","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-molecules-side-panel","version":"1.0.0","_id":"@bolttech/ob-molecules-side-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":"bdb6df8d4fd2eaf1a02b94a608dff829a664e355","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-side-panel/-/ob-molecules-side-panel-1.0.0.tgz","fileCount":9,"integrity":"sha512-5S2l+ZVQlvdn+UCjae2VbZwS4o7w39jhMjN2QVbIqBtGZ00OXpAXwVZZyDQduLM3bwYyTi5rv6A/he9MbU2vNg==","signatures":[{"sig":"MEYCIQCveIgq4LAZOJBOG8zbsKJT91oTHVjJsYDT90ZLJZ9GOwIhALhP7P+GhOm3Pjbt9pRcfSAlkkkGgEfwrzhk2um+erPj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":47542},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"9beaf581194f4d84ce7a8a7f1bb935abd0c1f6bb","_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-side-panel_1.0.0_1778516575073_0.26397136735854976","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-molecules-side-panel","version":"1.0.1","_id":"@bolttech/ob-molecules-side-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":"d224575f632b81c0a7af8b2146fdcdf7bd4edc63","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-side-panel/-/ob-molecules-side-panel-1.0.1.tgz","fileCount":5,"integrity":"sha512-huahHjM5wWqgU3HbZIKV0HdNQ4jHiry07/SaZHhQwGGoORkqDyWbv5Pu271HkTI1V3sw/uX4FnOBfm+XdXsNGQ==","signatures":[{"sig":"MEUCIDwURUdhaeXI4h0lPu/XHXOZMWdS1dxgg7dwyKx1XwWFAiEAuLlp0dW8F2DZ0vJCG+zkEKw8krHjJQMHW2Jp1gmi6tA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42541},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"ad0998ec6d9d322b3158ac64673b24451106bbe2","_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","@bolttech/ob-atoms-button":"1.0.1","@bolttech/ob-atoms-backdrop":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-side-panel_1.0.1_1780927872599_0.2538874109333693","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-molecules-side-panel","version":"1.0.2","_id":"@bolttech/ob-molecules-side-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":"8a644f95fc85dbcb71c59603b1a51f0bc789bfb1","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-side-panel/-/ob-molecules-side-panel-1.0.2.tgz","fileCount":9,"integrity":"sha512-NhcR6qeKkUb/kdhMVi9h71RYFNo5aVN6TwnUgfwP/zjgG5BJU5k0sf68PxE2rX+ZCSH7KotAH0gTilm52Mha4w==","signatures":[{"sig":"MEUCIQDoL4AcHKXCHQieRUmMyABmUwZYJcs+SvXszEYrag6TOwIgWsCmJ+vTfDHRVxi35XW82SrL9yk2TXnqPBxn5x7jgPM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46073},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"7011309aa11c0b1fa081ca0b067f652b62ea32cc","_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","@bolttech/ob-atoms-button":"1.0.1","@bolttech/ob-atoms-backdrop":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-side-panel_1.0.2_1788779992687_0.4994280921311476","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-molecules-side-panel","version":"1.0.3","dependencies":{"@bolttech/ui-utils":"0.6.7","react":"19.1.2","classnames":"^2.5.1","@bolttech/ob-atoms-backdrop":"1.0.1","@bolttech/ob-atoms-button":"1.0.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-molecules-side-panel@1.0.3","gitHead":"386b7cba0682a6eec07b9586ddb8847ceca61eeb","description":"A slide-in panel component that docks to the left or right edge of the screen, with a backdrop overlay.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-fIgJZ8kFr24dYKmGIhZ898TbVKwRBuE4+7gkpa42xrggzpYk/Sf7Wgqn5ps+bBbYEpvO92UcxJl/+4FiuSuYaA==","shasum":"0b5983f65287c876c052158637cf2052eab13b96","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-side-panel/-/ob-molecules-side-panel-1.0.3.tgz","fileCount":8,"unpackedSize":48983,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICAQ6fsG8adovmZha85v3LaKQvbark6/x6UvODffNmD1AiEA9vYfbqu797pjAmZERk/aGBhgxzCHuyArQsRTUG6FODw="}]},"_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-side-panel_1.0.3_1788797029789_0.42731918696926097"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:22:54.871Z","modified":"2026-09-07T16:03:50.123Z","1.0.0":"2026-05-11T16:22:55.272Z","1.0.1":"2026-06-08T14:11:12.733Z","1.0.2":"2026-09-07T11:19:52.820Z","1.0.3":"2026-09-07T16:03:49.925Z"},"description":"A slide-in panel component that docks to the left or right edge of the screen, with a backdrop overlay.","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":"# SidePanel Component\n\nA slide-in panel component that docks to the left or right edge of the screen, with a backdrop overlay.\n\n## Installation\n\nUse the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.\n\n```bash\nnpm install @bolttech/ob-molecules-side-panel\n```\n\nor\n\n```bash\nyarn add @bolttech/ob-molecules-side-panel\n```\n\n## Props\n\nThe `SidePanel` component accepts the following properties:\n\n| Prop | Type | Description |\n| -------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| align | `'left' \\| 'right'` | **Required.** Which side of the screen the panel docks to. |\n| isOpen | `boolean` | **Required.** Whether the panel is open. |\n| onClose | `() => void` | **Required.** Callback fired when the panel is closed (via the close button, or the backdrop when `closeOnBackdropClick` is `true`). |\n| closeOnBackdropClick | `boolean` | Whether clicking the backdrop closes the panel. Defaults to `true`. |\n| children | `string \\| React.ReactElement \\| React.ReactElement[]` | Content rendered inside the panel. |\n| id | `string` | Component identification. Defaults to `'side-panel-id'`. |\n| dataTestId | `string` | The `data-testid` attribute for testing. Defaults to `'side-panel-data-testid'`. |\n\n## Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport { SidePanel } from '@bolttech/ob-molecules-side-panel';\n\nconst ExampleComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n setIsOpen(false)}>\n

Welcome to the side panel

\n \n );\n};\n\nexport default ExampleComponent;\n```\n\n## Contributing\n\nContributions are welcome! For any bug fixes, improvements, or new features, please open an [issue](link-to-issues) or submit a pull request.\n\nPlease make sure to follow the code standards and test your changes before submitting.\n","readmeFilename":"README.md"}