@arolariu/components 1.0.0 → 1.1.0

package/dist/hooks/useClipboard.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Options for the `useClipboard` hook.
+ */
+export interface UseClipboardOptions {
+    /**
+     * The duration in milliseconds after which the `copied` state resets to `false`.
+     *
+     * @defaultValue 2000
+     */
+    timeout?: number;
+}
+/**
+ * Return type for the `useClipboard` hook.
+ */
+export interface UseClipboardReturn {
+    /**
+     * Whether the text was successfully copied to the clipboard.
+     */
+    copied: boolean;
+    /**
+     * Copies the provided text to the clipboard.
+     *
+     * @param text - The text to copy.
+     * @returns A promise that resolves when the copy operation completes.
+     */
+    copy: (text: string) => Promise<void>;
+    /**
+     * The error that occurred during the copy operation, or `null` if no error occurred.
+     */
+    error: Error | null;
+}
+/**
+ * Copies text to the clipboard with success/error state management.
+ *
+ * @remarks
+ * This hook provides a simple interface for copying text to the clipboard using
+ * the Clipboard API. It manages the `copied` state that automatically resets
+ * after a configurable timeout, and handles errors gracefully when the Clipboard
+ * API is unavailable or the operation fails.
+ *
+ * The hook is SSR-safe and will handle the case where `navigator.clipboard` is
+ * not available (e.g., in non-secure contexts or older browsers).
+ *
+ * @param options - Configuration options for the hook.
+ * @returns An object containing the copied state, copy function, and any error.
+ *
+ * @example
+ * ```tsx
+ * function CopyButton({textToCopy}: {textToCopy: string}) {
+ *   const {copied, copy, error} = useClipboard({timeout: 3000});
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => copy(textToCopy)}>
+ *         {copied ? "Copied!" : "Copy to clipboard"}
+ *       </button>
+ *       {error && <span>Failed to copy: {error.message}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function ShareLink({url}: {url: string}) {
+ *   const {copied, copy} = useClipboard();
+ *
+ *   return (
+ *     <button onClick={() => copy(url)} disabled={copied}>
+ *       {copied ? "✓ Copied" : "Share link"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
+//# sourceMappingURL=useClipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useClipboard.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEtC;;OAEG;IACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CAqDlF"}

package/dist/hooks/useClipboard.js

@@ -0,0 +1,42 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useClipboard(options = {}) {
+    const { timeout = 2000 } = options;
+    const [copied, setCopied] = useState(false);
+    const [error, setError] = useState(null);
+    const timeoutRef = useRef(null);
+    const copy = useCallback(async (text)=>{
+        if (null !== timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setError(null);
+        try {
+            if (void 0 === globalThis.navigator || !globalThis.navigator.clipboard) throw new Error("Clipboard API is not available");
+            await globalThis.navigator.clipboard.writeText(text);
+            setCopied(true);
+            timeoutRef.current = setTimeout(()=>{
+                setCopied(false);
+                timeoutRef.current = null;
+            }, timeout);
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err : new Error("Failed to copy to clipboard");
+            setError(errorMessage);
+            setCopied(false);
+            console.error("Copy to clipboard failed:", errorMessage);
+        }
+    }, [
+        timeout
+    ]);
+    useEffect(()=>()=>{
+            if (null !== timeoutRef.current) clearTimeout(timeoutRef.current);
+        }, []);
+    return {
+        copied,
+        copy,
+        error
+    };
+}
+export { useClipboard };
+
+//# sourceMappingURL=useClipboard.js.map

package/dist/hooks/useClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useClipboard.js","sources":["../../src/hooks/useClipboard.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Options for the `useClipboard` hook.\r\n */\r\nexport interface UseClipboardOptions {\r\n  /**\r\n   * The duration in milliseconds after which the `copied` state resets to `false`.\r\n   *\r\n   * @defaultValue 2000\r\n   */\r\n  timeout?: number;\r\n}\r\n\r\n/**\r\n * Return type for the `useClipboard` hook.\r\n */\r\nexport interface UseClipboardReturn {\r\n  /**\r\n   * Whether the text was successfully copied to the clipboard.\r\n   */\r\n  copied: boolean;\r\n\r\n  /**\r\n   * Copies the provided text to the clipboard.\r\n   *\r\n   * @param text - The text to copy.\r\n   * @returns A promise that resolves when the copy operation completes.\r\n   */\r\n  copy: (text: string) => Promise<void>;\r\n\r\n  /**\r\n   * The error that occurred during the copy operation, or `null` if no error occurred.\r\n   */\r\n  error: Error | null;\r\n}\r\n\r\n/**\r\n * Copies text to the clipboard with success/error state management.\r\n *\r\n * @remarks\r\n * This hook provides a simple interface for copying text to the clipboard using\r\n * the Clipboard API. It manages the `copied` state that automatically resets\r\n * after a configurable timeout, and handles errors gracefully when the Clipboard\r\n * API is unavailable or the operation fails.\r\n *\r\n * The hook is SSR-safe and will handle the case where `navigator.clipboard` is\r\n * not available (e.g., in non-secure contexts or older browsers).\r\n *\r\n * @param options - Configuration options for the hook.\r\n * @returns An object containing the copied state, copy function, and any error.\r\n *\r\n * @example\r\n * ```tsx\r\n * function CopyButton({textToCopy}: {textToCopy: string}) {\r\n *   const {copied, copy, error} = useClipboard({timeout: 3000});\r\n *\r\n *   return (\r\n *     <div>\r\n *       <button onClick={() => copy(textToCopy)}>\r\n *         {copied ? \"Copied!\" : \"Copy to clipboard\"}\r\n *       </button>\r\n *       {error && <span>Failed to copy: {error.message}</span>}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * function ShareLink({url}: {url: string}) {\r\n *   const {copied, copy} = useClipboard();\r\n *\r\n *   return (\r\n *     <button onClick={() => copy(url)} disabled={copied}>\r\n *       {copied ? \"✓ Copied\" : \"Share link\"}\r\n *     </button>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useClipboard(options: UseClipboardOptions = {}): UseClipboardReturn {\r\n  const {timeout = 2000} = options;\r\n\r\n  const [copied, setCopied] = React.useState(false);\r\n  const [error, setError] = React.useState<Error | null>(null);\r\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\r\n  const copy = React.useCallback(\r\n    async (text: string): Promise<void> => {\r\n      // Clear any existing timeout\r\n      if (timeoutRef.current !== null) {\r\n        clearTimeout(timeoutRef.current);\r\n        timeoutRef.current = null;\r\n      }\r\n\r\n      // Reset error state\r\n      setError(null);\r\n\r\n      try {\r\n        // Check if Clipboard API is available\r\n        if (typeof globalThis.navigator === \"undefined\" || !globalThis.navigator.clipboard) {\r\n          throw new Error(\"Clipboard API is not available\");\r\n        }\r\n\r\n        await globalThis.navigator.clipboard.writeText(text);\r\n        setCopied(true);\r\n\r\n        // Reset copied state after timeout\r\n        timeoutRef.current = setTimeout(() => {\r\n          setCopied(false);\r\n          timeoutRef.current = null;\r\n        }, timeout);\r\n      } catch (err) {\r\n        const errorMessage = err instanceof Error ? err : new Error(\"Failed to copy to clipboard\");\r\n\r\n        setError(errorMessage);\r\n        setCopied(false);\r\n        console.error(\"Copy to clipboard failed:\", errorMessage);\r\n      }\r\n    },\r\n    [timeout],\r\n  );\r\n\r\n  // Cleanup timeout on unmount\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current !== null) {\r\n        clearTimeout(timeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return {copied, copy, error};\r\n}\r\n"],"names":["useClipboard","options","timeout","copied","setCopied","React","error","setError","timeoutRef","copy","text","clearTimeout","globalThis","Error","setTimeout","err","errorMessage","console"],"mappings":";;AAmFO,SAASA,aAAaC,UAA+B,CAAC,CAAC;IAC5D,MAAM,EAACC,UAAU,IAAI,EAAC,GAAGD;IAEzB,MAAM,CAACE,QAAQC,UAAU,GAAGC,SAAe;IAC3C,MAAM,CAACC,OAAOC,SAAS,GAAGF,SAA6B;IACvD,MAAMG,aAAaH,OAAmD;IAEtE,MAAMI,OAAOJ,YACX,OAAOK;QAEL,IAAIF,AAAuB,SAAvBA,WAAW,OAAO,EAAW;YAC/BG,aAAaH,WAAW,OAAO;YAC/BA,WAAW,OAAO,GAAG;QACvB;QAGAD,SAAS;QAET,IAAI;YAEF,IAAI,AAAgC,WAAzBK,WAAW,SAAS,IAAoB,CAACA,WAAW,SAAS,CAAC,SAAS,EAChF,MAAM,IAAIC,MAAM;YAGlB,MAAMD,WAAW,SAAS,CAAC,SAAS,CAAC,SAAS,CAACF;YAC/CN,UAAU;YAGVI,WAAW,OAAO,GAAGM,WAAW;gBAC9BV,UAAU;gBACVI,WAAW,OAAO,GAAG;YACvB,GAAGN;QACL,EAAE,OAAOa,KAAK;YACZ,MAAMC,eAAeD,eAAeF,QAAQE,MAAM,IAAIF,MAAM;YAE5DN,SAASS;YACTZ,UAAU;YACVa,QAAQ,KAAK,CAAC,6BAA6BD;QAC7C;IACF,GACA;QAACd;KAAQ;IAIXG,UAAgB,IACP;YACL,IAAIG,AAAuB,SAAvBA,WAAW,OAAO,EACpBG,aAAaH,WAAW,OAAO;QAEnC,GACC,EAAE;IAEL,OAAO;QAACL;QAAQM;QAAMH;IAAK;AAC7B"}

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Options for configuring controllable state behavior.
+ *
+ * @typeParam T - The type of the state value.
+ */
+export interface UseControllableStateOptions<T> {
+    /**
+     * The controlled value from props. When provided, the component operates in controlled mode.
+     */
+    controlled?: T;
+    /**
+     * The default value used when the component is uncontrolled.
+     */
+    defaultValue: T;
+    /**
+     * Callback fired when the internal state changes in controlled mode.
+     *
+     * @param value - The new state value.
+     */
+    onChange?: (value: T) => void;
+}
+/**
+ * Manages state that can be either controlled or uncontrolled.
+ *
+ * @remarks
+ * This hook enables components to support both controlled and uncontrolled patterns
+ * seamlessly. When a `controlled` value is provided, it takes precedence; otherwise,
+ * the hook manages internal state initialized with `defaultValue`.
+ *
+ * @typeParam T - The type of the state value.
+ * @param options - Configuration object for controllable state.
+ * @returns A tuple containing the current state value and a setter function.
+ *
+ * @example
+ * ```tsx
+ * function CustomInput({value, defaultValue = "", onChange}) {
+ *   const [internalValue, setValue] = useControllableState({
+ *     controlled: value,
+ *     defaultValue,
+ *     onChange,
+ *   });
+ *
+ *   return (
+ *     <input
+ *       type="text"
+ *       value={internalValue}
+ *       onChange={(e) => setValue(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function useControllableState<T>(options: UseControllableStateOptions<T>): [T, (value: T | ((prev: T) => T)) => void];
+//# sourceMappingURL=useControllableState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,WAAW,2BAA2B,CAAC,CAAC;IAC5C;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,CAAC;IACf;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,OAAO,EAAE,2BAA2B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAuB3H"}

package/dist/hooks/useControllableState.js

@@ -0,0 +1,29 @@
+"use client";
+import { useCallback, useState } from "react";
+function useControllableState(options) {
+    const { controlled, defaultValue, onChange } = options;
+    const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+    const isControlled = void 0 !== controlled;
+    const value = isControlled ? controlled : uncontrolledState;
+    const setValue = useCallback((nextValue)=>{
+        if (isControlled) {
+            const resolvedValue = "function" == typeof nextValue ? nextValue(controlled) : nextValue;
+            onChange?.(resolvedValue);
+        } else setUncontrolledState((currentValue)=>{
+            const resolvedValue = "function" == typeof nextValue ? nextValue(currentValue) : nextValue;
+            onChange?.(resolvedValue);
+            return resolvedValue;
+        });
+    }, [
+        isControlled,
+        onChange,
+        controlled
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+export { useControllableState };
+
+//# sourceMappingURL=useControllableState.js.map

package/dist/hooks/useControllableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useControllableState.js","sources":["../../src/hooks/useControllableState.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Options for configuring controllable state behavior.\r\n *\r\n * @typeParam T - The type of the state value.\r\n */\r\nexport interface UseControllableStateOptions<T> {\r\n  /**\r\n   * The controlled value from props. When provided, the component operates in controlled mode.\r\n   */\r\n  controlled?: T;\r\n  /**\r\n   * The default value used when the component is uncontrolled.\r\n   */\r\n  defaultValue: T;\r\n  /**\r\n   * Callback fired when the internal state changes in controlled mode.\r\n   *\r\n   * @param value - The new state value.\r\n   */\r\n  onChange?: (value: T) => void;\r\n}\r\n\r\n/**\r\n * Manages state that can be either controlled or uncontrolled.\r\n *\r\n * @remarks\r\n * This hook enables components to support both controlled and uncontrolled patterns\r\n * seamlessly. When a `controlled` value is provided, it takes precedence; otherwise,\r\n * the hook manages internal state initialized with `defaultValue`.\r\n *\r\n * @typeParam T - The type of the state value.\r\n * @param options - Configuration object for controllable state.\r\n * @returns A tuple containing the current state value and a setter function.\r\n *\r\n * @example\r\n * ```tsx\r\n * function CustomInput({value, defaultValue = \"\", onChange}) {\r\n *   const [internalValue, setValue] = useControllableState({\r\n *     controlled: value,\r\n *     defaultValue,\r\n *     onChange,\r\n *   });\r\n *\r\n *   return (\r\n *     <input\r\n *       type=\"text\"\r\n *       value={internalValue}\r\n *       onChange={(e) => setValue(e.target.value)}\r\n *     />\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useControllableState<T>(options: UseControllableStateOptions<T>): [T, (value: T | ((prev: T) => T)) => void] {\r\n  const {controlled, defaultValue, onChange} = options;\r\n  const [uncontrolledState, setUncontrolledState] = React.useState<T>(defaultValue);\r\n  const isControlled = controlled !== undefined;\r\n  const value = isControlled ? controlled : uncontrolledState;\r\n\r\n  const setValue = React.useCallback(\r\n    (nextValue: T | ((prev: T) => T)) => {\r\n      if (!isControlled) {\r\n        setUncontrolledState((currentValue) => {\r\n          const resolvedValue = typeof nextValue === \"function\" ? (nextValue as (prev: T) => T)(currentValue) : nextValue;\r\n          onChange?.(resolvedValue);\r\n          return resolvedValue;\r\n        });\r\n      } else {\r\n        const resolvedValue = typeof nextValue === \"function\" ? (nextValue as (prev: T) => T)(controlled as T) : nextValue;\r\n        onChange?.(resolvedValue);\r\n      }\r\n    },\r\n    [isControlled, onChange, controlled],\r\n  );\r\n\r\n  return [value, setValue];\r\n}\r\n"],"names":["useControllableState","options","controlled","defaultValue","onChange","uncontrolledState","setUncontrolledState","React","isControlled","undefined","value","setValue","nextValue","resolvedValue","currentValue"],"mappings":";;AAyDO,SAASA,qBAAwBC,OAAuC;IAC7E,MAAM,EAACC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAC,GAAGH;IAC7C,MAAM,CAACI,mBAAmBC,qBAAqB,GAAGC,SAAkBJ;IACpE,MAAMK,eAAeN,AAAeO,WAAfP;IACrB,MAAMQ,QAAQF,eAAeN,aAAaG;IAE1C,MAAMM,WAAWJ,YACf,CAACK;QACC,IAAKJ,cAME;YACL,MAAMK,gBAAgB,AAAqB,cAArB,OAAOD,YAA4BA,UAA6BV,cAAmBU;YACzGR,WAAWS;QACb,OAREP,qBAAqB,CAACQ;YACpB,MAAMD,gBAAgB,AAAqB,cAArB,OAAOD,YAA4BA,UAA6BE,gBAAgBF;YACtGR,WAAWS;YACX,OAAOA;QACT;IAKJ,GACA;QAACL;QAAcJ;QAAUF;KAAW;IAGtC,OAAO;QAACQ;QAAOC;KAAS;AAC1B"}

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Debounces a value, delaying updates until after the specified delay has elapsed.
+ *
+ * @remarks
+ * This hook returns a debounced version of the provided value that only updates
+ * after the value has stopped changing for the specified delay. Useful for optimizing
+ * performance in scenarios like search inputs, where you want to avoid triggering
+ * expensive operations on every keystroke.
+ *
+ * The debounce timer resets on every value change and cleans up automatically on unmount.
+ *
+ * @typeParam T - The type of the value being debounced.
+ * @param value - The value to debounce.
+ * @param delay - The delay in milliseconds before the debounced value updates.
+ * @returns The debounced value.
+ *
+ * @example
+ * ```tsx
+ * function SearchInput() {
+ *   const [searchTerm, setSearchTerm] = useState("");
+ *   const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ *
+ *   useEffect(() => {
+ *     // Expensive search operation
+ *     performSearch(debouncedSearchTerm);
+ *   }, [debouncedSearchTerm]);
+ *
+ *   return <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />;
+ * }
+ * ```
+ */
+export declare function useDebounce<T>(value: T, delay: number): T;
+//# sourceMappingURL=useDebounce.d.ts.map

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

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

