{
  "name": "disclosure",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "Disclosure.vue",
      "content": "<script setup lang=\"ts\">\nimport { MotionConfig } from 'motion-v'\nimport type { VariantType } from '~/types/motion'\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean\n    class?: string\n    variants?: { expanded: VariantType; collapsed: VariantType }\n    transition?: Record<string, string | number | boolean>\n  }>(),\n  {\n    open: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n  openChange: [value: boolean]\n}>()\n\nconst internalOpen = ref(props.open)\n\nwatch(\n  () => props.open,\n  (val) => (internalOpen.value = val),\n)\n\nfunction toggle() {\n  const newOpen = !internalOpen.value\n  internalOpen.value = newOpen\n  emit('update:open', newOpen)\n  emit('openChange', newOpen)\n}\n\nprovide('disclosure', {\n  open: computed(() => internalOpen.value),\n  toggle,\n  variants: computed(() => props.variants),\n})\n</script>\n\n<template>\n  <MotionConfig :transition=\"props.transition\">\n    <div :class=\"props.class\">\n      <slot />\n    </div>\n  </MotionConfig>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DisclosureContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\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 { open, variants } = inject<{\n  open: ComputedRef<boolean>\n  toggle: () => void\n  variants: ComputedRef<{ expanded: VariantType; collapsed: VariantType } | undefined>\n}>('disclosure')!\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  <div :class=\"cn('overflow-hidden', $props.class)\">\n    <AnimatePresence :initial=\"false\">\n      <Motion\n        v-if=\"open\"\n        initial=\"collapsed\"\n        animate=\"expanded\"\n        exit=\"collapsed\"\n        :variants=\"combinedVariants\"\n      >\n        <slot />\n      </Motion>\n    </AnimatePresence>\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "DisclosureTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ComputedRef } from 'vue'\n\ndefineProps<{\n  class?: string\n}>()\n\nconst { toggle, open } = inject<{\n  open: ComputedRef<boolean>\n  toggle: () => void\n}>('disclosure')!\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault()\n    toggle()\n  }\n}\n</script>\n\n<template>\n  <div\n    role=\"button\"\n    :aria-expanded=\"open\"\n    :tabindex=\"0\"\n    :class=\"$props.class\"\n    @click=\"toggle\"\n    @keydown=\"handleKeyDown\"\n  >\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}