@dreamtree-org/twreact-ui 2.1.2 → 2.2.1

package/dist/esm/hooks/useScrollProgress.js

@@ -0,0 +1,107 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+import { subscribe } from '../motion/engine/scheduler.js';
+import { observe } from '../motion/engine/inView.js';
+import { computeProgress } from '../motion/engine/progress.js';
+import { useLatestRef } from './useLatestRef.js';
+
+function createStore(initial) {
+  var value = initial;
+  var listeners = new Set();
+  return {
+    get: function get() {
+      return value;
+    },
+    set: function set(next) {
+      if (next === value) return;
+      value = next;
+      listeners.forEach(function (fn) {
+        return fn(next);
+      });
+    },
+    subscribe: function subscribe(fn) {
+      listeners.add(fn);
+      return function () {
+        listeners["delete"](fn);
+      };
+    }
+  };
+}
+/**
+ * Scroll progress (0–1) of `ref`'s element, without re-rendering React on every frame.
+ *
+ * Returns a subscription (`get()` / `subscribe(fn)`), writes the value to the element as a
+ * CSS custom property (`--dt-p` by default) so CSS can map it to transforms, and calls
+ * `onChange`. Work runs on the shared motion frame loop, and only while the element is
+ * near the viewport.
+ *
+ * The value starts at 1 (the final state) and the CSS variable is unset on the server, under
+ * reduced motion (pass `enabled: false`) and after unmount, so write CSS with a final-state
+ * fallback: `opacity: var(--dt-p, 1)`.
+ */
+function useScrollProgress(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$mode = options.mode,
+    mode = _options$mode === void 0 ? "view" : _options$mode,
+    _options$start = options.start,
+    start = _options$start === void 0 ? 0 : _options$start,
+    _options$end = options.end,
+    end = _options$end === void 0 ? 1 : _options$end,
+    _options$cssVar = options.cssVar,
+    cssVar = _options$cssVar === void 0 ? "--dt-p" : _options$cssVar,
+    _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled;
+  var _useState = useState(function () {
+      return createStore(1);
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    store = _useState2[0];
+  var onChangeRef = useLatestRef(options.onChange);
+  useEffect(function () {
+    var el = ref.current;
+    if (!el || !enabled) return undefined;
+    var measure = function measure() {
+      var rect = el.getBoundingClientRect();
+      return computeProgress(rect.top, rect.height, innerHeight, {
+        mode: mode,
+        start: start,
+        end: end
+      });
+    };
+    var _write = function write(p) {
+      if (cssVar) el.style.setProperty(cssVar, p.toFixed(4));
+      if (p !== store.get()) {
+        var _onChangeRef$current;
+        store.set(p);
+        (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, p);
+      }
+    };
+    var unsubscribe = null;
+    var stopObserving = observe(el, function (inView) {
+      if (inView && !unsubscribe) {
+        unsubscribe = subscribe({
+          measure: measure,
+          write: function write(p) {
+            return _write(p);
+          }
+        });
+      } else if (!inView && unsubscribe) {
+        _write(measure()); // settle at 0 or 1 even after a fast fling
+        unsubscribe();
+        unsubscribe = null;
+      }
+    }, {
+      rootMargin: "25% 0px"
+    });
+    return function () {
+      stopObserving();
+      if (unsubscribe) unsubscribe();
+      if (cssVar) el.style.removeProperty(cssVar);
+      store.set(1);
+    };
+  }, [ref, enabled, mode, start, end, cssVar, store, onChangeRef]);
+  return store;
+}
+
+export { useScrollProgress };

package/dist/esm/hooks/useSmoothScroll.js

@@ -0,0 +1,33 @@
+'use client';
+import { useContext, createContext } from 'react';
+
+function nativeScrollTo(target) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    _ref$immediate = _ref.immediate,
+    immediate = _ref$immediate === void 0 ? false : _ref$immediate;
+  if (typeof window === "undefined") return;
+  var el = typeof target === "string" ? document.querySelector(target) : target;
+  var top = typeof el === "number" ? el : el ? el.getBoundingClientRect().top + window.scrollY : null;
+  if (top == null) return;
+  window.scrollTo({
+    top: top + offset,
+    behavior: immediate ? "auto" : "smooth"
+  });
+}
+/** Native scrolling: the value outside a SmoothScrollProvider (or while Lenis is off). */
+var NATIVE_SCROLL = {
+  lenis: null,
+  scrollTo: nativeScrollTo
+};
+var SmoothScrollContext = /*#__PURE__*/createContext(NATIVE_SCROLL);
+/**
+ * `{ lenis, scrollTo }` from the nearest SmoothScrollProvider. Outside one, or while smooth
+ * scroll is off, `lenis` is `null` and `scrollTo` uses native `window.scrollTo`.
+ */
+function useSmoothScroll() {
+  return useContext(SmoothScrollContext);
+}
+
+export { NATIVE_SCROLL, SmoothScrollContext, useSmoothScroll };

package/dist/esm/motion/engine/inView.js

@@ -0,0 +1,54 @@
+// Internal: one shared IntersectionObserver per (rootMargin, threshold) pair.
+// `observe(el, cb)` calls `cb(isIntersecting, entry)` on every change and
+// returns a function that stops observing. Without IntersectionObserver (old
+// browsers, some test environments) the element counts as always in view.
+var observers = new Map();
+function getObserver(rootMargin, threshold) {
+  var key = "".concat(rootMargin, "|").concat(threshold);
+  var record = observers.get(key);
+  if (!record) {
+    var callbacks = new Map();
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var cb = callbacks.get(entry.target);
+        if (cb) cb(entry.isIntersecting, entry);
+      });
+    }, {
+      rootMargin: rootMargin,
+      threshold: threshold
+    });
+    record = {
+      io: io,
+      callbacks: callbacks,
+      key: key
+    };
+    observers.set(key, record);
+  }
+  return record;
+}
+function observe(el, callback) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$rootMargin = _ref.rootMargin,
+    rootMargin = _ref$rootMargin === void 0 ? "0px" : _ref$rootMargin,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 0 : _ref$threshold;
+  if (!el) return function () {};
+  if (typeof IntersectionObserver === "undefined") {
+    callback(true, null);
+    return function () {};
+  }
+  var record = getObserver(rootMargin, threshold);
+  record.callbacks.set(el, callback);
+  record.io.observe(el);
+  return function () {
+    if (!record.callbacks.has(el)) return;
+    record.callbacks["delete"](el);
+    record.io.unobserve(el);
+    if (record.callbacks.size === 0) {
+      record.io.disconnect();
+      observers["delete"](record.key);
+    }
+  };
+}
+
+export { observe };

