@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/PageTransitionCard.js

@@ -0,0 +1,110 @@
+"use client";
+import {
+  IconSwap,
+  IconSwapItem
+} from "../../catalog-chunks/chunk-3TYA5TCG.js";
+import {
+  useWebHaptics
+} from "../../catalog-chunks/chunk-EC4R54F3.js";
+import {
+  PageTransitionOverlay
+} from "../../catalog-chunks/chunk-SIL53FHG.js";
+
+// .generated/catalog/components/PageTransitionCard.tsx
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PageTransitionCard = ({
+  preset,
+  theme,
+  showToast
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [activePage, setActivePage] = useState("A");
+  const [isCopied, setIsCopied] = useState(false);
+  const { trigger: triggerHaptic } = useWebHaptics();
+  const handleMouseEnter = () => {
+    if (isAnimating) return;
+    triggerHaptic("light");
+    setIsAnimating(true);
+    setTimeout(() => {
+      setActivePage((prev) => prev === "A" ? "B" : "A");
+    }, 380);
+    setTimeout(() => {
+      setIsAnimating(false);
+    }, 850);
+  };
+  const handleCopyCode = (e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(preset.code);
+    triggerHaptic("success");
+    setIsCopied(true);
+    showToast(`Copied ${preset.name} transition code!`);
+    setTimeout(() => setIsCopied(false), 2e3);
+  };
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      className: `relative w-full max-w-[320px] sm:w-[320px] h-[220px] sm:h-[268px] rounded-[24px] transition-all duration-300 group cursor-pointer ${isDark ? "bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]" : "bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04),0_1px_3px_rgba(0,0,0,0.02)] border border-neutral-100/85 hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)] text-black"}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `absolute left-[12px] top-[12px] right-[12px] bottom-[68px] rounded-[14px] flex items-center justify-center overflow-hidden transition-colors duration-300 ${isDark ? "bg-[#131313]" : "bg-[#f4f4f6]"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-[14px] pointer-events-none z-10 ${isDark ? "shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]" : "shadow-[inset_0_0_0_1px_rgba(0,0,0,0.03)]"}` }),
+              /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none relative transition-colors duration-300 ${activePage === "A" ? isDark ? "bg-[#121212] text-white" : "bg-[#ffffff] text-black" : isDark ? "bg-[#181818] text-white" : "bg-[#f8f9fa] text-black"}`, children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between z-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full ${activePage === "A" ? isDark ? "bg-white" : "bg-black" : isDark ? "bg-neutral-500" : "bg-neutral-400"}` }),
+                    /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium tracking-tight ${isDark ? "text-neutral-400" : "text-neutral-600"}`, children: activePage === "A" ? "Page A" : "Page B" })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: `h-1.5 w-10 rounded-full ${isDark ? "bg-white/10" : "bg-black/10"}` })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "my-auto z-0 flex flex-col gap-1.5 items-center text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: `text-[12px] font-semibold tracking-tight ${isDark ? "text-[#ededed]" : "text-black"}`, children: "Mova Motion" }),
+                  /* @__PURE__ */ jsx("div", { className: `text-[10px] max-w-[180px] leading-snug line-clamp-1 ${isDark ? "text-[#767676]" : "text-black/60"}`, children: preset.description })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between z-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: `h-1.5 w-12 rounded-full ${isDark ? "bg-white/10" : "bg-black/10"}` }),
+                  /* @__PURE__ */ jsx("div", { className: `h-1.5 w-6 rounded-full ${isDark ? "bg-white/10" : "bg-black/10"}` })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                PageTransitionOverlay,
+                {
+                  transitionId: preset.id,
+                  isAnimating,
+                  theme,
+                  speedMultiplier: 1
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-[20px] bottom-[14px] w-[calc(100%-80px)] flex flex-col gap-[2px]", children: [
+          /* @__PURE__ */ jsx("div", { className: `text-[13px] font-semibold leading-[18px] transition-colors ${isDark ? "text-[#ededed]" : "text-black"}`, children: preset.name }),
+          /* @__PURE__ */ jsxs("div", { className: `text-[11px] font-normal leading-[13px] transition-colors capitalize ${isDark ? "text-[#767676]" : "text-black opacity-70"}`, children: [
+            preset.category,
+            " transition"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopyCode,
+            type: "button",
+            className: `absolute right-[20px] bottom-[12px] w-[32px] h-[32px] rounded-full flex items-center justify-center transition-colors cursor-pointer border-0 focus-visible:outline focus-visible:outline-2 ${isDark ? "bg-white/[0.08] hover:bg-white/[0.12] text-[#ededed]/60 hover:text-[#ededed]" : "bg-neutral-100 hover:bg-neutral-200 text-black hover:text-black"}`,
+            "aria-label": "Copy transition code",
+            children: /* @__PURE__ */ jsx(IconSwap, { children: /* @__PURE__ */ jsx(IconSwapItem, { children: isCopied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-400" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 transition-transform duration-300 group-hover:scale-110" }) }, isCopied ? "check" : "copy") })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  PageTransitionCard
+};

package/dist/catalog/components/PageTransitionModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TransitionPreset } from '../data/transitions';
+interface PageTransitionModalProps {
+    preset: TransitionPreset | null;
+    theme: 'dark' | 'light';
+    onClose: () => void;
+    showToast: (msg: string) => void;
+}
+export declare const PageTransitionModal: React.FC<PageTransitionModalProps>;
+export {};

