{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:ui",
  "title": "Accordion",
  "description": "Stacked disclosure rows with measured panel animation.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "lucide-react@^1.31.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/accordion-knobs.ts",
      "target": "@components/control-ui/knob-contracts/accordion-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/accordion.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const accordionKnobs = [\n  \"--cui-accordion-item-border-color\",\n  \"--cui-accordion-trigger-foreground\",\n  \"--cui-accordion-trigger-hover-foreground\",\n  \"--cui-accordion-icon-foreground\",\n] as const;\nexport type AccordionKnobStyle = Partial<Record<(typeof accordionKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/accordion.css",
      "target": "@components/control-ui/styles/recipes/accordion.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"accordion\"][data-slot=\"root\"]) {\n    --cui-accordion-item-border-color: var(--border);\n    --cui-accordion-trigger-foreground: var(--foreground);\n    --cui-accordion-trigger-hover-foreground: oklch(from var(--foreground) l c h / 0.8);\n    --cui-accordion-icon-foreground: var(--muted-foreground);\n  }\n  :where([data-control-family=\"accordion\"][data-slot=\"item\"]) {\n    border-block-end: 1px solid var(--cui-accordion-item-border-color);\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"item\"]:last-child) {\n    border-block-end: 0;\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"trigger\"]) {\n    color: var(--cui-accordion-trigger-foreground);\n    font-size: var(--text-body);\n    outline: none;\n    transition: color var(--duration-fast) var(--ease-standard);\n    text-align: left;\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"trigger\"]:hover) {\n    color: var(--cui-accordion-trigger-hover-foreground);\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"trigger\"][data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"icon\"]) {\n    color: var(--cui-accordion-icon-foreground);\n    transition: rotate var(--duration-base) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"trigger\"][data-panel-open] > [data-slot=\"icon\"]) {\n    rotate: 180deg;\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"panel\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n    height: var(--accordion-panel-height);\n    overflow: hidden;\n    transition: height var(--duration-base) var(--ease-emphasized);\n  }\n\n  :where([data-control-family=\"accordion\"][data-slot=\"panel\"][data-starting-style]),\n  :where([data-control-family=\"accordion\"][data-slot=\"panel\"][data-ending-style]) {\n    height: 0;\n  }\n}\n\n@property --cui-accordion-item-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-accordion-trigger-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-accordion-trigger-hover-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-accordion-icon-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/accordion.tsx",
      "target": "@components/control-ui/ui/accordion.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport type { AccordionKnobStyle } from \"@/components/control-ui/knob-contracts/accordion-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type AccordionValue = (string | number)[];\n\nexport type AccordionProps = Omit<ComponentProps<\"div\">, \"defaultValue\" | \"onChange\"> & {\n  value?: AccordionValue;\n  defaultValue?: AccordionValue;\n  onValueChange?: (value: AccordionValue) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n} & { style?: CSSProperties & AccordionKnobStyle };\n\nexport type AccordionItemProps = Omit<\n  ComponentProps<\"div\"> & {\n    value?: string | number;\n    disabled?: boolean;\n  },\n  \"style\"\n> & { style?: CSSProperties & AccordionKnobStyle };\n\nexport type AccordionTriggerProps = Omit<ComponentProps<\"button\">, \"style\"> & { style?: CSSProperties & AccordionKnobStyle };\n\nexport type AccordionPanelProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & AccordionKnobStyle };\n\n// Panel height animates from Base UI's --accordion-panel-height, with no JS measuring.\nexport function Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-control-ui=\"accordion\"\n      data-control-family=\"accordion\"\n      data-slot=\"root\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-control-ui=\"accordion\"\n      data-control-family=\"accordion\"\n      data-slot=\"item\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-control-ui=\"accordion\"\n        data-control-family=\"accordion\"\n        data-slot=\"trigger\"\n        className={cn(\"group flex flex-1 cursor-pointer select-none items-center justify-between gap-4 py-3\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          aria-hidden=\"true\"\n          data-control-ui=\"accordion\"\n          data-control-family=\"accordion\"\n          data-slot=\"icon\"\n          className=\"size-4 shrink-0\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionPanel({ className, children, ...props }: AccordionPanelProps) {\n  return (\n    <AccordionPrimitive.Panel data-control-ui=\"accordion\" data-control-family=\"accordion\" data-slot=\"panel\" {...props}>\n      <div className={cn(\"pb-3\", className)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/accordion.css\"": {}
  },
  "meta": {}
}