{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:ui",
  "title": "Accordion",
  "description": "Stacked sections that expand and collapse. Good for FAQs and settings groups. `type=\"single\"` opens one at a time (add `collapsible` to allow closing it); `type=\"multiple\"` doesn't.",
  "dependencies": [
    "@radix-ui/react-accordion@^1.3.1",
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/icons.json",
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/accordion.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"@/lib/junco/icons\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\n\nexport const accordionVariants = tv({\n  slots: {\n    root: \"w-full\",\n    item: \"\",\n    trigger: [\n      \"group flex w-full flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium text-foreground\",\n      \"transition-colors duration-fast ease-standard hover:underline underline-offset-4\",\n      \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n    ],\n    icon: [\n      \"size-4 shrink-0 text-muted-foreground\",\n      \"transition-transform duration-base ease-standard group-data-[state=open]:rotate-180\",\n    ],\n    content: [\n      \"overflow-hidden text-sm text-muted-foreground\",\n      \"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up\",\n    ],\n    contentInner: \"pb-4\",\n  },\n  variants: {\n    variant: {\n      /** Rows divided by hairlines. The default. */\n      line: { item: \"border-b border-border last:border-b-0\" },\n      /** Each item is its own bordered card with a gap between. */\n      card: {\n        root: \"grid gap-2\",\n        item: \"rounded-card border border-border bg-card px-4\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"line\" },\n});\n\ntype AccordionVariant = VariantProps<typeof accordionVariants>[\"variant\"];\nconst AccordionVariantContext = React.createContext<AccordionVariant>(\"line\");\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> &\n  VariantProps<typeof accordionVariants>;\n\n/**\n * Stacked sections that expand and collapse. Good for FAQs and settings groups.\n * `type=\"single\"` opens one at a time (add `collapsible` to allow closing it); `type=\"multiple\"` doesn't.\n *\n *   <Accordion type=\"single\" collapsible>\n *     <AccordionItem value=\"a\">\n *       <AccordionTrigger>Is it free?</AccordionTrigger>\n *       <AccordionContent>Yes, MIT licensed.</AccordionContent>\n *     </AccordionItem>\n *   </Accordion>\n */\nexport const Accordion = React.forwardRef<React.ElementRef<typeof AccordionPrimitive.Root>, AccordionProps>(\n  ({ className, variant = \"line\", ...props }, ref) => (\n    <AccordionVariantContext.Provider value={variant}>\n      <AccordionPrimitive.Root\n        ref={ref}\n        className={accordionVariants({ variant }).root({ className })}\n        {...(props as React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>)}\n      />\n    </AccordionVariantContext.Provider>\n  ),\n);\nAccordion.displayName = \"Accordion\";\n\nexport const AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  const variant = React.useContext(AccordionVariantContext);\n  return <AccordionPrimitive.Item ref={ref} className={accordionVariants({ variant }).item({ className })} {...props} />;\n});\nAccordionItem.displayName = \"AccordionItem\";\n\nexport interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  /** The heading level wrapping the trigger, for a correct document outline. Default 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  classNames?: { heading?: string; icon?: string };\n}\n\nexport const AccordionTrigger = React.forwardRef<React.ElementRef<typeof AccordionPrimitive.Trigger>, AccordionTriggerProps>(\n  ({ className, classNames, headingLevel = 3, children, ...props }, ref) => {\n    const styles = accordionVariants();\n    const Heading = `h${headingLevel}` as \"h3\";\n    return (\n      <AccordionPrimitive.Header asChild>\n        <Heading className={cn(\"flex\", classNames?.heading)}>\n          <AccordionPrimitive.Trigger ref={ref} className={styles.trigger({ className })} {...props}>\n            {children}\n            <ChevronDownIcon className={styles.icon({ className: classNames?.icon })} />\n          </AccordionPrimitive.Trigger>\n        </Heading>\n      </AccordionPrimitive.Header>\n    );\n  },\n);\nAccordionTrigger.displayName = \"AccordionTrigger\";\n\nexport const AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & { classNames?: { inner?: string } }\n>(({ className, classNames, children, ...props }, ref) => {\n  const styles = accordionVariants();\n  return (\n    <AccordionPrimitive.Content ref={ref} className={styles.content({ className })} {...props}>\n      <div className={styles.contentInner({ className: classNames?.inner })}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n});\nAccordionContent.displayName = \"AccordionContent\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/accordion",
  "meta": {
    "hash": "a32e91888d28d92b",
    "source": "packages/react/src/components/accordion.tsx",
    "exports": [
      "accordionVariants",
      "AccordionProps",
      "Accordion",
      "AccordionItem",
      "AccordionTriggerProps",
      "AccordionTrigger",
      "AccordionContent"
    ],
    "props": {
      "AccordionTrigger": {
        "extends": "React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>",
        "props": [
          {
            "name": "headingLevel",
            "optional": true,
            "type": "2 | 3 | 4 | 5 | 6",
            "description": "The heading level wrapping the trigger, for a correct document outline. Default 3."
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "{ heading?: string; icon?: string }"
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "variant": [
          "line",
          "card"
        ]
      },
      "defaultVariants": {
        "variant": "line"
      }
    },
    "usage": "<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"a\">\n    <AccordionTrigger>Is it free?</AccordionTrigger>\n    <AccordionContent>Yes, MIT licensed.</AccordionContent>\n  </AccordionItem>\n</Accordion>",
    "docsUrl": "https://junco.madebytobi.com/docs/components/accordion"
  }
}