package/dist/esm/motion/engine/progress.js

@@ -0,0 +1,45 @@
+// Internal: pure scroll-progress maths (unit-tested, no DOM).
+var clamp01 = function clamp01(v) {
+  return v > 0 ? v < 1 ? v : 1 : 0;
+};
+var lerp = function lerp(a, b, t) {
+  return a + (b - a) * t;
+};
+/** Ease-out cubic: fast start, gentle stop. */
+var easeOut = function easeOut(t) {
+  return 1 - Math.pow(1 - t, 3);
+};
+/** Ease-in-out cubic. */
+var easeInOut = function easeInOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+};
+/** Re-map `t` from the window [from, to] to 0–1 (clamped). */
+var segment = function segment(t, from, to) {
+  return clamp01((t - from) / (to - from || 1));
+};
+/**
+ * Scroll progress of an element.
+ *  - "view": 0 when its top meets the viewport bottom, 1 when its bottom leaves the viewport top.
+ *  - "pin":  0 when its top meets the viewport top, 1 when its bottom meets the viewport bottom
+ *            (the span a `position: sticky` child stays pinned).
+ * `start` / `end` narrow the range: progress is re-mapped from [start, end] to 0–1.
+ */
+function computeProgress(top, height, viewport) {
+  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "view" : _ref$mode,
+    _ref$start = _ref.start,
+    start = _ref$start === void 0 ? 0 : _ref$start,
+    _ref$end = _ref.end,
+    end = _ref$end === void 0 ? 1 : _ref$end;
+  var raw;
+  if (mode === "pin") {
+    var span = height - viewport;
+    raw = span > 0 ? -top / span : top <= 0 ? 1 : 0;
+  } else {
+    raw = (viewport - top) / (viewport + height || 1);
+  }
+  return segment(clamp01(raw), start, end);
+}
+
+export { clamp01, computeProgress, easeInOut, easeOut, lerp, segment };

