{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-translate",
  "type": "registry:ui",
  "title": "Translate",
  "description": "Combine translation, scale, rotation, skew, perspective, and transform origin.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "transforms"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/translate/",
  "files": [
    {
      "path": "src/registry/primitives/translate.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/translate.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 TransformMode = \"translate\" | \"scale\" | \"rotate\" | \"skew\" | \"perspective\";\nexport type TransformOrigin = \"center\" | \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type TranslatePrimitiveProps = {\n  active: boolean;\n  children: ReactNode;\n  mode?: TransformMode;\n  distance?: number;\n  angle?: number;\n  scale?: number;\n  origin?: TransformOrigin;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n};\n\nfunction activeTransform(mode: TransformMode, distance: number, angle: number, scale: number) {\n  if (mode === \"scale\") return `scale(${scale})`;\n  if (mode === \"rotate\") return `rotate(${angle}deg)`;\n  if (mode === \"skew\") return `skewX(${angle}deg)`;\n  if (mode === \"perspective\") return `perspective(700px) rotateY(${angle}deg)`;\n  return `translate3d(${distance}px, 0, 0)`;\n}\n\nexport function TranslatePrimitive({\n  active,\n  children,\n  mode = \"translate\",\n  distance = 36,\n  angle = 12,\n  scale = 0.92,\n  origin = \"center\",\n  duration = 0.28,\n  easing = EASE_OUT,\n  className,\n}: TranslatePrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <motion.div\n      className={className}\n      style={{ transformOrigin: origin }}\n      initial={false}\n      animate={{\n        opacity: 1,\n        transform: reduceMotion || !active\n          ? \"translate3d(0, 0, 0) scale(1) rotate(0deg) skewX(0deg)\"\n          : activeTransform(mode, distance, angle, scale),\n      }}\n      transition={reduceMotion ? { duration: 0.12 } : { duration, ease: easing }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ]
}