{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-slide-in",
  "type": "registry:ui",
  "title": "Slide in",
  "description": "Bring content in from a clear direction so its spatial relationship stays legible.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "entrances"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/slide-in/",
  "files": [
    {
      "path": "src/registry/primitives/slide-in.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/slide-in.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 SlideDirection = \"up\" | \"down\" | \"left\" | \"right\" | \"out\";\n\nexport type SlideInPrimitiveProps = {\n  present: boolean;\n  children: ReactNode;\n  direction?: SlideDirection;\n  distance?: number;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  delay?: number;\n  className?: string;\n};\n\nfunction offset(direction: SlideDirection, distance: number) {\n  if (direction === \"left\") return `translate3d(${distance}px, 0, 0)`;\n  if (direction === \"right\") return `translate3d(${-distance}px, 0, 0)`;\n  if (direction === \"down\") return `translate3d(0, ${-distance}px, 0)`;\n  return `translate3d(0, ${distance}px, 0)`;\n}\n\nexport function SlideInPrimitive({\n  present,\n  children,\n  direction = \"up\",\n  distance = 28,\n  duration = 0.24,\n  easing = EASE_OUT,\n  delay = 0,\n  className,\n}: SlideInPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const travel = offset(direction, distance);\n  const exit = direction === \"out\" ? `translate3d(0, ${-distance}px, 0)` : travel;\n\n  return (\n    <AnimatePresence initial={false}>\n      {present ? (\n        <motion.div\n          className={className}\n          initial={reduceMotion ? { opacity: 0 } : { opacity: 0, transform: travel }}\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, delay, ease: easing }}\n        >\n          {children}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n"
    }
  ]
}