{
  "name": "animated-group",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "animated-group.tsx",
      "content": "'use client';\nimport { ReactNode } from 'react';\nimport { motion, Variants } from 'motion/react';\nimport React from 'react';\n\nexport type PresetType =\n  | 'fade'\n  | 'slide'\n  | 'scale'\n  | 'blur'\n  | 'blur-slide'\n  | 'zoom'\n  | 'flip'\n  | 'bounce'\n  | 'rotate'\n  | 'swing';\n\nexport type AnimatedGroupProps = {\n  children: ReactNode;\n  className?: string;\n  variants?: {\n    container?: Variants;\n    item?: Variants;\n  };\n  preset?: PresetType;\n  as?: React.ElementType;\n  asChild?: React.ElementType;\n};\n\nconst defaultContainerVariants: Variants = {\n  visible: {\n    transition: {\n      staggerChildren: 0.1,\n    },\n  },\n};\n\nconst defaultItemVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1 },\n};\n\nconst presetVariants: Record<PresetType, Variants> = {\n  fade: {},\n  slide: {\n    hidden: { y: 20 },\n    visible: { y: 0 },\n  },\n  scale: {\n    hidden: { scale: 0.8 },\n    visible: { scale: 1 },\n  },\n  blur: {\n    hidden: { filter: 'blur(4px)' },\n    visible: { filter: 'blur(0px)' },\n  },\n  'blur-slide': {\n    hidden: { filter: 'blur(4px)', y: 20 },\n    visible: { filter: 'blur(0px)', y: 0 },\n  },\n  zoom: {\n    hidden: { scale: 0.5 },\n    visible: {\n      scale: 1,\n      transition: { type: 'spring', stiffness: 300, damping: 20 },\n    },\n  },\n  flip: {\n    hidden: { rotateX: -90 },\n    visible: {\n      rotateX: 0,\n      transition: { type: 'spring', stiffness: 300, damping: 20 },\n    },\n  },\n  bounce: {\n    hidden: { y: -50 },\n    visible: {\n      y: 0,\n      transition: { type: 'spring', stiffness: 400, damping: 10 },\n    },\n  },\n  rotate: {\n    hidden: { rotate: -180 },\n    visible: {\n      rotate: 0,\n      transition: { type: 'spring', stiffness: 200, damping: 15 },\n    },\n  },\n  swing: {\n    hidden: { rotate: -10 },\n    visible: {\n      rotate: 0,\n      transition: { type: 'spring', stiffness: 300, damping: 8 },\n    },\n  },\n};\n\nconst addDefaultVariants = (variants: Variants) => ({\n  hidden: { ...defaultItemVariants.hidden, ...variants.hidden },\n  visible: { ...defaultItemVariants.visible, ...variants.visible },\n});\n\nfunction AnimatedGroup({\n  children,\n  className,\n  variants,\n  preset,\n  as = 'div',\n  asChild = 'div',\n}: AnimatedGroupProps) {\n  const selectedVariants = {\n    item: addDefaultVariants(preset ? presetVariants[preset] : {}),\n    container: addDefaultVariants(defaultContainerVariants),\n  };\n  const containerVariants = variants?.container || selectedVariants.container;\n  const itemVariants = variants?.item || selectedVariants.item;\n\n  const MotionComponent = React.useMemo(\n    () => motion.create(as as keyof JSX.IntrinsicElements),\n    [as]\n  );\n  const MotionChild = React.useMemo(\n    () => motion.create(asChild as keyof JSX.IntrinsicElements),\n    [asChild]\n  );\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate='visible'\n      variants={containerVariants}\n      className={className}\n    >\n      {React.Children.map(children, (child, index) => (\n        <MotionChild key={index} variants={itemVariants}>\n          {child}\n        </MotionChild>\n      ))}\n    </MotionComponent>\n  );\n}\n\nexport { AnimatedGroup };\n",
      "type": "registry:ui"
    }
  ]
}