{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-elevation",
  "title": "Status Elevation",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/status-elevation/StatusElevation.jsx",
      "content": "\"use client\";\n\nimport React, { useState, useCallback, useEffect, useRef, useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { XCircle, Loader, CheckCircle } from \"lucide-react\";\n\n// ─── Status Config ─────────────────────────────────────────────\nconst STATUS_CONFIG = {\n    failed: {\n        priority: 1, label: \"Failed\", icon: XCircle,\n        color: \"#ef4444\",\n        glowColor: \"rgba(239, 68, 68, 0.4)\",\n        softGlow: \"rgba(239, 68, 68, 0.15)\",\n        borderColor: \"rgba(239, 68, 68, 0.25)\",\n    },\n    pending: {\n        priority: 2, label: \"Pending\", icon: Loader,\n        color: \"#f59e0b\",\n        glowColor: \"rgba(245, 158, 11, 0.4)\",\n        softGlow: \"rgba(245, 158, 11, 0.15)\",\n        borderColor: \"rgba(245, 158, 11, 0.25)\",\n    },\n    success: {\n        priority: 3, label: \"Success\", icon: CheckCircle,\n        color: \"#10b981\",\n        glowColor: \"rgba(16, 185, 129, 0.4)\",\n        softGlow: \"rgba(16, 185, 129, 0.15)\",\n        borderColor: \"rgba(16, 185, 129, 0.25)\",\n    },\n};\n\n// ─── NOVA Status Pill (glassmorphic glow) ──────────────────────\nfunction NovaStatusPill({ status, duration = 0.3 }) {\n    const config = STATUS_CONFIG[status];\n    const Icon = config.icon;\n    const isPending = status === \"pending\";\n    const halfDuration = duration / 2;\n    return (\n        <motion.div key={status}\n            initial={{ scale: 0.9, opacity: 0 }}\n            animate={{ scale: 1, opacity: 1 }}\n            transition={{ type: \"tween\", duration, ease: \"easeOut\" }}\n            className=\"relative w-32\"\n        >\n            <AnimatePresence>\n                <motion.div\n                    className=\"relative flex items-center gap-2.5 pl-3.5 pr-5 py-2.5 rounded-full\"\n                    animate={{ boxShadow: \\`inset 0 2px 2px -1px \\${config.glowColor}\\` }}\n                    transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                    style={{ background: \"linear-gradient(145deg, rgba(40,40,45,0.95), rgba(25,25,30,0.98))\" }}\n                >\n                    <div className=\"relative\">\n                        <div className=\"absolute inset-0 blur-sm rounded-full\"\n                            style={{ background: config.glowColor, opacity: 0.5 }} />\n                        <Icon className={\\`relative w-5 h-5 \\${isPending ? \"animate-spin\" : \"\"}\\`}\n                            style={{ color: config.color, filter: \\`drop-shadow(0 0 4px \\${config.glowColor})\\` }}\n                            strokeWidth={2} />\n                    </div>\n                    <AnimatePresence mode=\"wait\">\n                        <motion.span key={status}\n                            initial={{ filter: \"blur(4px)\", opacity: 0.4 }}\n                            animate={{ filter: \"blur(0px)\", opacity: 1 }}\n                            exit={{ filter: \"blur(4px)\", opacity: 0.4 }}\n                            transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                            className=\"text-sm font-medium tracking-wide\"\n                            style={{ color: \"rgba(255, 255, 255, 0.85)\" }}\n                        >{config.label}</motion.span>\n                    </AnimatePresence>\n                </motion.div>\n            </AnimatePresence>\n        </motion.div>\n    );\n}\n\n// ─── LYRA Status Pill (dark minimal, sharp) ────────────────────\nfunction LyraStatusPill({ status, duration = 0.3 }) {\n    const config = STATUS_CONFIG[status];\n    const Icon = config.icon;\n    const isPending = status === \"pending\";\n    const halfDuration = duration / 2;\n    return (\n        <motion.div key={status}\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            transition={{ type: \"tween\", duration, ease: \"easeOut\" }}\n            className=\"w-32\"\n        >\n            <div className=\"flex items-center gap-2 px-3 py-1.5 rounded-none border-[0.6px]\"\n                style={{ borderColor: config.borderColor, background: \"rgba(0,0,0,0.3)\" }}>\n                <Icon className={\\`w-3.5 h-3.5 \\${isPending ? \"animate-spin\" : \"\"}\\`}\n                    style={{ color: config.color }} strokeWidth={2} />\n                <AnimatePresence mode=\"wait\">\n                    <motion.span key={status}\n                        initial={{ filter: \"blur(4px)\", opacity: 0.3 }}\n                        animate={{ filter: \"blur(0px)\", opacity: 1 }}\n                        exit={{ filter: \"blur(4px)\", opacity: 0.3 }}\n                        transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                        className=\"font-mono text-xs uppercase tracking-widest\"\n                        style={{ color: config.color }}\n                    >{config.label}</motion.span>\n                </AnimatePresence>\n            </div>\n        </motion.div>\n    );\n}\n\n// ─── RETRO Status Pill (terminal style) ────────────────────────\nfunction RetroStatusPill({ status, duration = 0.3 }) {\n    const config = STATUS_CONFIG[status];\n    const Icon = config.icon;\n    const isPending = status === \"pending\";\n    const halfDuration = duration / 2;\n    const retroColors = {\n        failed: { bg: \"#fee2e2\", text: \"#991b1b\", border: \"#991b1b\" },\n        pending: { bg: \"#fef3c7\", text: \"#92400e\", border: \"#92400e\" },\n        success: { bg: \"#d1fae5\", text: \"#065f46\", border: \"#065f46\" },\n    };\n    const rc = retroColors[status];\n    return (\n        <motion.div key={status}\n            initial={{ opacity: 0, x: 10 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{ type: \"tween\", duration, ease: \"easeOut\" }}\n            className=\"w-32\"\n        >\n            <div className=\"flex items-center gap-2 px-3 py-1.5 border-2 font-mono text-xs font-bold uppercase tracking-widest\"\n                style={{ background: rc.bg, color: rc.text, borderColor: rc.border }}>\n                <Icon className={\\`w-3.5 h-3.5 \\${isPending ? \"animate-spin\" : \"\"}\\`} strokeWidth={2.5} />\n                <AnimatePresence mode=\"wait\">\n                    <motion.span key={status}\n                        initial={{ filter: \"blur(3px)\", opacity: 0.4 }}\n                        animate={{ filter: \"blur(0px)\", opacity: 1 }}\n                        exit={{ filter: \"blur(3px)\", opacity: 0.4 }}\n                        transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                    >{config.label.toUpperCase()}</motion.span>\n                </AnimatePresence>\n            </div>\n        </motion.div>\n    );\n}\n\n// ─── Pill selector ─────────────────────────────────────────────\nfunction StatusPill({ status, duration, variant }) {\n    if (variant === \"lyra\") return <LyraStatusPill status={status} duration={duration} />;\n    if (variant === \"retro\") return <RetroStatusPill status={status} duration={duration} />;\n    return <NovaStatusPill status={status} duration={duration} />;\n}\n\n// ─── Status Elevation (main component) ─────────────────────────\n// Supports variant: \"nova\" | \"lyra\" | \"retro\"\nfunction StatusElevation({ items = [], duration = 0.3, variant = \"nova\" }) {\n    const sortedItems = useMemo(() => {\n        return [...items].sort((a, b) => {\n            const pA = STATUS_CONFIG[a.status]?.priority ?? 99;\n            const pB = STATUS_CONFIG[b.status]?.priority ?? 99;\n            if (pA !== pB) return pB - pA;\n            return a.id - b.id;\n        });\n    }, [items]);\n\n    const isRetro = variant === \"retro\";\n    const isLyra = variant === \"lyra\";\n\n    const rowClass = isRetro\n        ? \"relative overflow-hidden border-2 border-black\"\n        : isLyra\n        ? \"relative overflow-hidden rounded-none border-[0.6px] border-white/20\"\n        : \"relative overflow-hidden rounded-2xl\";\n\n    const rowStyle = isRetro\n        ? { background: \"#ffffff\" }\n        : isLyra\n        ? { background: \"rgba(0,0,0,0.4)\" }\n        : {\n              background: \"linear-gradient(135deg, rgba(30,30,35,0.9), rgba(20,20,25,0.95))\",\n              border: \"1px solid rgba(255,255,255,0.06)\",\n              boxShadow: \"0 2px 12px rgba(0,0,0,0.3)\",\n          };\n\n    return (\n        <div className={\\`w-full max-w-lg mx-auto \\${isRetro ? \"border-2 border-black shadow-[8px_8px_0px_0px_#000000] bg-white p-4\" : \"\"}\\`}>\n            {isRetro && (\n                <div className=\"border-b-2 border-black pb-2 mb-4 flex justify-between items-center\">\n                    <span className=\"font-bold font-mono uppercase tracking-widest text-black text-sm\">STATUS_QUEUE.exe</span>\n                    <span className=\"text-xs font-mono border-2 border-black px-2 py-0.5 text-black\">{items.length} ENTRIES</span>\n                </div>\n            )}\n            <div className={isRetro ? \"space-y-2\" : \"space-y-3\"}>\n                <AnimatePresence initial={false}>\n                    {sortedItems.map((item, index) => {\n                        const config = STATUS_CONFIG[item.status];\n                        return (\n                            <motion.div key={item.id} layout\n                                initial={{ opacity: 0, y: 20, scale: 0.95 }}\n                                animate={{ opacity: 1, y: 0, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.9, x: -20 }}\n                                transition={{\n                                    layout: { type: \"tween\", duration, ease: \"easeInOut\" },\n                                    opacity: { duration }, scale: { duration },\n                                }}\n                                className={rowClass} style={rowStyle}\n                            >\n                                <motion.div layout className={\\`absolute left-0 top-0 bottom-0 \\${isRetro ? \"w-1\" : \"w-[2px]\"}\\`}\n                                    style={{ background: config.color, opacity: isLyra ? 0.8 : 0.6 }} />\n                                <div className=\"flex items-center gap-4 p-4 pl-5\">\n                                    <motion.div layout className={\\`flex items-center justify-center w-7 h-7 \\${isRetro ? \"border-2 border-black\" : isLyra ? \"\" : \"rounded-lg\"}\\`}\n                                        style={isRetro ? { background: \"#fff\" } : isLyra ? { border: \"1px solid rgba(255,255,255,0.15)\" } : { background: \"rgba(255,255,255,0.04)\", border: \"1px solid rgba(255,255,255,0.06)\" }}>\n                                        <span className={\\`text-xs font-bold font-mono \\${isRetro ? \"text-black\" : isLyra ? \"text-neutral-500\" : \"text-white/40\"}\\`}>{index + 1}</span>\n                                    </motion.div>\n                                    <div className=\"flex-1 min-w-0\">\n                                        <p className={\\`truncate \\${isRetro ? \"text-sm font-mono font-bold uppercase text-black\" : isLyra ? \"text-xs font-mono uppercase tracking-wider text-neutral-300\" : \"text-sm font-medium text-white/80\"}\\`}>{item.name}</p>\n                                        <p className={\\`mt-0.5 font-mono \\${isRetro ? \"text-[10px] text-gray-500 uppercase\" : isLyra ? \"text-[10px] text-neutral-600 uppercase\" : \"text-[11px] text-white/25\"}\\`}>ID: {item.id}</p>\n                                    </div>\n                                    <StatusPill status={item.status} duration={duration} variant={variant} />\n                                </div>\n                                {!isRetro && (\n                                    <motion.div key={item.status}\n                                        initial={{ x: \"-100%\", opacity: 0.2 }}\n                                        animate={{ x: \"200%\", opacity: 0 }}\n                                        transition={{ duration, ease: \"easeOut\" }}\n                                        className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent pointer-events-none\" />\n                                )}\n                            </motion.div>\n                        );\n                    })}\n                </AnimatePresence>\n            </div>\n        </div>\n    );\n}\n\n// ─── Demo ──────────────────────────────────────────────────────\nconst STATUSES = [\"failed\", \"pending\", \"success\"];\n\nconst INITIAL_ITEMS = [\n    { id: 1, name: \"Database Migration\", status: \"pending\" },\n    { id: 2, name: \"API Deployment\", status: \"success\" },\n    { id: 3, name: \"Auth Service\", status: \"failed\" },\n    { id: 4, name: \"Cache Warmup\", status: \"pending\" },\n    { id: 5, name: \"SSL Certificate\", status: \"success\" },\n    { id: 6, name: \"DNS Propagation\", status: \"pending\" },\n];\n\n// Pass variant=\"nova\" | \"lyra\" | \"retro\" to switch styles\nexport default function StatusElevationDemo({ variant = \"nova\" }) {\n    const [items, setItems] = useState(INITIAL_ITEMS);\n    const intervalRef = useRef(null);\n\n    const randomizeOne = useCallback(() => {\n        setItems((prev) => {\n            const idx = Math.floor(Math.random() * prev.length);\n            const currentStatus = prev[idx].status;\n            const otherStatuses = STATUSES.filter((s) => s !== currentStatus);\n            const newStatus = otherStatuses[Math.floor(Math.random() * otherStatuses.length)];\n            return prev.map((item, i) => i === idx ? { ...item, status: newStatus } : item);\n        });\n    }, []);\n\n    useEffect(() => {\n        intervalRef.current = setInterval(randomizeOne, 1500);\n        return () => clearInterval(intervalRef.current);\n    }, [randomizeOne]);\n\n    return (\n        <div className=\"w-full flex flex-col gap-6 p-4\">\n            <StatusElevation items={items} duration={0.3} variant={variant} />\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}