@arolariu/components 0.5.0 → 1.1.0

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,16 @@
+"use client";
+import { useMediaQuery } from "./useMediaQuery.js";
+function useBreakpoint() {
+    const is2xl = useMediaQuery("(min-width: 1536px)");
+    const isXl = useMediaQuery("(min-width: 1280px)");
+    const isLg = useMediaQuery("(min-width: 1024px)");
+    const isMd = useMediaQuery("(min-width: 768px)");
+    if (is2xl) return "2xl";
+    if (isXl) return "xl";
+    if (isLg) return "lg";
+    if (isMd) return "md";
+    return "sm";
+}
+export { useBreakpoint };
+
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\nconst BREAKPOINTS = [\r\n  [\"2xl\", \"(min-width: 1536px)\"],\r\n  [\"xl\", \"(min-width: 1280px)\"],\r\n  [\"lg\", \"(min-width: 1024px)\"],\r\n  [\"md\", \"(min-width: 768px)\"],\r\n  [\"sm\", \"(min-width: 640px)\"],\r\n] as const;\r\n\r\ntype Breakpoint = (typeof BREAKPOINTS)[number][0];\r\n\r\n/**\r\n * Returns the name of the current CSS breakpoint based on viewport width.\r\n * Evaluates breakpoints from largest to smallest and returns the first match.\r\n *\r\n * @returns The active breakpoint name: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`, or `\"2xl\"`.\r\n *   Returns `\"sm\"` when no breakpoint matches (viewport narrower than 640px).\r\n *\r\n * @example\r\n * ```tsx\r\n * const bp = useBreakpoint(); // \"lg\" on a 1200px viewport\r\n * ```\r\n */\r\nexport function useBreakpoint(): Breakpoint {\r\n  const is2xl = useMediaQuery(\"(min-width: 1536px)\");\r\n  const isXl = useMediaQuery(\"(min-width: 1280px)\");\r\n  const isLg = useMediaQuery(\"(min-width: 1024px)\");\r\n  const isMd = useMediaQuery(\"(min-width: 768px)\");\r\n\r\n  if (is2xl) return \"2xl\";\r\n  if (isXl) return \"xl\";\r\n  if (isLg) return \"lg\";\r\n  if (isMd) return \"md\";\r\n\r\n  return \"sm\";\r\n}\r\n\r\nexport type {Breakpoint};\r\n"],"names":["useBreakpoint","is2xl","useMediaQuery","isXl","isLg","isMd"],"mappings":";;AA0BO,SAASA;IACd,MAAMC,QAAQC,cAAc;IAC5B,MAAMC,OAAOD,cAAc;IAC3B,MAAME,OAAOF,cAAc;IAC3B,MAAMG,OAAOH,cAAc;IAE3B,IAAID,OAAO,OAAO;IAClB,IAAIE,MAAM,OAAO;IACjB,IAAIC,MAAM,OAAO;IACjB,IAAIC,MAAM,OAAO;IAEjB,OAAO;AACT"}

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/useColorScheme.d.ts

@@ -0,0 +1,14 @@
+type ColorScheme = "light" | "dark";
+/**
+ * Returns the user's system color scheme preference.
+ *
+ * @returns `"dark"` when the system prefers dark mode, `"light"` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const scheme = useColorScheme(); // "dark"
+ * ```
+ */
+export declare function useColorScheme(): ColorScheme;
+export type { ColorScheme };
+//# sourceMappingURL=useColorScheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useColorScheme.tsx"],"names":[],"mappings":"AAIA,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpC;;;;;;;;;GASG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAI5C;AAED,YAAY,EAAC,WAAW,EAAC,CAAC"}

package/dist/hooks/useColorScheme.js

@@ -0,0 +1,9 @@
+"use client";
+import { useMediaQuery } from "./useMediaQuery.js";
+function useColorScheme() {
+    const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+    return prefersDark ? "dark" : "light";
+}
+export { useColorScheme };
+
+//# sourceMappingURL=useColorScheme.js.map

