{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "set-stagger-direction-demo",
  "title": "Set Stagger Direction Demo",
  "description": "Demo showing how to use set-stagger-direction utility.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/set-stagger-direction",
    "motion"
  ],
  "files": [
    {
      "path": "registry/demo/utils/set-stagger-direction/index.tsx",
      "content": "'use client';\n\nimport {\n  AnimationConfig,\n  AnimationSelector,\n  StaggerInput,\n  StaggerSelector,\n  useSetAnimationConfig,\n} from '@/components/docs/animation-config';\nimport { setStaggerDirection } from '@/components/systaliko-ui/utils/set-stagger-direction';\nimport {\n  animation_variants,\n  ANIMATION_VARIANTS,\n} from '@/components/systaliko-ui/utils/animation-variants';\nimport { motion } from 'motion/react';\n\nconst ITEMS = [\n  {\n    bg: 'bg-green-500',\n  },\n  {\n    bg: 'bg-indigo-500',\n  },\n  {\n    bg: 'bg-rose-500',\n  },\n  {\n    bg: 'bg-yellow-500',\n  },\n  {\n    bg: 'bg-cyan-500',\n  },\n];\n\nexport const SetStaggerDirectionDemo = () => {\n  return (\n    <AnimationConfig>\n      <SetStaggerDirectionDemoContent />\n    </AnimationConfig>\n  );\n};\n\nconst SetStaggerDirectionDemoContent = () => {\n  const { animation, staggerDirection, staggerValue } = useSetAnimationConfig();\n  const animationVariants = animation_variants[animation || 'opacity'];\n\n  return (\n    <div className=\"flex flex-col justify-between gap-8\">\n      <div className=\"flex flex-wrap  gap-4 items-center justify-center\">\n        <AnimationSelector />\n        <StaggerSelector />\n        <StaggerInput />\n      </div>\n\n      <div className=\"flex gap-4 flex-wrap\">\n        {ITEMS.map(({ bg }, index) => (\n          <motion.div\n            className={`${bg} size-16 rounded-md`}\n            key={`${index}-${animation}-${staggerDirection}-${staggerValue}`}\n            variants={animationVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            transition={{\n              duration: 0.3,\n              ease: 'easeIn',\n              delay: setStaggerDirection({\n                direction: staggerDirection,\n                staggerValue: staggerValue,\n                totalItems: ITEMS.length,\n                index: index,\n              }),\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/utils/set-stagger-direction.ts"
    }
  ],
  "type": "registry:hook"
}