@arolariu/components 0.5.0 → 1.1.0

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+/**
+ * Observes element visibility using the Intersection Observer API.
+ *
+ * @remarks
+ * This hook creates an IntersectionObserver that watches the provided element
+ * reference and returns the latest `IntersectionObserverEntry`. It's useful
+ * for implementing lazy loading, infinite scroll, animations on scroll, and
+ * tracking element visibility.
+ *
+ * The observer automatically disconnects when the component unmounts or when
+ * the element reference changes. The hook is SSR-safe and returns `null` when
+ * running on the server or when the observer is not yet initialized.
+ *
+ * @param ref - A React ref object pointing to the element to observe.
+ * @param options - Optional IntersectionObserver configuration (threshold, root, rootMargin).
+ * @returns The latest IntersectionObserverEntry or null if not intersecting yet.
+ *
+ * @example
+ * ```tsx
+ * function LazyImage({src, alt}: {src: string; alt: string}) {
+ *   const imageRef = useRef<HTMLImageElement>(null);
+ *   const entry = useIntersectionObserver(imageRef, {threshold: 0.1});
+ *
+ *   return (
+ *     <img
+ *       ref={imageRef}
+ *       src={entry?.isIntersecting ? src : undefined}
+ *       alt={alt}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function AnimateOnScroll({children}: {children: React.ReactNode}) {
+ *   const ref = useRef<HTMLDivElement>(null);
+ *   const entry = useIntersectionObserver(ref, {threshold: 0.5});
+ *   const isVisible = entry?.isIntersecting ?? false;
+ *
+ *   return (
+ *     <div ref={ref} className={isVisible ? "fade-in" : "hidden"}>
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useIntersectionObserver(ref: React.RefObject<Element | null>, options?: IntersectionObserverInit): IntersectionObserverEntry | null;
+//# sourceMappingURL=useIntersectionObserver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EACpC,OAAO,CAAC,EAAE,wBAAwB,GACjC,yBAAyB,GAAG,IAAI,CAyBlC"}

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect, useState } from "react";
+function useIntersectionObserver(ref, options) {
+    const [entry, setEntry] = useState(null);
+    useEffect(()=>{
+        const element = ref.current;
+        if (void 0 === globalThis.IntersectionObserver || !element) return;
+        const observer = new globalThis.IntersectionObserver(([observerEntry])=>{
+            if (observerEntry) setEntry(observerEntry);
+        }, options);
+        observer.observe(element);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        ref,
+        options?.threshold,
+        options?.root,
+        options?.rootMargin
+    ]);
+    return entry;
+}
+export { useIntersectionObserver };
+
+//# sourceMappingURL=useIntersectionObserver.js.map

package/dist/hooks/useIntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Observes element visibility using the Intersection Observer API.\r\n *\r\n * @remarks\r\n * This hook creates an IntersectionObserver that watches the provided element\r\n * reference and returns the latest `IntersectionObserverEntry`. It's useful\r\n * for implementing lazy loading, infinite scroll, animations on scroll, and\r\n * tracking element visibility.\r\n *\r\n * The observer automatically disconnects when the component unmounts or when\r\n * the element reference changes. The hook is SSR-safe and returns `null` when\r\n * running on the server or when the observer is not yet initialized.\r\n *\r\n * @param ref - A React ref object pointing to the element to observe.\r\n * @param options - Optional IntersectionObserver configuration (threshold, root, rootMargin).\r\n * @returns The latest IntersectionObserverEntry or null if not intersecting yet.\r\n *\r\n * @example\r\n * ```tsx\r\n * function LazyImage({src, alt}: {src: string; alt: string}) {\r\n *   const imageRef = useRef<HTMLImageElement>(null);\r\n *   const entry = useIntersectionObserver(imageRef, {threshold: 0.1});\r\n *\r\n *   return (\r\n *     <img\r\n *       ref={imageRef}\r\n *       src={entry?.isIntersecting ? src : undefined}\r\n *       alt={alt}\r\n *     />\r\n *   );\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * function AnimateOnScroll({children}: {children: React.ReactNode}) {\r\n *   const ref = useRef<HTMLDivElement>(null);\r\n *   const entry = useIntersectionObserver(ref, {threshold: 0.5});\r\n *   const isVisible = entry?.isIntersecting ?? false;\r\n *\r\n *   return (\r\n *     <div ref={ref} className={isVisible ? \"fade-in\" : \"hidden\"}>\r\n *       {children}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useIntersectionObserver(\r\n  ref: React.RefObject<Element | null>,\r\n  options?: IntersectionObserverInit,\r\n): IntersectionObserverEntry | null {\r\n  const [entry, setEntry] = React.useState<IntersectionObserverEntry | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const element = ref.current;\r\n\r\n    // SSR safety: IntersectionObserver is not available on server\r\n    if (typeof globalThis.IntersectionObserver === \"undefined\" || !element) {\r\n      return;\r\n    }\r\n\r\n    const observer = new globalThis.IntersectionObserver(([observerEntry]) => {\r\n      if (observerEntry) {\r\n        setEntry(observerEntry);\r\n      }\r\n    }, options);\r\n\r\n    observer.observe(element);\r\n\r\n    return () => {\r\n      observer.disconnect();\r\n    };\r\n  }, [ref, options?.threshold, options?.root, options?.rootMargin]);\r\n\r\n  return entry;\r\n}\r\n"],"names":["useIntersectionObserver","ref","options","entry","setEntry","React","element","globalThis","observer","observerEntry"],"mappings":";;AAoDO,SAASA,wBACdC,GAAoC,EACpCC,OAAkC;IAElC,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiD;IAE3EA,UAAgB;QACd,MAAMC,UAAUL,IAAI,OAAO;QAG3B,IAAI,AAA2C,WAApCM,WAAW,oBAAoB,IAAoB,CAACD,SAC7D;QAGF,MAAME,WAAW,IAAID,WAAW,oBAAoB,CAAC,CAAC,CAACE,cAAc;YACnE,IAAIA,eACFL,SAASK;QAEb,GAAGP;QAEHM,SAAS,OAAO,CAACF;QAEjB,OAAO;YACLE,SAAS,UAAU;QACrB;IACF,GAAG;QAACP;QAAKC,SAAS;QAAWA,SAAS;QAAMA,SAAS;KAAW;IAEhE,OAAOC;AACT"}

package/dist/hooks/useInterval.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Executes a callback function at specified intervals with automatic cleanup.
+ *
+ * @remarks
+ * This hook provides a declarative interface for `setInterval` that automatically
+ * handles cleanup on unmount and ensures the latest callback is always invoked
+ * (preventing stale closures). Setting the delay to `null` pauses the interval,
+ * which is useful for implementing play/pause functionality.
+ *
+ * Unlike raw `setInterval`, this hook guarantees that the interval is cleared
+ * when the component unmounts or when the delay changes, preventing memory leaks
+ * and unexpected behavior.
+ *
+ * @param callback - The function to execute at each interval.
+ * @param delay - The interval delay in milliseconds, or `null` to pause the interval.
+ *
+ * @example
+ * ```tsx
+ * function Timer() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   useInterval(() => {
+ *     setCount((c) => c + 1);
+ *   }, 1000);
+ *
+ *   return <div>Count: {count}</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function PausableTimer() {
+ *   const [count, setCount] = useState(0);
+ *   const [isRunning, setIsRunning] = useState(true);
+ *
+ *   useInterval(
+ *     () => {
+ *       setCount((c) => c + 1);
+ *     },
+ *     isRunning ? 1000 : null,
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <div>Count: {count}</div>
+ *       <button onClick={() => setIsRunning(!isRunning)}>
+ *         {isRunning ? "Pause" : "Resume"}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useInterval.d.ts.map

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

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

package/dist/hooks/useInterval.js

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

package/dist/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useInterval.js","sources":["../../src/hooks/useInterval.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Executes a callback function at specified intervals with automatic cleanup.\r\n *\r\n * @remarks\r\n * This hook provides a declarative interface for `setInterval` that automatically\r\n * handles cleanup on unmount and ensures the latest callback is always invoked\r\n * (preventing stale closures). Setting the delay to `null` pauses the interval,\r\n * which is useful for implementing play/pause functionality.\r\n *\r\n * Unlike raw `setInterval`, this hook guarantees that the interval is cleared\r\n * when the component unmounts or when the delay changes, preventing memory leaks\r\n * and unexpected behavior.\r\n *\r\n * @param callback - The function to execute at each interval.\r\n * @param delay - The interval delay in milliseconds, or `null` to pause the interval.\r\n *\r\n * @example\r\n * ```tsx\r\n * function Timer() {\r\n *   const [count, setCount] = useState(0);\r\n *\r\n *   useInterval(() => {\r\n *     setCount((c) => c + 1);\r\n *   }, 1000);\r\n *\r\n *   return <div>Count: {count}</div>;\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * function PausableTimer() {\r\n *   const [count, setCount] = useState(0);\r\n *   const [isRunning, setIsRunning] = useState(true);\r\n *\r\n *   useInterval(\r\n *     () => {\r\n *       setCount((c) => c + 1);\r\n *     },\r\n *     isRunning ? 1000 : null,\r\n *   );\r\n *\r\n *   return (\r\n *     <div>\r\n *       <div>Count: {count}</div>\r\n *       <button onClick={() => setIsRunning(!isRunning)}>\r\n *         {isRunning ? \"Pause\" : \"Resume\"}\r\n *       </button>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useInterval(callback: () => void, delay: number | null): void {\r\n  const savedCallback = React.useRef(callback);\r\n\r\n  // Update ref to latest callback on every render to avoid stale closures\r\n  React.useEffect(() => {\r\n    savedCallback.current = callback;\r\n  }, [callback]);\r\n\r\n  React.useEffect(() => {\r\n    // Don't schedule if delay is null\r\n    if (delay === null) {\r\n      return;\r\n    }\r\n\r\n    const intervalId = globalThis.setInterval(() => {\r\n      savedCallback.current();\r\n    }, delay);\r\n\r\n    return () => {\r\n      globalThis.clearInterval(intervalId);\r\n    };\r\n  }, [delay]);\r\n}\r\n"],"names":["useInterval","callback","delay","savedCallback","React","intervalId","globalThis"],"mappings":";;AAyDO,SAASA,YAAYC,QAAoB,EAAEC,KAAoB;IACpE,MAAMC,gBAAgBC,OAAaH;IAGnCG,UAAgB;QACdD,cAAc,OAAO,GAAGF;IAC1B,GAAG;QAACA;KAAS;IAEbG,UAAgB;QAEd,IAAIF,AAAU,SAAVA,OACF;QAGF,MAAMG,aAAaC,WAAW,WAAW,CAAC;YACxCH,cAAc,OAAO;QACvB,GAAGD;QAEH,OAAO;YACLI,WAAW,aAAa,CAACD;QAC3B;IACF,GAAG;QAACH;KAAM;AACZ"}

package/dist/hooks/useIsMobile.d.ts

@@ -1,20 +1,14 @@
 /**
  * A custom React hook that detects whether the current device is a mobile device
- * based on the screen width.
- * This hook uses a media query to check if the viewport width is less than the defined
- * mobile breakpoint (768px). It updates the state when the window size changes.
- * @returns Returns true if the viewport width is less than the mobile breakpoint,
- * false otherwise.
+ * based on the screen width (viewport < 768px).
+ *
+ * @returns `true` if the viewport width is less than 768px, `false` otherwise.
+ *
  * @example
  * ```tsx
  * function MyComponent() {
  *   const isMobile = useIsMobile();
- *
- *   return (
- *     <div>
- *       {isMobile ? 'Mobile View' : 'Desktop View'}
- *     </div>
- *   );
+ *   return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;
  * }
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}
+{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC"}

package/dist/hooks/useIsMobile.js

@@ -1,18 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
-const MOBILE_BREAKPOINT = 768;
+import { useMediaQuery } from "./useMediaQuery.js";
 function useIsMobile() {
-    const [isMobile, setIsMobile] = useState(null);
-    useEffect(()=>{
-        const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = ()=>{
-            setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener("change", onChange);
-        setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-        return ()=>mql.removeEventListener("change", onChange);
-    }, []);
-    return Boolean(isMobile);
+    return useMediaQuery("(max-width: 767px)");
 }
 export { useIsMobile };
 

package/dist/hooks/useIsMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks/useIsMobile.js","sources":["../../src/hooks/useIsMobile.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width.\r\n * This hook uses a media query to check if the viewport width is less than the defined\r\n * mobile breakpoint (768px). It updates the state when the window size changes.\r\n * @returns Returns true if the viewport width is less than the mobile breakpoint,\r\n * false otherwise.\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *\r\n *   return (\r\n *     <div>\r\n *       {isMobile ? 'Mobile View' : 'Desktop View'}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return Boolean(isMobile);\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","globalThis","onChange","Boolean"],"mappings":";;AAGA,MAAMA,oBAAoB;AAsBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAA+B;IAE/DA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAEN,oBAAoB,EAAE,GAAG,CAAC;QAClF,MAAMO,WAAW;YAEfJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC7C;QACAK,IAAI,gBAAgB,CAAC,UAAUE;QAE/BJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC3C,OAAO,IAAMK,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAOC,QAAQN;AACjB"}
+{"version":3,"file":"hooks/useIsMobile.js","sources":["../../src/hooks/useIsMobile.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width (viewport < 768px).\r\n *\r\n * @returns `true` if the viewport width is less than 768px, `false` otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *   return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  return useMediaQuery(\"(max-width: 767px)\");\r\n}\r\n"],"names":["useIsMobile","useMediaQuery"],"mappings":";;AAkBO,SAASA;IACd,OAAOC,cAAc;AACvB"}

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Persists state to localStorage with SSR safety and JSON serialization.
+ *
+ * @remarks
+ * This hook synchronizes state with localStorage, allowing data to persist
+ * across page refreshes and browser sessions. It is SSR-safe and returns the
+ * initial value on the server until hydration completes. The hook also syncs
+ * state across tabs/windows via the `storage` event and handles JSON parse
+ * errors gracefully by falling back to the initial value.
+ *
+ * @typeParam T - The type of the value being stored.
+ * @param key - The localStorage key to store the value under.
+ * @param initialValue - The default value to use if no value is found in localStorage.
+ * @returns A tuple containing the current value and a setter function.
+ *
+ * @example
+ * ```tsx
+ * function UserSettings() {
+ *   const [theme, setTheme] = useLocalStorage("theme", "light");
+ *
+ *   return (
+ *     <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+ *       Toggle theme (current: {theme})
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function ShoppingCart() {
+ *   const [cart, setCart] = useLocalStorage<Product[]>("cart", []);
+ *
+ *   return (
+ *     <button onClick={() => setCart((prev) => [...prev, newProduct])}>
+ *       Add to cart ({cart.length} items)
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void];
+//# sourceMappingURL=useLocalStorage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../src/hooks/useLocalStorage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAiE3G"}

package/dist/hooks/useLocalStorage.js

@@ -0,0 +1,53 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+function useLocalStorage(key, initialValue) {
+    const [storedValue, setStoredValue] = useState(()=>{
+        if (void 0 === globalThis.window) return initialValue;
+        try {
+            const item = globalThis.window.localStorage.getItem(key);
+            return null !== item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error(`Error reading localStorage key "${key}":`, error);
+            return initialValue;
+        }
+    });
+    const setValue = useCallback((value)=>{
+        try {
+            setStoredValue((currentValue)=>{
+                const valueToStore = value instanceof Function ? value(currentValue) : value;
+                if (void 0 !== globalThis.window) globalThis.window.localStorage.setItem(key, JSON.stringify(valueToStore));
+                return valueToStore;
+            });
+        } catch (error) {
+            console.error(`Error setting localStorage key "${key}":`, error);
+        }
+    }, [
+        key
+    ]);
+    useEffect(()=>{
+        if (void 0 === globalThis.window) return;
+        const handleStorageChange = (event)=>{
+            if (event.key !== key || event.storageArea !== globalThis.window.localStorage) return;
+            try {
+                const newValue = null !== event.newValue ? JSON.parse(event.newValue) : initialValue;
+                setStoredValue(newValue);
+            } catch (error) {
+                console.error(`Error parsing storage event for key "${key}":`, error);
+            }
+        };
+        globalThis.window.addEventListener("storage", handleStorageChange);
+        return ()=>{
+            globalThis.window.removeEventListener("storage", handleStorageChange);
+        };
+    }, [
+        key,
+        initialValue
+    ]);
+    return [
+        storedValue,
+        setValue
+    ];
+}
+export { useLocalStorage };
+
+//# sourceMappingURL=useLocalStorage.js.map

package/dist/hooks/useLocalStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useLocalStorage.js","sources":["../../src/hooks/useLocalStorage.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Persists state to localStorage with SSR safety and JSON serialization.\r\n *\r\n * @remarks\r\n * This hook synchronizes state with localStorage, allowing data to persist\r\n * across page refreshes and browser sessions. It is SSR-safe and returns the\r\n * initial value on the server until hydration completes. The hook also syncs\r\n * state across tabs/windows via the `storage` event and handles JSON parse\r\n * errors gracefully by falling back to the initial value.\r\n *\r\n * @typeParam T - The type of the value being stored.\r\n * @param key - The localStorage key to store the value under.\r\n * @param initialValue - The default value to use if no value is found in localStorage.\r\n * @returns A tuple containing the current value and a setter function.\r\n *\r\n * @example\r\n * ```tsx\r\n * function UserSettings() {\r\n *   const [theme, setTheme] = useLocalStorage(\"theme\", \"light\");\r\n *\r\n *   return (\r\n *     <button onClick={() => setTheme(theme === \"light\" ? \"dark\" : \"light\")}>\r\n *       Toggle theme (current: {theme})\r\n *     </button>\r\n *   );\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * function ShoppingCart() {\r\n *   const [cart, setCart] = useLocalStorage<Product[]>(\"cart\", []);\r\n *\r\n *   return (\r\n *     <button onClick={() => setCart((prev) => [...prev, newProduct])}>\r\n *       Add to cart ({cart.length} items)\r\n *     </button>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {\r\n  const [storedValue, setStoredValue] = React.useState<T>(() => {\r\n    // SSR safety: return initial value on server\r\n    if (typeof globalThis.window === \"undefined\") {\r\n      return initialValue;\r\n    }\r\n\r\n    try {\r\n      const item = globalThis.window.localStorage.getItem(key);\r\n\r\n      return item !== null ? (JSON.parse(item) as T) : initialValue;\r\n    } catch (error) {\r\n      console.error(`Error reading localStorage key \"${key}\":`, error);\r\n\r\n      return initialValue;\r\n    }\r\n  });\r\n\r\n  const setValue = React.useCallback(\r\n    (value: T | ((prev: T) => T)) => {\r\n      try {\r\n        setStoredValue((currentValue) => {\r\n          const valueToStore = value instanceof Function ? value(currentValue) : value;\r\n\r\n          if (typeof globalThis.window !== \"undefined\") {\r\n            globalThis.window.localStorage.setItem(key, JSON.stringify(valueToStore));\r\n          }\r\n\r\n          return valueToStore;\r\n        });\r\n      } catch (error) {\r\n        console.error(`Error setting localStorage key \"${key}\":`, error);\r\n      }\r\n    },\r\n    [key],\r\n  );\r\n\r\n  React.useEffect(() => {\r\n    // SSR safety: window is not available on server\r\n    if (typeof globalThis.window === \"undefined\") {\r\n      return;\r\n    }\r\n\r\n    const handleStorageChange = (event: StorageEvent) => {\r\n      if (event.key !== key || event.storageArea !== globalThis.window.localStorage) {\r\n        return;\r\n      }\r\n\r\n      try {\r\n        const newValue = event.newValue !== null ? (JSON.parse(event.newValue) as T) : initialValue;\r\n\r\n        setStoredValue(newValue);\r\n      } catch (error) {\r\n        console.error(`Error parsing storage event for key \"${key}\":`, error);\r\n      }\r\n    };\r\n\r\n    globalThis.window.addEventListener(\"storage\", handleStorageChange);\r\n\r\n    return () => {\r\n      globalThis.window.removeEventListener(\"storage\", handleStorageChange);\r\n    };\r\n  }, [key, initialValue]);\r\n\r\n  return [storedValue, setValue];\r\n}\r\n"],"names":["useLocalStorage","key","initialValue","storedValue","setStoredValue","React","globalThis","item","JSON","error","console","setValue","value","currentValue","valueToStore","Function","handleStorageChange","event","newValue"],"mappings":";;AA6CO,SAASA,gBAAmBC,GAAW,EAAEC,YAAe;IAC7D,MAAM,CAACC,aAAaC,eAAe,GAAGC,SAAkB;QAEtD,IAAI,AAA6B,WAAtBC,WAAW,MAAM,EAC1B,OAAOJ;QAGT,IAAI;YACF,MAAMK,OAAOD,WAAW,MAAM,CAAC,YAAY,CAAC,OAAO,CAACL;YAEpD,OAAOM,AAAS,SAATA,OAAiBC,KAAK,KAAK,CAACD,QAAcL;QACnD,EAAE,OAAOO,OAAO;YACdC,QAAQ,KAAK,CAAC,CAAC,gCAAgC,EAAET,IAAI,EAAE,CAAC,EAAEQ;YAE1D,OAAOP;QACT;IACF;IAEA,MAAMS,WAAWN,YACf,CAACO;QACC,IAAI;YACFR,eAAe,CAACS;gBACd,MAAMC,eAAeF,iBAAiBG,WAAWH,MAAMC,gBAAgBD;gBAEvE,IAAI,AAA6B,WAAtBN,WAAW,MAAM,EAC1BA,WAAW,MAAM,CAAC,YAAY,CAAC,OAAO,CAACL,KAAKO,KAAK,SAAS,CAACM;gBAG7D,OAAOA;YACT;QACF,EAAE,OAAOL,OAAO;YACdC,QAAQ,KAAK,CAAC,CAAC,gCAAgC,EAAET,IAAI,EAAE,CAAC,EAAEQ;QAC5D;IACF,GACA;QAACR;KAAI;IAGPI,UAAgB;QAEd,IAAI,AAA6B,WAAtBC,WAAW,MAAM,EAC1B;QAGF,MAAMU,sBAAsB,CAACC;YAC3B,IAAIA,MAAM,GAAG,KAAKhB,OAAOgB,MAAM,WAAW,KAAKX,WAAW,MAAM,CAAC,YAAY,EAC3E;YAGF,IAAI;gBACF,MAAMY,WAAWD,AAAmB,SAAnBA,MAAM,QAAQ,GAAaT,KAAK,KAAK,CAACS,MAAM,QAAQ,IAAUf;gBAE/EE,eAAec;YACjB,EAAE,OAAOT,OAAO;gBACdC,QAAQ,KAAK,CAAC,CAAC,qCAAqC,EAAET,IAAI,EAAE,CAAC,EAAEQ;YACjE;QACF;QAEAH,WAAW,MAAM,CAAC,gBAAgB,CAAC,WAAWU;QAE9C,OAAO;YACLV,WAAW,MAAM,CAAC,mBAAmB,CAAC,WAAWU;QACnD;IACF,GAAG;QAACf;QAAKC;KAAa;IAEtB,OAAO;QAACC;QAAaQ;KAAS;AAChC"}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Subscribes to a CSS media query and returns whether it currently matches.
+ * SSR-safe — returns `false` on the server until hydration.
+ *
+ * @param query - A valid CSS media query string (e.g. `"(min-width: 768px)"`).
+ * @returns `true` when the media query matches, `false` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const isWide = useMediaQuery("(min-width: 1024px)");
+ * ```
+ */
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAiBpD"}

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useState } from "react";
+function useMediaQuery(query) {
+    const [matches, setMatches] = useState(false);
+    useEffect(()=>{
+        const mql = globalThis.window.matchMedia(query);
+        const onChange = (event)=>{
+            setMatches(event.matches);
+        };
+        setMatches(mql.matches);
+        mql.addEventListener("change", onChange);
+        return ()=>mql.removeEventListener("change", onChange);
+    }, [
+        query
+    ]);
+    return matches;
+}
+export { useMediaQuery };
+
+//# sourceMappingURL=useMediaQuery.js.map

