@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/mono-charts/MonoRoundedComposedChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedComposedChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedComposedChart({ theme, compact }: MonoRoundedComposedChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/mono-charts/MonoRoundedComposedChart.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  useIsMobile
+} from "../../../catalog-chunks/chunk-SWPGAN45.js";
+import {
+  DitherChartTooltipContent
+} from "../../../catalog-chunks/chunk-W7ZMAKCC.js";
+
+// .generated/catalog/components/mono-charts/MonoRoundedComposedChart.tsx
+import { useState } from "react";
+import {
+  ResponsiveContainer,
+  ComposedChart,
+  Bar,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MONO_COMPOSED_DATA = [
+  { label: "Q1", count: 140, trend: 120 },
+  { label: "Q2", count: 210, trend: 190 },
+  { label: "Q3", count: 280, trend: 260 },
+  { label: "Q4", count: 350, trend: 340 }
+];
+function MonoRoundedComposedChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  const isMobile = useIsMobile();
+  const [showLine, setShowLine] = useState(true);
+  const total = MONO_COMPOSED_DATA.reduce((acc, item) => acc + item.count, 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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)]"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Mono Hybrid Spline" }),
+              /* @__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: "Pill + Line" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+              total,
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "quarterly total" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowLine(!showLine),
+              className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-all cursor-pointer ${showLine ? isDark ? "bg-white/10 text-white border-white/20" : "bg-neutral-100 text-black border-neutral-300" : isDark ? "bg-transparent border-white/5 text-neutral-500" : "bg-transparent border-neutral-200 text-neutral-400"}`,
+              children: showLine ? "Spline On" : "Spline Off"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("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__ */ jsx(ResponsiveContainer, { width: "100%", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs(ComposedChart, { data: MONO_COMPOSED_DATA, margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "2 2",
+              vertical: false,
+              stroke: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+            }
+          ),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "label", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? "#71717A" : "#A1A1AA" } }),
+          /* @__PURE__ */ jsx(YAxis, { tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? "#71717A" : "#A1A1AA" } }),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(DitherChartTooltipContent, { theme, indicator: "dot" }) }),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: "count",
+              name: "Quarter Count",
+              fill: isDark ? "rgba(255,255,255,0.18)" : "rgba(9,9,11,0.12)",
+              stroke: isDark ? "rgba(255,255,255,0.4)" : "rgba(9,9,11,0.3)",
+              strokeWidth: 1,
+              radius: [8, 8, 8, 8],
+              barSize: 20,
+              isAnimationActive: !isMobile,
+              animationDuration: isMobile ? 0 : 800
+            }
+          ),
+          showLine && /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: "trend",
+              name: "Quarter Trend",
+              stroke: isDark ? "#FFFFFF" : "#09090B",
+              strokeWidth: 3,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              dot: {
+                r: 4,
+                fill: isDark ? "#FFFFFF" : "#09090B",
+                stroke: isDark ? "#181818" : "#FFFFFF",
+                strokeWidth: 2
+              },
+              isAnimationActive: !isMobile,
+              animationDuration: isMobile ? 0 : 900
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono", children: [
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-neutral-400" : "text-neutral-600", children: "Minimalist Monochromatic Layers" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Q4 Peak Target" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedComposedChart
+};