package/dist/catalog/components/PageTransitionModal.js

@@ -0,0 +1,180 @@
+"use client";
+import {
+  useWebHaptics
+} from "../../catalog-chunks/chunk-EC4R54F3.js";
+import {
+  PageTransitionOverlay
+} from "../../catalog-chunks/chunk-SIL53FHG.js";
+
+// .generated/catalog/components/PageTransitionModal.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, RefreshCw, Check, Terminal, Code2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PageTransitionModal = ({
+  preset,
+  theme,
+  onClose,
+  showToast
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [activePage, setActivePage] = useState("A");
+  const [speedMultiplier, setSpeedMultiplier] = useState(1);
+  const [copiedType, setCopiedType] = useState(null);
+  const { trigger: triggerHaptic } = useWebHaptics();
+  if (!preset) return null;
+  const triggerModalTransition = () => {
+    if (isAnimating) return;
+    triggerHaptic("medium");
+    setIsAnimating(true);
+    setTimeout(() => {
+      setActivePage((prev) => prev === "A" ? "B" : "A");
+    }, 380 * speedMultiplier);
+    setTimeout(() => {
+      setIsAnimating(false);
+    }, 850 * speedMultiplier);
+  };
+  const handleCopyCode = () => {
+    navigator.clipboard.writeText(preset.code);
+    triggerHaptic("success");
+    setCopiedType("code");
+    showToast(`Copied ${preset.name} transition code!`);
+    setTimeout(() => setCopiedType(null), 2e3);
+  };
+  const handleCopyCli = () => {
+    navigator.clipboard.writeText(preset.cliCommand);
+    triggerHaptic("light");
+    setCopiedType("cli");
+    showToast(`Copied setup instructions: ${preset.cliCommand}`);
+    setTimeout(() => setCopiedType(null), 2e3);
+  };
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-md", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, scale: 0.95, y: 10 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.95, y: 10 },
+      className: `relative w-full max-w-4xl max-h-[90vh] rounded-3xl border overflow-hidden flex flex-col shadow-2xl ${isDark ? "bg-[#121216] border-white/10 text-white" : "bg-white border-neutral-200 text-black"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-5 border-b border-white/10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-bold px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-400 border border-indigo-500/30", children: preset.category }),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold tracking-tight", children: preset.name })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: `p-2 rounded-full cursor-pointer transition-colors ${isDark ? "hover:bg-white/10 text-neutral-400 hover:text-white" : "hover:bg-neutral-100 text-neutral-600"}`,
+              children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-6 overflow-y-auto flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: `relative w-full aspect-[16/9] min-h-[300px] rounded-2xl border overflow-hidden shadow-xl ${isDark ? "bg-[#0a0a0c] border-white/10" : "bg-neutral-900 border-neutral-800"}`, children: [
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activePage === "A" ? /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-6 flex flex-col justify-between bg-gradient-to-br from-[#0d0e14] via-[#090a0e] to-[#121019] text-white", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-indigo-400", children: "MOVA STUDIO CANVAS (PAGE A)" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400", children: "60 FPS" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "my-auto", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-2xl font-bold", children: preset.name }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-neutral-400 mt-1 max-w-md", children: preset.description })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] font-mono text-neutral-500", children: "CLICK TRIGGER BELOW TO TEST MOTION" })
+            ] }, "modal-page-A") : /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-6 flex flex-col justify-between bg-gradient-to-br from-[#0a120e] via-[#090d0b] to-[#0f1712] text-white", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-emerald-400", children: "APEX AI TERMINAL (PAGE B)" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono px-2 py-0.5 rounded-full bg-teal-500/20 text-teal-400", children: "LATENCY < 1ms" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "my-auto", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-2xl font-bold", children: preset.name }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-neutral-400 mt-1 max-w-md", children: "Seamless component trees swap on route transition." })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] font-mono text-neutral-500", children: "CLICK TRIGGER BELOW TO TEST MOTION" })
+            ] }, "modal-page-B") }),
+            /* @__PURE__ */ jsx(
+              PageTransitionOverlay,
+              {
+                transitionId: preset.id,
+                isAnimating,
+                theme,
+                speedMultiplier
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: triggerModalTransition,
+                  disabled: isAnimating,
+                  className: "h-10 px-5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs flex items-center gap-2 cursor-pointer transition-all active:scale-95 shadow-lg shadow-indigo-600/25 border-0",
+                  children: [
+                    /* @__PURE__ */ jsx(RefreshCw, { className: `w-4 h-4 ${isAnimating ? "animate-spin" : ""}` }),
+                    /* @__PURE__ */ jsx("span", { children: "Trigger Transition" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-white/5 p-1 rounded-xl border border-white/10", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono px-2 text-neutral-400", children: "Speed:" }),
+                [
+                  { label: "0.6x", val: 0.65 },
+                  { label: "1.0x", val: 1 },
+                  { label: "1.5x", val: 1.4 }
+                ].map((sp) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setSpeedMultiplier(sp.val),
+                    className: `h-7 px-2.5 rounded-lg text-[11px] font-mono font-semibold cursor-pointer border-0 ${speedMultiplier === sp.val ? "bg-indigo-600 text-white" : "text-neutral-400 hover:text-white"}`,
+                    children: sp.label
+                  },
+                  sp.label
+                ))
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleCopyCode,
+                  className: "h-10 px-4 rounded-xl bg-white/10 hover:bg-white/20 text-white font-semibold text-xs flex items-center gap-1.5 cursor-pointer border-0",
+                  children: [
+                    copiedType === "code" ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-emerald-400" }) : /* @__PURE__ */ jsx(Code2, { className: "w-4 h-4" }),
+                    /* @__PURE__ */ jsx("span", { children: copiedType === "code" ? "Code Copied" : "Copy TSX Code" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleCopyCli,
+                  className: "h-10 px-4 rounded-xl bg-white/10 hover:bg-white/20 text-white font-semibold text-xs flex items-center gap-1.5 cursor-pointer border-0",
+                  children: [
+                    copiedType === "cli" ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-emerald-400" }) : /* @__PURE__ */ jsx(Terminal, { className: "w-4 h-4" }),
+                    /* @__PURE__ */ jsx("span", { children: copiedType === "cli" ? "Instructions copied" : "Copy instructions" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-2xl bg-[#09090c] border border-white/10 p-4 font-mono text-xs overflow-x-auto text-neutral-300", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 pb-2 border-b border-white/10", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-indigo-400 font-bold", children: [
+                preset.name,
+                " Source Code"
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500", children: preset.cliCommand })
+            ] }),
+            /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: preset.code }) })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  PageTransitionModal
+};

package/dist/catalog/components/PageTransitionOverlay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface PageTransitionOverlayProps {
+    transitionId: string;
+    isAnimating: boolean;
+    theme?: 'dark' | 'light';
+    speedMultiplier?: number;
+}
+export declare const PageTransitionOverlay: React.FC<PageTransitionOverlayProps>;
+export {};

package/dist/catalog/components/PageTransitionOverlay.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  PageTransitionOverlay
+} from "../../catalog-chunks/chunk-SIL53FHG.js";
+export {
+  PageTransitionOverlay
+};

package/dist/catalog/components/cards/CardArc5.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface CardArc5Props {
+    angle?: number;
+    gap?: number;
+    yOffset?: number;
+    duration?: number;
+    hoverIntensity?: number;
+    cardClassName?: string;
+    className?: string;
+    hovered?: boolean;
+    images?: string[];
+}
+export declare const CardArc5: React.NamedExoticComponent<CardArc5Props>;
+export {};

package/dist/catalog/components/cards/CardArc5.js

@@ -0,0 +1,76 @@
+"use client";
+
+// .generated/catalog/components/cards/CardArc5.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardArc5 = React.memo(function CardArc52({
+  angle = 30,
+  gap = 70,
+  yOffset = 10,
+  duration = 0.5,
+  hoverIntensity = 1,
+  cardClassName = "bg-neutral-400 dark:bg-neutral-800",
+  className = "",
+  hovered,
+  images
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const active = hovered !== void 0 ? hovered : isHovered;
+  const cards = [0, 1, 2, 3, 4];
+  const center = 2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: `relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`,
+      children: cards.map((i) => {
+        const dist = i - center;
+        const targetRotate = active ? dist * (angle / center) * hoverIntensity : 0;
+        const targetX = active ? dist * (gap / center) * hoverIntensity : 0;
+        let targetY = 0;
+        if (active) {
+          if (Math.abs(dist) === 2) targetY = yOffset;
+          else if (Math.abs(dist) === 1) targetY = -0.2 * yOffset;
+          else targetY = -yOffset;
+          targetY = targetY * hoverIntensity;
+        }
+        const springConfig = {
+          type: "spring",
+          stiffness: 180,
+          damping: 20,
+          mass: 0.8
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              rotate: targetRotate,
+              x: targetX,
+              y: targetY,
+              scale: active ? dist === 0 ? 1.05 : 1 : 1
+            },
+            transition: {
+              ...springConfig,
+              duration
+            },
+            style: {
+              zIndex: 3 - Math.abs(dist),
+              originX: 0.5,
+              originY: 1,
+              backgroundImage: images ? `url(${images[i % images.length]})` : void 0,
+              backgroundSize: "cover",
+              backgroundPosition: "center"
+            },
+            className: `absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15),0_2px_6px_-2px_rgba(0,0,0,0.1)] border border-neutral-200/20 ${cardClassName}`
+          },
+          i
+        );
+      })
+    }
+  );
+});
+export {
+  CardArc5
+};

package/dist/catalog/components/cards/CardArc7.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface CardArc7Props {
+    angle?: number;
+    gap?: number;
+    yOffset?: number;
+    duration?: number;
+    hoverIntensity?: number;
+    cardClassName?: string;
+    className?: string;
+    hovered?: boolean;
+    images?: string[];
+}
+export declare const CardArc7: React.NamedExoticComponent<CardArc7Props>;
+export {};

package/dist/catalog/components/cards/CardArc7.js

@@ -0,0 +1,77 @@
+"use client";
+
+// .generated/catalog/components/cards/CardArc7.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardArc7 = React.memo(function CardArc72({
+  angle = 45,
+  gap = 110,
+  yOffset = 30,
+  duration = 0.5,
+  hoverIntensity = 1,
+  cardClassName = "bg-neutral-400 dark:bg-neutral-800",
+  className = "",
+  hovered,
+  images
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const active = hovered !== void 0 ? hovered : isHovered;
+  const cards = [0, 1, 2, 3, 4, 5, 6];
+  const center = 3;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: `relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`,
+      children: cards.map((i) => {
+        const dist = i - center;
+        const targetRotate = active ? dist * (angle / center) * hoverIntensity : 0;
+        const targetX = active ? dist * (gap / center) * hoverIntensity : 0;
+        let targetY = 0;
+        if (active) {
+          if (Math.abs(dist) === 3) targetY = yOffset;
+          else if (Math.abs(dist) === 2) targetY = 0.33 * yOffset;
+          else if (Math.abs(dist) === 1) targetY = -0.17 * yOffset;
+          else targetY = -0.5 * yOffset;
+          targetY = targetY * hoverIntensity;
+        }
+        const springConfig = {
+          type: "spring",
+          stiffness: 180,
+          damping: 20,
+          mass: 0.8
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              rotate: targetRotate,
+              x: targetX,
+              y: targetY,
+              scale: active ? dist === 0 ? 1.05 : 1 : 1
+            },
+            transition: {
+              ...springConfig,
+              duration
+            },
+            style: {
+              zIndex: 4 - Math.abs(dist),
+              originX: 0.5,
+              originY: 1,
+              backgroundImage: images ? `url(${images[i % images.length]})` : void 0,
+              backgroundSize: "cover",
+              backgroundPosition: "center"
+            },
+            className: `absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15),0_2px_6px_-2px_rgba(0,0,0,0.1)] border border-neutral-200/20 ${cardClassName}`
+          },
+          i
+        );
+      })
+    }
+  );
+});
+export {
+  CardArc7
+};

package/dist/catalog/components/cards/CardCarousel.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface CardCarouselProps {
+    hovered?: boolean;
+    className?: string;
+    images?: {
+        src: string;
+        title: string;
+    }[];
+    isMonochrome?: boolean;
+}
+export declare const CardCarousel: React.NamedExoticComponent<CardCarouselProps>;
+export {};

package/dist/catalog/components/cards/CardCarousel.js

@@ -0,0 +1,139 @@
+"use client";
+
+// .generated/catalog/components/cards/CardCarousel.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ASSETS = [
+  {
+    src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80",
+    title: "Sunset Beach"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80",
+    title: "Misty Mountains"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80",
+    title: "Forest Trail"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80",
+    title: "Sunlight in Woods"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80",
+    title: "Green Hills"
+  }
+];
+var CardCarousel = React.memo(function CardCarousel2({
+  hovered,
+  className = "",
+  images = DEFAULT_ASSETS,
+  isMonochrome = false
+}) {
+  const [activeIndex, setActiveIndex] = useState(2);
+  const [isHovered, setIsHovered] = useState(false);
+  const active = hovered !== void 0 ? hovered : isHovered;
+  const toPrev = (e) => {
+    e.stopPropagation();
+    setActiveIndex((prev) => Math.max(0, prev - 1));
+  };
+  const toNext = (e) => {
+    e.stopPropagation();
+    setActiveIndex((prev) => Math.min(images.length - 1, prev + 1));
+  };
+  const toSlide = (e, index) => {
+    e.stopPropagation();
+    setActiveIndex(index);
+  };
+  const slideWidth = 160;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: `w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none ${className}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative h-[180px] flex items-center justify-start overflow-visible",
+            style: { width: `${slideWidth}px` },
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "flex w-fit items-center",
+                animate: { x: -activeIndex * slideWidth },
+                transition: { type: "spring", bounce: 0.1, duration: 0.8 },
+                children: images.map((item, i) => {
+                  const isActive = activeIndex === i;
+                  const diff = i - activeIndex;
+                  const targetRotate = active ? diff * 20 : diff * 5;
+                  const targetScale = isActive ? 1.05 : active ? 0.65 : 0.8;
+                  const targetY = active ? diff * 24 : 0;
+                  return /* @__PURE__ */ jsxs(
+                    motion.div,
+                    {
+                      className: "shrink-0 flex flex-col items-center gap-1.5 will-change-[transform,scale]",
+                      style: { width: `${slideWidth}px` },
+                      animate: {
+                        rotate: targetRotate,
+                        scale: targetScale,
+                        y: targetY
+                      },
+                      transition: { type: "spring", bounce: 0.2, duration: 0.8 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: `text-[10px] md:text-xs font-semibold whitespace-nowrap transition-all duration-300 ${isActive ? "opacity-100 scale-100 text-white" : "opacity-0 scale-75 text-neutral-400"}`,
+                            children: isMonochrome ? `Card ${i + 1}` : item.title
+                          }
+                        ),
+                        isMonochrome ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            onClick: (e) => toSlide(e, i),
+                            className: "w-[110px] h-[110px] rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-lg flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm cursor-pointer",
+                            children: i + 1
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: item.src,
+                            alt: item.title,
+                            referrerPolicy: "no-referrer",
+                            className: "w-[110px] h-[110px] object-cover rounded-xl shadow-lg border border-white/10 cursor-pointer",
+                            onClick: (e) => toSlide(e, i)
+                          }
+                        )
+                      ]
+                    },
+                    i
+                  );
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 px-1.5 py-0.5 flex items-center gap-2 justify-center text-neutral-400 rounded-full bg-neutral-900/60 backdrop-blur-md border border-white/5 shadow-md z-20", children: [
+          /* @__PURE__ */ jsx("button", { onClick: toPrev, className: "p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-3.5 h-3.5" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-1", children: images.map((_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: (e) => toSlide(e, i),
+              className: `rounded-full cursor-pointer h-1 transition-all duration-300 ${activeIndex === i ? "w-4 bg-white" : "w-1 bg-white/30 hover:bg-white/50"}`
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsx("button", { onClick: toNext, className: "p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white", children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" }) })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  CardCarousel
+};