{"_id":"@darksnow-ui/accordion","name":"@darksnow-ui/accordion","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/accordion","version":"1.0.0","description":"accordion component for DarkSnow UI","keywords":["react","accordion","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/accordion"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-accordion":"^1.2.11","@radix-ui/react-icons":"^1.3.2","clsx":"^2.1.1"},"devDependencies":{"@types/react":"^19.1.0","@types/react-dom":"^19.1.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/accordion@1.0.0","_integrity":"sha512-pddnche4Jpk9/10kTelB66hsw2T4VwcBfzbLbxB9ESQDMtxstCJzMGDTDoCuHAs7JiMEM9s0gjFJNEAH7vNtsA==","_resolved":"/tmp/2c46e4ee60b9b5135c221a51bed6c0a8/darksnow-ui-accordion-1.0.0.tgz","_from":"file:darksnow-ui-accordion-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-pddnche4Jpk9/10kTelB66hsw2T4VwcBfzbLbxB9ESQDMtxstCJzMGDTDoCuHAs7JiMEM9s0gjFJNEAH7vNtsA==","shasum":"2b4774e41e8167a342fea1af2961049e15948a95","tarball":"https://registry.npmjs.org/@darksnow-ui/accordion/-/accordion-1.0.0.tgz","fileCount":8,"unpackedSize":22056,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAH7Lkpf2PCBPBwjxnYvpePCz+gxj9D/i11vUn0Nc6SqAiBbsfeemKzl1LGX/HdWXX1ScNqE4TdE32eTzRMPojo/RQ=="}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/accordion_1.0.0_1749338975018_0.7815955127352654"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:34.917Z","1.0.0":"2025-06-07T23:29:35.195Z","modified":"2025-06-07T23:29:35.498Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"accordion component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","accordion","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/accordion"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# @darksnow-ui/accordion\n\nA collapsible content component built on Radix UI with smooth animations.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/accordion @radix-ui/react-accordion @radix-ui/react-icons\n# or\nyarn add @darksnow-ui/accordion @radix-ui/react-accordion @radix-ui/react-icons\n# or\npnpm add @darksnow-ui/accordion @radix-ui/react-accordion @radix-ui/react-icons\n```\n\n## Usage\n\n```tsx\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@darksnow-ui/accordion\"\n\nexport function Example() {\n  return (\n    <Accordion type=\"single\" collapsible>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      \n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that match the other components.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n```\n\n## Components\n\n### Accordion\nThe root container component.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `\"single\" \\| \"multiple\"` | - | Whether one or multiple items can be opened |\n| `collapsible` | `boolean` | - | Whether items can be collapsed |\n| `defaultValue` | `string \\| string[]` | - | Default expanded item(s) |\n| `value` | `string \\| string[]` | - | Controlled expanded item(s) |\n| `onValueChange` | `(value: string \\| string[]) => void` | - | Callback when expansion changes |\n\n### AccordionItem\nIndividual accordion item container.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `string` | - | Unique identifier for the item |\n| `disabled` | `boolean` | `false` | Whether the item is disabled |\n| `className` | `string` | - | Additional CSS classes |\n\n### AccordionTrigger\nClickable header that toggles the content.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `className` | `string` | - | Additional CSS classes |\n| `children` | `ReactNode` | - | Trigger content |\n\n### AccordionContent\nCollapsible content area.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `className` | `string` | - | Additional CSS classes |\n| `children` | `ReactNode` | - | Content |\n\n## Examples\n\n### Basic Accordion\n\n```tsx\n<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\n    <AccordionContent>\n      Yes. It adheres to the WAI-ARIA design pattern.\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n### Multiple Items Open\n\n```tsx\n<Accordion type=\"multiple\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Can I open multiple items?</AccordionTrigger>\n    <AccordionContent>\n      Yes, when type is set to \"multiple\".\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger>How do I style it?</AccordionTrigger>\n    <AccordionContent>\n      You can customize styles using className props.\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n### FAQ Example\n\n```tsx\n<Accordion type=\"single\" collapsible className=\"w-full\">\n  <AccordionItem value=\"faq-1\">\n    <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>\n    <AccordionContent>\n      We accept all major credit cards, PayPal, and bank transfers.\n      For enterprise customers, we also offer invoice billing.\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"faq-2\">\n    <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger>\n    <AccordionContent>\n      You can cancel your subscription at any time from your account settings.\n      Your access will continue until the end of your current billing period.\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"faq-3\">\n    <AccordionTrigger>Do you offer refunds?</AccordionTrigger>\n    <AccordionContent>\n      We offer a 30-day money-back guarantee for all new subscriptions.\n      Contact our support team to process your refund request.\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"faq-4\">\n    <AccordionTrigger>Is there a free trial?</AccordionTrigger>\n    <AccordionContent>\n      Yes! We offer a 14-day free trial with full access to all features.\n      No credit card required to start your trial.\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n### Controlled Accordion\n\n```tsx\nconst [value, setValue] = useState<string>(\"\")\n\n<Accordion \n  type=\"single\" \n  collapsible \n  value={value} \n  onValueChange={setValue}\n>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Controlled Item 1</AccordionTrigger>\n    <AccordionContent>\n      This accordion is controlled by state.\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger>Controlled Item 2</AccordionTrigger>\n    <AccordionContent>\n      The value is: {value || \"none\"}\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n### With Rich Content\n\n```tsx\nimport { Badge } from \"@darksnow-ui/badge\"\nimport { Button } from \"@darksnow-ui/button\"\n\n<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"features\">\n    <AccordionTrigger>\n      <div className=\"flex items-center gap-2\">\n        Features\n        <Badge variant=\"secondary\">New</Badge>\n      </div>\n    </AccordionTrigger>\n    <AccordionContent>\n      <div className=\"space-y-4\">\n        <ul className=\"list-disc list-inside space-y-2\">\n          <li>Advanced data tables with sorting and filtering</li>\n          <li>Responsive components for all screen sizes</li>\n          <li>Dark mode support out of the box</li>\n          <li>Accessibility features built-in</li>\n        </ul>\n        \n        <div className=\"flex gap-2\">\n          <Button size=\"sm\">Learn More</Button>\n          <Button variant=\"outline\" size=\"sm\">Documentation</Button>\n        </div>\n      </div>\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n### Disabled Item\n\n```tsx\n<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Available Item</AccordionTrigger>\n    <AccordionContent>\n      This item is available and can be opened.\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"item-2\" disabled>\n    <AccordionTrigger>Disabled Item</AccordionTrigger>\n    <AccordionContent>\n      This content won't be shown because the item is disabled.\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n### Default Open Item\n\n```tsx\n<Accordion type=\"single\" collapsible defaultValue=\"item-1\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>This item opens by default</AccordionTrigger>\n    <AccordionContent>\n      This accordion item is open when the component first renders.\n    </AccordionContent>\n  </AccordionItem>\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger>This item starts closed</AccordionTrigger>\n    <AccordionContent>\n      This content is hidden by default.\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n## Styling\n\nThe accordion components use these CSS classes:\n\n- `AccordionItem`: `border-b border-theme-mark-light`\n- `AccordionTrigger`: `flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left`\n- `AccordionContent`: `overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down`\n\nThe component includes smooth expand/collapse animations using CSS animations.\n\n## Accessibility\n\n- Full keyboard navigation support\n- Screen reader friendly with proper ARIA attributes\n- Focus management with visible focus indicators\n- Follows WAI-ARIA accordion pattern\n- Supports both single and multiple item expansion\n\n## Theming\n\nThe accordion uses CSS custom properties for theming:\n\n- `--theme-mark-light` - Border color between items\n- `--theme-content-muted` - Chevron icon color\n\n## Technical Details\n\n- Built on Radix UI Accordion primitive\n- Uses `clsx` for conditional class names\n- Includes smooth animations for content expansion\n- Supports both controlled and uncontrolled usage\n- TypeScript support with proper type inference\n\n## License\n\nMIT © DarkSnow UI\n","readmeFilename":"README.md","_rev":"1-79548ea12a78343b295e5fba2559a805"}