{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"icon-shift","type":"registry:ui","title":"Icon Shift","description":"Swaps one icon for another in place: the old one shrinks, blurs and turns away while the new one turns in and pops to size. Wrap any icon and change its key.","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"registry/ui/icon-shift.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { AnimatePresence, MotionConfig, motion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface IconShiftProps {\n  /** Identifies the current icon. Changing it swaps the icon with the transition. */\n  swapKey: string | number | boolean;\n  /** The icon to show for the current key. */\n  children: ReactNode;\n  /** Degrees the old icon turns away and the new one turns in from. */\n  rotate?: number;\n  /** Blur in px at the start and end of the swap. */\n  blur?: number;\n  /** Scale the icons shrink to while swapping (0 to 1). */\n  shrink?: number;\n  /** Swap length in seconds. */\n  duration?: number;\n  className?: string;\n}\n\n/**\n * Swaps one icon for another in place: the old icon shrinks, blurs and turns\n * away while the new one turns in from the other side and pops to full size.\n */\nexport function IconShift({\n  swapKey,\n  children,\n  rotate = 45,\n  blur = 4,\n  shrink = 0.4,\n  duration = 0.28,\n  className,\n}: IconShiftProps) {\n  const hidden = (dir: 1 | -1) => ({ opacity: 0, scale: shrink, rotate: rotate * dir, filter: `blur(${blur}px)` });\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <span className={cn(\"relative inline-grid place-items-center [&>*]:[grid-area:1/1]\", className)}>\n        <AnimatePresence initial={false}>\n          <motion.span\n            key={String(swapKey)}\n            className=\"inline-grid place-items-center\"\n            initial={hidden(-1)}\n            animate={{ opacity: 1, scale: 1, rotate: 0, filter: \"blur(0px)\" }}\n            exit={hidden(1)}\n            transition={{ duration, ease: [0.34, 1.4, 0.64, 1] }}\n          >\n            {children}\n          </motion.span>\n        </AnimatePresence>\n      </span>\n    </MotionConfig>\n  );\n}\n"}]}