@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,182 @@
+"use client";
+
+// .generated/catalog/components/cards/CardTimeMachine.tsx
+import React, { useState, useMemo } from "react";
+import { motion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TIMELINE_DATA = [
+  { date: "Today", src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80", title: "Sunset Beach" },
+  { date: "1d ago", src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80", title: "Misty Mountains" },
+  { date: "1w ago", src: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80", title: "Forest Trail" },
+  { date: "1m ago", src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80", title: "Sunlight Woods" },
+  { date: "1y ago", src: "https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80", title: "Green Hills" }
+];
+var CardTimeMachine = React.memo(function CardTimeMachine2({
+  hovered,
+  className = "",
+  isMonochrome = false
+}) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const handleTimelineHover = (index) => {
+    setHoveredIndex(index);
+    setActiveIndex(Math.round(index));
+  };
+  const timelineNodes = useMemo(() => {
+    const nodes = [];
+    TIMELINE_DATA.forEach((item, i) => {
+      nodes.push({ type: "main", index: i, date: item.date });
+      if (i < TIMELINE_DATA.length - 1) {
+        for (let j = 0; j < 2; j++) {
+          nodes.push({ type: "sub", index: i + (j + 1) * 0.33 });
+        }
+      }
+    });
+    return nodes;
+  }, []);
+  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",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "absolute w-0 h-0",
+        version: "1.1",
+        children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "SkiperSquiCircleFilterLayout", children: [
+          /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
+          /* @__PURE__ */ jsx(
+            "feColorMatrix",
+            {
+              in: "blur",
+              mode: "matrix",
+              values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6",
+              result: "goo"
+            }
+          ),
+          /* @__PURE__ */ jsx("feBlend", { in: "SourceGraphic", in2: "goo" })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.03),transparent_70%)] pointer-events-none" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative flex-1 max-w-[290px] aspect-[4/3] flex items-center justify-center",
+        style: { perspective: "800px" },
+        children: TIMELINE_DATA.map((item, i) => {
+          const offset = i - activeIndex;
+          const isPast = i < activeIndex;
+          return /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "absolute rounded-2xl flex h-[135px] w-[220px] origin-center flex-col overflow-hidden pointer-events-none",
+              initial: false,
+              animate: {
+                z: isPast ? 200 : -offset * 60,
+                y: isPast ? 300 : -offset * 12,
+                rotateX: isPast ? -20 : offset * 2,
+                opacity: isPast ? 0 : 1 - Math.abs(offset) * 0.2,
+                scale: isPast ? 1.3 : 1
+              },
+              transition: {
+                type: "spring",
+                stiffness: 250,
+                damping: 25,
+                mass: 0.8
+              },
+              style: {
+                zIndex: TIMELINE_DATA.length - i,
+                filter: "url(#SkiperSquiCircleFilterLayout)"
+              },
+              children: [
+                isMonochrome ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    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("div", { className: "absolute inset-0 bg-black/10 pointer-events-none" })
+              ]
+            },
+            i
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative flex flex-col items-end z-50 py-2 px-1",
+        onMouseLeave: () => setHoveredIndex(null),
+        children: timelineNodes.map((node, i) => {
+          if (node.type === "main") {
+            const index = node.index;
+            const isSelected = activeIndex === index;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "relative inline-flex items-center justify-end py-[1px] w-20 group cursor-pointer border-0 bg-transparent",
+                onMouseEnter: () => handleTimelineHover(index),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setActiveIndex(index);
+                },
+                children: [
+                  hoveredIndex === index ? /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: `absolute top-0 right-10 text-[10px] font-semibold whitespace-nowrap ${isSelected ? "text-blue-500" : "text-white/90"}`,
+                      initial: { opacity: 0, filter: `blur(2px)`, scale: 0.8 },
+                      animate: { opacity: 1, filter: `blur(0px)`, scale: 1 },
+                      transition: { duration: 0.15 },
+                      children: node.date
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: `h-[3px] w-[24px] rounded-full origin-right transition-colors ${isSelected ? "bg-blue-500" : "bg-white/50 group-hover:bg-white/80"}`,
+                      animate: {
+                        scaleX: hoveredIndex === null ? 1 : isSelected ? 1.4 : Math.abs(index - hoveredIndex) < 0.5 ? 1.25 : 1
+                      },
+                      transition: { type: "spring", stiffness: 400, damping: 25 }
+                    }
+                  )
+                ]
+              },
+              `main-${index}`
+            );
+          } else {
+            const isHoveringNear = hoveredIndex !== null && Math.abs(node.index - hoveredIndex) <= 0.5;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "py-[1px] w-20 flex justify-end cursor-pointer",
+                onMouseEnter: () => handleTimelineHover(node.index),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setActiveIndex(Math.round(node.index));
+                },
+                children: /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "h-[3px] w-[24px] rounded-full bg-white/20 origin-right",
+                    animate: {
+                      scaleX: hoveredIndex === null ? 1 : isHoveringNear ? 1.15 : 1,
+                      opacity: hoveredIndex === null ? 0.3 : isHoveringNear ? 0.5 : 0.3
+                    },
+                    transition: { type: "spring", stiffness: 400, damping: 25 }
+                  }
+                )
+              },
+              `sub-${node.index}`
+            );
+          }
+        })
+      }
+    )
+  ] });
+});
+export {
+  CardTimeMachine
+};

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

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

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

