@ansh-ui/react 0.2.0

package/dist/chunk-T4AK2KLM.js

@@ -0,0 +1,699 @@
+import { useMergedRef } from './chunk-IBXLC5IE.js';
+import { cx } from './chunk-H34OXXJU.js';
+import { createContext, forwardRef, useRef, useEffect, useMemo, useContext, useState, useLayoutEffect, useCallback, Children, isValidElement, cloneElement } from 'react';
+import { mountBehaviour, magnetic, tilt, ripple, marquee, scrollReveal, parallax, resolvePalette, createGradient, prefersReducedMotion, resolveEasing, stagger, getTicker, observeIntersection, setReducedMotionMode, attachLifecycle, springs, animate } from '@ansh-ui/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { applyTheme, resolveTheme } from '@ansh-ui/tokens';
+
+function createBehaviourComponent(definition, displayName, defaultElement = "div") {
+  const optionKeys = new Set(Object.keys(definition.defaults));
+  function Render(props, forwardedRef) {
+    const { as: Component2 = defaultElement, className, style, children, ...rest } = props;
+    const hostRef = useRef(null);
+    const handleRef = useRef(null);
+    const mergedRef = useMergedRef(hostRef, forwardedRef);
+    const options = {};
+    const domProps = {};
+    for (const [key, value] of Object.entries(rest)) {
+      if (optionKeys.has(key)) options[key] = value;
+      else domProps[key] = value;
+    }
+    const optionsKey = stableKey(options);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    useEffect(() => {
+      const host = hostRef.current;
+      if (!host) return;
+      const handle = mountBehaviour(definition, host, optionsRef.current);
+      handleRef.current = handle;
+      return () => {
+        handle.destroy();
+        handleRef.current = null;
+      };
+    }, []);
+    useEffect(() => {
+      handleRef.current?.update(optionsRef.current);
+    }, [optionsKey]);
+    return /* @__PURE__ */ jsx(Component2, { ref: mergedRef, className, style, ...domProps, children });
+  }
+  const Component = forwardRef(Render);
+  Component.displayName = displayName ?? `Ansh(${definition.name})`;
+  return Component;
+}
+function stableKey(options) {
+  const keys = Object.keys(options).sort();
+  const parts = [];
+  for (const key of keys) {
+    const value = options[key];
+    if (typeof value === "function") parts.push(`${key}:fn`);
+    else if (value === void 0) continue;
+    else parts.push(`${key}:${JSON.stringify(value)}`);
+  }
+  return parts.join("|");
+}
+function useBehaviour(ref, definition, options) {
+  const handleRef = useRef(null);
+  const optionsRef = useRef(options ?? {});
+  optionsRef.current = options ?? {};
+  const optionsKey = stableKey(optionsRef.current);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const handle = mountBehaviour(definition, element, optionsRef.current);
+    handleRef.current = handle;
+    return () => {
+      handle.destroy();
+      handleRef.current = null;
+    };
+  }, [definition, ref]);
+  useEffect(() => {
+    handleRef.current?.update(optionsRef.current);
+  }, [optionsKey]);
+}
+var MagneticButton = createBehaviourComponent(magnetic, "MagneticButton", "button");
+var TiltCard = createBehaviourComponent(tilt, "TiltCard", "div");
+var Ripple = createBehaviourComponent(ripple, "Ripple", "div");
+var Marquee = createBehaviourComponent(marquee, "Marquee", "div");
+var ScrollReveal = createBehaviourComponent(scrollReveal, "ScrollReveal", "div");
+var Parallax = createBehaviourComponent(parallax, "Parallax", "div");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
+function GradientText({
+  children,
+  colors,
+  angle = 100,
+  duration = 0,
+  stops = 16,
+  as: Component = "span",
+  className,
+  style
+}) {
+  const gradientCss = useMemo(() => {
+    const palette = resolvePalette(colors);
+    const looped = duration > 0 ? [...palette, ...palette] : palette;
+    return createGradient(looped, { space: "oklab" }).toCss(`${angle}deg`, stops);
+  }, [colors, angle, duration, stops]);
+  const animated = duration > 0 && !prefersReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      className,
+      style: {
+        backgroundImage: gradientCss,
+        backgroundSize: animated ? "200% 100%" : "100% 100%",
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        color: "transparent",
+        // A fallback for the rare engine without background-clip support: the first colour still
+        // renders as solid text rather than the content vanishing entirely.
+        WebkitTextFillColor: "transparent",
+        display: "inline-block",
+        ...animated ? {
+          animation: `ansh-gradient-shift ${duration}s linear infinite`
+        } : {},
+        ...style
+      },
+      children: [
+        children,
+        animated ? /* @__PURE__ */ jsx(GradientKeyframes, {}) : null
+      ]
+    }
+  );
+}
+function GradientKeyframes() {
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: "@keyframes ansh-gradient-shift{from{background-position:0% 50%}to{background-position:200% 50%}}"
+      }
+    }
+  );
+}
+function AnimatedText({
+  children,
+  by = "chars",
+  duration = 0.6,
+  each = 0.03,
+  from = "first",
+  easing = "cinematic",
+  distance = 18,
+  blur = 0,
+  rotate = 0,
+  mask = false,
+  whenInView = true,
+  repeat = false,
+  delay = 0,
+  as: Component = "span",
+  className,
+  style,
+  onComplete
+}) {
+  const hostRef = useRef(null);
+  const unitRefs = useRef([]);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const units = useMemo(() => {
+    if (by === "words") {
+      return children.split(/(\s+)/).filter((token) => token.length > 0).map((token) => ({ text: token, space: /^\s+$/.test(token) }));
+    }
+    const graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? Array.from(
+      new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(children),
+      (s) => s.segment
+    ) : Array.from(children);
+    return graphemes.map((character) => ({ text: character, space: /^\s$/.test(character) }));
+  }, [children, by]);
+  const animatedCount = useMemo(() => units.filter((u) => !u.space).length, [units]);
+  useIsomorphicLayoutEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    if (prefersReducedMotion()) {
+      onCompleteRef.current?.();
+      return;
+    }
+    const ease = resolveEasing(easing);
+    const delayFor = stagger(animatedCount, { each, from });
+    const ticker = getTicker();
+    const targets = [];
+    let animationIndex = 0;
+    units.forEach((unit, i) => {
+      if (unit.space) return;
+      const node = unitRefs.current[i];
+      if (node) targets.push({ node, delay: delay + delayFor(animationIndex) });
+      animationIndex++;
+    });
+    const apply = (node, progress) => {
+      const eased = ease(progress);
+      const inverse = 1 - eased;
+      node.style.opacity = String(eased);
+      const parts = [`translate3d(0, ${(distance * inverse).toFixed(2)}px, 0)`];
+      if (rotate !== 0) parts.push(`rotate(${(rotate * inverse).toFixed(2)}deg)`);
+      node.style.transform = parts.join(" ");
+      if (blur > 0) {
+        const amount = blur * inverse;
+        node.style.filter = amount > 0.05 ? `blur(${amount.toFixed(2)}px)` : "";
+      }
+    };
+    const reset = () => {
+      for (const { node } of targets) apply(node, 0);
+    };
+    const settle = (node) => {
+      node.style.opacity = "";
+      node.style.transform = "";
+      node.style.filter = "";
+      node.style.willChange = "";
+    };
+    let elapsed = 0;
+    let running = false;
+    let stopTicker = null;
+    const start = () => {
+      if (running) return;
+      running = true;
+      elapsed = 0;
+      for (const { node } of targets) node.style.willChange = "opacity, transform";
+      reset();
+      stopTicker = ticker.add(
+        ({ delta }) => {
+          elapsed += delta;
+          let allDone = true;
+          for (const target of targets) {
+            const local = elapsed - target.delay;
+            if (local < 0) {
+              allDone = false;
+              continue;
+            }
+            const progress = duration <= 0 ? 1 : local / duration;
+            if (progress >= 1) {
+              settle(target.node);
+              continue;
+            }
+            apply(target.node, progress);
+            allDone = false;
+          }
+          if (allDone) {
+            stopTicker?.();
+            stopTicker = null;
+            running = false;
+            onCompleteRef.current?.();
+          }
+        },
+        { phase: "write", name: "AnimatedText" }
+      );
+    };
+    if (!whenInView) {
+      reset();
+      start();
+      return () => {
+        stopTicker?.();
+        for (const { node } of targets) settle(node);
+      };
+    }
+    reset();
+    const stopObserver = observeIntersection(
+      host,
+      (entry) => {
+        if (entry.isIntersecting) {
+          start();
+        } else if (repeat) {
+          stopTicker?.();
+          stopTicker = null;
+          running = false;
+          reset();
+        }
+      },
+      { threshold: 0.2, rootMargin: "0px 0px -8% 0px" }
+    );
+    return () => {
+      stopObserver();
+      stopTicker?.();
+      for (const { node } of targets) settle(node);
+    };
+  }, [
+    units,
+    animatedCount,
+    duration,
+    each,
+    from,
+    easing,
+    distance,
+    blur,
+    rotate,
+    whenInView,
+    repeat,
+    delay
+  ]);
+  return /* @__PURE__ */ jsxs(Component, { ref: hostRef, className, style: { display: "inline-block", ...style }, children: [
+    /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: units.map(
+      (unit, i) => unit.space ? (
+        // Whitespace as a plain text node so it collapses and wraps like real text.
+        /* @__PURE__ */ jsx("span", { children: unit.text }, i)
+      ) : mask ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: { display: "inline-block", overflow: "hidden", verticalAlign: "top" },
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: (node) => {
+                unitRefs.current[i] = node;
+              },
+              style: { display: "inline-block" },
+              children: unit.text
+            }
+          )
+        },
+        i
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: (node) => {
+            unitRefs.current[i] = node;
+          },
+          style: { display: "inline-block" },
+          children: unit.text
+        },
+        i
+      )
+    ) })
+  ] });
+}
+var MotionConfigContext = createContext({
+  reducedMotion: "auto",
+  timeScale: 1,
+  quality: null
+});
+function MotionConfig({
+  reducedMotion = "auto",
+  timeScale = 1,
+  quality = null,
+  pauseWhenHidden = true,
+  pauseWhenBlurred = false,
+  respectBattery = true,
+  children
+}) {
+  useEffect(() => {
+    setReducedMotionMode(reducedMotion);
+  }, [reducedMotion]);
+  useEffect(() => {
+    getTicker().timeScale = timeScale;
+  }, [timeScale]);
+  useEffect(() => {
+    if (quality !== null) getTicker().lockQuality(quality);
+  }, [quality]);
+  useEffect(
+    () => attachLifecycle(getTicker(), {
+      pauseWhenHidden,
+      pauseWhenBlurred,
+      respectBattery
+    }),
+    [pauseWhenHidden, pauseWhenBlurred, respectBattery]
+  );
+  const value = useMemo(
+    () => ({ reducedMotion, timeScale, quality }),
+    [reducedMotion, timeScale, quality]
+  );
+  return /* @__PURE__ */ jsx(MotionConfigContext.Provider, { value, children });
+}
+function useMotionConfig() {
+  return useContext(MotionConfigContext);
+}
+var ThemeContext = createContext({
+  theme: "system",
+  resolved: "light",
+  setTheme: () => {
+  }
+});
+function ThemeProvider({
+  defaultTheme = "system",
+  storageKey = "ansh-theme",
+  children
+}) {
+  const [theme, setThemeState] = useState(defaultTheme);
+  const [resolved, setResolved] = useState("light");
+  useEffect(() => {
+    if (!storageKey) return;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        setThemeState(stored);
+      }
+    } catch {
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    applyTheme(theme);
+    setResolved(resolveTheme());
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, theme);
+      } catch {
+      }
+    }
+  }, [theme, storageKey]);
+  useEffect(() => {
+    if (theme !== "system" || typeof matchMedia !== "function") return;
+    const query = matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setResolved(query.matches ? "dark" : "light");
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [theme]);
+  const value = useMemo(() => ({ theme, resolved, setTheme: setThemeState }), [theme, resolved]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+function themeScript(storageKey = "ansh-theme") {
+  return `(function(){try{var t=localStorage.getItem(${JSON.stringify(storageKey)});if(t==='light'||t==='dark'){document.documentElement.setAttribute('data-theme',t)}}catch(e){}})()`;
+}
+var DEFAULTS = {
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: 0,
+  blur: 0
+};
+function applyValues(node, values) {
+  const transform = `translate3d(${values.x}px, ${values.y}px, 0) scale(${values.scale * values.scaleX}, ${values.scale * values.scaleY}) rotate(${values.rotate}deg)`;
+  node.style.transform = transform;
+  node.style.opacity = String(values.opacity);
+  node.style.filter = values.blur > 0 ? `blur(${values.blur}px)` : "";
+}
+function resolve(values, base) {
+  return { ...base, ...values };
+}
+function Motion({
+  as: Component = "div",
+  initial,
+  animate: target,
+  // Destructured but unused here: `AnimatePresence` reads `exit` off the element's props when the
+  // child is removed and swaps it into `animate`. Pulling it out of `rest` stops it reaching the
+  // DOM as an unknown attribute.
+  exit: _exit,
+  transition,
+  whileHover,
+  whileTap,
+  whileInView = false,
+  inViewAmount = 0.2,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const nodeRef = useRef(null);
+  const currentRef = useRef(resolve(initial, DEFAULTS));
+  const controlsRef = useRef(null);
+  const [inView, setInView] = useState(!whileInView);
+  useLayoutEffect(() => {
+    if (nodeRef.current) applyValues(nodeRef.current, currentRef.current);
+  }, []);
+  const runTo = useCallback(
+    (next, options) => {
+      const node = nodeRef.current;
+      if (!node) return;
+      controlsRef.current?.stop();
+      const from = { ...currentRef.current };
+      const springOption = options?.spring ?? transition?.spring;
+      const animationOptions = {
+        ...options?.delay ?? transition?.delay !== void 0 ? { delay: options?.delay ?? transition?.delay ?? 0 } : null,
+        ...springOption ? {
+          spring: springOption === true ? springs.default : typeof springOption === "string" ? springs[springOption] : springOption
+        } : {
+          duration: options?.duration ?? transition?.duration ?? 0.4,
+          ...options?.easing ?? transition?.easing ? { easing: options?.easing ?? transition?.easing } : null
+        },
+        onUpdate: (t) => {
+          const frame = {};
+          for (const key of Object.keys(DEFAULTS)) {
+            frame[key] = from[key] + (next[key] - from[key]) * t;
+          }
+          currentRef.current = frame;
+          applyValues(node, frame);
+        },
+        onComplete: () => {
+          currentRef.current = next;
+          applyValues(node, next);
+        }
+      };
+      controlsRef.current = animate(0, 1, animationOptions);
+    },
+    [transition]
+  );
+  const targetKey = JSON.stringify(target ?? null);
+  useEffect(() => {
+    if (!inView) return;
+    runTo(resolve(target, DEFAULTS));
+  }, [targetKey, inView, runTo]);
+  useEffect(() => {
+    if (!whileInView) return;
+    const node = nodeRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: inViewAmount }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [whileInView, inViewAmount]);
+  useEffect(() => () => controlsRef.current?.stop(), []);
+  const interaction = {};
+  if (whileHover) {
+    interaction.onMouseEnter = () => runTo(resolve({ ...target, ...whileHover }, DEFAULTS));
+    interaction.onMouseLeave = () => runTo(resolve(target, DEFAULTS));
+  }
+  if (whileTap) {
+    interaction.onPointerDown = () => runTo(resolve({ ...target, ...whileTap }, DEFAULTS), { duration: 0.12 });
+    interaction.onPointerUp = () => runTo(resolve({ ...target, ...whileHover }, DEFAULTS));
+  }
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: nodeRef,
+      className,
+      style: { willChange: "transform, opacity", ...style },
+      ...interaction,
+      ...rest,
+      children
+    }
+  );
+}
+function AnimatePresence({ children, exitDuration = 0.35 }) {
+  const currentChildren = Children.toArray(children).filter(isValidElement);
+  const [rendered, setRendered] = useState(currentChildren);
+  const timersRef = useRef(/* @__PURE__ */ new Map());
+  const keys = currentChildren.map((child) => String(child.key));
+  const keysSignature = keys.join("|");
+  useEffect(() => {
+    const currentKeys2 = new Set(keys);
+    const departing = rendered.filter((child) => !currentKeys2.has(String(child.key)));
+    if (departing.length === 0) {
+      setRendered(currentChildren);
+      return;
+    }
+    setRendered([...currentChildren, ...departing]);
+    const delay = prefersReducedMotion() ? 0 : exitDuration * 1e3;
+    for (const child of departing) {
+      const key = String(child.key);
+      clearTimeout(timersRef.current.get(key));
+      timersRef.current.set(
+        key,
+        setTimeout(() => {
+          setRendered((previous) => previous.filter((entry) => String(entry.key) !== key));
+          timersRef.current.delete(key);
+        }, delay)
+      );
+    }
+  }, [keysSignature, exitDuration]);
+  useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      for (const timer of timers.values()) clearTimeout(timer);
+      timers.clear();
+    };
+  }, []);
+  const currentKeys = new Set(keys);
+  return /* @__PURE__ */ jsx(Fragment, { children: rendered.map((child) => {
+    const leaving = !currentKeys.has(String(child.key));
+    if (!leaving) return child;
+    const props = child.props;
+    return cloneElement(child, {
+      animate: props.exit ?? { opacity: 0, scale: 0.96 },
+      transition: { duration: exitDuration, ...props.transition }
+    });
+  }) });
+}
+function Draggable({
+  axis = "both",
+  bounds,
+  snapBack = false,
+  momentum,
+  onDragStart,
+  onDragEnd,
+  className,
+  style,
+  children
+}) {
+  const nodeRef = useRef(null);
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const useMomentum = momentum ?? !snapBack;
+  const clamp = useCallback(
+    (value) => ({
+      x: Math.min(Math.max(value.x, bounds?.left ?? -Infinity), bounds?.right ?? Infinity),
+      y: Math.min(Math.max(value.y, bounds?.top ?? -Infinity), bounds?.bottom ?? Infinity)
+    }),
+    [bounds]
+  );
+  const write = (value) => {
+    if (nodeRef.current) {
+      nodeRef.current.style.transform = `translate3d(${value.x}px, ${value.y}px, 0)`;
+    }
+  };
+  const onPointerDown = (event) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+    onDragStart?.();
+    const start = { x: event.clientX, y: event.clientY };
+    const origin = { ...offsetRef.current };
+    const samples = [];
+    const onMove = (moveEvent) => {
+      const next = clamp({
+        x: axis === "y" ? origin.x : origin.x + (moveEvent.clientX - start.x),
+        y: axis === "x" ? origin.y : origin.y + (moveEvent.clientY - start.y)
+      });
+      offsetRef.current = next;
+      write(next);
+      samples.push({ x: next.x, y: next.y, t: performance.now() });
+      if (samples.length > 5) samples.shift();
+    };
+    const onUp = () => {
+      setDragging(false);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+      if (snapBack) {
+        animate(0, 1, {
+          spring: springs.subtle,
+          onUpdate: (t) => {
+            const value = { x: offsetRef.current.x * (1 - t), y: offsetRef.current.y * (1 - t) };
+            write(value);
+          },
+          onComplete: () => {
+            offsetRef.current = { x: 0, y: 0 };
+            write(offsetRef.current);
+            onDragEnd?.(offsetRef.current);
+          }
+        });
+        return;
+      }
+      if (useMomentum && samples.length >= 2) {
+        const first = samples[0];
+        const last = samples[samples.length - 1];
+        const elapsed = Math.max(1, last.t - first.t);
+        let velocity = {
+          x: (last.x - first.x) / elapsed * 1e3,
+          y: (last.y - first.y) / elapsed * 1e3
+        };
+        const decay = 0.95;
+        const stop = getTicker().add(
+          ({ delta }) => {
+            const factor = Math.pow(decay, delta * 60);
+            velocity = { x: velocity.x * factor, y: velocity.y * factor };
+            const next = clamp({
+              x: offsetRef.current.x + velocity.x * delta,
+              y: offsetRef.current.y + velocity.y * delta
+            });
+            offsetRef.current = next;
+            write(next);
+            if (Math.hypot(velocity.x, velocity.y) < 8) {
+              stop();
+              onDragEnd?.(offsetRef.current);
+            }
+          },
+          { phase: "write", name: "Draggable" }
+        );
+        return;
+      }
+      onDragEnd?.(offsetRef.current);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: nodeRef,
+      className: cx("ansh-draggable", dragging && "ansh-draggable--active", className),
+      style: { touchAction: axis === "x" ? "pan-y" : axis === "y" ? "pan-x" : "none", ...style },
+      onPointerDown,
+      children
+    }
+  );
+}
+
+export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, createBehaviourComponent, themeScript, useBehaviour, useMotionConfig, useTheme };
+//# sourceMappingURL=chunk-T4AK2KLM.js.map
+//# sourceMappingURL=chunk-T4AK2KLM.js.map