{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"motion-glide","type":"registry:component","title":"Glide (Motion)","description":"Glide with motion: when the layout changes it glides to its new place and size; a highlight shared by layoutId springs from one place to the next.","dependencies":["motion"],"registryDependencies":["https://dashral.com/r/motion-reduced.json","https://dashral.com/r/motion-tokens.json","https://dashral.com/r/glide.json"],"files":[{"path":"registry/dashral/motion/glide.tsx","type":"registry:file","target":"components/dashral/motion/glide.tsx","content":"\"use client\"\n\nimport { motion } from \"motion/react\"\nimport type { GlideProps } from \"../glide\"\n\nimport { useReducedMotion } from \"../lib/motion-reduced\"\nimport { spring } from \"../lib/motion-tokens\"\n\nexport type { GlideProps } from \"../glide\"\n\nconst elements = { div: motion.div, span: motion.span, li: motion.li }\n\n/**\n * The kit's Glide with motion: the same props. When the layout changes it glides to its new place and size on a spring\n * with no overshoot; a highlight shared by name (layoutId) springs to its new place with a touch of overshoot to settle.\n * With reduced motion it moves at once.\n */\nexport function Glide({ as = \"div\", layout = true, layoutId, ...props }: GlideProps) {\n  const reduced = useReducedMotion()\n  const Element = elements[as]\n  return (\n    <Element\n      data-slot=\"glide\"\n      layout={reduced ? false : layout}\n      layoutId={layoutId}\n      transition={reduced ? { duration: 0 } : layoutId ? spring.move : spring.glide}\n      {...props}\n    />\n  )\n}\n"}]}