@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,100 @@
+// .generated/catalog/components/simple-comp/TrafficBubble.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var SOURCES = [
+  { name: "Direct", data: [{ x: 50, y: 50, r: 35, color: "#FFFFFF", label: "US" }, { x: 30, y: 20, r: 20, color: "#E2E8F0", label: "UK" }, { x: 70, y: 80, r: 25, color: "#CBD5E1", label: "CA" }] },
+  { name: "Social", data: [{ x: 40, y: 60, r: 40, color: "#FFFFFF", label: "IG" }, { x: 70, y: 30, r: 25, color: "#E2E8F0", label: "TW" }, { x: 20, y: 40, r: 15, color: "#CBD5E1", label: "FB" }] }
+];
+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);
+};
+function TrafficBubble({ theme = "dark", compact = false }) {
+  const [sourceIndex, setSourceIndex] = useState(0);
+  const source = SOURCES[sourceIndex];
+  const canvasRef = useRef(null);
+  const targetBubblesRef = useRef(source.data);
+  const fromBubblesRef = useRef(source.data);
+  const morphStartTimeRef = useRef(0);
+  useEffect(() => {
+    fromBubblesRef.current = targetBubblesRef.current;
+    targetBubblesRef.current = source.data;
+    morphStartTimeRef.current = performance.now();
+  }, [source]);
+  useEffect(() => {
+    let req;
+    let time = 0;
+    const draw = () => {
+      time += 0.01;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      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.scale(dpr, dpr);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      let prog = Math.min(1, (performance.now() - morphStartTimeRef.current) / 600);
+      const e = 1 - Math.pow(2, -10 * prog);
+      for (let i = 0; i < Math.max(fromBubblesRef.current.length, targetBubblesRef.current.length); i++) {
+        const target = targetBubblesRef.current[i] || targetBubblesRef.current[targetBubblesRef.current.length - 1];
+        const from = fromBubblesRef.current[i] || fromBubblesRef.current[fromBubblesRef.current.length - 1];
+        const x = from.x + (target.x - from.x) * e;
+        const y = from.y + (target.y - from.y) * e;
+        const r = from.r + (target.r - from.r) * e;
+        const floatX = Math.sin(time + i * 2) * 4;
+        const floatY = Math.cos(time + i * 3) * 4;
+        const finalX = x / 100 * rect.width + floatX;
+        const finalY = y / 100 * rect.height + floatY;
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(finalX, finalY, r, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = target.color;
+        const cell = Math.max(2, Math.round(rect.width / 200));
+        for (let bx = Math.floor(finalX - r); bx <= Math.ceil(finalX + r); bx += cell) {
+          for (let by = Math.floor(finalY - r); by <= Math.ceil(finalY + r); by += cell) {
+            const jx = bx + cell / 2;
+            const jy = by + cell / 2;
+            const jit = hash(jx, jy);
+            const dx = jx - finalX;
+            const dy = jy - finalY;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist > r + cell) continue;
+            const fullness = smoothstep(0, 1, 1 - dist / r);
+            const waveRaw = Math.sin(jx * 0.05 + time) + Math.sin(jy * 0.05 + time * 0.7);
+            const mod = smoothstep(-1.5, 1.5, waveRaw);
+            const sz = cell * (0.3 + 0.4 * fullness + 0.3 * mod) * (0.8 + 0.4 * jit);
+            ctx.fillRect(bx + (cell - sz) / 2, by + (cell - sz) / 2, sz, sz);
+          }
+        }
+        ctx.restore();
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = "#000000";
+        ctx.font = "600 11px Inter, sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(target.label, finalX, finalY);
+      }
+      ctx.restore();
+      req = requestAnimationFrame(draw);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex flex-col items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-[140px] flex items-center justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "absolute inset-0 w-full h-full" }) }) });
+}
+
+export {
+  TrafficBubble
+};

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

