{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:item",
  "title": "Accordion",
  "description": "A collapsible content component.",
  "files": [
    {
      "path": "registry/brook/ui/accordion/accordion.tsx",
      "content": "\"use client\";\n\nimport { Accordion } from \"@base-ui/react/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./accordion.module.css\";\n\nfunction AccordionRoot({ className, ...props }: Accordion.Root.Props) {\n  return <Accordion.Root className={cn(styles.root, className)} data-slot=\"accordion-root\" {...props} />;\n}\n\nfunction AccordionItem({ className, ...props }: Accordion.Item.Props) {\n  return <Accordion.Item className={cn(styles.item, className)} data-slot=\"accordion-item\" {...props} />;\n}\n\nfunction AccordionHeader({ className, ...props }: Accordion.Header.Props) {\n  return <Accordion.Header className={cn(styles.header, className)} data-slot=\"accordion-header\" {...props} />;\n}\n\nfunction AccordionTrigger({ className, children, ...props }: Accordion.Trigger.Props) {\n  return (\n    <Accordion.Trigger className={cn(styles.trigger, className)} data-slot=\"accordion-trigger\" {...props}>\n      <div className={styles.icon}>\n        <svg aria-label=\"Accordion toggle icon\" fill=\"none\" height=\"18\" role=\"img\" viewBox=\"0 0 20 20\" width=\"18\">\n          <title>Toggle accordion</title>\n          <path\n            className={styles.horizontalLine}\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 className={cn(styles.panel, className)} data-slot=\"accordion-panel\" {...props}>\n      <div className={styles.content}>\n        <div className={styles.contentInner}>{children}</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"
    },
    {
      "path": "registry/brook/ui/accordion/accordion.module.css",
      "content": ".root {\n  width: 32rem;\n  max-width: calc(100vw - 8rem);\n  display: flex;\n  flex-direction: column;\n}\n\n.item {\n  overflow: hidden;\n  background-color: var(--mix-card-75-bg);\n  padding: 1rem;\n  border-bottom: 0.5px solid var(--border);\n  transition:\n    margin 200ms var(--ease-in-out-quad),\n    border-radius 200ms var(--ease-in-out-quad),\n    border-color 200ms var(--ease-in-out-quad);\n\n  &:first-child {\n    border-radius: 1.5rem 1.5rem 0 0;\n  }\n\n  &:last-child {\n    border-radius: 0 0 1.5rem 1.5rem;\n    border-bottom-color: transparent;\n  }\n\n  &:first-child:last-child {\n    border-radius: 1.5rem;\n  }\n\n  &[data-open] {\n    border-radius: 1.5rem;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    border-bottom-color: transparent;\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  &:has(+ .item[data-open]):not([data-open]) {\n    border-radius: 0 0 1.5rem 1.5rem;\n    border-bottom-color: transparent;\n\n    &:first-child {\n      border-radius: 1.5rem;\n    }\n  }\n\n  &[data-open] + &:not([data-open]) {\n    border-radius: 1.5rem 1.5rem 0 0;\n\n    &:last-child {\n      border-radius: 1.5rem;\n    }\n  }\n\n  &[data-open] + &:not([data-open]):has(+ .item[data-open]) {\n    border-radius: 1.5rem;\n    border-bottom-color: transparent;\n  }\n}\n\n.header {\n  margin: 0;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  color: var(--muted-foreground);\n  transition:\n    color 200ms ease,\n    rotate 150ms var(--ease-in-out-quad);\n  rotate: 0deg;\n}\n\n.horizontalLine {\n  transition:\n    opacity 150ms var(--ease-in-out-quad),\n    scale 150ms var(--ease-in-out-quad);\n  transform-origin: center;\n}\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 1rem;\n\n  font-size: 1rem;\n  line-height: 1.5;\n  letter-spacing: -0.02em;\n  font-weight: 350;\n  text-align: left;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--secondary-foreground);\n\n  &[data-panel-open] .icon {\n    rotate: 90deg;\n  }\n\n  &:hover .icon {\n    color: var(--foreground);\n  }\n\n  &[data-panel-open] .horizontalLine {\n    opacity: 0;\n    scale: 0;\n  }\n}\n\n.panel {\n  height: var(--accordion-panel-height);\n  overflow: hidden;\n  transition: height 150ms var(--ease-in-out-quad);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    height: 0;\n  }\n}\n\n.content {\n  overflow: hidden;\n  width: 100%;\n}\n\n.contentInner {\n  margin-left: calc(3rem);\n  padding-right: 3rem;\n  font-size: 0.875rem;\n  line-height: 1.6;\n  color: oklch(from var(--foreground) l c h / 0.75);\n}\n\n@media (max-width: 640px) {\n  .root {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .item {\n    padding: 1rem;\n  }\n\n  .trigger {\n    gap: 0.75rem;\n  }\n\n  .icon {\n    width: 1.75rem;\n    height: 1.75rem;\n    flex-shrink: 0;\n\n    & svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  .contentInner {\n    margin-left: 2.5rem;\n    padding-right: 0;\n    font-size: 0.9375rem;\n    line-height: 1.5;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/accordion/accordion.module.css"
    }
  ]
}