{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "accordion",
  "title": "Accordion",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/accordion/Accordion.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\nimport type { AccordionRootEmits } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { accordionVariants } from './accordion.variants'\n\n// Inlined unions: SFC compiler can't extract runtime props from\n// `NonNullable<AccordionVariants['variant']>` or reka-ui's\n// `AccordionRootProps`. Inline only the surface we expose.\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    variant?: 'default' | 'separated' | 'ghost'\n    type?: 'single' | 'multiple'\n    modelValue?: string | string[]\n    defaultValue?: string | string[]\n    collapsible?: boolean\n    disabled?: boolean\n    dir?: 'ltr' | 'rtl'\n    orientation?: 'horizontal' | 'vertical'\n    asChild?: boolean\n    as?: string | object\n  }>(),\n  {\n    variant: 'default',\n  },\n)\n\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst delegated = reactiveOmit(props, 'class', 'variant')\nconst forwarded = useForwardPropsEmits(delegated, emits)\n\nprovide(\n  Symbol.for('accordionVariant'),\n  computed(() => props.variant),\n)\n</script>\n\n<template>\n  <AccordionRoot\n    data-uipkge\n    data-slot=\"accordion\"\n    :data-variant=\"variant\"\n    v-bind=\"forwarded\"\n    :class=\"cn(accordionVariants({ variant }), props.class)\"\n  >\n    <slot />\n  </AccordionRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/Accordion.vue"
    },
    {
      "path": "packages/registry-vue/components/accordion/AccordionContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { AccordionContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionContent as RkAccordionContent } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\nconst delegated = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <RkAccordionContent\n    data-uipkge\n    data-slot=\"accordion-content\"\n    v-bind=\"delegated\"\n    :class=\"\n      cn(\n        'text-muted-foreground overflow-hidden text-sm',\n        'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"pt-0 pb-4\">\n      <slot />\n    </div>\n  </RkAccordionContent>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/AccordionContent.vue"
    },
    {
      "path": "packages/registry-vue/components/accordion/AccordionHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport type { AccordionHeaderProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionHeader as RkAccordionHeader } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionHeaderProps & { class?: HTMLAttributes['class'] }>()\nconst delegated = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <RkAccordionHeader data-uipkge data-slot=\"accordion-header\" v-bind=\"delegated\" :class=\"cn('flex', props.class)\">\n    <slot />\n  </RkAccordionHeader>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/AccordionHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/accordion/AccordionItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport type { AccordionItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionItem as RkAccordionItem } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { accordionItemVariants } from './accordion.variants'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\nconst delegated = reactiveOmit(props, 'class')\n\nconst variantRef = inject<{ value: 'default' | 'separated' | 'ghost' } | undefined>(\n  Symbol.for('accordionVariant'),\n  undefined,\n)\nconst variant = computed(() => variantRef?.value ?? 'default')\n</script>\n\n<template>\n  <RkAccordionItem\n    data-uipkge\n    data-slot=\"accordion-item\"\n    v-bind=\"delegated\"\n    :class=\"cn(accordionItemVariants({ variant }), props.class)\"\n  >\n    <slot />\n  </RkAccordionItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/AccordionItem.vue"
    },
    {
      "path": "packages/registry-vue/components/accordion/AccordionTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport type { AccordionTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionTrigger as RkAccordionTrigger } from 'reka-ui'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { accordionTriggerVariants } from './accordion.variants'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\nconst delegated = reactiveOmit(props, 'class')\n\nconst variantRef = inject<{ value: 'default' | 'separated' | 'ghost' } | undefined>(\n  Symbol.for('accordionVariant'),\n  undefined,\n)\nconst variant = computed(() => variantRef?.value ?? 'default')\n</script>\n\n<template>\n  <RkAccordionTrigger\n    data-uipkge\n    data-slot=\"accordion-trigger\"\n    v-bind=\"delegated\"\n    :class=\"cn(accordionTriggerVariants({ variant }), props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </RkAccordionTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/AccordionTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/accordion/accordion.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const accordionVariants = cva('w-full', {\n  variants: {\n    variant: {\n      // Bottom-border between items (the classic shadcn look).\n      default: '',\n      // Each item is its own bordered card with a small gap between them.\n      separated: 'space-y-2',\n      // Borderless. Use when the parent container already provides framing.\n      ghost: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const accordionItemVariants = cva('', {\n  variants: {\n    variant: {\n      default: 'border-b border-border last:border-b-0',\n      separated: 'rounded-md border border-border bg-card overflow-hidden',\n      ghost: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const accordionTriggerVariants = cva(\n  'group/accordion-trigger flex w-full items-center justify-between gap-3 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 hover:text-primary disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'py-4',\n        separated: 'px-4 py-3 hover:bg-muted/50',\n        ghost: 'py-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AccordionVariants = VariantProps<typeof accordionVariants>\n\nexport type AccordionItemVariants = VariantProps<typeof accordionItemVariants>\n\nexport type AccordionTriggerVariants = VariantProps<typeof accordionTriggerVariants>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/accordion.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/accordion/index.ts",
      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionHeader } from './AccordionHeader.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component.vue <-> index.ts circular import that broke dev SSR for Card).\nexport {\n  accordionVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n  type AccordionVariants,\n  type AccordionItemVariants,\n  type AccordionTriggerVariants,\n} from './accordion.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/accordion/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Vertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on reka-ui with smooth animation and full keyboard support.",
  "categories": [
    "disclosure"
  ]
}