{
  "schemaVersion": 1,
  "target": "react",
  "name": "accordion",
  "version": "0.2.0",
  "category": "core",
  "title": "Accordion",
  "description": "Stacked sections on hairline dividers that expand and collapse with an animated height and content fade, one or several at a time.",
  "tags": [
    "accordion",
    "disclosure",
    "collapsible",
    "faq",
    "base-ui"
  ],
  "requires": {
    "projectTypes": [
      "next",
      "vite-react"
    ],
    "styling": "tailwind-v4"
  },
  "npmDependencies": {
    "@base-ui/react": "^1.9.0"
  },
  "registryDependencies": [],
  "docsPath": "/components/accordion",
  "props": [
    {
      "name": "Accordion.multiple",
      "type": "boolean",
      "default": "false",
      "description": "Lets more than one section be open at a time."
    },
    {
      "name": "Accordion.defaultValue",
      "type": "any[]",
      "description": "Values of the sections open initially, when uncontrolled."
    },
    {
      "name": "Accordion.value",
      "type": "any[]",
      "description": "Values of the open sections, when controlled. Pair with onValueChange."
    },
    {
      "name": "Accordion.onValueChange",
      "type": "(value: any[], details) => void",
      "description": "Called when a section opens or closes."
    },
    {
      "name": "Accordion.hiddenUntilFound",
      "type": "boolean",
      "default": "false",
      "description": "Lets the browser's find-in-page search reveal and open closed sections."
    },
    {
      "name": "Accordion.disabled",
      "type": "boolean",
      "default": "false",
      "description": "Disables every section."
    },
    {
      "name": "AccordionItem.value",
      "type": "any",
      "description": "Identifies the section in value and defaultValue. Generated when omitted."
    },
    {
      "name": "AccordionItem.disabled",
      "type": "boolean",
      "default": "false",
      "description": "Disables this section."
    },
    {
      "name": "AccordionTrigger.headingClassName",
      "type": "string",
      "description": "Classes for the <h3> that wraps the trigger button."
    },
    {
      "name": "AccordionPanel.panelClassName",
      "type": "string",
      "description": "Classes for the animated panel element. className styles the padded content inside."
    }
  ],
  "accessibility": [
    "Each trigger is a native <button> inside an <h3>, with aria-expanded and aria-controls pointing at its panel.",
    "Panels have role=region and are labelled by their trigger.",
    "Enter and Space toggle a section; Tab moves between triggers in document order.",
    "Closed panels are removed from the DOM (or hidden with hidden=until-found), so their content is not focusable or announced.",
    "The chevron is decorative; the open state is conveyed by aria-expanded and by the visible content.",
    "Panels open in 220ms and close in 180ms with a quint ease-out; with reduced motion they open and close instantly and the chevron flips without rotating."
  ],
  "states": [
    "closed",
    "open",
    "disabled"
  ],
  "files": [
    {
      "path": "ui/accordion.tsx",
      "content": "\"use client\";\n\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\n\nfunction cx(...classes: Array<string | false | null | undefined>) {\n  return classes.filter(Boolean).join(\" \");\n}\n\nexport interface AccordionProps extends Omit<BaseAccordion.Root.Props, \"className\"> {\n  className?: string;\n}\n\n/**\n * A stack of collapsible sections on hairline dividers. One item opens at a time unless `multiple` is set.\n * `defaultValue` and `value` are arrays of item values.\n */\nexport function Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root\n      className={cx(\n        \"w-full divide-y divide-zinc-950/10 border-y border-zinc-950/10 dark:divide-white/10 dark:border-white/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface AccordionItemProps extends Omit<BaseAccordion.Item.Props, \"className\"> {\n  className?: string;\n}\n\n/** One section: an `AccordionTrigger` followed by an `AccordionPanel`. */\nexport function AccordionItem({ className, ...props }: AccordionItemProps) {\n  return <BaseAccordion.Item className={className} {...props} />;\n}\n\nexport interface AccordionTriggerProps extends Omit<BaseAccordion.Trigger.Props, \"className\"> {\n  className?: string;\n  /** Classes for the heading element that wraps the trigger (an `<h3>` by default). */\n  headingClassName?: string;\n}\n\n/** The heading button that opens and closes its section. */\nexport function AccordionTrigger({ className, headingClassName, children, ...props }: AccordionTriggerProps) {\n  return (\n    <BaseAccordion.Header className={cx(\"m-0 flex\", headingClassName)}>\n      <BaseAccordion.Trigger\n        className={cx(\n          \"group flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-lg py-3.5 text-left text-sm leading-5 font-medium\",\n          \"text-zinc-950 dark:text-white\",\n          \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500\",\n          \"data-disabled:cursor-not-allowed data-disabled:opacity-45\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <span\n          aria-hidden=\"true\"\n          className={cx(\n            \"-my-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-zinc-500\",\n            \"transition-[background-color,color] duration-150 ease-out motion-reduce:transition-none\",\n            \"group-hover:bg-zinc-950/[0.04] group-hover:text-zinc-950 group-data-panel-open:text-zinc-950\",\n            \"dark:group-hover:bg-white/[0.06] dark:group-hover:text-white dark:group-data-panel-open:text-white\",\n            \"group-data-disabled:bg-transparent\",\n          )}\n        >\n          <svg\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            className={cx(\n              \"size-4\",\n              \"transition-[rotate] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none\",\n              \"group-data-panel-open:rotate-180\",\n            )}\n          >\n            <path d=\"m4.5 6.25 3.5 3.5 3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </span>\n      </BaseAccordion.Trigger>\n    </BaseAccordion.Header>\n  );\n}\n\nexport interface AccordionPanelProps extends Omit<BaseAccordion.Panel.Props, \"className\"> {\n  className?: string;\n  /** Classes for the panel element itself. `className` styles the padded content inside it. */\n  panelClassName?: string;\n}\n\n/**\n * The section content. Its height animates open and closed (220ms, quint ease-out; closing is faster)\n * while the content fades; instant with reduced motion.\n */\nexport function AccordionPanel({ className, panelClassName, children, ...props }: AccordionPanelProps) {\n  return (\n    <BaseAccordion.Panel\n      className={cx(\n        \"h-(--accordion-panel-height) overflow-hidden\",\n        \"transition-[height,opacity] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none\",\n        \"data-starting-style:h-0 data-starting-style:opacity-0\",\n        \"data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-180\",\n        panelClassName,\n      )}\n      {...props}\n    >\n      <div className={cx(\"pr-11 pb-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\", className)}>{children}</div>\n    </BaseAccordion.Panel>\n  );\n}\n"
    }
  ],
  "example": {
    "content": "import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from \"@/components/seamless/ui/accordion\";\n\nexport default function AccordionExample() {\n  return (\n    <Accordion defaultValue={[\"install\"]} className=\"max-w-md\">\n      <AccordionItem value=\"install\">\n        <AccordionTrigger>How do I install a component?</AccordionTrigger>\n        <AccordionPanel>Run the CLI with the component name. The source lands in your project, ready to edit.</AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"update\">\n        <AccordionTrigger>Can I update it later?</AccordionTrigger>\n        <AccordionPanel>Yes. The CLI shows a diff before it changes any file you have edited.</AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"motion\">\n        <AccordionTrigger>Does it respect reduced motion?</AccordionTrigger>\n        <AccordionPanel>Panels open instantly when the system asks for reduced motion.</AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n"
  }
}