@mova-ui/react 0.4.10 → 0.4.11

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

@@ -1,8 +1,15 @@
 import React from 'react';
+interface TimelineImage {
+    src: string;
+    title: string;
+    date: string;
+    alt?: string;
+}
 interface CardTimeMachineProps {
     hovered?: boolean;
     className?: string;
     isMonochrome?: boolean;
+    images?: readonly TimelineImage[];
 }
 export declare const CardTimeMachine: React.NamedExoticComponent<CardTimeMachineProps>;
 export {};

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

@@ -14,26 +14,29 @@ var TIMELINE_DATA = [
 var CardTimeMachine = React.memo(function CardTimeMachine2({
   hovered,
   className = "",
-  isMonochrome = false
+  isMonochrome = false,
+  images = TIMELINE_DATA
 }) {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const timeline = images.length ? images : TIMELINE_DATA;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const activeIndex = Math.min(selectedIndex, timeline.length - 1);
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const handleTimelineHover = (index) => {
     setHoveredIndex(index);
-    setActiveIndex(Math.round(index));
+    setSelectedIndex(Math.round(index));
   };
   const timelineNodes = useMemo(() => {
     const nodes = [];
-    TIMELINE_DATA.forEach((item, i) => {
+    timeline.forEach((item, i) => {
       nodes.push({ type: "main", index: i, date: item.date });
-      if (i < TIMELINE_DATA.length - 1) {
+      if (i < timeline.length - 1) {
         for (let j = 0; j < 2; j++) {
           nodes.push({ type: "sub", index: i + (j + 1) * 0.33 });
         }
       }
     });
     return nodes;
-  }, []);
+  }, [timeline]);
   return /* @__PURE__ */ jsxs("div", { className: `w-full h-full bg-[#09090b]/80 flex flex-row items-center justify-center gap-6 relative overflow-hidden rounded-2xl border border-white/5 p-4 ${className}`, children: [
     /* @__PURE__ */ jsx(
       "svg",
@@ -62,7 +65,7 @@ var CardTimeMachine = React.memo(function CardTimeMachine2({
       {
         className: "relative flex-1 max-w-[290px] aspect-[4/3] flex items-center justify-center",
         style: { perspective: "800px" },
-        children: TIMELINE_DATA.map((item, i) => {
+        children: timeline.map((item, i) => {
           const offset = i - activeIndex;
           const isPast = i < activeIndex;
           return /* @__PURE__ */ jsxs(
@@ -84,7 +87,7 @@ var CardTimeMachine = React.memo(function CardTimeMachine2({
                 mass: 0.8
               },
               style: {
-                zIndex: TIMELINE_DATA.length - i,
+                zIndex: timeline.length - i,
                 filter: "url(#SkiperSquiCircleFilterLayout)"
               },
               children: [
@@ -94,7 +97,7 @@ var CardTimeMachine = React.memo(function CardTimeMachine2({
                     className: "w-full h-full rounded-2xl 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",
                     children: i + 1
                   }
-                ) : /* @__PURE__ */ jsx("img", { src: item.src, alt: item.title, referrerPolicy: "no-referrer", className: "w-full h-full object-cover" }),
+                ) : /* @__PURE__ */ jsx("img", { src: item.src, alt: item.alt ?? item.title, referrerPolicy: "no-referrer", className: "w-full h-full object-cover" }),
                 /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/10 pointer-events-none" })
               ]
             },
@@ -119,7 +122,7 @@ var CardTimeMachine = React.memo(function CardTimeMachine2({
                 onMouseEnter: () => handleTimelineHover(index),
                 onClick: (e) => {
                   e.stopPropagation();
-                  setActiveIndex(index);
+                  setSelectedIndex(index);
                 },
                 children: [
                   hoveredIndex === index ? /* @__PURE__ */ jsx(
@@ -155,7 +158,7 @@ var CardTimeMachine = React.memo(function CardTimeMachine2({
                 onMouseEnter: () => handleTimelineHover(node.index),
                 onClick: (e) => {
                   e.stopPropagation();
-                  setActiveIndex(Math.round(node.index));
+                  setSelectedIndex(Math.round(node.index));
                 },
                 children: /* @__PURE__ */ jsx(
                   motion.div,

package/dist/catalog/components/dither-charts/DitherBook.d.ts

@@ -7,6 +7,7 @@ export interface BookPage {
     id: string;
     title: string;
     src: string;
+    alt?: string;
 }
 export interface BookSettings {
     padding: number;
@@ -17,7 +18,9 @@ export interface BookSettings {
 }
 export declare const PAGES: BookPage[];
 export declare function Book({ pages, currentIndex, isFlipping, direction, onFlipComplete, settings, isIntro, onPrevPage, onNextPage }: any): React.JSX.Element;
-export declare function DitherBook({ theme, compact }: {
+export interface DitherBookProps {
     theme?: 'dark' | 'light';
     compact?: boolean;
-}): React.JSX.Element;
+    pages?: readonly BookPage[];
+}
+export declare function DitherBook({ theme, compact, pages }: DitherBookProps): React.JSX.Element;

package/dist/catalog/components/dither-charts/DitherBook.js

@@ -51,21 +51,26 @@ function Book({
       style: { backgroundImage: 'url("https://www.transparenttextures.com/patterns/cream-paper.png")' }
     }
   );
-  const PageContent = ({ index }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { backgroundColor: settings.paperColor } }),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", style: { padding: `${settings.padding}px` }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "w-full h-full bg-cover bg-center bg-no-repeat shadow-inner",
-        style: {
-          backgroundImage: `url(${pages[getIndex(index)].src})`,
-          borderRadius: `${settings.imageRadius}px`,
-          boxShadow: `0 4px ${settings.shadowIntensity}px rgba(0,0,0,0.15)`
+  const PageContent = ({ index }) => {
+    const page = pages[getIndex(index)];
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { backgroundColor: settings.paperColor } }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", style: { padding: `${settings.padding}px` }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-full h-full bg-cover bg-center bg-no-repeat shadow-inner",
+          role: page.alt ? "img" : void 0,
+          "aria-label": page.alt,
+          style: {
+            backgroundImage: `url(${page.src})`,
+            borderRadius: `${settings.imageRadius}px`,
+            boxShadow: `0 4px ${settings.shadowIntensity}px rgba(0,0,0,0.15)`
+          }
         }
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PaperTexture, {})
-  ] });
+      ) }),
+      /* @__PURE__ */ jsx(PaperTexture, {})
+    ] });
+  };
   const creaseLeft = "absolute inset-y-0 right-0 w-12 pointer-events-none mix-blend-multiply z-20";
   const creaseRight = "absolute inset-y-0 left-0 w-12 pointer-events-none mix-blend-multiply z-20";
   const creaseLeftStyle = {
@@ -171,24 +176,27 @@ function Book({
     }
   ) });
 }
-function DitherBook({ theme = "dark", compact = false }) {
+function DitherBook({ theme = "dark", compact = false, pages = PAGES }) {
+  const bookPages = pages.length ? pages : PAGES;
+  const pageCount = bookPages.length;
+  const canTurnPage = pageCount > 1;
   const [currentIndex, setCurrentIndex] = useState(0);
   const [direction, setDirection] = useState(1);
   const [isFlipping, setIsFlipping] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [introFlips, setIntroFlips] = useState(10);
-  const isIntro = introFlips > 0;
+  const isIntro = canTurnPage && introFlips > 0;
   useEffect(() => {
-    if (introFlips > 0 && !isFlipping) {
+    if (isIntro && !isFlipping) {
       const timer = setTimeout(() => {
         setDirection(1);
         setIsFlipping(true);
-        setCurrentIndex((i) => (i + 1) % PAGES.length);
+        setCurrentIndex((i) => i + 1);
         setIntroFlips((f) => f - 1);
       }, introFlips === 10 ? 300 : 70);
       return () => clearTimeout(timer);
     }
-  }, [introFlips, isFlipping]);
+  }, [introFlips, isFlipping, isIntro]);
   const [settings, setSettings] = useState({
     padding: compact ? 6 : 10,
     imageRadius: compact ? 8 : 20,
@@ -197,17 +205,17 @@ function DitherBook({ theme = "dark", compact = false }) {
     shadowIntensity: compact ? 10 : 24
   });
   const next = () => {
-    if (!isFlipping) {
+    if (canTurnPage && !isFlipping) {
       setDirection(1);
       setIsFlipping(true);
-      setCurrentIndex((i) => (i + 1) % PAGES.length);
+      setCurrentIndex((i) => i + 1);
     }
   };
   const prev = () => {
-    if (!isFlipping) {
+    if (canTurnPage && !isFlipping) {
       setDirection(-1);
       setIsFlipping(true);
-      setCurrentIndex((i) => (i - 1 + PAGES.length) % PAGES.length);
+      setCurrentIndex((i) => i - 1);
     }
   };
   const handleFlipComplete = () => {
@@ -217,7 +225,7 @@ function DitherBook({ theme = "dark", compact = false }) {
     /* @__PURE__ */ jsx(
       Book,
       {
-        pages: PAGES,
+        pages: bookPages,
         currentIndex,
         isFlipping,
         direction,
@@ -233,7 +241,7 @@ function DitherBook({ theme = "dark", compact = false }) {
         "button",
         {
           onClick: prev,
-          disabled: isFlipping,
+          disabled: isFlipping || !canTurnPage,
           className: `flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${theme === "dark" ? "bg-white/10 hover:bg-white/20 text-white" : "bg-neutral-200 hover:bg-neutral-300 text-black"}`,
           children: [
             /* @__PURE__ */ jsx(ChevronLeft, { className: "w-3.5 h-3.5" }),
@@ -241,7 +249,7 @@ function DitherBook({ theme = "dark", compact = false }) {
           ]
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: `text-[11px] font-semibold tracking-widest uppercase ${theme === "dark" ? "text-neutral-400" : "text-neutral-600"}`, children: PAGES[currentIndex].title }),
+      /* @__PURE__ */ jsx("span", { className: `text-[11px] font-semibold tracking-widest uppercase ${theme === "dark" ? "text-neutral-400" : "text-neutral-600"}`, children: bookPages[(currentIndex % pageCount + pageCount) % pageCount].title }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -256,7 +264,7 @@ function DitherBook({ theme = "dark", compact = false }) {
           "button",
           {
             onClick: next,
-            disabled: isFlipping,
+            disabled: isFlipping || !canTurnPage,
             className: `flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${theme === "dark" ? "bg-white/10 hover:bg-white/20 text-white" : "bg-neutral-200 hover:bg-neutral-300 text-black"}`,
             children: [
               /* @__PURE__ */ jsx("span", { children: "Next" }),

package/dist/catalog/components/dither-charts/DitherChartsGrid.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   ditherChartsData
-} from "../../../catalog-chunks/chunk-WKFJSUM3.js";
-import "../../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../../catalog-chunks/chunk-PMFHIVMP.js";
+import "../../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../../catalog-chunks/chunk-CQ7VYA46.js";
 import {
   StorageUsageChart
 } from "../../../catalog-chunks/chunk-ZUQZVT7M.js";

package/dist/catalog/components/simple-comp/DitherChartsGrid.js

@@ -34,9 +34,9 @@ import {
 } from "../../../catalog-chunks/chunk-7GU353UA.js";
 import {
   ditherChartsData
-} from "../../../catalog-chunks/chunk-WKFJSUM3.js";
-import "../../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../../catalog-chunks/chunk-PMFHIVMP.js";
+import "../../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../../catalog-chunks/chunk-CQ7VYA46.js";
 import {
   IconSwap,
   IconSwapItem

package/dist/catalog/data/ditherCharts.js

@@ -2,9 +2,9 @@
 import {
   ditherChartsData,
   simpleCompData
-} from "../../catalog-chunks/chunk-WKFJSUM3.js";
-import "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-PMFHIVMP.js";
+import "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 export {
   ditherChartsData,
   simpleCompData

package/dist/catalog/data/formElements.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   getInstallCommand
-} from "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 
 // .generated/catalog/data/formElements.ts
 var formElementsData = [

package/dist/catalog/data/installCommand.js

@@ -2,8 +2,8 @@
 import {
   COPY_SOURCE_GUIDANCE,
   getInstallCommand
-} from "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 export {
   COPY_SOURCE_GUIDANCE,
   getInstallCommand

package/dist/catalog/data/metrics.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   getInstallCommand
-} from "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 
 // .generated/catalog/data/metrics.ts
 var metricsData = [

package/dist/catalog/data/supportedRegistryIds.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   supportedRegistryIds
-} from "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-CQ7VYA46.js";
 export {
   supportedRegistryIds
 };

package/dist/catalog/data/textAnimations.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   getInstallCommand
-} from "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 
 // .generated/catalog/data/textAnimations.ts
 var textAnimationsData = [

package/dist/catalog/data/toggles.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   getInstallCommand
-} from "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 
 // .generated/catalog/data/toggles.ts
 var togglesData = [

package/dist/catalog/data/transitions.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   getInstallCommand
-} from "../../catalog-chunks/chunk-6NP66VN5.js";
-import "../../catalog-chunks/chunk-YPZZOKH4.js";
+} from "../../catalog-chunks/chunk-EYGZ2KK7.js";
+import "../../catalog-chunks/chunk-CQ7VYA46.js";
 
 // .generated/catalog/data/transitions.ts
 var transitionCategories = [

package/dist/catalog-chunks/{chunk-YPZZOKH4.js → chunk-CQ7VYA46.js}

@@ -51,6 +51,7 @@ var supportedRegistryIds = [
   "ai-task-list",
   "ai-tool-call",
   "analyzing-image",
+  "animated-mega-menu",
   "animated-sidebar",
   "animated-tags",
   "app-icon-load",
@@ -66,6 +67,7 @@ var supportedRegistryIds = [
   "balance-bar-chart-card",
   "bar-cascade",
   "bar-sweep",
+  "blur-carousel",
   "blur-text",
   "blur-up-char",
   "blur-up-word",
@@ -154,6 +156,7 @@ var supportedRegistryIds = [
   "classic-toggle",
   "clock-spinner",
   "comet-spinner",
+  "compare-slider",
   "compass-needle-deflect",
   "concentric-pulse",
   "concentric-ring",
@@ -214,12 +217,14 @@ var supportedRegistryIds = [
   "fluid-dot-orbit",
   "fluid-skeleton",
   "focus-blur",
+  "fold-panel",
   "form-submit-button",
   "french-doors-3d",
   "gear-tooth-step",
   "gears",
   "gelatin-wobble",
   "geometric-iris-shutter",
+  "gesture-range-slider",
   "glassmorphic-card",
   "glow-button",
   "glow-text",
@@ -252,6 +257,7 @@ var supportedRegistryIds = [
   "line-spinner",
   "liquid-dots",
   "liquid-glass-sheet",
+  "long-press-context-menu",
   "mac-terminal",
   "magnetic-button",
   "magnetic-disks",
@@ -407,6 +413,7 @@ var supportedRegistryIds = [
   "spinning-squares",
   "spiral-spinner",
   "split-gate-reveal",
+  "split-view",
   "spotlight",
   "spring-bars",
   "spring-dot-matrix",

package/dist/catalog-chunks/{chunk-6NP66VN5.js → chunk-EYGZ2KK7.js}

@@ -1,6 +1,6 @@
 import {
   supportedRegistryIds
-} from "./chunk-YPZZOKH4.js";
+} from "./chunk-CQ7VYA46.js";
 
 // .generated/catalog/data/installCommand.ts
 var supported = new Set(supportedRegistryIds);

package/dist/catalog-chunks/{chunk-WKFJSUM3.js → chunk-PMFHIVMP.js}

@@ -1,6 +1,6 @@
 import {
   getInstallCommand
-} from "./chunk-6NP66VN5.js";
+} from "./chunk-EYGZ2KK7.js";
 
 // .generated/catalog/data/ditherCharts.ts
 var ditherChartsData = [

package/dist/index.d.ts

@@ -175,9 +175,16 @@ export * from './ui/loading/wave-dots.js';
 export * from './ui/loading/wave-physics-loader.js';
 export * from './ui/loading/waveform-loader.js';
 export * from './ui/loading/zig-zag-pulse.js';
+export * from './ui/patterns/animated-mega-menu.js';
 export * from './ui/patterns/animated-tags.js';
+export * from './ui/patterns/blur-carousel.js';
+export * from './ui/patterns/compare-slider.js';
 export * from './ui/patterns/expanding-icon-tabs.js';
+export * from './ui/patterns/fold-panel.js';
+export * from './ui/patterns/gesture-range-slider.js';
 export * from './ui/patterns/gooey-popover.js';
+export * from './ui/patterns/long-press-context-menu.js';
+export * from './ui/patterns/split-view.js';
 export * from './ui/scroll/progress-indicator.js';
 export * from './ui/scroll/scroll-reveal.js';
 export * from './ui/scroll/sticky-reveal.js';