{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "dependencies": [
    "@data-slot/accordion"
  ],
  "files": [
    {
      "path": "ui/accordion/Accordion.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/accordion/Accordion.astro directly.\n/**\n * @component Accordion\n * @title Accordion\n * @description Vertically stacked collapsible sections that let users show and hide content panels.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2589-14086&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Accordion class=\"w-full max-w-[420px] self-start mt-10\" defaultValue=\"accordion-item-1\">\n *   <AccordionItem value=\"accordion-item-1\">\n *     <AccordionTrigger>\n *       Is it accessible?\n *     </AccordionTrigger>\n *     <AccordionContent>\n *       Yes. It adheres to WAI-ARIA design patterns.\n *     </AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"accordion-item-2\">\n *     <AccordionTrigger>\n *       Can I customize the icon?\n *     </AccordionTrigger>\n *     <AccordionContent>\n *       Yes you can.\n *     </AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bejamas/ui/components/accordion';\n * ---\n *\n * <Accordion class=\"w-full max-w-[420px] self-start\" defaultValue=\"accordion-item-1\">\n *   <AccordionItem value=\"accordion-item-1\">\n *     <AccordionTrigger>\n *       Is it accessible?\n *     </AccordionTrigger>\n *     <AccordionContent>\n *       Yes. It adheres to WAI-ARIA design patterns.\n *     </AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The accordion emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `accordion:change` | `{ value: string[] }` | Fired when expanded items change |\n *\n * ```astro nocollapse\n * <Accordion id=\"my-accordion\">\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Item 1</AccordionTrigger>\n *     <AccordionContent>Content 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n *\n * ```js nocollapse\n *   const accordion = document.getElementById('my-accordion');\n *\n *   accordion.addEventListener('accordion:change', (e) => {\n *     console.log('Expanded items:', e.detail.value);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the accordion programmatically by dispatching an `accordion:set` event:\n *\n * ```js nocollapse\n * const accordion = document.getElementById('my-accordion');\n *\n * // Expand a single item\n * accordion.dispatchEvent(new CustomEvent('accordion:set', {\n *   detail: { value: 'item-1' }\n * }));\n *\n * // Expand multiple items (when multiple prop is true)\n * accordion.dispatchEvent(new CustomEvent('accordion:set', {\n *   detail: { value: ['item-1', 'item-2'] }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The accordion sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | accordion-item | Current state (`open` or `closed`) |\n *\n * @examples\n *\n * ### Multiple choice accordion\n *\n * <Accordion class=\"w-full max-w-[420px] self-start\" multiple defaultValue={[\"accordion-item-1\"]}>\n *   <AccordionItem value=\"accordion-item-1\">\n *     <AccordionTrigger>\n *       Is it accessible?\n *     </AccordionTrigger>\n *     <AccordionContent>\n *       Yes. It adheres to WAI-ARIA design patterns.\n *     </AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"accordion-item-2\">\n *     <AccordionTrigger>\n *       Can I customize the icon?\n *     </AccordionTrigger>\n *     <AccordionContent>\n *       Yes you can.\n *     </AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"accordion-item-3\">\n *     <AccordionTrigger>\n *       Can I customize the icon?\n *     </AccordionTrigger>\n *     <AccordionContent>\n *       Yes you can.\n *     </AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n *\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  multiple?: boolean;\n  defaultValue?: string | string[];\n  collapsible?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  multiple = false,\n  defaultValue,\n  collapsible = true,\n  ...rest\n} = Astro.props as Props;\n\nconst rootDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue;\n---\n\n<div\n  {...rest}\n  data-slot=\"accordion\"\n  data-multiple={multiple ? \"true\" : undefined}\n  data-default-value={rootDefaultValue}\n  data-collapsible={collapsible ? undefined : \"false\"}\n  class={cn(\"flex w-full flex-col\", className)}\n>\n  <slot />\n</div>\n\n<script>\n  import { createAccordion } from \"@data-slot/accordion\";\n\n  document.querySelectorAll('[data-slot=\"accordion\"]').forEach((el) => {\n    createAccordion(el);\n  });\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/accordion/AccordionContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/accordion/AccordionContent.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"accordion-content\"\n  hidden\n  class=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n>\n  <div\n    class={cn(\n      \"pt-0 pb-4 h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n      className,\n    )}\n  >\n    <slot />\n  </div>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/accordion/AccordionItem.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/accordion/AccordionItem.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  value: string;\n  class?: string;\n}\n\nconst { value, class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-value={value}\n  data-slot=\"accordion-item\"\n  class={cn(\"not-last:border-b\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/accordion/AccordionTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/accordion/AccordionTrigger.astro directly.\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\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 { class: className = \"\", asChild = false, type = \"button\", ...rest } = Astro.props as Props;\n\nconst triggerVariants = cva(\n  \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n);\n---\n\n{\n  asChild ? (\n    <div class=\"flex\">\n      <div\n        data-slot=\"accordion-trigger\"\n        data-as-child\n        class={cn(triggerVariants(), className)}\n      >\n        <slot />\n      </div>\n    </div>\n  ) : (\n    <div class=\"flex\">\n      <button\n        {...rest}\n        type={type}\n        data-slot=\"accordion-trigger\"\n        class={cn(triggerVariants(), className)}\n      >\n        <slot />\n        {\n          Astro.slots.has(\"icon\") ? (\n            <span\n              data-slot=\"accordion-trigger-icon\"\n              class=\"pointer-events-none shrink-0\"\n            >\n              <slot name=\"icon\" />\n            </span>\n          ) : (\n            <>\n              <SemanticIcon\n                name=\"chevron-down\"\n                data-slot=\"accordion-trigger-icon\"\n                class=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n                aria-hidden=\"true\"\n              />\n              <SemanticIcon\n                name=\"chevron-up\"\n                data-slot=\"accordion-trigger-icon\"\n                class=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n                aria-hidden=\"true\"\n              />\n            </>\n          )\n        }\n      </button>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/accordion/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/accordion/index.ts directly.\nexport { default as Accordion } from \"./Accordion.astro\";\nexport { default as AccordionItem } from \"./AccordionItem.astro\";\nexport { default as AccordionTrigger } from \"./AccordionTrigger.astro\";\nexport { default as AccordionContent } from \"./AccordionContent.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}