package/dist/hooks/useColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useColorScheme.js","sources":["../../src/hooks/useColorScheme.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\ntype ColorScheme = \"light\" | \"dark\";\r\n\r\n/**\r\n * Returns the user's system color scheme preference.\r\n *\r\n * @returns `\"dark\"` when the system prefers dark mode, `\"light\"` otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * const scheme = useColorScheme(); // \"dark\"\r\n * ```\r\n */\r\nexport function useColorScheme(): ColorScheme {\r\n  const prefersDark = useMediaQuery(\"(prefers-color-scheme: dark)\");\r\n\r\n  return prefersDark ? \"dark\" : \"light\";\r\n}\r\n\r\nexport type {ColorScheme};\r\n"],"names":["useColorScheme","prefersDark","useMediaQuery"],"mappings":";;AAgBO,SAASA;IACd,MAAMC,cAAcC,cAAc;IAElC,OAAOD,cAAc,SAAS;AAChC"}

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/useFocusManager.js

@@ -0,0 +1,51 @@
+"use client";
+import { useCallback } from "react";
+const FOCUSABLE_SELECTOR = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable]';
+function useFocusManager(containerRef) {
+    const getFocusable = useCallback(()=>{
+        if (!containerRef.current) return [];
+        return [
+            ...containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR)
+        ].filter((element)=>!element.hasAttribute("disabled") && element.tabIndex >= 0);
+    }, [
+        containerRef
+    ]);
+    const focusFirst = useCallback(()=>{
+        getFocusable()[0]?.focus();
+    }, [
+        getFocusable
+    ]);
+    const focusLast = useCallback(()=>{
+        const items = getFocusable();
+        items.at(-1)?.focus();
+    }, [
+        getFocusable
+    ]);
+    const focusNext = useCallback(()=>{
+        const items = getFocusable();
+        const current = document.activeElement;
+        const index = items.indexOf(current);
+        const next = items[index + 1] ?? items[0];
+        next?.focus();
+    }, [
+        getFocusable
+    ]);
+    const focusPrevious = useCallback(()=>{
+        const items = getFocusable();
+        const current = document.activeElement;
+        const index = items.indexOf(current);
+        const previous = items[index - 1] ?? items.at(-1);
+        previous?.focus();
+    }, [
+        getFocusable
+    ]);
+    return {
+        focusFirst,
+        focusLast,
+        focusNext,
+        focusPrevious
+    };
+}
+export { useFocusManager };
+
+//# sourceMappingURL=useFocusManager.js.map

