@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog-chunks/chunk-7XF4PVBJ.js

@@ -0,0 +1,85 @@
+import {
+  useCanvasSetup
+} from "./chunk-GDCQNKP7.js";
+
+// .generated/catalog/components/dither-charts/UptimeChart.tsx
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+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 UPTIME_DATA = Array.from({ length: 90 }, (_, i) => {
+  if (i === 12 || i === 45 || i === 78) return 0.8;
+  if (i === 22 || i === 60) return 0;
+  return 1;
+});
+function UptimeChart({ theme = "dark", compact = false }) {
+  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
+  useEffect(() => {
+    let req;
+    let lastFrame = 0;
+    let time = 0;
+    const draw = (now) => {
+      req = requestAnimationFrame(draw);
+      if (!isVisible.current) return;
+      if (now - lastFrame < 33) return;
+      lastFrame = now;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { width: w, height: h } = rect.current;
+      if (w <= 0 || h <= 0) return;
+      time += reducedMotion ? 0 : 0.02;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, w, h);
+      const days = UPTIME_DATA.length;
+      const barW = 6;
+      const gap = 2;
+      const perRow = Math.max(1, Math.floor(w / (barW + gap)));
+      const cell = 2;
+      const t2 = time;
+      for (let i = 0; i < days; i++) {
+        const row = Math.floor(i / perRow);
+        const col = i % perRow;
+        const x = col * (barW + gap);
+        const y = row * (26 + gap);
+        const val = UPTIME_DATA[i];
+        const color = val === 1 ? "#FFFFFF" : val === 0 ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.6)";
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(x, y, barW, 26);
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = color;
+        for (let tx = x; tx <= x + barW; tx += cell) {
+          for (let ty = y; ty <= y + 26; ty += cell) {
+            const jx = tx + cell / 2;
+            const jy = ty + cell / 2;
+            const jit = hash(jx, jy);
+            const waveRaw = reducedMotion ? 0 : Math.sin(jx * 0.05 + t2) + Math.sin(jy * 0.05 + t2 * 0.7);
+            const mod = smoothstep(-1.5, 1.5, waveRaw);
+            const sz = cell * (0.3 + 0.4 * mod) * (0.8 + 0.4 * jit);
+            ctx.fillRect(tx + (cell - sz) / 2, ty + (cell - sz) / 2, sz, sz);
+          }
+        }
+        ctx.restore();
+      }
+      ctx.restore();
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [reducedMotion]);
+  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-[60px] flex items-center justify-center px-2", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full" }) }) });
+}
+
+export {
+  UptimeChart
+};

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

