{
  "name": "animated-group-preset",
  "type": "registry:ui",
  "componentName": "animated-group-preset",
  "description": "Preset animations for the animated group component.",
  "files": [
    {
      "path": "animated-group-preset.tsx",
      "content": "import { AnimatedGroup } from '@/components/core/animated-group';\n\nexport function AnimatedGroupPreset() {\n  return (\n    <AnimatedGroup\n      className='grid grid-cols-2 gap-4 p-8 md:grid-cols-3 lg:grid-cols-4'\n      preset='scale'\n    >\n      <img\n        src='https://images.beta.cosmos.so/fc6fdd93-552c-47e6-98aa-b8fb3ba070a2?format=jpeg'\n        alt='impressionist painting, uploaded to Cosmos'\n        className='h-auto w-full rounded-[4px]'\n      />\n      <img\n        src='https://images.beta.cosmos.so/cb674d14-ebd1-4408-bab1-79df895017b6?format=jpeg'\n        alt='impressionist painting, uploaded to Cosmos'\n        className='h-auto w-full rounded-[4px]'\n      />\n      <img\n        src='https://images.beta.cosmos.so/e5a6c3ed-82ad-4084-9a11-1eccd7bc91aa?format=jpeg'\n        alt='impressionist painting, uploaded to Cosmos'\n        className='h-auto w-full rounded-[4px]'\n      />\n      <img\n        src='https://images.beta.cosmos.so/4d02a1e7-d1f2-4575-86a9-bed243e59132?format=jpeg'\n        alt='impressionist painting, uploaded to Cosmos'\n        className='h-auto w-full rounded-[4px]'\n      />\n    </AnimatedGroup>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/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 string | React.ComponentType<unknown>) as typeof motion.div,\n    [as]\n  );\n  const MotionChild = React.useMemo(\n    () =>\n      motion.create(asChild as string | React.ComponentType<unknown>) as typeof motion.div,\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"
    }
  ]
}