{
  "name": "animated-background",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "AnimatedBackground.vue",
      "content": "<script setup lang=\"ts\">\nconst props = withDefaults(\n  defineProps<{\n    class?: string\n    defaultValue?: string\n    transition?: Record<string, string | number | boolean>\n    enableHover?: boolean\n  }>(),\n  {\n    enableHover: false,\n  },\n)\n\nconst emit = defineEmits<{\n  valueChange: [value: string | null]\n}>()\n\nconst activeId = ref<string | null>(null)\nconst uniqueId = useId()\n\nwatch(\n  () => props.defaultValue,\n  (val) => {\n    if (val !== undefined) activeId.value = val\n  },\n  { immediate: true },\n)\n\nfunction handleSetActiveId(id: string | null) {\n  activeId.value = id\n  emit('valueChange', id)\n}\n\nprovide('animatedBackground', {\n  activeId,\n  uniqueId,\n  handleSetActiveId,\n  enableHover: computed(() => props.enableHover),\n  defaultValue: computed(() => props.defaultValue),\n  transition: computed(() => props.transition),\n  backgroundClass: computed(() => props.class),\n})\n</script>\n\n<template>\n  <slot />\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "AnimatedBackgroundItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, AnimatePresence } from 'motion-v'\nimport type { ComputedRef } from 'vue'\n\nconst props = defineProps<{\n  dataId: string\n  class?: string\n}>()\n\nconst {\n  activeId,\n  uniqueId,\n  handleSetActiveId,\n  enableHover,\n  defaultValue,\n  transition,\n  backgroundClass,\n} = inject<{\n  activeId: Ref<string | null>\n  uniqueId: string\n  handleSetActiveId: (id: string | null) => void\n  enableHover: ComputedRef<boolean>\n  defaultValue: ComputedRef<string | undefined>\n  transition: ComputedRef<Record<string, string | number | boolean> | undefined>\n  backgroundClass: ComputedRef<string | undefined>\n}>('animatedBackground')!\n\nconst isActive = computed(() => activeId.value === props.dataId)\n\nfunction onMouseEnter() {\n  if (enableHover.value) handleSetActiveId(props.dataId)\n}\n\nfunction onMouseLeave() {\n  if (enableHover.value) handleSetActiveId(null)\n}\n\nfunction onClick() {\n  if (!enableHover.value) handleSetActiveId(props.dataId)\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative inline-flex', props.class)\"\n    :data-checked=\"isActive ? 'true' : 'false'\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n    @click=\"onClick\"\n  >\n    <AnimatePresence :initial=\"false\">\n      <Motion\n        v-if=\"isActive\"\n        :layout-id=\"`background-${uniqueId}`\"\n        :class=\"cn('absolute inset-0', backgroundClass)\"\n        :transition=\"transition\"\n        :initial=\"{ opacity: defaultValue ? 1 : 0 }\"\n        :animate=\"{ opacity: 1 }\"\n        :exit=\"{ opacity: 0 }\"\n      />\n    </AnimatePresence>\n    <div class=\"z-10\">\n      <slot />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}