@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CardCascadeStaggerProps {
+    className?: string;
+    cardClassName?: string;
+    hovered?: boolean;
+    images?: string[];
+}
+export declare const CardCascadeStagger: React.NamedExoticComponent<CardCascadeStaggerProps>;
+export {};

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

@@ -0,0 +1,64 @@
+"use client";
+
+// .generated/catalog/components/cards/CardCascadeStagger.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardCascadeStagger = React.memo(function CardCascadeStagger2({
+  className = "",
+  cardClassName = "bg-neutral-400 dark:bg-neutral-800",
+  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 targetY = active ? dist * -28 - 14 : dist * 2;
+        const targetX = active ? dist * 14 : 0;
+        const targetRotate = active ? dist * 6 : 0;
+        const springConfig = {
+          type: "spring",
+          stiffness: 200,
+          damping: 22,
+          mass: 0.9
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              y: targetY,
+              x: targetX,
+              rotate: targetRotate,
+              scale: active ? dist === 0 ? 1.05 : 0.98 : 1
+            },
+            transition: {
+              ...springConfig
+            },
+            style: {
+              zIndex: 5 - Math.abs(dist),
+              originX: 0.5,
+              originY: 0.5,
+              backgroundImage: images ? `url(${images[i % images.length]})` : void 0,
+              backgroundSize: "cover",
+              backgroundPosition: "center"
+            },
+            className: `absolute inset-0 rounded-2xl shadow-[0_4px_12px_-2px_rgba(0,0,0,0.15)] border border-neutral-200/20 ${cardClassName}`
+          },
+          i
+        );
+      })
+    }
+  );
+});
+export {
+  CardCascadeStagger
+};

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

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

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

