@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog-chunks/chunk-OVOLUMYF.js

@@ -0,0 +1,452 @@
+import {
+  cn
+} from "./chunk-KRXJK3FG.js";
+
+// .generated/catalog/components/dither-charts/PaymentsChart.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, AnimatePresence, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PERIODS = [
+  { name: "Week", mult: 1 },
+  { name: "Month", mult: 4 },
+  { name: "Quarter", mult: 13 },
+  { name: "Year", mult: 52 }
+];
+var BRANCHES = ["Bishkek", "Osh", "Jalal-Abad", "Karakol"];
+var BANDS = [
+  { name: "Cash", color: "#FFFFFF", share: 0.46 },
+  { name: "QR", color: "#CBD5E1", share: 0.31 },
+  { name: "Bank", color: "#94A3B8", share: 0.23 }
+];
+var BASE_TOTAL = 15e4;
+var BRANCH_WEIGHTS = [0.45, 0.25, 0.18, 0.12];
+var smoothstep = (min, max, value) => {
+  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  return x * x * (3 - 2 * x);
+};
+var hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+var hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var clamp = (val, min, max) => Math.max(min, Math.min(max, val));
+function AnimatedDollar({ value }) {
+  const prefersReducedMotion = useReducedMotion();
+  const spring = useSpring(value, { stiffness: 190, damping: 27, mass: 0.7 });
+  const display = useTransform(
+    spring,
+    (current) => "$" + Math.round(current).toLocaleString("en-US")
+  );
+  useEffect(() => {
+    if (prefersReducedMotion) {
+      spring.jump(value);
+    } else {
+      spring.set(value);
+    }
+  }, [value, spring, prefersReducedMotion]);
+  return /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: display });
+}
+var formatAxisLabel = (val) => {
+  if (val === 0) return "$0";
+  if (val >= 1e6) return "$" + (val / 1e6).toPrecision(3).replace(/\.0+$/, "") + "M";
+  if (val >= 1e3) return "$" + (val / 1e3).toPrecision(3).replace(/\.0+$/, "") + "k";
+  return "$" + val;
+};
+var getAxisMax = (maxVal) => {
+  if (maxVal === 0) return 100;
+  const target = maxVal * 1.05;
+  const power = Math.pow(10, Math.floor(Math.log10(target)));
+  const normalized = target / power;
+  let multiplier = 10;
+  if (normalized <= 1) multiplier = 1;
+  else if (normalized <= 2) multiplier = 2;
+  else if (normalized <= 5) multiplier = 5;
+  return multiplier * power;
+};
+function drawRoundedRect(ctx, x, y, w, h, rTop, rBottom) {
+  ctx.beginPath();
+  ctx.moveTo(x + rTop, y);
+  ctx.lineTo(x + w - rTop, y);
+  ctx.arcTo(x + w, y, x + w, y + rTop, rTop);
+  ctx.lineTo(x + w, y + h - rBottom);
+  ctx.arcTo(x + w, y + h, x + w - rBottom, y + h, rBottom);
+  ctx.lineTo(x + rBottom, y + h);
+  ctx.arcTo(x, y + h, x, y + h - rBottom, rBottom);
+  ctx.lineTo(x, y + rTop);
+  ctx.arcTo(x, y, x + rTop, y, rTop);
+  ctx.closePath();
+}
+function PaymentsChart() {
+  const [periodIndex, setPeriodIndex] = useState(1);
+  const [hoverBranch, setHoverBranch] = useState(null);
+  const [hoverBand, setHoverBand] = useState(null);
+  const canvasRef = useRef(null);
+  const period = PERIODS[periodIndex];
+  const isHovered = hoverBranch !== null;
+  const isHoveringBand = hoverBand !== null;
+  const { data, totalValue, axisMax } = useMemo(() => {
+    let tot = 0;
+    const branches = BRANCHES.map((b, bIdx) => {
+      const branchBase = BASE_TOTAL * BRANCH_WEIGHTS[bIdx];
+      let branchTotal = 0;
+      const bands = BANDS.map((band, bandIdx) => {
+        const wobble = 0.9 + 0.14 * Math.sin(bIdx * 3.1 + bandIdx * 1.7);
+        const val = Math.round(branchBase * period.mult * band.share * wobble);
+        branchTotal += Math.max(6, val);
+        return { value: Math.max(6, val) };
+      });
+      tot += branchTotal;
+      return { total: branchTotal, bands };
+    });
+    const maxBranchTotal = Math.max(...branches.map((b) => b.total));
+    const axMax = getAxisMax(maxBranchTotal);
+    return { data: branches, totalValue: tot, axisMax: axMax };
+  }, [periodIndex]);
+  const axisSprings = [
+    useSpring(0, { stiffness: 190, damping: 27 }),
+    useSpring(axisMax * 0.25, { stiffness: 190, damping: 27 }),
+    useSpring(axisMax * 0.5, { stiffness: 190, damping: 27 }),
+    useSpring(axisMax * 0.75, { stiffness: 190, damping: 27 }),
+    useSpring(axisMax, { stiffness: 190, damping: 27 })
+  ];
+  useEffect(() => {
+    axisSprings[1].set(axisMax * 0.25);
+    axisSprings[2].set(axisMax * 0.5);
+    axisSprings[3].set(axisMax * 0.75);
+    axisSprings[4].set(axisMax);
+  }, [axisMax, axisSprings]);
+  const axisDisplays = [
+    useTransform(axisSprings[0], (v) => formatAxisLabel(Number(v))),
+    useTransform(axisSprings[1], (v) => formatAxisLabel(Number(v))),
+    useTransform(axisSprings[2], (v) => formatAxisLabel(Number(v))),
+    useTransform(axisSprings[3], (v) => formatAxisLabel(Number(v))),
+    useTransform(axisSprings[4], (v) => formatAxisLabel(Number(v)))
+  ];
+  const timeRef = useRef(0);
+  const requestRef = useRef(void 0);
+  const drawnRef = useRef(/* @__PURE__ */ new Map());
+  const morphStartTimeRef = useRef(0);
+  const fromStateRef = useRef(/* @__PURE__ */ new Map());
+  const hoverRef = useRef({ b: hoverBranch, band: hoverBand });
+  useEffect(() => {
+    hoverRef.current = { b: hoverBranch, band: hoverBand };
+  }, [hoverBranch, hoverBand]);
+  useEffect(() => {
+    fromStateRef.current = new Map(drawnRef.current);
+    morphStartTimeRef.current = performance.now();
+  }, [data]);
+  useEffect(() => {
+    const draw = () => {
+      timeRef.current += 0.02;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const rect = canvas.getBoundingClientRect();
+      if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) {
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+      }
+      ctx.save();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpr, dpr);
+      const w = rect.width;
+      const h = rect.height;
+      const colW = w / BRANCHES.length;
+      const barW = Math.min(colW * 0.62, 54);
+      const cell = Math.max(3, Math.round(w / 200));
+      const HIGHLIGHT = "#FFFFFF";
+      let prog = 0;
+      if (morphStartTimeRef.current > 0) {
+        prog = (performance.now() - morphStartTimeRef.current) / 620;
+        if (prog > 1) prog = 1;
+      } else {
+        prog = 1;
+      }
+      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reducedMotion) {
+        prog = 1;
+        timeRef.current = 0;
+      }
+      const n = BRANCHES.length;
+      for (let i = 0; i < n; i++) {
+        const bp = 1 - Math.pow(1 - clamp((prog - i * 0.05) / (1 - (n - 1) * 0.05), 0, 1), 3);
+        const colX = i * colW;
+        const cx = colX + colW / 2;
+        const x0 = cx - barW / 2;
+        let currentY = h;
+        for (let j = 0; j < BANDS.length; j++) {
+          const key = `${i}-${j}`;
+          const targetH = data[i].bands[j].value / axisMax * h;
+          const fromH = fromStateRef.current.get(key) || 0;
+          const segH = Math.max(0.1, fromH + (targetH - fromH) * bp);
+          drawnRef.current.set(key, segH);
+          const yBottom = currentY;
+          const yTop = currentY - segH;
+          const rTop = j === BANDS.length - 1 ? 8 : 5;
+          const rBottom = j === 0 ? 7 : 5;
+          const hb = hoverRef.current.b;
+          const hband = hoverRef.current.band;
+          const isHot = hb === i && hband === j;
+          const isOtherBranch = hb !== null && hb !== i;
+          const isOtherBandInBranch = hb === i && hband !== null && hband !== j;
+          let alpha = 1;
+          if (isOtherBranch) alpha = 0.3;
+          else if (isOtherBandInBranch) alpha = 0.48;
+          const color = isHot ? HIGHLIGHT : BANDS[j].color;
+          ctx.save();
+          drawRoundedRect(ctx, x0, yTop, barW, segH, rTop, rBottom);
+          if (isHot) {
+            ctx.shadowColor = hexToRgba(HIGHLIGHT, 0.55);
+            ctx.shadowBlur = 10;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            ctx.strokeStyle = HIGHLIGHT;
+            ctx.lineWidth = 1.75;
+            ctx.stroke();
+            ctx.shadowColor = "transparent";
+          }
+          ctx.clip();
+          ctx.globalAlpha = alpha;
+          ctx.fillStyle = color;
+          const actualCell = cell * (isHot ? 1.4 : 1);
+          for (let tx = Math.floor(x0); tx <= Math.ceil(x0 + barW); tx += actualCell) {
+            for (let ty = Math.floor(yTop); ty <= Math.ceil(yBottom); ty += actualCell) {
+              const jx = tx + actualCell / 2;
+              const jy = ty + actualCell / 2;
+              const jit = hash(jx, jy);
+              const falloff = smoothstep(0, 1, 1 - (ty - yTop) / segH);
+              const waveRaw = Math.sin(jx * 0.05 + timeRef.current) + Math.sin(jy * 0.05 + timeRef.current * 0.7) + Math.sin((jx - jy) * 0.02 - timeRef.current * 0.4);
+              const mod = smoothstep(-1.5, 1.5, waveRaw);
+              const sz = actualCell * (0.3 + 0.4 * falloff + 0.3 * mod) * (0.8 + 0.4 * jit);
+              ctx.fillRect(tx + (actualCell - sz) / 2, ty + (actualCell - sz) / 2, sz, sz);
+            }
+          }
+          ctx.restore();
+          currentY = yTop - 4;
+        }
+      }
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [axisMax]);
+  const handlePointer = (e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    if (x < 0 || x > rect.width || y < 0 || y > rect.height) {
+      setHoverBranch(null);
+      setHoverBand(null);
+      return;
+    }
+    const colW = rect.width / BRANCHES.length;
+    const bIdx = Math.floor(x / colW);
+    const clampIdx = clamp(bIdx, 0, BRANCHES.length - 1);
+    const cx = clampIdx * colW + colW / 2;
+    const barW = Math.min(colW * 0.62, 54);
+    const x0 = cx - barW / 2;
+    if (x >= x0 && x <= x0 + barW) {
+      let currentY = rect.height;
+      let foundBand = null;
+      for (let j = 0; j < BANDS.length; j++) {
+        const key = `${clampIdx}-${j}`;
+        const segH = drawnRef.current.get(key) || 0;
+        const yTop = currentY - segH;
+        if (y <= currentY && y >= yTop) {
+          foundBand = j;
+          break;
+        }
+        currentY = yTop - 4;
+      }
+      setHoverBranch(clampIdx);
+      setHoverBand(foundBand);
+    } else {
+      setHoverBranch(clampIdx);
+      setHoverBand(null);
+    }
+  };
+  const handlePointerLeave = () => {
+    setHoverBranch(null);
+    setHoverBand(null);
+  };
+  const subLine = useMemo(() => {
+    if (hoverBranch !== null && hoverBand !== null) return `paid by ${BANDS[hoverBand].name} this ${period.name.toLowerCase()}`;
+    if (hoverBranch !== null) return `at ${BRANCHES[hoverBranch]} this ${period.name.toLowerCase()}`;
+    return `processed this ${period.name.toLowerCase()}`;
+  }, [hoverBranch, hoverBand, period.name]);
+  const badgeText = useMemo(() => {
+    if (hoverBranch !== null && hoverBand !== null) return `${BRANCHES[hoverBranch]} \xB7 ${BANDS[hoverBand].name}`;
+    if (hoverBranch !== null) return BRANCHES[hoverBranch];
+    return "\u2191 14%";
+  }, [hoverBranch, hoverBand]);
+  return /* @__PURE__ */ jsx("div", { className: "chart-stage-in", children: /* @__PURE__ */ jsx("div", { className: "chart-frame", children: /* @__PURE__ */ jsx("div", { style: { width: 440, zoom: 0.781818 }, children: /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full font-sans", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[440px] flex flex-col items-center gap-[14px]", children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 12 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3, ease: [0.19, 1, 0.22, 1] },
+        className: "w-full bg-[#FAFAFB] rounded-[14px] p-1.5 flex flex-col gap-1.5 shadow-[0_24px_50px_-34px_rgba(15,23,42,0.3)]",
+        children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 8 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.26, ease: [0.19, 1, 0.22, 1], delay: 0.03 },
+              className: "bg-white rounded-[10px] p-[14px_20px] flex flex-col gap-1.5 shadow-[0_0_1.76px_rgba(0,0,0,0.08),0_1px_1.76px_rgba(25,28,33,0.06),0_0_0_1px_rgba(25,28,33,0.04)]",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium tracking-tight text-[#171717]", children: "Payments" }),
+                    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "w-[14px] h-[14px] shrink-0", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M1.3335 7.99984C1.3335 5.64152 1.3335 4.46235 2.03536 3.6751C2.14762 3.54919 2.27135 3.43274 2.40514 3.32708C3.24158 2.6665 4.49444 2.6665 7.00016 2.6665H9.00016C11.5059 2.6665 12.7588 2.6665 13.5952 3.32708C13.729 3.43274 13.8527 3.54919 13.965 3.6751C14.6668 4.46235 14.6668 5.64152 14.6668 7.99984C14.6668 10.3582 14.6668 11.5373 13.965 12.3246C13.8527 12.4505 13.729 12.5669 13.5952 12.6726C12.7588 13.3332 11.5059 13.3332 9.00016 13.3332H7.00016C4.49444 13.3332 3.24158 13.3332 2.40514 12.6726C2.27135 12.5669 2.14762 12.4505 2.03536 12.3246C1.3335 11.5373 1.3335 10.3582 1.3335 7.99984Z", fill: "#B6B8BF", stroke: "#B6B8BF", strokeLinecap: "round", strokeLinejoin: "round" }),
+                      /* @__PURE__ */ jsx("path", { d: "M6.6665 10.6665H7.6665", stroke: "#FFFFFF", strokeLinecap: "round", strokeLinejoin: "round" }),
+                      /* @__PURE__ */ jsx("path", { d: "M9.6665 10.6665H11.9998", stroke: "#FFFFFF", strokeLinecap: "round", strokeLinejoin: "round" }),
+                      /* @__PURE__ */ jsx("path", { d: "M1.3335 6H14.6668", stroke: "#FFFFFF", strokeLinecap: "round", strokeLinejoin: "round" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "relative h-4 overflow-hidden w-24 flex justify-end", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+                    motion.span,
+                    {
+                      initial: { opacity: 0, y: -5, filter: "blur(3px)" },
+                      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                      exit: { opacity: 0, y: 5, filter: "blur(3px)" },
+                      transition: { duration: 0.18, ease: [0.19, 1, 0.22, 1] },
+                      className: "absolute right-0 text-[12px] text-[#8A90A0] whitespace-nowrap",
+                      children: [
+                        "This ",
+                        period.name.toLowerCase()
+                      ]
+                    },
+                    period.name
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[31px] font-semibold tracking-[-0.015em] text-[#171717] leading-[1.15]", children: /* @__PURE__ */ jsx(AnimatedDollar, { value: totalValue }) }),
+                  /* @__PURE__ */ jsx("span", { className: cn(
+                    "text-[13px] font-medium tabular-nums transition-colors duration-150",
+                    hoverBranch === null ? "text-[#2563EB]" : "text-[#8A8F98]"
+                  ), children: badgeText })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-[12.5px] font-normal text-[#8A90A0] transition-all", children: subLine })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 8 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.26, ease: [0.19, 1, 0.22, 1], delay: 0.06 },
+              className: "bg-white rounded-[10px] p-[14px_18px_16px] flex flex-col gap-3 shadow-[0_0_1.76px_rgba(0,0,0,0.08),0_1px_1.76px_rgba(25,28,33,0.06),0_0_0_1px_rgba(25,28,33,0.04)]",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-[5px_16px] pl-[2px]", children: BANDS.map((band, j) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-1.5 transition-opacity duration-150",
+                    style: { opacity: hoverBand !== null && hoverBand !== j ? 0.4 : 1 },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "w-[9px] h-[9px] rounded-[3px] shrink-0", style: { backgroundColor: band.color } }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[11.5px] font-[450] text-[#5F6675] whitespace-nowrap", children: band.name })
+                    ]
+                  },
+                  band.name
+                )) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-[10px]", children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative w-[30px] h-[140px] shrink-0", children: [0, 1, 2, 3, 4].map((idx) => /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute right-0 text-[10px] text-[#A1A6B4] tabular-nums whitespace-nowrap",
+                      style: { top: `${(1 - idx / 4) * 100}%`, y: "-50%" },
+                      children: axisDisplays[idx]
+                    },
+                    idx
+                  )) }),
+                  /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-[140px]", children: [
+                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[5px] pointer-events-none", style: { background: "repeating-linear-gradient(-45deg, rgba(79, 96, 132, 0.04) 0px, rgba(79, 96, 132, 0.04) 1px, transparent 1px, transparent 7px)" } }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-[100%] border-t-[1.5px] border-[#E7E9EE] pointer-events-none" }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-[75%] border-t border-dashed border-[#78829629] pointer-events-none" }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-[50%] border-t border-dashed border-[#78829629] pointer-events-none" }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-[25%] border-t border-dashed border-[#78829629] pointer-events-none" }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-[0%] border-t border-dashed border-[#78829629] pointer-events-none" }),
+                    /* @__PURE__ */ jsx(
+                      "canvas",
+                      {
+                        ref: canvasRef,
+                        className: "absolute inset-0 w-full h-full z-10 touch-none cursor-default",
+                        onPointerMove: handlePointer,
+                        onPointerLeave: handlePointerLeave
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex pl-[40px]", children: BRANCHES.map((b, i) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex-1 min-w-0 text-center truncate text-[11px] tracking-[-0.006em] transition-colors duration-180",
+                      hoverBranch === i ? "text-[#171717] font-semibold" : "text-[#8A90A0] font-normal"
+                    ),
+                    children: b
+                  },
+                  b
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.26, ease: [0.19, 1, 0.22, 1], delay: 0.1 },
+        className: "inline-flex bg-[#F3F4F6] rounded-[9px] p-[3px] gap-[2px]",
+        children: PERIODS.map((p, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setPeriodIndex(i);
+              setHoverBranch(null);
+              setHoverBand(null);
+            },
+            className: cn(
+              "relative px-[12px] py-[5px] rounded-[7px] text-[12px] transition-colors outline-none",
+              period.name === p.name ? "text-[#171717] font-semibold" : "text-[#8A90A0] font-medium hover:text-[#5F5F6F]"
+            ),
+            children: [
+              period.name === p.name && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  layoutId: "activePeriodPayment",
+                  className: "absolute inset-0 bg-white rounded-[7px] shadow-[0_0_0_1px_rgba(25,28,33,0.05),0_1px_2px_rgba(25,28,33,0.08)] z-0",
+                  transition: { duration: 0.32, bounce: 0.2, type: "spring" }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "relative z-10", children: p.name })
+            ]
+          },
+          p.name
+        ))
+      }
+    )
+  ] }) }) }) }) });
+}
+
+export {
+  PaymentsChart
+};

