@nikitph/flux-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3330 @@
+// src/config/flux.config.ts
+var physics = {
+  snappy: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 },
+  smooth: { type: "spring", stiffness: 200, damping: 20, mass: 1 },
+  gentle: { type: "spring", stiffness: 120, damping: 14, mass: 1 },
+  dramatic: { type: "spring", stiffness: 80, damping: 10, mass: 1.5 },
+  bouncy: { type: "spring", stiffness: 400, damping: 15, mass: 1 },
+  cinematic: { type: "spring", stiffness: 50, damping: 12, mass: 2 },
+  instant: { type: "spring", stiffness: 800, damping: 40, mass: 0.3 }
+};
+var motionScale = {
+  distance: { xs: 4, sm: 8, md: 16, lg: 32, xl: 64, "2xl": 128 },
+  rotation: { xs: 1, sm: 3, md: 6, lg: 12, xl: 24 },
+  scale: { xs: 0.98, sm: 0.95, md: 0.9, lg: 0.8 },
+  stagger: { fast: 0.03, normal: 0.06, slow: 0.12, cascade: 0.08 }
+};
+
+// src/context/FluxProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var FluxContext = createContext({});
+function FluxProvider({
+  children,
+  motionLevel
+}) {
+  return /* @__PURE__ */ jsx(FluxContext.Provider, { value: { motionLevel }, children });
+}
+function useFluxContext() {
+  return useContext(FluxContext);
+}
+
+// src/hooks/usePhysics.ts
+function usePhysics(preset = "smooth") {
+  return physics[preset] || physics.smooth;
+}
+
+// src/hooks/usePrefersReducedMotion.ts
+import { useEffect, useState } from "react";
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQueryList.matches);
+    const listener = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, []);
+  return prefersReducedMotion;
+}
+
+// src/hooks/useReducedMotion.ts
+function useReducedMotion() {
+  const { motionLevel } = useFluxContext();
+  const prefersReduced = usePrefersReducedMotion();
+  if (motionLevel === "none" || motionLevel === "reduced") {
+    return true;
+  }
+  if (motionLevel === "full") {
+    return false;
+  }
+  return prefersReduced;
+}
+
+// src/hooks/useIsClient.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useIsClient() {
+  const [isClient, setIsClient] = useState2(false);
+  useEffect2(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+}
+
+// src/hooks/useMergedRef.ts
+import { useRef, useEffect as useEffect3 } from "react";
+function useMergedRef(...refs) {
+  const targetRef = useRef(null);
+  useEffect3(() => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+}
+
+// src/hooks/useInView.ts
+import { useInView as useFramerInView } from "motion/react";
+function useInView(ref, options) {
+  return useFramerInView(ref, options);
+}
+
+// src/hooks/useScrollProgress.ts
+import { useScroll } from "motion/react";
+function useScrollProgress(options) {
+  const { scrollYProgress } = useScroll(options);
+  return scrollYProgress;
+}
+
+// src/hooks/useAnimationBudget.ts
+import { useEffect as useEffect4 } from "react";
+var activeAnimations = 0;
+function useAnimationBudget(_options = {}) {
+  useEffect4(() => {
+    activeAnimations++;
+    return () => {
+      activeAnimations--;
+    };
+  }, []);
+  return { activeAnimations, isWithinBudget: true };
+}
+
+// src/utils/resolveMotion.ts
+function resolveMotion(preset, overrideSpring, isReducedMotion) {
+  if (isReducedMotion) {
+    return { type: "tween", duration: 0.15, ease: "linear" };
+  }
+  if (overrideSpring) {
+    return overrideSpring;
+  }
+  const physicsKey = preset || "smooth";
+  return physics[physicsKey] || physics.smooth;
+}
+
+// src/utils/slot.tsx
+import React, { forwardRef } from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var Slot = forwardRef(
+  ({ children, ...props }, ref) => {
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ...props,
+        ...children.props,
+        ref: (node) => {
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+          const childRef = children.ref;
+          if (typeof childRef === "function") childRef(node);
+          else if (childRef) childRef.current = node;
+        },
+        style: {
+          ...props.style,
+          ...children.props.style
+        },
+        className: [props.className, children.props.className].filter(Boolean).join(" ")
+      });
+    }
+    return /* @__PURE__ */ jsx2(Fragment, { children });
+  }
+);
+Slot.displayName = "Slot";
+
+// src/utils/clamp.ts
+function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+// src/primitives/01-reveal.tsx
+import React2, { forwardRef as forwardRef2, useEffect as useEffect5, useState as useState3 } from "react";
+import { motion, useInView as useInView2 } from "motion/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Reveal = forwardRef2(
+  ({
+    children,
+    physics: physics2 = "gentle",
+    disabled = false,
+    className,
+    style,
+    asChild = false,
+    from = "below",
+    distance = motionScale.distance.md,
+    fade = true,
+    scale = false,
+    rotate = false,
+    trigger = "viewport",
+    threshold = 0.2,
+    once = true,
+    delay = 0,
+    show = true,
+    onReveal,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React2.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const inView = useInView2(internalRef, { amount: threshold, once });
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [hasRevealed, setHasRevealed] = useState3(false);
+    if (disabled) {
+      if (asChild) return /* @__PURE__ */ jsx3(Slot, { ref: mergedRef, className, style, ...props, children });
+      return /* @__PURE__ */ jsx3("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    const initial = {
+      opacity: fade ? isReducedMotion ? 0 : 0 : 1,
+      x: isReducedMotion ? 0 : from === "left" ? -distance : from === "right" ? distance : 0,
+      y: isReducedMotion ? 0 : from === "below" ? distance : from === "above" ? -distance : 0,
+      scale: isReducedMotion ? 1 : scale !== false ? scale : 1,
+      rotate: isReducedMotion ? 0 : rotate !== false ? rotate : 0
+    };
+    const target = { opacity: 1, x: 0, y: 0, scale: 1, rotate: 0 };
+    let shouldAnimate = false;
+    if (trigger === "mount") shouldAnimate = true;
+    else if (trigger === "viewport") shouldAnimate = inView;
+    else if (trigger === "manual") shouldAnimate = show;
+    useEffect5(() => {
+      if (shouldAnimate && !hasRevealed) {
+        setHasRevealed(true);
+        onReveal?.();
+      }
+    }, [shouldAnimate, hasRevealed, onReveal]);
+    const MotionComponent = asChild ? motion.create(Slot) : motion.div;
+    return /* @__PURE__ */ jsx3(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        initial,
+        animate: shouldAnimate ? target : initial,
+        transition: { ...springConfig, delay: isReducedMotion ? 0 : delay },
+        className,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Reveal.displayName = "Reveal";
+
+// src/primitives/02-presence.tsx
+import React3 from "react";
+import { AnimatePresence, motion as motion2 } from "motion/react";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+var Presence = ({
+  children,
+  enterFrom = "below",
+  exitTo,
+  distance = motionScale.distance.md,
+  fade = true,
+  physics: physics2 = "smooth",
+  exitPhysics = "snappy",
+  mode = "sync",
+  onExitComplete,
+  disabled = false
+}) => {
+  const isReducedMotion = useReducedMotion();
+  const enterSpring = resolveMotion(physics2, void 0, isReducedMotion);
+  const exitSpring = resolveMotion(exitPhysics, void 0, isReducedMotion);
+  if (disabled) {
+    return /* @__PURE__ */ jsx4(Fragment2, { children });
+  }
+  const effectiveExitTo = exitTo ?? enterFrom;
+  const getVariant = (direction, _directionExit = false) => {
+    if (isReducedMotion) return { opacity: 0, x: 0, y: 0, scale: 1 };
+    switch (direction) {
+      case "below":
+        return { opacity: fade ? 0 : 1, y: distance, x: 0, scale: 1 };
+      case "above":
+        return { opacity: fade ? 0 : 1, y: -distance, x: 0, scale: 1 };
+      case "left":
+        return { opacity: fade ? 0 : 1, y: 0, x: -distance, scale: 1 };
+      case "right":
+        return { opacity: fade ? 0 : 1, y: 0, x: distance, scale: 1 };
+      case "scale":
+        return { opacity: fade ? 0 : 1, y: 0, x: 0, scale: 0.9 };
+      case "none":
+        return { opacity: fade ? 0 : 1, y: 0, x: 0, scale: 1 };
+      default:
+        return { opacity: fade ? 0 : 1, y: 0, x: 0, scale: 1 };
+    }
+  };
+  const initial = getVariant(enterFrom);
+  const exit = getVariant(effectiveExitTo, true);
+  const animate = { opacity: 1, x: 0, y: 0, scale: 1 };
+  return /* @__PURE__ */ jsx4(AnimatePresence, { mode, onExitComplete, children: React3.Children.map(children, (child) => {
+    if (!React3.isValidElement(child)) return child;
+    const MotionChild = motion2.create(Slot);
+    return /* @__PURE__ */ jsx4(
+      MotionChild,
+      {
+        initial,
+        animate,
+        exit: { ...exit, transition: exitSpring },
+        transition: enterSpring,
+        children: child
+      },
+      child.key || Math.random().toString(36)
+    );
+  }) });
+};
+
+// src/primitives/03-stagger.tsx
+import React4, { forwardRef as forwardRef3, useEffect as useEffect6, useState as useState4 } from "react";
+import { motion as motion3, useInView as useInView3 } from "motion/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Stagger = forwardRef3(
+  ({
+    children,
+    interval = motionScale.stagger.normal,
+    from = "first",
+    reveal = { from: "below", distance: motionScale.distance.md, fade: true, scale: false },
+    trigger = "viewport",
+    threshold = 0.1,
+    once = true,
+    show = true,
+    physics: physics2 = "gentle",
+    className,
+    style,
+    asChild = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React4.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const inView = useInView3(internalRef, { amount: threshold, once });
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [hasRevealed, setHasRevealed] = useState4(false);
+    if (disabled) {
+      if (asChild) return /* @__PURE__ */ jsx5(Slot, { ref: mergedRef, className, style, ...props, children });
+      return /* @__PURE__ */ jsx5("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    let shouldAnimate = false;
+    if (trigger === "mount") shouldAnimate = true;
+    else if (trigger === "viewport") shouldAnimate = inView;
+    else if (trigger === "manual") shouldAnimate = show;
+    useEffect6(() => {
+      if (shouldAnimate && !hasRevealed) {
+        setHasRevealed(true);
+      }
+    }, [shouldAnimate, hasRevealed]);
+    const childrenArray = React4.Children.toArray(children);
+    const count = childrenArray.length;
+    let randomSeed = 0.5;
+    const getInitial = () => {
+      if (isReducedMotion) return { opacity: 0, x: 0, y: 0, scale: 1 };
+      const rFrom = reveal.from || "below";
+      const rDist = reveal.distance || motionScale.distance.md;
+      const rFade = reveal.fade ?? true;
+      const rScale = reveal.scale ?? false;
+      return {
+        opacity: rFade ? 0 : 1,
+        y: rFrom === "below" ? rDist : rFrom === "above" ? -rDist : 0,
+        x: rFrom === "left" ? -rDist : rFrom === "right" ? rDist : 0,
+        scale: rScale !== false ? rScale : 1
+      };
+    };
+    const target = { opacity: 1, x: 0, y: 0, scale: 1 };
+    const initial = getInitial();
+    const renderChildren = childrenArray.map((child, i) => {
+      if (!React4.isValidElement(child)) return child;
+      let delay = 0;
+      if (!isReducedMotion) {
+        if (from === "first") delay = i * interval;
+        else if (from === "last") delay = (count - 1 - i) * interval;
+        else if (from === "center") delay = Math.abs(i - Math.floor(count / 2)) * interval;
+        else if (from === "random") {
+          randomSeed = (randomSeed * 9301 + 49297) % 233280;
+          delay = randomSeed / 233280 * count * interval;
+        }
+      }
+      const MotionChild = motion3.create(Slot);
+      return /* @__PURE__ */ jsx5(
+        MotionChild,
+        {
+          initial,
+          animate: shouldAnimate ? target : initial,
+          transition: { ...springConfig, delay },
+          children: child
+        },
+        child.key || i
+      );
+    });
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx5(Comp, { ref: mergedRef, className, style, ...props, children: renderChildren });
+  }
+);
+Stagger.displayName = "Stagger";
+
+// src/primitives/04-text-reveal.tsx
+import React5, { forwardRef as forwardRef4, useEffect as useEffect7, useState as useState5 } from "react";
+import { motion as motion4, useInView as useInView4 } from "motion/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TextReveal = forwardRef4(
+  ({
+    children,
+    by = "word",
+    stagger,
+    from = "below",
+    distance,
+    fade = true,
+    blur = false,
+    trigger = "viewport",
+    threshold = 0.2,
+    once = true,
+    show = true,
+    tag: Tag = "p",
+    physics: physics2 = "gentle",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React5.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const inView = useInView4(internalRef, { amount: threshold, once });
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [hasRevealed, setHasRevealed] = useState5(false);
+    let shouldAnimate = false;
+    if (trigger === "mount") shouldAnimate = true;
+    else if (trigger === "viewport") shouldAnimate = inView;
+    else if (trigger === "manual") shouldAnimate = show;
+    useEffect7(() => {
+      if (shouldAnimate && !hasRevealed) setHasRevealed(true);
+    }, [shouldAnimate, hasRevealed]);
+    if (disabled || typeof children !== "string") {
+      const Comp = motion4[Tag];
+      return /* @__PURE__ */ jsx6(Comp, { ref: mergedRef, className, style, ...props, children });
+    }
+    const resolvedStagger = stagger ?? (by === "char" ? 0.02 : by === "word" ? 0.04 : 0.08);
+    const resolvedDistance = distance ?? (by === "char" ? 8 : 16);
+    const getInitial = () => {
+      if (isReducedMotion) return { opacity: 0, filter: "blur(0px)" };
+      return {
+        opacity: fade ? 0 : 1,
+        y: from === "below" ? resolvedDistance : from === "above" ? -resolvedDistance : 0,
+        x: from === "left" ? -resolvedDistance : from === "right" ? resolvedDistance : 0,
+        filter: blur !== false ? `blur(${blur}px)` : "blur(0px)"
+      };
+    };
+    const initial = getInitial();
+    const target = { opacity: 1, x: 0, y: 0, filter: "blur(0px)" };
+    let tokens = [];
+    if (by === "char") tokens = children.split("");
+    else if (by === "word") tokens = children.split(/(\s+)/);
+    else if (by === "line") tokens = children.split("\n");
+    const MotionTag = motion4[Tag];
+    return /* @__PURE__ */ jsx6(MotionTag, { ref: mergedRef, className, style, ...props, children: tokens.map((token, i) => {
+      if (by === "char" && token === " ") {
+        return /* @__PURE__ */ jsx6("span", { children: "\xA0" }, i);
+      }
+      if (by === "word" && token.trim() === "") {
+        return /* @__PURE__ */ jsx6("span", { children: token }, i);
+      }
+      const displayStyle = by === "line" ? "block" : "inline-block";
+      return /* @__PURE__ */ jsx6(
+        motion4.span,
+        {
+          style: { display: displayStyle, whiteSpace: "pre-wrap" },
+          initial,
+          animate: shouldAnimate ? target : initial,
+          transition: isReducedMotion ? void 0 : { ...springConfig, delay: i * resolvedStagger },
+          children: token
+        },
+        i
+      );
+    }) });
+  }
+);
+TextReveal.displayName = "TextReveal";
+
+// src/primitives/05-count-up.tsx
+import React6, { forwardRef as forwardRef5, useEffect as useEffect8 } from "react";
+import { motion as motion5, useInView as useInView5, useMotionValue, useSpring, useTransform } from "motion/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CountUp = forwardRef5(
+  ({
+    from = 0,
+    to,
+    duration,
+    decimals = 0,
+    prefix = "",
+    suffix = "",
+    separator = ",",
+    trigger = "viewport",
+    threshold = 0.2,
+    once = true,
+    show = true,
+    tag: Tag = "span",
+    formatFn,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React6.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const inView = useInView5(internalRef, { amount: threshold, once });
+    let shouldAnimate = false;
+    if (trigger === "mount") shouldAnimate = true;
+    else if (trigger === "viewport") shouldAnimate = inView;
+    else if (trigger === "manual") shouldAnimate = show;
+    const baseValue = useMotionValue(from);
+    const springConfig = duration ? { duration } : resolveMotion(physics2, void 0, isReducedMotion);
+    const animatedValue = useSpring(baseValue, duration ? void 0 : springConfig);
+    useEffect8(() => {
+      if (shouldAnimate) {
+        if (isReducedMotion || disabled) {
+          baseValue.jump(to);
+        } else {
+          baseValue.set(to);
+        }
+      } else {
+        baseValue.set(from);
+      }
+    }, [shouldAnimate, isReducedMotion, disabled, to, from, baseValue]);
+    const display = useTransform(animatedValue, (val) => {
+      if (formatFn) return formatFn(val);
+      const parts = Number(val).toFixed(decimals).split(".");
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+      return `${prefix}${parts.join(".")}${suffix}`;
+    });
+    const MotionTag = motion5[Tag];
+    return /* @__PURE__ */ jsx7(MotionTag, { ref: mergedRef, className, style, ...props, children: display });
+  }
+);
+CountUp.displayName = "CountUp";
+
+// src/primitives/06-morph-text.tsx
+import React7, { forwardRef as forwardRef6, useEffect as useEffect9, useState as useState6 } from "react";
+import { motion as motion6, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var MorphText = forwardRef6(
+  ({
+    texts,
+    interval = 3,
+    mode = "crossfade",
+    stagger = 0.02,
+    scrambleChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%",
+    scrambleDuration = 0.6,
+    loop = true,
+    pause = false,
+    tag: Tag = "span",
+    onTextChange,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React7.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [currentIndex, setCurrentIndex] = useState6(0);
+    useEffect9(() => {
+      if (disabled || pause || texts.length <= 1) return;
+      if (!loop && currentIndex === texts.length - 1) return;
+      const timer = setTimeout(() => {
+        const nextIndex = (currentIndex + 1) % texts.length;
+        setCurrentIndex(nextIndex);
+        onTextChange?.(nextIndex);
+      }, interval * 1e3);
+      return () => clearTimeout(timer);
+    }, [currentIndex, texts, interval, loop, pause, disabled, onTextChange]);
+    if (disabled || isReducedMotion) {
+      const Comp = Tag;
+      return /* @__PURE__ */ jsx8(Comp, { ref: mergedRef, className, style, ...props, children: texts[currentIndex] });
+    }
+    const currentText = texts[currentIndex];
+    const MotionTag = motion6[Tag];
+    if (mode === "crossfade") {
+      return /* @__PURE__ */ jsxs(MotionTag, { "aria-live": "polite", ref: mergedRef, className, style, ...props, children: [
+        /* @__PURE__ */ jsx8("span", { style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }, children: currentText }),
+        /* @__PURE__ */ jsx8(AnimatePresence2, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx8(
+          motion6.span,
+          {
+            initial: { opacity: 0, filter: "blur(4px)", y: 10 },
+            animate: { opacity: 1, filter: "blur(0px)", y: 0 },
+            exit: { opacity: 0, filter: "blur(4px)", y: -10 },
+            transition: springConfig,
+            style: { display: "inline-block" },
+            children: currentText
+          },
+          currentIndex
+        ) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx8(MotionTag, { "aria-live": "polite", ref: mergedRef, className, style, ...props, children: /* @__PURE__ */ jsx8(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx8(
+      motion6.span,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: springConfig,
+        children: currentText
+      },
+      currentIndex
+    ) }) });
+  }
+);
+MorphText.displayName = "MorphText";
+
+// src/primitives/07-flip-card.tsx
+import React8, { forwardRef as forwardRef7, useState as useState7 } from "react";
+import { motion as motion7 } from "motion/react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var FlipCard = forwardRef7(
+  ({
+    front,
+    back,
+    flipped: controlledFlipped,
+    direction = "horizontal",
+    trigger = "click",
+    perspective = 1e3,
+    height = "100%",
+    width = "100%",
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React8.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [isFlippedState, setFlipped] = useState7(false);
+    const isFlipped = controlledFlipped !== void 0 ? controlledFlipped : isFlippedState;
+    if (disabled) {
+      return /* @__PURE__ */ jsx9("div", { ref: mergedRef, className, style: { ...style, height, width }, ...props, children: isFlipped ? back : front });
+    }
+    const handleInteraction = () => {
+      if (trigger === "click") {
+        setFlipped((prev) => !prev);
+      }
+    };
+    const handleHoverStart = () => {
+      if (trigger === "hover") setFlipped(true);
+    };
+    const handleHoverEnd = () => {
+      if (trigger === "hover") setFlipped(false);
+    };
+    const rotateAxis = direction === "horizontal" ? "rotateY" : "rotateX";
+    const frontRotate = isFlipped ? 180 : 0;
+    const backRotate = isFlipped ? 360 : 180;
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          perspective: `${perspective}px`,
+          position: "relative",
+          height,
+          width,
+          ...style
+        },
+        onClick: handleInteraction,
+        onMouseEnter: handleHoverStart,
+        onMouseLeave: handleHoverEnd,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9(
+            motion7.div,
+            {
+              animate: isReducedMotion ? void 0 : { [rotateAxis]: frontRotate, opacity: isReducedMotion ? isFlipped ? 0 : 1 : 1 },
+              transition: springConfig,
+              style: {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backfaceVisibility: "hidden",
+                transformStyle: "preserve-3d"
+              },
+              children: front
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            motion7.div,
+            {
+              animate: isReducedMotion ? void 0 : { [rotateAxis]: backRotate, opacity: isReducedMotion ? isFlipped ? 1 : 0 : 1 },
+              transition: springConfig,
+              initial: { [rotateAxis]: 180, opacity: isReducedMotion ? 0 : 1 },
+              style: {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backfaceVisibility: "hidden",
+                transformStyle: "preserve-3d"
+              },
+              children: back
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FlipCard.displayName = "FlipCard";
+
+// src/primitives/08-collapse.tsx
+import { forwardRef as forwardRef8, useEffect as useEffect10, useRef as useRef2, useState as useState8 } from "react";
+import { motion as motion8 } from "motion/react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Collapse = forwardRef8(
+  ({
+    children,
+    open,
+    initialHeight = 0,
+    fade = true,
+    overflow = "hidden",
+    onOpenComplete,
+    onCloseComplete,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef2(null);
+    const contentRef = useRef2(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [contentHeight, setContentHeight] = useState8(initialHeight);
+    useEffect10(() => {
+      if (!contentRef.current) return;
+      if (open) {
+        const height = contentRef.current.getBoundingClientRect().height;
+        setContentHeight(height);
+      } else {
+        const height = contentRef.current.getBoundingClientRect().height;
+        setContentHeight(height);
+        requestAnimationFrame(() => {
+          setContentHeight(initialHeight);
+        });
+      }
+    }, [open, initialHeight]);
+    const handleAnimationComplete = () => {
+      if (open) {
+        setContentHeight("auto");
+        onOpenComplete?.();
+      } else {
+        onCloseComplete?.();
+      }
+    };
+    if (disabled) {
+      if (!open && initialHeight === 0) return null;
+      return /* @__PURE__ */ jsx10("div", { ref: mergedRef, className, style: { height: open ? "auto" : initialHeight, overflow: open ? overflow : "hidden", ...style }, ...props, children });
+    }
+    return /* @__PURE__ */ jsx10(
+      motion8.div,
+      {
+        ref: mergedRef,
+        className,
+        initial: { height: initialHeight, opacity: fade ? 0 : 1 },
+        animate: {
+          height: contentHeight,
+          opacity: open ? 1 : fade ? 0 : 1
+        },
+        transition: springConfig,
+        onAnimationComplete: handleAnimationComplete,
+        style: { overflow, ...style },
+        ...props,
+        children: /* @__PURE__ */ jsx10("div", { ref: contentRef, children })
+      }
+    );
+  }
+);
+Collapse.displayName = "Collapse";
+
+// src/primitives/09-magnetic.tsx
+import React10, { forwardRef as forwardRef9, useCallback, useEffect as useEffect11, useRef as useRef3 } from "react";
+import { motion as motion9, useMotionValue as useMotionValue2, useSpring as useSpring2 } from "motion/react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Magnetic = forwardRef9(
+  ({
+    children,
+    strength = 0.3,
+    radius = 150,
+    maxDisplacement = 20,
+    spring = "snappy",
+    disableOnTouch = true,
+    className,
+    style,
+    asChild = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef3(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(spring, void 0, isReducedMotion);
+    const [isTouchDevice, setIsTouchDevice] = React10.useState(false);
+    useEffect11(() => {
+      setIsTouchDevice(window.matchMedia("(pointer: coarse)").matches);
+    }, []);
+    const x = useMotionValue2(0);
+    const y = useMotionValue2(0);
+    const springX = useSpring2(x, isReducedMotion ? { duration: 0 } : springConfig);
+    const springY = useSpring2(y, isReducedMotion ? { duration: 0 } : springConfig);
+    const handleMouseMove = useCallback((e) => {
+      if (isReducedMotion || disableOnTouch && isTouchDevice) return;
+      if (!internalRef.current) return;
+      const rect = internalRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const deltaX = e.clientX - centerX;
+      const deltaY = e.clientY - centerY;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (distance <= radius) {
+        const moveX = Math.max(-maxDisplacement, Math.min(maxDisplacement, deltaX * strength));
+        const moveY = Math.max(-maxDisplacement, Math.min(maxDisplacement, deltaY * strength));
+        x.set(moveX);
+        y.set(moveY);
+      } else {
+        x.set(0);
+        y.set(0);
+      }
+    }, [x, y, radius, maxDisplacement, strength, isTouchDevice, disableOnTouch, isReducedMotion]);
+    const handleMouseLeave = () => {
+      x.set(0);
+      y.set(0);
+    };
+    useEffect11(() => {
+      window.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+      };
+    }, [handleMouseMove]);
+    const MotionComponent = asChild ? motion9.create(Slot) : motion9.div;
+    return /* @__PURE__ */ jsx11(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        className,
+        style: { ...style, x: springX, y: springY },
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Magnetic.displayName = "Magnetic";
+
+// src/primitives/10-hover-scale.tsx
+import React11, { forwardRef as forwardRef10 } from "react";
+import { motion as motion10 } from "motion/react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var HoverScale = forwardRef10(
+  ({
+    children,
+    hoverScale = 1.03,
+    pressScale = 0.97,
+    hoverRotate = 0,
+    liftShadow = false,
+    shadowColor = "rgba(0,0,0,0.15)",
+    physics: physics2 = "snappy",
+    className,
+    style,
+    asChild = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React11.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    if (disabled) {
+      if (asChild) return /* @__PURE__ */ jsx12(Slot, { ref: mergedRef, className, style, ...props, children });
+      return /* @__PURE__ */ jsx12("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    const whileHover = isReducedMotion ? { opacity: 0.8 } : {
+      scale: hoverScale,
+      rotate: hoverRotate,
+      boxShadow: liftShadow ? `0 10px 30px ${shadowColor}` : void 0
+    };
+    const whileTap = isReducedMotion ? { opacity: 0.6 } : { scale: pressScale };
+    const MotionComponent = asChild ? motion10.create(Slot) : motion10.div;
+    return /* @__PURE__ */ jsx12(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        className,
+        style,
+        whileHover,
+        whileTap,
+        transition: springConfig,
+        ...props,
+        children
+      }
+    );
+  }
+);
+HoverScale.displayName = "HoverScale";
+
+// src/primitives/11-tilt.tsx
+import React12, { forwardRef as forwardRef11, useCallback as useCallback2, useEffect as useEffect12, useRef as useRef4 } from "react";
+import { motion as motion11, useMotionValue as useMotionValue3, useSpring as useSpring3, useMotionTemplate } from "motion/react";
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var Tilt = forwardRef11(
+  ({
+    children,
+    maxTilt = 15,
+    perspective = 1e3,
+    scale = 1.02,
+    glare = false,
+    glareOpacity = 0.15,
+    glareColor = "white",
+    reverse = false,
+    resetOnLeave = true,
+    disableOnTouch = true,
+    axis = "both",
+    physics: physics2 = "snappy",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef4(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [isTouchDevice, setIsTouchDevice] = React12.useState(false);
+    useEffect12(() => setIsTouchDevice(window.matchMedia("(pointer: coarse)").matches), []);
+    const x = useMotionValue3(0);
+    const y = useMotionValue3(0);
+    const glareX = useMotionValue3(50);
+    const glareY = useMotionValue3(50);
+    const s = useMotionValue3(1);
+    const rotateX = useSpring3(x, isReducedMotion ? { duration: 0 } : springConfig);
+    const rotateY = useSpring3(y, isReducedMotion ? { duration: 0 } : springConfig);
+    const scaleVal = useSpring3(s, isReducedMotion ? { duration: 0 } : springConfig);
+    const gX = useSpring3(glareX, isReducedMotion ? { duration: 0 } : springConfig);
+    const gY = useSpring3(glareY, isReducedMotion ? { duration: 0 } : springConfig);
+    const handleMouseMove = useCallback2((e) => {
+      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
+      if (!internalRef.current) return;
+      const rect = internalRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const mouseX = (e.clientX - centerX) / rect.width;
+      const mouseY = (e.clientY - centerY) / rect.height;
+      const multiplier = reverse ? -1 : 1;
+      if (axis === "both" || axis === "y") {
+        x.set(-mouseY * maxTilt * 2 * multiplier);
+      }
+      if (axis === "both" || axis === "x") {
+        y.set(mouseX * maxTilt * 2 * multiplier);
+      }
+      s.set(scale);
+      if (glare) {
+        glareX.set((e.clientX - rect.left) / rect.width * 100);
+        glareY.set((e.clientY - rect.top) / rect.height * 100);
+      }
+    }, [x, y, s, glareX, glareY, maxTilt, reverse, axis, scale, glare, disabled, isReducedMotion, disableOnTouch, isTouchDevice]);
+    const handleMouseLeave = useCallback2(() => {
+      if (disabled || isReducedMotion) return;
+      if (resetOnLeave) {
+        x.set(0);
+        y.set(0);
+      }
+      s.set(1);
+    }, [x, y, s, resetOnLeave, disabled, isReducedMotion]);
+    const glareBackground = useMotionTemplate`radial-gradient(circle at ${gX}% ${gY}%, ${glareColor} 0%, transparent 80%)`;
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx13("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: { perspective: `${perspective}px`, transformStyle: "preserve-3d", position: "relative", ...style },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs3(
+          motion11.div,
+          {
+            style: { rotateX, rotateY, scale: scaleVal, transformStyle: "preserve-3d", width: "100%", height: "100%" },
+            children: [
+              children,
+              glare && /* @__PURE__ */ jsx13(
+                motion11.div,
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: glareBackground,
+                    opacity: glareOpacity,
+                    pointerEvents: "none",
+                    borderRadius: "inherit"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Tilt.displayName = "Tilt";
+
+// src/primitives/12-drag.tsx
+import React13, { forwardRef as forwardRef12 } from "react";
+import { motion as motion12 } from "motion/react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Drag = forwardRef12(
+  ({
+    children,
+    axis = "both",
+    constraints,
+    snapBack = false,
+    snapPoints,
+    snapThreshold = 50,
+    dragElastic = 0.2,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    cursor = "grab",
+    handle,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    asChild = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React13.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    if (disabled) {
+      if (asChild) return /* @__PURE__ */ jsx14(Slot, { ref: mergedRef, className, style, ...props, children });
+      return /* @__PURE__ */ jsx14("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    const handleDragEnd = (e, info) => {
+      onDragEnd?.(e, info);
+    };
+    const MotionComponent = asChild ? motion12.create(Slot) : motion12.div;
+    return /* @__PURE__ */ jsx14(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        drag: axis === "both" ? true : axis,
+        dragConstraints: constraints,
+        dragElastic,
+        dragSnapToOrigin: snapBack,
+        dragTransition: { bounceStiffness: isReducedMotion ? 0 : 600, bounceDamping: 20 },
+        whileDrag: { cursor: cursor === "grab" ? "grabbing" : cursor },
+        onDragStart,
+        onDrag,
+        onDragEnd: handleDragEnd,
+        dragControls: void 0,
+        dragListener: !handle,
+        className,
+        style: { cursor, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Drag.displayName = "Drag";
+
+// src/primitives/13-swipe.tsx
+import React14, { forwardRef as forwardRef13, useState as useState9 } from "react";
+import { motion as motion13, useAnimation } from "motion/react";
+import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+var Swipe = forwardRef13(
+  ({
+    children,
+    direction = "horizontal",
+    threshold = 0.4,
+    velocityThreshold = 500,
+    rubberBand = true,
+    rubberBandFactor = 0.2,
+    onSwipe,
+    onSwipeStart,
+    renderBackground,
+    snapBack = true,
+    exitAnimation = true,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React14.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const controls = useAnimation();
+    const [swipeProgress, setSwipeProgress] = useState9(0);
+    const [swipeDirection, setSwipeDirection] = useState9(null);
+    if (disabled) {
+      return /* @__PURE__ */ jsx15("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children });
+    }
+    const dragProp = direction === "horizontal" ? "x" : direction === "vertical" ? "y" : true;
+    const handleDrag = (_, info) => {
+      if (!internalRef.current) return;
+      const rect = internalRef.current.getBoundingClientRect();
+      const progress = Math.min(Math.max(info.offset.x / rect.width, -1), 1);
+      setSwipeProgress(Math.abs(progress));
+      setSwipeDirection(progress > 0 ? "right" : progress < 0 ? "left" : null);
+    };
+    const handleDragEnd = async (_, info) => {
+      if (!internalRef.current) return;
+      const rect = internalRef.current.getBoundingClientRect();
+      const offset = direction === "vertical" ? info.offset.y : info.offset.x;
+      const velocity = direction === "vertical" ? info.velocity.y : info.velocity.x;
+      const size = direction === "vertical" ? rect.height : rect.width;
+      const isBeyondThreshold = Math.abs(offset) > size * threshold;
+      const isFastEnough = Math.abs(velocity) > velocityThreshold;
+      if (isBeyondThreshold || isFastEnough) {
+        const swipedDir = offset > 0 ? direction === "vertical" ? "down" : "right" : direction === "vertical" ? "up" : "left";
+        onSwipe?.(swipedDir);
+        if (exitAnimation) {
+          const exitDistance = offset > 0 ? size : -size;
+          await controls.start(
+            isReducedMotion ? { opacity: 0 } : { [direction === "vertical" ? "y" : "x"]: exitDistance, opacity: 0 },
+            springConfig
+          );
+        }
+      } else if (snapBack) {
+        controls.start({ x: 0, y: 0 }, springConfig);
+      }
+      setSwipeProgress(0);
+    };
+    return /* @__PURE__ */ jsxs4("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children: [
+      renderBackground && swipeDirection && /* @__PURE__ */ jsx15("div", { style: { position: "absolute", inset: 0, zIndex: 0 }, children: renderBackground(swipeDirection, swipeProgress) }),
+      /* @__PURE__ */ jsx15(
+        motion13.div,
+        {
+          drag: dragProp,
+          dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
+          dragElastic: rubberBand ? rubberBandFactor : 0,
+          onDrag: handleDrag,
+          onDragEnd: handleDragEnd,
+          animate: controls,
+          style: { zIndex: 1, position: "relative" },
+          children
+        }
+      )
+    ] });
+  }
+);
+Swipe.displayName = "Swipe";
+
+// src/primitives/14-long-press.tsx
+import { forwardRef as forwardRef14, useRef as useRef5, useState as useState10 } from "react";
+import { motion as motion14, useAnimation as useAnimation2 } from "motion/react";
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+var LongPress = forwardRef14(
+  ({
+    children,
+    duration = 0.8,
+    onLongPress,
+    onPressStart,
+    onPressEnd,
+    feedback = "ring",
+    feedbackColor = "currentColor",
+    cancelOnMove = true,
+    haptic = false,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef5(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const controls = useAnimation2();
+    const timerRef = useRef5(null);
+    const [isPressed, setIsPressed] = useState10(false);
+    if (disabled) {
+      return /* @__PURE__ */ jsx16("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children });
+    }
+    const handlePointerDown = () => {
+      setIsPressed(true);
+      onPressStart?.();
+      if (feedback === "scale" && !isReducedMotion) {
+        controls.start({ scale: 0.95 }, { duration });
+      } else if (feedback === "ring" && !isReducedMotion) {
+        controls.start({ strokeDashoffset: 0 }, { duration, ease: "linear" });
+      } else if (feedback === "fill" && !isReducedMotion) {
+        controls.start({ scaleX: 1 }, { duration, ease: "linear" });
+      }
+      timerRef.current = setTimeout(() => {
+        setIsPressed(false);
+        onLongPress?.();
+        if (haptic && typeof navigator !== "undefined" && navigator.vibrate) {
+          navigator.vibrate(50);
+        }
+      }, duration * 1e3);
+    };
+    const handlePointerUp = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setIsPressed(false);
+      onPressEnd?.();
+      if (!isReducedMotion) {
+        if (feedback === "scale") controls.start({ scale: 1 }, springConfig);
+        if (feedback === "ring") controls.start({ strokeDashoffset: 100 }, springConfig);
+        if (feedback === "fill") controls.start({ scaleX: 0 }, springConfig);
+      }
+    };
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: { position: "relative", userSelect: "none", ...style },
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerUp,
+        onPointerMove: cancelOnMove ? () => {
+          if (isPressed) handlePointerUp();
+        } : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx16(motion14.div, { animate: controls, style: feedback === "scale" ? { originX: 0.5, originY: 0.5 } : {}, children }),
+          feedback === "ring" && /* @__PURE__ */ jsx16("svg", { style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }, children: /* @__PURE__ */ jsx16(
+            motion14.rect,
+            {
+              width: "100%",
+              height: "100%",
+              fill: "none",
+              stroke: feedbackColor,
+              strokeWidth: "4",
+              rx: "8",
+              strokeDasharray: "100 100",
+              initial: { strokeDashoffset: 100 },
+              animate: controls
+            }
+          ) }),
+          feedback === "fill" && /* @__PURE__ */ jsx16(
+            motion14.div,
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                backgroundColor: feedbackColor,
+                opacity: 0.2,
+                originX: 0,
+                pointerEvents: "none"
+              },
+              initial: { scaleX: 0 },
+              animate: controls
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LongPress.displayName = "LongPress";
+
+// src/primitives/15-hover-3d.tsx
+import React16, { createContext as createContext2, forwardRef as forwardRef15, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect13, useRef as useRef6 } from "react";
+import { motion as motion15, useMotionValue as useMotionValue4, useSpring as useSpring4 } from "motion/react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Hover3DContext = createContext2({
+  mouseX: null,
+  mouseY: null,
+  maxMovement: 0,
+  isReducedMotion: false
+});
+var Hover3DRoot = forwardRef15(
+  ({
+    children,
+    perspective = 1200,
+    maxMovement = 20,
+    layers,
+    disableOnTouch = true,
+    physics: physics2 = "snappy",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef6(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [isTouchDevice, setIsTouchDevice] = React16.useState(false);
+    useEffect13(() => setIsTouchDevice(window.matchMedia("(pointer: coarse)").matches), []);
+    const x = useMotionValue4(0);
+    const y = useMotionValue4(0);
+    const mouseX = useSpring4(x, isReducedMotion ? { duration: 0 } : springConfig);
+    const mouseY = useSpring4(y, isReducedMotion ? { duration: 0 } : springConfig);
+    const handleMouseMove = useCallback3((e) => {
+      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
+      if (!internalRef.current) return;
+      const rect = internalRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const offsetX = (e.clientX - centerX) / rect.width;
+      const offsetY = (e.clientY - centerY) / rect.height;
+      x.set(offsetX * 2);
+      y.set(offsetY * 2);
+    }, [x, y, disabled, isReducedMotion, disableOnTouch, isTouchDevice]);
+    const handleMouseLeave = useCallback3(() => {
+      x.set(0);
+      y.set(0);
+    }, [x, y]);
+    if (disabled) {
+      return /* @__PURE__ */ jsx17("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children });
+    }
+    const childrenArray = React16.Children.toArray(children);
+    const numLayers = layers || childrenArray.length;
+    const renderedChildren = React16.Children.map(childrenArray, (child, index) => {
+      if (!React16.isValidElement(child)) return child;
+      if (child.type === Hover3DLayer || child.props && child.props.depth !== void 0) {
+        const depth = child.props.depth ?? (numLayers > 1 ? index / (numLayers - 1) : 0);
+        return React16.cloneElement(child, { depth });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx17(Hover3DContext.Provider, { value: { mouseX, mouseY, maxMovement, isReducedMotion }, children: /* @__PURE__ */ jsx17(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: { perspective: `${perspective}px`, position: "relative", transformStyle: "preserve-3d", ...style },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: renderedChildren
+      }
+    ) });
+  }
+);
+Hover3DRoot.displayName = "Hover3D";
+var Hover3DLayer = forwardRef15(
+  ({ children, depth = 0, className, style, ...props }, ref) => {
+    const { mouseX, mouseY, maxMovement, isReducedMotion } = useContext2(Hover3DContext);
+    if (isReducedMotion || mouseX === null) {
+      return /* @__PURE__ */ jsx17("div", { ref, className, style: { position: "absolute", inset: 0, ...style }, ...props, children });
+    }
+    return /* @__PURE__ */ jsx17(
+      motion15.div,
+      {
+        ref,
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          x: useMotionValue4(0),
+          // Will be overridden by style calculation
+          y: useMotionValue4(0),
+          transformStyle: "preserve-3d",
+          ...style
+        },
+        ...{
+          style: {
+            x: depth > 0 ? mouseX.get() * maxMovement * depth : 0,
+            y: depth > 0 ? mouseY.get() * maxMovement * depth : 0,
+            position: "absolute",
+            inset: 0,
+            ...style
+          }
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Hover3DLayer.displayName = "Hover3D.Layer";
+var Hover3D = Object.assign(Hover3DRoot, { Layer: Hover3DLayer });
+
+// src/primitives/16-scroll-velocity.tsx
+import React17, { forwardRef as forwardRef16, useEffect as useEffect14, useRef as useRef7 } from "react";
+import { motion as motion16, useScroll as useScroll2, useVelocity, useSpring as useSpring5, useTransform as useTransform2 } from "motion/react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ScrollVelocity = forwardRef16(
+  ({
+    children,
+    effect = "speed",
+    sensitivity = 1,
+    maxEffect,
+    direction = "y",
+    smoothing = 0.5,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef7(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx18("div", { ref: mergedRef, className, style, ...props, children: typeof children === "function" ? children(0) : children });
+    }
+    const { scrollY, scrollX } = useScroll2();
+    const scrollValue = direction === "y" ? scrollY : scrollX;
+    const velocity = useVelocity(scrollValue);
+    const smoothedVelocity = useSpring5(velocity, {
+      damping: 50,
+      stiffness: 400
+    });
+    const maxEffectVal = maxEffect ?? (effect === "blur" ? 10 : effect === "stretch" ? 1.5 : effect === "skew" ? 15 : effect === "speed" ? 100 : 1);
+    const filter = useTransform2(smoothedVelocity, (v) => {
+      if (effect !== "blur") return "none";
+      const val = Math.min(Math.abs(v) * sensitivity * 0.01, maxEffectVal);
+      return `blur(${val}px)`;
+    });
+    const scaleY = useTransform2(smoothedVelocity, (v) => {
+      if (effect !== "stretch") return 1;
+      const val = Math.min(1 + Math.abs(v) * sensitivity * 1e-3, maxEffectVal);
+      return val;
+    });
+    const skewY = useTransform2(smoothedVelocity, (v) => {
+      if (effect !== "skew") return 0;
+      const sign = Math.sign(v);
+      const val = Math.min(Math.abs(v) * sensitivity * 0.1, maxEffectVal);
+      return `${sign * val}deg`;
+    });
+    useEffect14(() => {
+      if (effect === "speed" && internalRef.current) {
+        return smoothedVelocity.on("change", (latest) => {
+          if (internalRef.current) {
+            internalRef.current.style.setProperty("--scroll-velocity", Math.min(Math.abs(latest * sensitivity), maxEffectVal).toString());
+          }
+        });
+      }
+    }, [effect, smoothedVelocity, sensitivity, maxEffectVal]);
+    const [currentVelocity, setCurrentVelocity] = React17.useState(0);
+    useEffect14(() => {
+      if (typeof children === "function") {
+        return smoothedVelocity.on("change", setCurrentVelocity);
+      }
+    }, [children, smoothedVelocity]);
+    return /* @__PURE__ */ jsx18(
+      motion16.div,
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          ...style,
+          filter,
+          scaleY,
+          transformOrigin: direction === "y" ? "center" : "left"
+          // Framer doesn't cleanly map skewY string like this, using standard inline style is safer
+        },
+        animate: effect === "skew" ? { skewY: skewY.get() } : void 0,
+        ...props,
+        children: typeof children === "function" ? children(currentVelocity) : children
+      }
+    );
+  }
+);
+ScrollVelocity.displayName = "ScrollVelocity";
+
+// src/primitives/17-spotlight.tsx
+import React18, { forwardRef as forwardRef17, useCallback as useCallback4, useEffect as useEffect15, useRef as useRef8 } from "react";
+import { motion as motion17, useMotionValue as useMotionValue5, useSpring as useSpring6, useMotionTemplate as useMotionTemplate2 } from "motion/react";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var Spotlight = forwardRef17(
+  ({
+    children,
+    size = 200,
+    color = "rgba(255,255,255,0.1)",
+    borderColor,
+    opacity = 0.15,
+    blur = 40,
+    mode = "glow",
+    disableOnTouch = true,
+    physics: physics2 = "snappy",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef8(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    const [isTouchDevice, setIsTouchDevice] = React18.useState(false);
+    useEffect15(() => setIsTouchDevice(window.matchMedia("(pointer: coarse)").matches), []);
+    const mouseX = useMotionValue5(0);
+    const mouseY = useMotionValue5(0);
+    const x = useSpring6(mouseX, isReducedMotion ? { duration: 0 } : springConfig);
+    const y = useSpring6(mouseY, isReducedMotion ? { duration: 0 } : springConfig);
+    const handleMouseMove = useCallback4((e) => {
+      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
+      if (!internalRef.current) return;
+      const rect = internalRef.current.getBoundingClientRect();
+      mouseX.set(e.clientX - rect.left);
+      mouseY.set(e.clientY - rect.top);
+    }, [mouseX, mouseY, disabled, isReducedMotion, disableOnTouch, isTouchDevice]);
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx19("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children });
+    }
+    const background = useMotionTemplate2`radial-gradient(${size}px circle at ${x}px ${y}px, ${color}, transparent 100%)`;
+    const borderBackground = borderColor ? useMotionTemplate2`radial-gradient(${size}px circle at ${x}px ${y}px, ${borderColor}, transparent 100%)` : background;
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: { position: "relative", ...style },
+        onMouseMove: handleMouseMove,
+        ...props,
+        children: [
+          mode === "border" && /* @__PURE__ */ jsx19(
+            motion17.div,
+            {
+              style: {
+                position: "absolute",
+                inset: -1,
+                // Adjust based on desired border width
+                background: borderBackground,
+                opacity,
+                zIndex: 0,
+                pointerEvents: "none",
+                borderRadius: "inherit",
+                maskImage: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                maskComposite: "exclude"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx19("div", { style: { position: "relative", zIndex: 1 }, children }),
+          (mode === "glow" || mode === "reveal") && /* @__PURE__ */ jsx19(
+            motion17.div,
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                background,
+                opacity,
+                zIndex: 2,
+                pointerEvents: "none",
+                borderRadius: "inherit",
+                mixBlendMode: mode === "reveal" ? "overlay" : "normal",
+                filter: `blur(${blur}px)`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Spotlight.displayName = "Spotlight";
+
+// src/primitives/18-follow-cursor.tsx
+import React19, { forwardRef as forwardRef18, useCallback as useCallback5, useEffect as useEffect16, useState as useState11 } from "react";
+import { motion as motion18, useMotionValue as useMotionValue6, useSpring as useSpring7 } from "motion/react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var FollowCursor = forwardRef18(
+  ({
+    children,
+    offset = { x: 16, y: 16 },
+    lag = 0.2,
+    rotate = false,
+    hideOnLeave = true,
+    containTo = "parent",
+    visible = true,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    asChild = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React19.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const customPhysics = {
+      type: "spring",
+      stiffness: 400 * (1 - lag),
+      damping: 30 * (1 - lag)
+    };
+    const springConfig = resolveMotion(void 0, customPhysics, isReducedMotion);
+    const x = useMotionValue6(0);
+    const y = useMotionValue6(0);
+    const r = useMotionValue6(0);
+    const smoothX = useSpring7(x, isReducedMotion ? { duration: 0 } : springConfig);
+    const smoothY = useSpring7(y, isReducedMotion ? { duration: 0 } : springConfig);
+    const smoothR = useSpring7(r, isReducedMotion ? { duration: 0 } : springConfig);
+    const [isVisible, setIsVisible] = useState11(visible && !hideOnLeave);
+    const updatePosition = useCallback5((clientX, clientY) => {
+      let posX = clientX + offset.x;
+      let posY = clientY + offset.y;
+      if (containTo === "parent" && internalRef.current?.parentElement) {
+        const parentRect = internalRef.current.parentElement.getBoundingClientRect();
+        posX = clientX - parentRect.left + offset.x;
+        posY = clientY - parentRect.top + offset.y;
+      }
+      if (rotate) {
+        const dx = posX - x.get();
+        const dy = posY - y.get();
+        if (dx !== 0 || dy !== 0) {
+          const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+          r.set(angle);
+        }
+      }
+      x.set(posX);
+      y.set(posY);
+    }, [x, y, r, rotate, offset, containTo]);
+    useEffect16(() => {
+      if (disabled || isReducedMotion) return;
+      const target = containTo === "viewport" ? window : internalRef.current?.parentElement || window;
+      const handleMouseMove = (e) => {
+        updatePosition(e.clientX, e.clientY);
+        if (hideOnLeave && !isVisible) setIsVisible(visible);
+      };
+      const handleMouseEnter = () => {
+        if (hideOnLeave) setIsVisible(visible);
+      };
+      const handleMouseLeave = () => {
+        if (hideOnLeave) setIsVisible(false);
+      };
+      target.addEventListener("mousemove", handleMouseMove);
+      target.addEventListener("mouseenter", handleMouseEnter);
+      target.addEventListener("mouseleave", handleMouseLeave);
+      return () => {
+        target.removeEventListener("mousemove", handleMouseMove);
+        target.removeEventListener("mouseenter", handleMouseEnter);
+        target.removeEventListener("mouseleave", handleMouseLeave);
+      };
+    }, [disabled, isReducedMotion, containTo, updatePosition, hideOnLeave, visible, isVisible]);
+    useEffect16(() => {
+      setIsVisible(visible);
+    }, [visible]);
+    if (disabled) {
+      if (asChild) return /* @__PURE__ */ jsx20(Slot, { ref: mergedRef, className, style, ...props, children });
+      return /* @__PURE__ */ jsx20("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    const MotionComponent = asChild ? motion18.create(Slot) : motion18.div;
+    const positionStyle = containTo === "viewport" ? "fixed" : "absolute";
+    return /* @__PURE__ */ jsx20(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          position: positionStyle,
+          top: 0,
+          left: 0,
+          x: smoothX,
+          y: smoothY,
+          rotate: smoothR,
+          opacity: isVisible ? 1 : 0,
+          pointerEvents: "none",
+          // Cursor followers typically shouldn't block events
+          zIndex: 50,
+          // Usually want cursor follow to be high up
+          ...style
+        },
+        animate: { opacity: isVisible ? 1 : 0 },
+        transition: { opacity: { duration: 0.2 } },
+        ...props,
+        children
+      }
+    );
+  }
+);
+FollowCursor.displayName = "FollowCursor";
+
+// src/primitives/19-morph.tsx
+import React20, { forwardRef as forwardRef19 } from "react";
+import { motion as motion19 } from "motion/react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Morph = forwardRef19(
+  ({
+    children,
+    layoutId,
+    tag: Tag = "div",
+    mode = "both",
+    physics: physics2 = "smooth",
+    className,
+    style,
+    asChild = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React20.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    if (disabled || isReducedMotion) {
+      if (asChild) return /* @__PURE__ */ jsx21(Slot, { ref: mergedRef, className, style, ...props, children });
+      const Comp = Tag;
+      return /* @__PURE__ */ jsx21(Comp, { ref: mergedRef, className, style, ...props, children });
+    }
+    const layoutProp = mode === "both" ? true : mode;
+    const MotionComponent = asChild ? motion19.create(Slot) : Tag ? motion19(Tag) : motion19.div;
+    return /* @__PURE__ */ jsx21(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        layoutId,
+        layout: layoutProp,
+        transition: springConfig,
+        className,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Morph.displayName = "Morph";
+
+// src/primitives/20-fluid-layout.tsx
+import { forwardRef as forwardRef20, useRef as useRef9 } from "react";
+import { motion as motion20 } from "motion/react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var FluidLayout = forwardRef20(
+  ({
+    children,
+    axis = "both",
+    overflow = "hidden",
+    tag: Tag = "div",
+    debounce = 0,
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef9(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    if (disabled || isReducedMotion) {
+      const Comp = Tag;
+      return /* @__PURE__ */ jsx22(Comp, { ref: mergedRef, className, style: { ...style, overflow: overflow === "hidden" ? "hidden" : "visible" }, ...props, children });
+    }
+    const layoutProp = axis === "both" ? true : axis === "width" ? "position" : "size";
+    const MotionComponent = motion20[Tag];
+    return /* @__PURE__ */ jsx22(
+      MotionComponent,
+      {
+        ref: mergedRef,
+        layout: layoutProp,
+        transition: springConfig,
+        className,
+        style: { ...style, overflow },
+        ...props,
+        children
+      }
+    );
+  }
+);
+FluidLayout.displayName = "FluidLayout";
+
+// src/primitives/21-reorder.tsx
+import React22, { forwardRef as forwardRef21 } from "react";
+import { Reorder as MotionReorder, useDragControls } from "motion/react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function ReorderComponent({
+  items,
+  onReorder,
+  axis = "y",
+  gap = 8,
+  renderItem,
+  dragHandle = false,
+  physics: physics2 = "bouncy",
+  className,
+  style,
+  disabled = false
+}, ref) {
+  const isReducedMotion = useReducedMotion();
+  const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+  if (disabled) {
+    return /* @__PURE__ */ jsx23("ul", { ref, className, style: { display: "flex", flexDirection: axis === "x" ? "row" : "column", gap, ...style }, children: items.map((item, index) => /* @__PURE__ */ jsx23("li", { style: { listStyle: "none" }, children: renderItem(item, index, false) }, item.id)) });
+  }
+  return /* @__PURE__ */ jsx23(
+    MotionReorder.Group,
+    {
+      ref,
+      axis,
+      values: items,
+      onReorder,
+      className,
+      style: { display: "flex", flexDirection: axis === "x" ? "row" : "column", gap, listStyle: "none", ...style },
+      children: items.map((item, index) => /* @__PURE__ */ jsx23(
+        ReorderItem,
+        {
+          item,
+          index,
+          renderItem,
+          dragHandle,
+          springConfig
+        },
+        item.id
+      ))
+    }
+  );
+}
+var ReorderItem = ({ item, index, renderItem, dragHandle, springConfig }) => {
+  const [isDragging, setIsDragging] = React22.useState(false);
+  const controls = useDragControls();
+  return /* @__PURE__ */ jsx23(
+    MotionReorder.Item,
+    {
+      value: item,
+      onDragStart: () => setIsDragging(true),
+      onDragEnd: () => setIsDragging(false),
+      dragListener: !dragHandle,
+      dragControls: controls,
+      layout: true,
+      transition: springConfig,
+      style: { position: "relative" },
+      children: dragHandle ? /* @__PURE__ */ jsx23(ReorderContext.Provider, { value: controls, children: renderItem(item, index, isDragging) }) : renderItem(item, index, isDragging)
+    }
+  );
+};
+var ReorderContext = React22.createContext(null);
+function ReorderDragHandle({ children, className, style }) {
+  const controls = React22.useContext(ReorderContext);
+  return /* @__PURE__ */ jsx23(
+    "div",
+    {
+      onPointerDown: (e) => controls?.start(e),
+      style: { cursor: "grab", touchAction: "none", ...style },
+      className,
+      children
+    }
+  );
+}
+var Reorder = forwardRef21(ReorderComponent);
+Reorder.Handle = ReorderDragHandle;
+
+// src/primitives/22-page-transition.tsx
+import React23, { forwardRef as forwardRef22 } from "react";
+import { motion as motion21, AnimatePresence as AnimatePresence3 } from "motion/react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var PageTransition = forwardRef22(
+  ({
+    children,
+    mode = "fade",
+    direction = "auto",
+    physics: physics2 = "smooth",
+    exitBeforeEnter = true,
+    onTransitionStart,
+    onTransitionComplete,
+    className,
+    style,
+    layoutId,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React23.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    if (disabled || isReducedMotion || mode === "none") {
+      return /* @__PURE__ */ jsx24("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    const getVariants = () => {
+      const distance = 40;
+      switch (mode) {
+        case "fade":
+        case "crossfade":
+          return {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 }
+          };
+        case "slide":
+          const xOffset = direction === "left" ? distance : direction === "right" ? -distance : 0;
+          const yOffset = direction === "up" ? distance : direction === "down" ? -distance : direction === "auto" ? distance : 0;
+          return {
+            initial: { opacity: 0, x: xOffset, y: yOffset },
+            animate: { opacity: 1, x: 0, y: 0 },
+            exit: { opacity: 0, x: -xOffset, y: -yOffset }
+          };
+        case "morph":
+          return {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 }
+          };
+      }
+    };
+    return /* @__PURE__ */ jsx24(AnimatePresence3, { mode: exitBeforeEnter ? "wait" : "popLayout", onExitComplete: onTransitionComplete, children: /* @__PURE__ */ jsx24(
+      motion21.div,
+      {
+        ref: mergedRef,
+        variants: getVariants(),
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: springConfig,
+        onAnimationStart: onTransitionStart,
+        className,
+        style,
+        ...props,
+        children
+      },
+      layoutId || (React23.isValidElement(children) ? children.key : "page")
+    ) });
+  }
+);
+PageTransition.displayName = "PageTransition";
+
+// src/primitives/23-animated-list.tsx
+import React24, { forwardRef as forwardRef23, useEffect as useEffect17, useState as useState12 } from "react";
+import { motion as motion22, AnimatePresence as AnimatePresence4 } from "motion/react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function AnimatedListComponent({
+  items,
+  keyExtractor,
+  renderItem,
+  enterFrom = "below",
+  enterDistance = motionScale.distance.md,
+  stagger = motionScale.stagger.fast,
+  layout = true,
+  maxRendered = Infinity,
+  reversed = false,
+  physics: physics2 = "gentle",
+  className,
+  style,
+  disabled = false
+}, ref) {
+  const isReducedMotion = useReducedMotion();
+  const internalRef = React24.useRef(null);
+  const mergedRef = useMergedRef(ref, internalRef);
+  const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+  const [hasMounted, setHasMounted] = useState12(false);
+  useEffect17(() => setHasMounted(true), []);
+  if (disabled) {
+    const renderedItems2 = reversed ? [...items].reverse() : items;
+    return /* @__PURE__ */ jsx25("ul", { ref: mergedRef, className, style: { display: "flex", flexDirection: "column", gap: 8, ...style }, children: renderedItems2.slice(0, maxRendered).map((item, index) => /* @__PURE__ */ jsx25("li", { style: { listStyle: "none" }, children: renderItem(item, index) }, keyExtractor(item))) });
+  }
+  const getVariant = (direction) => {
+    switch (direction) {
+      case "below":
+        return { y: enterDistance, opacity: 0 };
+      case "above":
+        return { y: -enterDistance, opacity: 0 };
+      case "left":
+        return { x: -enterDistance, opacity: 0 };
+      case "right":
+        return { x: enterDistance, opacity: 0 };
+      case "scale":
+        return { scale: 0.8, opacity: 0 };
+    }
+  };
+  const initialVariant = getVariant(enterFrom);
+  const renderedItems = reversed ? [...items].reverse() : items;
+  const visibleItems = renderedItems.slice(0, maxRendered);
+  return /* @__PURE__ */ jsx25(
+    motion22.ul,
+    {
+      ref: mergedRef,
+      className,
+      style: { display: "flex", flexDirection: "column", listStyle: "none", margin: 0, padding: 0, ...style },
+      children: /* @__PURE__ */ jsx25(AnimatePresence4, { mode: "popLayout", initial: false, children: visibleItems.map((item, i) => {
+        const key = keyExtractor(item);
+        return /* @__PURE__ */ jsx25(
+          motion22.li,
+          {
+            layout: layout && !isReducedMotion,
+            initial: isReducedMotion ? { opacity: 0 } : initialVariant,
+            animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+            exit: isReducedMotion ? { opacity: 0 } : { ...initialVariant, opacity: 0, transition: { duration: 0.2 } },
+            transition: {
+              ...springConfig,
+              delay: isReducedMotion || hasMounted ? 0 : i * stagger
+            },
+            children: renderItem(item, i)
+          },
+          key
+        );
+      }) })
+    }
+  );
+}
+var AnimatedList = forwardRef23(AnimatedListComponent);
+
+// src/primitives/24-marquee.tsx
+import { forwardRef as forwardRef24, useEffect as useEffect18, useRef as useRef10, useState as useState13 } from "react";
+import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
+var Marquee = forwardRef24(
+  ({
+    children,
+    speed = 50,
+    direction = "left",
+    pauseOnHover = true,
+    gap = 16,
+    gradientWidth = 40,
+    gradientColor = "var(--bg, white)",
+    reverse = false,
+    speedOnHover,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef10(null);
+    const containerRef = useRef10(null);
+    const contentRef = useRef10(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const [contentSize, setContentSize] = useState13(0);
+    const [containerSize, setContainerSize] = useState13(0);
+    const isHorizontal = direction === "left" || direction === "right";
+    const dirFactor = direction === "left" || direction === "up" ? -1 : 1;
+    const revFactor = reverse ? -1 : 1;
+    const calcDir = dirFactor * revFactor;
+    useEffect18(() => {
+      if (disabled || isReducedMotion) return;
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === containerRef.current) {
+            setContainerSize(isHorizontal ? entry.contentRect.width : entry.contentRect.height);
+          } else if (entry.target === contentRef.current) {
+            setContentSize(isHorizontal ? entry.contentRect.width : entry.contentRect.height);
+          }
+        }
+      });
+      if (containerRef.current) observer.observe(containerRef.current);
+      if (contentRef.current) observer.observe(contentRef.current);
+      return () => observer.disconnect();
+    }, [isHorizontal, disabled, isReducedMotion]);
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx26("div", { ref: mergedRef, className, style: { display: "flex", flexWrap: "wrap", gap, ...style }, ...props, children });
+    }
+    const repeatCount = Math.max(2, Math.ceil(containerSize * 2 / (contentSize + gap)) || 2);
+    const duration = (contentSize + gap) / speed;
+    const keyframesName = `flux-marquee-${calcDir < 0 ? "negative" : "positive"}-${isHorizontal ? "x" : "y"}`;
+    const translateProp = isHorizontal ? "translateX" : "translateY";
+    const cssString = `
+      @keyframes ${keyframesName} {
+        0% { transform: ${translateProp}(${calcDir < 0 ? "0" : `-${contentSize + gap}px`}); }
+        100% { transform: ${translateProp}(${calcDir < 0 ? `-${contentSize + gap}px` : "0"}); }
+      }
+    `;
+    const gradientMask = gradientWidth > 0 && isHorizontal ? `linear-gradient(to right, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)` : gradientWidth > 0 && !isHorizontal ? `linear-gradient(to bottom, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)` : void 0;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          ...style,
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: isHorizontal ? "row" : "column",
+          maskImage: gradientMask,
+          WebkitMaskImage: gradientMask
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx26("style", { children: cssString }),
+          /* @__PURE__ */ jsx26(
+            "div",
+            {
+              ref: containerRef,
+              style: {
+                display: "flex",
+                flexDirection: isHorizontal ? "row" : "column",
+                gap,
+                width: isHorizontal ? "fit-content" : "100%",
+                height: isHorizontal ? "100%" : "fit-content",
+                animation: `${keyframesName} ${duration}s linear infinite`,
+                animationPlayState: "inherit"
+              },
+              onMouseEnter: (e) => {
+                if (pauseOnHover) e.currentTarget.style.animationPlayState = "paused";
+                else if (speedOnHover) e.currentTarget.style.animationDuration = `${(contentSize + gap) / speedOnHover}s`;
+              },
+              onMouseLeave: (e) => {
+                if (pauseOnHover) e.currentTarget.style.animationPlayState = "running";
+                else if (speedOnHover) e.currentTarget.style.animationDuration = `${duration}s`;
+              },
+              children: Array.from({ length: repeatCount }).map((_, i) => /* @__PURE__ */ jsx26(
+                "div",
+                {
+                  ref: i === 0 ? contentRef : null,
+                  style: {
+                    display: "flex",
+                    flexDirection: isHorizontal ? "row" : "column",
+                    gap,
+                    flexShrink: 0
+                  },
+                  children
+                },
+                i
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+
+// src/primitives/25-dock.tsx
+import React26, { forwardRef as forwardRef25, useRef as useRef11 } from "react";
+import { motion as motion23, useMotionValue as useMotionValue7, useSpring as useSpring8, useTransform as useTransform3 } from "motion/react";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+var DockContext = React26.createContext({
+  mouseX: null,
+  mouseY: null,
+  distance: 150,
+  magnification: 1.6,
+  direction: "horizontal",
+  isReducedMotion: false
+});
+var DockRoot = forwardRef25(
+  ({
+    children,
+    magnification = 1.6,
+    distance = 150,
+    direction = "horizontal",
+    gap = 8,
+    baseSize = 48,
+    physics: physics2 = "bouncy",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef11(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const mouseX = useMotionValue7(Infinity);
+    const mouseY = useMotionValue7(Infinity);
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx27("div", { ref: mergedRef, className, style: { display: "flex", flexDirection: direction === "horizontal" ? "row" : "column", gap, ...style }, ...props, children });
+    }
+    return /* @__PURE__ */ jsx27(DockContext.Provider, { value: { mouseX, mouseY, distance, magnification, direction, isReducedMotion: false }, children: /* @__PURE__ */ jsx27(
+      motion23.div,
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          display: "flex",
+          flexDirection: direction === "horizontal" ? "row" : "column",
+          gap,
+          alignItems: "center",
+          ...style
+        },
+        onMouseMove: (e) => {
+          mouseX.set(e.clientX);
+          mouseY.set(e.clientY);
+        },
+        onMouseLeave: () => {
+          mouseX.set(Infinity);
+          mouseY.set(Infinity);
+        },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DockRoot.displayName = "Dock";
+var DockItem = forwardRef25(
+  ({ children, label, onClick, className, style, ...props }, ref) => {
+    const { mouseX, mouseY, distance, magnification, direction, isReducedMotion } = React26.useContext(DockContext);
+    const itemRef = useRef11(null);
+    const mergedRef = useMergedRef(ref, itemRef);
+    const distVar = direction === "horizontal" ? mouseX : mouseY;
+    const distanceCalc = useTransform3(distVar, (val) => {
+      if (val === Infinity || !itemRef.current) return distance;
+      const bounds = itemRef.current.getBoundingClientRect();
+      const center = direction === "horizontal" ? bounds.x + bounds.width / 2 : bounds.y + bounds.height / 2;
+      return Math.abs(val - center);
+    });
+    const scaleRaw = useTransform3(distanceCalc, [0, distance], [magnification, 1]);
+    const scale = useSpring8(scaleRaw, { mass: 0.1, stiffness: 300, damping: 20 });
+    const [isHovered, setIsHovered] = React26.useState(false);
+    if (isReducedMotion) {
+      return /* @__PURE__ */ jsx27("button", { ref: mergedRef, onClick, className, style: { ...style, position: "relative" }, ...props, children });
+    }
+    return /* @__PURE__ */ jsxs8(
+      motion23.button,
+      {
+        ref: mergedRef,
+        onClick,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        style: {
+          scale,
+          transformOrigin: direction === "horizontal" ? "bottom" : "left",
+          // Common dock origin
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          ...style
+        },
+        className,
+        ...props,
+        children: [
+          children,
+          label && isHovered && /* @__PURE__ */ jsx27(
+            motion23.div,
+            {
+              initial: { opacity: 0, scale: 0.8, y: direction === "horizontal" ? -10 : 0, x: direction === "horizontal" ? 0 : 10 },
+              animate: { opacity: 1, scale: 1, y: 0, x: 0 },
+              transition: { type: "spring", stiffness: 400, damping: 20, mass: 0.5 },
+              style: {
+                position: "absolute",
+                [direction === "horizontal" ? "top" : "left"]: direction === "horizontal" ? "-120%" : "120%",
+                fontSize: "12px",
+                background: "rgba(0,0,0,0.8)",
+                color: "white",
+                padding: "4px 8px",
+                borderRadius: "4px",
+                whiteSpace: "nowrap",
+                pointerEvents: "none"
+              },
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DockItem.displayName = "Dock.Item";
+var Dock = Object.assign(DockRoot, { Item: DockItem });
+
+// src/primitives/26-infinite-scroll.tsx
+import { forwardRef as forwardRef26, useEffect as useEffect19, useRef as useRef12, useState as useState14 } from "react";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
+function InfiniteScrollComponent({
+  items,
+  renderItem,
+  keyExtractor,
+  onLoadMore,
+  hasMore,
+  threshold = 200,
+  loader,
+  enterFrom = "below",
+  stagger = motionScale.stagger.fast,
+  // batchSize = 10,
+  physics: physics2 = "gentle",
+  className,
+  style,
+  disabled = false
+}, ref) {
+  const isReducedMotion = useReducedMotion();
+  const internalRef = useRef12(null);
+  const scrollRef = useRef12(null);
+  const endMarkerRef = useRef12(null);
+  const mergedRef = useMergedRef(ref, internalRef, scrollRef);
+  const [isLoading, setIsLoading] = useState14(false);
+  useEffect19(() => {
+    if (disabled || !hasMore || isLoading || !endMarkerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          setIsLoading(true);
+          Promise.resolve(onLoadMore()).finally(() => {
+            setIsLoading(false);
+          });
+        }
+      },
+      { rootMargin: `0px 0px ${threshold}px 0px` }
+    );
+    observer.observe(endMarkerRef.current);
+    return () => observer.disconnect();
+  }, [hasMore, isLoading, onLoadMore, threshold, disabled]);
+  if (disabled) {
+    return /* @__PURE__ */ jsxs9("div", { ref: mergedRef, className, style: { overflowY: "auto", ...style }, children: [
+      /* @__PURE__ */ jsx28("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: items.map((item, i) => /* @__PURE__ */ jsx28("li", { children: renderItem(item, i) }, keyExtractor(item))) }),
+      hasMore && /* @__PURE__ */ jsx28("div", { ref: endMarkerRef, children: loader })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { ref: mergedRef, className, style: { ...style, position: "relative" }, children: [
+    /* @__PURE__ */ jsx28(
+      AnimatedList,
+      {
+        items,
+        keyExtractor,
+        renderItem,
+        enterFrom,
+        stagger,
+        physics: physics2,
+        layout: !isReducedMotion
+      }
+    ),
+    hasMore && /* @__PURE__ */ jsx28("div", { ref: endMarkerRef, style: { width: "100%", padding: "16px", display: "flex", justifyContent: "center" }, children: loader || // Default simple loader if none provided
+    /* @__PURE__ */ jsx28("div", { style: { padding: "8px" }, children: "Loading more..." }) })
+  ] });
+}
+var InfiniteScroll = forwardRef26(InfiniteScrollComponent);
+
+// src/primitives/27-scroll-progress.tsx
+import { forwardRef as forwardRef27, useRef as useRef13 } from "react";
+import { motion as motion24, useScroll as useScroll3, useSpring as useSpring9 } from "motion/react";
+import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
+var ScrollProgress = forwardRef27(
+  ({
+    children,
+    axis = "x",
+    container,
+    color = "var(--flux-primary, #000)",
+    height = 4,
+    position = "top",
+    smooth = true,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef13(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const { scrollYProgress, scrollXProgress } = useScroll3({
+      container: container?.current ? container : void 0
+    });
+    const progress = axis === "x" ? scrollYProgress : scrollXProgress;
+    const springProgress = useSpring9(progress, {
+      stiffness: 100,
+      damping: 30,
+      restDelta: 1e-3
+    });
+    const scaleValue = smooth && !isReducedMotion ? springProgress : progress;
+    if (disabled || isReducedMotion) {
+      return children ? /* @__PURE__ */ jsx29("div", { ref: mergedRef, className, style, ...props, children }) : null;
+    }
+    const posStyles = position === "none" ? {} : position === "top" ? { position: "fixed", top: 0, left: 0, right: 0, transformOrigin: "0% 50%" } : position === "bottom" ? { position: "fixed", bottom: 0, left: 0, right: 0, transformOrigin: "0% 50%" } : position === "left" ? { position: "fixed", top: 0, bottom: 0, left: 0, transformOrigin: "50% 0%" } : { position: "fixed", top: 0, bottom: 0, right: 0, transformOrigin: "50% 0%" };
+    const dimStyles = position === "top" || position === "bottom" || position === "none" ? { height, width: "100%", scaleX: scaleValue } : { width: height, height: "100%", scaleY: scaleValue };
+    if (!children) {
+      return /* @__PURE__ */ jsx29(
+        motion24.div,
+        {
+          ref: mergedRef,
+          className,
+          style: {
+            ...posStyles,
+            ...dimStyles,
+            backgroundColor: color,
+            zIndex: 9999,
+            ...style
+          },
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs10("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children: [
+      children,
+      /* @__PURE__ */ jsx29(
+        motion24.div,
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            backgroundColor: color,
+            scaleX: axis === "x" ? scaleValue : void 0,
+            scaleY: axis === "y" ? scaleValue : void 0,
+            transformOrigin: "0% 0%",
+            zIndex: -1
+          }
+        }
+      )
+    ] });
+  }
+);
+ScrollProgress.displayName = "ScrollProgress";
+
+// src/primitives/28-parallax.tsx
+import { forwardRef as forwardRef28, useRef as useRef14 } from "react";
+import { motion as motion25, useScroll as useScroll4, useTransform as useTransform4 } from "motion/react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Parallax = forwardRef28(
+  ({
+    children,
+    offset = 50,
+    direction = "up",
+    container,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef14(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const { scrollYProgress } = useScroll4({
+      target: internalRef,
+      container: container?.current ? container : void 0,
+      offset: ["start end", "end start"]
+    });
+    const transformStart = direction === "up" ? offset : direction === "down" ? -offset : direction === "left" ? offset : -offset;
+    const transformEnd = direction === "up" ? -offset : direction === "down" ? offset : direction === "left" ? -offset : offset;
+    const translate = useTransform4(scrollYProgress, [0, 1], [transformStart, transformEnd]);
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx30("div", { ref: mergedRef, className, style, ...props, children });
+    }
+    return /* @__PURE__ */ jsx30(
+      motion25.div,
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          ...style,
+          y: direction === "up" || direction === "down" ? translate : 0,
+          x: direction === "left" || direction === "right" ? translate : 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Parallax.displayName = "Parallax";
+
+// src/primitives/29-sticky-scroll.tsx
+import { forwardRef as forwardRef29, useEffect as useEffect20, useRef as useRef15, useState as useState15 } from "react";
+import { motion as motion26, useScroll as useScroll5 } from "motion/react";
+import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
+var StickyScroll = forwardRef29(
+  ({
+    content,
+    container,
+    physics: physics2 = "gentle",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef15(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const [activeSection, setActiveSection] = useState15(0);
+    const { scrollYProgress } = useScroll5({
+      target: internalRef,
+      container: container?.current ? container : void 0,
+      offset: ["start start", "end end"]
+    });
+    useEffect20(() => {
+      return scrollYProgress.onChange((latest) => {
+        const cardsCount = content.length;
+        const progressPerCard = 1 / cardsCount;
+        const index = Math.min(
+          Math.floor(latest / progressPerCard),
+          cardsCount - 1
+        );
+        setActiveSection(index);
+      });
+    }, [scrollYProgress, content.length]);
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsx31("div", { ref: mergedRef, className, style: { display: "flex", flexDirection: "column", gap: "2rem", ...style }, ...props, children: content.map((item, i) => /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx31("h3", { children: item.title }),
+        /* @__PURE__ */ jsx31("div", { children: item.description }),
+        item.asset && /* @__PURE__ */ jsx31("div", { children: item.asset })
+      ] }, i)) });
+    }
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          display: "flex",
+          position: "relative",
+          minHeight: `${content.length * 100}vh`,
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx31("div", { style: { flex: 1, padding: "4rem 2rem", position: "relative" }, children: content.map((item, index) => /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              style: {
+                height: "100vh",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                opacity: activeSection === index ? 1 : 0.3,
+                transition: "opacity 0.4s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsx31(
+                  motion26.h2,
+                  {
+                    initial: { opacity: 0, y: 20 },
+                    animate: { opacity: activeSection === index ? 1 : 0, y: activeSection === index ? 0 : 20 },
+                    style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "1rem" },
+                    children: item.title
+                  }
+                ),
+                /* @__PURE__ */ jsx31(
+                  motion26.div,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: activeSection === index ? 1 : 0 },
+                    children: item.description
+                  }
+                )
+              ]
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx31("div", { style: { flex: 1, position: "sticky", top: 0, height: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx31(
+            motion26.div,
+            {
+              layout: true,
+              style: { width: "80%", height: "60%", background: "var(--flux-border, #f4f4f5)", borderRadius: "1rem", overflow: "hidden" },
+              children: content[activeSection]?.asset
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+StickyScroll.displayName = "StickyScroll";
+
+// src/primitives/30-scroll-snap.tsx
+import React31, { forwardRef as forwardRef30, useRef as useRef16 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var ScrollSnapContainer = forwardRef30(
+  ({
+    children,
+    axis = "y",
+    alignment = "center",
+    strictness = "mandatory",
+    physics: physics2 = "smooth",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef16(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    return /* @__PURE__ */ jsx32(SnapContext.Provider, { value: { alignment, disabled: disabled || isReducedMotion }, children: /* @__PURE__ */ jsx32(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          ...style,
+          overflowX: axis === "x" || axis === "both" ? "auto" : "hidden",
+          overflowY: axis === "y" || axis === "both" ? "auto" : "hidden",
+          scrollSnapType: disabled || isReducedMotion ? "none" : `${axis} ${strictness}`
+        },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ScrollSnapContainer.displayName = "ScrollSnap";
+var SnapContext = React31.createContext({ alignment: "center", disabled: false });
+var ScrollSnapItem = forwardRef30(
+  ({ children, alignment: itemAlignment, stopHandling = "normal", className, style, ...props }, ref) => {
+    const { alignment: containerAlignment, disabled } = React31.useContext(SnapContext);
+    const align = itemAlignment || containerAlignment;
+    return /* @__PURE__ */ jsx32(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          ...style,
+          scrollSnapAlign: disabled ? "none" : align,
+          scrollSnapStop: disabled ? "normal" : stopHandling
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+ScrollSnapItem.displayName = "ScrollSnap.Item";
+var ScrollSnap = Object.assign(ScrollSnapContainer, { Item: ScrollSnapItem });
+
+// src/primitives/31-aurora.tsx
+import { forwardRef as forwardRef31, useRef as useRef17 } from "react";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+var Aurora = forwardRef31(
+  ({
+    colors = ["#99f6e4", "#34d399", "#2dd4bf"],
+    speed = 10,
+    blur = 60,
+    opacity = 0.5,
+    blendMode = "normal",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef17(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    if (disabled) return null;
+    const baseStyle = {
+      position: "absolute",
+      top: "-50%",
+      left: "-50%",
+      width: "200%",
+      height: "200%",
+      opacity,
+      mixBlendMode: blendMode,
+      filter: `blur(${blur}px)`,
+      pointerEvents: "none",
+      zIndex: 0
+    };
+    const gradientString = `linear-gradient(-45deg, ${colors.join(", ")})`;
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx33(
+            "div",
+            {
+              style: {
+                ...baseStyle,
+                background: gradientString,
+                backgroundSize: "400% 400%",
+                animation: isReducedMotion ? "none" : `flux-aurora ${speed}s ease infinite`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx33("style", { children: `
+            @keyframes flux-aurora {
+              0% { background-position: 0% 50%; transform: rotate(0deg); }
+              50% { background-position: 100% 50%; transform: rotate(180deg); }
+              100% { background-position: 0% 50%; transform: rotate(360deg); }
+            }
+          ` })
+        ]
+      }
+    );
+  }
+);
+Aurora.displayName = "Aurora";
+
+// src/primitives/32-mesh-gradient.tsx
+import { forwardRef as forwardRef32, useRef as useRef18 } from "react";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+var MeshGradient = forwardRef32(
+  ({
+    colors = ["#99f6e4", "#fbcfe8", "#fef08a", "#a7f3d0"],
+    speed = 15,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef18(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    if (disabled) return null;
+    const baseStyle = {
+      position: "absolute",
+      inset: -50,
+      // bleed edge to avoid seeing bounds during rotation
+      opacity: 0.8,
+      filter: "blur(60px)",
+      pointerEvents: "none",
+      zIndex: 0,
+      background: `
+        radial-gradient(circle at 100% 0%, ${colors[0]} 0%, transparent 50%),
+        radial-gradient(circle at 0% 100%, ${colors[1]} 0%, transparent 50%),
+        radial-gradient(circle at 100% 100%, ${colors[2]} 0%, transparent 50%),
+        radial-gradient(circle at 0% 0%, ${colors[3]} 0%, transparent 50%)
+      `,
+      backgroundSize: "200% 200%"
+    };
+    return /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx34(
+            "div",
+            {
+              style: {
+                ...baseStyle,
+                animation: isReducedMotion ? "none" : `flux-mesh ${speed}s ease-in-out infinite alternate`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx34("style", { children: `
+            @keyframes flux-mesh {
+              0% { background-position: 0% 0%; transform: scale(1) rotate(0deg); }
+              50% { background-position: 100% 100%; transform: scale(1.1) rotate(5deg); }
+              100% { background-position: 0% 0%; transform: scale(1) rotate(-5deg); }
+            }
+          ` })
+        ]
+      }
+    );
+  }
+);
+MeshGradient.displayName = "MeshGradient";
+
+// src/primitives/33-particles.tsx
+import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef19 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Particles = forwardRef33(
+  ({
+    color = "#99f6e4",
+    quantity = 100,
+    staticity = 50,
+    ease = 50,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = useRef19(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const context = useRef19(null);
+    const circles = useRef19([]);
+    const mouse = useRef19({ x: 0, y: 0 });
+    const canvasSize = useRef19({ w: 0, h: 0 });
+    const animationFrameId = useRef19(0);
+    useEffect21(() => {
+      if (disabled || isReducedMotion || !internalRef.current) return;
+      const canvas = internalRef.current;
+      context.current = canvas.getContext("2d");
+      const resizeCanvas = () => {
+        if (!internalRef.current || !context.current) return;
+        const rect = internalRef.current.parentElement?.getBoundingClientRect() || internalRef.current.getBoundingClientRect();
+        canvasSize.current.w = rect.width;
+        canvasSize.current.h = rect.height;
+        internalRef.current.width = rect.width;
+        internalRef.current.height = rect.height;
+        initParticles();
+      };
+      const initParticles = () => {
+        circles.current = [];
+        for (let i = 0; i < quantity; i++) {
+          circles.current.push(circleParams());
+        }
+      };
+      const circleParams = () => {
+        const x = Math.floor(Math.random() * canvasSize.current.w);
+        const y = Math.floor(Math.random() * canvasSize.current.h);
+        const translateX = 0;
+        const translateY = 0;
+        const size = Math.floor(Math.random() * 2) + 0.1;
+        const alpha = 0;
+        const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+        const dx = (Math.random() - 0.5) * 0.2;
+        const dy = (Math.random() - 0.5) * 0.2;
+        const magnetism = 0.1 + Math.random() * 4;
+        return { x, y, translateX, translateY, size, alpha, targetAlpha, dx, dy, magnetism };
+      };
+      const drawCircle = (circle, update = false) => {
+        if (!context.current) return;
+        const { x, y, translateX, translateY, size, alpha } = circle;
+        context.current.translate(translateX, translateY);
+        context.current.beginPath();
+        context.current.arc(x, y, size, 0, 2 * Math.PI);
+        context.current.fillStyle = `${color}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
+        context.current.fill();
+        context.current.setTransform(1, 0, 0, 1, 0, 0);
+        if (!update) return;
+        circle.alpha += (circle.targetAlpha - circle.alpha) * 0.02;
+        circle.x += circle.dx;
+        circle.y += circle.dy;
+        circle.translateX += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) / ease;
+        circle.translateY += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) / ease;
+        if (circle.x < -circle.size || circle.x > canvasSize.current.w + circle.size || circle.y < -circle.size || circle.y > canvasSize.current.h + circle.size) {
+          Object.assign(circle, circleParams(), { alpha: 0 });
+        }
+      };
+      const animate = () => {
+        if (!context.current || !internalRef.current) return;
+        context.current.clearRect(0, 0, canvasSize.current.w, canvasSize.current.h);
+        circles.current.forEach((circle) => drawCircle(circle, true));
+        animationFrameId.current = window.requestAnimationFrame(animate);
+      };
+      resizeCanvas();
+      animate();
+      const handleMouseMove = (e) => {
+        if (!internalRef.current) return;
+        const rect = internalRef.current.getBoundingClientRect();
+        mouse.current.x = e.clientX - rect.left - canvasSize.current.w / 2;
+        mouse.current.y = e.clientY - rect.top - canvasSize.current.h / 2;
+      };
+      window.addEventListener("resize", resizeCanvas);
+      window.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        window.removeEventListener("resize", resizeCanvas);
+        window.removeEventListener("mousemove", handleMouseMove);
+        if (animationFrameId.current) window.cancelAnimationFrame(animationFrameId.current);
+      };
+    }, [color, quantity, staticity, ease, disabled, isReducedMotion]);
+    if (disabled) return null;
+    return /* @__PURE__ */ jsx35(
+      "canvas",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Particles.displayName = "Particles";
+
+// src/primitives/34-grid-pattern.tsx
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var GridPattern = forwardRef34(
+  ({
+    size = 24,
+    color = "currentColor",
+    fade = true,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    if (disabled) return null;
+    const baseStyle = {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      zIndex: 0,
+      backgroundImage: `url("data:image/svg+xml,%3Csvg width='${size}' height='${size}' viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M${size} 0H0V${size}' fill='none' stroke='${encodeURIComponent(color)}' stroke-width='1' stroke-opacity='0.1'/%3E%3C/svg%3E")`,
+      backgroundSize: `${size}px ${size}px`,
+      maskImage: fade ? "radial-gradient(ellipse at center, black 40%, transparent 80%)" : void 0,
+      WebkitMaskImage: fade ? "radial-gradient(ellipse at center, black 40%, transparent 80%)" : void 0
+    };
+    return /* @__PURE__ */ jsx36(
+      "div",
+      {
+        ref,
+        className,
+        style: { ...baseStyle, ...style },
+        ...props
+      }
+    );
+  }
+);
+GridPattern.displayName = "GridPattern";
+
+// src/primitives/35-noise.tsx
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Noise = forwardRef35(
+  ({
+    opacity = 0.05,
+    blendMode = "overlay",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    if (disabled) return null;
+    const noiseSvg = `data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E`;
+    return /* @__PURE__ */ jsx37(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          zIndex: 50,
+          // Usually noise sits on top of everything to texture the whole component
+          opacity,
+          mixBlendMode: blendMode,
+          backgroundImage: `url("${noiseSvg}")`,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Noise.displayName = "Noise";
+
+// src/primitives/36-streaming-text.tsx
+import React37, { forwardRef as forwardRef36, useEffect as useEffect22, useState as useState16 } from "react";
+import { motion as motion27 } from "motion/react";
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+var StreamingText = forwardRef36(
+  ({
+    text,
+    speed = 30,
+    cursor = true,
+    cursorChar = "\u258B",
+    physics: physics2 = "gentle",
+    className,
+    style,
+    onComplete,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React37.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const [displayedText, setDisplayedText] = useState16("");
+    const [isComplete, setIsComplete] = useState16(false);
+    useEffect22(() => {
+      if (disabled || isReducedMotion) {
+        setDisplayedText(text);
+        setIsComplete(true);
+        onComplete?.();
+        return;
+      }
+      setDisplayedText("");
+      setIsComplete(false);
+      let i = 0;
+      const intervalId = setInterval(() => {
+        setDisplayedText(text.slice(0, i + 1));
+        i++;
+        if (i >= text.length) {
+          clearInterval(intervalId);
+          setIsComplete(true);
+          onComplete?.();
+        }
+      }, speed);
+      return () => clearInterval(intervalId);
+    }, [text, speed, disabled, isReducedMotion, onComplete]);
+    return /* @__PURE__ */ jsxs14("span", { ref: mergedRef, className, style: { whiteSpace: "pre-wrap", ...style }, ...props, children: [
+      displayedText,
+      cursor && (!isComplete || isReducedMotion === false) && /* @__PURE__ */ jsx38(
+        motion27.span,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { repeat: Infinity, duration: 0.8, repeatType: "reverse" },
+          style: { display: "inline-block", marginLeft: "2px", fontWeight: "bold" },
+          children: cursorChar
+        }
+      )
+    ] });
+  }
+);
+StreamingText.displayName = "StreamingText";
+
+// src/primitives/37-typing-indicator.tsx
+import React38, { forwardRef as forwardRef37 } from "react";
+import { motion as motion28 } from "motion/react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var TypingIndicator = forwardRef37(
+  ({
+    color = "currentColor",
+    size = 6,
+    speed = 0.6,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React38.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    if (disabled) return null;
+    const dotStyle = {
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      backgroundColor: color
+    };
+    return /* @__PURE__ */ jsx39(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: { display: "inline-flex", alignItems: "center", gap: size / 2, ...style },
+        ...props,
+        children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx39(
+          motion28.div,
+          {
+            style: dotStyle,
+            animate: isReducedMotion ? void 0 : {
+              y: [0, -size, 0],
+              opacity: [0.5, 1, 0.5]
+            },
+            transition: {
+              duration: speed,
+              repeat: Infinity,
+              delay: i * (speed / 3),
+              ease: "easeInOut"
+            }
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
+
+// src/primitives/38-skeleton.tsx
+import React39, { forwardRef as forwardRef38 } from "react";
+import { motion as motion29 } from "motion/react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var Skeleton = forwardRef38(
+  ({
+    width = "100%",
+    height = 20,
+    borderRadius = 8,
+    baseColor = "var(--flux-border, #e5e7eb)",
+    highlightColor = "var(--flux-background, #f9fafb)",
+    speed = 1.5,
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React39.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    if (disabled) {
+      return /* @__PURE__ */ jsx40(
+        "div",
+        {
+          ref: mergedRef,
+          className,
+          style: { width, height, borderRadius, backgroundColor: baseColor, ...style },
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx40(
+      "div",
+      {
+        ref: mergedRef,
+        className,
+        style: {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: baseColor,
+          overflow: "hidden",
+          position: "relative",
+          ...style
+        },
+        ...props,
+        children: !isReducedMotion && /* @__PURE__ */ jsx40(
+          motion29.div,
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: `linear-gradient(90deg, transparent, ${highlightColor}, transparent)`
+            },
+            initial: { x: "-100%" },
+            animate: { x: "100%" },
+            transition: {
+              repeat: Infinity,
+              duration: speed,
+              ease: "linear"
+            }
+          }
+        )
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/39-ai-message.tsx
+import React40, { forwardRef as forwardRef39 } from "react";
+import { motion as motion30 } from "motion/react";
+import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
+var AIMessage = forwardRef39(
+  ({
+    children,
+    role = "assistant",
+    avatar,
+    delay = 0,
+    physics: physics2 = "gentle",
+    className,
+    style,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React40.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
+    if (disabled) {
+      return /* @__PURE__ */ jsxs15("div", { ref: mergedRef, className, style: { display: "flex", gap: 12, ...style }, ...props, children: [
+        avatar && /* @__PURE__ */ jsx41("div", { children: avatar }),
+        /* @__PURE__ */ jsx41("div", { style: { flex: 1 }, children })
+      ] });
+    }
+    const alignment = role === "user" ? "flex-end" : "flex-start";
+    const origin = role === "user" ? "bottom right" : "bottom left";
+    return /* @__PURE__ */ jsxs15(
+      motion30.div,
+      {
+        ref: mergedRef,
+        className,
+        initial: isReducedMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        transition: { ...springConfig, delay },
+        style: {
+          display: "flex",
+          gap: 12,
+          justifyContent: alignment,
+          transformOrigin: origin,
+          ...style
+        },
+        ...props,
+        children: [
+          role !== "user" && avatar && /* @__PURE__ */ jsx41(
+            motion30.div,
+            {
+              initial: isReducedMotion ? { opacity: 0 } : { opacity: 0, scale: 0 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { ...springConfig, delay: delay + 0.1 },
+              children: avatar
+            }
+          ),
+          /* @__PURE__ */ jsx41("div", { style: { flex: 1, maxWidth: "80%" }, children }),
+          role === "user" && avatar && /* @__PURE__ */ jsx41(
+            motion30.div,
+            {
+              initial: isReducedMotion ? { opacity: 0 } : { opacity: 0, scale: 0 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { ...springConfig, delay: delay + 0.1 },
+              children: avatar
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AIMessage.displayName = "AIMessage";
+
+// src/primitives/40-hero-highlight.tsx
+import React41, { forwardRef as forwardRef40 } from "react";
+import { motion as motion31, useMotionTemplate as useMotionTemplate3, useMotionValue as useMotionValue8 } from "motion/react";
+import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
+var HeroHighlight = forwardRef40(
+  ({
+    children,
+    containerClassName,
+    className,
+    color = "45, 212, 191",
+    // teal-400 equivalent typically
+    disabled = false,
+    ...props
+  }, ref) => {
+    const isReducedMotion = useReducedMotion();
+    const internalRef = React41.useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
+    const mouseX = useMotionValue8(0);
+    const mouseY = useMotionValue8(0);
+    function handleMouseMove({ currentTarget, clientX, clientY }) {
+      if (!currentTarget) return;
+      const { left, top } = currentTarget.getBoundingClientRect();
+      mouseX.set(clientX - left);
+      mouseY.set(clientY - top);
+    }
+    if (disabled || isReducedMotion) {
+      return /* @__PURE__ */ jsxs16("div", { ref: mergedRef, className: `relative flex items-center justify-center w-full group ${containerClassName || ""}`, ...props, children: [
+        /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 bg-dot-thick-neutral-300 pointer-events-none" }),
+        /* @__PURE__ */ jsx42("div", { className, children })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref: mergedRef,
+        className: `relative flex items-center justify-center w-full group ${containerClassName || ""}`,
+        onMouseMove: handleMouseMove,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 bg-dot-thick-neutral-300 dark:bg-dot-thick-neutral-800 pointer-events-none" }),
+          /* @__PURE__ */ jsx42(
+            motion31.div,
+            {
+              className: "absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100 pointer-events-none bg-dot-thick-teal-500",
+              style: {
+                WebkitMaskImage: useMotionTemplate3`
+            radial-gradient(
+              200px circle at ${mouseX}px ${mouseY}px,
+              black 0%,
+              transparent 100%
+            )
+          `,
+                maskImage: useMotionTemplate3`
+            radial-gradient(
+              200px circle at ${mouseX}px ${mouseY}px,
+              black 0%,
+              transparent 100%
+            )
+          `
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx42("div", { className, children })
+        ]
+      }
+    );
+  }
+);
+HeroHighlight.displayName = "HeroHighlight";
+var Highlight = ({
+  children,
+  className
+}) => {
+  const isReducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx42(
+    motion31.span,
+    {
+      initial: {
+        backgroundSize: "0% 100%"
+      },
+      animate: {
+        backgroundSize: "100% 100%"
+      },
+      transition: isReducedMotion ? { duration: 0 } : {
+        duration: 2,
+        ease: "linear",
+        delay: 0.5
+      },
+      style: {
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "left center",
+        display: "inline"
+      },
+      className: `relative inline-block pb-1 px-1 rounded-lg bg-gradient-to-r from-teal-300 to-purple-300 ${className || ""}`,
+      children
+    }
+  );
+};
+export {
+  AIMessage,
+  AnimatedList,
+  Aurora,
+  Collapse,
+  CountUp,
+  Dock,
+  DockItem,
+  Drag,
+  FlipCard,
+  FluidLayout,
+  FluxProvider,
+  FollowCursor,
+  GridPattern,
+  HeroHighlight,
+  Highlight,
+  Hover3D,
+  Hover3DLayer,
+  HoverScale,
+  InfiniteScroll,
+  LongPress,
+  Magnetic,
+  Marquee,
+  MeshGradient,
+  Morph,
+  MorphText,
+  Noise,
+  PageTransition,
+  Parallax,
+  Particles,
+  Presence,
+  Reorder,
+  ReorderContext,
+  ReorderDragHandle,
+  Reveal,
+  ScrollProgress,
+  ScrollSnap,
+  ScrollSnapItem,
+  ScrollVelocity,
+  Skeleton,
+  Slot,
+  Spotlight,
+  Stagger,
+  StickyScroll,
+  StreamingText,
+  Swipe,
+  TextReveal,
+  Tilt,
+  TypingIndicator,
+  clamp,
+  motionScale,
+  physics,
+  resolveMotion,
+  useAnimationBudget,
+  useFluxContext,
+  useInView,
+  useIsClient,
+  useMergedRef,
+  usePhysics,
+  usePrefersReducedMotion,
+  useReducedMotion,
+  useScrollProgress
+};
+//# sourceMappingURL=index.js.map