package/dist/esm/motion/engine/scheduler.js

@@ -0,0 +1,67 @@
+// Internal motion engine: ONE requestAnimationFrame loop shared by every motion
+// component. Each frame runs every subscriber's `measure()` (DOM reads) first,
+// then every `write(measured, now)` (DOM writes), so reads and writes never
+// interleave and the browser lays out at most once per frame.
+//
+// The loop is idle unless something asks for a frame: a scroll or resize event
+// (passive listeners), a new subscriber, or a subscriber with `loop: true`
+// (time-based work such as CountUp or Lenis). Scenes subscribe only while they
+// are near the viewport (see inView.js), so off-screen sections cost nothing.
+var subscribers = new Set();
+var frameId = 0;
+var listening = false;
+function hasWindow() {
+  return typeof window !== "undefined" && typeof window.requestAnimationFrame === "function";
+}
+function runFrame(now) {
+  frameId = 0;
+  var list = Array.from(subscribers);
+  var measured = list.map(function (s) {
+    return s.measure ? s.measure() : undefined;
+  });
+  var again = false;
+  list.forEach(function (s, i) {
+    if (!subscribers.has(s)) return; // unsubscribed by an earlier write this frame
+    if (s.write) s.write(measured[i], now);
+    if (s.loop && subscribers.has(s)) again = true;
+  });
+  if (again) requestFrame();
+}
+/** Ask for one frame (coalesced: many calls before the frame run it once). */
+function requestFrame() {
+  if (frameId || !hasWindow()) return;
+  frameId = requestAnimationFrame(runFrame);
+}
+var onScrollOrResize = function onScrollOrResize() {
+  return requestFrame();
+};
+function listen(on) {
+  if (on === listening || typeof window === "undefined") return;
+  listening = on;
+  var method = on ? "addEventListener" : "removeEventListener";
+  window[method]("scroll", onScrollOrResize, {
+    passive: true
+  });
+  window[method]("resize", onScrollOrResize, {
+    passive: true
+  });
+}
+/**
+ * Register `{ measure?, write?, loop? }`. Returns the unsubscribe function.
+ * The subscriber gets a frame right away, so it can paint its first state.
+ */
+function subscribe(subscriber) {
+  subscribers.add(subscriber);
+  listen(true);
+  requestFrame();
+  return function () {
+    subscribers["delete"](subscriber);
+    if (subscribers.size === 0) {
+      listen(false);
+      if (frameId && hasWindow()) cancelAnimationFrame(frameId);
+      frameId = 0;
+    }
+  };
+}
+
+export { requestFrame, subscribe };

package/dist/esm/motion/engine/useHydrated.js

@@ -0,0 +1,17 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+
+var subscribeNever = function subscribeNever() {
+  return function () {};
+};
+// Internal: false on the server and while hydrating, true after — without a
+// setState-in-effect. Lets a component render its static final state first.
+function useHydrated() {
+  return useSyncExternalStore(subscribeNever, function () {
+    return true;
+  }, function () {
+    return false;
+  });
+}
+
+export { useHydrated };

package/dist/esm/motion/engine/useIsomorphicLayoutEffect.js

@@ -0,0 +1,7 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

package/dist/esm/motion/engine/useMergedRef.js

@@ -0,0 +1,12 @@
+'use client';
+import { useCallback } from 'react';
+import { setRefs } from '../../utils/position.js';
+
+// Internal: one callback ref that feeds a forwarded ref and a local ref.
+function useMergedRef(forwardedRef, localRef) {
+  return useCallback(function (node) {
+    return setRefs(node, localRef, forwardedRef);
+  }, [forwardedRef, localRef]);
+}
+
+export { useMergedRef };

package/dist/esm/motion/index.js