@@ -0,0 +1,66 @@
+"use client";
+
+// .generated/catalog/components/cards/CardCornerFan.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardCornerFan = React.memo(function CardCornerFan2({
+  angle = 40,
+  // Total rotation fan span
+  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 total = cards.length;
+  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 offsetRatio = i / (total - 1);
+        const startAngle = -10;
+        const targetRotate = active ? (startAngle + offsetRatio * angle) * hoverIntensity : 0;
+        const springConfig = {
+          type: "spring",
+          stiffness: 180,
+          damping: 20,
+          mass: 0.8
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              rotate: targetRotate,
+              scale: active && i === 2 ? 1.03 : 1
+            },
+            transition: {
+              ...springConfig,
+              duration
+            },
+            style: {
+              zIndex: 5 - i,
+              originX: 0,
+              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 {
+  CardCornerFan
+};

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

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

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

@@ -0,0 +1,115 @@
+"use client";
+
+// .generated/catalog/components/cards/CardCoverFlow.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 CardCoverFlow = React.memo(function CardCoverFlow2({
+  hovered,
+  className = "",
+  images = DEFAULT_ASSETS,
+  isMonochrome = false
+}) {
+  const [activeIndex, setActiveIndex] = useState(2);
+  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);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none bg-zinc-950/40 rounded-2xl ${className}`, style: { perspective: "1000px" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full flex justify-center items-center relative h-[140px] [transform-style:preserve-3d]", children: images.map((item, i) => {
+      const isActive = activeIndex === i;
+      const offset = i - activeIndex;
+      const absOffset = Math.abs(offset);
+      const isPast = i < activeIndex;
+      return /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: "absolute w-[80px] aspect-[3/4] cursor-pointer",
+          initial: false,
+          animate: {
+            x: offset * 32,
+            rotateY: isActive ? 0 : isPast ? 38 : -38,
+            z: isActive ? 50 : -absOffset * 50,
+            scale: isActive ? 1.1 : 1 - absOffset * 0.08,
+            opacity: absOffset > 2 ? 0 : 1 - absOffset * 0.25
+          },
+          transition: { type: "spring", stiffness: 200, damping: 25 },
+          style: { zIndex: 100 - absOffset },
+          onClick: (e) => toSlide(e, i),
+          children: [
+            isMonochrome ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-full h-full rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-2xl flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm",
+                children: i + 1
+              }
+            ) : /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.src,
+                alt: item.title,
+                referrerPolicy: "no-referrer",
+                className: "w-full h-full object-cover rounded-xl shadow-2xl border border-white/10"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "absolute -bottom-6 left-[-20px] right-[-20px] text-center text-[10px] font-semibold text-white/80 whitespace-nowrap overflow-hidden text-ellipsis",
+                animate: { opacity: isActive ? 1 : 0, y: isActive ? 0 : -5 },
+                children: isMonochrome ? `Card ${i + 1}` : item.title
+              }
+            )
+          ]
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 w-fit px-1.5 py-0.5 flex items-center gap-2 justify-center text-zinc-300 rounded-full bg-white/5 backdrop-blur-md border border-white/10 shadow-sm z-20", children: [
+      /* @__PURE__ */ jsx("button", { onClick: toPrev, className: "p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 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/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white", children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" }) })
+    ] })
+  ] });
+});
+export {
+  CardCoverFlow
+};

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

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

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

@@ -0,0 +1,62 @@
+"use client";
+
+// .generated/catalog/components/cards/CardLinearSpread.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardLinearSpread = React.memo(function CardLinearSpread2({
+  gap = 90,
+  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 targetX = active ? dist * (gap / center) * hoverIntensity : 0;
+        const springConfig = {
+          type: "spring",
+          stiffness: 180,
+          damping: 20,
+          mass: 0.8
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              x: targetX,
+              scale: active ? dist === 0 ? 1.05 : 1 : 1
+            },
+            transition: {
+              ...springConfig,
+              duration
+            },
+            style: {
+              zIndex: 3 - Math.abs(dist),
+              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 {
+  CardLinearSpread
+};

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

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

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

@@ -0,0 +1,76 @@
+"use client";
+
+// .generated/catalog/components/cards/CardLongArc5.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardLongArc5 = React.memo(function CardLongArc52({
+  angle = 15,
+  gap = 140,
+  yOffset = 20,
+  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.25 * yOffset;
+          else targetY = -0.25 * 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 {
+  CardLongArc5
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CardScatterSpreadProps {
+    className?: string;
+    cardClassName?: string;
+    hovered?: boolean;
+    images?: string[];
+}
+export declare const CardScatterSpread: React.NamedExoticComponent<CardScatterSpreadProps>;
+export {};

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

@@ -0,0 +1,69 @@
+"use client";
+
+// .generated/catalog/components/cards/CardScatterSpread.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardScatterSpread = React.memo(function CardScatterSpread2({
+  className = "",
+  cardClassName = "bg-neutral-400 dark:bg-neutral-800",
+  hovered,
+  images
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const active = hovered !== void 0 ? hovered : isHovered;
+  const cards = [0, 1, 2, 3, 4];
+  const offsets = [
+    { x: -75, y: 15, rotate: -14 },
+    { x: -35, y: -15, rotate: -6 },
+    { x: 0, y: -30, rotate: 2 },
+    { x: 35, y: -10, rotate: 8 },
+    { x: 75, y: 20, rotate: 15 }
+  ];
+  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 targetX = active ? offsets[i].x : 0;
+        const targetY = active ? offsets[i].y : 0;
+        const targetRotate = active ? offsets[i].rotate : 0;
+        const springConfig = {
+          type: "spring",
+          stiffness: 180,
+          damping: 20,
+          mass: 0.8
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              x: targetX,
+              y: targetY,
+              rotate: targetRotate,
+              scale: active ? i === 2 ? 1.05 : 0.98 : 1
+            },
+            transition: {
+              ...springConfig
+            },
+            style: {
+              zIndex: 5 - Math.abs(i - 2),
+              originX: 0.5,
+              originY: 0.5,
+              backgroundImage: images ? `url(${images[i % images.length]})` : void 0,
+              backgroundSize: "cover",
+              backgroundPosition: "center"
+            },
+            className: `absolute inset-0 rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.15)] border border-neutral-200/20 ${cardClassName}`
+          },
+          i
+        );
+      })
+    }
+  );
+});
+export {
+  CardScatterSpread
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface CardStampArcProps {
+    arc?: number;
+    spread?: number;
+    yOffset?: number;
+    isColorful?: boolean;
+    duration?: number;
+    hoverIntensity?: number;
+    className?: string;
+    hovered?: boolean;
+    images?: string[];
+}
+export declare const CardStampArc: React.NamedExoticComponent<CardStampArcProps>;
+export {};

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

@@ -0,0 +1,101 @@
+"use client";
+
+// .generated/catalog/components/cards/CardStampArc.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardStampArc = React.memo(function CardStampArc2({
+  arc = 25,
+  spread = 180,
+  yOffset = 40,
+  isColorful = false,
+  duration = 0.5,
+  hoverIntensity = 1,
+  className = "",
+  hovered,
+  images
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const active = hovered !== void 0 ? hovered : isHovered;
+  const stamps = [
+    { id: 0, color: "bg-red-400 dark:bg-red-500" },
+    { id: 1, color: "bg-blue-400 dark:bg-blue-500" },
+    { id: 2, color: "bg-emerald-400 dark:bg-emerald-500" },
+    { id: 3, color: "bg-amber-400 dark:bg-amber-500" },
+    { id: 4, color: "bg-purple-400 dark:bg-purple-500" }
+  ];
+  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: stamps.map((stamp, i) => {
+        const dist = i - 2;
+        let targetRotate = 0;
+        let targetX = 0;
+        let targetY = 0;
+        if (active) {
+          if (i === 0) {
+            targetRotate = -1 * arc;
+            targetX = -1 * spread;
+            targetY = yOffset;
+          } else if (i === 1) {
+            targetRotate = -0.48 * arc;
+            targetX = -0.5 * spread;
+            targetY = 0.25 * yOffset;
+          } else if (i === 2) {
+            targetRotate = 0;
+            targetX = 0;
+            targetY = -0.25 * yOffset;
+          } else if (i === 3) {
+            targetRotate = 0.48 * arc;
+            targetX = 0.5 * spread;
+            targetY = 0.25 * yOffset;
+          } else if (i === 4) {
+            targetRotate = arc;
+            targetX = spread;
+            targetY = yOffset;
+          }
+          targetRotate *= hoverIntensity;
+          targetX *= hoverIntensity;
+          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-2 border-dashed border-white/60 dark:border-black/35 ${images ? "" : isColorful ? stamp.color : "bg-neutral-400 dark:bg-neutral-800"}`
+          },
+          stamp.id
+        );
+      })
+    }
+  );
+});
+export {
+  CardStampArc
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CardTimeMachineProps {
+    hovered?: boolean;
+    className?: string;
+    isMonochrome?: boolean;
+}
+export declare const CardTimeMachine: React.NamedExoticComponent<CardTimeMachineProps>;
+export {};