package/dist/hooks/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useMediaQuery.js","sources":["../../src/hooks/useMediaQuery.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Subscribes to a CSS media query and returns whether it currently matches.\r\n * SSR-safe — returns `false` on the server until hydration.\r\n *\r\n * @param query - A valid CSS media query string (e.g. `\"(min-width: 768px)\"`).\r\n * @returns `true` when the media query matches, `false` otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * const isWide = useMediaQuery(\"(min-width: 1024px)\");\r\n * ```\r\n */\r\nexport function useMediaQuery(query: string): boolean {\r\n  const [matches, setMatches] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    const mql = globalThis.window.matchMedia(query);\r\n    const onChange = (event: MediaQueryListEvent) => {\r\n      setMatches(event.matches);\r\n    };\r\n\r\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n    setMatches(mql.matches);\r\n    mql.addEventListener(\"change\", onChange);\r\n\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, [query]);\r\n\r\n  return matches;\r\n}\r\n"],"names":["useMediaQuery","query","matches","setMatches","React","mql","globalThis","onChange","event"],"mappings":";;AAgBO,SAASA,cAAcC,KAAa;IACzC,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAe;IAE7CA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CAACL;QACzC,MAAMM,WAAW,CAACC;YAChBL,WAAWK,MAAM,OAAO;QAC1B;QAGAL,WAAWE,IAAI,OAAO;QACtBA,IAAI,gBAAgB,CAAC,UAAUE;QAE/B,OAAO,IAAMF,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG;QAACN;KAAM;IAEV,OAAOC;AACT"}