package/dist/hooks/useDebounce.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useState } from "react";
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(()=>{
+        const timeoutId = globalThis.setTimeout(()=>{
+            setDebouncedValue(value);
+        }, delay);
+        return ()=>{
+            globalThis.clearTimeout(timeoutId);
+        };
+    }, [
+        value,
+        delay
+    ]);
+    return debouncedValue;
+}
+export { useDebounce };
+
+//# sourceMappingURL=useDebounce.js.map

package/dist/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useDebounce.js","sources":["../../src/hooks/useDebounce.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Debounces a value, delaying updates until after the specified delay has elapsed.\r\n *\r\n * @remarks\r\n * This hook returns a debounced version of the provided value that only updates\r\n * after the value has stopped changing for the specified delay. Useful for optimizing\r\n * performance in scenarios like search inputs, where you want to avoid triggering\r\n * expensive operations on every keystroke.\r\n *\r\n * The debounce timer resets on every value change and cleans up automatically on unmount.\r\n *\r\n * @typeParam T - The type of the value being debounced.\r\n * @param value - The value to debounce.\r\n * @param delay - The delay in milliseconds before the debounced value updates.\r\n * @returns The debounced value.\r\n *\r\n * @example\r\n * ```tsx\r\n * function SearchInput() {\r\n *   const [searchTerm, setSearchTerm] = useState(\"\");\r\n *   const debouncedSearchTerm = useDebounce(searchTerm, 500);\r\n *\r\n *   useEffect(() => {\r\n *     // Expensive search operation\r\n *     performSearch(debouncedSearchTerm);\r\n *   }, [debouncedSearchTerm]);\r\n *\r\n *   return <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />;\r\n * }\r\n * ```\r\n */\r\nexport function useDebounce<T>(value: T, delay: number): T {\r\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);\r\n\r\n  React.useEffect(() => {\r\n    const timeoutId = globalThis.setTimeout(() => {\r\n      setDebouncedValue(value);\r\n    }, delay);\r\n\r\n    return () => {\r\n      globalThis.clearTimeout(timeoutId);\r\n    };\r\n  }, [value, delay]);\r\n\r\n  return debouncedValue;\r\n}\r\n"],"names":["useDebounce","value","delay","debouncedValue","setDebouncedValue","React","timeoutId","globalThis"],"mappings":";;AAmCO,SAASA,YAAeC,KAAQ,EAAEC,KAAa;IACpD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,SAAkBJ;IAE9DI,UAAgB;QACd,MAAMC,YAAYC,WAAW,UAAU,CAAC;YACtCH,kBAAkBH;QACpB,GAAGC;QAEH,OAAO;YACLK,WAAW,YAAY,CAACD;QAC1B;IACF,GAAG;QAACL;QAAOC;KAAM;IAEjB,OAAOC;AACT"}