@@ -0,0 +1,101 @@
+// .generated/catalog/components/simple-comp/RevenueLineChart.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var REVENUE_DATA = [
+  { name: "This Week", total: 12450, data: [1200, 1500, 1100, 1800, 2200, 2900, 1750] },
+  { name: "Last Week", total: 9800, data: [900, 1100, 800, 1300, 1600, 2100, 2e3] }
+];
+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);
+};
+function RevenueLineChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(0);
+  const period = REVENUE_DATA[periodIndex];
+  const canvasRef = useRef(null);
+  const targetDataRef = useRef(period.data);
+  const fromDataRef = useRef(period.data);
+  const morphStartTimeRef = useRef(0);
+  useEffect(() => {
+    fromDataRef.current = targetDataRef.current;
+    targetDataRef.current = period.data;
+    morphStartTimeRef.current = performance.now();
+  }, [period]);
+  useEffect(() => {
+    let req;
+    let time = 0;
+    const draw = () => {
+      time += 0.02;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      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.scale(dpr, dpr);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      let prog = Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
+      const e = 1 - Math.pow(2, -10 * prog);
+      const points = period.data.length;
+      const w = rect.width;
+      const h = rect.height;
+      const maxVal = Math.max(...period.data, ...fromDataRef.current) * 1.2;
+      const stepX = w / (points - 1);
+      const cell = Math.max(2, Math.round(rect.width / 200));
+      ctx.beginPath();
+      for (let i = 0; i < points; i++) {
+        const target = targetDataRef.current[i];
+        const from = fromDataRef.current[i];
+        const val = from + (target - from) * e;
+        const x = i * stepX;
+        const y = h - val / maxVal * h;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.lineWidth = 2.5;
+      ctx.strokeStyle = "#FFFFFF";
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
+      ctx.stroke();
+      ctx.lineTo(w, h);
+      ctx.lineTo(0, h);
+      ctx.closePath();
+      ctx.save();
+      ctx.clip();
+      ctx.fillStyle = "#FFFFFF";
+      for (let x = 0; x <= w; x += cell) {
+        for (let y = 0; y <= h; y += cell) {
+          const jx = x + cell / 2;
+          const jy = y + cell / 2;
+          const jit = hash(jx, jy);
+          const gradientFalloff = Math.max(0, 1 - jy / h);
+          const waveRaw = Math.sin(jx * 0.05 + time) + Math.sin(jy * 0.05 + time * 0.7);
+          const mod = smoothstep(-1.5, 1.5, waveRaw);
+          const sz = cell * (0.3 * gradientFalloff + 0.3 * mod) * (0.8 + 0.4 * jit);
+          if (sz > 0) {
+            ctx.fillRect(x + (cell - sz) / 2, y + (cell - sz) / 2, sz, sz);
+          }
+        }
+      }
+      ctx.restore();
+      ctx.restore();
+      req = requestAnimationFrame(draw);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [period]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex flex-col items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-[120px] flex items-center justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full" }) }) });
+}
+
+export {
+  RevenueLineChart
+};

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

@@ -0,0 +1,56 @@
+// .generated/catalog/components/cards/FocusBlur.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FocusBlur({
+  items = [
+    { label: "@Twitter", href: "#" },
+    { label: "@Threads", href: "#" },
+    { label: "@Instagram", href: "#" },
+    { label: "@GitHub", href: "#" }
+  ],
+  blurAmount = 4,
+  opacityAmount = 0.4,
+  showBrackets = true,
+  className = ""
+}) {
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  return /* @__PURE__ */ jsx("div", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {
+    const isHovered = hoveredIndex === index;
+    const isAnyHovered = hoveredIndex !== null;
+    const isInactive = isAnyHovered && !isHovered;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: item.href || "#",
+        onMouseEnter: () => setHoveredIndex(index),
+        onMouseLeave: () => setHoveredIndex(null),
+        className: "relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none",
+        style: {
+          filter: isInactive ? `blur(${blurAmount}px)` : "none",
+          opacity: isInactive ? opacityAmount : 1,
+          color: isHovered ? "var(--color-blue-500, #3b82f6)" : "inherit"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "relative z-10", children: item.label }),
+          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 1.3 },
+              animate: { opacity: 1, scale: 1.1 },
+              exit: { opacity: 0, scale: 1.3 },
+              transition: { type: "spring", stiffness: 350, damping: 20 },
+              className: "absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0",
+              style: { margin: "-4px -8px" }
+            }
+          ) })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+export {
+  FocusBlur
+};

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

