{"_id":"@casoon/atlas-components","_rev":"6-f64ce9eb9b67f667e5b4d14f0c078388","name":"@casoon/atlas-components","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@casoon/atlas-components","version":"0.0.1","keywords":["components","headless","ui","accessibility","framework-agnostic"],"author":{"url":"https://www.casoon.de","name":"Jörn Seidel","email":"joern.seidel@casoon.de"},"license":"MIT","_id":"@casoon/atlas-components@0.0.1","maintainers":[{"name":"jseidel","email":"joern.seidel@casoon.de"}],"homepage":"https://github.com/casoon/atlas#readme","bugs":{"url":"https://github.com/casoon/atlas/issues"},"dist":{"shasum":"85b17a8a0ba73b43188a14548175f89202f8fa2d","tarball":"https://registry.npmjs.org/@casoon/atlas-components/-/atlas-components-0.0.1.tgz","fileCount":56,"integrity":"sha512-SM0rOWY1o6MEB5ZICf8LaAeb0+Ww3o2WrO2r3+aTaorUKqPfERo8cxYsQI1ntfN8CTUo8+HbMAShusUj4GKnIQ==","signatures":[{"sig":"MEQCIHki/H1uFsrM4SBV+avE8+Mnpk/TnPCv/zg0MiXjhuiQAiBpWpbEiFnbQ+jwuLhyyBTqMQDMbbOL1IHcZiLz62rCEw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66583},"type":"module","_from":"file:casoon-atlas-components-0.0.1.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js"},"./form":{"types":"./dist/form.d.ts","import":"./dist/form.js"},"./tabs":{"types":"./dist/tabs.d.ts","import":"./dist/tabs.js"},"./modal":{"types":"./dist/modal.d.ts","import":"./dist/modal.js"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js"},"./drawer":{"types":"./dist/drawer.d.ts","import":"./dist/drawer.js"},"./tooltip":{"types":"./dist/tooltip.d.ts","import":"./dist/tooltip.js"},"./dropdown":{"types":"./dist/dropdown.d.ts","import":"./dist/dropdown.js"},"./accordion":{"types":"./dist/accordion.d.ts","import":"./dist/accordion.js"}},"funding":{"url":"https://www.casoon.de","type":"individual"},"scripts":{"build":"tsup","clean":"rimraf dist"},"_npmUser":{"name":"jseidel","email":"joern.seidel@casoon.de"},"_resolved":"/private/var/folders/rg/9_ywnhcd7bn1vkqxmsqkqb580000gn/T/1c3eaf85acb8e2f3a31f6843a074c590/casoon-atlas-components-0.0.1.tgz","_integrity":"sha512-SM0rOWY1o6MEB5ZICf8LaAeb0+Ww3o2WrO2r3+aTaorUKqPfERo8cxYsQI1ntfN8CTUo8+HbMAShusUj4GKnIQ==","repository":{"url":"git+https://github.com/casoon/atlas.git","type":"git","directory":"packages/components"},"_npmVersion":"11.4.2","description":"Headless UI components with accessibility focus - framework-agnostic","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/atlas-components_0.0.1_1758447067205_0.5450182723134702","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Nicht mehr gepflegt – Repo archiviert, kein Nachfolger"},"0.0.2":{"name":"@casoon/atlas-components","version":"0.0.2","keywords":["components","headless","ui","accessibility","framework-agnostic"],"author":{"url":"https://www.casoon.de","name":"Jörn Seidel","email":"joern.seidel@casoon.de"},"license":"MIT","_id":"@casoon/atlas-components@0.0.2","maintainers":[{"name":"jseidel","email":"joern.seidel@casoon.de"}],"homepage":"https://github.com/casoon/atlas#readme","bugs":{"url":"https://github.com/casoon/atlas/issues"},"dist":{"shasum":"fc7ec377272eb4ec42af19a656d174b0fec4aaa1","tarball":"https://registry.npmjs.org/@casoon/atlas-components/-/atlas-components-0.0.2.tgz","fileCount":56,"integrity":"sha512-GBfB4890e7hicP3jC5C/Zxt8xqGTFA+4JA2Ui4ELBX9BqXQt6nPYW6JGEwl66gmXAztd/rmCeVDu4eh+bSr9eg==","signatures":[{"sig":"MEYCIQD1F6MABVAJQjtbDdksN9XWGs7ngSH01scInxYU1hcAJQIhAIuIw6Gf/Sli4JBYLaaOvvcv9+ArBS2NbZ07kopdJBsO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":88005},"type":"module","_from":"file:casoon-atlas-components-0.0.2.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js"},"./form":{"types":"./dist/form.d.ts","import":"./dist/form.js"},"./tabs":{"types":"./dist/tabs.d.ts","import":"./dist/tabs.js"},"./modal":{"types":"./dist/modal.d.ts","import":"./dist/modal.js"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js"},"./drawer":{"types":"./dist/drawer.d.ts","import":"./dist/drawer.js"},"./tooltip":{"types":"./dist/tooltip.d.ts","import":"./dist/tooltip.js"},"./dropdown":{"types":"./dist/dropdown.d.ts","import":"./dist/dropdown.js"},"./accordion":{"types":"./dist/accordion.d.ts","import":"./dist/accordion.js"}},"funding":{"url":"https://www.casoon.de","type":"individual"},"scripts":{"build":"tsup","clean":"rimraf dist"},"_npmUser":{"name":"jseidel","email":"joern.seidel@casoon.de"},"_resolved":"/private/var/folders/vf/4rz59k517hq3lxyy__wcxl_m0000gn/T/36112e7a7e992915dc20f0bbee1b18c3/casoon-atlas-components-0.0.2.tgz","_integrity":"sha512-GBfB4890e7hicP3jC5C/Zxt8xqGTFA+4JA2Ui4ELBX9BqXQt6nPYW6JGEwl66gmXAztd/rmCeVDu4eh+bSr9eg==","repository":{"url":"git+https://github.com/casoon/atlas.git","type":"git","directory":"packages/components"},"_npmVersion":"11.6.1","description":"Headless UI components with accessibility focus - framework-agnostic","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/atlas-components_0.0.2_1763322068917_0.23139277081036957","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Nicht mehr gepflegt – Repo archiviert, kein Nachfolger"},"0.0.3":{"name":"@casoon/atlas-components","version":"0.0.3","keywords":["components","headless","ui","accessibility","framework-agnostic"],"author":{"url":"https://www.casoon.de","name":"Jörn Seidel","email":"joern.seidel@casoon.de"},"license":"MIT","_id":"@casoon/atlas-components@0.0.3","maintainers":[{"name":"jseidel","email":"joern.seidel@casoon.de"}],"homepage":"https://github.com/casoon/atlas#readme","bugs":{"url":"https://github.com/casoon/atlas/issues"},"dist":{"shasum":"fc65204ab68dede7a22d054ea986270cda1a49b9","tarball":"https://registry.npmjs.org/@casoon/atlas-components/-/atlas-components-0.0.3.tgz","fileCount":62,"integrity":"sha512-A9bmvOX7l0ua057fu2+ab3QyjT4TzTkW9Qzi4tih7bCL8K/obC4b0BVs9hKJX0qI76J9edRivPcgKZfHPUACGA==","signatures":[{"sig":"MEUCIElfmh7BQBkCfu1S0QhkGGrl0jUjiDXXvclOvf3MHCHzAiEA6NLkKaLs0NlBZPndc0/KCiwjJwa3t2IKaHTn3JqO8mM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":424638},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js"},"./form":{"types":"./dist/form.d.ts","import":"./dist/form.js"},"./tabs":{"types":"./dist/tabs.d.ts","import":"./dist/tabs.js"},"./modal":{"types":"./dist/modal.d.ts","import":"./dist/modal.js"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js"},"./drawer":{"types":"./dist/drawer.d.ts","import":"./dist/drawer.js"},"./tooltip":{"types":"./dist/tooltip.d.ts","import":"./dist/tooltip.js"},"./dropdown":{"types":"./dist/dropdown.d.ts","import":"./dist/dropdown.js"},"./accordion":{"types":"./dist/accordion.d.ts","import":"./dist/accordion.js"}},"funding":{"url":"https://www.casoon.de","type":"individual"},"gitHead":"382eadc50c72d2576f7733933cfb06c2876bca9f","scripts":{"build":"tsup","clean":"rimraf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jseidel","email":"joern.seidel@casoon.de"},"repository":{"url":"git+https://github.com/casoon/atlas.git","type":"git","directory":"packages/components"},"_npmVersion":"11.6.2","description":"Headless UI components with accessibility focus - framework-agnostic","directories":{},"sideEffects":false,"_nodeVersion":"24.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/atlas-components_0.0.3_1765481183083_0.3387418761789429","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Nicht mehr gepflegt – Repo archiviert, kein Nachfolger"},"0.0.4":{"name":"@casoon/atlas-components","version":"0.0.4","keywords":["components","headless","ui","accessibility","framework-agnostic"],"author":{"url":"https://www.casoon.de","name":"Jörn Seidel","email":"joern.seidel@casoon.de"},"license":"MIT","_id":"@casoon/atlas-components@0.0.4","maintainers":[{"name":"jseidel","email":"joern.seidel@casoon.de"}],"homepage":"https://github.com/casoon/atlas#readme","bugs":{"url":"https://github.com/casoon/atlas/issues"},"dist":{"shasum":"3d0b3312018e9d9899973c5883d5d01a6ad6ce25","tarball":"https://registry.npmjs.org/@casoon/atlas-components/-/atlas-components-0.0.4.tgz","fileCount":63,"integrity":"sha512-3fVfLbeT6fJ78/7r3PgVCblGLueiKUpFVxMMxQOqzeCX1a8Z2Yy7jsVpCHGi9YOe+IUjeISkXIXv7YVCshF1SQ==","signatures":[{"sig":"MEYCIQDQ4SYWL3znfC9pRKut2LFMVBb60luRJY9/y8tX0BamVwIhAN8hv/w1v/y1LrUsmSgKiqlioU/6YsiMlJ8I0X1AQzaX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":444161},"type":"module","_from":"file:casoon-atlas-components-0.0.4.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js"},"./form":{"types":"./dist/form.d.ts","import":"./dist/form.js"},"./tabs":{"types":"./dist/tabs.d.ts","import":"./dist/tabs.js"},"./modal":{"types":"./dist/modal.d.ts","import":"./dist/modal.js"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js"},"./drawer":{"types":"./dist/drawer.d.ts","import":"./dist/drawer.js"},"./tooltip":{"types":"./dist/tooltip.d.ts","import":"./dist/tooltip.js"},"./dropdown":{"types":"./dist/dropdown.d.ts","import":"./dist/dropdown.js"},"./accordion":{"types":"./dist/accordion.d.ts","import":"./dist/accordion.js"}},"funding":{"url":"https://www.casoon.de","type":"individual"},"scripts":{"build":"tsup","clean":"rimraf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jseidel","email":"joern.seidel@casoon.de"},"_resolved":"/private/var/folders/vf/4rz59k517hq3lxyy__wcxl_m0000gn/T/7dd9b367c9d427f68950ad71069bf717/casoon-atlas-components-0.0.4.tgz","_integrity":"sha512-3fVfLbeT6fJ78/7r3PgVCblGLueiKUpFVxMMxQOqzeCX1a8Z2Yy7jsVpCHGi9YOe+IUjeISkXIXv7YVCshF1SQ==","repository":{"url":"git+https://github.com/casoon/atlas.git","type":"git","directory":"packages/components"},"_npmVersion":"11.6.2","description":"Headless UI components with accessibility focus - framework-agnostic","directories":{},"sideEffects":false,"_nodeVersion":"24.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/atlas-components_0.0.4_1765483942168_0.15707863643322528","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Nicht mehr gepflegt – Repo archiviert, kein Nachfolger"},"0.1.0":{"name":"@casoon/atlas-components","version":"0.1.0","keywords":["components","headless","ui","accessibility","framework-agnostic"],"author":{"url":"https://www.casoon.de","name":"Jörn Seidel","email":"joern.seidel@casoon.de"},"license":"MIT","_id":"@casoon/atlas-components@0.1.0","maintainers":[{"name":"jseidel","email":"joern.seidel@casoon.de"}],"homepage":"https://github.com/casoon/atlas#readme","bugs":{"url":"https://github.com/casoon/atlas/issues"},"dist":{"shasum":"d75621f04d7846d309a39b38668d4faf65ce5126","tarball":"https://registry.npmjs.org/@casoon/atlas-components/-/atlas-components-0.1.0.tgz","fileCount":146,"integrity":"sha512-auasUUxzPwOHZ8kFh6Mse/z91feOtoxSnhCIVx1MlRGQkGBw+fXqwDYqetcApwSYp9RFs6pwhNhfq8u77WrwSA==","signatures":[{"sig":"MEYCIQDt2KVKyJHNoYs8hMAD5QRbIecxT0Vo59SK8KoLk0xEIwIhAOLsetpgCplrz2exVuyEh2zWtoxbNatevuSTU5srvHft","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2191791},"type":"module","_from":"file:casoon-atlas-components-0.1.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js"},"./form":{"types":"./dist/form.d.ts","import":"./dist/form.js"},"./tabs":{"types":"./dist/tabs.d.ts","import":"./dist/tabs.js"},"./alert":{"types":"./dist/alert.d.ts","import":"./dist/alert.js"},"./modal":{"types":"./dist/modal.d.ts","import":"./dist/modal.js"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js"},"./drawer":{"types":"./dist/drawer.d.ts","import":"./dist/drawer.js"},"./slider":{"types":"./dist/slider.d.ts","import":"./dist/slider.js"},"./menubar":{"types":"./dist/menubar.d.ts","import":"./dist/menubar.js"},"./sidebar":{"types":"./dist/sidebar.d.ts","import":"./dist/sidebar.js"},"./tooltip":{"types":"./dist/tooltip.d.ts","import":"./dist/tooltip.js"},"./dropdown":{"types":"./dist/dropdown.d.ts","import":"./dist/dropdown.js"},"./textarea":{"types":"./dist/textarea.d.ts","import":"./dist/textarea.js"},"./accordion":{"types":"./dist/accordion.d.ts","import":"./dist/accordion.js"},"./input-otp":{"types":"./dist/input-otp.d.ts","import":"./dist/input-otp.js"},"./resizable":{"types":"./dist/resizable.d.ts","import":"./dist/resizable.js"},"./hover-card":{"types":"./dist/hover-card.d.ts","import":"./dist/hover-card.js"},"./pagination":{"types":"./dist/pagination.d.ts","import":"./dist/pagination.js"},"./collapsible":{"types":"./dist/collapsible.d.ts","import":"./dist/collapsible.js"},"./date-picker":{"types":"./dist/date-picker.d.ts","import":"./dist/date-picker.js"},"./scroll-area":{"types":"./dist/scroll-area.d.ts","import":"./dist/scroll-area.js"},"./alert-dialog":{"types":"./dist/alert-dialog.d.ts","import":"./dist/alert-dialog.js"},"./aspect-ratio":{"types":"./dist/aspect-ratio.d.ts","import":"./dist/aspect-ratio.js"},"./context-menu":{"types":"./dist/context-menu.d.ts","import":"./dist/context-menu.js"},"./toggle-group":{"types":"./dist/toggle-group.d.ts","import":"./dist/toggle-group.js"},"./navigation-menu":{"types":"./dist/navigation-menu.d.ts","import":"./dist/navigation-menu.js"}},"funding":{"url":"https://www.casoon.de","type":"individual"},"scripts":{"build":"tsup","clean":"rimraf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jseidel","email":"joern.seidel@casoon.de"},"_resolved":"/private/var/folders/vf/4rz59k517hq3lxyy__wcxl_m0000gn/T/5b583a186e8eaf002fa7163871f2c6bf/casoon-atlas-components-0.1.0.tgz","_integrity":"sha512-auasUUxzPwOHZ8kFh6Mse/z91feOtoxSnhCIVx1MlRGQkGBw+fXqwDYqetcApwSYp9RFs6pwhNhfq8u77WrwSA==","repository":{"url":"git+https://github.com/casoon/atlas.git","type":"git","directory":"packages/components"},"_npmVersion":"11.6.2","description":"Headless UI components with accessibility focus - framework-agnostic","directories":{},"sideEffects":false,"_nodeVersion":"24.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/atlas-components_0.1.0_1766476517840_0.8118600222001799","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Nicht mehr gepflegt – Repo archiviert, kein Nachfolger"}},"time":{"created":"2025-09-21T09:31:06.680Z","modified":"2026-09-16T06:09:05.747Z","0.0.1":"2025-09-21T09:31:07.405Z","0.0.2":"2025-11-16T19:41:09.124Z","0.0.3":"2025-12-11T19:26:23.233Z","0.0.4":"2025-12-11T20:12:22.334Z","0.1.0":"2025-12-23T07:55:18.050Z"},"bugs":{"url":"https://github.com/casoon/atlas/issues"},"author":{"url":"https://www.casoon.de","name":"Jörn Seidel","email":"joern.seidel@casoon.de"},"license":"MIT","homepage":"https://github.com/casoon/atlas#readme","keywords":["components","headless","ui","accessibility","framework-agnostic"],"repository":{"url":"git+https://github.com/casoon/atlas.git","type":"git","directory":"packages/components"},"description":"Headless UI components with accessibility focus - framework-agnostic","maintainers":[{"name":"jseidel","email":"joern.seidel@casoon.de"}],"readme":"# @casoon/atlas-components\n\n**Framework-agnostic headless UI components**\n\nA collection of 10+ headless UI components designed for maximum flexibility and accessibility. Works with any framework or vanilla JavaScript.\n\n## Features\n\n- ✅ **Headless Architecture** - Logic only, bring your own styling\n- ✅ **Framework Agnostic** - Works with React, Vue, Svelte, Astro, vanilla JS\n- ✅ **Accessibility First** - ARIA compliant with keyboard navigation\n- ✅ **TypeScript Native** - Full type safety and IntelliSense\n- ✅ **Tree Shakeable** - Import only what you need\n- ✅ **SSR Compatible** - Safe for server-side rendering\n- ✅ **Zero Dependencies** - Lightweight and self-contained\n\n## Installation\n\n```bash\nnpm install @casoon/atlas-components\n```\n\n## Quick Start\n\n```typescript\nimport { createModal, createTabs, createToastManager } from '@casoon/atlas-components';\n\n// Create a modal\nconst modal = createModal({ \n  closeOnBackdrop: true, \n  trapFocus: true \n});\n\n// Create tabs\nconst tabs = createTabs(['home', 'about', 'contact']);\n\n// Create toast notifications\nconst toasts = createToastManager();\ntoasts.show('Hello World!', { type: 'success' });\n```\n\n## Available Components\n\n### Layout & Navigation\n\n#### Modal\nAccessible modal dialogs with focus management\n```typescript\nimport { createModal } from '@casoon/atlas-components/modal';\n\nconst modal = createModal({\n  backdrop: true,          // Show backdrop\n  closeOnBackdrop: true,   // Close on backdrop click\n  closeOnEscape: true,     // Close on Escape key\n  trapFocus: true,         // Trap focus within modal\n  autoFocus: true,         // Auto-focus first element\n  onOpen: () => console.log('Modal opened'),\n  onClose: () => console.log('Modal closed')\n});\n\n// Usage\nmodal.open();    // Open modal\nmodal.close();   // Close modal\nmodal.toggle();  // Toggle modal\nconsole.log(modal.isOpen); // Check state\n```\n\n#### Dropdown\nFlexible dropdown menus with positioning\n```typescript\nimport { createDropdown } from '@casoon/atlas-components/dropdown';\n\nconst trigger = document.querySelector('#dropdown-trigger');\nconst dropdown = createDropdown(trigger, {\n  placement: 'bottom',        // 'top', 'bottom', 'left', 'right'\n  closeOnSelect: true,        // Close when item selected\n  closeOnClickOutside: true   // Close on outside click\n});\n\n// Usage\ndropdown.open();\ndropdown.close();\ndropdown.toggle();\n```\n\n#### Tabs\nAccessible tab interfaces with ARIA support\n```typescript\nimport { createTabs } from '@casoon/atlas-components/tabs';\n\nconst tabs = createTabs(['home', 'about', 'contact'], {\n  defaultTab: 'home',         // Initial active tab\n  orientation: 'horizontal',   // 'horizontal' or 'vertical'\n  onChange: (tabId) => console.log('Tab changed:', tabId)\n});\n\n// Usage\ntabs.setActiveTab('about');\nconsole.log(tabs.activeTab);        // Get active tab\nconsole.log(tabs.isActive('home')); // Check if tab is active\n\n// Get props for elements\nconst tabProps = tabs.getTabProps('home');\nconst panelProps = tabs.getPanelProps('home');\n```\n\n#### Drawer\nSlide-in panels and sidebars\n```typescript\nimport { createDrawer } from '@casoon/atlas-components/drawer';\n\nconst drawer = createDrawer({\n  side: 'right',            // 'left', 'right', 'top', 'bottom'\n  backdrop: true,           // Show backdrop\n  closeOnBackdrop: true,    // Close on backdrop click\n  closeOnEscape: true       // Close on Escape key\n});\n\n// Usage\ndrawer.open();\ndrawer.close();\ndrawer.toggle();\n```\n\n### Content & Data\n\n#### Accordion\nCollapsible content sections\n```typescript\nimport { createAccordion } from '@casoon/atlas-components/accordion';\n\nconst accordion = createAccordion(['panel1', 'panel2', 'panel3'], {\n  collapsible: true,        // Allow all panels to be closed\n  multiple: false,          // Allow multiple panels open\n  defaultOpen: ['panel1']   // Initially open panels\n});\n\n// Usage\naccordion.toggle('panel1');\naccordion.open('panel2');\naccordion.close('panel3');\nconsole.log(accordion.isOpen('panel1'));\n\n// Get props for elements\nconst buttonProps = accordion.getButtonProps('panel1');\nconst panelProps = accordion.getPanelProps('panel1');\n```\n\n#### Card\nFlexible card components with variants\n```typescript\nimport { createCard } from '@casoon/atlas-components/card';\n\nconst card = createCard({\n  variant: 'elevated',      // 'default', 'elevated', 'outlined', 'glass'\n  interactive: true,        // Enable hover/focus states\n  padding: '1.5rem'         // Custom padding\n});\n\n// Get props for elements\nconst cardProps = card.getCardProps();\nconst headerProps = card.getHeaderProps();\nconst contentProps = card.getContentProps();\nconst footerProps = card.getFooterProps();\n```\n\n### Feedback & Overlays\n\n#### Tooltip\nContextual tooltips with smart positioning\n```typescript\nimport { createTooltip } from '@casoon/atlas-components/tooltip';\n\nconst trigger = document.querySelector('#tooltip-trigger');\nconst tooltip = createTooltip(trigger, {\n  delay: 500,               // Show delay in ms\n  placement: 'top',         // 'top', 'bottom', 'left', 'right'\n  trigger: 'hover'          // 'hover', 'focus', 'click'\n});\n\n// Usage\ntooltip.show();\ntooltip.hide();\ntooltip.toggle();\nconsole.log(tooltip.isVisible);\n```\n\n#### Toast\nNon-blocking notification system\n```typescript\nimport { createToastManager } from '@casoon/atlas-components/toast';\n\nconst toastManager = createToastManager();\n\n// Show notifications\nconst toast1 = toastManager.show('Success message!', {\n  duration: 3000,           // Auto-dismiss after 3s\n  type: 'success',          // 'info', 'success', 'warning', 'error'\n  position: 'top-right'     // Position on screen\n});\n\nconst toast2 = toastManager.show('Persistent message', {\n  duration: 0               // 0 = manual dismiss only\n});\n\n// Dismiss manually\ntoast1.dismiss();\n```\n\n### Forms & Inputs\n\n#### Form\nForm state management with validation\n```typescript\nimport { createForm } from '@casoon/atlas-components/form';\n\nconst form = createForm({\n  initialValues: {\n    email: '',\n    password: ''\n  },\n  validate: (values) => {\n    const errors = {};\n    if (!values.email) errors.email = 'Email required';\n    if (values.password.length < 6) errors.password = 'Password too short';\n    return errors;\n  },\n  onSubmit: (values) => {\n    console.log('Form submitted:', values);\n  }\n});\n\n// Usage\nform.setValue('email', 'user@example.com');\nform.setTouched('email');\nconst field = form.getField('email');\nconst values = form.getValues();\nform.validateForm();\nform.handleSubmit();\n```\n\n#### Button\nInteractive button states and variants\n```typescript\nimport { createButton } from '@casoon/atlas-components/button';\n\nconst button = createButton({\n  variant: 'primary',       // 'primary', 'secondary', 'danger', 'ghost'\n  size: 'md',               // 'sm', 'md', 'lg'\n  disabled: false,\n  loading: false\n});\n\n// Usage\nbutton.setLoading(true);\nbutton.setDisabled(false);\nconst props = button.getButtonProps();\n```\n\n## Framework Integration\n\n### React Integration\n\n```typescript\n// hooks/useModal.ts\nimport { useCallback, useState } from 'react';\nimport { createModal, ModalOptions } from '@casoon/atlas-components';\n\nexport function useModal(options?: ModalOptions) {\n  const [modal] = useState(() => createModal(options));\n  \n  return modal;\n}\n\n// Component usage\nfunction MyComponent() {\n  const modal = useModal();\n  \n  return (\n    <>\n      <button onClick={modal.open}>Open Modal</button>\n      {modal.isOpen && (\n        <div className=\"modal-backdrop\">\n          <div className=\"modal-content\">\n            <h2>Modal Title</h2>\n            <button onClick={modal.close}>Close</button>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n```\n\n### Vue 3 Integration\n\n```vue\n<!-- composables/useModal.ts -->\n<script setup lang=\"ts\">\nimport { createModal, type ModalOptions } from '@casoon/atlas-components';\nimport { reactive } from 'vue';\n\nexport function useModal(options?: ModalOptions) {\n  const modal = createModal(options);\n  return reactive(modal);\n}\n</script>\n\n<!-- Component usage -->\n<template>\n  <div>\n    <button @click=\"modal.open\">Open Modal</button>\n    <div v-if=\"modal.isOpen\" class=\"modal-backdrop\">\n      <div class=\"modal-content\">\n        <h2>Modal Title</h2>\n        <button @click=\"modal.close\">Close</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { useModal } from '@/composables/useModal';\n\nconst modal = useModal();\n</script>\n```\n\n### Svelte Integration\n\n```svelte\n<!-- lib/modal.js -->\n<script>\n  import { createModal } from '@casoon/atlas-components';\n  import { writable } from 'svelte/store';\n\n  export function createModalStore(options) {\n    const modal = createModal(options);\n    const isOpen = writable(modal.isOpen);\n    \n    return {\n      open: modal.open,\n      close: modal.close,\n      toggle: modal.toggle,\n      isOpen\n    };\n  }\n</script>\n\n<!-- Component usage -->\n<script>\n  import { createModalStore } from '$lib/modal.js';\n  \n  const modal = createModalStore();\n</script>\n\n<button on:click={modal.open}>Open Modal</button>\n\n{#if $modal.isOpen}\n  <div class=\"modal-backdrop\">\n    <div class=\"modal-content\">\n      <h2>Modal Title</h2>\n      <button on:click={modal.close}>Close</button>\n    </div>\n  </div>\n{/if}\n```\n\n### Astro Integration\n\n```astro\n---\n// components/Modal.astro\nimport { createModal } from '@casoon/atlas-components';\n---\n\n<button id=\"open-modal\">Open Modal</button>\n<div id=\"modal-container\" style=\"display: none;\">\n  <div class=\"modal-backdrop\">\n    <div class=\"modal-content\">\n      <h2>Modal Title</h2>\n      <button id=\"close-modal\">Close</button>\n    </div>\n  </div>\n</div>\n\n<script>\n  import { createModal } from '@casoon/atlas-components';\n  \n  const modal = createModal({\n    onOpen: () => {\n      document.getElementById('modal-container').style.display = 'block';\n    },\n    onClose: () => {\n      document.getElementById('modal-container').style.display = 'none';\n    }\n  });\n  \n  document.getElementById('open-modal').addEventListener('click', modal.open);\n  document.getElementById('close-modal').addEventListener('click', modal.close);\n</script>\n```\n\n## Advanced Patterns\n\n### Compound Components\n\n```typescript\n// Create a reusable modal system\nclass ModalSystem {\n  private modals = new Map();\n  \n  create(id: string, options?: ModalOptions) {\n    const modal = createModal(options);\n    this.modals.set(id, modal);\n    return modal;\n  }\n  \n  get(id: string) {\n    return this.modals.get(id);\n  }\n  \n  closeAll() {\n    this.modals.forEach(modal => modal.close());\n  }\n}\n\nconst modalSystem = new ModalSystem();\nconst confirmModal = modalSystem.create('confirm');\nconst settingsModal = modalSystem.create('settings');\n```\n\n### State Management Integration\n\n```typescript\n// Redux/Zustand integration example\nimport { createTabs } from '@casoon/atlas-components';\n\nconst useTabsStore = create((set, get) => ({\n  tabs: createTabs(['home', 'about', 'contact'], {\n    onChange: (tabId) => {\n      // Sync with store state\n      set({ activeTab: tabId });\n    }\n  }),\n  activeTab: 'home',\n  setActiveTab: (tabId) => {\n    get().tabs.setActiveTab(tabId);\n  }\n}));\n```\n\n### Custom Hooks/Composables\n\n```typescript\n// useAccordion.ts - Reusable accordion logic\nimport { createAccordion } from '@casoon/atlas-components';\nimport { useCallback, useState } from 'react';\n\nexport function useAccordion(panels: string[], options = {}) {\n  const [accordion] = useState(() => createAccordion(panels, options));\n  \n  const togglePanel = useCallback((panelId: string) => {\n    accordion.toggle(panelId);\n    // Trigger re-render if needed\n  }, [accordion]);\n  \n  return {\n    accordion,\n    togglePanel,\n    isOpen: accordion.isOpen.bind(accordion),\n    getButtonProps: accordion.getButtonProps.bind(accordion),\n    getPanelProps: accordion.getPanelProps.bind(accordion)\n  };\n}\n```\n\n## Styling Integration\n\n### Tailwind CSS\n\n```typescript\n// Tailwind-compatible component styling\nconst getModalClasses = (isOpen: boolean) => ({\n  backdrop: `fixed inset-0 bg-black/50 transition-opacity ${\n    isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'\n  }`,\n  dialog: `fixed inset-0 flex items-center justify-center p-4 transition-transform ${\n    isOpen ? 'scale-100' : 'scale-95'\n  }`,\n  content: 'bg-white rounded-lg shadow-xl max-w-md w-full'\n});\n```\n\n### CSS Modules\n\n```css\n/* Modal.module.css */\n.backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dialog {\n  background: white;\n  border-radius: 0.5rem;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n  max-width: 28rem;\n  width: 100%;\n}\n```\n\n### Styled Components\n\n```typescript\nimport styled from 'styled-components';\n\nconst ModalBackdrop = styled.div<{ isOpen: boolean }>`\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ${props => props.isOpen ? 1 : 0};\n  transition: opacity 0.2s ease;\n`;\n```\n\n## Testing\n\n### Unit Testing\n\n```typescript\nimport { createModal } from '@casoon/components';\n\ndescribe('Modal', () => {\n  it('should open and close correctly', () => {\n    const modal = createModal();\n    \n    expect(modal.isOpen).toBe(false);\n    \n    modal.open();\n    expect(modal.isOpen).toBe(true);\n    \n    modal.close();\n    expect(modal.isOpen).toBe(false);\n  });\n  \n  it('should call onOpen callback', () => {\n    const onOpen = jest.fn();\n    const modal = createModal({ onOpen });\n    \n    modal.open();\n    expect(onOpen).toHaveBeenCalledTimes(1);\n  });\n});\n```\n\n### Integration Testing\n\n```typescript\n// Testing with React Testing Library\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { useModal } from './useModal';\n\nfunction TestComponent() {\n  const modal = useModal();\n  \n  return (\n    <>\n      <button onClick={modal.open}>Open</button>\n      {modal.isOpen && <div data-testid=\"modal\">Modal Content</div>}\n    </>\n  );\n}\n\ntest('modal opens and closes', () => {\n  render(<TestComponent />);\n  \n  const openButton = screen.getByText('Open');\n  fireEvent.click(openButton);\n  \n  expect(screen.getByTestId('modal')).toBeInTheDocument();\n});\n```\n\n## Performance Optimization\n\n### Lazy Loading\n\n```typescript\n// Lazy load components only when needed\nconst createModalLazy = () => \n  import('@casoon/components/modal').then(m => m.createModal());\n\n// Usage\nconst modal = await createModalLazy();\n```\n\n### Memory Management\n\n```typescript\n// Proper cleanup in React\nuseEffect(() => {\n  const modal = createModal();\n  \n  return () => {\n    // Components handle their own cleanup\n    // No manual cleanup needed for @casoon/components\n  };\n}, []);\n```\n\n## Accessibility\n\nAll components follow WAI-ARIA guidelines:\n\n- **Focus Management**: Automatic focus trapping and restoration\n- **Keyboard Navigation**: Full keyboard support\n- **Screen Readers**: Proper ARIA labels and live regions\n- **High Contrast**: Compatible with high contrast modes\n\n### ARIA Attributes\n\nComponents automatically manage ARIA attributes:\n\n```typescript\nconst tabs = createTabs(['tab1', 'tab2']);\n\n// Automatically provides:\n// - aria-selected\n// - aria-controls\n// - aria-labelledby\n// - role=\"tab\"\n// - role=\"tabpanel\"\n```\n\n## Migration Guide\n\n### From Other Headless Libraries\n\n```typescript\n// From Headless UI\n// Before\nimport { Dialog } from '@headlessui/react';\n\n// After\nimport { createModal } from '@casoon/components';\nconst modal = createModal();\n```\n\n### Version Updates\n\nComponents maintain backward compatibility within major versions. Check [CHANGELOG.md](./CHANGELOG.md) for breaking changes.\n\n## Contributing\n\nSee the main [CASOON Atlas README](../../README.md) for contribution guidelines.\n\n## License\n\nMIT","readmeFilename":"README.md"}