{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-stagger",
  "type": "registry:ui",
  "title": "Stagger",
  "description": "Introduce list items at short intervals to communicate order and rhythm.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "sequencing"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/stagger/",
  "files": [
    {
      "path": "src/registry/primitives/stagger.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/stagger.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n\nexport type StaggerPrimitiveProps = {\n  items: readonly ReactNode[];\n  interval?: number;\n  distance?: number;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n  itemClassName?: string;\n};\n\nexport function StaggerPrimitive({\n  items,\n  interval = 0.05,\n  distance = 18,\n  duration = 0.22,\n  easing = EASE_OUT,\n  className,\n  itemClassName,\n}: StaggerPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <motion.ul\n      className={className}\n      initial=\"hidden\"\n      animate=\"visible\"\n      variants={{ visible: { transition: { staggerChildren: reduceMotion ? 0 : interval } } }}\n    >\n      {items.map((item, index) => (\n        <motion.li\n          className={itemClassName}\n          key={index}\n          variants={{\n            hidden: reduceMotion\n              ? { opacity: 0 }\n              : { opacity: 0, transform: `translate3d(0, ${distance}px, 0)` },\n            visible: { opacity: 1, transform: \"translate3d(0, 0, 0)\" },\n          }}\n          transition={reduceMotion ? { duration: 0.12 } : { duration, ease: easing }}\n        >\n          {item}\n        </motion.li>\n      ))}\n    </motion.ul>\n  );\n}\n"
    }
  ]
}