@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,170 @@
+"use client";
+import {
+  cn
+} from "../../../catalog-chunks/chunk-OTFAZXKB.js";
+
+// .generated/catalog/components/mono-charts/MonoActivityHeatmap.tsx
+import { useState, useMemo } from "react";
+import { motion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function generateDemoContributions(weeks) {
+  const today = /* @__PURE__ */ new Date();
+  return Array.from({ length: weeks * 7 }, (_, i) => {
+    const date = new Date(today);
+    date.setDate(date.getDate() - (weeks * 7 - 1 - i));
+    const rand = Math.random();
+    let level = 0;
+    let count = 0;
+    if (rand > 0.35) {
+      level = Math.floor(Math.random() * 4 + 1);
+      count = level * 3 + Math.floor(Math.random() * 4);
+    }
+    return {
+      date: date.toISOString().slice(0, 10),
+      count,
+      level
+    };
+  });
+}
+function toWeeks(contributions) {
+  const weeks = [];
+  for (let i = 0; i < contributions.length; i += 7) {
+    weeks.push(contributions.slice(i, i + 7));
+  }
+  return weeks;
+}
+function MonoActivityHeatmap({
+  theme = "dark",
+  accentColor = "green",
+  compact = false
+}) {
+  const isDark = theme === "dark";
+  const [hoveredDay, setHoveredDay] = useState(null);
+  const demoData = useMemo(() => generateDemoContributions(20), []);
+  const weeks = useMemo(() => toWeeks(demoData), [demoData]);
+  const totalContributions = useMemo(
+    () => demoData.reduce((sum, d) => sum + d.count, 0),
+    [demoData]
+  );
+  const colorScale = useMemo(() => {
+    switch (accentColor) {
+      case "green":
+        return {
+          bg: "#39d353",
+          badgeClass: "bg-emerald-500/20 text-emerald-400 border-emerald-500/30",
+          badgeText: "Emerald Matrix"
+        };
+      case "blue":
+        return {
+          bg: "#3b82f6",
+          badgeClass: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+          badgeText: "Sky Blue Grid"
+        };
+      case "purple":
+        return {
+          bg: "#a855f7",
+          badgeClass: "bg-purple-500/20 text-purple-400 border-purple-500/30",
+          badgeText: "Violet Pulse"
+        };
+      case "mono":
+      default:
+        return {
+          bg: isDark ? "#FFFFFF" : "#09090B",
+          badgeClass: "bg-white/10 text-white border-white/20",
+          badgeText: "Monochrome Heat"
+        };
+    }
+  }, [accentColor, isDark]);
+  const opacityForLevel = (lvl) => {
+    switch (lvl) {
+      case 0:
+        return isDark ? 0.06 : 0.08;
+      case 1:
+        return 0.3;
+      case 2:
+        return 0.55;
+      case 3:
+        return 0.8;
+      case 4:
+        return 1;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative w-full rounded-[24px] transition-all duration-300 group flex flex-col justify-between overflow-hidden p-4 sm:p-5 font-sans",
+        compact ? "h-[220px] sm:h-[268px]" : "min-h-[290px]",
+        isDark ? "bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-white 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-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: "Activity Heatmap" }),
+            /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono border", colorScale.badgeClass), children: colorScale.badgeText })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            totalContributions,
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "contributions" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: cn(
+          "relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex flex-col justify-center items-center",
+          isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"
+        ), children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-2 w-[277px] max-w-full px-1", children: MONTH_NAMES.slice(0, 5).map((m, idx) => /* @__PURE__ */ jsx("span", { className: `text-[10px] font-mono text-center flex-1 ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: m }, idx)) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex justify-center items-center gap-[3px] w-auto max-w-full overflow-x-auto py-1",
+              onPointerLeave: () => setHoveredDay(null),
+              children: weeks.map((week, wIdx) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[3px] items-center shrink-0", children: week.map((day, dIdx) => /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  onPointerEnter: () => setHoveredDay(day),
+                  onPointerDown: () => setHoveredDay(day),
+                  className: "w-[10px] h-[10px] sm:w-[11px] sm:h-[11px] min-w-[10px] min-h-[10px] sm:min-w-[11px] sm:min-h-[11px] rounded-[2px] transition-all cursor-pointer",
+                  style: {
+                    backgroundColor: colorScale.bg,
+                    opacity: opacityForLevel(day.level)
+                  },
+                  whileHover: { scale: 1.35, zIndex: 10 }
+                },
+                `${wIdx}-${dIdx}`
+              )) }, wIdx))
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-5 mt-2 flex items-center justify-center", children: hoveredDay ? /* @__PURE__ */ jsxs("span", { className: `text-[10px] font-mono ${isDark ? "text-neutral-300" : "text-neutral-700"}`, children: [
+            hoveredDay.count,
+            " ",
+            hoveredDay.count === 1 ? "item" : "items",
+            " on ",
+            hoveredDay.date
+          ] }) : /* @__PURE__ */ jsx("span", { className: `text-[10px] font-mono ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Hover tiles for metrics" }) })
+        ] }),
+        /* @__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: "20 Weeks x 7 Days Grid" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Team Activity" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoActivityHeatmap
+};

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

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

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

@@ -0,0 +1,107 @@
+"use client";
+import {
+  useIsMobile
+} from "../../../catalog-chunks/chunk-SWPGAN45.js";
+import {
+  DitherChartTooltipContent
+} from "../../../catalog-chunks/chunk-W7ZMAKCC.js";
+
+// .generated/catalog/components/mono-charts/MonoRoundedAreaChart.tsx
+import { useState, useId } from "react";
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MONO_AREA_DATA = [
+  { time: "02:00", volume: 18 },
+  { time: "06:00", volume: 34 },
+  { time: "10:00", volume: 72 },
+  { time: "14:00", volume: 89 },
+  { time: "18:00", volume: 64 },
+  { time: "22:00", volume: 48 }
+];
+function MonoRoundedAreaChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  const isMobile = useIsMobile();
+  const idPrefix = useId().replace(/:/g, "");
+  const [curve, setCurve] = useState("monotone");
+  const latestVal = MONO_AREA_DATA[MONO_AREA_DATA.length - 1].volume;
+  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 Curved Wave" }),
+              /* @__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 Gradient" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+              latestVal,
+              "% ",
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "peak throughput" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `p-0.5 rounded-full border flex items-center gap-0.5 ${isDark ? "bg-white/5 border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: ["monotone", "natural"].map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setCurve(c),
+              className: `px-2.5 py-0.5 rounded-full text-[11px] font-medium capitalize transition-all cursor-pointer ${curve === c ? isDark ? "bg-white text-black font-semibold shadow-sm" : "bg-black text-white font-semibold shadow-sm" : isDark ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+              children: c
+            },
+            c
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("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("svg", { className: "absolute w-0 h-0 pointer-events-none", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${idPrefix}mono-area-gradient`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: isDark ? "#FFFFFF" : "#09090B", stopOpacity: isDark ? "0.35" : "0.25" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: isDark ? "#FFFFFF" : "#09090B", stopOpacity: "0.0" })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs(AreaChart, { data: MONO_AREA_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: "time", 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(
+              Area,
+              {
+                type: curve,
+                dataKey: "volume",
+                name: "Volume Flow",
+                stroke: isDark ? "#FFFFFF" : "#09090B",
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: `url(#${idPrefix}mono-area-gradient)`,
+                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 Spline Shading" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "99.9% Linear Flow" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedAreaChart
+};

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

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

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

@@ -0,0 +1,121 @@
+"use client";
+import {
+  useIsMobile
+} from "../../../catalog-chunks/chunk-SWPGAN45.js";
+import {
+  DitherChartTooltipContent
+} from "../../../catalog-chunks/chunk-W7ZMAKCC.js";
+
+// .generated/catalog/components/mono-charts/MonoRoundedBarChart.tsx
+import { useState } from "react";
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip
+} from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MONO_BAR_DATA = [
+  { label: "Mon", primary: 45, secondary: 25 },
+  { label: "Tue", primary: 78, secondary: 40 },
+  { label: "Wed", primary: 62, secondary: 30 },
+  { label: "Thu", primary: 95, secondary: 55 },
+  { label: "Fri", primary: 88, secondary: 50 },
+  { label: "Sat", primary: 54, secondary: 28 }
+];
+function MonoRoundedBarChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  const isMobile = useIsMobile();
+  const [layout, setLayout] = useState("vertical");
+  const isHorizontal = layout === "horizontal";
+  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 Pill Pillars" }),
+              /* @__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: "Full Radius" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+              "422 ",
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "units built" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `p-0.5 rounded-full border flex items-center gap-0.5 ${isDark ? "bg-white/5 border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: ["vertical", "horizontal"].map((l) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setLayout(l),
+              className: `px-2.5 py-0.5 rounded-full text-[11px] font-medium capitalize transition-all cursor-pointer ${layout === l ? isDark ? "bg-white text-black font-semibold shadow-sm" : "bg-black text-white font-semibold shadow-sm" : isDark ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+              children: l === "vertical" ? "Col" : "Row"
+            },
+            l
+          )) })
+        ] }),
+        /* @__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(
+          BarChart,
+          {
+            data: MONO_BAR_DATA,
+            layout: isHorizontal ? "vertical" : "horizontal",
+            margin: { top: 12, right: 12, left: isHorizontal ? 0 : -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)"
+                }
+              ),
+              isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true }),
+                /* @__PURE__ */ jsx(YAxis, { dataKey: "label", type: "category", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? "#71717A" : "#A1A1AA" } })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__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: "primary",
+                  name: "Primary Output",
+                  fill: isDark ? "#FFFFFF" : "#09090B",
+                  radius: isHorizontal ? [0, 8, 8, 0] : [8, 8, 8, 8],
+                  barSize: isHorizontal ? 12 : 16,
+                  isAnimationActive: !isMobile,
+                  animationDuration: isMobile ? 0 : 800
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: "secondary",
+                  name: "Secondary Output",
+                  fill: isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.15)",
+                  radius: isHorizontal ? [0, 8, 8, 0] : [8, 8, 8, 8],
+                  barSize: isHorizontal ? 12 : 16,
+                  isAnimationActive: !isMobile,
+                  animationDuration: isMobile ? 0 : 1e3
+                }
+              )
+            ]
+          }
+        ) }) }),
+        /* @__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: "Corner Radius: 8px All" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Monochrome Fill" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedBarChart
+};

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

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

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

@@ -0,0 +1,67 @@
+"use client";
+import {
+  DitherChartTooltipContent
+} from "../../../catalog-chunks/chunk-W7ZMAKCC.js";
+
+// .generated/catalog/components/mono-charts/MonoRoundedBubbleChart.tsx
+import {
+  ResponsiveContainer,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  ZAxis,
+  Tooltip
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BUBBLE_DATA = [
+  { x: 20, y: 30, z: 300, tag: "Cluster 1" },
+  { x: 45, y: 70, z: 600, tag: "Cluster 2" },
+  { x: 70, y: 40, z: 450, tag: "Cluster 3" },
+  { x: 85, y: 80, z: 750, tag: "Cluster 4" }
+];
+function MonoRoundedBubbleChart({ 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: "Bubble Clusters" }),
+            /* @__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: "Scaled" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            "4 Clusters ",
+            /* @__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-2 transition-colors duration-300 ${isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"}`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: compact ? 130 : 160, children: /* @__PURE__ */ jsxs(ScatterChart, { margin: { top: 12, right: 12, left: -22, bottom: 0 }, children: [
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "x", type: "number", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? "#71717A" : "#A1A1AA" } }),
+          /* @__PURE__ */ jsx(YAxis, { dataKey: "y", type: "number", tickLine: false, axisLine: false, tick: { fontSize: 10, fill: isDark ? "#71717A" : "#A1A1AA" } }),
+          /* @__PURE__ */ jsx(ZAxis, { dataKey: "z", range: [100, 500] }),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(DitherChartTooltipContent, { theme, indicator: "dot" }) }),
+          /* @__PURE__ */ jsx(
+            Scatter,
+            {
+              name: "Clusters",
+              data: BUBBLE_DATA,
+              fill: isDark ? "rgba(255,255,255,0.2)" : "rgba(9,9,11,0.2)",
+              stroke: isDark ? "#FFFFFF" : "#09090B",
+              strokeWidth: 2,
+              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 Sphere Circles" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Z-Scaled Radii" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedBubbleChart
+};

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

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

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

@@ -0,0 +1,64 @@
+"use client";
+
+// .generated/catalog/components/mono-charts/MonoRoundedBulletChart.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BULLET_ITEMS = [
+  { title: "Throughput", actual: 82, target: 75 },
+  { title: "Latency", actual: 65, target: 80 },
+  { title: "Uptime", actual: 95, target: 90 }
+];
+function MonoRoundedBulletChart({ 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: "Bullet Target" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20", children: "Benchmark" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            "3 Targets ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "evaluated" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex flex-col justify-around gap-2 ${isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"}`, children: BULLET_ITEMS.map((item, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-[11px] font-mono", children: [
+            /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: item.title }),
+            /* @__PURE__ */ jsxs("span", { className: isDark ? "text-neutral-400" : "text-neutral-500", children: [
+              item.actual,
+              "% / ",
+              item.target,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `relative w-full h-3.5 rounded-full overflow-hidden ${isDark ? "bg-white/10" : "bg-black/10"}`, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `h-full rounded-full transition-all ${isDark ? "bg-white" : "bg-black"}`,
+                style: { width: `${item.actual}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute top-0 bottom-0 w-1 rounded-full bg-emerald-400 shadow-sm",
+                style: { left: `${item.target}%` }
+              }
+            )
+          ] })
+        ] }, idx)) }),
+        /* @__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 Bullet Bars" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "Benchmark Marker" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedBulletChart
+};

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

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

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

@@ -0,0 +1,76 @@
+"use client";
+
+// .generated/catalog/components/mono-charts/MonoRoundedCandlestickChart.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CANDLE_DATA = [
+  { time: "09:30", open: 120, high: 145, low: 110, close: 140 },
+  { time: "10:30", open: 140, high: 160, low: 135, close: 155 },
+  { time: "11:30", open: 155, high: 158, low: 125, close: 130 },
+  { time: "12:30", open: 130, high: 170, low: 128, close: 165 },
+  { time: "13:30", open: 165, high: 180, low: 150, close: 175 }
+];
+function MonoRoundedCandlestickChart({ theme = "dark", compact = false }) {
+  const isDark = theme === "dark";
+  const minVal = 100;
+  const maxVal = 190;
+  const range = maxVal - minVal;
+  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: "Financial Wicks" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-white/10 text-white border border-white/20", children: "Candlestick" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xl font-bold tracking-tight tabular-nums mt-0.5 font-sans", children: [
+            "175.00 ",
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-normal opacity-70", children: "close price" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: `relative w-full flex-1 rounded-[14px] overflow-hidden p-3 transition-colors duration-300 flex items-center justify-around gap-2 ${isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"}`, children: CANDLE_DATA.map((c, idx) => {
+          const isBull = c.close >= c.open;
+          const bodyTop = Math.max(c.open, c.close);
+          const bodyBottom = Math.min(c.open, c.close);
+          const bodyTopPct = (maxVal - bodyTop) / range * 100;
+          const bodyHeightPct = Math.max(8, (bodyTop - bodyBottom) / range * 100);
+          const highPct = (maxVal - c.high) / range * 100;
+          const lowPct = (maxVal - c.low) / range * 100;
+          return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute w-0.5 rounded-full bg-current opacity-40",
+                style: {
+                  top: `${highPct}%`,
+                  bottom: `${100 - lowPct}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute w-5 sm:w-6 rounded-md transition-all border",
+                style: {
+                  top: `${bodyTopPct}%`,
+                  height: `${bodyHeightPct}%`,
+                  backgroundColor: isBull ? isDark ? "#FFFFFF" : "#09090B" : isDark ? "rgba(255,255,255,0.15)" : "rgba(9,9,11,0.15)",
+                  borderColor: isDark ? "#FFFFFF" : "#09090B"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: `absolute bottom-0 text-[9px] font-mono ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: c.time })
+          ] }, idx);
+        }) }),
+        /* @__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 Wick Endcaps" }),
+          /* @__PURE__ */ jsx("span", { className: isDark ? "text-white font-medium" : "text-black font-medium", children: "5 Price Candles" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MonoRoundedCandlestickChart
+};