{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-morph",
  "type": "registry:ui",
  "title": "Badge Morph",
  "description": "A morphing status badge that transitions between states with spring-physics micro-interactions.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/badge-morph.tsx",
      "content": "\"use client\";\n\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Status = \"idle\" | \"loading\" | \"success\" | \"error\";\n\nexport interface BadgeMorphProps {\n  status: Status;\n  label?: string;\n  className?: string;\n}\n\nconst LABELS: Record<Status, string> = {\n  idle: \"Ready\",\n  loading: \"Deploying\",\n  success: \"Live\",\n  error: \"Failed\",\n};\n\n// Dynamic Island springs — stiffness 400, damping 30 is the golden ratio\nconst SPRING_PILL = { type: \"spring\" as const, stiffness: 400, damping: 30 };\nconst SPRING_CONTENT = { type: \"spring\" as const, stiffness: 420, damping: 25 };\nconst SPRING_DRAW = { type: \"spring\" as const, stiffness: 300, damping: 15 };\n\n// Icon accent colors — only the icon, not the pill surface\nconst ACCENT: Record<Status, string> = {\n  idle: \"\",\n  loading: \"\",\n  success: \"text-emerald-400 dark:text-emerald-600\",\n  error: \"text-red-400 dark:text-red-500\",\n};\n\n// Outer glow per status — radiates from the pill like a backlight\nfunction getGlow(status: Status): string {\n  const base = \"0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12)\";\n  switch (status) {\n    case \"idle\":\n      return base;\n    case \"loading\":\n      return `${base}, 0 0 24px -6px rgba(96,165,250,0.4)`;\n    case \"success\":\n      return `${base}, 0 0 24px -6px rgba(52,211,153,0.5)`;\n    case \"error\":\n      return `${base}, 0 0 24px -6px rgba(248,113,113,0.45)`;\n  }\n}\n\n/* ─── Icons ───────────────────────────────────────────── */\n\nfunction IdleDot() {\n  return (\n    <span className=\"relative flex items-center justify-center size-4\">\n      <motion.span\n        className=\"absolute size-1.5 rounded-full bg-current opacity-30\"\n        animate={{ scale: [1, 1.8, 1], opacity: [0.3, 0, 0.3] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n      <span className=\"relative size-1.5 rounded-full bg-current opacity-60\" />\n    </span>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className=\"animate-[badge-morph-spin_0.8s_linear_infinite]\"\n    >\n      <circle\n        cx=\"8\"\n        cy=\"8\"\n        r=\"6\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        opacity=\"0.12\"\n      />\n      <circle\n        cx=\"8\"\n        cy=\"8\"\n        r=\"6\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"26 37.7\"\n      />\n    </svg>\n  );\n}\n\nfunction Check() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <motion.path\n        d=\"M5 8.5L7 10.5L11 5.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        initial={{ pathLength: 0, opacity: 0 }}\n        animate={{ pathLength: 1, opacity: 1 }}\n        transition={SPRING_DRAW}\n      />\n    </svg>\n  );\n}\n\nfunction XMark() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <motion.path\n        d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        initial={{ pathLength: 0, opacity: 0 }}\n        animate={{ pathLength: 1, opacity: 1 }}\n        transition={{ ...SPRING_DRAW, delay: 0.04 }}\n      />\n    </svg>\n  );\n}\n\nconst ICONS: Record<Status, () => React.JSX.Element> = {\n  idle: IdleDot,\n  loading: Spinner,\n  success: Check,\n  error: XMark,\n};\n\n/* ─── Component ───────────────────────────────────────── */\n\nexport function BadgeMorph({ status, label, className }: BadgeMorphProps) {\n  const displayLabel = label ?? LABELS[status];\n  const Icon = ICONS[status];\n\n  return (\n    <motion.div\n      layout\n      transition={{\n        layout: SPRING_PILL,\n        ...(status === \"success\" && {\n          scale: { duration: 0.35, times: [0, 0.35, 1] },\n        }),\n      }}\n      animate={status === \"success\" ? { scale: [1, 1.05, 1] } : { scale: 1 }}\n      className={cn(\n        \"relative inline-flex items-center gap-2 rounded-full\",\n        \"bg-neutral-950 dark:bg-neutral-50\",\n        \"text-neutral-50 dark:text-neutral-950\",\n        \"px-3 py-1.5\",\n        \"text-[13px] font-medium tracking-[-0.01em]\",\n        \"transition-[box-shadow] duration-500 ease-out\",\n        \"select-none\",\n        className,\n      )}\n      style={{ boxShadow: getGlow(status) }}\n    >\n      {/* Status indicator */}\n      <div className=\"relative flex size-4 items-center justify-center\">\n        <AnimatePresence mode=\"wait\">\n          <motion.span\n            key={status}\n            className={cn(\"flex items-center justify-center\", ACCENT[status])}\n            initial={{ scale: 0.5, opacity: 0 }}\n            animate={{ scale: 1, opacity: 1 }}\n            exit={{ scale: 0.5, opacity: 0, transition: { duration: 0.08 } }}\n            transition={SPRING_CONTENT}\n          >\n            <Icon />\n          </motion.span>\n        </AnimatePresence>\n      </div>\n\n      {/* Label */}\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={`${status}-${displayLabel}`}\n          className=\"whitespace-nowrap leading-none\"\n          initial={{ opacity: 0, y: 4, filter: \"blur(4px)\" }}\n          animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n          exit={{ opacity: 0, y: -4, transition: { duration: 0.08 } }}\n          transition={{\n            ...SPRING_CONTENT,\n            delay: 0.025,\n            filter: { duration: 0.3 },\n          }}\n        >\n          {displayLabel}\n        </motion.span>\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/badge-morph.tsx"
    }
  ]
}