{
  "name": "animated-card-background-hover",
  "type": "registry:ui",
  "componentName": "animated-background",
  "description": "Card component with animated background effects on hover.",
  "files": [
    {
      "path": "animated-card-background-hover.tsx",
      "content": "import { AnimatedBackground } from '@/components/core/animated-background';\n\nexport function AnimatedCardBackgroundHover() {\n  const ITEMS = [\n    {\n      id: 1,\n      title: 'Dialog',\n      description: 'Enhances modal presentations.',\n    },\n    {\n      id: 2,\n      title: 'Popover',\n      description: 'For small interactive overlays.',\n    },\n    {\n      id: 3,\n      title: 'Accordion',\n      description: 'Collapsible sections for more content.',\n    },\n    {\n      id: 4,\n      title: 'Collapsible',\n      description: 'Collapsible sections for more content.',\n    },\n    {\n      id: 5,\n      title: 'Drag to Reorder',\n      description: 'Reorder items with drag and drop.',\n    },\n    {\n      id: 6,\n      title: 'Swipe to Delete',\n      description: 'Delete items with swipe gestures.',\n    },\n  ];\n\n  return (\n    <div className='grid grid-cols-2 p-10 md:grid-cols-3'>\n      <AnimatedBackground\n        className='rounded-lg bg-zinc-100 dark:bg-zinc-800'\n        transition={{\n          type: 'spring',\n          bounce: 0.2,\n          duration: 0.6,\n        }}\n        enableHover\n      >\n        {ITEMS.map((item, index) => (\n          <div key={index} data-id={`card-${index}`}>\n            <div className='flex select-none flex-col space-y-1 p-4'>\n              <h3 className='text-base font-medium text-zinc-800 dark:text-zinc-50'>\n                {item.title}\n              </h3>\n              <p className='text-base text-zinc-600 dark:text-zinc-400'>\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </AnimatedBackground>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/animated-background.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { AnimatePresence, Transition, motion } from 'motion/react';\nimport {\n  Children,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  useId,\n} from 'react';\n\nexport type AnimatedBackgroundProps = {\n  children:\n    | ReactElement<{ 'data-id': string }>[]\n    | ReactElement<{ 'data-id': string }>;\n  defaultValue?: string;\n  onValueChange?: (newActiveId: string | null) => void;\n  className?: string;\n  transition?: Transition;\n  enableHover?: boolean;\n};\n\nexport function AnimatedBackground({\n  children,\n  defaultValue,\n  onValueChange,\n  className,\n  transition,\n  enableHover = false,\n}: AnimatedBackgroundProps) {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const uniqueId = useId();\n\n  const handleSetActiveId = (id: string | null) => {\n    setActiveId(id);\n\n    if (onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  useEffect(() => {\n    if (defaultValue !== undefined) {\n      setActiveId(defaultValue);\n    }\n  }, [defaultValue]);\n\n  return Children.map(children, (child: any, index) => {\n    const id = child.props['data-id'];\n\n    const interactionProps = enableHover\n      ? {\n          onMouseEnter: () => handleSetActiveId(id),\n          onMouseLeave: () => handleSetActiveId(null),\n        }\n      : {\n          onClick: () => handleSetActiveId(id),\n        };\n\n    return cloneElement(\n      child,\n      {\n        key: index,\n        className: cn('relative inline-flex', child.props.className),\n        'data-checked': activeId === id ? 'true' : 'false',\n        ...interactionProps,\n      },\n      <>\n        <AnimatePresence initial={false}>\n          {activeId === id && (\n            <motion.div\n              layoutId={`background-${uniqueId}`}\n              className={cn('absolute inset-0', className)}\n              transition={transition}\n              initial={{ opacity: defaultValue ? 1 : 0 }}\n              animate={{\n                opacity: 1,\n              }}\n              exit={{\n                opacity: 0,\n              }}\n            />\n          )}\n        </AnimatePresence>\n        <div className='z-10'>{child.props.children}</div>\n      </>\n    );\n  });\n}\n",
      "type": "registry:ui"
    }
  ]
}