package/dist/catalog/components/mono-charts/MonoRoundedDonutChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedDonutChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedDonutChart({ theme, compact }: MonoRoundedDonutChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/mono-charts/MonoRoundedDonutChart.js

@@ -0,0 +1,97 @@
+"use client";
+import {
+  useIsMobile
+} from "../../../catalog-chunks/chunk-SWPGAN45.js";
+import {
+  DitherChartTooltipContent
+} from "../../../catalog-chunks/chunk-W7ZMAKCC.js";
+
+// .generated/catalog/components/mono-charts/MonoRoundedDonutChart.tsx
+import { useState } from "react";
+import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MONO_DONUT_DATA = [
+  { name: "Core Engine", value: 45, shade: "#FFFFFF" },
+  { name: "UI Layer", value: 30, shade: "#CBD5E1" },
+  { name: "Assets", value: 15, shade: "#94A3B8" },
+  { name: "Other", value: 10, shade: "#64748B" }
+];
+function MonoRoundedDonutChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  const isMobile = useIsMobile();
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const total = MONO_DONUT_DATA.reduce((acc, item) => acc + item.value, 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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)]"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Mono Rounded Donut" }),
+            /* @__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: "Soft Arc Caps" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            total,
+            "% ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "allocation" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 flex items-center justify-center touch-pan-y ${isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"}`, children: [
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs(PieChart, { children: [
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(DitherChartTooltipContent, { theme, indicator: "dot" }) }),
+            /* @__PURE__ */ jsx(
+              Pie,
+              {
+                data: MONO_DONUT_DATA,
+                dataKey: "value",
+                nameKey: "name",
+                cx: "50%",
+                cy: "50%",
+                innerRadius: compact ? 38 : 46,
+                outerRadius: compact ? 58 : 68,
+                paddingAngle: 6,
+                cornerRadius: 8,
+                strokeLinecap: "round",
+                onMouseEnter: (_, idx) => setHoverIndex(idx),
+                onMouseLeave: () => setHoverIndex(null),
+                isAnimationActive: !isMobile,
+                animationDuration: isMobile ? 0 : 900,
+                children: MONO_DONUT_DATA.map((entry, index) => {
+                  const isHovered = hoverIndex === index;
+                  const fillColor = isDark ? index === 0 ? "#FFFFFF" : index === 1 ? "rgba(255,255,255,0.7)" : index === 2 ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.2)" : index === 0 ? "#09090B" : index === 1 ? "rgba(9,9,11,0.7)" : index === 2 ? "rgba(9,9,11,0.4)" : "rgba(9,9,11,0.2)";
+                  return /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      fill: fillColor,
+                      stroke: isDark ? "#181818" : "#FFFFFF",
+                      strokeWidth: 2,
+                      style: {
+                        transform: isHovered ? "scale(1.05)" : "scale(1)",
+                        transformOrigin: "center center",
+                        transition: "transform 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
+                        cursor: "pointer"
+                      }
+                    },
+                    `mono-cell-${index}`
+                  );
+                })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums font-sans", children: hoverIndex !== null ? `${MONO_DONUT_DATA[hoverIndex].value}%` : "100%" }),
+            /* @__PURE__ */ jsx("span", { className: `text-[10px] ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: hoverIndex !== null ? MONO_DONUT_DATA[hoverIndex].name : "Mono Arc" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-around mt-3 pt-1 border-t border-white/5 text-[10px]", children: MONO_DONUT_DATA.map((seg, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-white/70" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-neutral-400" : "text-neutral-600", children: seg.name })
+        ] }, idx)) })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedDonutChart
+};

package/dist/catalog/components/mono-charts/MonoRoundedFunnelChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedFunnelChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedFunnelChart({ theme, compact }: MonoRoundedFunnelChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/mono-charts/MonoRoundedFunnelChart.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  DitherChartTooltipContent
+} from "../../../catalog-chunks/chunk-W7ZMAKCC.js";
+
+// .generated/catalog/components/mono-charts/MonoRoundedFunnelChart.tsx
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FUNNEL_DATA = [
+  { stage: "Visits", volume: 100 },
+  { stage: "Signup", volume: 68 },
+  { stage: "Active", volume: 42 },
+  { stage: "Pro", volume: 24 }
+];
+function MonoRoundedFunnelChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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)]"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Stage Funnel" }),
+            /* @__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: "Pipeline" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            "24% ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "conversion" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-2 transition-colors duration-300 ${isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"}`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs(BarChart, { data: FUNNEL_DATA, layout: "vertical", margin: { top: 8, right: 12, left: -10, bottom: 0 }, children: [
+          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true }),
+          /* @__PURE__ */ jsx(YAxis, { dataKey: "stage", type: "category", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? "#71717A" : "#A1A1AA" } }),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(DitherChartTooltipContent, { theme, indicator: "dot" }) }),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: "volume",
+              name: "Volume",
+              fill: isDark ? "#FFFFFF" : "#09090B",
+              radius: [0, 8, 8, 0],
+              barSize: 14,
+              animationDuration: 800
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono", children: [
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-neutral-400" : "text-neutral-600", children: "Rounded Horizontal Pills" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "4 Funnel Stages" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedFunnelChart
+};