package/dist/hooks/useEventCallback.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Creates a stable callback reference that always calls the latest version of the provided function.
+ *
+ * @remarks
+ * Unlike `useCallback`, this hook returns a stable function reference that never changes,
+ * but always invokes the most recent version of the callback. This is useful when you need
+ * to pass callbacks to optimized child components or effects without triggering re-renders
+ * when dependencies change.
+ *
+ * The returned function is safe to use in dependency arrays because its identity never changes.
+ *
+ * @typeParam Args - The tuple type of the callback's arguments.
+ * @typeParam Return - The return type of the callback.
+ * @param callback - The function to wrap with a stable reference.
+ * @returns A stable function reference that invokes the latest callback.
+ *
+ * @example
+ * ```tsx
+ * function SearchInput({onSearch}) {
+ *   const [query, setQuery] = useState("");
+ *   // stableOnSearch never changes identity, but always calls the latest onSearch
+ *   const stableOnSearch = useEventCallback(onSearch);
+ *
+ *   useEffect(() => {
+ *     const timer = setTimeout(() => stableOnSearch(query), 500);
+ *     return () => clearTimeout(timer);
+ *   }, [query, stableOnSearch]); // Safe to include in deps
+ *
+ *   return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
+ * }
+ * ```
+ */
+export declare function useEventCallback<Args extends unknown[], Return>(callback: (...args: Args) => Return): (...args: Args) => Return;
+//# sourceMappingURL=useEventCallback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEventCallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventCallback.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,SAAS,OAAO,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,MAAM,CAU/H"}