package/dist/hooks/useMergedRefs.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * Merges multiple refs into a single callback ref.
+ *
+ * @remarks
+ * This hook is essential when you need to attach multiple refs to the same element,
+ * such as combining a forwarded ref with an internal ref for measurements or
+ * imperative operations. All provided refs will receive the same element instance.
+ *
+ * Supports all ref types: callback refs, mutable ref objects, and `null`/`undefined`.
+ *
+ * @typeParam T - The type of the element being referenced.
+ * @param refs - An array of refs to merge. Can include callback refs, ref objects, or undefined.
+ * @returns A callback ref that updates all provided refs.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, forwardedRef) => {
+ *   const internalRef = useRef<HTMLDivElement>(null);
+ *   const mergedRef = useMergedRefs(forwardedRef, internalRef);
+ *
+ *   return <div ref={mergedRef}>Content</div>;
+ * });
+ * ```
+ */
+export declare function useMergedRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
+//# sourceMappingURL=useMergedRefs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useMergedRefs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAmB/F"}

package/dist/hooks/useMergedRefs.js

@@ -0,0 +1,11 @@
+"use client";
+import { useCallback } from "react";
+function useMergedRefs(...refs) {
+    return useCallback((element)=>{
+        for (const ref of refs)if (ref) if ("function" == typeof ref) ref(element);
+        else ref.current = element;
+    }, refs);
+}
+export { useMergedRefs };
+
+//# sourceMappingURL=useMergedRefs.js.map

package/dist/hooks/useMergedRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useMergedRefs.js","sources":["../../src/hooks/useMergedRefs.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Merges multiple refs into a single callback ref.\r\n *\r\n * @remarks\r\n * This hook is essential when you need to attach multiple refs to the same element,\r\n * such as combining a forwarded ref with an internal ref for measurements or\r\n * imperative operations. All provided refs will receive the same element instance.\r\n *\r\n * Supports all ref types: callback refs, mutable ref objects, and `null`/`undefined`.\r\n *\r\n * @typeParam T - The type of the element being referenced.\r\n * @param refs - An array of refs to merge. Can include callback refs, ref objects, or undefined.\r\n * @returns A callback ref that updates all provided refs.\r\n *\r\n * @example\r\n * ```tsx\r\n * const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, forwardedRef) => {\r\n *   const internalRef = useRef<HTMLDivElement>(null);\r\n *   const mergedRef = useMergedRefs(forwardedRef, internalRef);\r\n *\r\n *   return <div ref={mergedRef}>Content</div>;\r\n * });\r\n * ```\r\n */\r\nexport function useMergedRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T> {\r\n  return React.useCallback(\r\n    (element: T | null) => {\r\n      for (const ref of refs) {\r\n        if (!ref) {\r\n          continue;\r\n        }\r\n\r\n        if (typeof ref === \"function\") {\r\n          ref(element);\r\n        } else {\r\n          // Mutable ref object\r\n          (ref as React.MutableRefObject<T | null>).current = element;\r\n        }\r\n      }\r\n    },\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    refs,\r\n  );\r\n}\r\n"],"names":["useMergedRefs","refs","React","element","ref"],"mappings":";;AA4BO,SAASA,cAAiB,GAAGC,IAAqC;IACvE,OAAOC,YACL,CAACC;QACC,KAAK,MAAMC,OAAOH,KAChB,IAAKG,KAIL,IAAI,AAAe,cAAf,OAAOA,KACTA,IAAID;aAGHC,IAAyC,OAAO,GAAGD;IAG1D,GAEAF;AAEJ"}

package/dist/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * Detects clicks or touch events outside a referenced element.
+ *
+ * @remarks
+ * This hook is commonly used for implementing dropdown menus, modals, and popovers
+ * that should close when the user interacts outside their boundaries. It listens
+ * to both mouse and touch events to ensure broad device compatibility.
+ *
+ * The event listeners are automatically cleaned up when the component unmounts.
+ *
+ * @param ref - A ref object pointing to the element to monitor.
+ * @param handler - Callback invoked when a click or touch occurs outside the element.
+ *
+ * @example
+ * ```tsx
+ * function Dropdown() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const dropdownRef = useRef<HTMLDivElement>(null);
+ *
+ *   useOnClickOutside(dropdownRef, () => setIsOpen(false));
+ *
+ *   return (
+ *     <div ref={dropdownRef}>
+ *       {isOpen && <DropdownMenu />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnClickOutside.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,GAAG,IAAI,CAqBnI"}

package/dist/hooks/useOnClickOutside.js

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect } from "react";
+function useOnClickOutside(ref, handler) {
+    useEffect(()=>{
+        const listener = (event)=>{
+            const element = ref.current;
+            if (!element || element.contains(event.target)) return;
+            handler(event);
+        };
+        globalThis.document.addEventListener("mousedown", listener);
+        globalThis.document.addEventListener("touchstart", listener);
+        return ()=>{
+            globalThis.document.removeEventListener("mousedown", listener);
+            globalThis.document.removeEventListener("touchstart", listener);
+        };
+    }, [
+        ref,
+        handler
+    ]);
+}
+export { useOnClickOutside };
+
+//# sourceMappingURL=useOnClickOutside.js.map

package/dist/hooks/useOnClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useOnClickOutside.js","sources":["../../src/hooks/useOnClickOutside.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Detects clicks or touch events outside a referenced element.\r\n *\r\n * @remarks\r\n * This hook is commonly used for implementing dropdown menus, modals, and popovers\r\n * that should close when the user interacts outside their boundaries. It listens\r\n * to both mouse and touch events to ensure broad device compatibility.\r\n *\r\n * The event listeners are automatically cleaned up when the component unmounts.\r\n *\r\n * @param ref - A ref object pointing to the element to monitor.\r\n * @param handler - Callback invoked when a click or touch occurs outside the element.\r\n *\r\n * @example\r\n * ```tsx\r\n * function Dropdown() {\r\n *   const [isOpen, setIsOpen] = useState(false);\r\n *   const dropdownRef = useRef<HTMLDivElement>(null);\r\n *\r\n *   useOnClickOutside(dropdownRef, () => setIsOpen(false));\r\n *\r\n *   return (\r\n *     <div ref={dropdownRef}>\r\n *       {isOpen && <DropdownMenu />}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void {\r\n  React.useEffect(() => {\r\n    const listener = (event: MouseEvent | TouchEvent) => {\r\n      const element = ref.current;\r\n\r\n      // Do nothing if clicking ref's element or descendent elements\r\n      if (!element || element.contains(event.target as Node)) {\r\n        return;\r\n      }\r\n\r\n      handler(event);\r\n    };\r\n\r\n    globalThis.document.addEventListener(\"mousedown\", listener);\r\n    globalThis.document.addEventListener(\"touchstart\", listener);\r\n\r\n    return () => {\r\n      globalThis.document.removeEventListener(\"mousedown\", listener);\r\n      globalThis.document.removeEventListener(\"touchstart\", listener);\r\n    };\r\n  }, [ref, handler]);\r\n}\r\n"],"names":["useOnClickOutside","ref","handler","React","listener","event","element","globalThis"],"mappings":";;AAiCO,SAASA,kBAAkBC,GAAwC,EAAEC,OAAiD;IAC3HC,UAAgB;QACd,MAAMC,WAAW,CAACC;YAChB,MAAMC,UAAUL,IAAI,OAAO;YAG3B,IAAI,CAACK,WAAWA,QAAQ,QAAQ,CAACD,MAAM,MAAM,GAC3C;YAGFH,QAAQG;QACV;QAEAE,WAAW,QAAQ,CAAC,gBAAgB,CAAC,aAAaH;QAClDG,WAAW,QAAQ,CAAC,gBAAgB,CAAC,cAAcH;QAEnD,OAAO;YACLG,WAAW,QAAQ,CAAC,mBAAmB,CAAC,aAAaH;YACrDG,WAAW,QAAQ,CAAC,mBAAmB,CAAC,cAAcH;QACxD;IACF,GAAG;QAACH;QAAKC;KAAQ;AACnB"}

package/dist/hooks/usePrefersContrast.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns whether the user prefers higher contrast.
+ *
+ * @remarks
+ * Wraps a `prefers-contrast` media query in a semantic accessibility hook so components
+ * can adapt borders, focus states, and surface styling without repeating query strings.
+ *
+ * @returns `true` when `prefers-contrast: more` is active.
+ *
+ * @example
+ * ```tsx
+ * const highContrast = usePrefersContrast();
+ * ```
+ *
+ * @see {@link useMediaQuery} — Shared media-query subscription hook.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast | MDN prefers-contrast}
+ */
+export declare function usePrefersContrast(): boolean;
+//# sourceMappingURL=usePrefersContrast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersContrast.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrefersContrast.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C"}

package/dist/hooks/usePrefersContrast.js

@@ -0,0 +1,8 @@
+"use client";
+import { useMediaQuery } from "./useMediaQuery.js";
+function usePrefersContrast() {
+    return useMediaQuery("(prefers-contrast: more)");
+}
+export { usePrefersContrast };
+
+//# sourceMappingURL=usePrefersContrast.js.map

package/dist/hooks/usePrefersContrast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/usePrefersContrast.js","sources":["../../src/hooks/usePrefersContrast.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\n/**\r\n * Returns whether the user prefers higher contrast.\r\n *\r\n * @remarks\r\n * Wraps a `prefers-contrast` media query in a semantic accessibility hook so components\r\n * can adapt borders, focus states, and surface styling without repeating query strings.\r\n *\r\n * @returns `true` when `prefers-contrast: more` is active.\r\n *\r\n * @example\r\n * ```tsx\r\n * const highContrast = usePrefersContrast();\r\n * ```\r\n *\r\n * @see {@link useMediaQuery} — Shared media-query subscription hook.\r\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast | MDN prefers-contrast}\r\n */\r\nexport function usePrefersContrast(): boolean {\r\n  return useMediaQuery(\"(prefers-contrast: more)\");\r\n}\r\n"],"names":["usePrefersContrast","useMediaQuery"],"mappings":";;AAqBO,SAASA;IACd,OAAOC,cAAc;AACvB"}

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Tracks and returns the previous value of a state or prop.
+ *
+ * @remarks
+ * This hook stores the value from the previous render cycle, allowing you to compare
+ * current and previous values. On the initial render, it returns `undefined` since
+ * there is no previous value yet.
+ *
+ * Useful for detecting changes, implementing undo functionality, or creating
+ * animations based on value transitions.
+ *
+ * @typeParam T - The type of the value being tracked.
+ * @param value - The current value to track.
+ * @returns The value from the previous render, or `undefined` on the first render.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const [count, setCount] = useState(0);
+ *   const previousCount = usePrevious(count);
+ *
+ *   return (
+ *     <div>
+ *       <p>Current: {count}</p>
+ *       <p>Previous: {previousCount ?? "N/A"}</p>
+ *       <button onClick={() => setCount(count + 1)}>Increment</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T | undefined;
+//# sourceMappingURL=usePrevious.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrevious.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAQtD"}

package/dist/hooks/usePrevious.js

@@ -0,0 +1,14 @@
+"use client";
+import { useEffect, useRef } from "react";
+function usePrevious(value) {
+    const ref = useRef(void 0);
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+}
+export { usePrevious };
+
+//# sourceMappingURL=usePrevious.js.map

package/dist/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/usePrevious.js","sources":["../../src/hooks/usePrevious.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Tracks and returns the previous value of a state or prop.\r\n *\r\n * @remarks\r\n * This hook stores the value from the previous render cycle, allowing you to compare\r\n * current and previous values. On the initial render, it returns `undefined` since\r\n * there is no previous value yet.\r\n *\r\n * Useful for detecting changes, implementing undo functionality, or creating\r\n * animations based on value transitions.\r\n *\r\n * @typeParam T - The type of the value being tracked.\r\n * @param value - The current value to track.\r\n * @returns The value from the previous render, or `undefined` on the first render.\r\n *\r\n * @example\r\n * ```tsx\r\n * function Counter() {\r\n *   const [count, setCount] = useState(0);\r\n *   const previousCount = usePrevious(count);\r\n *\r\n *   return (\r\n *     <div>\r\n *       <p>Current: {count}</p>\r\n *       <p>Previous: {previousCount ?? \"N/A\"}</p>\r\n *       <button onClick={() => setCount(count + 1)}>Increment</button>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function usePrevious<T>(value: T): T | undefined {\r\n  const ref = React.useRef<T | undefined>(undefined);\r\n\r\n  React.useEffect(() => {\r\n    ref.current = value;\r\n  }, [value]);\r\n\r\n  return ref.current;\r\n}\r\n"],"names":["usePrevious","value","ref","React","undefined"],"mappings":";;AAmCO,SAASA,YAAeC,KAAQ;IACrC,MAAMC,MAAMC,OAA4BC;IAExCD,UAAgB;QACdD,IAAI,OAAO,GAAGD;IAChB,GAAG;QAACA;KAAM;IAEV,OAAOC,IAAI,OAAO;AACpB"}