@mova-ui/react 0.1.0 → 0.4.1

package/registry/overview-bar-scrubber-card.json

@@ -0,0 +1,19 @@
+{
+  "id": "overview-bar-scrubber-card",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "overview-bar-scrubber-card.tsx",
+  "registryFile": "overview-bar-scrubber-card.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './overview-bar-scrubber-card';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/metrics/AnimatedMetricCard.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { TrendingUp, Zap, Check, ArrowUpRight, Share2, MoreHorizontal, ChevronDown, Star, Crown, HelpCircle } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/metrics/AnimatedMetricCard.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedMetricCard = ({ config, theme }) => {\n  const [stockRange, setStockRange] = useState(\"1W\");\n  const [viewsRange, setViewsRange] = useState(\"Day\");\n  const [salesAnalyticsRange, setSalesAnalyticsRange] = useState(\"Weekly\");\n  const [salesTargetRange, setSalesTargetRange] = useState(\"Yearly\");\n  const [timerActive, setTimerActive] = useState(false);\n  const [decibelLevel, setDecibelLevel] = useState(40);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const containerClasses = `w-full h-full p-4 flex flex-col justify-between select-none font-sans transition-colors duration-300 ${isDark ? \"text-white\" : \"text-black\"}`;\n  switch (config.interactionType) {\n    // --- CACHEABLE BANDWIDTH COST CARD ---\n    case \"cacheable-bandwidth-cost\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1.5\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"90.5 GB\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold text-neutral-400 font-normal\", children: \"(69.8%)\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between text-xs font-semibold mt-1\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5 text-neutral-500 dark:text-neutral-400\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#A855F7]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Cacheable Bandwidth\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1 text-neutral-600 dark:text-neutral-300 font-bold\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-3.5 h-3.5 rounded-full bg-neutral-200 dark:bg-white/15 text-[10px] flex items-center justify-center font-black\", children: \"$\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"$9.50\" }),\n              /* @__PURE__ */ jsx(HelpCircle, { className: \"w-3.5 h-3.5 text-neutral-400 cursor-pointer\" })\n            ] })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"my-2\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-4 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center p-0.5 overflow-hidden gap-0.5\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"h-full w-[25%] bg-[#1E1B4B] dark:bg-[#312E81] rounded-l-full\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"h-full w-[20%] bg-[#A855F7]\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"h-full flex-1 rounded-r-full bg-[#F3E8FF] dark:bg-[#2E1065] relative overflow-hidden\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-40\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n            /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: \"bandwidth-stripes\", width: \"8\", height: \"8\", patternTransform: \"rotate(90 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"8\", stroke: \"#A855F7\", strokeWidth: \"4\" }) }) }),\n            /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: \"url(#bandwidth-stripes)\" })\n          ] }) })\n        ] }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1.5 text-xs font-semibold\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between text-neutral-600 dark:text-neutral-300\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#A855F7]\" }),\n            /* @__PURE__ */ jsxs(\"span\", { children: [\n              \"Cached \",\n              /* @__PURE__ */ jsx(\"strong\", { className: \"text-black dark:text-white font-bold\", children: \"12.8 GB\" }),\n              \" \",\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal\", children: \"(9.8%)\" })\n            ] })\n          ] }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between text-neutral-600 dark:text-neutral-300\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#1E1B4B] dark:bg-white\" }),\n            /* @__PURE__ */ jsxs(\"span\", { children: [\n              \"Non-Cacheable \",\n              /* @__PURE__ */ jsx(\"strong\", { className: \"text-black dark:text-white font-bold\", children: \"26.3 GB\" }),\n              \" \",\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal\", children: \"(20.3%)\" })\n            ] })\n          ] }) }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"pt-1 border-t border-neutral-100 dark:border-white/10 text-neutral-500 font-medium\", children: [\n            \"Total \",\n            /* @__PURE__ */ jsx(\"strong\", { className: \"text-black dark:text-white font-bold\", children: \"129.6 GB\" })\n          ] })\n        ] })\n      ] });\n    // --- OTHER IMAGE COMPONENTS ---\n    case \"sales-analytics-dual-bars\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#F9FAFB] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-bold tracking-tight\", children: \"Sales analytics\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[11px] text-neutral-400 font-medium mt-1\", children: \"Total units sold\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black tracking-tight\", children: \"345\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-bold text-neutral-400\", children: \"/500\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-full border ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"Monthly\", \"Weekly\"].map((r) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setSalesAnalyticsRange(r);\n              },\n              className: `px-3 py-1 text-[10px] font-bold rounded-full transition-colors cursor-pointer border-0 ${salesAnalyticsRange === r ? isDark ? \"bg-white text-black\" : \"bg-white text-black shadow-xs\" : \"text-neutral-400 hover:text-white\"}`,\n              children: r\n            },\n            r\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: `p-3 rounded-2xl border flex flex-col justify-between h-36 mt-1 ${isDark ? \"bg-[#121214] border-white/5\" : \"bg-white border-neutral-100 shadow-xs\"}`, children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-3 text-[10px] font-bold\", children: [\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-xs bg-[#EA580C]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Total Sales\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-xs bg-[#FDBA74]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Total Earnings\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-end justify-between px-2 h-20\", children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[40%]\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-end gap-1 h-full\", children: [\n              /* @__PURE__ */ jsx(motion.div, { initial: { height: 0 }, animate: { height: \"75%\" }, transition: { duration: 0.6 }, className: \"w-6 bg-[#EA580C] rounded-lg shadow-sm\" }),\n              /* @__PURE__ */ jsx(motion.div, { initial: { height: 0 }, animate: { height: \"90%\" }, transition: { duration: 0.6, delay: 0.1 }, className: \"w-6 bg-[#FDBA74] rounded-lg shadow-sm\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[55%]\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[45%]\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between px-2 text-[9px] font-bold text-neutral-400 uppercase\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Sep\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-black dark:text-white font-black\", children: \"Oct\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Nov\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Dec\" })\n          ] })\n        ] })\n      ] });\n    case \"sales-target-segmented-arc\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#F9FAFB] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold tracking-tight\", children: \"Sales target\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-full border ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"Monthly\", \"Yearly\"].map((r) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setSalesTargetRange(r);\n              },\n              className: `px-3 py-1 text-[10px] font-bold rounded-full transition-colors cursor-pointer border-0 ${salesTargetRange === r ? isDark ? \"bg-white text-black\" : \"bg-white text-black shadow-xs\" : \"text-neutral-400 hover:text-white\"}`,\n              children: r\n            },\n            r\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: `p-3 rounded-2xl border flex flex-col items-center justify-between h-44 mt-1 relative overflow-hidden ${isDark ? \"bg-[#121214] border-white/5\" : \"bg-white border-neutral-100 shadow-xs\"}`, children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-3 text-[10px] font-bold w-full justify-start\", children: [\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#FDBA74]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Property listed\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#EA580C]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Property delivered\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-52 h-28 flex items-center justify-center mt-2\", children: [\n            /* @__PURE__ */ jsx(\"svg\", { viewBox: \"0 0 200 110\", className: \"w-full h-full overflow-visible\", children: Array.from({ length: 16 }).map((_, i) => {\n              const angle = -180 + i * (180 / 15);\n              const isListed = i < 5;\n              const isDelivered = i >= 5 && i < 12;\n              return /* @__PURE__ */ jsx(\"g\", { transform: `rotate(${angle} 100 100)`, children: /* @__PURE__ */ jsx(\n                \"rect\",\n                {\n                  x: \"93\",\n                  y: \"10\",\n                  width: \"14\",\n                  height: \"28\",\n                  rx: \"4\",\n                  fill: isListed ? \"#FDBA74\" : isDelivered ? \"#EA580C\" : isDark ? \"#26262B\" : \"#E5E7EB\"\n                }\n              ) }, i);\n            }) }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"absolute bottom-1 flex flex-col items-center\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"70%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-semibold text-neutral-400\", children: \"Achieved\" })\n            ] })\n          ] })\n        ] })\n      ] });\n    case \"sales-overview-radial-dashboard\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold tracking-tight\", children: \"Sales Overview\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-7 h-7 rounded-full bg-neutral-100 dark:bg-white/10 flex items-center justify-center cursor-pointer\", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: \"w-4 h-4 text-neutral-500 dark:text-neutral-300\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"bg-[#F3F0FF] dark:bg-[#2E1A47] text-[#6D28D9] dark:text-[#DDD6FE] px-3 py-1.5 rounded-xl text-xs font-bold flex items-center gap-2 my-1\", children: [\n          /* @__PURE__ */ jsx(Crown, { className: \"w-4 h-4 fill-[#6D28D9] dark:fill-[#DDD6FE]\" }),\n          /* @__PURE__ */ jsxs(\"span\", { children: [\n            \"You're the top \",\n            /* @__PURE__ */ jsx(\"strong\", { className: \"text-[#4C1D95] dark:text-white\", children: \"17%\" }),\n            \" of performers\"\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-48 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsx(\"svg\", { viewBox: \"0 0 200 110\", className: \"w-full h-full overflow-visible\", children: Array.from({ length: 14 }).map((_, i) => {\n            const angle = -180 + i * (180 / 13);\n            const isActive = i < 9;\n            return /* @__PURE__ */ jsx(\"g\", { transform: `rotate(${angle} 100 100)`, children: /* @__PURE__ */ jsx(\n              \"rect\",\n              {\n                x: \"93\",\n                y: \"10\",\n                width: \"14\",\n                height: \"28\",\n                rx: \"4\",\n                fill: isActive ? \"#6366F1\" : isDark ? \"#26262B\" : \"#E5E7EB\"\n              }\n            ) }, i);\n          }) }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute bottom-0 flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black tracking-tight\", children: \"67.2%\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-semibold text-neutral-400\", children: \"sales goals\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"grid grid-cols-2 gap-2 mt-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2.5 rounded-xl border flex flex-col justify-between ${isDark ? \"bg-white/5 border-white/5\" : \"bg-white border-neutral-200/80 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-semibold text-neutral-500\", children: \"Number of Sales\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"px-1.5 py-0.5 rounded-md bg-[#6366F1]/15 text-[#6366F1] text-[9px] font-bold\", children: \"3.5% \\u2197\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-xl font-black tracking-tight mt-1\", children: \"1,304\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2.5 rounded-xl border flex flex-col justify-between ${isDark ? \"bg-white/5 border-white/5\" : \"bg-white border-neutral-200/80 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-semibold text-neutral-500\", children: \"Total Revenue\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"px-1.5 py-0.5 rounded-md bg-neutral-900 text-white text-[9px] font-bold\", children: \"4.5% \\u2198\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-xl font-black tracking-tight mt-1\", children: \"$21.1K\" })\n          ] })\n        ] })\n      ] });\n    case \"users-growth-pill-progress\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(Star, { className: \"w-5 h-5 fill-white text-white\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-bold tracking-tight\", children: \"Users growth\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-7 h-7 rounded-full bg-neutral-700 overflow-hidden border border-white/20\", children: /* @__PURE__ */ jsx(\"img\", { src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80\", alt: \"Avatar\", className: \"w-full h-full object-cover\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-1\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-bold text-[#818CF8]\", children: \"\\u2197\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-4xl font-black tracking-tight\", children: \"+88.3%\" }),\n          /* @__PURE__ */ jsxs(\"span\", { className: \"text-[10px] font-bold text-neutral-400 flex items-center gap-0.5\", children: [\n            \"+1.78% \",\n            /* @__PURE__ */ jsx(TrendingUp, { className: \"w-3 h-3\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-2 my-1\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-9 bg-[#1A1A1E] rounded-full flex items-center p-1\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-[45%] h-full bg-white text-black rounded-full flex items-center px-3 text-xs font-bold\", children: \"12.01\" }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-9 bg-[#1A1A1E] rounded-full flex items-center p-1\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-[78%] h-full bg-white text-black rounded-full flex items-center px-3 text-xs font-bold\", children: \"13.01\" }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-9 bg-gradient-to-r from-[#2E284A] to-[#A5B4FC] rounded-full flex items-center px-3 text-xs font-bold text-white shadow-md\", children: \"14.01\" })\n        ] })\n      ] });\n    case \"overview-bar-scrubber-card\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold tracking-tight\", children: \"Overview\" }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `px-3 py-1 rounded-xl text-xs font-semibold flex items-center gap-1 border cursor-pointer ${isDark ? \"bg-white/10 border-white/15 text-white\" : \"bg-white border-neutral-200 text-neutral-700 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Last Month\" }),\n            /* @__PURE__ */ jsx(ChevronDown, { className: \"w-3 h-3 text-neutral-400\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-0.5\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] text-neutral-400 font-semibold uppercase\", children: \"Avg Per month\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"text-2xl font-black tracking-tight\", children: [\n              \"1,860\",\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal text-base\", children: \"/3K\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"px-2 py-0.5 rounded-md bg-[#22C55E]/15 text-[#22C55E] text-[10px] font-bold flex items-center gap-0.5\", children: \"50,2% \\u25B2\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-28 my-1 flex items-end justify-between px-1\", children: [\n          { month: \"Apr\", h: \"45%\" },\n          { month: \"May\", h: \"30%\" },\n          { month: \"Jun\", h: \"75%\" },\n          { month: \"Jul\", h: \"50%\" },\n          { month: \"Aug\", h: \"85%\", active: true },\n          { month: \"Sep\", h: \"40%\" },\n          { month: \"Oct\", h: \"60%\" },\n          { month: \"Nov\", h: \"70%\" }\n        ].map((item, i) => /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col items-center gap-1 flex-1 relative\", children: [\n          item.active && /* @__PURE__ */ jsxs(\"div\", { className: \"absolute -top-11 z-20 flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"bg-[#1E1E22] text-white text-[10px] font-bold px-2.5 py-1 rounded-xl shadow-xl border border-white/10 text-center\", children: [\n              /* @__PURE__ */ jsx(\"div\", { children: \"August 2025\" }),\n              /* @__PURE__ */ jsx(\"div\", { className: \"text-neutral-300\", children: \"120 pcs\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[4px] border-t-[#1E1E22]\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\n            \"div\",\n            {\n              className: `w-7 rounded-2xl relative overflow-hidden flex items-start justify-center ${item.active ? \"bg-[#27272A] border-2 border-white/20 shadow-md\" : \"bg-neutral-200/60 dark:bg-neutral-800/40\"}`,\n              style: { height: item.h },\n              children: [\n                /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-20\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n                  /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: `stripe-${i}`, width: \"16\", height: \"16\", patternTransform: \"rotate(45 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"16\", stroke: \"#FFFFFF\", strokeWidth: \"8\" }) }) }),\n                  /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: `url(#stripe-${i})` })\n                ] }),\n                item.active && /* @__PURE__ */ jsx(\"div\", { className: \"w-2.5 h-2.5 rounded-full bg-white border-2 border-[#27272A] mt-1 z-10\" })\n              ]\n            }\n          ),\n          /* @__PURE__ */ jsx(\"span\", { className: `text-[9px] font-bold ${item.active ? \"text-black dark:text-white font-black\" : \"text-neutral-400\"}`, children: item.month })\n        ] }, i)) })\n      ] });\n    case \"network-telemetry-matrix\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-mono bg-[#0B0D0E] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-sans font-bold tracking-tight\", children: \"Network Telemetry\" }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2 text-neutral-500\", children: [\n            /* @__PURE__ */ jsx(Share2, { className: \"w-3.5 h-3.5 hover:text-white transition-colors cursor-pointer\" }),\n            /* @__PURE__ */ jsx(MoreHorizontal, { className: \"w-3.5 h-3.5 hover:text-white transition-colors cursor-pointer\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"grid grid-cols-2 gap-3 my-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[8px] font-bold text-neutral-500 uppercase tracking-widest\", children: \"Average Finality\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black font-sans\", children: \"1.8s\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-bold text-[#22C55E] flex items-center gap-0.5\", children: \"\\u2191 14.6%\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[8px] font-bold text-neutral-500 uppercase tracking-widest\", children: \"Intents Finalized\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black font-sans\", children: \"312,134\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-bold text-[#22C55E] flex items-center gap-0.5\", children: \"\\u2191 11.5%\" })\n            ] })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[8px] font-bold text-neutral-500 tracking-wider\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"AUGUST / TESTNET V0\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"12,430 INTENTS\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"grid grid-cols-16 gap-0.5 h-6\", children: Array.from({ length: 48 }).map((_, i) => /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: `w-full h-full rounded-[1px] ${[3, 7, 12, 18, 22, 29, 34, 41, 45].includes(i) ? \"bg-[#22C55E]\" : \"bg-[#142319]\"}`\n            },\n            i\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[8px] font-bold text-neutral-500 tracking-wider\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"SEPTEMBER / V1 SEQUENCER\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"18,916 INTENTS\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"grid grid-cols-16 gap-0.5 h-6\", children: Array.from({ length: 48 }).map((_, i) => /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: `w-full h-full rounded-[1px] ${[2, 6, 11, 15, 24, 31, 38, 43, 47].includes(i) ? \"bg-[#22C55E]\" : \"bg-[#142319]\"}`\n            },\n            i\n          )) })\n        ] })\n      ] });\n    case \"progress-indicator-piano\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-semibold text-neutral-300\", children: \"Progress Indicator\" }),\n          /* @__PURE__ */ jsx(MoreHorizontal, { className: \"w-4 h-4 text-neutral-500 cursor-pointer\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[11px] text-neutral-400 font-medium my-0.5\", children: \"You are on track to finish the goal three days early\" }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-px bg-white/10 my-1\" }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-1\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"66%\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"px-2 py-0.5 rounded-full bg-white/10 text-white text-[10px] font-bold border border-white/15 flex items-center gap-1\", children: /* @__PURE__ */ jsx(\"span\", { children: \"\\u2197 71 avg\" }) }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] text-neutral-500 font-medium\", children: \"vs. the last period\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center gap-1 h-12 w-full mt-2\", children: Array.from({ length: 28 }).map((_, i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: `flex-1 h-full rounded-xs transition-colors ${i < 18 ? \"bg-white shadow-[0_0_8px_rgba(255,255,255,0.4)]\" : \"bg-[#26262B]\"}`\n          },\n          i\n        )) })\n      ] });\n    case \"server-performance-step-bars\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-semibold text-neutral-400\", children: \"Server Performance Metrics\" }),\n          /* @__PURE__ */ jsx(ArrowUpRight, { className: \"w-4 h-4 text-neutral-400\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-4xl font-black tracking-tight my-1\", children: \"+45%\" }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-end justify-between gap-1.5 h-20 mt-2 px-1\", children: [15, 22, 30, 45, 58, 72, 90].map((h, i) => /* @__PURE__ */ jsx(\"div\", { className: \"flex-1 bg-[#222226] rounded-t-sm relative overflow-hidden flex flex-col justify-end\", style: { height: `${h}%` }, children: /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-1 bg-white\" }) }, i)) })\n      ] });\n    case \"credit-score-barcode-meter\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-bold tracking-tight\", children: \"Credit Score\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[11px] text-neutral-400 font-medium\", children: \"Your current credit rating.\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `px-3 py-1 rounded-xl text-xs font-semibold flex items-center gap-1 border cursor-pointer ${isDark ? \"bg-white/10 border-white/15 text-white\" : \"bg-white border-neutral-200 text-neutral-700 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Weekly\" }),\n            /* @__PURE__ */ jsx(ChevronDown, { className: \"w-3 h-3 text-neutral-400\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-1\", children: [\n          /* @__PURE__ */ jsxs(\"span\", { className: \"text-4xl font-black tracking-tight\", children: [\n            \"88\",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal text-2xl\", children: \"/100\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[11px] font-bold text-[#22C55E]\", children: \"\\u25B2 13.6%\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[11px] text-neutral-400 font-medium\", children: \"vs last month\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between gap-1 h-9 w-full mt-2\", children: Array.from({ length: 42 }).map((_, i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: `w-1 h-full rounded-full ${i < 36 ? \"bg-[#22C55E]\" : isDark ? \"bg-white/10\" : \"bg-neutral-200\"}`\n          },\n          i\n        )) })\n      ] });\n    case \"views-hourly-wave-chart\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-white text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-bold tracking-tight\", children: \"Views\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1.5 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"12.7K\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-bold text-[#22C55E]\", children: \"\\u2197 2.6%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] text-neutral-400 font-bold uppercase\", children: \"VS PREV. DAY\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-xl border ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"Day\", \"Week\", \"Month\"].map((p) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setViewsRange(p);\n              },\n              className: `px-2.5 py-1 text-[10px] font-bold rounded-lg transition-colors cursor-pointer border-0 ${viewsRange === p ? isDark ? \"bg-white text-black\" : \"bg-white text-black shadow-xs\" : \"text-neutral-400 hover:text-white\"}`,\n              children: p\n            },\n            p\n          )) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-20 my-1\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 40\", children: [\n          /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"20\", x2: \"100\", y2: \"20\", stroke: \"#F59E0B\", strokeWidth: \"1\", strokeDasharray: \"3 3\" }),\n          /* @__PURE__ */ jsx(\"text\", { x: \"92\", y: \"18\", fill: \"#F59E0B\", fontSize: \"4\", fontWeight: \"bold\", children: \"AVG\" }),\n          /* @__PURE__ */ jsx(\"path\", { d: \"M0,25 Q15,30 25,12 T50,15 T75,18 T100,28 L100,40 L0,40 Z\", fill: \"url(#blue-wave-grad)\", opacity: \"0.25\" }),\n          /* @__PURE__ */ jsx(\n            motion.path,\n            {\n              d: \"M0,25 Q15,30 25,12 T50,15 T75,18 T100,28\",\n              fill: \"none\",\n              stroke: \"#3B82F6\",\n              strokeWidth: \"2.5\",\n              strokeLinecap: \"round\",\n              initial: { pathLength: 0 },\n              animate: { pathLength: 1 },\n              transition: { duration: 0.8 }\n            }\n          ),\n          /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsxs(\"linearGradient\", { id: \"blue-wave-grad\", x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n            /* @__PURE__ */ jsx(\"stop\", { offset: \"0%\", stopColor: \"#3B82F6\", stopOpacity: \"0.6\" }),\n            /* @__PURE__ */ jsx(\"stop\", { offset: \"100%\", stopColor: \"#3B82F6\", stopOpacity: \"0.0\" })\n          ] }) })\n        ] }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[9px] font-bold text-neutral-400 uppercase px-1\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"12 AM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"4 AM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"8 AM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"12 PM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"4 PM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"8 PM\" })\n        ] })\n      ] });\n    case \"timer-preparation-segmented\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#12141A] text-white rounded-[24px]\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-4xl font-black tracking-tight leading-none font-sans\", children: \"25:04\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-xs font-semibold text-neutral-400 mt-1\", children: \"Left for preparation\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-8 h-8 rounded-full bg-[#1A3660] text-[#3B82F6] flex items-center justify-center border border-[#2563EB]/30\", children: /* @__PURE__ */ jsx(Check, { className: \"w-4 h-4 stroke-[3]\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative pt-6\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute top-0 right-3 transform -translate-y-full flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"bg-[#2563EB] text-white text-[11px] font-bold px-3 py-1 rounded-full shadow-lg flex items-center gap-1\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-3.5 h-3.5 rounded-full bg-white text-[#2563EB] text-[9px] font-black flex items-center justify-center\", children: \"1\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Preparation\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-[#2563EB]\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full h-11 bg-[#1A2333] rounded-xl p-1 flex items-center justify-between gap-1 overflow-hidden\", children: [\n            [1, 2, 3].map((seg) => /* @__PURE__ */ jsx(\"div\", { className: \"flex-1 h-full bg-[#121B2B] rounded-lg\" }, seg)),\n            /* @__PURE__ */ jsx(\"div\", { className: \"relative flex-1 h-full bg-[#2563EB] rounded-lg overflow-hidden flex items-center justify-center\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-30\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n              /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: \"stripes\", width: \"20\", height: \"20\", patternTransform: \"rotate(45 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"20\", stroke: \"#FFFFFF\", strokeWidth: \"10\" }) }) }),\n              /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: \"url(#stripes)\" })\n            ] }) }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-0 bottom-0 right-10 w-0.5 bg-white shadow-[0_0_8px_rgba(255,255,255,0.8)] z-10\" })\n          ] })\n        ] })\n      ] });\n    case \"noise-decibel-level\":\n      return /* @__PURE__ */ jsxs(\n        \"div\",\n        {\n          onClick: (e) => {\n            e.stopPropagation();\n            triggerHaptic(\"light\");\n            setDecibelLevel(decibelLevel === 40 ? 60 : 40);\n          },\n          className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] cursor-pointer transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border border-white/10\" : \"bg-[#EAEBED] text-neutral-900\"}`,\n          children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-semibold text-neutral-400\", children: \"Current noise level\" }),\n              /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-end gap-1 h-4\", children: [\n                /* @__PURE__ */ jsx(\"div\", { className: `w-1 rounded-full ${decibelLevel === 40 ? \"h-2 bg-[#22C55E]\" : \"h-2 bg-[#EAB308]\"}` }),\n                /* @__PURE__ */ jsx(\"div\", { className: `w-1 rounded-full ${decibelLevel === 40 ? \"h-3 bg-[#22C55E]\" : \"h-3 bg-[#EAB308]\"}` }),\n                /* @__PURE__ */ jsx(\"div\", { className: `w-1 rounded-full ${decibelLevel === 40 ? \"h-4 bg-[#22C55E]\" : \"h-4 bg-[#EAB308]\"}` })\n              ] })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 my-1\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-5xl font-black tracking-tight leading-none font-sans\", children: decibelLevel }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold text-neutral-400\", children: \"dB\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[11px] font-semibold text-neutral-400 px-0.5 mb-1\", children: [\n              /* @__PURE__ */ jsx(\"span\", { children: \"Low\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"High\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: `relative flex-1 h-12 rounded-2xl flex items-center justify-start px-4 overflow-hidden ${decibelLevel === 40 ? \"bg-[#22C55E] text-white shadow-md\" : \"bg-[#EAB308] text-white shadow-md\"}`, children: [\n                /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-25\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n                  /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: \"db-stripes\", width: \"16\", height: \"16\", patternTransform: \"rotate(45 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"16\", stroke: \"#FFFFFF\", strokeWidth: \"8\" }) }) }),\n                  /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: \"url(#db-stripes)\" })\n                ] }),\n                /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10 text-base font-black font-sans\", children: decibelLevel })\n              ] }),\n              /* @__PURE__ */ jsx(\"div\", { className: \"w-1 h-8 bg-neutral-400/40 rounded-full\" }),\n              /* @__PURE__ */ jsx(\"div\", { className: `flex-1 h-12 rounded-2xl flex items-center justify-end px-4 font-black text-base font-sans ${isDark ? \"bg-white/10 text-neutral-400\" : \"bg-neutral-300/80 text-neutral-500\"}`, children: \"120\" })\n            ] })\n          ]\n        }\n      );\n    // --- MONOCHROMATIC COMPONENTS ---\n    case \"mono-stock\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5 font-bold text-[10px] tracking-wider uppercase opacity-60\", children: [\n              /* @__PURE__ */ jsx(\"span\", { children: \"AAPL\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-1.5 h-1.5 rounded-full bg-white animate-pulse\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-2xl font-black tracking-tight mt-0.5\", children: \"$182.40\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1 text-[10px] font-bold opacity-80 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(TrendingUp, { className: \"w-3 h-3\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"+$4.15 (+2.33%)\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-full border ${isDark ? \"bg-neutral-900 border-white/10\" : \"bg-neutral-100 border-black/10\"}`, children: [\"1D\", \"1W\", \"1M\", \"1Y\"].map((r) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setStockRange(r);\n              },\n              className: `px-2 py-0.5 text-[9px] font-bold rounded-full transition-colors cursor-pointer border-0 ${stockRange === r ? isDark ? \"bg-white text-black\" : \"bg-black text-white\" : isDark ? \"text-neutral-400 hover:text-white\" : \"text-neutral-600 hover:text-black\"}`,\n              children: r\n            },\n            r\n          )) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-16 mt-2\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 40\", children: [\n          /* @__PURE__ */ jsx(\"path\", { d: \"M0,30 Q15,10 30,25 T60,15 T90,5 L100,2 L100,40 L0,40 Z\", fill: isDark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.04)\" }),\n          /* @__PURE__ */ jsx(\n            motion.path,\n            {\n              d: \"M0,30 Q15,10 30,25 T60,15 T90,5 L100,2\",\n              fill: \"none\",\n              stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n              strokeWidth: \"2.5\",\n              strokeLinecap: \"round\",\n              initial: { pathLength: 0 },\n              animate: { pathLength: 1 },\n              transition: { duration: 0.8 }\n            }\n          ),\n          /* @__PURE__ */ jsx(\"circle\", { cx: \"100\", cy: \"2\", r: \"3\", fill: isDark ? \"#FFFFFF\" : \"#000000\" })\n        ] }) })\n      ] });\n    case \"mono-revenue\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] font-bold opacity-50 uppercase tracking-wider\", children: \"Revenue Stream\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-2xl font-black mt-0.5\", children: \"$94,820.00\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `p-2 rounded-xl border ${isDark ? \"bg-white/5 border-white/10 text-white\" : \"bg-black/5 border-black/10 text-black\"}`, children: /* @__PURE__ */ jsx(Zap, { className: \"w-4 h-4\" }) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-16 mt-2\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 40\", children: [\n          /* @__PURE__ */ jsx(\"path\", { d: \"M0,35 Q20,10 40,20 T80,5 L100,12 L100,40 L0,40 Z\", fill: isDark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.04)\" }),\n          /* @__PURE__ */ jsx(\n            motion.path,\n            {\n              d: \"M0,35 Q20,10 40,20 T80,5 L100,12\",\n              fill: \"none\",\n              stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n              strokeWidth: \"2.5\",\n              strokeLinecap: \"round\",\n              initial: { pathLength: 0 },\n              animate: { pathLength: 1 },\n              transition: { duration: 0.8 }\n            }\n          )\n        ] }) })\n      ] });\n    case \"mono-credit\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col items-center justify-center text-center select-none font-sans\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mb-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full transform -rotate-90\", viewBox: \"0 0 36 36\", children: [\n            /* @__PURE__ */ jsx(\"path\", { className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"3.5\", stroke: \"currentColor\", fill: \"none\", d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" }),\n            /* @__PURE__ */ jsx(\n              motion.path,\n              {\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"3.5\",\n                strokeDasharray: \"78, 100\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\",\n                initial: { strokeDasharray: \"0, 100\" },\n                animate: { strokeDasharray: \"78, 100\" },\n                transition: { duration: 0.8 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xl font-black ${isDark ? \"text-white\" : \"text-black\"}`, children: \"785\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"Score\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"span\", { className: `text-[9px] font-bold px-2 py-0.5 rounded-full border ${isDark ? \"bg-white/10 text-white border-white/20\" : \"bg-black/10 text-black border-black/20\"}`, children: \"Excellent Tier\" })\n      ] });\n    case \"mono-wallet\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Wallet Balance\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"$24,500.00\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"grid grid-cols-2 gap-2 my-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2 rounded-xl border ${isDark ? \"bg-white/[0.03] border-white/10\" : \"bg-black/[0.03] border-black/10\"}`, children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[9px] font-medium opacity-50\", children: \"Inflow\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-black\", children: \"+$8,240\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2 rounded-xl border ${isDark ? \"bg-white/[0.03] border-white/10\" : \"bg-black/[0.03] border-black/10\"}`, children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[9px] font-medium opacity-50\", children: \"Outflow\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-black\", children: \"-$2,150\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-60\", children: \"Auto-save enabled \\xB7 4 cards linked\" })\n      ] });\n    case \"mono-savings\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Savings Goal\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"$12,400\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"my-2\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-60\", children: \"Target: New House ($15,000)\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: `w-full h-2 rounded-full mt-1.5 overflow-hidden ${isDark ? \"bg-neutral-800\" : \"bg-neutral-200\"}`, children: /* @__PURE__ */ jsx(motion.div, { initial: { width: 0 }, animate: { width: \"82%\" }, transition: { duration: 0.7 }, className: `h-full rounded-full ${isDark ? \"bg-white\" : \"bg-black\"}` }) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] font-medium opacity-60\", children: \"+ $800 auto-deposit / mo\" })\n      ] });\n    case \"mono-heatmap\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Activity Heatmap\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-mono font-bold\", children: \"342 Commits\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"grid grid-cols-7 gap-1 my-1\", children: Array.from({ length: 28 }).map((_, i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: `w-full aspect-square rounded-xs ${i % 5 === 0 ? isDark ? \"bg-white\" : \"bg-black\" : i % 3 === 0 ? isDark ? \"bg-neutral-500\" : \"bg-neutral-400\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-200\"}`\n          },\n          i\n        )) }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-50\", children: \"High Activity Matrix\" })\n      ] });\n    case \"mono-activity-ring\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Activity Rings\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"3 Goals Hit\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"42\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(motion.circle, { cx: \"50\", cy: \"50\", r: \"42\", className: isDark ? \"text-white\" : \"text-black\", strokeWidth: \"4\", strokeLinecap: \"round\", stroke: \"currentColor\", fill: \"none\", strokeDasharray: \"263.8\", strokeDashoffset: \"52.7\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"32\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(motion.circle, { cx: \"50\", cy: \"50\", r: \"32\", className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", strokeWidth: \"4\", strokeLinecap: \"round\", stroke: \"currentColor\", fill: \"none\", strokeDasharray: \"201\", strokeDashoffset: \"40.2\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"22\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(motion.circle, { cx: \"50\", cy: \"50\", r: \"22\", className: isDark ? \"text-neutral-600\" : \"text-neutral-400\", strokeWidth: \"4\", strokeLinecap: \"round\", stroke: \"currentColor\", fill: \"none\", strokeDasharray: \"138.2\", strokeDashoffset: \"27.6\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-black\", children: \"88%\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-around text-[10px] font-semibold opacity-70\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Move\" }),\n          \" \\xB7 \",\n          /* @__PURE__ */ jsx(\"span\", { children: \"Exercise\" }),\n          \" \\xB7 \",\n          /* @__PURE__ */ jsx(\"span\", { children: \"Stand\" })\n        ] })\n      ] });\n    case \"mono-users\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Active Users (MAU)\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"+12.4%\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-3xl font-black\", children: \"48.2k\" }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1 text-[10px] opacity-70\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: `px-1.5 py-0.5 rounded font-semibold ${isDark ? \"bg-white/10 text-white\" : \"bg-black/10 text-black\"}`, children: \"US 54%\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: `px-1.5 py-0.5 rounded font-semibold ${isDark ? \"bg-white/10 text-white\" : \"bg-black/10 text-black\"}`, children: \"EU 32%\" })\n        ] })\n      ] });\n    case \"mono-kfactor\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Viral K-Factor Arc\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"K = 1.42\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"18\", cy: \"18\", r: \"14\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"3.5\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"18\",\n                cy: \"18\",\n                r: \"14\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"3.5\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"88\",\n                strokeDashoffset: \"26\",\n                initial: { strokeDashoffset: 88 },\n                animate: { strokeDashoffset: 26 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-lg font-black\", children: \"1.42x\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"Growth\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] text-center opacity-60\", children: \"Exponential referral multiplier\" })\n      ] });\n    case \"mono-latency\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Latency P99\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-mono font-bold\", children: \"1.8ms\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"my-1\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"text-2xl font-black\", children: \"1.8s Avg\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-50\", children: \"P99: 3.6s \\xB7 P95: 0.4s\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"h-10 w-full mt-1\", children: /* @__PURE__ */ jsx(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 30\", children: /* @__PURE__ */ jsx(\"path\", { d: \"M0,20 L20,25 L40,15 L60,25 L80,10 L100,5\", fill: \"none\", stroke: isDark ? \"#FFFFFF\" : \"#000000\", strokeWidth: \"2.5\", strokeLinecap: \"round\" }) }) })\n      ] });\n    case \"mono-bandwidth\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Bandwidth Speed Dial\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-mono font-bold\", children: \"1.2 Gbps\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full h-16 flex items-center justify-center my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 50\", className: \"w-full h-full overflow-visible\", children: [\n            /* @__PURE__ */ jsx(\"path\", { d: \"M 10 50 A 40 40 0 0 1 90 50\", fill: \"none\", stroke: isDark ? \"#262626\" : \"#E5E5E5\", strokeWidth: \"8\", strokeLinecap: \"round\" }),\n            /* @__PURE__ */ jsx(\n              motion.path,\n              {\n                d: \"M 10 50 A 40 40 0 0 1 90 50\",\n                fill: \"none\",\n                stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n                strokeWidth: \"8\",\n                strokeLinecap: \"round\",\n                strokeDasharray: \"125.6\",\n                strokeDashoffset: \"25\",\n                initial: { strokeDashoffset: 125.6 },\n                animate: { strokeDashoffset: 25 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute bottom-1 flex flex-col items-center\", children: /* @__PURE__ */ jsx(\"span\", { className: \"text-lg font-black\", children: \"840 Mbps\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[10px] font-mono opacity-60\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Latency: 1.2ms\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"Packet Loss: 0%\" })\n        ] })\n      ] });\n    case \"mono-server\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Dual Arc Server Gauge\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"Normal\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-around my-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-20 h-20 flex items-center justify-center\", children: [\n            /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n              /* @__PURE__ */ jsx(\"path\", { className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\", d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" }),\n              /* @__PURE__ */ jsx(\n                motion.path,\n                {\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  strokeWidth: \"4\",\n                  strokeDasharray: \"32, 100\",\n                  strokeLinecap: \"round\",\n                  stroke: \"currentColor\",\n                  fill: \"none\",\n                  d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\",\n                  initial: { strokeDasharray: \"0, 100\" },\n                  animate: { strokeDasharray: \"32, 100\" },\n                  transition: { duration: 0.8 }\n                }\n              )\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-black\", children: \"32%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"CPU\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-20 h-20 flex items-center justify-center\", children: [\n            /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n              /* @__PURE__ */ jsx(\"path\", { className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\", d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" }),\n              /* @__PURE__ */ jsx(\n                motion.path,\n                {\n                  className: isDark ? \"text-neutral-400\" : \"text-neutral-600\",\n                  strokeWidth: \"4\",\n                  strokeDasharray: \"64, 100\",\n                  strokeLinecap: \"round\",\n                  stroke: \"currentColor\",\n                  fill: \"none\",\n                  d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\",\n                  initial: { strokeDasharray: \"0, 100\" },\n                  animate: { strokeDasharray: \"64, 100\" },\n                  transition: { duration: 0.8, delay: 0.1 }\n                }\n              )\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-black\", children: \"64%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"RAM\" })\n            ] })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-around text-[10px] font-mono opacity-60\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Nodes: 8 Active\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"Heap: 4.2 GB\" })\n        ] })\n      ] });\n    case \"mono-progress\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Circular Build Ring\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"Building...\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"18\", cy: \"18\", r: \"14\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"3\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"18\",\n                cy: \"18\",\n                r: \"14\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"3\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"88\",\n                strokeDashoffset: \"22\",\n                initial: { strokeDashoffset: 88 },\n                animate: { strokeDashoffset: 22 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xl font-black\", children: \"75%\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-semibold opacity-60\", children: \"Stage 3/4\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] text-center opacity-60\", children: \"Compiling bundle chunks...\" })\n      ] });\n    case \"mono-radar\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Incident Radar Arc\" }),\n          /* @__PURE__ */ jsxs(\"span\", { className: \"text-xs font-bold flex items-center gap-1\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `w-2 h-2 rounded-full animate-ping ${isDark ? \"bg-white\" : \"bg-black\"}` }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Scanning\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full h-16 flex items-center justify-center my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 50\", className: \"w-full h-full overflow-visible\", children: [\n            /* @__PURE__ */ jsx(\"path\", { d: \"M 10 50 A 40 40 0 0 1 90 50\", fill: \"none\", stroke: isDark ? \"#262626\" : \"#E5E5E5\", strokeWidth: \"6\", strokeLinecap: \"round\" }),\n            /* @__PURE__ */ jsx(\n              motion.path,\n              {\n                d: \"M 10 50 A 40 40 0 0 1 90 50\",\n                fill: \"none\",\n                stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n                strokeWidth: \"6\",\n                strokeLinecap: \"round\",\n                strokeDasharray: \"125.6\",\n                strokeDashoffset: \"0\",\n                initial: { strokeDashoffset: 125.6 },\n                animate: { strokeDashoffset: 0 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute bottom-1 flex flex-col items-center\", children: /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-black\", children: \"Zero Criticals\" }) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-60 text-center\", children: \"Monitored 24/7 \\xB7 0 Open Alerts\" })\n      ] });\n    case \"mono-timer-arc\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col items-center justify-between select-none font-sans\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between w-full\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Focus Arc Gauge\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-mono font-bold\", children: \"25:00\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-28 h-28 flex items-center justify-center my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"40\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"8\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"50\",\n                cy: \"50\",\n                r: \"40\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"8\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"251.2\",\n                strokeDashoffset: \"62.8\",\n                initial: { strokeDashoffset: 62.8 },\n                animate: { strokeDashoffset: 62.8 },\n                transition: { duration: 1.2 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xl font-black ${isDark ? \"text-white\" : \"text-black\"}`, children: \"18:42\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-semibold opacity-60 uppercase tracking-widest\", children: \"Remaining\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\n          \"button\",\n          {\n            onClick: (e) => {\n              e.stopPropagation();\n              triggerHaptic(\"medium\");\n              setTimerActive(!timerActive);\n            },\n            className: `px-4 py-1 text-xs font-bold rounded-full border-0 cursor-pointer ${isDark ? \"bg-white text-black\" : \"bg-black text-white\"}`,\n            children: timerActive ? \"Pause\" : \"Start Focus\"\n          }\n        )\n      ] });\n    case \"mono-timer-ring\":\n    default:\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col items-center justify-between select-none font-sans\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between w-full\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Concentric Ring Timer\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"Deep Work\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-28 h-28 flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"42\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"5\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"50\",\n                cy: \"50\",\n                r: \"42\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"5\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"263.8\",\n                strokeDashoffset: \"65.9\",\n                initial: { strokeDashoffset: 263.8 },\n                animate: { strokeDashoffset: 65.9 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"32\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"5\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"50\",\n                cy: \"50\",\n                r: \"32\",\n                className: isDark ? \"text-neutral-400\" : \"text-neutral-600\",\n                strokeWidth: \"5\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"201\",\n                strokeDashoffset: \"40.2\",\n                initial: { strokeDashoffset: 201 },\n                animate: { strokeDashoffset: 40.2 },\n                transition: { duration: 1, delay: 0.2 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-lg font-black ${isDark ? \"text-white\" : \"text-black\"}`, children: \"75%\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-bold opacity-60\", children: \"Goal\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-3 text-[10px] font-semibold opacity-70\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Focus 45m\" }),\n          \" \\xB7 \",\n          /* @__PURE__ */ jsx(\"span\", { children: \"Break 15m\" })\n        ] })\n      ] });\n  }\n};\n\n// overview-bar-scrubber-card.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedMetricCard, { theme, config: { \"id\": \"m-overview-scrubber\", \"label\": \"Overview Bar Scrubber Tooltip Card\", \"interactionType\": \"overview-bar-scrubber-card\", \"description\": \"Monthly diagonal-stripe bar chart card with active scrubber highlight and interactive tooltip bubble.\", \"cliCommand\": \"npx @mova-ui/react add overview-bar-scrubber-card\", \"category\": \"Market & Finance\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/page-transition.json

@@ -1,8 +1,19 @@
 {
   "id": "page-transition",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "page-transition.tsx",
+  "sourcePath": "ui/transitions/page-transition.tsx",
+  "registryFile": "page-transition.json",
+  "exports": [
+    "PageTransition",
+    "PageTransitionProps",
+    "TransitionType"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React, { useEffect, useRef } from 'react';\nimport { motion, Variants } from 'framer-motion';\n\nexport type TransitionType =\n  | 'double-stairs'\n  | 'shutter-stairs'\n  | 'split-stairs'\n  | 'horizontal-split'\n  | 'vertical-split'\n  | 'slash'\n  | 'lattice'\n  | 'curtain-shred'\n  | 'pixel'\n  | 'pixel-wave'\n  | 'pixel-spiral'\n  | 'vortex'\n  | 'cross-fade'\n  | 'expand-grow'\n  | 'push-slide'\n  | 'pop-over'\n  | 'depth-forward'\n  | 'liquid-wave';\n\nexport interface PageTransitionProps {\n  type?: TransitionType;\n  isVisible: boolean;\n  onComplete?: () => void;\n  className?: string;\n}\n\nexport const PageTransition: React.FC<PageTransitionProps> = ({\n  type = 'double-stairs',\n  isVisible,\n  onComplete,\n  className = '',\n}) => {\n  const pathRefs = useRef<(SVGPathElement | null)[]>([]);\n\n  useEffect(() => {\n    if (type !== 'liquid-wave' || !isVisible) return;\n    let animId: number;\n    const numPoints = 12;\n    const numPaths = 3;\n    const startTime = performance.now();\n\n    const delays = Array.from({ length: numPaths }, (_, i) =>\n      Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15)\n    );\n\n    const animateFrame = (now: number) => {\n      const elapsedSec = (now - startTime) / 1000;\n      pathRefs.current.forEach((path, i) => {\n        if (!path) return;\n        const stepX = 100 / (numPoints - 1);\n        const pointsY = delays[i].map((delay) => {\n          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65));\n          const easeProgress =\n            rawProgress < 0.5\n              ? 2 * rawProgress * rawProgress\n              : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;\n          return 100 - easeProgress * 110;\n        });\n\n        let d = `M 0 100 V ${pointsY[0]}`;\n        for (let j = 0; j < numPoints - 1; j++) {\n          const currentX = j * stepX;\n          const nextX = (j + 1) * stepX;\n          const cpX = currentX + stepX * 0.5;\n          d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`;\n        }\n        d += ` V 100 H 0 Z`;\n        path.setAttribute('d', d);\n      });\n\n      if (now - startTime < 1300) {\n        animId = requestAnimationFrame(animateFrame);\n      } else if (onComplete) {\n        onComplete();\n      }\n    };\n\n    animId = requestAnimationFrame(animateFrame);\n    return () => cancelAnimationFrame(animId);\n  }, [isVisible, type, onComplete]);\n\n  if (!isVisible && type !== 'liquid-wave') return null;\n\n  if (type === 'double-stairs') {\n    const COLUMNS = 5;\n    const variants: Variants = {\n      initial: (i: number) => ({ y: i % 2 === 0 ? '-100%' : '100%' }),\n      enter: (i: number) => ({\n        y: '0%',\n        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },\n      }),\n      exit: (i: number) => ({\n        y: i % 2 === 0 ? '100%' : '-100%',\n        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },\n      }),\n    };\n\n    return (\n      <motion.div\n        className={`fixed inset-0 z-50 flex h-screen w-screen pointer-events-none ${className}`}\n        initial=\"initial\"\n        animate={isVisible ? 'enter' : 'exit'}\n        onAnimationComplete={() => {\n          if (onComplete) onComplete();\n        }}\n      >\n        {[...Array(COLUMNS)].map((_, i) => (\n          <motion.div\n            key={i}\n            variants={variants}\n            custom={i}\n            className=\"relative h-full flex-1 bg-neutral-900 border-r border-neutral-800 last:border-r-0\"\n          />\n        ))}\n      </motion.div>\n    );\n  }\n\n  if (type === 'liquid-wave') {\n    return (\n      <svg\n        className={`fixed inset-0 w-full h-full pointer-events-none z-50 ${className}`}\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"none\"\n      >\n        <path ref={(el) => { pathRefs.current[0] = el; }} fill=\"#3f3f46\" style={{ opacity: 0.4 }} />\n        <path ref={(el) => { pathRefs.current[1] = el; }} fill=\"#27272a\" style={{ opacity: 0.75 }} />\n        <path ref={(el) => { pathRefs.current[2] = el; }} fill=\"#09090b\" />\n      </svg>\n    );\n  }\n\n  return (\n    <motion.div\n      className={`fixed inset-0 z-50 bg-neutral-900 pointer-events-none ${className}`}\n      initial={{ opacity: 0 }}\n      animate={isVisible ? { opacity: 1 } : { opacity: 0 }}\n      transition={{ duration: 0.4 }}\n    />\n  );\n};\n"
 }

package/registry/page-turn-curl.json

@@ -0,0 +1,15 @@
+{
+  "id": "page-turn-curl",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "page-turn-curl.tsx",
+  "sourcePath": "components/css-animations/whimsical/YuiPhysicsExperiments.tsx",
+  "registryFile": "page-turn-curl.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/YuiPhysicsExperiments.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/YuiPhysicsExperiments.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction PageTurnCurl({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes page_curl_rise {\n          0%, 100% { transform: translateY(60px) rotateX(45deg); opacity: 0; border-radius: 4px 4px 28px 28px; }\n          40%, 75% { transform: translateY(0) rotateX(0deg); opacity: 1; border-radius: 16px; }\n        }\n        .page-sheet {\n          transform-origin: bottom center;\n          animation: page_curl_rise 3s cubic-bezier(0.78, 0, 0.2, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[100px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: `absolute w-[80px] h-[60px] rounded-2xl border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-white border-[#d2d2d7]\"}`, children: /* @__PURE__ */ jsx(\"div\", { className: \"absolute bottom-2.5 left-3 w-8 h-1.5 rounded-full bg-neutral-600\" }) }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute w-[80px] h-[60px] page-sheet bg-blue-600 shadow-lg flex flex-col items-center justify-center gap-1.5 p-2\", children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-10 h-2 rounded-full bg-white/90\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 h-1.5 rounded-full bg-white/60\" })\n          ] })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/page-turn-curl.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(PageTurnCurl, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/password-toggle.json

@@ -0,0 +1,19 @@
+{
+  "id": "password-toggle",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "password-toggle.tsx",
+  "registryFile": "password-toggle.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './password-toggle';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/forms/AnimatedFormElement.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Eye, EyeOff, Search, Check, Upload, ChevronDown, X, Loader2 } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/forms/AnimatedFormElement.tsx\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedFormElement = ({ config, theme }) => {\n  const [val, setVal] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n  const [showPassword, setShowPassword] = useState(false);\n  const [isChecked, setIsChecked] = useState(false);\n  const [radioSelected, setRadioSelected] = useState(false);\n  const [shakeKey, setShakeKey] = useState(0);\n  const [hasError, setHasError] = useState(false);\n  const [isSuccess, setIsSuccess] = useState(false);\n  const [selectOpen, setSelectOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState(\"React\");\n  const [chips, setChips] = useState([\"Next.js\", \"Tailwind\", \"Motion\"]);\n  const [otp, setOtp] = useState([\"\", \"\", \"\", \"\"]);\n  const [sliderVal, setSliderVal] = useState(65);\n  const [submitState, setSubmitState] = useState(\"idle\");\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const triggerErrorShake = () => {\n    triggerHaptic(\"error\");\n    setHasError(true);\n    setShakeKey((prev) => prev + 1);\n    setTimeout(() => setHasError(false), 800);\n  };\n  const handleFormSubmit = () => {\n    triggerHaptic(\"medium\");\n    setSubmitState(\"loading\");\n    setTimeout(() => {\n      setSubmitState(\"success\");\n      triggerHaptic(\"success\");\n      setTimeout(() => setSubmitState(\"idle\"), 2e3);\n    }, 1200);\n  };\n  return /* @__PURE__ */ jsx(\"div\", { className: \"relative flex items-center justify-center w-full h-full p-4 overflow-hidden select-none\", children: (() => {\n    switch (config.interactionType) {\n      case \"floating-label-input\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[240px]\", children: [\n          /* @__PURE__ */ jsx(\n            motion.label,\n            {\n              animate: {\n                y: isFocused || val ? -24 : 0,\n                scale: isFocused || val ? 0.85 : 1,\n                color: isFocused ? isDark ? \"#3b82f6\" : \"#2563eb\" : isDark ? \"#9ca3af\" : \"#6b7280\"\n              },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"absolute left-3 top-2.5 origin-left pointer-events-none text-sm font-medium\",\n              children: \"Email Address\"\n            }\n          ),\n          /* @__PURE__ */ jsx(\n            \"input\",\n            {\n              type: \"text\",\n              value: val,\n              onFocus: () => setIsFocused(true),\n              onBlur: () => setIsFocused(false),\n              onChange: (e) => setVal(e.target.value),\n              className: `w-full px-3 py-2 pt-3 rounded-xl border text-sm outline-none transition-colors ${isDark ? \"bg-neutral-900 border-neutral-700 text-white focus:border-blue-500\" : \"bg-white border-neutral-300 text-black focus:border-blue-600\"}`\n            }\n          )\n        ] });\n      case \"input-focus-glow\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full max-w-[240px]\", children: /* @__PURE__ */ jsx(\n          \"input\",\n          {\n            type: \"text\",\n            placeholder: \"Focus for glow...\",\n            onFocus: () => setIsFocused(true),\n            onBlur: () => setIsFocused(false),\n            className: `w-full px-4 py-2.5 rounded-xl border text-sm outline-none transition-all duration-300 ${isDark ? \"bg-neutral-900 border-neutral-700 text-white focus:border-indigo-500\" : \"bg-white border-neutral-300 text-black focus:border-indigo-500\"} ${isFocused ? \"ring-4 ring-indigo-500/30 shadow-lg shadow-indigo-500/20\" : \"\"}`\n          }\n        ) });\n      case \"password-toggle\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[240px]\", children: [\n          /* @__PURE__ */ jsx(\n            \"input\",\n            {\n              type: showPassword ? \"text\" : \"password\",\n              defaultValue: \"secretpass123\",\n              className: `w-full pl-3 pr-10 py-2.5 rounded-xl border text-sm outline-none ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => {\n                triggerHaptic(\"light\");\n                setShowPassword(!showPassword);\n              },\n              className: \"absolute right-2.5 top-2.5 text-neutral-400 hover:text-neutral-200 cursor-pointer border-0 bg-transparent\",\n              children: /* @__PURE__ */ jsx(motion.div, { animate: { scale: showPassword ? 1.1 : 1, rotate: showPassword ? 0 : -10 }, children: showPassword ? /* @__PURE__ */ jsx(Eye, { className: \"w-4 h-4 text-indigo-400\" }) : /* @__PURE__ */ jsx(EyeOff, { className: \"w-4 h-4\" }) })\n            }\n          )\n        ] });\n      case \"search-expand\":\n        return /* @__PURE__ */ jsxs(\n          motion.div,\n          {\n            animate: { width: isFocused ? 240 : 160 },\n            transition: { type: \"spring\", stiffness: 400, damping: 28 },\n            className: `relative flex items-center rounded-full border px-3 py-1.5 transition-colors ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`,\n            children: [\n              /* @__PURE__ */ jsx(Search, { className: \"w-4 h-4 text-neutral-400 shrink-0 mr-2\" }),\n              /* @__PURE__ */ jsx(\n                \"input\",\n                {\n                  type: \"text\",\n                  placeholder: \"Search components...\",\n                  onFocus: () => setIsFocused(true),\n                  onBlur: () => setIsFocused(false),\n                  className: \"w-full text-xs bg-transparent border-0 outline-none\"\n                }\n              )\n            ]\n          }\n        );\n      case \"checkbox-draw\":\n        return /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: () => {\n              triggerHaptic(\"light\");\n              setIsChecked(!isChecked);\n            },\n            className: \"flex items-center gap-3 cursor-pointer border-0 bg-transparent\",\n            children: [\n              /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { scale: isChecked ? [1, 1.15, 1] : 1 },\n                  className: `w-6 h-6 rounded-lg border flex items-center justify-center transition-colors ${isChecked ? \"bg-emerald-500 border-emerald-500 text-white\" : isDark ? \"border-neutral-600 bg-neutral-900\" : \"border-neutral-300 bg-white\"}`,\n                  children: isChecked && /* @__PURE__ */ jsx(\n                    motion.svg,\n                    {\n                      className: \"w-4 h-4 text-white\",\n                      viewBox: \"0 0 24 24\",\n                      fill: \"none\",\n                      stroke: \"currentColor\",\n                      strokeWidth: \"3.5\",\n                      strokeLinecap: \"round\",\n                      strokeLinejoin: \"round\",\n                      children: /* @__PURE__ */ jsx(\n                        motion.path,\n                        {\n                          d: \"M20 6L9 17l-5-5\",\n                          initial: { pathLength: 0 },\n                          animate: { pathLength: 1 },\n                          transition: { duration: 0.2 }\n                        }\n                      )\n                    }\n                  )\n                }\n              ),\n              /* @__PURE__ */ jsx(\"span\", { className: `text-sm font-medium ${isDark ? \"text-white\" : \"text-black\"}`, children: \"Accept terms\" })\n            ]\n          }\n        );\n      case \"radio-scale\":\n        return /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: () => {\n              triggerHaptic(\"light\");\n              setRadioSelected(!radioSelected);\n            },\n            className: \"flex items-center gap-3 cursor-pointer border-0 bg-transparent\",\n            children: [\n              /* @__PURE__ */ jsx(\"div\", { className: `w-6 h-6 rounded-full border flex items-center justify-center ${radioSelected ? \"border-indigo-500\" : isDark ? \"border-neutral-600 bg-neutral-900\" : \"border-neutral-300 bg-white\"}`, children: radioSelected && /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25 },\n                  className: \"w-3.5 h-3.5 rounded-full bg-indigo-500\"\n                }\n              ) }),\n              /* @__PURE__ */ jsx(\"span\", { className: `text-sm font-medium ${isDark ? \"text-white\" : \"text-black\"}`, children: \"Option selected\" })\n            ]\n          }\n        );\n      case \"error-shake\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col items-center gap-2 w-full max-w-[220px]\", children: [\n          /* @__PURE__ */ jsx(\n            motion.input,\n            {\n              animate: hasError ? { x: [-10, 10, -8, 8, -4, 4, 0] } : { x: 0 },\n              transition: { duration: 0.5 },\n              type: \"text\",\n              placeholder: \"Click button to test error\",\n              className: `w-full px-3 py-2 rounded-xl border text-xs outline-none ${hasError ? \"border-red-500 text-red-500 bg-red-500/10\" : isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`\n            },\n            shakeKey\n          ),\n          /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: triggerErrorShake,\n              className: \"px-3 py-1 text-xs font-semibold rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 cursor-pointer border-0\",\n              children: \"Trigger Error Shake\"\n            }\n          )\n        ] });\n      case \"success-check\":\n        return /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: () => {\n              triggerHaptic(\"success\");\n              setIsSuccess(!isSuccess);\n            },\n            className: `relative px-4 py-2.5 rounded-2xl border flex items-center gap-2 text-sm font-semibold transition-all duration-300 cursor-pointer ${isSuccess ? \"bg-emerald-500/20 text-emerald-400 border-emerald-500/40\" : isDark ? \"bg-neutral-800 text-neutral-300 border-white/10\" : \"bg-neutral-100 text-neutral-700 border-neutral-300\"}`,\n            children: [\n              /* @__PURE__ */ jsx(\"span\", { children: isSuccess ? \"Verified\" : \"Click to Verify\" }),\n              /* @__PURE__ */ jsx(AnimatePresence, { children: isSuccess && /* @__PURE__ */ jsx(\n                motion.svg,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  exit: { scale: 0 },\n                  className: \"w-4 h-4 text-emerald-400\",\n                  viewBox: \"0 0 24 24\",\n                  fill: \"none\",\n                  stroke: \"currentColor\",\n                  strokeWidth: \"3\",\n                  children: /* @__PURE__ */ jsx(\n                    motion.path,\n                    {\n                      d: \"M20 6L9 17l-5-5\",\n                      initial: { pathLength: 0 },\n                      animate: { pathLength: 1 },\n                      transition: { duration: 0.3 }\n                    }\n                  )\n                },\n                \"check\"\n              ) })\n            ]\n          }\n        );\n      case \"select-dropdown\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[200px]\", children: [\n          /* @__PURE__ */ jsxs(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => {\n                triggerHaptic(\"light\");\n                setSelectOpen(!selectOpen);\n              },\n              className: `w-full flex items-center justify-between px-3 py-2 rounded-xl border text-xs font-medium cursor-pointer ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`,\n              children: [\n                /* @__PURE__ */ jsx(\"span\", { children: selectedOption }),\n                /* @__PURE__ */ jsx(ChevronDown, { className: `w-3.5 h-3.5 transition-transform ${selectOpen ? \"rotate-180\" : \"\"}` })\n              ]\n            }\n          ),\n          /* @__PURE__ */ jsx(AnimatePresence, { children: selectOpen && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 0.95, y: -6 },\n              animate: { opacity: 1, scale: 1, y: 4 },\n              exit: { opacity: 0, scale: 0.95, y: -6 },\n              className: `absolute left-0 right-0 z-30 p-1 rounded-xl border shadow-xl flex flex-col gap-0.5 ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-black\"}`,\n              children: [\"React\", \"Vue\", \"Svelte\", \"Solid\"].map((opt) => /* @__PURE__ */ jsx(\n                \"button\",\n                {\n                  type: \"button\",\n                  onClick: () => {\n                    setSelectedOption(opt);\n                    setSelectOpen(false);\n                  },\n                  className: `w-full text-left px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer border-0 ${selectedOption === opt ? isDark ? \"bg-white/10 text-white\" : \"bg-neutral-100 text-black\" : isDark ? \"hover:bg-white/5 text-neutral-400\" : \"hover:bg-neutral-50 text-neutral-600\"}`,\n                  children: opt\n                },\n                opt\n              ))\n            }\n          ) })\n        ] });\n      case \"multi-select-chips\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-wrap gap-1.5 max-w-[240px]\", children: /* @__PURE__ */ jsx(AnimatePresence, { children: chips.map((chip) => /* @__PURE__ */ jsxs(\n          motion.span,\n          {\n            initial: { scale: 0, opacity: 0 },\n            animate: { scale: 1, opacity: 1 },\n            exit: { scale: 0, opacity: 0 },\n            className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border ${isDark ? \"bg-indigo-500/20 text-indigo-300 border-indigo-500/30\" : \"bg-indigo-100 text-indigo-700 border-indigo-200\"}`,\n            children: [\n              chip,\n              /* @__PURE__ */ jsx(\n                \"button\",\n                {\n                  type: \"button\",\n                  onClick: () => {\n                    triggerHaptic(\"light\");\n                    setChips(chips.filter((c) => c !== chip));\n                  },\n                  className: \"hover:opacity-75 cursor-pointer border-0 bg-transparent p-0\",\n                  children: /* @__PURE__ */ jsx(X, { className: \"w-3 h-3\" })\n                }\n              )\n            ]\n          },\n          chip\n        )) }) });\n      case \"textarea-auto-grow\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"w-full max-w-[240px]\", children: /* @__PURE__ */ jsx(\n          \"textarea\",\n          {\n            rows: 2,\n            placeholder: \"Type to test auto-grow...\",\n            className: `w-full px-3 py-2 rounded-xl border text-xs outline-none resize-none transition-all ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`,\n            onInput: (e) => {\n              const target = e.target;\n              target.style.height = \"auto\";\n              target.style.height = `${target.scrollHeight}px`;\n            }\n          }\n        ) });\n      case \"otp-input\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2\", children: [0, 1, 2, 3].map((idx) => /* @__PURE__ */ jsx(\n          motion.input,\n          {\n            id: `otp-${idx}`,\n            type: \"text\",\n            maxLength: 1,\n            value: otp[idx],\n            whileFocus: { scale: 1.1 },\n            onChange: (e) => {\n              const newOtp = [...otp];\n              newOtp[idx] = e.target.value;\n              setOtp(newOtp);\n              if (e.target.value && idx < 3) {\n                const next = document.getElementById(`otp-${idx + 1}`);\n                next?.focus();\n              }\n            },\n            className: `w-10 h-12 text-center text-lg font-bold rounded-xl border outline-none ${isDark ? \"bg-neutral-900 border-neutral-700 text-white focus:border-indigo-500\" : \"bg-white border-neutral-300 text-black focus:border-indigo-500\"}`\n          },\n          idx\n        )) });\n      case \"file-upload-dropzone\":\n        return /* @__PURE__ */ jsxs(\n          motion.div,\n          {\n            whileHover: { scale: 1.02 },\n            className: `w-full max-w-[240px] p-4 rounded-2xl border-2 border-dashed flex flex-col items-center justify-center gap-1 cursor-pointer transition-colors ${isDark ? \"border-neutral-700 hover:border-indigo-500 bg-neutral-900/50\" : \"border-neutral-300 hover:border-indigo-500 bg-neutral-50\"}`,\n            children: [\n              /* @__PURE__ */ jsx(Upload, { className: \"w-6 h-6 text-indigo-500 animate-bounce\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: `text-xs font-semibold ${isDark ? \"text-neutral-300\" : \"text-neutral-700\"}`, children: \"Drop files here\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] text-neutral-400\", children: \"SVG, PNG, JPG (max 5MB)\" })\n            ]\n          }\n        );\n      case \"range-slider\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[220px] flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute -top-7 px-2 py-0.5 rounded-lg bg-indigo-500 text-white text-[11px] font-bold shadow-md\", children: [\n            sliderVal,\n            \"%\"\n          ] }),\n          /* @__PURE__ */ jsx(\n            \"input\",\n            {\n              type: \"range\",\n              min: \"0\",\n              max: \"100\",\n              value: sliderVal,\n              onChange: (e) => setSliderVal(Number(e.target.value)),\n              className: \"w-full accent-indigo-500 cursor-pointer\"\n            }\n          )\n        ] });\n      case \"form-submit-button\":\n        return /* @__PURE__ */ jsx(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: handleFormSubmit,\n            className: `px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer border-0 shadow-lg ${submitState === \"success\" ? \"bg-emerald-500 text-white\" : submitState === \"loading\" ? \"bg-neutral-700 text-neutral-300\" : \"bg-indigo-600 text-white hover:bg-indigo-500\"}`,\n            children: submitState === \"loading\" ? /* @__PURE__ */ jsxs(Fragment, { children: [\n              /* @__PURE__ */ jsx(Loader2, { className: \"w-4 h-4 animate-spin text-white\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Submitting...\" })\n            ] }) : submitState === \"success\" ? /* @__PURE__ */ jsxs(Fragment, { children: [\n              /* @__PURE__ */ jsx(Check, { className: \"w-4 h-4 text-white\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Submitted!\" })\n            ] }) : /* @__PURE__ */ jsx(\"span\", { children: \"Submit Form\" })\n          }\n        );\n      default:\n        return null;\n    }\n  })() });\n};\n\n// password-toggle.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedFormElement, { theme, config: { \"id\": \"frm3\", \"label\": \"Password Toggle\", \"interactionType\": \"password-toggle\", \"description\": \"Eye icon morphs smoothly to reveal or hide password characters.\", \"cliCommand\": \"npx @mova-ui/react add password-toggle\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/pendulum-bubble-level.json

@@ -0,0 +1,15 @@
+{
+  "id": "pendulum-bubble-level",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "pendulum-bubble-level.tsx",
+  "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
+  "registryFile": "pendulum-bubble-level.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction PendulumBubbleLevel({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes bubble_level_shift {\n          0%, 100% { transform: translateX(0); }\n          25% { transform: translateX(-24px); }\n          50% { transform: translateX(24px); }\n          75% { transform: translateX(-8px); }\n        }\n        .bubble-core {\n          animation: bubble_level_shift 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[110px] h-[28px] rounded-full border-2 border-neutral-700 bg-neutral-900 flex items-center justify-center px-1\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute w-[2px] h-full bg-neutral-600 left-1/2 -translate-x-1/2\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-5 h-5 rounded-full bg-blue-400 bubble-core shadow-md\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/pendulum-bubble-level.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(PendulumBubbleLevel, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/pendulum.json

@@ -1,8 +1,17 @@
 {
   "id": "pendulum",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "pendulum.tsx",
+  "sourcePath": "ui/loading/pendulum.tsx",
+  "registryFile": "pendulum.json",
+  "exports": [
+    "Pendulum"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const Pendulum = () => {\n  return (\n    <div className=\"relative w-16 h-12 flex items-start justify-center\">\n      <div className=\"w-full h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full rounded-b-none absolute top-0\" />\n      <motion.div\n        className=\"absolute top-0 w-1 bg-zinc-800 dark:bg-white origin-top flex flex-col items-center\"\n        animate={{ rotate: [-45, 45, -45] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      >\n        <div className=\"w-1 h-8 bg-zinc-800 dark:bg-white\" />\n        <div className=\"w-4 h-4 bg-zinc-800 dark:bg-white rounded-full\" />\n      </motion.div>\n    </div>\n  );\n};\n"
 }

package/registry/perspective-flip-stage.json

@@ -0,0 +1,18 @@
+{
+  "id": "perspective-flip-stage",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "perspective-flip-stage.tsx",
+  "registryFile": "perspective-flip-stage.json",
+  "exports": [
+    "PerspectiveCardStage"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import { PerspectiveCardStage } from './perspective-flip-stage';\n\nexport default function Demo() {\n  return <PerspectiveCardStage />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const PerspectiveCardStage = ({ isVisible }: { isVisible: boolean }) => (\n  <div className=\"fixed inset-0 z-50 pointer-events-none [perspective:1000px] flex items-center justify-center\">\n    <motion.div\n      initial={{ rotateX: 90, scale: 0.85, opacity: 0 }}\n      animate={isVisible ? { rotateX: 0, scale: 1, opacity: 1 } : { rotateX: -90, scale: 0.85, opacity: 0 }}\n      transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}\n      className=\"w-full h-full bg-[#181818] border border-white/10 shadow-2xl\"\n    />\n  </div>\n);"
+}

package/registry/perspective-flip.json

@@ -0,0 +1,18 @@
+{
+  "id": "perspective-flip",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "perspective-flip.tsx",
+  "registryFile": "perspective-flip.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './perspective-flip';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/perspective-flip.tsx\nimport { motion } from \"framer-motion\";\n\n// src/components/css-animations/ScrambleHover.tsx\nimport { useState, useEffect, useRef, useCallback } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction ScrambleHover({\n  text,\n  scrambleSpeed = 40,\n  maxIterations = 10,\n  sequential = false,\n  revealDirection = \"start\",\n  useOriginalCharsOnly = true,\n  className = \"\",\n  characters = \"ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmno pqrstuvwxyz 0123456789 !@#$%^&*()_+\",\n  scrambledClassName = \"\"\n}) {\n  const [displayText, setDisplayText] = useState(text);\n  const [isScrambling, setIsScrambling] = useState(false);\n  const intervalRef = useRef(null);\n  const triggerScramble = useCallback(() => {\n    let iteration = 0;\n    const maxIterationsTotal = sequential ? revealDirection === \"center\" ? Math.ceil(text.length / 2) : text.length : maxIterations;\n    setIsScrambling(true);\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    intervalRef.current = window.setInterval(() => {\n      setDisplayText(() => {\n        const nextText = text.split(\"\").map((char, index) => {\n          if (char === \" \") return \" \";\n          if (sequential) {\n            let revealed = false;\n            if (revealDirection === \"start\") {\n              revealed = index < iteration;\n            } else if (revealDirection === \"end\") {\n              revealed = index >= text.length - iteration;\n            } else if (revealDirection === \"center\") {\n              const center = Math.floor(text.length / 2);\n              revealed = Math.abs(index - center) <= iteration;\n            }\n            if (revealed) return text[index];\n          } else {\n            if (iteration >= maxIterations) {\n              return text[index];\n            }\n          }\n          if (useOriginalCharsOnly) {\n            const availableChars = text.replace(/\\s/g, \"\");\n            const randomChar = availableChars[Math.floor(Math.random() * availableChars.length)];\n            return randomChar || text[index];\n          } else {\n            return characters[Math.floor(Math.random() * characters.length)];\n          }\n        }).join(\"\");\n        return nextText;\n      });\n      iteration++;\n      if (!sequential && iteration > maxIterations || sequential && iteration >= maxIterationsTotal) {\n        if (intervalRef.current) clearInterval(intervalRef.current);\n        setDisplayText(text);\n        setIsScrambling(false);\n      }\n    }, scrambleSpeed);\n  }, [text, scrambleSpeed, maxIterations, sequential, revealDirection, useOriginalCharsOnly, characters]);\n  useEffect(() => {\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, []);\n  return /* @__PURE__ */ jsx(\n    \"span\",\n    {\n      className: `cursor-pointer transition-colors duration-150 ${isScrambling && scrambledClassName ? scrambledClassName : className}`,\n      onMouseEnter: triggerScramble,\n      children: displayText\n    }\n  );\n}\n\n// src/components/css-animations/FocusBlur.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nfunction FocusBlurDemo({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsxs2(\"div\", { className: \"flex w-full flex-col items-center gap-6 font-sans\", children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: `\n        .blur-group:has(.blur-target:hover) .blur-target:not(:hover) {\n          filter: blur(4px);\n          opacity: 0.35;\n        }\n        .blur-target {\n          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n      ` }),\n    /* @__PURE__ */ jsxs2(\"div\", { className: `w-full rounded-[24px] p-6 sm:p-8 border flex flex-col items-center text-center gap-4 transition-colors duration-300 ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-white border-neutral-200 shadow-sm\"}`, children: [\n      /* @__PURE__ */ jsx2(\"span\", { className: \"text-[11px] font-bold tracking-widest uppercase text-indigo-400\", children: \"CSS :has() Parent Selector\" }),\n      /* @__PURE__ */ jsxs2(\"div\", { className: \"flex flex-wrap justify-center gap-x-3 text-xl sm:text-3xl font-bold blur-group cursor-default py-4\", children: [\n        /* @__PURE__ */ jsx2(\"span\", { className: theme === \"dark\" ? \"text-neutral-500\" : \"text-neutral-400\", children: \"Explore\" }),\n        [\"Animations,\", \"Transitions,\", \"Physics,\", \"Micro-UI\"].map((word) => /* @__PURE__ */ jsx2(\n          \"span\",\n          {\n            className: `blur-target cursor-pointer hover:text-indigo-400 transition-colors ${theme === \"dark\" ? \"text-white\" : \"text-neutral-900\"}`,\n            children: word\n          },\n          word\n        ))\n      ] }),\n      /* @__PURE__ */ jsx2(\"p\", { className: `text-xs ${theme === \"dark\" ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Hovering over any word automatically blurs and softens its peer sibling elements using pure CSS.\" })\n    ] })\n  ] });\n}\n\n// src/components/perspective-flip.tsx\nimport { jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  const previewLoopTrigger = 0;\n  const renderLiveTextEffect = (id) => {\n    switch (id) {\n      case \"scramble-text\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"w-full flex items-center justify-center px-4 text-center\", children: /* @__PURE__ */ jsx3(\"div\", { className: `text-base sm:text-lg font-bold font-mono ${theme === \"dark\" ? \"text-indigo-400\" : \"text-indigo-600\"}`, children: /* @__PURE__ */ jsx3(ScrambleHover, { text: \"DECODE_REACT\" }) }) });\n      case \"focus-blur\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"w-full flex items-center justify-center\", children: /* @__PURE__ */ jsx3(FocusBlurDemo, { theme }) });\n      case \"wave-reveal\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"flex items-center justify-center gap-1 font-bold text-base select-none\", children: \"ELEVATE\".split(\"\").map((char, i) => /* @__PURE__ */ jsx3(\n          motion.span,\n          {\n            animate: { y: [0, -8, 0], color: theme === \"dark\" ? [\"#fff\", \"#818cf8\", \"#fff\"] : [\"#111\", \"#6366f1\", \"#111\"] },\n            transition: { repeat: Infinity, duration: 1.6, delay: i * 0.12 },\n            className: \"cursor-pointer\",\n            children: char\n          },\n          i\n        )) });\n      case \"gradient-shimmer\":\n        return /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx3(\"style\", { children: `\n              @keyframes text_shimmer {\n                0% { background-position: -200% center; }\n                100% { background-position: 200% center; }\n              }\n              .shimmer-text {\n                background: linear-gradient(90deg, ${theme === \"dark\" ? \"#555 0%, #fff 50%, #555 100%\" : \"#888 0%, #000 50%, #888 100%\"});\n                background-size: 200% auto;\n                color: transparent;\n                -webkit-background-clip: text;\n                background-clip: text;\n                animation: text_shimmer 3s linear infinite;\n              }\n            ` }),\n          /* @__PURE__ */ jsx3(\"span\", { className: \"text-xl sm:text-2xl font-black tracking-widest shimmer-text select-none uppercase\", children: \"SHIMMER_FX\" })\n        ] });\n      case \"typewriter-cursor\":\n        return /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center justify-center font-mono font-bold text-sm sm:text-base\", children: [\n          /* @__PURE__ */ jsx3(\"style\", { children: `\n              @keyframes blink_cursor {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0; }\n              }\n              .blink-bar { animation: blink_cursor 0.9s infinite; }\n            ` }),\n          /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-neutral-200\" : \"text-neutral-900\", children: \"npx @mova-ui/react add\" }),\n          /* @__PURE__ */ jsx3(\"span\", { className: `w-2 h-4 ml-1 blink-bar ${theme === \"dark\" ? \"bg-indigo-400\" : \"bg-indigo-600\"}` })\n        ] });\n      case \"perspective-flip\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"flex items-center justify-center h-8 overflow-hidden select-none font-bold text-sm sm:text-base\", children: /* @__PURE__ */ jsxs3(\n          motion.div,\n          {\n            animate: { y: [0, -32, -64, 0] },\n            transition: { repeat: Infinity, duration: 4.5, times: [0, 0.33, 0.66, 1], ease: \"easeInOut\" },\n            className: \"flex flex-col items-center gap-4 text-center\",\n            children: [\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-indigo-400\" : \"text-indigo-600\", children: \"FAST\" }),\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-emerald-400\" : \"text-emerald-600\", children: \"FLUID\" }),\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-rose-400\" : \"text-rose-600\", children: \"PREMIUM\" })\n            ]\n          }\n        ) });\n      default:\n        return null;\n    }\n  };\n  return renderLiveTextEffect(\"perspective-flip\");\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/perspective-layout-switcher.json

@@ -0,0 +1,18 @@
+{
+  "id": "perspective-layout-switcher",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "perspective-layout-switcher.tsx",
+  "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
+  "registryFile": "perspective-layout-switcher.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/yui-components/RedesignedUiTrios.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  Bookmark,\n  Check,\n  ChevronUp,\n  ChevronDown,\n  Layers,\n  LayoutGrid,\n  Info\n} from \"lucide-react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction PerspectiveLayoutSwitcher({ theme = \"dark\" }) {\n  const [layout, setLayout] = useState(\"grid\");\n  return /* @__PURE__ */ jsxs(\n    motion.button,\n    {\n      whileTap: { scale: 0.94 },\n      onClick: () => setLayout(layout === \"grid\" ? \"stack\" : \"grid\"),\n      className: `flex items-center gap-2 px-4 py-2 rounded-2xl border text-xs font-semibold cursor-pointer transition-colors ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n      children: [\n        /* @__PURE__ */ jsx(\n          motion.div,\n          {\n            initial: { rotate: -45, scale: 0.8 },\n            animate: { rotate: 0, scale: 1 },\n            transition: { duration: 0.2 },\n            children: layout === \"grid\" ? /* @__PURE__ */ jsx(LayoutGrid, { className: \"w-4 h-4 text-blue-500\" }) : /* @__PURE__ */ jsx(Layers, { className: \"w-4 h-4 text-blue-500\" })\n          },\n          layout\n        ),\n        /* @__PURE__ */ jsx(\"span\", { children: layout === \"grid\" ? \"Grid View\" : \"Stack View\" })\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/perspective-layout-switcher.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(PerspectiveLayoutSwitcher, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/physics-dock.json

@@ -0,0 +1,17 @@
+{
+  "id": "physics-dock",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "physics-dock.tsx",
+  "sourcePath": "components/css-animations/Dock.tsx",
+  "registryFile": "physics-dock.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/Dock.tsx\nimport { useState, useRef } from \"react\";\nimport { Reorder, useMotionValue, useSpring, useTransform } from \"framer-motion\";\nimport { jsx } from \"react/jsx-runtime\";\nvar SOLID_COLORS = [\n  \"#2563eb\",\n  // Blue 600\n  \"#3b82f6\",\n  // Blue 500\n  \"#60a5fa\",\n  // Blue 400\n  \"#1d4ed8\",\n  // Blue 700\n  \"#0284c7\",\n  // Sky 600\n  \"#4f46e5\",\n  // Indigo 600\n  \"#6366f1\"\n  // Indigo 500\n];\nfunction DockItem({\n  index,\n  color,\n  mouseX,\n  theme = \"dark\"\n}) {\n  const ref = useRef(null);\n  const distance = useTransform(mouseX, (val) => {\n    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n    return val - bounds.x - bounds.width / 2;\n  });\n  const sizeSync = useTransform(distance, [-80, 0, 80], [28, 44, 28]);\n  const size = useSpring(sizeSync, { mass: 0.1, stiffness: 220, damping: 16 });\n  return /* @__PURE__ */ jsx(\n    Reorder.Item,\n    {\n      value: color,\n      id: color,\n      className: \"rounded-lg cursor-grab active:cursor-grabbing origin-bottom shrink-0 select-none\",\n      style: { width: size, height: size },\n      children: /* @__PURE__ */ jsx(\n        \"div\",\n        {\n          ref,\n          className: `flex h-full w-full items-center justify-center rounded-[10px] p-0.5 shadow-sm transition-all duration-300 ${theme === \"dark\" ? \"border border-neutral-700/80 bg-neutral-800 hover:bg-neutral-700\" : \"border border-neutral-200 bg-white hover:bg-neutral-50 shadow-sm\"}`,\n          children: /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: \"h-full w-full rounded-[8px] pointer-events-none transition-transform duration-200\",\n              style: { backgroundColor: color }\n            }\n          )\n        }\n      )\n    }\n  );\n}\nfunction Dock({ theme = \"dark\", className = \"\" }) {\n  const [items, setItems] = useState(SOLID_COLORS);\n  const mouseX = useMotionValue(Infinity);\n  return /* @__PURE__ */ jsx(\n    \"div\",\n    {\n      className: `box-content flex h-[32px] w-fit items-end gap-1 rounded-xl p-1.5 transition-all duration-300 ${theme === \"dark\" ? \"border border-neutral-800 bg-[#141414] shadow-md shadow-black/30\" : \"border border-neutral-200 bg-neutral-100 shadow-sm\"} ${className}`,\n      onMouseMove: (e) => mouseX.set(e.pageX),\n      onMouseLeave: () => mouseX.set(Infinity),\n      children: /* @__PURE__ */ jsx(\n        Reorder.Group,\n        {\n          axis: \"x\",\n          values: items,\n          onReorder: setItems,\n          className: \"flex h-full items-end gap-[5px]\",\n          children: items.map((color, idx) => /* @__PURE__ */ jsx(\n            DockItem,\n            {\n              index: idx,\n              color,\n              mouseX,\n              theme\n            },\n            color\n          ))\n        }\n      )\n    }\n  );\n}\n\n// catalog/registry-bindings/physics-dock.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(Dock, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/pill-tabs.json

@@ -0,0 +1,19 @@
+{
+  "id": "pill-tabs",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "pill-tabs.tsx",
+  "registryFile": "pill-tabs.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './pill-tabs';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/toggles/AnimatedToggle.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Sun, Moon, Lock, Unlock, Bookmark, Heart, ThumbsDown, Repeat } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/toggles/AnimatedToggle.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedToggle = ({ config, theme }) => {\n  const [isOn, setIsOn] = useState(false);\n  const [isInit, setIsInit] = useState(false);\n  const [pillTab, setPillTab] = useState(\"Daily\");\n  const [likeCount, setLikeCount] = useState(42);\n  const [repostCount, setRepostCount] = useState(18);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const handleToggle = () => {\n    if (!isInit) setIsInit(true);\n    triggerHaptic(\"medium\");\n    setIsOn(!isOn);\n  };\n  switch (config.interactionType) {\n    case \"double-bounce-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          \"data-on\": isOn ? \"true\" : \"false\",\n          className: `t-toggle ${isInit ? \"is-init\" : \"\"} relative w-14 h-8 rounded-full p-1 cursor-pointer border-0 transition-colors ${isOn ? \"bg-emerald-500\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\"span\", { className: \"t-toggle-thumb block w-6 h-6 bg-white rounded-full shadow-md pointer-events-none\" })\n        }\n      );\n    case \"solid-switch\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-14 h-8 rounded-full p-1 transition-colors duration-200 cursor-pointer border-0 ${isOn ? isDark ? \"bg-white text-black\" : \"bg-black text-white\" : isDark ? \"bg-neutral-800 border border-white/10\" : \"bg-neutral-200 border border-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 24 : 0 },\n              transition: { duration: 0.15, ease: \"easeOut\" },\n              className: `w-6 h-6 rounded-full shadow-sm ${isOn ? isDark ? \"bg-black\" : \"bg-white\" : isDark ? \"bg-white\" : \"bg-black\"}`\n            }\n          )\n        }\n      );\n    case \"rectangle-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-14 h-8 rounded-md p-1 transition-colors duration-200 cursor-pointer border ${isOn ? \"bg-blue-600 border-blue-500\" : isDark ? \"bg-neutral-900 border-neutral-700\" : \"bg-neutral-100 border-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 24 : 0 },\n              transition: { type: \"spring\", stiffness: 500, damping: 30 },\n              className: \"w-5 h-5 bg-white rounded-sm shadow-md\"\n            }\n          )\n        }\n      );\n    case \"circle-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-indigo-500\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0 },\n              transition: { type: \"spring\", stiffness: 450, damping: 25 },\n              className: \"w-7 h-7 bg-white rounded-full shadow-md\"\n            }\n          )\n        }\n      );\n    case \"bookmark-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `p-3 rounded-2xl flex items-center gap-2 font-medium text-xs transition-all cursor-pointer border ${isOn ? isDark ? \"bg-blue-500/20 text-blue-400 border-blue-500/40\" : \"bg-blue-100 text-blue-600 border-blue-300\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { scale: isOn ? [1, 1.3, 1] : 1 }, children: /* @__PURE__ */ jsx(Bookmark, { className: `w-4 h-4 ${isOn ? \"fill-current\" : \"\"}` }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: isOn ? \"Saved\" : \"Bookmark\" })\n          ]\n        }\n      );\n    case \"like-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: () => {\n            triggerHaptic(\"success\");\n            setLikeCount((prev) => isOn ? prev - 1 : prev + 1);\n            setIsOn(!isOn);\n          },\n          className: `p-2.5 px-3.5 rounded-2xl flex items-center gap-2 text-xs font-semibold transition-all cursor-pointer border ${isOn ? \"bg-rose-500/20 text-rose-400 border-rose-500/40\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { scale: isOn ? [1, 1.4, 1] : 1 }, children: /* @__PURE__ */ jsx(Heart, { className: `w-4 h-4 ${isOn ? \"fill-rose-500 text-rose-500\" : \"\"}` }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: likeCount })\n          ]\n        }\n      );\n    case \"dislike-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `p-2.5 rounded-2xl flex items-center gap-2 text-xs font-medium transition-all cursor-pointer border ${isOn ? isDark ? \"bg-amber-500/20 text-amber-400 border-amber-500/40\" : \"bg-amber-100 text-amber-600 border-amber-300\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOn ? [0, -15, 0] : 0 }, children: /* @__PURE__ */ jsx(ThumbsDown, { className: `w-4 h-4 ${isOn ? \"fill-current\" : \"\"}` }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Dislike\" })\n          ]\n        }\n      );\n    case \"repost-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: () => {\n            triggerHaptic(\"medium\");\n            setRepostCount((prev) => isOn ? prev - 1 : prev + 1);\n            setIsOn(!isOn);\n          },\n          className: `p-2.5 px-3.5 rounded-2xl flex items-center gap-2 text-xs font-semibold transition-all cursor-pointer border ${isOn ? \"bg-emerald-500/20 text-emerald-400 border-emerald-500/40\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOn ? 180 : 0 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ jsx(Repeat, { className: \"w-4 h-4\" }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: repostCount })\n          ]\n        }\n      );\n    case \"pill-tabs\":\n      return /* @__PURE__ */ jsx(\"div\", { className: `relative p-1 rounded-full flex items-center border ${isDark ? \"bg-neutral-900 border-white/10\" : \"bg-neutral-200/80 border-neutral-300/40\"}`, children: [\"Daily\", \"Weekly\", \"Monthly\"].map((tab) => /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: () => {\n            triggerHaptic(\"light\");\n            setPillTab(tab);\n          },\n          className: `relative px-3.5 py-1 text-xs font-semibold rounded-full z-10 transition-colors cursor-pointer border-0 bg-transparent ${pillTab === tab ? isDark ? \"text-white\" : \"text-black\" : isDark ? \"text-neutral-400 hover:text-white\" : \"text-neutral-600 hover:text-black\"}`,\n          children: [\n            pillTab === tab && /* @__PURE__ */ jsx(\n              motion.div,\n              {\n                layoutId: \"pill-tabs-indicator\",\n                transition: { type: \"spring\", stiffness: 500, damping: 30 },\n                className: `absolute inset-0 rounded-full -z-10 shadow-sm ${isDark ? \"bg-neutral-800 border border-white/10\" : \"bg-white\"}`\n              }\n            ),\n            tab\n          ]\n        },\n        tab\n      )) });\n    case \"morph-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-indigo-600\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0, rotate: isOn ? 180 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"w-7 h-7 bg-white rounded-full shadow-md flex items-center justify-center text-neutral-800\",\n              children: isOn ? /* @__PURE__ */ jsx(Unlock, { className: \"w-4 h-4 text-indigo-600\" }) : /* @__PURE__ */ jsx(Lock, { className: \"w-4 h-4 text-neutral-600\" })\n            }\n          )\n        }\n      );\n    case \"checkmark-draw\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-emerald-500\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0 },\n              transition: { type: \"spring\", stiffness: 500, damping: 28 },\n              className: \"w-7 h-7 bg-white rounded-full shadow-md flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: \"wait\", children: isOn && /* @__PURE__ */ jsx(\n                motion.svg,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  exit: { scale: 0, opacity: 0 },\n                  className: \"w-4 h-4 text-emerald-600\",\n                  viewBox: \"0 0 24 24\",\n                  fill: \"none\",\n                  stroke: \"currentColor\",\n                  strokeWidth: \"3.5\",\n                  strokeLinecap: \"round\",\n                  strokeLinejoin: \"round\",\n                  children: /* @__PURE__ */ jsx(\n                    motion.path,\n                    {\n                      d: \"M20 6L9 17l-5-5\",\n                      initial: { pathLength: 0 },\n                      animate: { pathLength: 1 },\n                      transition: { duration: 0.25 }\n                    }\n                  )\n                },\n                \"check\"\n              ) })\n            }\n          )\n        }\n      );\n    case \"theme-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-indigo-950 border border-indigo-700/50\" : \"bg-amber-100 border border-amber-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0, rotate: isOn ? 360 : 0 },\n              transition: { type: \"spring\", stiffness: 350, damping: 22 },\n              className: `w-7 h-7 rounded-full shadow-md flex items-center justify-center ${isOn ? \"bg-indigo-900 text-yellow-300\" : \"bg-amber-400 text-white\"}`,\n              children: isOn ? /* @__PURE__ */ jsx(Moon, { className: \"w-4 h-4 fill-yellow-300\" }) : /* @__PURE__ */ jsx(Sun, { className: \"w-4 h-4 fill-white\" })\n            }\n          )\n        }\n      );\n    default:\n      return null;\n  }\n};\n\n// pill-tabs.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedToggle, { theme, config: { \"id\": \"t-pill\", \"label\": \"Pill Tabs Switcher\", \"interactionType\": \"pill-tabs\", \"description\": \"Minimalist sliding indicator tab switcher (Daily / Weekly / Monthly).\", \"cliCommand\": \"npx @mova-ui/react add pill-tabs\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}