package/dist/hooks/useFocusManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useFocusManager.js","sources":["../../src/hooks/useFocusManager.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nconst FOCUSABLE_SELECTOR = [\r\n  \"a[href]\",\r\n  \"button:not(:disabled)\",\r\n  \"input:not(:disabled)\",\r\n  \"select:not(:disabled)\",\r\n  \"textarea:not(:disabled)\",\r\n  '[tabindex]:not([tabindex=\"-1\"])',\r\n  \"[contenteditable]\",\r\n].join(\", \");\r\n\r\n/**\r\n * Represents the focus movement helpers returned by {@link useFocusManager}.\r\n */\r\ninterface FocusManager {\r\n  /**\r\n   * Focuses the first focusable element in the container.\r\n   */\r\n  focusFirst: () => void;\r\n  /**\r\n   * Focuses the last focusable element in the container.\r\n   */\r\n  focusLast: () => void;\r\n  /**\r\n   * Focuses the next focusable element after the currently focused one.\r\n   */\r\n  focusNext: () => void;\r\n  /**\r\n   * Focuses the previous focusable element before the currently focused one.\r\n   */\r\n  focusPrevious: () => void;\r\n}\r\n\r\n/**\r\n * Provides programmatic focus movement helpers for a container element.\r\n *\r\n * @param containerRef - Ref pointing to the container whose focusable descendants should be managed.\r\n * @returns Focus helpers for moving to the first, last, next, or previous focusable descendant.\r\n *\r\n * @example\r\n * ```tsx\r\n * const containerRef = React.useRef<HTMLDivElement>(null);\r\n * const {focusNext, focusPrevious} = useFocusManager(containerRef);\r\n * ```\r\n */\r\nexport function useFocusManager(containerRef: React.RefObject<HTMLElement | null>): FocusManager {\r\n  const getFocusable = React.useCallback((): HTMLElement[] => {\r\n    if (!containerRef.current) {\r\n      return [];\r\n    }\r\n\r\n    return [...containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(\r\n      (element) => !element.hasAttribute(\"disabled\") && element.tabIndex >= 0,\r\n    );\r\n  }, [containerRef]);\r\n\r\n  const focusFirst = React.useCallback(() => {\r\n    getFocusable()[0]?.focus();\r\n  }, [getFocusable]);\r\n\r\n  const focusLast = React.useCallback(() => {\r\n    const items = getFocusable();\r\n\r\n    items.at(-1)?.focus();\r\n  }, [getFocusable]);\r\n\r\n  const focusNext = React.useCallback(() => {\r\n    const items = getFocusable();\r\n    const current = document.activeElement;\r\n    const index = items.indexOf(current as HTMLElement);\r\n    const next = items[index + 1] ?? items[0];\r\n\r\n    next?.focus();\r\n  }, [getFocusable]);\r\n\r\n  const focusPrevious = React.useCallback(() => {\r\n    const items = getFocusable();\r\n    const current = document.activeElement;\r\n    const index = items.indexOf(current as HTMLElement);\r\n    const previous = items[index - 1] ?? items.at(-1);\r\n\r\n    previous?.focus();\r\n  }, [getFocusable]);\r\n\r\n  return {focusFirst, focusLast, focusNext, focusPrevious};\r\n}\r\n"],"names":["FOCUSABLE_SELECTOR","useFocusManager","containerRef","getFocusable","React","element","focusFirst","focusLast","items","focusNext","current","document","index","next","focusPrevious","previous"],"mappings":";;AAIA,MAAMA,qBAAqB;AA4CpB,SAASC,gBAAgBC,YAAiD;IAC/E,MAAMC,eAAeC,YAAkB;QACrC,IAAI,CAACF,aAAa,OAAO,EACvB,OAAO,EAAE;QAGX,OAAO;eAAIA,aAAa,OAAO,CAAC,gBAAgB,CAAcF;SAAoB,CAAC,MAAM,CACvF,CAACK,UAAY,CAACA,QAAQ,YAAY,CAAC,eAAeA,QAAQ,QAAQ,IAAI;IAE1E,GAAG;QAACH;KAAa;IAEjB,MAAMI,aAAaF,YAAkB;QACnCD,cAAc,CAAC,EAAE,EAAE;IACrB,GAAG;QAACA;KAAa;IAEjB,MAAMI,YAAYH,YAAkB;QAClC,MAAMI,QAAQL;QAEdK,MAAM,EAAE,CAAC,KAAK;IAChB,GAAG;QAACL;KAAa;IAEjB,MAAMM,YAAYL,YAAkB;QAClC,MAAMI,QAAQL;QACd,MAAMO,UAAUC,SAAS,aAAa;QACtC,MAAMC,QAAQJ,MAAM,OAAO,CAACE;QAC5B,MAAMG,OAAOL,KAAK,CAACI,QAAQ,EAAE,IAAIJ,KAAK,CAAC,EAAE;QAEzCK,MAAM;IACR,GAAG;QAACV;KAAa;IAEjB,MAAMW,gBAAgBV,YAAkB;QACtC,MAAMI,QAAQL;QACd,MAAMO,UAAUC,SAAS,aAAa;QACtC,MAAMC,QAAQJ,MAAM,OAAO,CAACE;QAC5B,MAAMK,WAAWP,KAAK,CAACI,QAAQ,EAAE,IAAIJ,MAAM,EAAE,CAAC;QAE9CO,UAAU;IACZ,GAAG;QAACZ;KAAa;IAEjB,OAAO;QAACG;QAAYC;QAAWE;QAAWK;IAAa;AACzD"}