@@ -0,0 +1,68 @@
+"use client";
+
+// .generated/catalog/components/cards/CardWheelFan.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var CardWheelFan = React.memo(function CardWheelFan2({
+  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 targetRotate = active ? dist * 18 : 0;
+        let targetY = 0;
+        if (active) {
+          if (Math.abs(dist) === 2) targetY = -8;
+          else if (Math.abs(dist) === 1) targetY = -22;
+          else targetY = -28;
+        }
+        const springConfig = {
+          type: "spring",
+          stiffness: 180,
+          damping: 20,
+          mass: 0.8
+        };
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              rotate: targetRotate,
+              y: targetY,
+              scale: active ? dist === 0 ? 1.05 : 0.98 : 1
+            },
+            transition: {
+              ...springConfig
+            },
+            style: {
+              zIndex: 5 - Math.abs(dist),
+              originX: 0.5,
+              originY: 1.1,
+              // Radius offset center below the cards
+              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 {
+  CardWheelFan
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface FocusBlurItem {
+    label: string;
+    href?: string;
+}
+interface FocusBlurProps {
+    items?: FocusBlurItem[];
+    blurAmount?: number;
+    opacityAmount?: number;
+    showBrackets?: boolean;
+    className?: string;
+}
+export declare function FocusBlur({ items, blurAmount, opacityAmount, showBrackets, className }: FocusBlurProps): React.JSX.Element;
+export {};

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

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

package/dist/catalog/components/css-animations/Dock.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface DockProps {
+    theme?: 'dark' | 'light';
+    className?: string;
+}
+export declare function Dock({ theme, className }: DockProps): React.JSX.Element;

package/dist/catalog/components/css-animations/Dock.js

@@ -0,0 +1,93 @@
+"use client";
+
+// .generated/catalog/components/css-animations/Dock.tsx
+import { useState, useRef } from "react";
+import { Reorder, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+var SOLID_COLORS = [
+  "#2563eb",
+  // Blue 600
+  "#3b82f6",
+  // Blue 500
+  "#60a5fa",
+  // Blue 400
+  "#1d4ed8",
+  // Blue 700
+  "#0284c7",
+  // Sky 600
+  "#4f46e5",
+  // Indigo 600
+  "#6366f1"
+  // Indigo 500
+];
+function DockItem({
+  index,
+  color,
+  mouseX,
+  theme = "dark"
+}) {
+  const ref = useRef(null);
+  const distance = useTransform(mouseX, (val) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+  const sizeSync = useTransform(distance, [-80, 0, 80], [28, 44, 28]);
+  const size = useSpring(sizeSync, { mass: 0.1, stiffness: 220, damping: 16 });
+  return /* @__PURE__ */ jsx(
+    Reorder.Item,
+    {
+      value: color,
+      id: color,
+      className: "rounded-lg cursor-grab active:cursor-grabbing origin-bottom shrink-0 select-none",
+      style: { width: size, height: size },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: `flex h-full w-full items-center justify-center rounded-[10px] p-0.5 shadow-sm transition-all duration-300 ${theme === "dark" ? "border border-neutral-700/80 bg-neutral-800 hover:bg-neutral-700" : "border border-neutral-200 bg-white hover:bg-neutral-50 shadow-sm"}`,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full w-full rounded-[8px] pointer-events-none transition-transform duration-200",
+              style: { backgroundColor: color }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Dock({ theme = "dark", className = "" }) {
+  const [items, setItems] = useState(SOLID_COLORS);
+  const mouseX = useMotionValue(Infinity);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `box-content flex h-[32px] w-fit items-end gap-1 rounded-xl p-1.5 transition-all duration-300 ${theme === "dark" ? "border border-neutral-800 bg-[#141414] shadow-md shadow-black/30" : "border border-neutral-200 bg-neutral-100 shadow-sm"} ${className}`,
+      onMouseMove: (e) => mouseX.set(e.pageX),
+      onMouseLeave: () => mouseX.set(Infinity),
+      children: /* @__PURE__ */ jsx(
+        Reorder.Group,
+        {
+          axis: "x",
+          values: items,
+          onReorder: setItems,
+          className: "flex h-full items-end gap-[5px]",
+          children: items.map((color, idx) => /* @__PURE__ */ jsx(
+            DockItem,
+            {
+              index: idx,
+              color,
+              mouseX,
+              theme
+            },
+            color
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  Dock
+};

package/dist/catalog/components/css-animations/FocusBlur.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function FocusBlurDemo({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;

package/dist/catalog/components/css-animations/FocusBlur.js

@@ -0,0 +1,35 @@
+"use client";
+
+// .generated/catalog/components/css-animations/FocusBlur.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FocusBlurDemo({ theme = "dark" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-6 font-sans", children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .blur-group:has(.blur-target:hover) .blur-target:not(:hover) {
+          filter: blur(4px);
+          opacity: 0.35;
+        }
+        .blur-target {
+          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+      ` }),
+    /* @__PURE__ */ jsxs("div", { className: `w-full rounded-[24px] p-6 sm:p-8 border flex flex-col items-center text-center gap-4 transition-colors duration-300 ${theme === "dark" ? "bg-[#181818] border-white/10" : "bg-white border-neutral-200 shadow-sm"}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold tracking-widest uppercase text-indigo-400", children: "CSS :has() Parent Selector" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-center gap-x-3 text-xl sm:text-3xl font-bold blur-group cursor-default py-4", children: [
+        /* @__PURE__ */ jsx("span", { className: theme === "dark" ? "text-neutral-500" : "text-neutral-400", children: "Explore" }),
+        ["Animations,", "Transitions,", "Physics,", "Micro-UI"].map((word) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `blur-target cursor-pointer hover:text-indigo-400 transition-colors ${theme === "dark" ? "text-white" : "text-neutral-900"}`,
+            children: word
+          },
+          word
+        ))
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: `text-xs ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: "Hovering over any word automatically blurs and softens its peer sibling elements using pure CSS." })
+    ] })
+  ] });
+}
+export {
+  FocusBlurDemo
+};

package/dist/catalog/components/css-animations/FrequencySelector.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface FrequencySelectorProps {
+    theme?: "dark" | "light";
+    className?: string;
+}
+export declare function FrequencySelector({ theme, className }: FrequencySelectorProps): React.JSX.Element;

package/dist/catalog/components/css-animations/FrequencySelector.js

@@ -0,0 +1,100 @@
+"use client";
+
+// .generated/catalog/components/css-animations/FrequencySelector.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Check, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var options = ["Daily", "Weekly", "Monthly", "Yearly"];
+function FrequencySelector({ theme = "dark", className = "" }) {
+  const [expanded, setExpanded] = useState(false);
+  const [selected, setSelected] = useState("Daily");
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      layout: true,
+      className: `flex w-full max-w-[320px] flex-col overflow-hidden rounded-3xl p-[6px] transition-colors duration-300 ${theme === "dark" ? "bg-[#181818] border border-white/10 shadow-[0_8px_24px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.06)]" : "bg-neutral-200/80 border border-neutral-300/40 shadow-[0_6px_16px_rgba(0,0,0,0.04)]"} ${className}`,
+      onClick: () => {
+        if (!expanded) setExpanded(true);
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between h-[36px]", children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: {
+              filter: expanded ? "blur(4px)" : "blur(0px)",
+              opacity: expanded ? 0.3 : 1
+            },
+            transition: { duration: 0.3 },
+            className: `flex h-full items-center justify-center px-3 text-xs font-semibold uppercase tracking-wider whitespace-nowrap select-none ${theme === "dark" ? "text-neutral-400" : "text-neutral-600"}`,
+            children: "Frequency"
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: expanded ? /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, scale: 0.95, filter: "blur(4px)" },
+            animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+            exit: { opacity: 0, scale: 0.95, filter: "blur(4px)" },
+            transition: { duration: 0.3, type: "spring", bounce: 0.2 },
+            className: "absolute inset-0 flex h-full w-full justify-between gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `relative flex w-full items-center justify-between rounded-full px-1 shadow-sm ${theme === "dark" ? "bg-[#121212] border border-white/5" : "bg-neutral-100"}`, children: options.map((opt) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setSelected(opt);
+                  },
+                  className: `relative flex-1 text-center cursor-pointer rounded-full px-2 py-1 text-xs transition-colors duration-200 z-10 select-none font-medium ${selected === opt ? theme === "dark" ? "text-white font-semibold" : "text-neutral-900 font-semibold" : theme === "dark" ? "text-neutral-400 hover:text-neutral-200" : "text-neutral-500 hover:text-neutral-700"}`,
+                  children: [
+                    selected === opt && /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        layoutId: "active-freq-pill",
+                        className: `absolute inset-0 rounded-full shadow-sm ${theme === "dark" ? "bg-white/15 border border-white/10" : "bg-neutral-200/90"}`,
+                        style: { zIndex: -1 },
+                        transition: { type: "spring", bounce: 0.2, duration: 0.5 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "relative z-10", children: opt })
+                  ]
+                },
+                opt
+              )) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setExpanded(false);
+                  },
+                  className: `flex h-full shrink-0 cursor-pointer items-center justify-center rounded-full px-3 transition-colors shadow-sm ${theme === "dark" ? "bg-white text-black hover:bg-neutral-200" : "bg-neutral-950 text-white hover:bg-neutral-800"}`,
+                  children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ]
+          },
+          "expanded"
+        ) : /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, scale: 0.95, filter: "blur(4px)", x: 20 },
+            animate: { opacity: 1, scale: 1, filter: "blur(0px)", x: 0 },
+            exit: { opacity: 0, scale: 0.95, filter: "blur(4px)", x: 20 },
+            transition: { duration: 0.3, type: "spring", bounce: 0.2 },
+            className: `relative flex h-full w-fit items-center gap-1.5 rounded-full pl-3.5 pr-2.5 cursor-pointer transition-colors shadow-sm select-none ${theme === "dark" ? "bg-neutral-850 hover:bg-neutral-800 text-white border border-white/10" : "bg-neutral-100 hover:bg-white text-neutral-800"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: selected }),
+              /* @__PURE__ */ jsx("div", { className: `flex h-full items-center justify-center ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })
+            ]
+          },
+          "collapsed"
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  FrequencySelector
+};

package/dist/catalog/components/css-animations/MediaBetweenText.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { UseInViewOptions } from "framer-motion";
+export interface MediaBetweenTextRef {
+    animate: () => void;
+    reset: () => void;
+}
+export interface MediaBetweenTextProps {
+    firstText: string;
+    secondText: string;
+    mediaUrl: string;
+    mediaType?: "image" | "video";
+    mediaContainerClassName?: string;
+    fallbackUrl?: string;
+    as?: React.ElementType;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    alt?: string;
+    triggerType?: "hover" | "ref" | "inView";
+    containerRef?: React.RefObject<Element>;
+    useInViewOptionsProp?: UseInViewOptions;
+    animationVariants?: {
+        initial: any;
+        animate: any;
+    };
+    className?: string;
+    leftTextClassName?: string;
+    rightTextClassName?: string;
+}
+export declare const MediaBetweenText: React.ForwardRefExoticComponent<MediaBetweenTextProps & React.RefAttributes<MediaBetweenTextRef>>;
+export declare function MediaBetweenTextDemo({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;