@arolariu/components 1.0.0 → 2.0.0

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 * as __rspack_external_react from "react";
+function useControllableState(options) {
+    const { controlled, defaultValue, onChange } = options;
+    const [uncontrolledState, setUncontrolledState] = __rspack_external_react.useState(defaultValue);
+    const isControlled = void 0 !== controlled;
+    const value = isControlled ? controlled : uncontrolledState;
+    const setValue = __rspack_external_react.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,wBAAAA,QAAc,CAAIJ;IACpE,MAAMK,eAAeN,AAAeO,WAAfP;IACrB,MAAMQ,QAAQF,eAAeN,aAAaG;IAE1C,MAAMM,WAAWJ,wBAAAA,WAAiB,CAChC,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 * as __rspack_external_react from "react";
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = __rspack_external_react.useState(value);
+    __rspack_external_react.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,wBAAAA,QAAc,CAAIJ;IAE9DI,wBAAAA,SAAe,CAAC;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 * as __rspack_external_react from "react";
+function useEventCallback(callback) {
+    const callbackRef = __rspack_external_react.useRef(callback);
+    __rspack_external_react.useLayoutEffect(()=>{
+        callbackRef.current = callback;
+    });
+    return __rspack_external_react.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,wBAAAA,MAAY,CAACF;IAEjCE,wBAAAA,eAAqB,CAAC;QACpBD,YAAY,OAAO,GAAGD;IACxB;IAEA,OAAOE,wBAAAA,WAAiB,CAAC,CAAC,GAAGC,OACpBF,YAAY,OAAO,IAAIE,OAC7B,EAAE;AACP"}

package/dist/hooks/useFocusManager.js

@@ -1,8 +1,8 @@
 "use client";
-import { useCallback } from "react";
+import * as __rspack_external_react 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(()=>{
+    const getFocusable = __rspack_external_react.useCallback(()=>{
         if (!containerRef.current) return [];
         return [
             ...containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR)
@@ -10,18 +10,18 @@ function useFocusManager(containerRef) {
     }, [
         containerRef
     ]);
-    const focusFirst = useCallback(()=>{
+    const focusFirst = __rspack_external_react.useCallback(()=>{
         getFocusable()[0]?.focus();
     }, [
         getFocusable
     ]);
-    const focusLast = useCallback(()=>{
+    const focusLast = __rspack_external_react.useCallback(()=>{
         const items = getFocusable();
         items.at(-1)?.focus();
     }, [
         getFocusable
     ]);
-    const focusNext = useCallback(()=>{
+    const focusNext = __rspack_external_react.useCallback(()=>{
         const items = getFocusable();
         const current = document.activeElement;
         const index = items.indexOf(current);
@@ -30,7 +30,7 @@ function useFocusManager(containerRef) {
     }, [
         getFocusable
     ]);
-    const focusPrevious = useCallback(()=>{
+    const focusPrevious = __rspack_external_react.useCallback(()=>{
         const items = getFocusable();
         const current = document.activeElement;
         const index = items.indexOf(current);

package/dist/hooks/useFocusManager.js.map

@@ -1 +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"}
+{"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,wBAAAA,WAAiB,CAAC;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,wBAAAA,WAAiB,CAAC;QACnCD,cAAc,CAAC,EAAE,EAAE;IACrB,GAAG;QAACA;KAAa;IAEjB,MAAMI,YAAYH,wBAAAA,WAAiB,CAAC;QAClC,MAAMI,QAAQL;QAEdK,MAAM,EAAE,CAAC,KAAK;IAChB,GAAG;QAACL;KAAa;IAEjB,MAAMM,YAAYL,wBAAAA,WAAiB,CAAC;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,wBAAAA,WAAiB,CAAC;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.js

@@ -1,9 +1,9 @@
 "use client";
-import { useEffect, useMemo, useRef, useState } from "react";
+import * as __rspack_external_react from "react";
 function useFocusVisible() {
-    const [isFocusVisible, setIsFocusVisible] = useState(false);
-    const isKeyboardRef = useRef(false);
-    useEffect(()=>{
+    const [isFocusVisible, setIsFocusVisible] = __rspack_external_react.useState(false);
+    const isKeyboardRef = __rspack_external_react.useRef(false);
+    __rspack_external_react.useEffect(()=>{
         const onKeyDown = ()=>{
             isKeyboardRef.current = true;
         };
@@ -17,7 +17,7 @@ function useFocusVisible() {
             globalThis.document.removeEventListener("pointerdown", onPointerDown, true);
         };
     }, []);
-    const focusProps = useMemo(()=>({
+    const focusProps = __rspack_external_react.useMemo(()=>({
             onFocus: (_event)=>{
                 if (isKeyboardRef.current) setIsFocusVisible(true);
             },

package/dist/hooks/useFocusVisible.js.map

@@ -1 +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"}
+{"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,wBAAAA,QAAc,CAAC;IAC3D,MAAMC,gBAAgBD,wBAAAA,MAAY,CAAC;IAEnCA,wBAAAA,SAAe,CAAC;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,wBAAAA,OAAa,CAC9B,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 * as __rspack_external_react from "react";
+function useId(prefix) {
+    const reactId = __rspack_external_react.useId();
+    return prefix ? `${prefix}-${reactId}` : reactId;
+}
+export { 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,MAAMC,MAAe;IACnC,MAAMC,UAAUC,wBAAAA,KAAW;IAC3B,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 * as __rspack_external_react from "react";
+function useIntersectionObserver(ref, options) {
+    const [entry, setEntry] = __rspack_external_react.useState(null);
+    __rspack_external_react.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,wBAAAA,QAAc,CAAmC;IAE3EA,wBAAAA,SAAe,CAAC;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 * as __rspack_external_react from "react";
+function useInterval(callback, delay) {
+    const savedCallback = __rspack_external_react.useRef(callback);
+    __rspack_external_react.useEffect(()=>{
+        savedCallback.current = callback;
+    }, [
+        callback
+    ]);
+    __rspack_external_react.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,wBAAAA,MAAY,CAACH;IAGnCG,wBAAAA,SAAe,CAAC;QACdD,cAAc,OAAO,GAAGF;IAC1B,GAAG;QAACA;KAAS;IAEbG,wBAAAA,SAAe,CAAC;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"}