package/dist/hooks/useEventCallback.js

@@ -0,0 +1,12 @@
+"use client";
+import { useCallback, useLayoutEffect, useRef } from "react";
+function useEventCallback(callback) {
+    const callbackRef = useRef(callback);
+    useLayoutEffect(()=>{
+        callbackRef.current = callback;
+    });
+    return useCallback((...args)=>callbackRef.current(...args), []);
+}
+export { useEventCallback };
+
+//# sourceMappingURL=useEventCallback.js.map

package/dist/hooks/useEventCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useEventCallback.js","sources":["../../src/hooks/useEventCallback.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Creates a stable callback reference that always calls the latest version of the provided function.\r\n *\r\n * @remarks\r\n * Unlike `useCallback`, this hook returns a stable function reference that never changes,\r\n * but always invokes the most recent version of the callback. This is useful when you need\r\n * to pass callbacks to optimized child components or effects without triggering re-renders\r\n * when dependencies change.\r\n *\r\n * The returned function is safe to use in dependency arrays because its identity never changes.\r\n *\r\n * @typeParam Args - The tuple type of the callback's arguments.\r\n * @typeParam Return - The return type of the callback.\r\n * @param callback - The function to wrap with a stable reference.\r\n * @returns A stable function reference that invokes the latest callback.\r\n *\r\n * @example\r\n * ```tsx\r\n * function SearchInput({onSearch}) {\r\n *   const [query, setQuery] = useState(\"\");\r\n *   // stableOnSearch never changes identity, but always calls the latest onSearch\r\n *   const stableOnSearch = useEventCallback(onSearch);\r\n *\r\n *   useEffect(() => {\r\n *     const timer = setTimeout(() => stableOnSearch(query), 500);\r\n *     return () => clearTimeout(timer);\r\n *   }, [query, stableOnSearch]); // Safe to include in deps\r\n *\r\n *   return <input value={query} onChange={(e) => setQuery(e.target.value)} />;\r\n * }\r\n * ```\r\n */\r\nexport function useEventCallback<Args extends unknown[], Return>(callback: (...args: Args) => Return): (...args: Args) => Return {\r\n  const callbackRef = React.useRef(callback);\r\n\r\n  React.useLayoutEffect(() => {\r\n    callbackRef.current = callback;\r\n  });\r\n\r\n  return React.useCallback((...args: Args) => {\r\n    return callbackRef.current(...args);\r\n  }, []);\r\n}\r\n"],"names":["useEventCallback","callback","callbackRef","React","args"],"mappings":";;AAoCO,SAASA,iBAAiDC,QAAmC;IAClG,MAAMC,cAAcC,OAAaF;IAEjCE,gBAAsB;QACpBD,YAAY,OAAO,GAAGD;IACxB;IAEA,OAAOE,YAAkB,CAAC,GAAGC,OACpBF,YAAY,OAAO,IAAIE,OAC7B,EAAE;AACP"}

