{
  "name": "accordion",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "Accordion.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { MotionConfig } from 'motion-v'\nimport type { VariantType } from '~/types/motion'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: string\n    transition?: Record<string, string | number | boolean>\n    variants?: { expanded: VariantType; collapsed: VariantType }\n    expandedValue?: string | number | null\n  }>(),\n  {},\n)\n\nconst emit = defineEmits<{\n  'update:expandedValue': [value: string | number | null]\n}>()\n\nconst internalExpanded = ref<string | number | null>(null)\n\nconst expandedValue = computed(() =>\n  props.expandedValue !== undefined ? props.expandedValue : internalExpanded.value,\n)\n\nfunction toggleItem(value: string | number) {\n  const newValue = expandedValue.value === value ? null : value\n  if (props.expandedValue !== undefined) {\n    emit('update:expandedValue', newValue)\n  } else {\n    internalExpanded.value = newValue\n  }\n}\n\nprovide('accordion', {\n  expandedValue,\n  toggleItem,\n  variants: computed(() => props.variants),\n})\n</script>\n\n<template>\n  <MotionConfig :transition=\"props.transition\">\n    <div :class=\"cn('relative', props.class)\" aria-orientation=\"vertical\">\n      <slot />\n    </div>\n  </MotionConfig>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "AccordionItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport type { ComputedRef } from 'vue'\nimport type { VariantType } from '~/types/motion'\n\nconst props = defineProps<{\n  value: string | number\n  class?: string\n}>()\n\nconst { expandedValue } = inject<{\n  expandedValue: ComputedRef<string | number | null>\n  toggleItem: (value: string | number) => void\n  variants: ComputedRef<{ expanded: VariantType; collapsed: VariantType } | undefined>\n}>('accordion')!\n\nconst isExpanded = computed(() => props.value === expandedValue.value)\n\nprovide('accordionItem', {\n  value: computed(() => props.value),\n  isExpanded,\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('overflow-hidden', props.class)\"\n    v-bind=\"isExpanded ? { 'data-expanded': '' } : { 'data-closed': '' }\"\n  >\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "AccordionTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport type { ComputedRef } from 'vue'\nimport type { VariantType } from '~/types/motion'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { toggleItem } = inject<{\n  expandedValue: ComputedRef<string | number | null>\n  toggleItem: (value: string | number) => void\n  variants: ComputedRef<{ expanded: VariantType; collapsed: VariantType } | undefined>\n}>('accordion')!\n\nconst { value, isExpanded } = inject<{\n  value: ComputedRef<string | number>\n  isExpanded: ComputedRef<boolean>\n}>('accordionItem')!\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :aria-expanded=\"isExpanded\"\n    :class=\"cn('group', $props.class)\"\n    v-bind=\"isExpanded ? { 'data-expanded': '' } : { 'data-closed': '' }\"\n    @click=\"toggleItem(value)\"\n  >\n    <slot />\n  </button>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "AccordionContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion, AnimatePresence } from 'motion-v'\nimport type { ComputedRef } from 'vue'\nimport type { VariantType } from '~/types/motion'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { variants } = inject<{\n  expandedValue: ComputedRef<string | number | null>\n  toggleItem: (value: string | number) => void\n  variants: ComputedRef<{ expanded: VariantType; collapsed: VariantType } | undefined>\n}>('accordion')!\n\nconst { isExpanded } = inject<{\n  value: ComputedRef<string | number>\n  isExpanded: ComputedRef<boolean>\n}>('accordionItem')!\n\nconst BASE_VARIANTS = {\n  expanded: { height: 'auto', opacity: 1 },\n  collapsed: { height: 0, opacity: 0 },\n}\n\nconst combinedVariants = computed(() => ({\n  expanded: { ...BASE_VARIANTS.expanded, ...variants.value?.expanded },\n  collapsed: { ...BASE_VARIANTS.collapsed, ...variants.value?.collapsed },\n}))\n</script>\n\n<template>\n  <AnimatePresence :initial=\"false\">\n    <Motion\n      v-if=\"isExpanded\"\n      initial=\"collapsed\"\n      animate=\"expanded\"\n      exit=\"collapsed\"\n      :variants=\"combinedVariants\"\n      :class=\"$props.class\"\n    >\n      <slot />\n    </Motion>\n  </AnimatePresence>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}