@@ -0,0 +1,99 @@
+// .generated/catalog/components/simple-comp/ServerGauge.tsx
+import { useEffect, useRef, useState } from "react";
+import { useSpring } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var METRICS = [
+  { name: "CPU Load", base: 65, color: "#FFFFFF" },
+  { name: "Memory", base: 82, color: "#E2E8F0" },
+  { name: "Network", base: 45, color: "#CBD5E1" }
+];
+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 ServerGauge({ theme = "dark", compact = false }) {
+  const [metricIndex, setMetricIndex] = useState(0);
+  const canvasRef = useRef(null);
+  const metric = METRICS[metricIndex];
+  const valSpring = useSpring(metric.base, { stiffness: 120, damping: 20 });
+  useEffect(() => {
+    valSpring.set(metric.base);
+  }, [metricIndex, valSpring, metric.base]);
+  useEffect(() => {
+    let req;
+    let time = 0;
+    const draw = () => {
+      time += 0.05;
+      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);
+      const cx = rect.width / 2;
+      const cy = rect.height * 0.8;
+      const rOut = Math.min(rect.width * 0.4, rect.height * 0.7);
+      const rIn = rOut - 10;
+      const jitter = Math.sin(time) * 2 + Math.cos(time * 2.3) * 1.5;
+      const currentVal = valSpring.get() + jitter;
+      const startAngle = Math.PI;
+      const endAngle = Math.PI * 2;
+      const valAngle = startAngle + currentVal / 100 * Math.PI;
+      ctx.beginPath();
+      ctx.arc(cx, cy, rOut, startAngle, endAngle);
+      ctx.arc(cx, cy, rIn, endAngle, startAngle, true);
+      ctx.closePath();
+      ctx.fillStyle = "rgba(255,255,255,0.1)";
+      ctx.fill();
+      if (currentVal > 0) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(cx, cy, rOut, startAngle, valAngle);
+        ctx.arc(cx, cy, rIn, valAngle, startAngle, true);
+        ctx.closePath();
+        ctx.clip();
+        ctx.globalAlpha = 0.9;
+        ctx.fillStyle = "#FFFFFF";
+        const cell = Math.max(2, Math.round(rect.width / 200));
+        for (let x = Math.floor(cx - rOut); x <= Math.ceil(cx + rOut); x += cell) {
+          for (let y = Math.floor(cy - rOut); y <= Math.ceil(cy); 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 < rIn - cell || dist > rOut + 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();
+      }
+      ctx.restore();
+      req = requestAnimationFrame(draw);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [metric, valSpring]);
+  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 {
+  ServerGauge
+};

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

@@ -0,0 +1,105 @@
+import {
+  useCanvasSetup
+} from "./chunk-GDCQNKP7.js";
+
+// .generated/catalog/components/dither-charts/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, rect, isVisible, reducedMotion } = useCanvasSetup();
+  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 = () => {
+      if (!isVisible.current) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { width: w, height: h } = rect.current;
+      if (w === 0 || h === 0) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      time += reducedMotion ? 0 : 0.02;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, w, h);
+      const prog = reducedMotion ? 1 : Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
+      const e = 1 - Math.pow(2, -10 * prog);
+      const cx = w / 2;
+      const cy = h / 2;
+      const r = Math.min(cx, cy) * 0.85;
+      const rInner = r * 0.65;
+      const cell = Math.max(2, Math.round(w / 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;
+            const waveRaw = reducedMotion ? 0 : 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, reducedMotion]);
+  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
+};

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

@@ -0,0 +1,349 @@
+import {
+  cn
+} from "./chunk-KRXJK3FG.js";
+
+// .generated/catalog/components/dither-charts/ChartCard.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, AnimatePresence, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { Users } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLANS = [
+  { name: "Unlimited", color: "#FFFFFF", base: 1240 },
+  { name: "30-day pass", color: "#E2E8F0", base: 980 },
+  { name: "10-class pack", color: "#CBD5E1", base: 620 },
+  { name: "Drop-in", color: "#94A3B8", base: 410 },
+  { name: "Student", color: "#64748B", base: 300 }
+];
+var PERIODS = [
+  { name: "Week", mult: 0.42 },
+  { name: "Month", mult: 1 },
+  { name: "Quarter", mult: 2.6 },
+  { name: "Year", mult: 8.4 }
+];
+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})`;
+};
+function AnimatedNumber({ 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 drawRoundedWedge = (ctx, cx, cy, rIn, rOut, aStart, aEnd, cr) => {
+  const sweep = aEnd - aStart;
+  const maxCr = Math.min(cr, (rOut - rIn) / 2, sweep * rIn / 2);
+  if (sweep <= 1e-3) return;
+  const crIn = maxCr;
+  const crOut = maxCr;
+  const aStartIn = aStart + crIn / rIn;
+  const aEndIn = aEnd - crIn / rIn;
+  const aStartOut = aStart + crOut / rOut;
+  const aEndOut = aEnd - crOut / rOut;
+  ctx.moveTo(cx + rIn * Math.cos(aStartIn), cy + rIn * Math.sin(aStartIn));
+  ctx.arc(cx, cy, rIn, aStartIn, aEndIn);
+  ctx.arcTo(
+    cx + rIn * Math.cos(aEnd),
+    cy + rIn * Math.sin(aEnd),
+    cx + rOut * Math.cos(aEnd),
+    cy + rOut * Math.sin(aEnd),
+    crIn
+  );
+  ctx.arcTo(
+    cx + rOut * Math.cos(aEnd),
+    cy + rOut * Math.sin(aEnd),
+    cx + rOut * Math.cos(aEndOut),
+    cy + rOut * Math.sin(aEndOut),
+    crOut
+  );
+  ctx.arc(cx, cy, rOut, aEndOut, aStartOut, true);
+  ctx.arcTo(
+    cx + rOut * Math.cos(aStart),
+    cy + rOut * Math.sin(aStart),
+    cx + rIn * Math.cos(aStart),
+    cy + rIn * Math.sin(aStart),
+    crOut
+  );
+  ctx.arcTo(
+    cx + rIn * Math.cos(aStart),
+    cy + rIn * Math.sin(aStart),
+    cx + rIn * Math.cos(aStartIn),
+    cy + rIn * Math.sin(aStartIn),
+    crIn
+  );
+};
+function ChartCard() {
+  const [periodIndex, setPeriodIndex] = useState(1);
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const canvasRef = useRef(null);
+  const period = PERIODS[periodIndex];
+  const { values, shares, total } = useMemo(() => {
+    let newTotal = 0;
+    const newValues = PLANS.map((plan, i) => {
+      const w = 0.78 + 0.4 * (0.5 + 0.5 * Math.sin(i * 1.9 + periodIndex * 1.3));
+      const val = Math.round(plan.base * period.mult * w);
+      newTotal += val;
+      return val;
+    });
+    const newShares = newValues.map((v) => v / newTotal);
+    return { values: newValues, shares: newShares, total: newTotal };
+  }, [periodIndex]);
+  const timeRef = useRef(0);
+  const requestRef = useRef(void 0);
+  const morphStartTimeRef = useRef(0);
+  const fromSharesRef = useRef([]);
+  const targetSharesRef = useRef([]);
+  const dispSharesRef = useRef([]);
+  const hoverRef = useRef(hoverIndex);
+  useEffect(() => {
+    hoverRef.current = hoverIndex;
+  }, [hoverIndex]);
+  useEffect(() => {
+    if (dispSharesRef.current.length === 0) {
+      dispSharesRef.current = [...shares];
+      fromSharesRef.current = [...shares];
+      targetSharesRef.current = [...shares];
+    } else {
+      fromSharesRef.current = [...dispSharesRef.current];
+      targetSharesRef.current = [...shares];
+      morphStartTimeRef.current = performance.now();
+    }
+  }, [shares]);
+  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 logicalSize = 200;
+      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(rect.width * dpr / logicalSize, rect.height * dpr / logicalSize);
+      let t = 0;
+      if (morphStartTimeRef.current > 0) {
+        t = (performance.now() - morphStartTimeRef.current) / 500;
+        if (t > 1) t = 1;
+      } else {
+        t = 1;
+      }
+      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reducedMotion) {
+        t = 1;
+        timeRef.current = 0;
+      }
+      const e = 1 - Math.pow(2, -10 * t);
+      for (let i = 0; i < targetSharesRef.current.length; i++) {
+        dispSharesRef.current[i] = fromSharesRef.current[i] + (targetSharesRef.current[i] - fromSharesRef.current[i]) * e;
+      }
+      let startAngle = -Math.PI / 2;
+      const gap = 0.07;
+      const currentHover = hoverRef.current;
+      for (let i = 0; i < dispSharesRef.current.length; i++) {
+        const share = dispSharesRef.current[i];
+        if (share === 0) continue;
+        let sweep = share * Math.PI * 2;
+        let aStart = startAngle + gap / 2;
+        let aEnd = startAngle + sweep - gap / 2;
+        if (aEnd < aStart) aEnd = aStart;
+        ctx.save();
+        const isHovered = currentHover === i;
+        const isAnyHovered = currentHover !== null;
+        if (isHovered) {
+          const mid = (aStart + aEnd) / 2;
+          ctx.translate(Math.cos(mid) * 6, Math.sin(mid) * 6);
+        }
+        ctx.beginPath();
+        drawRoundedWedge(ctx, 100, 100, 55, 86, aStart, aEnd, 6);
+        ctx.clip();
+        ctx.globalAlpha = isHovered ? 1 : isAnyHovered ? 0.3 * 0.72 : 0.72;
+        ctx.fillStyle = PLANS[i].color;
+        if (isHovered) {
+          ctx.shadowColor = hexToRgba(PLANS[i].color, 0.55);
+          ctx.shadowBlur = 5;
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = 0;
+        }
+        const cell = 4.6;
+        for (let x = 14; x <= 186; x += cell) {
+          for (let y = 14; y <= 186; y += cell) {
+            const dx = x - 100;
+            const dy = y - 100;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < 55 - cell || dist > 86 + cell) continue;
+            let a = Math.atan2(dy, dx);
+            let normalizedA = a - aStart;
+            while (normalizedA < 0) normalizedA += Math.PI * 2;
+            while (normalizedA >= Math.PI * 2) normalizedA -= Math.PI * 2;
+            if (normalizedA > aEnd - aStart) continue;
+            const fullness = smoothstep(0.62, 1, (dist - 55) / (86 - 55));
+            const waveRaw = Math.sin(dist * 0.1 - timeRef.current) + Math.sin(a * 3 + timeRef.current * 1.5) + Math.sin(dx * 0.05 + dy * 0.05 + timeRef.current * 2);
+            const wave = smoothstep(-1.5, 1.5, waveRaw);
+            const jitter = hash(x, y);
+            const size = cell * ((isHovered ? 0.46 : 0.34) + 0.36 * fullness + 0.26 * wave) * (0.78 + 0.42 * jitter);
+            ctx.fillRect(x - size / 2, y - size / 2, size, size);
+          }
+        }
+        ctx.restore();
+        startAngle += sweep;
+      }
+      ctx.restore();
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, []);
+  const handleCanvasMove = (e) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const lx = x / rect.width * 200 - 100;
+    const ly = y / rect.height * 200 - 100;
+    const dist = Math.sqrt(lx * lx + ly * ly);
+    if (dist < 55 || dist > 86) {
+      if (hoverIndex !== null) setHoverIndex(null);
+      return;
+    }
+    let angle = Math.atan2(ly, lx);
+    let startAngle = -Math.PI / 2;
+    const gap = 0.07;
+    let found = null;
+    for (let i = 0; i < dispSharesRef.current.length; i++) {
+      const share = dispSharesRef.current[i];
+      if (share === 0) continue;
+      let sweep = share * Math.PI * 2;
+      let aStart = startAngle + gap / 2;
+      let aEnd = startAngle + sweep - gap / 2;
+      let normalizedA = angle - aStart;
+      while (normalizedA < 0) normalizedA += Math.PI * 2;
+      while (normalizedA >= Math.PI * 2) normalizedA -= Math.PI * 2;
+      if (normalizedA <= aEnd - aStart) {
+        found = i;
+        break;
+      }
+      startAngle += sweep;
+    }
+    if (found !== hoverIndex) setHoverIndex(found);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[400px] flex flex-col items-center gap-[14px]", style: { zoom: 0.86 }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full bg-[#FAFAFB] rounded-[14px] p-1.5 flex flex-col gap-1.5 shadow-sm border border-black/5", children: [
+      /* @__PURE__ */ jsxs("div", { 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: "Members by plan" }),
+            /* @__PURE__ */ jsx(Users, { size: 14, className: "text-[#B6B8BF]" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "relative h-4 overflow-hidden w-20 flex justify-end", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+            motion.span,
+            {
+              initial: { opacity: 0, y: -10, filter: "blur(4px)" },
+              animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+              exit: { opacity: 0, y: 10, filter: "blur(4px)" },
+              transition: { duration: 0.18, ease: [0.19, 1, 0.22, 1] },
+              className: "absolute right-0 text-[12px] text-[#8A90A0] whitespace-nowrap",
+              children: [
+                period.name,
+                " to date"
+              ]
+            },
+            period.name
+          ) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[7px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[31px] font-semibold tracking-[-0.015em] text-[#171717] leading-[1.15]", children: /* @__PURE__ */ jsx(AnimatedNumber, { value: total }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[#8A90A0]", children: "total members" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[10px] p-[18px] flex items-center gap-[18px] 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: "relative w-[min(190px,44%)] aspect-square shrink-0", children: /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute inset-0 w-full h-full cursor-pointer touch-none",
+            onMouseMove: handleCanvasMove,
+            onMouseLeave: () => setHoverIndex(null)
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex flex-col gap-0.5", children: PLANS.map((plan, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseEnter: () => setHoverIndex(i),
+            onMouseLeave: () => setHoverIndex(null),
+            className: cn(
+              "flex items-center gap-[9px] p-[6px_8px] rounded-[7px] cursor-pointer transition-all duration-150",
+              hoverIndex === i ? "bg-blue-50/50" : "bg-transparent",
+              hoverIndex !== null && hoverIndex !== i ? "opacity-50" : "opacity-100"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-[9px] h-[9px] rounded-[3px] shrink-0", style: { backgroundColor: plan.color } }),
+              /* @__PURE__ */ jsx("span", { className: cn(
+                "flex-1 text-[12.5px] truncate transition-colors duration-150",
+                hoverIndex === i ? "text-[#171717] font-medium" : "text-[#5F5F6F] font-normal"
+              ), children: plan.name }),
+              /* @__PURE__ */ jsx("span", { className: "text-[12.5px] font-medium text-[#171717]", children: /* @__PURE__ */ jsx(AnimatedNumber, { value: values[i] }) })
+            ]
+          },
+          plan.name
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "inline-flex bg-[#F3F4F6] rounded-[9px] p-[3px] gap-[2px]", children: PERIODS.map((p, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          setPeriodIndex(i);
+          setHoverIndex(null);
+        },
+        className: cn(
+          "relative px-[14px] py-[5px] rounded-[7px] text-[12px] font-medium transition-colors outline-none",
+          period.name === p.name ? "text-[#171717] font-semibold" : "text-[#8A90A0] hover:text-[#5F5F6F]"
+        ),
+        children: [
+          period.name === p.name && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: "activePeriod",
+              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 {
+  ChartCard
+};