package/dist/catalog/components/mono-charts/MonoRoundedGaugeArc.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedGaugeArcProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedGaugeArc({ theme, compact }: MonoRoundedGaugeArcProps): React.JSX.Element;
+export {};

package/dist/catalog/components/mono-charts/MonoRoundedGaugeArc.js

@@ -0,0 +1,64 @@
+"use client";
+
+// .generated/catalog/components/mono-charts/MonoRoundedGaugeArc.tsx
+import { ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MonoRoundedGaugeArc({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  const val = 84;
+  const data = [
+    { name: "Active", value: val },
+    { name: "Remaining", value: 100 - val }
+  ];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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)]"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Speedometer Arc" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20", children: "Gauge" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            "84% ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "performance index" })
+          ] })
+        ] }) }),
+        /* @__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: [
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: compact ? 120 : 140, children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsxs(
+            Pie,
+            {
+              data,
+              dataKey: "value",
+              cx: "50%",
+              cy: "70%",
+              startAngle: 210,
+              endAngle: -30,
+              innerRadius: compact ? 44 : 54,
+              outerRadius: compact ? 60 : 72,
+              cornerRadius: 8,
+              strokeLinecap: "round",
+              paddingAngle: 4,
+              children: [
+                /* @__PURE__ */ jsx(Cell, { fill: isDark ? "#FFFFFF" : "#09090B" }),
+                /* @__PURE__ */ jsx(Cell, { fill: isDark ? "rgba(255,255,255,0.1)" : "rgba(9,9,11,0.1)" })
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 flex flex-col items-center pointer-events-none", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xl font-extrabold tabular-nums font-sans", children: "84.0" }),
+            /* @__PURE__ */ jsx("span", { className: `text-[10px] font-mono ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Target Met" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono", children: [
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-neutral-400" : "text-neutral-600", children: "Rounded 240\xB0 Arc Dial" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Peak Gauge" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedGaugeArc
+};

package/dist/catalog/components/mono-charts/MonoRoundedHeatmapChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedHeatmapChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedHeatmapChart({ theme, compact }: MonoRoundedHeatmapChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/mono-charts/MonoRoundedHeatmapChart.js

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

package/dist/catalog/components/mono-charts/MonoRoundedKpiCardChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedKpiCardChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedKpiCardChart({ theme, compact }: MonoRoundedKpiCardChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/mono-charts/MonoRoundedKpiCardChart.js

@@ -0,0 +1,61 @@
+"use client";
+
+// .generated/catalog/components/mono-charts/MonoRoundedKpiCardChart.tsx
+import { ResponsiveContainer, AreaChart, Area } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KPI_LINE_DATA = [
+  { v: 30 },
+  { v: 45 },
+  { v: 35 },
+  { v: 60 },
+  { v: 50 },
+  { v: 85 },
+  { v: 75 },
+  { v: 95 }
+];
+function MonoRoundedKpiCardChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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)]"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "KPI Stat Card" }),
+            /* @__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" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-extrabold tracking-tight tabular-nums mt-1 font-sans", children: [
+            "$48,920 ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-emerald-400 font-mono", children: "+14.2%" })
+          ] })
+        ] }) }),
+        /* @__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: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "kpiGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: isDark ? "#FFFFFF" : "#09090B", stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: isDark ? "#FFFFFF" : "#09090B", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: "v",
+              stroke: isDark ? "#FFFFFF" : "#09090B",
+              strokeWidth: 2.5,
+              strokeLinecap: "round",
+              fill: "url(#kpiGrad)",
+              animationDuration: 800
+            }
+          )
+        ] }) }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-1 border-t border-white/5 text-[11px] font-mono", children: [
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-neutral-400" : "text-neutral-600", children: "Rounded Sparkline Wave" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Monthly Revenue" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedKpiCardChart
+};

package/dist/catalog/components/mono-charts/MonoRoundedLineChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MonoRoundedLineChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function MonoRoundedLineChart({ theme, compact }: MonoRoundedLineChartProps): React.JSX.Element;
+export {};