{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "dependencies": [
    "@data-slot/collapsible"
  ],
  "files": [
    {
      "path": "ui/collapsible/Collapsible.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/collapsible/Collapsible.astro directly.\n/**\n * @component Collapsible\n * @title Collapsible\n * @description An interactive component that expands and collapses content sections.\n *\n * @preview\n *\n * <Collapsible class=\"w-[350px] flex flex-col gap-2\">\n *   <div class=\"flex items-center justify-between gap-4 px-4\">\n *     <span class=\"text-sm font-semibold\">@thomkrupa starred 3 repositories</span>\n *     <CollapsibleTrigger asChild>\n *       <Button variant=\"ghost\" size=\"icon\" class=\"size-8\">\n *         <ChevronsUpDownIcon class=\"size-4\" />\n *         <span class=\"sr-only\">Toggle</span>\n *       </Button>\n *     </CollapsibleTrigger>\n *   </div>\n *   <div class=\"rounded-md border px-4 py-2 font-mono text-sm\">@data-slot/collapsible</div>\n *   <CollapsibleContent animation=\"slide\" class=\"flex flex-col gap-2\">\n *     <div class=\"rounded-md border px-4 py-2 font-mono text-sm\">@bejamas/ui</div>\n *     <div class=\"rounded-md border px-4 py-2 font-mono text-sm\">@astrojs/astro</div>\n *   </CollapsibleContent>\n * </Collapsible>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';\n * import { Button } from '@bejamas/ui/components/button';\n * ---\n *\n * <Collapsible>\n *   <CollapsibleTrigger>\n *     <Button variant=\"ghost\">Toggle</Button>\n *   </CollapsibleTrigger>\n *   <CollapsibleContent animation=\"slide\">\n *     Hidden content here\n *   </CollapsibleContent>\n * </Collapsible>\n * ```\n *\n * @api\n *\n * ### Props\n *\n * | Prop | Element | Values | Default |\n * |------|---------|--------|---------|\n * | `open` | collapsible | `boolean` | `false` |\n * | `hiddenUntilFound` | collapsible | `boolean` | `false` |\n * | `animation` | collapsible-content | `none`, `slide` | `none` |\n *\n * `slide` uses `--collapsible-panel-height` for smooth height transitions.\n *\n * ### Events\n *\n * The collapsible emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `collapsible:change` | `{ open: boolean }` | Fired when the open state changes |\n *\n * ```astro nocollapse\n * <Collapsible id=\"my-collapsible\">\n *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n *   <CollapsibleContent>Hidden content</CollapsibleContent>\n * </Collapsible>\n * ```\n *\n * ```js nocollapse\n *   const collapsible = document.getElementById('my-collapsible');\n *\n *   collapsible.addEventListener('collapsible:change', (e) => {\n *     console.log('Is open:', e.detail.open);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the collapsible programmatically by dispatching a `collapsible:set` event:\n *\n * ```js nocollapse\n * const collapsible = document.getElementById('my-collapsible');\n *\n * // Open the collapsible\n * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {\n *   detail: { open: true }\n * }));\n *\n * // Close the collapsible\n * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {\n *   detail: { open: false }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The collapsible sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | collapsible, collapsible-content | Current state (`open` or `closed`) |\n * | `data-hidden-until-found` | collapsible | Enables `hidden=\"until-found\"` when closed |\n * | `data-starting-style` | collapsible-content | Added while enter transition styles are applied |\n * | `data-ending-style` | collapsible-content | Added while exit transition styles are applied |\n *\n * ### CSS Variables\n *\n * The collapsible content exposes size variables for dimension animations:\n *\n * | Variable | Element | Description |\n * |----------|---------|-------------|\n * | `--collapsible-panel-height` | collapsible-content | Measured panel height |\n * | `--collapsible-panel-width` | collapsible-content | Measured panel width |\n *\n * @examples\n *\n * ### Default open\n *\n * <Collapsible open class=\"w-[350px] flex flex-col gap-2\">\n *   <div class=\"flex items-center justify-between gap-4 px-4\">\n *     <span class=\"text-sm font-semibold\">Expanded by default</span>\n *     <CollapsibleTrigger asChild>\n *       <Button variant=\"ghost\" size=\"icon\" class=\"size-8\">\n *         <ChevronsUpDownIcon class=\"size-4\" />\n *         <span class=\"sr-only\">Toggle</span>\n *       </Button>\n *     </CollapsibleTrigger>\n *   </div>\n *   <CollapsibleContent class=\"flex flex-col gap-2\">\n *     <div class=\"rounded-md border px-4 py-2 font-mono text-sm\">This content is visible by default</div>\n *   </CollapsibleContent>\n * </Collapsible>\n *\n * ### Animated content\n *\n * <Collapsible class=\"w-[350px] flex flex-col gap-2\">\n *   <CollapsibleTrigger asChild>\n *     <Button variant=\"outline\">Toggle with slide</Button>\n *   </CollapsibleTrigger>\n *   <CollapsibleContent animation=\"slide\" class=\"pt-2\">\n *     <div class=\"rounded-md border px-4 py-2 text-sm\">\n *       This content animates panel height using CSS variables.\n *     </div>\n *   </CollapsibleContent>\n * </Collapsible>\n *\n * ### Find-in-page support\n *\n * <Collapsible hiddenUntilFound class=\"w-[350px] flex flex-col gap-2\">\n *   <CollapsibleTrigger asChild>\n *     <Button variant=\"outline\">Toggle hidden-until-found content</Button>\n *   </CollapsibleTrigger>\n *   <CollapsibleContent class=\"pt-2\">\n *     <div class=\"rounded-md border px-4 py-2 text-sm\">\n *       Search this sentence with browser find to auto-expand.\n *     </div>\n *   </CollapsibleContent>\n * </Collapsible>\n *\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  open?: boolean;\n  hiddenUntilFound?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  open = false,\n  hiddenUntilFound = false,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"collapsible\"\n  data-state={open ? \"open\" : \"closed\"}\n  data-default-open={open ? true : undefined}\n  data-hidden-until-found={hiddenUntilFound ? \"\" : undefined}\n  class={cn(\n    \"\",\n    \"group/collapsible data-[state=closed]:[&_[data-slot=collapsible-content]]:hidden\",\n    className,\n  )}\n>\n  <slot />\n</div>\n\n<script>\n  import { createCollapsible } from \"@data-slot/collapsible\";\n\n  document.querySelectorAll<HTMLElement>('[data-slot=\"collapsible\"]').forEach((el) => {\n    createCollapsible(el);\n  });\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/collapsible/CollapsibleTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/collapsible/CollapsibleTrigger.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n  /** Radix-like: render wrapper so the child can be the interactive element */\n  asChild?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  asChild = false,\n  type = \"button\",\n  ...rest\n} = Astro.props as Props;\n---\n\n{\n  asChild ? (\n    <div data-slot=\"collapsible-trigger\" data-as-child class={cn(\"\", className)}>\n      <slot />\n    </div>\n  ) : (\n    <button\n      {...rest}\n      type={type}\n      data-slot=\"collapsible-trigger\"\n      class={cn(\"\", className)}\n    >\n      <slot />\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/collapsible/CollapsibleContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/collapsible/CollapsibleContent.astro directly.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends VariantProps<typeof collapsibleContentVariants>, HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nexport const collapsibleContentVariants = cva(\"overflow-hidden\", {\n  variants: {\n    animation: {\n      none: \"\",\n      slide:\n        \"h-(--collapsible-panel-height) transition-[height] duration-200 ease-out motion-reduce:transition-none\",\n    },\n  },\n  defaultVariants: {\n    animation: \"none\",\n  },\n});\n\nconst {\n  class: className = \"\",\n  animation = \"none\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"collapsible-content\"\n  class={cn(\"\", collapsibleContentVariants({ animation }), className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/collapsible/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/collapsible/index.ts directly.\nexport { default as Collapsible } from \"./Collapsible.astro\";\nexport { default as CollapsibleTrigger } from \"./CollapsibleTrigger.astro\";\nexport { default as CollapsibleContent } from \"./CollapsibleContent.astro\";\nexport { collapsibleContentVariants } from \"./CollapsibleContent.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}