@mova-ui/react 0.1.0 → 0.4.1

package/registry/mono-rounded-candlestick.json

@@ -0,0 +1,16 @@
+{
+  "id": "mono-rounded-candlestick",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-candlestick.tsx",
+  "registryFile": "mono-rounded-candlestick.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-candlestick';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/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"
+}

package/registry/mono-rounded-composed.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-composed",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-composed.tsx",
+  "registryFile": "mono-rounded-composed.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-composed';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/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"
+}

package/registry/mono-rounded-donut.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-donut",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-donut.tsx",
+  "registryFile": "mono-rounded-donut.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-donut';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/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"
+}

package/registry/mono-rounded-funnel.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-funnel",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-funnel.tsx",
+  "registryFile": "mono-rounded-funnel.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-funnel';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/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"
+}

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

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-gauge-arc",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-gauge-arc.tsx",
+  "registryFile": "mono-rounded-gauge-arc.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-gauge-arc';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/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"
+}

package/registry/mono-rounded-heatmap.json

@@ -0,0 +1,16 @@
+{
+  "id": "mono-rounded-heatmap",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-heatmap.tsx",
+  "registryFile": "mono-rounded-heatmap.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-heatmap';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/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"
+}

package/registry/mono-rounded-kpi.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-kpi",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-kpi.tsx",
+  "registryFile": "mono-rounded-kpi.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-kpi';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedKpiCardChart.tsx\nimport { ResponsiveContainer, AreaChart, Area } from \"recharts\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar KPI_LINE_DATA = [\n  { v: 30 },\n  { v: 45 },\n  { v: 35 },\n  { v: 60 },\n  { v: 50 },\n  { v: 85 },\n  { v: 75 },\n  { v: 95 }\n];\nfunction MonoRoundedKpiCardChart({ 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: \"KPI Stat Card\" }),\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: \"Metric\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-2xl font-extrabold tracking-tight tabular-nums mt-1 font-sans\", children: [\n            \"$48,920 \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal text-emerald-400 font-mono\", children: \"+14.2%\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex flex-col justify-end ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-24\", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: \"100%\", height: \"100%\", children: /* @__PURE__ */ jsxs(AreaChart, { data: KPI_LINE_DATA, children: [\n          /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsxs(\"linearGradient\", { id: \"kpiGrad\", x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n            /* @__PURE__ */ jsx(\"stop\", { offset: \"0%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: 0.3 }),\n            /* @__PURE__ */ jsx(\"stop\", { offset: \"100%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: 0 })\n          ] }) }),\n          /* @__PURE__ */ jsx(\n            Area,\n            {\n              type: \"monotone\",\n              dataKey: \"v\",\n              stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n              strokeWidth: 2.5,\n              strokeLinecap: \"round\",\n              fill: \"url(#kpiGrad)\",\n              animationDuration: 800\n            }\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 Sparkline Wave\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Monthly Revenue\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-kpi.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedKpiCardChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-line.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-line",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-line.tsx",
+  "registryFile": "mono-rounded-line.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-line';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedLineChart.tsx\nimport { useState as useState2 } from \"react\";\nimport {\n  ResponsiveContainer,\n  LineChart,\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/MonoRoundedLineChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar MONO_LINE_DATA = [\n  { label: \"Jan\", value: 24, secondary: 18 },\n  { label: \"Feb\", value: 45, secondary: 32 },\n  { label: \"Mar\", value: 38, secondary: 29 },\n  { label: \"Apr\", value: 65, secondary: 48 },\n  { label: \"May\", value: 52, secondary: 41 },\n  { label: \"Jun\", value: 84, secondary: 62 }\n];\nfunction MonoRoundedLineChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\n  const [activeSeries, setActiveSeries] = useState2(\"all\");\n  const latestVal = MONO_LINE_DATA[MONO_LINE_DATA.length - 1].value;\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: \"Spline Dynamics\" }),\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: \"Line\" })\n            ] }),\n            /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n              latestVal,\n              \"k \",\n              /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"nodes\" })\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: [\"all\", \"value\"].map((s) => /* @__PURE__ */ jsx2(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => setActiveSeries(s),\n              className: `px-2.5 py-0.5 rounded-full text-[11px] font-medium capitalize transition-all cursor-pointer ${activeSeries === s ? 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: s === \"all\" ? \"Dual\" : \"Single\"\n            },\n            s\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(LineChart, { data: MONO_LINE_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(\n            CartesianGrid,\n            {\n              strokeDasharray: \"3 3\",\n              vertical: false,\n              stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\"\n            }\n          ),\n          /* @__PURE__ */ jsx2(\n            XAxis,\n            {\n              dataKey: \"label\",\n              tickLine: false,\n              axisLine: false,\n              tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" }\n            }\n          ),\n          /* @__PURE__ */ jsx2(\n            YAxis,\n            {\n              tickLine: false,\n              axisLine: false,\n              tick: { fontSize: 10, fill: isDark ? \"#71717A\" : \"#A1A1AA\" }\n            }\n          ),\n          /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n          activeSeries === \"all\" && /* @__PURE__ */ jsx2(\n            Line,\n            {\n              type: \"monotone\",\n              dataKey: \"secondary\",\n              name: \"Baseline\",\n              stroke: isDark ? \"#52525B\" : \"#A1A1AA\",\n              strokeWidth: 2,\n              strokeLinecap: \"round\",\n              strokeLinejoin: \"round\",\n              strokeDasharray: \"4 4\",\n              dot: false,\n              isAnimationActive: !isMobile,\n              animationDuration: isMobile ? 0 : 900\n            }\n          ),\n          /* @__PURE__ */ jsx2(\n            Line,\n            {\n              type: \"monotone\",\n              dataKey: \"value\",\n              name: \"Active\",\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              activeDot: {\n                r: 6,\n                fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n                stroke: isDark ? \"#A1A1AA\" : \"#52525B\",\n                strokeWidth: 2\n              },\n              isAnimationActive: !isMobile,\n              animationDuration: isMobile ? 0 : 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 Caps\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"84k Peak\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-line.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedLineChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-meter.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-meter",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-meter.tsx",
+  "registryFile": "mono-rounded-meter.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-meter';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedMeterChart.tsx\nimport { ResponsiveContainer, PieChart, Pie, Cell } from \"recharts\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction MonoRoundedMeterChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const val = 78;\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: \"Arc Meter\" }),\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: \"Speedometer\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            val,\n            \"% \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"load 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: 180,\n              endAngle: 0,\n              innerRadius: compact ? 42 : 52,\n              outerRadius: compact ? 58 : 70,\n              cornerRadius: 6,\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__ */ jsxs(\"span\", { className: \"text-lg font-bold tabular-nums font-sans\", children: [\n              val,\n              \"%\"\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: `text-[10px] font-mono ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Optimal Load\" })\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 Semi-Circle Arc\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Gauge Meter\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-meter.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedMeterChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-polar.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-polar",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-polar.tsx",
+  "registryFile": "mono-rounded-polar.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-polar';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedPolarChart.tsx\nimport { ResponsiveContainer, RadialBarChart, RadialBar, 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/components/mono-charts/MonoRoundedPolarChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar POLAR_DATA = [\n  { name: \"Alpha\", count: 90 },\n  { name: \"Beta\", count: 65 },\n  { name: \"Gamma\", count: 40 }\n];\nfunction MonoRoundedPolarChart({ 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: \"Polar 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: \"Radial\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"3 Bands \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"polar angle\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex items-center justify-center ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(\n          RadialBarChart,\n          {\n            cx: \"50%\",\n            cy: \"50%\",\n            innerRadius: \"25%\",\n            outerRadius: \"85%\",\n            barSize: 12,\n            data: POLAR_DATA,\n            startAngle: 90,\n            endAngle: -270,\n            children: [\n              /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n              /* @__PURE__ */ jsx2(\n                RadialBar,\n                {\n                  background: { fill: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\" },\n                  dataKey: \"count\",\n                  cornerRadius: 6,\n                  fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n                  animationDuration: 800\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: \"Rounded 360\\xB0 Polar Arcs\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Radial Pillars\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-polar.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedPolarChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-pyramid.json

@@ -0,0 +1,16 @@
+{
+  "id": "mono-rounded-pyramid",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-pyramid.tsx",
+  "registryFile": "mono-rounded-pyramid.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-pyramid';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedPyramidChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar PYRAMID_LEVELS = [\n  { label: \"Executive\", widthPct: 30, opacity: 1 },\n  { label: \"Management\", widthPct: 50, opacity: 0.7 },\n  { label: \"Senior Staff\", widthPct: 70, opacity: 0.45 },\n  { label: \"Core Team\", widthPct: 90, opacity: 0.25 }\n];\nfunction MonoRoundedPyramidChart({ 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: \"Pyramid Stack\" }),\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: \"Hierarchy\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"4 Tiers \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"structured\" })\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 items-center justify-around gap-2 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: PYRAMID_LEVELS.map((lvl, idx) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: \"h-6 sm:h-7 rounded-xl transition-all flex items-center justify-center border hover:scale-105 cursor-pointer\",\n            style: {\n              width: `${lvl.widthPct}%`,\n              backgroundColor: isDark ? `rgba(255,255,255,${lvl.opacity})` : `rgba(9,9,11,${lvl.opacity})`,\n              borderColor: isDark ? \"rgba(255,255,255,0.2)\" : \"rgba(9,9,11,0.2)\",\n              color: isDark ? lvl.opacity > 0.6 ? \"#000000\" : \"#FFFFFF\" : lvl.opacity > 0.6 ? \"#FFFFFF\" : \"#000000\"\n            },\n            children: /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-bold font-mono tracking-tight\", children: lvl.label })\n          },\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 Tier Layers\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Pyramid Hierarchy\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-pyramid.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedPyramidChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-radar.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-radar",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-radar.tsx",
+  "registryFile": "mono-rounded-radar.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-radar';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedRadarChart.tsx\nimport {\n  ResponsiveContainer,\n  RadarChart,\n  Radar,\n  PolarGrid,\n  PolarAngleAxis,\n  PolarRadiusAxis,\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/MonoRoundedRadarChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar RADAR_DATA = [\n  { subject: \"Speed\", metric: 90 },\n  { subject: \"Memory\", metric: 75 },\n  { subject: \"Scale\", metric: 85 },\n  { subject: \"Latency\", metric: 95 },\n  { subject: \"IOPS\", metric: 80 }\n];\nfunction MonoRoundedRadarChart({ 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: \"Polygon Web\" }),\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: \"Radar\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"85 \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"score\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex items-center justify-center ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(RadarChart, { cx: \"50%\", cy: \"50%\", outerRadius: compact ? 42 : 52, data: RADAR_DATA, children: [\n          /* @__PURE__ */ jsx2(PolarGrid, { stroke: isDark ? \"rgba(255,255,255,0.08)\" : \"rgba(0,0,0,0.08)\" }),\n          /* @__PURE__ */ jsx2(PolarAngleAxis, { dataKey: \"subject\", tick: { fontSize: 9, fill: isDark ? \"#71717A\" : \"#A1A1AA\" } }),\n          /* @__PURE__ */ jsx2(PolarRadiusAxis, { domain: [0, 100], tick: false, axisLine: false }),\n          /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n          /* @__PURE__ */ jsx2(\n            Radar,\n            {\n              name: \"Metric\",\n              dataKey: \"metric\",\n              stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n              strokeWidth: 2,\n              strokeLinecap: \"round\",\n              strokeLinejoin: \"round\",\n              fill: isDark ? \"rgba(255,255,255,0.15)\" : \"rgba(9,9,11,0.15)\",\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: \"5 Multi-Axis Nodes\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Polygon Net\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-radar.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedRadarChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

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

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-radial-gauge",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-radial-gauge.tsx",
+  "registryFile": "mono-rounded-radial-gauge.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-radial-gauge';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedRadialGaugeChart.tsx\nimport { ResponsiveContainer, RadialBarChart, RadialBar, 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/components/mono-charts/MonoRoundedRadialGaugeChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar RADIAL_GAUGE_DATA = [\n  { name: \"Core\", val: 90 },\n  { name: \"Memory\", val: 72 },\n  { name: \"Cache\", val: 54 }\n];\nfunction MonoRoundedRadialGaugeChart({ 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: \"Radial Rings\" }),\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: \"Concentric\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"90% \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"core utilization\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex items-center justify-center ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(\n          RadialBarChart,\n          {\n            cx: \"50%\",\n            cy: \"50%\",\n            innerRadius: \"30%\",\n            outerRadius: \"90%\",\n            barSize: 10,\n            data: RADIAL_GAUGE_DATA,\n            startAngle: 180,\n            endAngle: -180,\n            children: [\n              /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n              RADIAL_GAUGE_DATA.map((_, idx) => /* @__PURE__ */ jsx2(\n                RadialBar,\n                {\n                  background: { fill: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\" },\n                  dataKey: \"val\",\n                  cornerRadius: 5,\n                  fill: isDark ? idx === 0 ? \"#FFFFFF\" : idx === 1 ? \"rgba(255,255,255,0.6)\" : \"rgba(255,255,255,0.3)\" : idx === 0 ? \"#09090B\" : idx === 1 ? \"rgba(9,9,11,0.6)\" : \"rgba(9,9,11,0.3)\",\n                  animationDuration: 800\n                },\n                idx\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: \"Concentric Caps\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"3 Progress Meters\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-radial-gauge.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedRadialGaugeChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-radial-group.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-radial-group",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-radial-group.tsx",
+  "registryFile": "mono-rounded-radial-group.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-radial-group';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedRadialBarGroup.tsx\nimport { ResponsiveContainer, RadialBarChart, RadialBar, 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/components/mono-charts/MonoRoundedRadialBarGroup.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar RADIAL_GROUP_DATA = [\n  { name: \"System\", val: 85 },\n  { name: \"Network\", val: 62 },\n  { name: \"Storage\", val: 45 },\n  { name: \"Memory\", val: 30 }\n];\nfunction MonoRoundedRadialBarGroup({ 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: \"Radial Group\" }),\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: \"Multi-Arc\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"4 Rings \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"active\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex items-center justify-center ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(\n          RadialBarChart,\n          {\n            cx: \"50%\",\n            cy: \"50%\",\n            innerRadius: \"20%\",\n            outerRadius: \"95%\",\n            barSize: 8,\n            data: RADIAL_GROUP_DATA,\n            startAngle: 180,\n            endAngle: 0,\n            children: [\n              /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }) }),\n              RADIAL_GROUP_DATA.map((_, idx) => /* @__PURE__ */ jsx2(\n                RadialBar,\n                {\n                  background: { fill: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\" },\n                  dataKey: \"val\",\n                  cornerRadius: 8,\n                  fill: isDark ? idx === 0 ? \"#FFFFFF\" : idx === 1 ? \"rgba(255,255,255,0.7)\" : idx === 2 ? \"rgba(255,255,255,0.4)\" : \"rgba(255,255,255,0.2)\" : idx === 0 ? \"#09090B\" : idx === 1 ? \"rgba(9,9,11,0.7)\" : idx === 2 ? \"rgba(9,9,11,0.4)\" : \"rgba(9,9,11,0.2)\",\n                  animationDuration: 800\n                },\n                idx\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: \"Rounded 180\\xB0 Radial Caps\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"4 Gauge Arcs\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-radial-group.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedRadialBarGroup, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-range.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-range",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-range.tsx",
+  "registryFile": "mono-rounded-range.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-range';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedRangeChart.tsx\nimport { useId } from \"react\";\nimport {\n  ResponsiveContainer,\n  AreaChart,\n  Area,\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/MonoRoundedRangeChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar RANGE_DATA = [\n  { day: \"Mon\", range: [20, 50] },\n  { day: \"Tue\", range: [35, 75] },\n  { day: \"Wed\", range: [25, 60] },\n  { day: \"Thu\", range: [40, 90] },\n  { day: \"Fri\", range: [55, 85] }\n];\nfunction MonoRoundedRangeChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const idPrefix = useId().replace(/:/g, \"\");\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: \"Range Band\" }),\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: \"Min-Max\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"50 \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"variance band\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 ${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}range-grad`, x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n            /* @__PURE__ */ jsx2(\"stop\", { offset: \"0%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.3\" }),\n            /* @__PURE__ */ jsx2(\"stop\", { offset: \"100%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.05\" })\n          ] }) }) }),\n          /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(AreaChart, { data: RANGE_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n            /* @__PURE__ */ jsx2(XAxis, { dataKey: \"day\", 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: \"monotone\",\n                dataKey: \"range\",\n                name: \"Band Range\",\n                stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n                strokeWidth: 2,\n                strokeLinecap: \"round\",\n                strokeLinejoin: \"round\",\n                fill: `url(#${idPrefix}range-grad)`,\n                animationDuration: 800\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: \"Rounded Spline Boundaries\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Floating Range Band\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-range.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedRangeChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-sankey.json

@@ -0,0 +1,16 @@
+{
+  "id": "mono-rounded-sankey",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-sankey.tsx",
+  "registryFile": "mono-rounded-sankey.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-sankey';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedSankeyChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction MonoRoundedSankeyChart({ 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: \"Sankey Flow\" }),\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: \"Transfer\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"100% \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"flow routed\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex items-center justify-between gap-4 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col justify-around h-full gap-2 z-10\", children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-9 rounded-lg bg-current opacity-90 flex items-center justify-center text-[10px] font-bold font-mono text-background\", children: \"Source A\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-9 rounded-lg bg-current opacity-60 flex items-center justify-center text-[10px] font-bold font-mono text-background\", children: \"Source B\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full pointer-events-none p-4\", preserveAspectRatio: \"none\", children: [\n            /* @__PURE__ */ jsx(\n              \"path\",\n              {\n                d: \"M 60,35 C 130,35 150,55 220,55\",\n                fill: \"none\",\n                stroke: \"currentColor\",\n                strokeWidth: \"14\",\n                strokeOpacity: isDark ? \"0.3\" : \"0.2\",\n                strokeLinecap: \"round\"\n              }\n            ),\n            /* @__PURE__ */ jsx(\n              \"path\",\n              {\n                d: \"M 60,85 C 130,85 150,55 220,55\",\n                fill: \"none\",\n                stroke: \"currentColor\",\n                strokeWidth: \"10\",\n                strokeOpacity: isDark ? \"0.25\" : \"0.15\",\n                strokeLinecap: \"round\"\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center h-full z-10\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"w-14 h-14 rounded-xl bg-current flex flex-col items-center justify-center text-[10px] font-bold font-mono text-background shadow-md\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Target\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-normal opacity-80\", children: \"Output\" })\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 Flow Bands\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Channel Routing\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-sankey.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedSankeyChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/mono-rounded-scatter.json

@@ -0,0 +1,18 @@
+{
+  "id": "mono-rounded-scatter",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "mono-rounded-scatter.tsx",
+  "registryFile": "mono-rounded-scatter.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "recharts"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './mono-rounded-scatter';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedScatterChart.tsx\nimport {\n  ResponsiveContainer,\n  ScatterChart,\n  Scatter,\n  XAxis,\n  YAxis,\n  ZAxis,\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/MonoRoundedScatterChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar MONO_SCATTER_DATA = [\n  { x: 10, y: 30, z: 200, name: \"Node A\" },\n  { x: 25, y: 65, z: 400, name: \"Node B\" },\n  { x: 40, y: 45, z: 300, name: \"Node C\" },\n  { x: 55, y: 80, z: 500, name: \"Node D\" },\n  { x: 70, y: 60, z: 350, name: \"Node E\" },\n  { x: 85, y: 92, z: 600, name: \"Node F\" }\n];\nfunction MonoRoundedScatterChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\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-2\", 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 Scatter Matrix\" }),\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: \"Rounded Nodes\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"6 Nodes \",\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 touch-pan-y ${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(\n            CartesianGrid,\n            {\n              strokeDasharray: \"2 2\",\n              stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\"\n            }\n          ),\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: [60, 240] }),\n          /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(DitherChartTooltipContent, { theme, indicator: \"dot\" }), cursor: { strokeDasharray: \"3 3\" } }),\n          /* @__PURE__ */ jsx2(\n            Scatter,\n            {\n              name: \"Cluster Nodes\",\n              data: MONO_SCATTER_DATA,\n              fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n              stroke: isDark ? \"rgba(255,255,255,0.5)\" : \"rgba(9,9,11,0.5)\",\n              strokeWidth: 1.5,\n              isAnimationActive: !isMobile,\n              animationDuration: isMobile ? 0 : 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: \"Scale-Weighted Nodes\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"99.8% Sync\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-scatter.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedScatterChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}