@arolariu/components 0.5.0 → 1.1.0

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @remarks
+ * This hook is re-exported from `motion/react` so consumers can depend on the component
+ * library for motion-aware behavior without importing Motion directly.
+ *
+ * @returns `true` when `prefers-reduced-motion: reduce` is active, or `null` until the first client measurement when Motion has not resolved the preference yet.
+ *
+ * @example
+ * ```tsx
+ * const prefersReduced = useReducedMotion();
+ * ```
+ *
+ * @see {@link https://motion.dev/docs/react-use-reduced-motion | Motion useReducedMotion}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | MDN prefers-reduced-motion}
+ */
+export { useReducedMotion } from "motion/react";
+//# sourceMappingURL=useReducedMotion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducedMotion.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC"}

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,2 @@
+"use client";
+export { useReducedMotion } from "motion/react";

package/dist/hooks/useThrottle.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Throttles a callback function, limiting how often it can be invoked.
+ *
+ * @remarks
+ * This hook returns a throttled version of the provided callback that can only
+ * be executed once per specified interval. Subsequent calls within the interval
+ * are ignored. Useful for rate-limiting expensive operations triggered by high-frequency
+ * events like scrolling, resizing, or mouse movement.
+ *
+ * Unlike debouncing, throttling ensures the callback is invoked at regular intervals
+ * during continuous events, providing more predictable execution timing.
+ *
+ * @typeParam Args - The tuple type of the callback's arguments.
+ * @param callback - The function to throttle.
+ * @param delay - The minimum interval in milliseconds between invocations.
+ * @returns A throttled version of the callback.
+ *
+ * @example
+ * ```tsx
+ * function ScrollTracker() {
+ *   const [scrollPos, setScrollPos] = useState(0);
+ *
+ *   const handleScroll = useThrottle(() => {
+ *     setScrollPos(window.scrollY);
+ *   }, 200);
+ *
+ *   useEffect(() => {
+ *     window.addEventListener("scroll", handleScroll);
+ *     return () => window.removeEventListener("scroll", handleScroll);
+ *   }, [handleScroll]);
+ *
+ *   return <p>Scroll position: {scrollPos}</p>;
+ * }
+ * ```
+ */
+export declare function useThrottle<Args extends unknown[]>(callback: (...args: Args) => void, delay: number): (...args: Args) => void;
+//# sourceMappingURL=useThrottle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThrottle.d.ts","sourceRoot":"","sources":["../../src/hooks/useThrottle.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,WAAW,CAAC,IAAI,SAAS,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,CAsC7H"}

package/dist/hooks/useThrottle.js

@@ -0,0 +1,34 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+function useThrottle(callback, delay) {
+    const lastRunRef = useRef(0);
+    const timeoutRef = useRef(void 0);
+    const callbackRef = useRef(callback);
+    useEffect(()=>{
+        callbackRef.current = callback;
+    }, [
+        callback
+    ]);
+    useEffect(()=>()=>{
+            if (timeoutRef.current) globalThis.clearTimeout(timeoutRef.current);
+        }, []);
+    return useCallback((...args)=>{
+        const now = Date.now();
+        const timeSinceLastRun = now - lastRunRef.current;
+        if (timeSinceLastRun >= delay) {
+            callbackRef.current(...args);
+            lastRunRef.current = now;
+        } else {
+            if (timeoutRef.current) globalThis.clearTimeout(timeoutRef.current);
+            timeoutRef.current = globalThis.setTimeout(()=>{
+                callbackRef.current(...args);
+                lastRunRef.current = Date.now();
+            }, delay - timeSinceLastRun);
+        }
+    }, [
+        delay
+    ]);
+}
+export { useThrottle };
+
+//# sourceMappingURL=useThrottle.js.map

package/dist/hooks/useThrottle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useThrottle.js","sources":["../../src/hooks/useThrottle.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Throttles a callback function, limiting how often it can be invoked.\r\n *\r\n * @remarks\r\n * This hook returns a throttled version of the provided callback that can only\r\n * be executed once per specified interval. Subsequent calls within the interval\r\n * are ignored. Useful for rate-limiting expensive operations triggered by high-frequency\r\n * events like scrolling, resizing, or mouse movement.\r\n *\r\n * Unlike debouncing, throttling ensures the callback is invoked at regular intervals\r\n * during continuous events, providing more predictable execution timing.\r\n *\r\n * @typeParam Args - The tuple type of the callback's arguments.\r\n * @param callback - The function to throttle.\r\n * @param delay - The minimum interval in milliseconds between invocations.\r\n * @returns A throttled version of the callback.\r\n *\r\n * @example\r\n * ```tsx\r\n * function ScrollTracker() {\r\n *   const [scrollPos, setScrollPos] = useState(0);\r\n *\r\n *   const handleScroll = useThrottle(() => {\r\n *     setScrollPos(window.scrollY);\r\n *   }, 200);\r\n *\r\n *   useEffect(() => {\r\n *     window.addEventListener(\"scroll\", handleScroll);\r\n *     return () => window.removeEventListener(\"scroll\", handleScroll);\r\n *   }, [handleScroll]);\r\n *\r\n *   return <p>Scroll position: {scrollPos}</p>;\r\n * }\r\n * ```\r\n */\r\nexport function useThrottle<Args extends unknown[]>(callback: (...args: Args) => void, delay: number): (...args: Args) => void {\r\n  const lastRunRef = React.useRef(0);\r\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\r\n  const callbackRef = React.useRef(callback);\r\n\r\n  React.useEffect(() => {\r\n    callbackRef.current = callback;\r\n  }, [callback]);\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) {\r\n        globalThis.clearTimeout(timeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return React.useCallback(\r\n    (...args: Args) => {\r\n      const now = Date.now();\r\n      const timeSinceLastRun = now - lastRunRef.current;\r\n\r\n      if (timeSinceLastRun >= delay) {\r\n        callbackRef.current(...args);\r\n        lastRunRef.current = now;\r\n      } else {\r\n        if (timeoutRef.current) {\r\n          globalThis.clearTimeout(timeoutRef.current);\r\n        }\r\n\r\n        timeoutRef.current = globalThis.setTimeout(() => {\r\n          callbackRef.current(...args);\r\n          lastRunRef.current = Date.now();\r\n        }, delay - timeSinceLastRun);\r\n      }\r\n    },\r\n    [delay],\r\n  );\r\n}\r\n"],"names":["useThrottle","callback","delay","lastRunRef","React","timeoutRef","undefined","callbackRef","globalThis","args","now","Date","timeSinceLastRun"],"mappings":";;AAuCO,SAASA,YAAoCC,QAAiC,EAAEC,KAAa;IAClG,MAAMC,aAAaC,OAAa;IAChC,MAAMC,aAAaD,OAAwDE;IAC3E,MAAMC,cAAcH,OAAaH;IAEjCG,UAAgB;QACdG,YAAY,OAAO,GAAGN;IACxB,GAAG;QAACA;KAAS;IAEbG,UAAgB,IACP;YACL,IAAIC,WAAW,OAAO,EACpBG,WAAW,YAAY,CAACH,WAAW,OAAO;QAE9C,GACC,EAAE;IAEL,OAAOD,YACL,CAAC,GAAGK;QACF,MAAMC,MAAMC,KAAK,GAAG;QACpB,MAAMC,mBAAmBF,MAAMP,WAAW,OAAO;QAEjD,IAAIS,oBAAoBV,OAAO;YAC7BK,YAAY,OAAO,IAAIE;YACvBN,WAAW,OAAO,GAAGO;QACvB,OAAO;YACL,IAAIL,WAAW,OAAO,EACpBG,WAAW,YAAY,CAACH,WAAW,OAAO;YAG5CA,WAAW,OAAO,GAAGG,WAAW,UAAU,CAAC;gBACzCD,YAAY,OAAO,IAAIE;gBACvBN,WAAW,OAAO,GAAGQ,KAAK,GAAG;YAC/B,GAAGT,QAAQU;QACb;IACF,GACA;QAACV;KAAM;AAEX"}

package/dist/hooks/useTimeout.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Executes a callback after a specified delay with automatic cleanup.
+ *
+ * @remarks
+ * This hook wraps `setTimeout` and automatically clears the timeout when the component
+ * unmounts or when the delay changes. Setting `delay` to `null` disables the timeout.
+ *
+ * The timeout is reset whenever the `callback` or `delay` changes, ensuring the most
+ * recent callback is always executed.
+ *
+ * @param callback - The function to execute after the delay.
+ * @param delay - The delay in milliseconds, or `null` to disable the timeout.
+ *
+ * @example
+ * ```tsx
+ * function DelayedMessage() {
+ *   const [visible, setVisible] = useState(false);
+ *
+ *   useTimeout(() => {
+ *     setVisible(true);
+ *   }, 3000);
+ *
+ *   return visible ? <p>Message appeared!</p> : <p>Waiting...</p>;
+ * }
+ * ```
+ */
+export declare function useTimeout(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useTimeout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeout.d.ts","sourceRoot":"","sources":["../../src/hooks/useTimeout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAoB3E"}

package/dist/hooks/useTimeout.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef } from "react";
+function useTimeout(callback, delay) {
+    const savedCallback = useRef(callback);
+    useLayoutEffect(()=>{
+        savedCallback.current = callback;
+    }, [
+        callback
+    ]);
+    useEffect(()=>{
+        if (null === delay) return;
+        const timeoutId = globalThis.setTimeout(()=>{
+            savedCallback.current();
+        }, delay);
+        return ()=>{
+            globalThis.clearTimeout(timeoutId);
+        };
+    }, [
+        delay
+    ]);
+}
+export { useTimeout };
+
+//# sourceMappingURL=useTimeout.js.map

package/dist/hooks/useTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useTimeout.js","sources":["../../src/hooks/useTimeout.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Executes a callback after a specified delay with automatic cleanup.\r\n *\r\n * @remarks\r\n * This hook wraps `setTimeout` and automatically clears the timeout when the component\r\n * unmounts or when the delay changes. Setting `delay` to `null` disables the timeout.\r\n *\r\n * The timeout is reset whenever the `callback` or `delay` changes, ensuring the most\r\n * recent callback is always executed.\r\n *\r\n * @param callback - The function to execute after the delay.\r\n * @param delay - The delay in milliseconds, or `null` to disable the timeout.\r\n *\r\n * @example\r\n * ```tsx\r\n * function DelayedMessage() {\r\n *   const [visible, setVisible] = useState(false);\r\n *\r\n *   useTimeout(() => {\r\n *     setVisible(true);\r\n *   }, 3000);\r\n *\r\n *   return visible ? <p>Message appeared!</p> : <p>Waiting...</p>;\r\n * }\r\n * ```\r\n */\r\nexport function useTimeout(callback: () => void, delay: number | null): void {\r\n  const savedCallback = React.useRef(callback);\r\n\r\n  React.useLayoutEffect(() => {\r\n    savedCallback.current = callback;\r\n  }, [callback]);\r\n\r\n  React.useEffect(() => {\r\n    if (delay === null) {\r\n      return;\r\n    }\r\n\r\n    const timeoutId = globalThis.setTimeout(() => {\r\n      savedCallback.current();\r\n    }, delay);\r\n\r\n    return () => {\r\n      globalThis.clearTimeout(timeoutId);\r\n    };\r\n  }, [delay]);\r\n}\r\n"],"names":["useTimeout","callback","delay","savedCallback","React","timeoutId","globalThis"],"mappings":";;AA8BO,SAASA,WAAWC,QAAoB,EAAEC,KAAoB;IACnE,MAAMC,gBAAgBC,OAAaH;IAEnCG,gBAAsB;QACpBD,cAAc,OAAO,GAAGF;IAC1B,GAAG;QAACA;KAAS;IAEbG,UAAgB;QACd,IAAIF,AAAU,SAAVA,OACF;QAGF,MAAMG,YAAYC,WAAW,UAAU,CAAC;YACtCH,cAAc,OAAO;QACvB,GAAGD;QAEH,OAAO;YACLI,WAAW,YAAY,CAACD;QAC1B;IACF,GAAG;QAACH;KAAM;AACZ"}