@mova-ui/react 0.1.0 → 0.2.0

package/registry/mono-rounded-kpi.json

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

package/registry/mono-rounded-line.json

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

package/registry/mono-rounded-meter.json

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

package/registry/mono-rounded-polar.json

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

package/registry/mono-rounded-pyramid.json

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

package/registry/mono-rounded-radar.json

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

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

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

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

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

package/registry/mono-rounded-range.json

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

package/registry/mono-rounded-sankey.json

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

package/registry/mono-rounded-scatter.json

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

package/registry/mono-rounded-sparkline.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-sparkline",
+  "file": "mono-rounded-sparkline.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedSparklineChart.tsx\nimport { ResponsiveContainer, LineChart, Line } from \"recharts\";\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/MonoRoundedSparklineChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar SPARK_ROWS = [\n  {\n    name: \"CPU Temp\",\n    val: \"42\\xB0C\",\n    data: [{ x: 1, y: 10 }, { x: 2, y: 25 }, { x: 3, y: 18 }, { x: 4, y: 40 }, { x: 5, y: 30 }]\n  },\n  {\n    name: \"GPU Temp\",\n    val: \"58\\xB0C\",\n    data: [{ x: 1, y: 15 }, { x: 2, y: 30 }, { x: 3, y: 22 }, { x: 4, y: 55 }, { x: 5, y: 48 }]\n  },\n  {\n    name: \"Fan Speed\",\n    val: \"1.2k RPM\",\n    data: [{ x: 1, y: 40 }, { x: 2, y: 35 }, { x: 3, y: 60 }, { x: 4, y: 50 }, { x: 5, y: 80 }]\n  }\n];\nfunction MonoRoundedSparklineChart({ theme = \"dark\", compact = false }) {\n  const isDark = theme === \"dark\";\n  const isMobile = useIsMobile();\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: \"Sparklines\" }),\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: \"Telemetry\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"3 Rows \",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"active\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex flex-col justify-around gap-2 touch-pan-y ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: SPARK_ROWS.map((row, idx) => /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col w-20 shrink-0\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-[11px] font-medium ${isDark ? \"text-white\" : \"text-black\"}`, children: row.name }),\n            /* @__PURE__ */ jsx(\"span\", { className: `text-[10px] font-mono ${isDark ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: row.val })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex-1 h-7\", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: \"100%\", height: \"100%\", children: /* @__PURE__ */ jsx(LineChart, { data: row.data, children: /* @__PURE__ */ jsx(\n            Line,\n            {\n              type: \"monotone\",\n              dataKey: \"y\",\n              stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n              strokeWidth: 2,\n              strokeLinecap: \"round\",\n              dot: false,\n              isAnimationActive: !isMobile,\n              animationDuration: isMobile ? 0 : 800\n            }\n          ) }) }) })\n        ] }, idx)) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Mini Splines\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Real-Time Telemetry\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-sparkline.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedSparklineChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-sparkline';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-stacked-bar.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-stacked-bar",
+  "file": "mono-rounded-stacked-bar.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedStackedBarChart.tsx\nimport {\n  ResponsiveContainer,\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip\n} from \"recharts\";\n\n// src/components/dither-charts/lib/recharts-tooltip.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DitherChartTooltipContent({\n  active,\n  payload,\n  label,\n  theme = \"dark\",\n  indicator = \"dot\",\n  formatter\n}) {\n  if (!active || !payload || payload.length === 0) return null;\n  const isDark = theme === \"dark\";\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? \"bg-[#181818]/90 border-white/10 text-white shadow-black/80\" : \"bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50\"}`,\n      children: [\n        label && /* @__PURE__ */ jsx(\"div\", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? \"border-white/10 text-neutral-300\" : \"border-neutral-200 text-neutral-600\"}`, children: label }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-col gap-1\", children: payload.map((item, idx) => {\n          const color = item.color || item.fill || (isDark ? \"#FFFFFF\" : \"#000000\");\n          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === \"number\" ? item.value.toLocaleString() : item.value;\n          return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between gap-3\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n              indicator === \"dot\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2 h-2 rounded-full ring-1 ring-white/20\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              indicator === \"line\" && /* @__PURE__ */ jsx(\n                \"span\",\n                {\n                  className: \"w-2.5 h-0.5 rounded-full\",\n                  style: { backgroundColor: color }\n                }\n              ),\n              /* @__PURE__ */ jsxs(\"span\", { className: `font-normal ${isDark ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: [\n                item.name || item.dataKey,\n                \":\"\n              ] })\n            ] }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"font-semibold tabular-nums\", children: valueDisplay })\n          ] }, idx);\n        }) })\n      ]\n    }\n  );\n}\n\n// src/hooks/useIsMobile.ts\nimport { useState, useEffect } from \"react\";\nfunction useIsMobile(breakpoint = 768) {\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.innerWidth < breakpoint || window.matchMedia(`(max-width: ${breakpoint}px)`).matches;\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);\n    const onChange = (e) => {\n      setIsMobile(e.matches);\n    };\n    setIsMobile(mql.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    } else {\n      mql.addListener(onChange);\n      return () => mql.removeListener(onChange);\n    }\n  }, [breakpoint]);\n  return isMobile;\n}\n\n// src/components/mono-charts/MonoRoundedStackedBarChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar STACKED_DATA = [\n  { label: \"Q1\", layer1: 30, layer2: 25, layer3: 20 },\n  { label: \"Q2\", layer1: 45, layer2: 35, layer3: 25 },\n  { label: \"Q3\", layer1: 60, layer2: 40, layer3: 30 },\n  { label: \"Q4\", layer1: 75, layer2: 50, layer3: 35 }\n];\nfunction MonoRoundedStackedBarChart({ 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: \"Stacked Tones\" }),\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: \"Layers\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"160 \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"cumulative\" })\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(BarChart, { data: STACKED_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: \"2 2\", vertical: false, stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\" }),\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(Bar, { dataKey: \"layer1\", name: \"Base\", stackId: \"a\", fill: isDark ? \"#FFFFFF\" : \"#09090B\", radius: [0, 0, 8, 8], barSize: 18, isAnimationActive: !isMobile, animationDuration: isMobile ? 0 : 800 }),\n          /* @__PURE__ */ jsx2(Bar, { dataKey: \"layer2\", name: \"Mid\", stackId: \"a\", fill: isDark ? \"rgba(255,255,255,0.5)\" : \"rgba(9,9,11,0.5)\", isAnimationActive: !isMobile, animationDuration: isMobile ? 0 : 800 }),\n          /* @__PURE__ */ jsx2(Bar, { dataKey: \"layer3\", name: \"Top\", stackId: \"a\", fill: isDark ? \"rgba(255,255,255,0.2)\" : \"rgba(9,9,11,0.2)\", radius: [8, 8, 0, 0], isAnimationActive: !isMobile, animationDuration: isMobile ? 0 : 800 })\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: \"3 Monochrome Layers\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Stacked Geometry\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-stacked-bar.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedStackedBarChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-stacked-bar';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-step.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-step",
+  "file": "mono-rounded-step.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedStepChart.tsx\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/components/mono-charts/MonoRoundedStepChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar STEP_DATA = [\n  { step: \"01\", level: 20 },\n  { step: \"02\", level: 40 },\n  { step: \"03\", level: 35 },\n  { step: \"04\", level: 75 },\n  { step: \"05\", level: 60 },\n  { step: \"06\", level: 90 }\n];\nfunction MonoRoundedStepChart({ 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-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: \"Step Progression\" }),\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: \"Staircase\" })\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: \"peak step\" })\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(LineChart, { data: STEP_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: \"3 3\", vertical: false, stroke: isDark ? \"rgba(255,255,255,0.05)\" : \"rgba(0,0,0,0.05)\" }),\n          /* @__PURE__ */ jsx2(XAxis, { dataKey: \"step\", 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            Line,\n            {\n              type: \"stepAfter\",\n              dataKey: \"level\",\n              name: \"Level\",\n              stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n              strokeWidth: 3,\n              strokeLinecap: \"round\",\n              strokeLinejoin: \"round\",\n              dot: { r: 4, fill: isDark ? \"#FFFFFF\" : \"#09090B\" },\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: \"Discrete Steps\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Level 6 Active\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-step.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedStepChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-step';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-stream.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-stream",
+  "file": "mono-rounded-stream.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedStreamChart.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/MonoRoundedStreamChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar STREAM_DATA = [\n  { t: \"01\", w1: 20, w2: 15 },\n  { t: \"02\", w1: 45, w2: 30 },\n  { t: \"03\", w1: 30, w2: 50 },\n  { t: \"04\", w1: 70, w2: 35 },\n  { t: \"05\", w1: 55, w2: 60 },\n  { t: \"06\", w1: 85, w2: 40 }\n];\nfunction MonoRoundedStreamChart({ 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: \"Stream Wave\" }),\n            /* @__PURE__ */ jsx2(\"span\", { className: \"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20\", children: \"Fluid\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"125 \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"peak flow\" })\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__ */ jsxs2(\"defs\", { children: [\n            /* @__PURE__ */ jsxs2(\"linearGradient\", { id: `${idPrefix}stream-g1`, x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n              /* @__PURE__ */ jsx2(\"stop\", { offset: \"0%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.4\" }),\n              /* @__PURE__ */ jsx2(\"stop\", { offset: \"100%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.05\" })\n            ] }),\n            /* @__PURE__ */ jsxs2(\"linearGradient\", { id: `${idPrefix}stream-g2`, x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n              /* @__PURE__ */ jsx2(\"stop\", { offset: \"0%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.2\" }),\n              /* @__PURE__ */ jsx2(\"stop\", { offset: \"100%\", stopColor: isDark ? \"#FFFFFF\" : \"#09090B\", stopOpacity: \"0.0\" })\n            ] })\n          ] }) }),\n          /* @__PURE__ */ jsx2(ResponsiveContainer, { width: \"100%\", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs2(AreaChart, { data: STREAM_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n            /* @__PURE__ */ jsx2(XAxis, { dataKey: \"t\", 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: \"natural\",\n                dataKey: \"w1\",\n                name: \"Wave 1\",\n                stroke: isDark ? \"#FFFFFF\" : \"#09090B\",\n                strokeWidth: 2,\n                strokeLinecap: \"round\",\n                strokeLinejoin: \"round\",\n                fill: `url(#${idPrefix}stream-g1)`,\n                animationDuration: 800\n              }\n            ),\n            /* @__PURE__ */ jsx2(\n              Area,\n              {\n                type: \"natural\",\n                dataKey: \"w2\",\n                name: \"Wave 2\",\n                stroke: isDark ? \"#A1A1AA\" : \"#52525B\",\n                strokeWidth: 1.5,\n                strokeLinecap: \"round\",\n                strokeLinejoin: \"round\",\n                fill: `url(#${idPrefix}stream-g2)`,\n                animationDuration: 900\n              }\n            )\n          ] }) })\n        ] }),\n        /* @__PURE__ */ jsxs2(\"div\", { className: \"flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono\", children: [\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", children: \"Rounded Natural Spline\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Dual Stream Wave\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-stream.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedStreamChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-stream';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-treemap.json

@@ -0,0 +1,11 @@
+{
+  "id": "mono-rounded-treemap",
+  "file": "mono-rounded-treemap.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedTreemapChart.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar TREEMAP_TILES = [\n  { label: \"Storage\", share: 45, flex: \"col-span-2 row-span-2\", opacity: 1 },\n  { label: \"Compute\", share: 30, flex: \"col-span-1 row-span-2\", opacity: 0.6 },\n  { label: \"Network\", share: 15, flex: \"col-span-2 row-span-1\", opacity: 0.35 },\n  { label: \"Cache\", share: 10, flex: \"col-span-1 row-span-1\", opacity: 0.2 }\n];\nfunction MonoRoundedTreemapChart({ 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: \"Tile Treemap\" }),\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: \"Allocation\" })\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: \"partitioned\" })\n          ] })\n        ] }) }),\n        /* @__PURE__ */ jsx(\"div\", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 grid grid-cols-3 grid-rows-3 gap-1.5 ${isDark ? \"bg-[#131313]\" : \"bg-[#f4f4f6]\"}`, children: TREEMAP_TILES.map((tile, idx) => /* @__PURE__ */ jsxs(\n          \"div\",\n          {\n            className: `${tile.flex} rounded-xl p-2 flex flex-col justify-between transition-all hover:scale-[1.02] cursor-pointer border ${isDark ? \"border-white/10\" : \"border-black/10\"}`,\n            style: {\n              backgroundColor: isDark ? `rgba(255,255,255,${tile.opacity})` : `rgba(9,9,11,${tile.opacity})`,\n              color: isDark ? tile.opacity > 0.5 ? \"#000000\" : \"#FFFFFF\" : tile.opacity > 0.5 ? \"#FFFFFF\" : \"#000000\"\n            },\n            children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[11px] font-bold tracking-tight font-sans\", children: tile.label }),\n              /* @__PURE__ */ jsxs(\"span\", { className: \"text-[10px] font-mono opacity-80\", children: [\n                tile.share,\n                \"%\"\n              ] })\n            ]\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 Corner Tiles\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"4 Resource Partitions\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-treemap.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx2(MonoRoundedTreemapChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-treemap';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/mono-rounded-waterfall.json

@@ -0,0 +1,13 @@
+{
+  "id": "mono-rounded-waterfall",
+  "file": "mono-rounded-waterfall.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/mono-charts/MonoRoundedWaterfallChart.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/MonoRoundedWaterfallChart.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar WATERFALL_DATA = [\n  { step: \"Start\", base: 0, delta: 50 },\n  { step: \"Inflow\", base: 50, delta: 30 },\n  { step: \"Outflow\", base: 60, delta: 20 },\n  { step: \"Net\", base: 0, delta: 80 }\n];\nfunction MonoRoundedWaterfallChart({ 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: \"Waterfall Steps\" }),\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: \"Delta\" })\n          ] }),\n          /* @__PURE__ */ jsxs2(\"div\", { className: \"text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans\", children: [\n            \"+80 \",\n            /* @__PURE__ */ jsx2(\"span\", { className: \"text-xs font-normal opacity-70\", children: \"net delta\" })\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: WATERFALL_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [\n          /* @__PURE__ */ jsx2(XAxis, { dataKey: \"step\", 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(Bar, { dataKey: \"base\", stackId: \"a\", fill: \"transparent\" }),\n          /* @__PURE__ */ jsx2(\n            Bar,\n            {\n              dataKey: \"delta\",\n              name: \"Delta\",\n              stackId: \"a\",\n              fill: isDark ? \"#FFFFFF\" : \"#09090B\",\n              radius: [6, 6, 6, 6],\n              barSize: 18,\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 Floating Pillars\" }),\n          /* @__PURE__ */ jsx2(\"span\", { className: isDark ? \"text-white font-medium\" : \"text-black font-medium\", children: \"Sequential Deltas\" })\n        ] })\n      ]\n    }\n  );\n}\n\n// mono-rounded-waterfall.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nfunction Demo() {\n  return /* @__PURE__ */ jsx3(MonoRoundedWaterfallChart, { theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n",
+  "dependencies": [
+    "recharts"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './mono-rounded-waterfall';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}