package/dist/catalog-chunks/chunk-OWYADZUR.js

@@ -0,0 +1,156 @@
+import {
+  getInstallCommand
+} from "./chunk-VMGI6CMO.js";
+
+// .generated/catalog/data/ditherCharts.ts
+var ditherChartsData = [
+  {
+    id: "dither-donut",
+    label: "Dither Donut Graph",
+    kebabName: "dither-donut",
+    category: "donut",
+    description: "Canvas dithered donut graph with white particle highlights & period selectors.",
+    cliCommand: getInstallCommand("dither-donut"),
+    codeSnippet: `import { DitherDonutChart } from '@mova-ui/react/catalog/components/dither-charts/DitherDonutChart';
+
+export default function Demo() {
+  return <DitherDonutChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-stacked",
+    label: "Dither Stacked Bar",
+    kebabName: "dither-stacked",
+    category: "bar",
+    description: "Stacked canvas bar graph with regional branch hovers & white dither bands.",
+    cliCommand: getInstallCommand("dither-stacked"),
+    codeSnippet: `import { DitherStackedChart } from '@mova-ui/react/catalog/components/dither-charts/DitherStackedChart';
+
+export default function Demo() {
+  return <DitherStackedChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-growth",
+    label: "Dither Area Growth",
+    kebabName: "dither-growth",
+    category: "area",
+    description: "Canvas area growth line graph with white dither tiles & date scrubber cursor.",
+    cliCommand: getInstallCommand("dither-growth"),
+    codeSnippet: `import { DitherGrowthChart } from '@mova-ui/react/catalog/components/dither-charts/DitherGrowthChart';
+
+export default function Demo() {
+  return <DitherGrowthChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-heatmap",
+    label: "Activity Dither Heatmap",
+    kebabName: "dither-heatmap",
+    category: "matrix",
+    description: "Activity heatmap grid with white dither intensity tiles.",
+    cliCommand: getInstallCommand("dither-heatmap"),
+    codeSnippet: `import { ActivityHeatmap } from '@mova-ui/react/catalog/components/dither-charts/ActivityHeatmap';
+
+export default function Demo() {
+  return <ActivityHeatmap theme="dark" />;
+}`
+  },
+  {
+    id: "dither-gauge",
+    label: "Server CPU Gauge",
+    kebabName: "dither-gauge",
+    category: "radial",
+    description: "Server CPU & memory radial gauge dial with white dither dot matrix.",
+    cliCommand: getInstallCommand("dither-gauge"),
+    codeSnippet: `import { ServerGauge } from '@mova-ui/react/catalog/components/dither-charts/ServerGauge';
+
+export default function Demo() {
+  return <ServerGauge theme="dark" />;
+}`
+  },
+  {
+    id: "dither-traffic",
+    label: "Traffic Scatter Bubbles",
+    kebabName: "dither-traffic",
+    category: "scatter",
+    description: "Traffic source scatter bubble plot with floating white dither nodes.",
+    cliCommand: getInstallCommand("dither-traffic"),
+    codeSnippet: `import { TrafficBubble } from '@mova-ui/react/catalog/components/dither-charts/TrafficBubble';
+
+export default function Demo() {
+  return <TrafficBubble theme="dark" />;
+}`
+  },
+  {
+    id: "dither-funnel",
+    label: "Conversion Funnel",
+    kebabName: "dither-funnel",
+    category: "bar",
+    description: "Conversion funnel with white dither progress stage bars.",
+    cliCommand: getInstallCommand("dither-funnel"),
+    codeSnippet: `import { DitherFunnelChart } from '@mova-ui/react/catalog/components/dither-charts/DitherFunnelChart';
+
+export default function Demo() {
+  return <DitherFunnelChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-device",
+    label: "Device Usage Donut",
+    kebabName: "dither-device",
+    category: "donut",
+    description: "Device usage donut chart with white dither particle segments.",
+    cliCommand: getInstallCommand("dither-device"),
+    codeSnippet: `import { DeviceUsageChart } from '@mova-ui/react/catalog/components/dither-charts/DeviceUsageChart';
+
+export default function Demo() {
+  return <DeviceUsageChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-storage",
+    label: "Storage Capacity Bar",
+    kebabName: "dither-storage",
+    category: "bar",
+    description: "Storage capacity bar with animated white dither progress shaders.",
+    cliCommand: getInstallCommand("dither-storage"),
+    codeSnippet: `import { StorageUsageChart } from '@mova-ui/react/catalog/components/dither-charts/StorageUsageChart';
+
+export default function Demo() {
+  return <StorageUsageChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-revenue",
+    label: "Revenue Spline Line",
+    kebabName: "dither-revenue",
+    category: "line",
+    description: "Revenue line graph with white dither gradient fill.",
+    cliCommand: getInstallCommand("dither-revenue"),
+    codeSnippet: `import { RevenueLineChart } from '@mova-ui/react/catalog/components/dither-charts/RevenueLineChart';
+
+export default function Demo() {
+  return <RevenueLineChart theme="dark" />;
+}`
+  },
+  {
+    id: "dither-uptime",
+    label: "System Uptime Matrix",
+    kebabName: "dither-uptime",
+    category: "matrix",
+    description: "90-day system uptime matrix with white dither status tiles.",
+    cliCommand: getInstallCommand("dither-uptime"),
+    codeSnippet: `import { UptimeChart } from '@mova-ui/react/catalog/components/dither-charts/UptimeChart';
+
+export default function Demo() {
+  return <UptimeChart theme="dark" />;
+}`
+  }
+];
+var simpleCompData = ditherChartsData;
+
+export {
+  ditherChartsData,
+  simpleCompData
+};