{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"motion-primitives-animated-group","type":"registry:component","title":"Animated Group","description":"Tailark motion primitives animated-group component","dependencies":["motion"],"files":[{"path":"core/motion-primitives/animated-group.tsx","type":"registry:component","target":"@ui/motion-primitives/animated-group.tsx","content":"'use client'\nimport React, { type ReactNode } from 'react'\nimport { LazyMotion, domAnimation, m, type Variants } from 'motion/react'\n\nexport type PresetType = 'fade' | 'slide' | 'scale' | 'blur' | 'blur-slide' | 'zoom' | 'flip' | 'bounce' | 'rotate' | '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({ children, className, variants, preset, as = 'div', asChild = 'div' }: 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 = m.create(as as keyof React.JSX.IntrinsicElements)\n\n    const MotionChild = m.create(asChild as keyof React.JSX.IntrinsicElements)\n\n    return (\n        <LazyMotion features={domAnimation}>\n        <MotionComponent\n            initial=\"hidden\"\n            animate=\"visible\"\n            variants={containerVariants}\n            className={className}>\n            {React.Children.map(children, (child) => (\n                <MotionChild variants={itemVariants}>\n                    {child}\n                </MotionChild>\n            ))}\n        </MotionComponent>\n        </LazyMotion>\n    )\n}\n\nexport { AnimatedGroup }\n"}]}