@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,169 @@
+// .generated/catalog/components/PageTransitionOverlay.tsx
+import { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PageTransitionOverlay = ({
+  transitionId,
+  isAnimating,
+  theme = "dark",
+  speedMultiplier = 1
+}) => {
+  const isDark = theme === "dark";
+  const duration = 0.7 * speedMultiplier;
+  const EASING = [0.83, 0, 0.17, 1];
+  const svgRef = useRef(null);
+  const pathRefs = useRef([]);
+  useEffect(() => {
+    if (transitionId !== "obsidian-liquid-wave" && transitionId !== "liquid-wave") return;
+    if (!isAnimating) {
+      pathRefs.current.forEach((path) => {
+        if (path) path.setAttribute("d", "M 0 100 V 100 H 100 V 100 Z");
+      });
+      return;
+    }
+    let animId;
+    const numPoints = 14;
+    const numPaths = 3;
+    const startTime = performance.now();
+    const durationMs = 1200 * speedMultiplier;
+    const delays = Array.from(
+      { length: numPaths },
+      (_, i) => Array.from({ length: numPoints }, () => i * 0.07 + Math.random() * 0.12)
+    );
+    const animateFrame = (now) => {
+      const elapsedSec = (now - startTime) / 1e3;
+      pathRefs.current.forEach((path, i) => {
+        if (!path) return;
+        const stepX = 100 / (numPoints - 1);
+        const pointsY = delays[i].map((delay) => {
+          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / (0.6 * speedMultiplier)));
+          const easeProgress = rawProgress < 0.5 ? 2 * rawProgress * rawProgress : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;
+          return 100 - easeProgress * 112;
+        });
+        let d = `M 0 100 V ${pointsY[0]}`;
+        for (let j = 0; j < numPoints - 1; j++) {
+          const currentX = j * stepX;
+          const nextX = (j + 1) * stepX;
+          const cpX = currentX + stepX * 0.5;
+          d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`;
+        }
+        d += ` V 100 H 0 Z`;
+        path.setAttribute("d", d);
+      });
+      if (now - startTime < durationMs) {
+        animId = requestAnimationFrame(animateFrame);
+      }
+    };
+    animId = requestAnimationFrame(animateFrame);
+    return () => cancelAnimationFrame(animId);
+  }, [isAnimating, transitionId, speedMultiplier]);
+  if (!isAnimating && transitionId !== "obsidian-liquid-wave" && transitionId !== "liquid-wave") {
+    return null;
+  }
+  if (transitionId === "spatial-door-portal" || transitionId === "double-doors") {
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-40 pointer-events-none [perspective:800px] flex overflow-hidden rounded-[inherit]", children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { rotateY: 0 },
+          animate: { rotateY: -85, x: "-10%" },
+          transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },
+          className: `w-1/2 h-full origin-left border-r ${isDark ? "bg-[#181818] border-white/10" : "bg-white border-neutral-300"} shadow-2xl`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { rotateY: 0 },
+          animate: { rotateY: 85, x: "10%" },
+          transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },
+          className: `w-1/2 h-full origin-right border-l ${isDark ? "bg-[#181818] border-white/10" : "bg-white border-neutral-300"} shadow-2xl`
+        }
+      )
+    ] });
+  }
+  if (transitionId === "french-doors-3d" || transitionId === "french-doors") {
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-40 pointer-events-none [perspective:900px] flex overflow-hidden rounded-[inherit]", children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { rotateY: 90, opacity: 0 },
+          animate: { rotateY: 0, opacity: 1 },
+          transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+          className: `w-1/2 h-full origin-right border-r ${isDark ? "bg-[#1c1c1e] border-white/15" : "bg-neutral-100 border-neutral-300"} shadow-2xl`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { rotateY: -90, opacity: 0 },
+          animate: { rotateY: 0, opacity: 1 },
+          transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+          className: `w-1/2 h-full origin-left border-l ${isDark ? "bg-[#1c1c1e] border-white/15" : "bg-neutral-100 border-neutral-300"} shadow-2xl`
+        }
+      )
+    ] });
+  }
+  if (transitionId === "radial-iris-mask") {
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: `absolute inset-0 z-40 pointer-events-none origin-center rounded-[inherit] ${isDark ? "bg-[#121212]" : "bg-[#ffffff]"}`,
+        style: { clipPath: "circle(0% at 50% 50%)" },
+        animate: { clipPath: "circle(150% at 50% 50%)" },
+        transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] }
+      }
+    );
+  }
+  if (transitionId === "perspective-flip-stage") {
+    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-40 pointer-events-none [perspective:700px] flex items-center justify-center rounded-[inherit]", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { rotateX: 90, scale: 0.85, opacity: 0 },
+        animate: { rotateX: 0, scale: 1, opacity: 1 },
+        transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },
+        className: `w-full h-full border ${isDark ? "bg-[#181818] border-white/10" : "bg-white border-neutral-200"} shadow-2xl`
+      }
+    ) });
+  }
+  if (transitionId === "staggered-glass-curtain") {
+    const COLUMNS = 5;
+    return /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-0 z-40 flex pointer-events-none overflow-hidden rounded-[inherit]", children: [...Array(COLUMNS)].map((_, i) => /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { y: "-105%" },
+        animate: { y: "0%" },
+        transition: { duration: 0.65, ease: EASING, delay: i * 0.05 },
+        className: `h-full flex-1 backdrop-blur-md border-r last:border-r-0 ${isDark ? "bg-[#181818]/95 border-white/5" : "bg-white/95 border-neutral-200"}`
+      },
+      i
+    )) });
+  }
+  if (transitionId === "obsidian-liquid-wave" || transitionId === "liquid-wave") {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        className: "absolute inset-0 w-full h-full pointer-events-none z-40 rounded-[inherit]",
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        children: [
+          /* @__PURE__ */ jsx("path", { ref: (el) => {
+            pathRefs.current[0] = el;
+          }, fill: isDark ? "#262626" : "#e5e5e5", style: { opacity: 0.6 } }),
+          /* @__PURE__ */ jsx("path", { ref: (el) => {
+            pathRefs.current[1] = el;
+          }, fill: isDark ? "#1c1c1c" : "#f4f4f6", style: { opacity: 0.85 } }),
+          /* @__PURE__ */ jsx("path", { ref: (el) => {
+            pathRefs.current[2] = el;
+          }, fill: isDark ? "#121212" : "#ffffff" })
+        ]
+      }
+    );
+  }
+  return null;
+};
+
+export {
+  PageTransitionOverlay
+};

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

@@ -0,0 +1,28 @@
+// .generated/catalog/hooks/useIsMobile.ts
+import { useState, useEffect } from "react";
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < breakpoint || window.matchMedia(`(max-width: ${breakpoint}px)`).matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const onChange = (e) => {
+      setIsMobile(e.matches);
+    };
+    setIsMobile(mql.matches);
+    if (mql.addEventListener) {
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    } else {
+      mql.addListener(onChange);
+      return () => mql.removeListener(onChange);
+    }
+  }, [breakpoint]);
+  return isMobile;
+}
+
+export {
+  useIsMobile
+};

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

@@ -0,0 +1,85 @@
+// .generated/catalog/components/simple-comp/StorageUsageChart.tsx
+import { useEffect, useRef, useState } from "react";
+import { useSpring } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var STORAGE_VIEWS = [
+  { name: "Database", total: 500, used: 340, color: "#FFFFFF" },
+  { name: "Assets", total: 1e3, used: 850, color: "#E2E8F0" },
+  { name: "Backups", total: 2e3, used: 450, 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 StorageUsageChart({ theme = "dark", compact = false }) {
+  const [viewIndex, setViewIndex] = useState(0);
+  const view = STORAGE_VIEWS[viewIndex];
+  const percentage = view.used / view.total * 100;
+  const canvasRef = useRef(null);
+  const widthSpring = useSpring(percentage, { stiffness: 150, damping: 20 });
+  useEffect(() => {
+    widthSpring.set(percentage);
+  }, [percentage, widthSpring]);
+  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);
+      const w = rect.width;
+      const h = rect.height;
+      const r = h / 2;
+      const fillW = widthSpring.get() / 100 * w;
+      const cell = Math.max(2, Math.round(rect.width / 200));
+      ctx.beginPath();
+      ctx.rect(0, 0, w, h);
+      ctx.fillStyle = "rgba(255,255,255,0.1)";
+      ctx.fill();
+      if (fillW > 0) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, 0, fillW, h);
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = "#FFFFFF";
+        for (let tx = 0; tx <= Math.ceil(fillW); tx += cell) {
+          for (let ty = 0; ty <= h; ty += cell) {
+            const jx = tx + cell / 2;
+            const jy = ty + cell / 2;
+            const jit = hash(jx, jy);
+            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 * 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);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [view, widthSpring]);
+  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-[32px] flex items-center justify-center px-4", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full" }) }) });
+}
+
+export {
+  StorageUsageChart
+};

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

@@ -0,0 +1,15 @@
+import {
+  supportedRegistryIds
+} from "./chunk-FXF53HPE.js";
+
+// .generated/catalog/data/installCommand.ts
+var supported = new Set(supportedRegistryIds);
+var COPY_SOURCE_GUIDANCE = "Copy the source from the @mova-ui/react/catalog/... export listed in registry/manifest.json. This example is not available as an Mova CLI component.";
+function getInstallCommand(id) {
+  return supported.has(id) ? `npx @mova-ui/react add ${id}` : COPY_SOURCE_GUIDANCE;
+}
+
+export {
+  COPY_SOURCE_GUIDANCE,
+  getInstallCommand
+};

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

@@ -0,0 +1,53 @@
+// .generated/catalog/components/dither-charts/lib/recharts-tooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DitherChartTooltipContent({
+  active,
+  payload,
+  label,
+  theme = "dark",
+  indicator = "dot",
+  formatter
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `px-3 py-2 rounded-xl text-xs shadow-2xl backdrop-blur-md border transition-all pointer-events-none font-sans z-50 ${isDark ? "bg-[#181818]/90 border-white/10 text-white shadow-black/80" : "bg-white/95 border-neutral-200 text-neutral-900 shadow-neutral-300/50"}`,
+      children: [
+        label && /* @__PURE__ */ jsx("div", { className: `font-medium mb-1.5 pb-1 border-b tracking-tight ${isDark ? "border-white/10 text-neutral-300" : "border-neutral-200 text-neutral-600"}`, children: label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: payload.map((item, idx) => {
+          const color = item.color || item.fill || (isDark ? "#FFFFFF" : "#000000");
+          const valueDisplay = formatter ? formatter(item.value, item.name) : typeof item.value === "number" ? item.value.toLocaleString() : item.value;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              indicator === "dot" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "w-2 h-2 rounded-full ring-1 ring-white/20",
+                  style: { backgroundColor: color }
+                }
+              ),
+              indicator === "line" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "w-2.5 h-0.5 rounded-full",
+                  style: { backgroundColor: color }
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: `font-normal ${isDark ? "text-neutral-400" : "text-neutral-600"}`, children: [
+                item.name || item.dataKey,
+                ":"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums", children: valueDisplay })
+          ] }, idx);
+        }) })
+      ]
+    }
+  );
+}
+
+export {
+  DitherChartTooltipContent
+};

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

@@ -0,0 +1,89 @@
+// .generated/catalog/components/simple-comp/DitherFunnelChart.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var STAGES_DATA = [
+  { name: "Q1 Funnel", stages: [{ label: "Visitors", val: 100, color: "#FFFFFF" }, { label: "Leads", val: 62, color: "#E2E8F0" }, { label: "Deals", val: 38, color: "#CBD5E1" }, { label: "Won", val: 18, color: "#94A3B8" }] },
+  { name: "Q2 Funnel", stages: [{ label: "Visitors", val: 100, color: "#FFFFFF" }, { label: "Leads", val: 74, color: "#E2E8F0" }, { label: "Deals", val: 45, color: "#CBD5E1" }, { label: "Won", val: 24, 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 DitherFunnelChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(0);
+  const period = STAGES_DATA[periodIndex];
+  const canvasRef = useRef(null);
+  const targetDataRef = useRef(period.stages);
+  const fromDataRef = useRef(period.stages);
+  const morphStartTimeRef = useRef(0);
+  useEffect(() => {
+    fromDataRef.current = targetDataRef.current;
+    targetDataRef.current = period.stages;
+    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 count = period.stages.length;
+      const w = rect.width;
+      const h = rect.height;
+      const rowH = (h - (count - 1) * 6) / count;
+      const cell = Math.max(2, Math.round(rect.width / 200));
+      for (let i = 0; i < count; i++) {
+        const target = targetDataRef.current[i];
+        const from = fromDataRef.current[i];
+        const val = from.val + (target.val - from.val) * e;
+        const stageW = val / 100 * w;
+        const yTop = i * (rowH + 6);
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, yTop, stageW, rowH);
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = target.color;
+        for (let bx = 0; bx <= Math.ceil(stageW); bx += cell) {
+          for (let by = Math.floor(yTop); by <= Math.ceil(yTop + rowH); by += cell) {
+            const jx = bx + cell / 2;
+            const jy = by + cell / 2;
+            const jit = hash(jx, jy);
+            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.35 + 0.35 * mod) * (0.8 + 0.4 * jit);
+            ctx.fillRect(bx + (cell - sz) / 2, by + (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-[140px] flex items-center justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full pointer-events-none" }) }) });
+}
+
+export {
+  DitherFunnelChart
+};