package/dist/hooks/useFocusVisible.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+/**
+ * Represents the focus handlers returned by {@link useFocusVisible}.
+ *
+ * @remarks
+ * Spread these handlers onto the interactive element that should respond to keyboard
+ * focus visibility. They coordinate transient focus styling without owning rendering.
+ */
+interface FocusVisibleProps {
+    /**
+     * Called when the target receives focus.
+     */
+    onFocus: (event: React.FocusEvent) => void;
+    /**
+     * Called when the target loses focus.
+     */
+    onBlur: () => void;
+}
+/**
+ * Detects whether the current focus originated from keyboard navigation.
+ *
+ * @remarks
+ * Tracks global keyboard and pointer input so consumers can render focus rings only when
+ * users are tabbing through the interface. This mirrors the intent of `:focus-visible`
+ * while remaining available to JavaScript-driven components and custom states.
+ *
+ * @returns An object containing the current focus-visible state and focus handlers to spread on the target element.
+ *
+ * @example
+ * ```tsx
+ * const {isFocusVisible, focusProps} = useFocusVisible();
+ *
+ * return (
+ *   <button
+ *     type="button"
+ *     {...focusProps}
+ *     className={isFocusVisible ? "ring" : undefined}>
+ *     Click
+ *   </button>
+ * );
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible | MDN :focus-visible}
+ */
+export declare function useFocusVisible(): {
+    isFocusVisible: boolean;
+    focusProps: FocusVisibleProps;
+};
+export {};
+//# sourceMappingURL=useFocusVisible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusVisible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;GAMG;AACH,UAAU,iBAAiB;IACzB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,IAAI;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,iBAAiB,CAAC;CAC/B,CAoCA"}

