{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "title": "Accordion",
  "description": "Disclosures whose height springs open with no overshoot, content fading in as the height lands and the chevron turning on the same spring. Base UI Accordion behaviour.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-auto-height.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/accordion/accordion.tsx",
      "content": "\"use client\";\n\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { useState, type HTMLProps, type ReactNode } from \"react\";\nimport { AutoHeight } from \"../_primitives/auto-height/auto-height\";\n\nexport type AccordionProps<V extends string> = {\n  /** Open items (controlled). */\n  value?: V[];\n  /** Initially open items (uncontrolled). */\n  defaultValue?: V[];\n  onValueChange?: (value: V[]) => void;\n  /** Allow more than one item open at a time. Default `false`. */\n  multiple?: boolean;\n  disabled?: boolean;\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * A stack of disclosures separated by hairlines. Base UI's Accordion supplies the\n * behaviour: buttons in headings, `aria-expanded`/`aria-controls`, arrow keys between\n * triggers, Home/End.\n */\nexport function Accordion<V extends string>({ className = \"\", onValueChange, children, ...props }: AccordionProps<V>) {\n  return (\n    <BaseAccordion.Root<V>\n      {...props}\n      onValueChange={(v) => onValueChange?.(v)}\n      className={`flex min-w-0 flex-col divide-y divide-line-subtle ${className}`}\n    >\n      {children}\n    </BaseAccordion.Root>\n  );\n}\n\nexport type AccordionItemProps<V extends string> = {\n  value: V;\n  /** The trigger's label. */\n  title: ReactNode;\n  /** Heading level of the trigger, so it fits the page outline. Default 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  disabled?: boolean;\n  /** The panel's content. */\n  children: ReactNode;\n  className?: string;\n};\n\nfunction Chevron() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      className=\"size-4 shrink-0 text-text-muted [transition:rotate_var(--eased-duration-spring-smooth)_var(--eased-spring-smooth),color_150ms_var(--eased-ease-standard)] group-data-panel-open:rotate-180 reduced:[transition:none]\"\n    >\n      <path d=\"m4 6.5 4 4 4-4\" />\n    </svg>\n  );\n}\n\n/**\n * Base UI hides a closing panel at once; this keeps it rendered until AutoHeight has\n * finished collapsing it, then hides it so the empty region leaves the accessibility tree.\n */\nfunction PanelBody({ open, htmlProps }: { open: boolean; htmlProps: HTMLProps<HTMLDivElement> }) {\n  const [collapsed, setCollapsed] = useState(!open);\n  const { hidden, children, ...rest } = htmlProps;\n  void hidden;\n  return (\n    <div {...rest} hidden={!open && collapsed}>\n      <AutoHeight\n        open={open}\n        onOpenChangeComplete={(isOpen) => setCollapsed(!isOpen)}\n        innerClassName=\"pb-4 text-ui text-text-secondary text-pretty\"\n      >\n        {children}\n      </AutoHeight>\n    </div>\n  );\n}\n\n/**\n * One item. Its height springs open with no overshoot, the content fades in as the height\n * lands, and the chevron turns on the same spring. Closing fades the content first and is\n * quicker than opening.\n */\nexport function AccordionItem<V extends string>({\n  value,\n  title,\n  headingLevel = 3,\n  disabled,\n  children,\n  className = \"\",\n}: AccordionItemProps<V>) {\n  const H = `h${headingLevel}` as const;\n  return (\n    <BaseAccordion.Item value={value} disabled={disabled} className={`min-w-0 ${className}`}>\n      <BaseAccordion.Header render={<H />} className=\"m-0\">\n        <BaseAccordion.Trigger\n          className={(state) =>\n            `group flex w-full items-center justify-between gap-3 rounded-control-xs py-3 text-left text-ui font-medium focus-ring ${\n              state.disabled ? \"cursor-not-allowed text-text-disabled\" : \"cursor-pointer text-text hover-fine:[&_svg]:text-text-secondary\"\n            }`\n          }\n        >\n          <span className=\"min-w-0 text-balance\">{title}</span>\n          <Chevron />\n        </BaseAccordion.Trigger>\n      </BaseAccordion.Header>\n      <BaseAccordion.Panel\n        keepMounted\n        // Base UI owns open state and ARIA; AutoHeight owns the motion.\n        render={(htmlProps, state) => <PanelBody open={state.open} htmlProps={htmlProps} />}\n      >\n        {children}\n      </BaseAccordion.Panel>\n    </BaseAccordion.Item>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/eased/accordion/accordion.tsx"
    }
  ],
  "docs": "Import Accordion and AccordionItem from components/eased/accordion/accordion. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".",
  "type": "registry:ui"
}