{
  "name": "text-morph",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "TextMorph.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, AnimatePresence } from 'motion-v'\nimport type { Variants } from '~/types/motion'\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string\n    class?: string\n    style?: Record<string, string | number>\n    variants?: Variants\n    transition?: Record<string, string | number | boolean>\n  }>(),\n  {\n    as: 'p',\n  },\n)\n\nconst slots = useSlots()\n\nconst text = computed(() => {\n  const defaultSlot = slots.default?.()\n  if (!defaultSlot) return ''\n  return defaultSlot.map(vnode => {\n    if (typeof vnode.children === 'string') return vnode.children\n    return ''\n  }).join('')\n})\n\nconst uniqueId = useId()\n\nconst characters = computed(() => {\n  const charCounts: Record<string, number> = {}\n  return text.value.split('').map((char) => {\n    const lowerChar = char.toLowerCase()\n    charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1\n    return {\n      id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,\n      label: char === ' ' ? '\\u00A0' : char,\n    }\n  })\n})\n\nconst defaultVariants: Variants = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n}\n\nconst defaultTransition = {\n  type: 'spring' as const,\n  stiffness: 280,\n  damping: 18,\n  mass: 0.3,\n}\n</script>\n\n<template>\n  <component :is=\"props.as\" :class=\"cn(props.class)\" :aria-label=\"text\" :style=\"props.style\">\n    <AnimatePresence mode=\"popLayout\" :initial=\"false\">\n      <Motion\n        v-for=\"character in characters\"\n        :key=\"character.id\"\n        as=\"span\"\n        :layout-id=\"character.id\"\n        class=\"inline-block\"\n        aria-hidden=\"true\"\n        initial=\"initial\"\n        animate=\"animate\"\n        exit=\"exit\"\n        :variants=\"props.variants || defaultVariants\"\n        :transition=\"props.transition || defaultTransition\"\n      >\n        {{ character.label }}\n      </Motion>\n    </AnimatePresence>\n  </component>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}