` directly — no need to\n reach for descendant selectors.\n\n- `trigger` is a `ReactNode`, so wrap it in your own elements to style\n the label.\n\n- `
` and a disabled item's `data-disabled` are both plain\n attributes, so Tailwind's `open:` and `data-[disabled]:` variants apply\n directly — no need for the `icon` function-of-`isOpen` form just to\n rotate a chevron.\n\nThe example below uses [`cn`](https://ui.shadcn.com/docs/installation/manual#add-a-cn-helper),\nthe common `clsx` + `tailwind-merge` helper, to combine a shared base\nclass with any per-item override:\n\n```tsx\nimport { Accordion } from '@archoleat/next-accordion';\n\nimport { cn } from './lib/cn';\n\nconst ChevronIcon = () => (\n \n \n \n);\n\nconst items = [\n { id: 1, trigger: 'First', content: First content
},\n { id: 2, trigger: 'Second', content: Second content
},\n];\n\nconst Example = () => (\n ({\n ...item,\n className: 'overflow-hidden rounded-lg border border-slate-200',\n contentClassName: 'p-4 pt-0',\n duration: 250,\n easing: 'ease-in-out',\n icon: ,\n triggerClassName: cn(\n 'flex cursor-pointer items-center justify-between p-4',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n ),\n }))}\n />\n);\n\nexport { Example };\n```\n\n## Props\n\n\n\n### `Accordion`\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `items` | `AccordionItemDataType[]` | — | Data rendered as a list of `AccordionItem`s. Each entry accepts `id` (`number`), `trigger`, `content`, plus every `AccordionItem` prop below (except `children`, which maps to `content`). Mutually exclusive with `children`. |\n| `children` | `ReactNode` | — | `AccordionItem` elements composed directly (compound component pattern). Mutually exclusive with `items`. |\n| `className` | `string` | — | Class applied to the wrapping `ul`. Each item is rendered inside its own `li`. |\n| `exclusive` | `boolean` | `false` | When `true`, opening one item closes the others. |\n| `openId` | `AccordionOpenIdType` | — | Id of the currently open item (controlled). Only meaningful when `exclusive` is `true`. Pair with `onOpenIdChange`. |\n| `defaultOpenId` | `AccordionOpenIdType` | `null` | Initial open item id (uncontrolled). Only meaningful when `exclusive` is `true`. |\n| `onOpenIdChange` | `(openId: AccordionOpenIdType) => void` | — | Called when the open item changes in `exclusive` mode. |\n\n### `AccordionItem`\n\n| Prop | Type | Default | Description |\n| ------------------------- | ---------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------- |\n| `trigger` | `ReactNode` | — | Content rendered inside the `summary` element. **Required.** |\n| `children` | `ReactNode` | — | Content rendered inside the accordion panel. **Required.** |\n| `defaultOpen` | `boolean` | `false` | Initial expanded state (uncontrolled). |\n| `open` | `boolean` | — | Expanded state (controlled). Pair with `onOpenChange`. |\n| `onOpenChange` | `(isOpen: boolean) => void` | — | Called when the trigger is clicked. |\n| `disabled` | `boolean` | `false` | Ignores clicks on the trigger. |\n| `duration` | `number` | `300` | Animation duration in milliseconds. |\n| `easing` | `string` | `'ease-in-out'` | Animation easing, passed to the Web Animations API. |\n| `icon` | `ReactNode \\| (isOpen: boolean) => ReactNode` | — | Rendered after `trigger`; the function form receives the open state. |\n| `disableTriggerSelection` | `boolean` | `false` | Prevents text selection on the trigger (e.g. on double-click). |\n| `triggerClassName` | `string` | — | Class applied to the `summary` element. |\n| `contentClassName` | `string` | — | Class applied to the panel wrapper `div`. |\n\n\n\nAll other native `details` attributes (`id`, `className`, and so on) are\nforwarded to the underlying `` element. The animation is skipped\nin favor of an instant toggle when the user has `prefers-reduced-motion`\nenabled.\n\n## Types\n\n`@archoleat/next-accordion` exports the prop types for both components,\nplus the shape used by `items` and by the open-item id, so you can type\nyour own code around them without redeclaring the definitions.\n\n`AccordionOpenIdType` (`number | string | null`) is the type of `openId`,\n`defaultOpenId`, and the argument passed to `onOpenIdChange` — see\n[Controlling the open item from outside](#controlling-the-open-item-from-outside).\n\nType an `items` array built outside JSX with `AccordionItemDataType`:\n\n```tsx\nimport type { AccordionItemDataType } from '@archoleat/next-accordion';\n\nconst items: AccordionItemDataType[] = [\n { id: 1, trigger: 'First', content: First content
},\n { id: 2, trigger: 'Second', content: Second content
},\n];\n\nexport { items };\n```\n\nType a wrapper component with `AccordionProps` / `AccordionItemProps`:\n\n```tsx\nimport { Accordion, AccordionItem } from '@archoleat/next-accordion';\nimport type {\n AccordionItemProps,\n AccordionProps,\n} from '@archoleat/next-accordion';\n\nconst FaqAccordion = (props: AccordionProps) => (\n \n);\n\nconst FaqItem = (props: AccordionItemProps) => (\n \n);\n\nexport { FaqAccordion, FaqItem };\n```\n\n## Contributing\n\nPlease read [**CONTRIBUTING**](https://github.com/archoleat/.github/blob/main/CONTRIBUTING.md)\nto start contributing.\n\n## License\n\nThis project is licensed under the [**MIT license**](LICENSE).\n","readmeFilename":"README.md"}