@@ -0,0 +1,16 @@
+export { useScrollProgress } from '../hooks/useScrollProgress.js';
+export { default as ScrollStage } from '../components/motion/ScrollStage.js';
+export { default as Reveal } from '../components/motion/Reveal.js';
+export { default as RevealGroup } from '../components/motion/RevealGroup.js';
+export { default as SmoothScrollProvider } from '../components/motion/SmoothScrollProvider.js';
+export { useSmoothScroll } from '../hooks/useSmoothScroll.js';
+export { default as DeviceFrame } from '../components/motion/DeviceFrame.js';
+export { default as LogoMarquee } from '../components/motion/LogoMarquee.js';
+export { default as CountUp } from '../components/motion/CountUp.js';
+export { default as StatStrip } from '../components/motion/StatStrip.js';
+export { default as StackedCards } from '../components/motion/StackedCards.js';
+export { default as DeviceMorphHero } from '../components/motion/DeviceMorphHero.js';
+export { default as BentoExpandGrid } from '../components/motion/BentoExpandGrid.js';
+export { default as TestimonialSpotlight } from '../components/motion/TestimonialSpotlight.js';
+export { default as PhotoCollage } from '../components/motion/PhotoCollage.js';
+export { default as RotatingBadge } from '../components/motion/RotatingBadge.js';

package/dist/esm/motion/tokens.js

@@ -0,0 +1,10 @@
+// Defaults from the `scroll` group of tokens/tokens.json (kept in sync by
+// src/motion/engine/__tests__/tokens.test.js). Plain numbers so the motion
+// entry does not bundle the token file.
+var SCROLL_STICKY_TOP = 80; // px — scroll.stickyTop
+var SCENE_LENGTH = 300; // vh — scroll.sceneLength
+var SCENE_LENGTH_MOBILE = 150; // vh — scroll.sceneLengthMobile
+/** Below Tailwind's `md` breakpoint. */
+var MOBILE_QUERY = "(max-width: 767px)";
+
+export { MOBILE_QUERY, SCENE_LENGTH, SCENE_LENGTH_MOBILE, SCROLL_STICKY_TOP };

package/dist/hooks/useScrollProgress.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from "react";
+import type { ScrollProgress, UseScrollProgressOptions } from "../types/motion";
+/**
+ * Scroll progress (0–1) of `ref`'s element, without re-rendering React on every frame.
+ *
+ * Returns a subscription (`get()` / `subscribe(fn)`), writes the value to the element as a
+ * CSS custom property (`--dt-p` by default) so CSS can map it to transforms, and calls
+ * `onChange`. Work runs on the shared motion frame loop, and only while the element is
+ * near the viewport.
+ *
+ * The value starts at 1 (the final state) and the CSS variable is unset on the server, under
+ * reduced motion (pass `enabled: false`) and after unmount, so write CSS with a final-state
+ * fallback: `opacity: var(--dt-p, 1)`.
+ */
+export declare function useScrollProgress(ref: RefObject<HTMLElement | null>, options?: UseScrollProgressOptions): ScrollProgress;
+export default useScrollProgress;
+//# sourceMappingURL=useScrollProgress.d.ts.map

package/dist/hooks/useScrollProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollProgress.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollProgress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5D,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAyBhF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,OAAO,GAAE,wBAA6B,GACrC,cAAc,CA0ChB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/hooks/useSmoothScroll.d.ts

@@ -0,0 +1,11 @@
+import type { SmoothScrollContextValue } from "../types/motion";
+/** Native scrolling: the value outside a SmoothScrollProvider (or while Lenis is off). */
+export declare const NATIVE_SCROLL: SmoothScrollContextValue;
+export declare const SmoothScrollContext: import("react").Context<SmoothScrollContextValue>;
+/**
+ * `{ lenis, scrollTo }` from the nearest SmoothScrollProvider. Outside one, or while smooth
+ * scroll is off, `lenis` is `null` and `scrollTo` uses native `window.scrollTo`.
+ */
+export declare function useSmoothScroll(): SmoothScrollContextValue;
+export default useSmoothScroll;
+//# sourceMappingURL=useSmoothScroll.d.ts.map

package/dist/hooks/useSmoothScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSmoothScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useSmoothScroll.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAahE,0FAA0F;AAC1F,eAAO,MAAM,aAAa,EAAE,wBAAoE,CAAC;AAEjG,eAAO,MAAM,mBAAmB,mDAAyD,CAAC;AAE1F;;;GAGG;AACH,wBAAgB,eAAe,IAAI,wBAAwB,CAE1D;AAED,eAAe,eAAe,CAAC"}