package/dist/hooks/useId.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Generates a unique, stable identifier that is safe for server-side rendering.
+ *
+ * @remarks
+ * This hook wraps React's `useId` and optionally prepends a custom prefix.
+ * The generated ID remains stable across re-renders and matches between server
+ * and client, making it ideal for associating form labels with inputs or
+ * managing accessible ARIA relationships.
+ *
+ * @param prefix - Optional string to prepend to the generated ID.
+ * @returns A unique identifier string.
+ *
+ * @example
+ * ```tsx
+ * function FormField({label}) {
+ *   const id = useId("field");
+ *
+ *   return (
+ *     <div>
+ *       <label htmlFor={id}>{label}</label>
+ *       <input id={id} type="text" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://react.dev/reference/react/useId | React useId}
+ */
+export declare function useId(prefix?: string): string;
+//# sourceMappingURL=useId.d.ts.map

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

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

package/dist/hooks/useId.js

@@ -0,0 +1,9 @@
+"use client";
+import { useId } from "react";
+function useId_useId(prefix) {
+    const reactId = useId();
+    return prefix ? `${prefix}-${reactId}` : reactId;
+}
+export { useId_useId as useId };
+
+//# sourceMappingURL=useId.js.map

package/dist/hooks/useId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useId.js","sources":["../../src/hooks/useId.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Generates a unique, stable identifier that is safe for server-side rendering.\r\n *\r\n * @remarks\r\n * This hook wraps React's `useId` and optionally prepends a custom prefix.\r\n * The generated ID remains stable across re-renders and matches between server\r\n * and client, making it ideal for associating form labels with inputs or\r\n * managing accessible ARIA relationships.\r\n *\r\n * @param prefix - Optional string to prepend to the generated ID.\r\n * @returns A unique identifier string.\r\n *\r\n * @example\r\n * ```tsx\r\n * function FormField({label}) {\r\n *   const id = useId(\"field\");\r\n *\r\n *   return (\r\n *     <div>\r\n *       <label htmlFor={id}>{label}</label>\r\n *       <input id={id} type=\"text\" />\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n *\r\n * @see {@link https://react.dev/reference/react/useId | React useId}\r\n */\r\nexport function useId(prefix?: string): string {\r\n  const reactId = React.useId();\r\n  return prefix ? `${prefix}-${reactId}` : reactId;\r\n}\r\n"],"names":["useId","prefix","reactId","React"],"mappings":";;AAgCO,SAASA,YAAMC,MAAe;IACnC,MAAMC,UAAUC;IAChB,OAAOF,SAAS,GAAGA,OAAO,CAAC,EAAEC,SAAS,GAAGA;AAC3C"}

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/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"}