{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-elevation-lyra",
  "title": "Status Elevation Lyra",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/status-elevation/lyra/StatusElevationLyra.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        borderColor: \"rgba(239, 68, 68, 0.25)\",\n    },\n    pending: {\n        priority: 2, label: \"Pending\", icon: Loader,\n        color: \"#f59e0b\",\n        borderColor: \"rgba(245, 158, 11, 0.25)\",\n    },\n    success: {\n        priority: 3, label: \"Success\", icon: CheckCircle,\n        color: \"#10b981\",\n        borderColor: \"rgba(16, 185, 129, 0.25)\",\n    },\n};\n\n// ─── Status Pill ───────────────────────────────────────────────\nfunction StatusPill({ 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\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// ─── Status Elevation Component ────────────────────────────────\nexport function StatusElevation({ items = [], duration = 0.3 }) {\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    return (\n        <div className=\"w-full max-w-lg mx-auto\">\n            <div className=\"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=\"relative overflow-hidden rounded-none border-[0.6px] border-white/20\"\n                                style={{ background: \"rgba(0,0,0,0.4)\" }}\n                            >\n                                <motion.div layout className=\"absolute left-0 top-0 bottom-0 w-[2px]\"\n                                    style={{ background: config.color, opacity: 0.8 }} />\n                                <div className=\"flex items-center gap-4 p-4 pl-5\">\n                                    <motion.div layout className=\"flex items-center justify-center w-6 h-6\"\n                                        style={{ border: \"1px solid rgba(255,255,255,0.15)\" }}>\n                                        <span className=\"text-[10px] font-bold text-neutral-500 font-mono\">{index + 1}</span>\n                                    </motion.div>\n                                    <div className=\"flex-1 min-w-0\">\n                                        <p className=\"text-xs font-mono uppercase tracking-wider text-neutral-300 truncate\">{item.name}</p>\n                                        <p className=\"text-[10px] text-neutral-600 mt-0.5 font-mono uppercase\">ID: {item.id}</p>\n                                    </div>\n                                    <StatusPill status={item.status} duration={duration} />\n                                </div>\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                            </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\nexport default function StatusElevationLyraDemo() {\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} />\n        </div>\n    );\n}\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}