{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-direction-aware-transition",
  "type": "registry:ui",
  "title": "Direction-aware transition",
  "description": "Match enter and exit directions to navigation order and preserve context.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "state-transitions"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/direction-aware-transition/",
  "files": [
    {
      "path": "src/registry/primitives/direction-aware-transition.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/direction-aware-transition.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, 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 NavigationDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\nexport type DirectionAwareTransitionPrimitiveProps = {\n  stateKey: string | number;\n  direction: NavigationDirection;\n  children: ReactNode;\n  distance?: number;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n};\n\nexport function DirectionAwareTransitionPrimitive({\n  stateKey,\n  direction,\n  children,\n  distance = 40,\n  duration = 0.24,\n  easing = EASE_OUT,\n  className,\n}: DirectionAwareTransitionPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const offset = {\n    left: [-distance, 0],\n    right: [distance, 0],\n    up: [0, -distance],\n    down: [0, distance],\n  }[direction];\n  const enter = `translate3d(${offset[0]}px, ${offset[1]}px, 0)`;\n  const exit = `translate3d(${-offset[0]}px, ${-offset[1]}px, 0)`;\n\n  return (\n    <AnimatePresence initial={false} mode=\"popLayout\" custom={direction}>\n      <motion.div\n        className={className}\n        key={stateKey}\n        initial={reduceMotion ? { opacity: 0 } : { opacity: 0, transform: enter }}\n        animate={{ opacity: 1, transform: \"translate3d(0, 0, 0)\" }}\n        exit={reduceMotion ? { opacity: 0 } : { opacity: 0, transform: exit }}\n        transition={reduceMotion ? { duration: 0.12 } : { duration, ease: easing }}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  );\n}\n"
    }
  ]
}