package/dist/hooks/useFocusVisible.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+function useFocusVisible() {
+    const [isFocusVisible, setIsFocusVisible] = useState(false);
+    const isKeyboardRef = useRef(false);
+    useEffect(()=>{
+        const onKeyDown = ()=>{
+            isKeyboardRef.current = true;
+        };
+        const onPointerDown = ()=>{
+            isKeyboardRef.current = false;
+        };
+        globalThis.document.addEventListener("keydown", onKeyDown, true);
+        globalThis.document.addEventListener("pointerdown", onPointerDown, true);
+        return ()=>{
+            globalThis.document.removeEventListener("keydown", onKeyDown, true);
+            globalThis.document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    }, []);
+    const focusProps = useMemo(()=>({
+            onFocus: (_event)=>{
+                if (isKeyboardRef.current) setIsFocusVisible(true);
+            },
+            onBlur: ()=>{
+                setIsFocusVisible(false);
+            }
+        }), []);
+    return {
+        isFocusVisible,
+        focusProps
+    };
+}
+export { useFocusVisible };
+
+//# sourceMappingURL=useFocusVisible.js.map

package/dist/hooks/useFocusVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useFocusVisible.js","sources":["../../src/hooks/useFocusVisible.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Represents the focus handlers returned by {@link useFocusVisible}.\r\n *\r\n * @remarks\r\n * Spread these handlers onto the interactive element that should respond to keyboard\r\n * focus visibility. They coordinate transient focus styling without owning rendering.\r\n */\r\ninterface FocusVisibleProps {\r\n  /**\r\n   * Called when the target receives focus.\r\n   */\r\n  onFocus: (event: React.FocusEvent) => void;\r\n  /**\r\n   * Called when the target loses focus.\r\n   */\r\n  onBlur: () => void;\r\n}\r\n\r\n/**\r\n * Detects whether the current focus originated from keyboard navigation.\r\n *\r\n * @remarks\r\n * Tracks global keyboard and pointer input so consumers can render focus rings only when\r\n * users are tabbing through the interface. This mirrors the intent of `:focus-visible`\r\n * while remaining available to JavaScript-driven components and custom states.\r\n *\r\n * @returns An object containing the current focus-visible state and focus handlers to spread on the target element.\r\n *\r\n * @example\r\n * ```tsx\r\n * const {isFocusVisible, focusProps} = useFocusVisible();\r\n *\r\n * return (\r\n *   <button\r\n *     type=\"button\"\r\n *     {...focusProps}\r\n *     className={isFocusVisible ? \"ring\" : undefined}>\r\n *     Click\r\n *   </button>\r\n * );\r\n * ```\r\n *\r\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible | MDN :focus-visible}\r\n */\r\nexport function useFocusVisible(): {\r\n  isFocusVisible: boolean;\r\n  focusProps: FocusVisibleProps;\r\n} {\r\n  const [isFocusVisible, setIsFocusVisible] = React.useState(false);\r\n  const isKeyboardRef = React.useRef(false);\r\n\r\n  React.useEffect(() => {\r\n    const onKeyDown = () => {\r\n      isKeyboardRef.current = true;\r\n    };\r\n    const onPointerDown = () => {\r\n      isKeyboardRef.current = false;\r\n    };\r\n\r\n    globalThis.document.addEventListener(\"keydown\", onKeyDown, true);\r\n    globalThis.document.addEventListener(\"pointerdown\", onPointerDown, true);\r\n\r\n    return () => {\r\n      globalThis.document.removeEventListener(\"keydown\", onKeyDown, true);\r\n      globalThis.document.removeEventListener(\"pointerdown\", onPointerDown, true);\r\n    };\r\n  }, []);\r\n\r\n  const focusProps = React.useMemo<FocusVisibleProps>(\r\n    () => ({\r\n      onFocus: (_event: React.FocusEvent) => {\r\n        if (isKeyboardRef.current) {\r\n          setIsFocusVisible(true);\r\n        }\r\n      },\r\n      onBlur: () => {\r\n        setIsFocusVisible(false);\r\n      },\r\n    }),\r\n    [],\r\n  );\r\n\r\n  return {isFocusVisible, focusProps};\r\n}\r\n"],"names":["useFocusVisible","isFocusVisible","setIsFocusVisible","React","isKeyboardRef","onKeyDown","onPointerDown","globalThis","focusProps","_event"],"mappings":";;AAgDO,SAASA;IAId,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,SAAe;IAC3D,MAAMC,gBAAgBD,OAAa;IAEnCA,UAAgB;QACd,MAAME,YAAY;YAChBD,cAAc,OAAO,GAAG;QAC1B;QACA,MAAME,gBAAgB;YACpBF,cAAc,OAAO,GAAG;QAC1B;QAEAG,WAAW,QAAQ,CAAC,gBAAgB,CAAC,WAAWF,WAAW;QAC3DE,WAAW,QAAQ,CAAC,gBAAgB,CAAC,eAAeD,eAAe;QAEnE,OAAO;YACLC,WAAW,QAAQ,CAAC,mBAAmB,CAAC,WAAWF,WAAW;YAC9DE,WAAW,QAAQ,CAAC,mBAAmB,CAAC,eAAeD,eAAe;QACxE;IACF,GAAG,EAAE;IAEL,MAAME,aAAaL,QACjB,IAAO;YACL,SAAS,CAACM;gBACR,IAAIL,cAAc,OAAO,EACvBF,kBAAkB;YAEtB;YACA,QAAQ;gBACNA,kBAAkB;YACpB;QACF,IACA,EAAE;IAGJ,OAAO;QAACD;QAAgBO;IAAU;AACpC"}

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