@mova-ui/react 0.1.0 → 0.2.0

package/registry/mono-heatmap.json

@@ -0,0 +1,14 @@
+{
+  "id": "mono-heatmap",
+  "file": "mono-heatmap.tsx",
+  "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 \"motion/react\";\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// mono-heatmap.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedMetricCard, { theme, config: { \"id\": \"m-mono-heatmap\", \"label\": \"Monochrome Activity Heatmap\", \"interactionType\": \"mono-heatmap\", \"description\": \"28-day activity matrix calendar with grayscale commit intensity.\", \"cliCommand\": \"npx @mova-ui/react add mono-heatmap\", \"category\": \"Audience & Growth\" } });\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-heatmap';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-area.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-area",
+  "file": "mono-rounded-area.tsx",
+  "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/mono-charts/MonoRoundedAreaChart.tsx\nimport { useState as useState2, useId } from \"react\";\nimport {\n  ResponsiveContainer,\n  AreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip\n} from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/hooks/useIsMobile.ts\nimport { useState, useEffect } from \"react\";\nfunction useIsMobile(breakpoint = 768) {\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.innerWidth < breakpoint || window.matchMedia(`(max-width: ${breakpoint}px)`).matches;\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);\n    const onChange = (e) => {\n      setIsMobile(e.matches);\n    };\n    setIsMobile(mql.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    } else {\n      mql.addListener(onChange);\n      return () => mql.removeListener(onChange);\n    }\n  }, [breakpoint]);\n  return isMobile;\n}\n\n// src/components/mono-charts/MonoRoundedAreaChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar MONO_AREA_DATA = [\n  { time: \"02:00\", volume: 18 },\n  { time: \"06:00\", volume: 34 },\n  { time: \"10:00\", volume: 72 },\n  { time: \"14:00\", volume: 89 },\n  { time: \"18:00\", volume: 64 },\n  { time: \"22:00\", volume: 48 }\n];\nfunction MonoRoundedAreaChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\n  const idPrefix = useId().replace(/:/g, \"\");\n  const [curve, setCurve] = useState2(\"monotone\");\n  const latestVal = MONO_AREA_DATA[MONO_AREA_DATA.length - 1].volume;\n  return /* @__PURE__ */ jsxs2(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mb-2\", children: [\n          /* @__PURE__ */ jsxs2(\"div\", { children: [\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-2\", children: [\n              /* @__PURE__ */ jsx2(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Mono Curved Wave\" }),\n              /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Soft Gradient\" })\n            ] }),\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n              latestVal,\n              \"% \",\n              /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"peak throughput\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx2(\"div\", { className: `p-0.5 rounded-full border flex items-center gap-0.5 ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"monotone\", \"natural\"].map((c) => /* @__PURE__ */ jsx2(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => setCurve(c),\n              className: `px-2.5 py-0.5 rounded-full text-[11px] font-medium capitalize transition-all cursor-pointer ${curve === c ? isDark ? \"bg-white text-black font-semibold shadow-sm\" : \"bg-black text-white font-semibold shadow-sm\" : isDark ? \"text-neutral-400 hover:text-white\" : \"text-neutral-600 hover:text-black\"}`,\n              children: c\n            },\n            c\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 touch-pan-y ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: [\n          /* @__PURE__ */ jsx2(\"svg\", { className: \"absolute w-0 h-0 pointer-events-none\", children: /* @__PURE__ */ jsx2(\"defs\", { children: /* @__PURE__ */ jsxs2(\"linearGradient\", { id: `${idPrefix}mono-area-gradient`, x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n            /* @__PURE__ */ jsx2(\"stop\", { offset: \"0%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: isDark ? \"0.35\" : \"0.25\" }),\n            /* @__PURE__ */ jsx2(\"stop\", { offset: \"100%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.0\" })\n          ] }) }) }),\n          /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(AreaChart, { data: MONO_AREA_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n            /* @__PURE__ */ jsx2(\n              CartesianGrid,\n              {\n                strokeDasharray: \"2 2\",\n                vertical: false,\n                stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\"\n              }\n            ),\n            /* @__PURE__ */ jsx2(XAxis, { dataKey: \"time\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n            /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n            /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n            /* @__PURE__ */ jsx2(\n              Area,\n              {\n                type: curve,\n                dataKey: \"volume\",\n                name: \"Volume Flow\",\n                stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n                strokeWidth: 2.5,\n                strokeLinecap: \"round\",\n                strokeLinejoin: \"round\",\n                fill: `url(#${idPrefix}mono-area-gradient)`,\n                isAnimationActive: !isMobile,\n                animationDuration: isMobile ? 0 : 900\n              }\n            )\n          ] }) })\n        ] }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Minimalist Spline Shading\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"99.9% Linear Flow\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-area.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedAreaChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-area';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-bar.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-bar",
+  "file": "mono-rounded-bar.tsx",
+  "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/mono-charts/MonoRoundedBarChart.tsx\nimport { useState as useState2 } from \"react\";\nimport {\n  ResponsiveContainer,\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip\n} from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/hooks/useIsMobile.ts\nimport { useState, useEffect } from \"react\";\nfunction useIsMobile(breakpoint = 768) {\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.innerWidth < breakpoint || window.matchMedia(`(max-width: ${breakpoint}px)`).matches;\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);\n    const onChange = (e) => {\n      setIsMobile(e.matches);\n    };\n    setIsMobile(mql.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    } else {\n      mql.addListener(onChange);\n      return () => mql.removeListener(onChange);\n    }\n  }, [breakpoint]);\n  return isMobile;\n}\n\n// src/components/mono-charts/MonoRoundedBarChart.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar MONO_BAR_DATA = [\n  { label: \"Mon\", primary: 45, secondary: 25 },\n  { label: \"Tue\", primary: 78, secondary: 40 },\n  { label: \"Wed\", primary: 62, secondary: 30 },\n  { label: \"Thu\", primary: 95, secondary: 55 },\n  { label: \"Fri\", primary: 88, secondary: 50 },\n  { label: \"Sat\", primary: 54, secondary: 28 }\n];\nfunction MonoRoundedBarChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\n  const [layout, setLayout] = useState2(\"vertical\");\n  const isHorizontal = layout === \"horizontal\";\n  return /* @__PURE__ */ jsxs2(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mb-2\", children: [\n          /* @__PURE__ */ jsxs2(\"div\", { children: [\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-2\", children: [\n              /* @__PURE__ */ jsx2(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Mono Pill Pillars\" }),\n              /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Full Radius\" })\n            ] }),\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n              \"422 \",\n              /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"units built\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx2(\"div\", { className: `p-0.5 rounded-full border flex items-center gap-0.5 ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"vertical\", \"horizontal\"].map((l) => /* @__PURE__ */ jsx2(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => setLayout(l),\n              className: `px-2.5 py-0.5 rounded-full text-[11px] font-medium capitalize transition-all cursor-pointer ${layout === l ? isDark ? \"bg-white text-black font-semibold shadow-sm\" : \"bg-black text-white font-semibold shadow-sm\" : isDark ? \"text-neutral-400 hover:text-white\" : \"text-neutral-600 hover:text-black\"}`,\n              children: l === \"vertical\" ? \"Col\" : \"Row\"\n            },\n            l\n          )) })\n        ] }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 touch-pan-y ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(\n          BarChart,\n          {\n            data: MONO_BAR_DATA,\n            layout: isHorizontal ? \"vertical\" : \"horizontal\",\n            margin: { top: 12, right: 12, left: isHorizontal ? 0 : -22, bottom: 0 },\n            children: [\n              /* @__PURE__ */ jsx2(\n                CartesianGrid,\n                {\n                  strokeDasharray: \"2 2\",\n                  vertical: false,\n                  stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\"\n                }\n              ),\n              isHorizontal ? /* @__PURE__ */ jsxs2(Fragment, { children: [\n                /* @__PURE__ */ jsx2(XAxis, { type: \"number\", hide: true }),\n                /* @__PURE__ */ jsx2(YAxis, { dataKey: \"label\", type: \"category\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } })\n              ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [\n                /* @__PURE__ */ jsx2(XAxis, { dataKey: \"label\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n                /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } })\n              ] }),\n              /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n              /* @__PURE__ */ jsx2(\n                Bar,\n                {\n                  dataKey: \"primary\",\n                  name: \"Primary Output\",\n                  fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n                  radius: isHorizontal ? [0, 8, 8, 0] : [8, 8, 8, 8],\n                  barSize: isHorizontal ? 12 : 16,\n                  isAnimationActive: !isMobile,\n                  animationDuration: isMobile ? 0 : 800\n                }\n              ),\n              /* @__PURE__ */ jsx2(\n                Bar,\n                {\n                  dataKey: \"secondary\",\n                  name: \"Secondary Output\",\n                  fill: isDark ? \"rgba(255,255,255,0.2)\" : \"rgba(0,0,0,0.15)\",\n                  radius: isHorizontal ? [0, 8, 8, 0] : [8, 8, 8, 8],\n                  barSize: isHorizontal ? 12 : 16,\n                  isAnimationActive: !isMobile,\n                  animationDuration: isMobile ? 0 : 1e3\n                }\n              )\n            ]\n          }\n        ) }) }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Corner Radius: 8px All\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Monochrome Fill\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-bar.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedBarChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-bar';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-bubble.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-bubble",
+  "file": "mono-rounded-bubble.tsx",
+  "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/mono-charts/MonoRoundedBubbleChart.tsx\nimport {\n  ResponsiveContainer,\n  ScatterChart,\n  Scatter,\n  XAxis,\n  YAxis,\n  ZAxis,\n  Tooltip\n} from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/components/mono-charts/MonoRoundedBubbleChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar BUBBLE_DATA = [\n  { x: 20, y: 30, z: 300, tag: \"Cluster 1\" },\n  { x: 45, y: 70, z: 600, tag: \"Cluster 2\" },\n  { x: 70, y: 40, z: 450, tag: \"Cluster 3\" },\n  { x: 85, y: 80, z: 750, tag: \"Cluster 4\" }\n];\nfunction MonoRoundedBubbleChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs2(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx2(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs2(\"div\", { children: [\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx2(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Bubble Clusters\" }),\n            /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Scaled\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"4 Clusters \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"mapped\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(ScatterChart, { margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(XAxis, { dataKey: \"x\", type: \"number\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n          /* @__PURE__ */ jsx2(YAxis, { dataKey: \"y\", type: \"number\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n          /* @__PURE__ */ jsx2(ZAxis, { dataKey: \"z\", range: [100, 500] }),\n          /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n          /* @__PURE__ */ jsx2(\n            Scatter,\n            {\n              name: \"Clusters\",\n              data: BUBBLE_DATA,\n              fill: isDark ? \"rgba(255,255,255,0.2)\" : \"rgba(9,9,11,0.2)\",\n              stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n              strokeWidth: 2,\n              animationDuration: 800\n            }\n          )\n        ] }) }) }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Sphere Circles\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Z-Scaled Radii\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-bubble.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedBubbleChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-bubble';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-bullet.json

@@ -0,0 +1,11 @@
+{
+  "id": "mono-rounded-bullet",
+  "file": "mono-rounded-bullet.tsx",
+  "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/mono-charts/MonoRoundedBulletChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar BULLET_ITEMS = [\n  { title: \"Throughput\", actual: 82, target: 75 },\n  { title: \"Latency\", actual: 65, target: 80 },\n  { title: \"Uptime\", actual: 95, target: 90 }\n];\nfunction MonoRoundedBulletChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs(\"div\", { children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Bullet Target\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Benchmark\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"3 Targets \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"evaluated\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex flex-col justify-around gap-2 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: BULLET_ITEMS.map((item, idx) => /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col gap-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between text-[11px] font-mono\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: item.title }),\n            /* @__PURE__ */ jsxs(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-500\", children: [\n              item.actual,\n              \"% / \",\n              item.target,\n              \"%\"\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `relative w-full h-3.5 rounded-full overflow-hidden ${isDark ? \"bg-white/10\" : \"bg-black/10\"}`, children: [\n            /* @__PURE__ */ jsx(\n              \"div\",\n              {\n                className: `h-full rounded-full transition-all ${isDark ? \"bg-white\" : \"bg-black\"}`,\n                style: { width: `${item.actual}%` }\n              }\n            ),\n            /* @__PURE__ */ jsx(\n              \"div\",\n              {\n                className: \"absolute top-0 bottom-0 w-1 rounded-full bg-emerald-400 shadow-sm\",\n                style: { left: `${item.target}%` }\n              }\n            )\n          ] })\n        ] }, idx)) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Bullet Bars\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Benchmark Marker\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-bullet.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedBulletChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-bullet';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-candlestick.json

@@ -0,0 +1,11 @@
+{
+  "id": "mono-rounded-candlestick",
+  "file": "mono-rounded-candlestick.tsx",
+  "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/mono-charts/MonoRoundedCandlestickChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar CANDLE_DATA = [\n  { time: \"09:30\", open: 120, high: 145, low: 110, close: 140 },\n  { time: \"10:30\", open: 140, high: 160, low: 135, close: 155 },\n  { time: \"11:30\", open: 155, high: 158, low: 125, close: 130 },\n  { time: \"12:30\", open: 130, high: 170, low: 128, close: 165 },\n  { time: \"13:30\", open: 165, high: 180, low: 150, close: 175 }\n];\nfunction MonoRoundedCandlestickChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const minVal = 100;\n  const maxVal = 190;\n  const range = maxVal - minVal;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs(\"div\", { children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Financial Wicks\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Candlestick\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"175.00 \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"close price\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex items-center justify-around gap-2 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: CANDLE_DATA.map((c, idx) => {\n          const isBull = c.close >= c.open;\n          const bodyTop = Math.max(c.open, c.close);\n          const bodyBottom = Math.min(c.open, c.close);\n          const bodyTopPct = (maxVal - bodyTop) / range * 100;\n          const bodyHeightPct = Math.max(8, (bodyTop - bodyBottom) / range * 100);\n          const highPct = (maxVal - c.high) / range * 100;\n          const lowPct = (maxVal - c.low) / range * 100;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"relative flex-1 h-full flex flex-col items-center justify-center\", children: [\n            /* @__PURE__ */ jsx(\n              \"div\",\n              {\n                className: \"absolute w-0.5 rounded-full bg-current opacity-40\",\n                style: {\n                  top: `${highPct}%`,\n                  bottom: `${100 - lowPct}%`\n                }\n              }\n            ),\n            /* @__PURE__ */ jsx(\n              \"div\",\n              {\n                className: \"absolute w-5 sm:w-6 rounded-md transition-all border\",\n                style: {\n                  top: `${bodyTopPct}%`,\n                  height: `${bodyHeightPct}%`,\n                  backgroundColor: isBull ? isDark ? \"#FFFFFF\" : \"#09090B\" : isDark ? \"rgba(255,255,255,0.15)\" : \"rgba(9,9,11,0.15)\",\n                  borderColor: isDark ? \"#FFFFFF\" : \"#09090B\"\n                }\n              }\n            ),\n            /* @__PURE__ */ jsx(\"span\", { className: `absolute bottom-0 text-[9px] font-mono ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: c.time })\n          ] }, idx);\n        }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Wick Endcaps\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"5 Price Candles\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-candlestick.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedCandlestickChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-candlestick';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-composed.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-composed",
+  "file": "mono-rounded-composed.tsx",
+  "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/mono-charts/MonoRoundedComposedChart.tsx\nimport { useState as useState2 } from \"react\";\nimport {\n  ResponsiveContainer,\n  ComposedChart,\n  Bar,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip\n} from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/hooks/useIsMobile.ts\nimport { useState, useEffect } from \"react\";\nfunction useIsMobile(breakpoint = 768) {\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.innerWidth < breakpoint || window.matchMedia(`(max-width: ${breakpoint}px)`).matches;\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);\n    const onChange = (e) => {\n      setIsMobile(e.matches);\n    };\n    setIsMobile(mql.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    } else {\n      mql.addListener(onChange);\n      return () => mql.removeListener(onChange);\n    }\n  }, [breakpoint]);\n  return isMobile;\n}\n\n// src/components/mono-charts/MonoRoundedComposedChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar MONO_COMPOSED_DATA = [\n  { label: \"Q1\", count: 140, trend: 120 },\n  { label: \"Q2\", count: 210, trend: 190 },\n  { label: \"Q3\", count: 280, trend: 260 },\n  { label: \"Q4\", count: 350, trend: 340 }\n];\nfunction MonoRoundedComposedChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\n  const [showLine, setShowLine] = useState2(true);\n  const total = MONO_COMPOSED_DATA.reduce((acc, item) => acc + item.count, 0);\n  return /* @__PURE__ */ jsxs2(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mb-2\", children: [\n          /* @__PURE__ */ jsxs2(\"div\", { children: [\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-2\", children: [\n              /* @__PURE__ */ jsx2(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Mono Hybrid Spline\" }),\n              /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Pill + Line\" })\n            ] }),\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n              total,\n              \" \",\n              /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"quarterly total\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx2(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => setShowLine(!showLine),\n              className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-all cursor-pointer ${showLine ? isDark ? \"bg-white/10 text-white border-white/20\" : \"bg-neutral-100 text-black border-neutral-300\" : isDark ? \"bg-transparent border-white/5 text-neutral-500\" : \"bg-transparent border-neutral-200 text-neutral-400\"}`,\n              children: showLine ? \"Spline On\" : \"Spline Off\"\n            }\n          )\n        ] }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 touch-pan-y ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(ComposedChart, { data: MONO_COMPOSED_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(\n            CartesianGrid,\n            {\n              strokeDasharray: \"2 2\",\n              vertical: false,\n              stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\"\n            }\n          ),\n          /* @__PURE__ */ jsx2(XAxis, { dataKey: \"label\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n          /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n          /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n          /* @__PURE__ */ jsx2(\n            Bar,\n            {\n              dataKey: \"count\",\n              name: \"Quarter Count\",\n              fill: isDark ? \"rgba(255,255,255,0.18)\" : \"rgba(9,9,11,0.12)\",\n              stroke: isDark ? \"rgba(255,255,255,0.4)\" : \"rgba(9,9,11,0.3)\",\n              strokeWidth: 1,\n              radius: [8, 8, 8, 8],\n              barSize: 20,\n              isAnimationActive: !isMobile,\n              animationDuration: isMobile ? 0 : 800\n            }\n          ),\n          showLine && /* @__PURE__ */ jsx2(\n            Line,\n            {\n              type: \"monotone\",\n              dataKey: \"trend\",\n              name: \"Quarter Trend\",\n              stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n              strokeWidth: 3,\n              strokeLinecap: \"round\",\n              strokeLinejoin: \"round\",\n              dot: {\n                r: 4,\n                fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n                stroke: isDark ? \"#181818\" : \"#FFFFFF\",\n                strokeWidth: 2\n              },\n              isAnimationActive: !isMobile,\n              animationDuration: isMobile ? 0 : 900\n            }\n          )\n        ] }) }) }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Minimalist Monochromatic Layers\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Q4 Peak Target\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-composed.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedComposedChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-composed';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-donut.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-donut",
+  "file": "mono-rounded-donut.tsx",
+  "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/mono-charts/MonoRoundedDonutChart.tsx\nimport { useState as useState2 } from \"react\";\nimport { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/hooks/useIsMobile.ts\nimport { useState, useEffect } from \"react\";\nfunction useIsMobile(breakpoint = 768) {\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.innerWidth < breakpoint || window.matchMedia(`(max-width: ${breakpoint}px)`).matches;\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);\n    const onChange = (e) => {\n      setIsMobile(e.matches);\n    };\n    setIsMobile(mql.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    } else {\n      mql.addListener(onChange);\n      return () => mql.removeListener(onChange);\n    }\n  }, [breakpoint]);\n  return isMobile;\n}\n\n// src/components/mono-charts/MonoRoundedDonutChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar MONO_DONUT_DATA = [\n  { name: \"Core Engine\", value: 45, shade: \"#FFFFFF\" },\n  { name: \"UI Layer\", value: 30, shade: \"#CBD5E1\" },\n  { name: \"Assets\", value: 15, shade: \"#94A3B8\" },\n  { name: \"Other\", value: 10, shade: \"#64748B\" }\n];\nfunction MonoRoundedDonutChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\n  const [hoverIndex, setHoverIndex] = useState2(null);\n  const total = MONO_DONUT_DATA.reduce((acc, item) => acc + item.value, 0);\n  return /* @__PURE__ */ jsxs2(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx2(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs2(\"div\", { children: [\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx2(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Mono Rounded Donut\" }),\n            /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Soft Arc Caps\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            total,\n            \"% \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"allocation\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex items-center justify-center touch-pan-y ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: [\n          /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(PieChart, { children: [\n            /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n            /* @__PURE__ */ jsx2(\n              Pie,\n              {\n                data: MONO_DONUT_DATA,\n                dataKey: \"value\",\n                nameKey: \"name\",\n                cx: \"50%\",\n                cy: \"50%\",\n                innerRadius: compact ? 38 : 46,\n                outerRadius: compact ? 58 : 68,\n                paddingAngle: 6,\n                cornerRadius: 8,\n                strokeLinecap: \"round\",\n                onMouseEnter: (_, idx) => setHoverIndex(idx),\n                onMouseLeave: () => setHoverIndex(null),\n                isAnimationActive: !isMobile,\n                animationDuration: isMobile ? 0 : 900,\n                children: MONO_DONUT_DATA.map((entry, index) => {\n                  const isHovered = hoverIndex === index;\n                  const fillColor = isDark ? index === 0 ? \"#FFFFFF\" : index === 1 ? \"rgba(255,255,255,0.7)\" : index === 2 ? \"rgba(255,255,255,0.4)\" : \"rgba(255,255,255,0.2)\" : index === 0 ? \"#09090B\" : index === 1 ? \"rgba(9,9,11,0.7)\" : index === 2 ? \"rgba(9,9,11,0.4)\" : \"rgba(9,9,11,0.2)\";\n                  return /* @__PURE__ */ jsx2(\n                    Cell,\n                    {\n                      fill: fillColor,\n                      stroke: isDark ? \"#181818\" : \"#FFFFFF\",\n                      strokeWidth: 2,\n                      style: {\n                        transform: isHovered ? \"scale(1.05)\" : \"scale(1)\",\n                        transformOrigin: \"center center\",\n                        transition: \"transform 0.2s cubic-bezier(0.16, 1, 0.3, 1)\",\n                        cursor: \"pointer\"\n                      }\n                    },\n                    `mono-cell-${index}`\n                  );\n                })\n              }\n            )\n          ] }) }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"absolute inset-0 flex flex-col items-center justify-center pointer-events-none\", children: [\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-sm font-bold tabular-nums font-sans\", children: hoverIndex !== null ? `${MONO_DONUT_DATA[hoverIndex].value}%` : \"100%\" }),\n            /* @__PURE__ */ jsx2(\"span\", { className: `text-[10px] ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: hoverIndex !== null ? MONO_DONUT_DATA[hoverIndex].name : \"Mono Arc\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx2(\"div\", { className: \"flex items-center justify-around mt-3 pt-1 border-t border-white/5 text-[10px]\", children: MONO_DONUT_DATA.map((seg, idx) => /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-1\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: \"w-1.5 h-1.5 rounded-full bg-white/70\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: seg.name })\n        ] }, idx)) })\n      ]\n    }\n  );\n}\n\n// mono-rounded-donut.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedDonutChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-donut';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-funnel.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-funnel",
+  "file": "mono-rounded-funnel.tsx",
+  "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/mono-charts/MonoRoundedFunnelChart.tsx\nimport {\n  ResponsiveContainer,\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  Tooltip\n} from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/components/mono-charts/MonoRoundedFunnelChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar FUNNEL_DATA = [\n  { stage: \"Visits\", volume: 100 },\n  { stage: \"Signup\", volume: 68 },\n  { stage: \"Active\", volume: 42 },\n  { stage: \"Pro\", volume: 24 }\n];\nfunction MonoRoundedFunnelChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs2(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx2(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs2(\"div\", { children: [\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx2(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Stage Funnel\" }),\n            /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Pipeline\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"24% \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"conversion\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(BarChart, { data: FUNNEL_DATA, layout: \"vertical\", margin: { top: 8, right: 12, left: -10, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(XAxis, { type: \"number\", hide: true }),\n          /* @__PURE__ */ jsx2(YAxis, { dataKey: \"stage\", type: \"category\", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n          /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n          /* @__PURE__ */ jsx2(\n            Bar,\n            {\n              dataKey: \"volume\",\n              name: \"Volume\",\n              fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n              radius: [0, 8, 8, 0],\n              barSize: 14,\n              animationDuration: 800\n            }\n          )\n        ] }) }) }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Horizontal Pills\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"4 Funnel Stages\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-funnel.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedFunnelChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-funnel';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-gauge-arc.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-gauge-arc",
+  "file": "mono-rounded-gauge-arc.tsx",
+  "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/mono-charts/MonoRoundedGaugeArc.tsx\nimport { ResponsiveContainer, PieChart, Pie, Cell } from \"recharts\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction MonoRoundedGaugeArc({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const val = 84;\n  const data = [\n    { name: \"Active\", value: val },\n    { name: \"Remaining\", value: 100 - val }\n  ];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs(\"div\", { children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Speedometer Arc\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Gauge\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"84% \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"performance index\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex flex-col items-center justify-center ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: [\n          /* @__PURE__ */ jsx(ResponsiveContainer, { width: \"100%\", height: compact ? 120 : 140, children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsxs(\n            Pie,\n            {\n              data,\n              dataKey: \"value\",\n              cx: \"50%\",\n              cy: \"70%\",\n              startAngle: 210,\n              endAngle: -30,\n              innerRadius: compact ? 44 : 54,\n              outerRadius: compact ? 60 : 72,\n              cornerRadius: 8,\n              strokeLinecap: \"round\",\n              paddingAngle: 4,\n              children: [\n                /* @__PURE__ */ jsx(Cell, { fill: isDark ? \"#FFFFFF\" : \"#09090B\" }),\n                /* @__PURE__ */ jsx(Cell, { fill: isDark ? \"rgba(255,255,255,0.1)\" : \"rgba(9,9,11,0.1)\" })\n              ]\n            }\n          ) }) }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute bottom-4 flex flex-col items-center pointer-events-none\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xl font-extrabold tabular-nums font-sans\", children: \"84.0\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: `text-[10px] font-mono ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Target Met\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded 240\\xB0 Arc Dial\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Peak Gauge\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-gauge-arc.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedGaugeArc, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-gauge-arc';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-heatmap.json

@@ -0,0 +1,11 @@
+{
+  "id": "mono-rounded-heatmap",
+  "file": "mono-rounded-heatmap.tsx",
+  "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/mono-charts/MonoRoundedHeatmapChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar HEATMAP_DATA = [\n  { day: \"Mon\", hours: [10, 40, 80, 50, 90, 30, 60] },\n  { day: \"Tue\", hours: [30, 60, 90, 70, 40, 80, 20] },\n  { day: \"Wed\", hours: [50, 70, 30, 80, 60, 90, 40] },\n  { day: \"Thu\", hours: [20, 80, 60, 40, 90, 50, 70] },\n  { day: \"Fri\", hours: [60, 90, 70, 90, 50, 30, 80] }\n];\nfunction MonoRoundedHeatmapChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 ${compact ? \"h-[220px] sm:h-[268px]\" : \"min-h-[290px]\"} ${isDark ? \"bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]\" : \"bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]\"}`,\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between mb-1\", children: /* @__PURE__ */ jsxs(\"div\", { children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Matrix Heatmap\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Activity\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"35 Nodes \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"mapped\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex flex-col justify-center gap-1.5 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: HEATMAP_DATA.map((row, rIdx) => /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-2 max-w-[280px] mx-auto w-full\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: `text-[10px] font-mono w-7 shrink-0 ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: row.day }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex-1 flex items-center justify-between gap-1.5\", children: row.hours.map((val, cIdx) => {\n            const opacity = val / 100;\n            return /* @__PURE__ */ jsx(\n              \"div\",\n              {\n                title: `Activity: ${val}%`,\n                className: \"aspect-square flex-1 rounded-[4px] sm:rounded-[6px] transition-all hover:scale-110 cursor-pointer\",\n                style: {\n                  backgroundColor: isDark ? `rgba(255,255,255,${opacity})` : `rgba(9,9,11,${opacity})`\n                }\n              },\n              cIdx\n            );\n          }) })\n        ] }, rIdx)) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Node Cells\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"7x5 Density Grid\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-heatmap.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedHeatmapChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-heatmap';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}