@@ -0,0 +1,244 @@
+// .generated/catalog/components/simple-comp/DitherStackedChart.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { CreditCard } from "lucide-react";
+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 hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+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 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 DitherStackedChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(1);
+  const [hoverBranch, setHoverBranch] = useState(null);
+  const [hoverBand, setHoverBand] = useState(null);
+  const canvasRef = useRef(null);
+  const period = PERIODS[periodIndex];
+  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 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);
+          ctx.clip();
+          ctx.globalAlpha = alpha * 0.85;
+          ctx.fillStyle = color;
+          for (let bx = x0; bx < x0 + barW; bx += cell) {
+            for (let by = yTop; by < yBottom; by += cell) {
+              const dx = bx - (x0 + barW / 2);
+              const dy = by - (yTop + segH / 2);
+              const dist = Math.sqrt(dx * dx + dy * dy);
+              const jitter = hash(bx, by);
+              const wave = Math.sin(dist * 0.1 - timeRef.current * 2) * 0.15;
+              const sz = cell * (0.68 + wave + jitter * 0.2);
+              ctx.fillRect(bx + (cell - sz) / 2, by + (cell - sz) / 2, sz, sz);
+            }
+          }
+          ctx.restore();
+          currentY = yTop;
+        }
+      }
+      ctx.restore();
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [data, axisMax]);
+  if (compact) {
+    return /* @__PURE__ */ jsx("div", { className: "relative w-full h-full flex items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-[120px]", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full block" }) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `relative w-full rounded-3xl p-6 transition-colors border ${theme === "dark" ? "bg-[#181818] border-white/5 text-white" : "bg-white border-neutral-200 text-black shadow-lg"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: `p-2.5 rounded-2xl ${theme === "dark" ? "bg-blue-500/10 text-blue-400" : "bg-blue-50 text-blue-600"}`, children: /* @__PURE__ */ jsx(CreditCard, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold tracking-tight", children: /* @__PURE__ */ jsx(AnimatedDollar, { value: totalValue }) }),
+            /* @__PURE__ */ jsx("span", { className: `text-xs ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: "total revenue" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: `text-xs ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: "Stacked payment channels per regional branch" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `flex items-center p-1 rounded-full border text-xs font-medium ${theme === "dark" ? "bg-[#131313] border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: PERIODS.map((p, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setPeriodIndex(idx),
+          className: `px-3 py-1 rounded-full transition-all cursor-pointer ${periodIndex === idx ? "bg-blue-600 text-white shadow-sm" : theme === "dark" ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+          children: p.name
+        },
+        p.name
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 mb-4 text-xs font-medium", children: BANDS.map((band, idx) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseEnter: () => setHoverBand(idx),
+        onMouseLeave: () => setHoverBand(null),
+        className: "flex items-center gap-1.5 cursor-pointer opacity-80 hover:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: band.color } }),
+          /* @__PURE__ */ jsx("span", { children: band.name })
+        ]
+      },
+      band.name
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "relative h-[200px] w-full rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full block" }) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2 mt-3 text-center text-xs font-semibold", children: BRANCHES.map((branch, idx) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseEnter: () => setHoverBranch(idx),
+        onMouseLeave: () => setHoverBranch(null),
+        className: `py-1.5 rounded-lg cursor-pointer transition-all ${hoverBranch === idx ? theme === "dark" ? "bg-white/10 text-white" : "bg-neutral-200 text-black" : theme === "dark" ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+        children: branch
+      },
+      branch
+    )) })
+  ] });
+}
+
+export {
+  DitherStackedChart
+};

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

@@ -0,0 +1,99 @@
+// .generated/catalog/components/simple-comp/DeviceUsageChart.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEVICES = [
+  { name: "Today", data: [{ label: "Mobile", val: 65, color: "#FFFFFF" }, { label: "Desktop", val: 25, color: "#E2E8F0" }, { label: "Tablet", val: 10, color: "#94A3B8" }] },
+  { name: "Last 7D", data: [{ label: "Mobile", val: 55, color: "#FFFFFF" }, { label: "Desktop", val: 35, color: "#E2E8F0" }, { label: "Tablet", val: 10, color: "#94A3B8" }] }
+];
+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);
+};
+function DeviceUsageChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(0);
+  const period = DEVICES[periodIndex];
+  const canvasRef = useRef(null);
+  const targetDataRef = useRef(period.data);
+  const fromDataRef = useRef(period.data);
+  const morphStartTimeRef = useRef(0);
+  useEffect(() => {
+    fromDataRef.current = targetDataRef.current;
+    targetDataRef.current = period.data;
+    morphStartTimeRef.current = performance.now();
+  }, [period]);
+  useEffect(() => {
+    let req;
+    let time = 0;
+    const draw = () => {
+      time += 0.02;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      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.scale(dpr, dpr);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      let prog = Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
+      const e = 1 - Math.pow(2, -10 * prog);
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      const r = Math.min(cx, cy) * 0.85;
+      const rInner = r * 0.65;
+      const cell = Math.max(2, Math.round(rect.width / 200));
+      let startAngle = -Math.PI / 2;
+      for (let i = 0; i < period.data.length; i++) {
+        const target = targetDataRef.current[i];
+        const from = fromDataRef.current[i];
+        const val = from.val + (target.val - from.val) * e;
+        const angle = val / 100 * Math.PI * 2;
+        const endAngle = startAngle + angle;
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(cx, cy, r, startAngle, endAngle);
+        ctx.arc(cx, cy, rInner, endAngle, startAngle, true);
+        ctx.closePath();
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = target.color;
+        for (let x = Math.floor(cx - r); x <= Math.ceil(cx + r); x += cell) {
+          for (let y = Math.floor(cy - r); y <= Math.ceil(cy + r); y += cell) {
+            const jx = x + cell / 2;
+            const jy = y + cell / 2;
+            const jit = hash(jx, jy);
+            const dx = jx - cx;
+            const dy = jy - cy;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < rInner - cell || dist > r + cell) continue;
+            let a = Math.atan2(dy, dx);
+            if (a < 0) a += Math.PI * 2;
+            const waveRaw = Math.sin(jx * 0.05 + time) + Math.sin(jy * 0.05 + time * 0.7);
+            const mod = smoothstep(-1.5, 1.5, waveRaw);
+            const sz = cell * (0.4 + 0.4 * mod) * (0.8 + 0.4 * jit);
+            ctx.fillRect(x + (cell - sz) / 2, y + (cell - sz) / 2, sz, sz);
+          }
+        }
+        ctx.restore();
+        startAngle = endAngle;
+      }
+      ctx.restore();
+      req = requestAnimationFrame(draw);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [period]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex flex-col items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-[130px] h-[130px] flex items-center justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "absolute inset-0 w-full h-full" }) }) });
+}
+
+export {
+  DeviceUsageChart
+};