{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-tailwind",
  "type": "registry:item",
  "title": "Accordion (Tailwind)",
  "description": "A collapsible content component.",
  "files": [
    {
      "path": "registry/brook/tailwind/ui/accordion.tsx",
      "content": "\"use client\";\n\nimport { Accordion } from \"@base-ui/react/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nfunction AccordionRoot({ className, ...props }: Accordion.Root.Props) {\n  return (\n    <Accordion.Root\n      className={cn(\"flex w-[32rem] max-w-[calc(100vw-8rem)] flex-col max-sm:w-full max-sm:max-w-full\", className)}\n      data-slot=\"accordion-root\"\n      {...props}\n    />\n  );\n}\n\nfunction AccordionItem({ className, ...props }: Accordion.Item.Props) {\n  return (\n    <Accordion.Item\n      className={cn(\n        \"overflow-hidden border-border border-b-[0.5px] bg-[var(--mix-card-75-bg)] p-4\",\n        \"transition-[margin,border-radius,border-color] duration-200 ease-[var(--ease-in-out-quad)]\",\n        // Default state - first item has top rounded, last item has bottom rounded\n        \"first:rounded-t-3xl\",\n        \"last:rounded-b-3xl last:border-b-transparent\",\n        \"first:last:rounded-3xl\",\n        // Expanded item gets full rounded corners and unsticks with margins\n        \"data-[open]:my-2 data-[open]:rounded-3xl data-[open]:border-b-transparent\",\n        \"data-[open]:last:mb-0 data-[open]:first:mt-0\",\n        // Item before an expanded item gets rounded bottom only\n        \"[&:has(+*[data-open]):not([data-open])]:rounded-t-none [&:has(+*[data-open]):not([data-open])]:rounded-b-3xl [&:has(+*[data-open]):not([data-open])]:border-b-transparent\",\n        \"[&:has(+*[data-open]):not([data-open]):first-child]:rounded-3xl\",\n        // Item after an expanded item gets rounded top only\n        \"[*[data-open]+&:not([data-open])]:rounded-t-3xl [*[data-open]+&:not([data-open])]:rounded-b-none\",\n        \"[*[data-open]+&:not([data-open]):last-child]:rounded-3xl\",\n        // Item sandwiched between two expanded items gets full rounded corners\n        \"[*[data-open]+&:not([data-open]):has(+*[data-open])]:rounded-3xl [*[data-open]+&:not([data-open]):has(+*[data-open])]:border-b-transparent\",\n        className\n      )}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  );\n}\n\nfunction AccordionHeader({ className, ...props }: Accordion.Header.Props) {\n  return <Accordion.Header className={cn(\"m-0\", className)} data-slot=\"accordion-header\" {...props} />;\n}\n\nfunction AccordionTrigger({ className, children, ...props }: Accordion.Trigger.Props) {\n  return (\n    <Accordion.Trigger\n      className={cn(\n        \"group flex w-full cursor-pointer items-center gap-4 border-none bg-transparent text-left max-sm:gap-3\",\n        \"font-[350] text-base text-secondary-foreground tracking-[-0.02em]\",\n        className\n      )}\n      data-slot=\"accordion-trigger\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"flex h-8 w-8 items-center justify-center text-muted-foreground max-sm:h-7 max-sm:w-7 max-sm:flex-shrink-0\",\n          \"transition-[color,rotate] duration-[200ms,150ms] ease-[ease,var(--ease-in-out-quad)]\",\n          \"rotate-0\",\n          \"[[data-panel-open]_&]:rotate-90\",\n          \"group-hover:text-foreground\"\n        )}\n      >\n        <svg\n          aria-label=\"Accordion toggle icon\"\n          className=\"max-sm:h-4 max-sm:w-4\"\n          fill=\"none\"\n          height=\"18\"\n          role=\"img\"\n          viewBox=\"0 0 20 20\"\n          width=\"18\"\n        >\n          <title>Toggle accordion</title>\n          <path\n            className={cn(\n              \"origin-center transition-[opacity,scale] duration-150 ease-[var(--ease-in-out-quad)]\",\n              \"[[data-panel-open]_&]:scale-0 [[data-panel-open]_&]:opacity-0\"\n            )}\n            d=\"M4 10L16 10\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2\"\n          />\n          <path d=\"M10 4L10 16\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeWidth=\"2\" />\n        </svg>\n      </div>\n      <div>{children}</div>\n    </Accordion.Trigger>\n  );\n}\n\nfunction AccordionPanel({ className, children, ...props }: Accordion.Panel.Props) {\n  return (\n    <Accordion.Panel\n      className={cn(\n        \"h-[var(--accordion-panel-height)] overflow-hidden\",\n        \"transition-[height] duration-150 ease-[var(--ease-in-out-quad)]\",\n        \"data-[ending-style]:h-0 data-[starting-style]:h-0\",\n        className\n      )}\n      data-slot=\"accordion-panel\"\n      {...props}\n    >\n      <div className=\"w-full overflow-hidden\">\n        <div className=\"ml-12 pr-12 text-foreground/75 text-sm leading-[1.6] max-sm:ml-10 max-sm:pr-0 max-sm:text-[0.9375rem] max-sm:leading-[1.5]\">\n          {children}\n        </div>\n      </div>\n    </Accordion.Panel>\n  );\n}\n\nexport { AccordionRoot as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger };\n",
      "type": "registry:file",
      "target": "~/components/ui/accordion/accordion.tsx"
    }
  ]
}