{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"size-shift","type":"registry:ui","title":"Size Shift","description":"A box that glides to the size of whatever is inside it. Swap the content and the card eases to its new width and height on a spring while the new content fades up from a blur.","dependencies":["motion","react-use-measure"],"registryDependencies":["utils"],"files":[{"path":"registry/ui/size-shift.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { AnimatePresence, MotionConfig, motion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport useMeasure from \"react-use-measure\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SizeShiftProps {\n  children: ReactNode;\n  /** Which sides follow the content. \"height\" keeps the width from the parent. */\n  axis?: \"both\" | \"height\";\n  /** Change this when the content changes to fade the new content in. */\n  contentKey?: string | number;\n  /** Spring bounce, 0 (none) to 0.6 (springy). */\n  bounce?: number;\n  /** Resize length in seconds. */\n  duration?: number;\n  className?: string;\n}\n\n/**\n * A box that eases to the size of whatever is inside it. Swap the content and\n * the box glides to the new width and height instead of snapping, while the new\n * content fades up from a soft blur.\n */\nexport function SizeShift({\n  children,\n  axis = \"both\",\n  contentKey,\n  bounce = 0.18,\n  duration = 0.45,\n  className,\n}: SizeShiftProps) {\n  const [ref, { width, height }] = useMeasure();\n  const both = axis === \"both\";\n  const spring = { type: \"spring\" as const, bounce, duration };\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <motion.div\n        className={cn(\"overflow-hidden\", both && \"w-fit\", className)}\n        initial={false}\n        animate={{ width: both && width ? width : \"auto\", height: height || \"auto\" }}\n        transition={spring}\n      >\n        <div ref={ref} className={cn(\"relative\", both && \"w-max\")}>\n          <AnimatePresence initial={false} mode=\"popLayout\">\n            <motion.div\n              key={contentKey ?? \"content\"}\n              initial={{ opacity: 0, filter: \"blur(4px)\", y: 6 }}\n              animate={{ opacity: 1, filter: \"blur(0px)\", y: 0 }}\n              exit={{ opacity: 0, filter: \"blur(4px)\", transition: { duration: 0.12 } }}\n              transition={{ duration: duration * 0.8, ease: \"easeOut\" }}\n            >\n              {children}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      </motion.div>\n    </MotionConfig>\n  );\n}\n"}]}