@tensor_1/react 2.45.1 → 2.47.0

package/dist/hooks/useDelayedPending.d.ts

@@ -0,0 +1,22 @@
+interface DelayedPendingOptions {
+    /** Wait this long before showing anything (default 300 ms). `0` shows at once. */
+    delay?: number;
+    /** Once shown, keep showing at least this long (default 500 ms). */
+    minVisible?: number;
+}
+/**
+ * Whether to show a pending indicator for `pending` (motion standard §2.3): nothing for the
+ * first 300 ms, so a fast action never flashes a spinner; once shown, held at least 500 ms
+ * after it appeared, so it never flickers off the moment the work ends.
+ *
+ * ```tsx
+ * const showSpinner = useDelayedPending(query.isFetching);
+ * {showSpinner && <Spinner />}
+ * ```
+ *
+ * Use the raw `pending` for behaviour (blocking a second submit); use the result for what
+ * people see. Returns `false` on the server and on the first client render unless `delay` is 0.
+ */
+declare function useDelayedPending(pending: boolean, { delay, minVisible }?: DelayedPendingOptions): boolean;
+
+export { type DelayedPendingOptions, useDelayedPending };

package/dist/hooks/useDelayedPending.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { PENDING_DELAY_MS, PENDING_MIN_VISIBLE_MS } from "../motion-timing.js";
+function useDelayedPending(pending, { delay = PENDING_DELAY_MS, minVisible = PENDING_MIN_VISIBLE_MS } = {}) {
+  const [shown, setShown] = useState(() => pending && delay <= 0);
+  const shownAt = useRef(shown ? now() : 0);
+  useEffect(() => {
+    if (pending) {
+      if (shown) return void 0;
+      const show = () => {
+        shownAt.current = now();
+        setShown(true);
+      };
+      if (delay <= 0) {
+        show();
+        return void 0;
+      }
+      const timer2 = setTimeout(show, delay);
+      return () => clearTimeout(timer2);
+    }
+    if (!shown) return void 0;
+    const remaining = minVisible - (now() - shownAt.current);
+    if (remaining <= 0) {
+      setShown(false);
+      return void 0;
+    }
+    const timer = setTimeout(() => setShown(false), remaining);
+    return () => clearTimeout(timer);
+  }, [pending, shown, delay, minVisible]);
+  return shown;
+}
+const now = () => Date.now();
+export {
+  useDelayedPending
+};

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/** Non-hook read for event handlers and effects. `false` where there is no `matchMedia` (SSR, tests). */
+declare function prefersReducedMotion(): boolean;
+/** True while the user asks for reduced motion; re-renders when the setting changes. `false` on the server. */
+declare function useReducedMotion(): boolean;
+
+export { prefersReducedMotion, useReducedMotion };

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,20 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+  if (typeof matchMedia === "undefined") return () => {
+  };
+  const mql = matchMedia(QUERY);
+  mql.addEventListener("change", onChange);
+  return () => mql.removeEventListener("change", onChange);
+}
+function prefersReducedMotion() {
+  return typeof matchMedia !== "undefined" && matchMedia(QUERY).matches;
+}
+function useReducedMotion() {
+  return useSyncExternalStore(subscribe, prefersReducedMotion, () => false);
+}
+export {
+  prefersReducedMotion,
+  useReducedMotion
+};