react-simplikit 0.0.53 → 0.1.0

package/dist/index.mjs

@@ -35,6 +35,23 @@ import { useThrottle } from "./hooks/useThrottle/useThrottle.mjs";
 import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledCallback.mjs";
 import { useTimeout } from "./hooks/useTimeout/useTimeout.mjs";
 import { useToggle } from "./hooks/useToggle/useToggle.mjs";
+import { isServer } from "./mobile/utils/isServer/isServer.mjs";
+import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs";
+import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
+import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs";
+import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs";
+import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
+import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
+import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs";
+import { useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.mjs";
+import { usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.mjs";
+import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
+import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs";
+import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.mjs";
+import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.mjs";
+import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.mjs";
+import { isIOS } from "./mobile/utils/isIOS/isIOS.mjs";
+import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs";
 import { buildContext } from "./utils/buildContext/buildContext.mjs";
 import { mergeProps } from "./utils/mergeProps/mergeProps.mjs";
-export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
+export { ImpressionArea, Separated, SwitchCase, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };

package/dist/mobile/hooks/useAvoidKeyboard/index.d.cts

@@ -0,0 +1,3 @@
+
+import { useAvoidKeyboard } from "./useAvoidKeyboard.cjs";
+export { useAvoidKeyboard };

package/dist/mobile/hooks/useAvoidKeyboard/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useAvoidKeyboard } from "./useAvoidKeyboard.mjs";
+export { useAvoidKeyboard };

package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs

@@ -0,0 +1,75 @@
+"use client";
+const require_useKeyboardHeight = require("../useKeyboardHeight/useKeyboardHeight.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
+/**
+* @description
+* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
+* It returns a CSS style that can be applied to `position: fixed` elements
+* to smoothly move them above the keyboard when it appears.
+*
+* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
+* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
+* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
+* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
+* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+*
+* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
+* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
+*
+* @example
+* function FixedBottomCTA() {
+*   const { style } = useAvoidKeyboard();
+*
+*   return (
+*     <div
+*       style={{
+*         position: 'fixed',
+*         bottom: 0,
+*         left: 0,
+*         right: 0,
+*         ...style,
+*       }}
+*     >
+*       <button>Submit</button>
+*     </div>
+*   );
+* }
+*
+* @example
+* // With safe area bottom offset (e.g., for iPhone home indicator)
+* function FixedBottomCTA() {
+*   const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
+*
+*   return (
+*     <div
+*       style={{
+*         position: 'fixed',
+*         bottom: 0,
+*         left: 0,
+*         right: 0,
+*         ...style,
+*       }}
+*     >
+*       <button>Submit</button>
+*     </div>
+*   );
+* }
+*/
+function useAvoidKeyboard(options = {}) {
+	const { safeAreaBottom = 0, transitionDuration = 200, transitionTimingFunction = "ease-out", immediate = true } = options;
+	const { keyboardHeight } = require_useKeyboardHeight.useKeyboardHeight({ immediate });
+	return { style: (0, react.useMemo)(() => {
+		return {
+			transform: `translateY(${keyboardHeight > 0 ? -(keyboardHeight + safeAreaBottom) : 0}px)`,
+			transition: `transform ${transitionDuration}ms ${transitionTimingFunction}`
+		};
+	}, [
+		keyboardHeight,
+		safeAreaBottom,
+		transitionDuration,
+		transitionTimingFunction
+	]) };
+}
+//#endregion
+exports.useAvoidKeyboard = useAvoidKeyboard;

package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.cts

@@ -0,0 +1,89 @@
+
+import { CSSProperties } from "react";
+//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
+type UseAvoidKeyboardOptions = {
+  /**
+   * Base bottom offset in pixels when keyboard is hidden.
+   * @default 0
+   */
+  safeAreaBottom?: number;
+  /**
+   * Transition duration in milliseconds for smooth animation.
+   * @default 200
+   */
+  transitionDuration?: number;
+  /**
+   * Transition timing function for the animation.
+   * @default 'ease-out'
+   */
+  transitionTimingFunction?: CSSProperties['transitionTimingFunction'];
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+type UseAvoidKeyboardResult = {
+  /**
+   * CSS style object to apply to the fixed bottom element.
+   * Contains transform and transition properties.
+   */
+  style: CSSProperties;
+};
+/**
+ * @description
+ * `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
+ * It returns a CSS style that can be applied to `position: fixed` elements
+ * to smoothly move them above the keyboard when it appears.
+ *
+ * @param {UseAvoidKeyboardOptions} [options] - Configuration options.
+ * @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
+ * @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
+ * @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
+ * @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+ *
+ * @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
+ * - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
+ *
+ * @example
+ * function FixedBottomCTA() {
+ *   const { style } = useAvoidKeyboard();
+ *
+ *   return (
+ *     <div
+ *       style={{
+ *         position: 'fixed',
+ *         bottom: 0,
+ *         left: 0,
+ *         right: 0,
+ *         ...style,
+ *       }}
+ *     >
+ *       <button>Submit</button>
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // With safe area bottom offset (e.g., for iPhone home indicator)
+ * function FixedBottomCTA() {
+ *   const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
+ *
+ *   return (
+ *     <div
+ *       style={{
+ *         position: 'fixed',
+ *         bottom: 0,
+ *         left: 0,
+ *         right: 0,
+ *         ...style,
+ *       }}
+ *     >
+ *       <button>Submit</button>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useAvoidKeyboard(options?: UseAvoidKeyboardOptions): UseAvoidKeyboardResult;
+//#endregion
+export { useAvoidKeyboard };

package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.mts

@@ -0,0 +1,89 @@
+
+import { CSSProperties } from "react";
+//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
+type UseAvoidKeyboardOptions = {
+  /**
+   * Base bottom offset in pixels when keyboard is hidden.
+   * @default 0
+   */
+  safeAreaBottom?: number;
+  /**
+   * Transition duration in milliseconds for smooth animation.
+   * @default 200
+   */
+  transitionDuration?: number;
+  /**
+   * Transition timing function for the animation.
+   * @default 'ease-out'
+   */
+  transitionTimingFunction?: CSSProperties['transitionTimingFunction'];
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+type UseAvoidKeyboardResult = {
+  /**
+   * CSS style object to apply to the fixed bottom element.
+   * Contains transform and transition properties.
+   */
+  style: CSSProperties;
+};
+/**
+ * @description
+ * `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
+ * It returns a CSS style that can be applied to `position: fixed` elements
+ * to smoothly move them above the keyboard when it appears.
+ *
+ * @param {UseAvoidKeyboardOptions} [options] - Configuration options.
+ * @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
+ * @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
+ * @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
+ * @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+ *
+ * @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
+ * - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
+ *
+ * @example
+ * function FixedBottomCTA() {
+ *   const { style } = useAvoidKeyboard();
+ *
+ *   return (
+ *     <div
+ *       style={{
+ *         position: 'fixed',
+ *         bottom: 0,
+ *         left: 0,
+ *         right: 0,
+ *         ...style,
+ *       }}
+ *     >
+ *       <button>Submit</button>
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // With safe area bottom offset (e.g., for iPhone home indicator)
+ * function FixedBottomCTA() {
+ *   const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
+ *
+ *   return (
+ *     <div
+ *       style={{
+ *         position: 'fixed',
+ *         bottom: 0,
+ *         left: 0,
+ *         right: 0,
+ *         ...style,
+ *       }}
+ *     >
+ *       <button>Submit</button>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useAvoidKeyboard(options?: UseAvoidKeyboardOptions): UseAvoidKeyboardResult;
+//#endregion
+export { useAvoidKeyboard };

package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { useKeyboardHeight } from "../useKeyboardHeight/useKeyboardHeight.mjs";
+import { useMemo } from "react";
+//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
+/**
+* @description
+* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
+* It returns a CSS style that can be applied to `position: fixed` elements
+* to smoothly move them above the keyboard when it appears.
+*
+* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
+* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
+* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
+* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
+* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+*
+* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
+* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
+*
+* @example
+* function FixedBottomCTA() {
+*   const { style } = useAvoidKeyboard();
+*
+*   return (
+*     <div
+*       style={{
+*         position: 'fixed',
+*         bottom: 0,
+*         left: 0,
+*         right: 0,
+*         ...style,
+*       }}
+*     >
+*       <button>Submit</button>
+*     </div>
+*   );
+* }
+*
+* @example
+* // With safe area bottom offset (e.g., for iPhone home indicator)
+* function FixedBottomCTA() {
+*   const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
+*
+*   return (
+*     <div
+*       style={{
+*         position: 'fixed',
+*         bottom: 0,
+*         left: 0,
+*         right: 0,
+*         ...style,
+*       }}
+*     >
+*       <button>Submit</button>
+*     </div>
+*   );
+* }
+*/
+function useAvoidKeyboard(options = {}) {
+	const { safeAreaBottom = 0, transitionDuration = 200, transitionTimingFunction = "ease-out", immediate = true } = options;
+	const { keyboardHeight } = useKeyboardHeight({ immediate });
+	return { style: useMemo(() => {
+		return {
+			transform: `translateY(${keyboardHeight > 0 ? -(keyboardHeight + safeAreaBottom) : 0}px)`,
+			transition: `transform ${transitionDuration}ms ${transitionTimingFunction}`
+		};
+	}, [
+		keyboardHeight,
+		safeAreaBottom,
+		transitionDuration,
+		transitionTimingFunction
+	]) };
+}
+//#endregion
+export { useAvoidKeyboard };

package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs

@@ -0,0 +1,47 @@
+"use client";
+const require_disableBodyScrollLock = require("../../utils/disableBodyScrollLock/disableBodyScrollLock.cjs");
+const require_enableBodyScrollLock = require("../../utils/enableBodyScrollLock/enableBodyScrollLock.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.ts
+/**
+* @description
+* `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
+* It automatically locks on mount and unlocks on unmount.
+*
+* **Note:** For multiple overlapping modals, use a single lock at the parent level.
+*
+* @example
+* function Modal() {
+*   useBodyScrollLock();
+*   return <div className="modal">Modal content</div>;
+* }
+*
+* @example
+* // Multiple modals - single lock pattern
+* function BodyScrollLock() {
+*   useBodyScrollLock();
+*   return null;
+* }
+*
+* function App() {
+*   const hasModal = showModal1 || showModal2;
+*
+*   return (
+*     <>
+*       {hasModal && <BodyScrollLock />}
+*       {showModal1 && <Modal1 />}
+*       {showModal2 && <Modal2 />}
+*     </>
+*   );
+* }
+*/
+function useBodyScrollLock() {
+	(0, react.useEffect)(() => {
+		require_enableBodyScrollLock.enableBodyScrollLock();
+		return () => {
+			require_disableBodyScrollLock.disableBodyScrollLock();
+		};
+	}, []);
+}
+//#endregion
+exports.useBodyScrollLock = useBodyScrollLock;

package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.cts

@@ -0,0 +1,37 @@
+
+//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
+/**
+ * @description
+ * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
+ * It automatically locks on mount and unlocks on unmount.
+ *
+ * **Note:** For multiple overlapping modals, use a single lock at the parent level.
+ *
+ * @example
+ * function Modal() {
+ *   useBodyScrollLock();
+ *   return <div className="modal">Modal content</div>;
+ * }
+ *
+ * @example
+ * // Multiple modals - single lock pattern
+ * function BodyScrollLock() {
+ *   useBodyScrollLock();
+ *   return null;
+ * }
+ *
+ * function App() {
+ *   const hasModal = showModal1 || showModal2;
+ *
+ *   return (
+ *     <>
+ *       {hasModal && <BodyScrollLock />}
+ *       {showModal1 && <Modal1 />}
+ *       {showModal2 && <Modal2 />}
+ *     </>
+ *   );
+ * }
+ */
+declare function useBodyScrollLock(): void;
+//#endregion
+export { useBodyScrollLock };

package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.mts

@@ -0,0 +1,37 @@
+
+//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
+/**
+ * @description
+ * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
+ * It automatically locks on mount and unlocks on unmount.
+ *
+ * **Note:** For multiple overlapping modals, use a single lock at the parent level.
+ *
+ * @example
+ * function Modal() {
+ *   useBodyScrollLock();
+ *   return <div className="modal">Modal content</div>;
+ * }
+ *
+ * @example
+ * // Multiple modals - single lock pattern
+ * function BodyScrollLock() {
+ *   useBodyScrollLock();
+ *   return null;
+ * }
+ *
+ * function App() {
+ *   const hasModal = showModal1 || showModal2;
+ *
+ *   return (
+ *     <>
+ *       {hasModal && <BodyScrollLock />}
+ *       {showModal1 && <Modal1 />}
+ *       {showModal2 && <Modal2 />}
+ *     </>
+ *   );
+ * }
+ */
+declare function useBodyScrollLock(): void;
+//#endregion
+export { useBodyScrollLock };

package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { disableBodyScrollLock } from "../../utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
+import { enableBodyScrollLock } from "../../utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
+import { useEffect } from "react";
+//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.ts
+/**
+* @description
+* `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
+* It automatically locks on mount and unlocks on unmount.
+*
+* **Note:** For multiple overlapping modals, use a single lock at the parent level.
+*
+* @example
+* function Modal() {
+*   useBodyScrollLock();
+*   return <div className="modal">Modal content</div>;
+* }
+*
+* @example
+* // Multiple modals - single lock pattern
+* function BodyScrollLock() {
+*   useBodyScrollLock();
+*   return null;
+* }
+*
+* function App() {
+*   const hasModal = showModal1 || showModal2;
+*
+*   return (
+*     <>
+*       {hasModal && <BodyScrollLock />}
+*       {showModal1 && <Modal1 />}
+*       {showModal2 && <Modal2 />}
+*     </>
+*   );
+* }
+*/
+function useBodyScrollLock() {
+	useEffect(() => {
+		enableBodyScrollLock();
+		return () => {
+			disableBodyScrollLock();
+		};
+	}, []);
+}
+//#endregion
+export { useBodyScrollLock };

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs

@@ -0,0 +1,41 @@
+"use client";
+const require_subscribeKeyboardHeight = require("../../utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.ts
+/**
+* @description
+* `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+* It returns the current keyboard height in pixels, which updates automatically
+* when the keyboard appears, disappears, or changes size.
+*
+* @param {UseKeyboardHeightOptions} [options] - Configuration options.
+* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+*
+* @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+* - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+*
+* @example
+* function ChatInput() {
+*   const { keyboardHeight } = useKeyboardHeight();
+*
+*   return (
+*     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+*       <input type="text" placeholder="Type a message..." />
+*     </div>
+*   );
+* }
+*/
+function useKeyboardHeight(options = {}) {
+	const { immediate = true } = options;
+	const [keyboardHeight, setKeyboardHeight] = (0, react.useState)(0);
+	(0, react.useEffect)(function subscribeToKeyboardHeight() {
+		const { unsubscribe } = require_subscribeKeyboardHeight.subscribeKeyboardHeight({
+			callback: setKeyboardHeight,
+			immediate
+		});
+		return unsubscribe;
+	}, [immediate]);
+	return { keyboardHeight };
+}
+//#endregion
+exports.useKeyboardHeight = useKeyboardHeight;

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.cts

@@ -0,0 +1,41 @@
+
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
+type UseKeyboardHeightOptions = {
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+type UseKeyboardHeightResult = {
+  /**
+   * The current keyboard height in pixels.
+   */
+  keyboardHeight: number;
+};
+/**
+ * @description
+ * `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+ * It returns the current keyboard height in pixels, which updates automatically
+ * when the keyboard appears, disappears, or changes size.
+ *
+ * @param {UseKeyboardHeightOptions} [options] - Configuration options.
+ * @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+ *
+ * @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+ * - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+ *
+ * @example
+ * function ChatInput() {
+ *   const { keyboardHeight } = useKeyboardHeight();
+ *
+ *   return (
+ *     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+ *       <input type="text" placeholder="Type a message..." />
+ *     </div>
+ *   );
+ * }
+ */
+declare function useKeyboardHeight(options?: UseKeyboardHeightOptions): UseKeyboardHeightResult;
+//#endregion
+export { useKeyboardHeight };

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.mts

@@ -0,0 +1,41 @@
+
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
+type UseKeyboardHeightOptions = {
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+type UseKeyboardHeightResult = {
+  /**
+   * The current keyboard height in pixels.
+   */
+  keyboardHeight: number;
+};
+/**
+ * @description
+ * `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+ * It returns the current keyboard height in pixels, which updates automatically
+ * when the keyboard appears, disappears, or changes size.
+ *
+ * @param {UseKeyboardHeightOptions} [options] - Configuration options.
+ * @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+ *
+ * @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+ * - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+ *
+ * @example
+ * function ChatInput() {
+ *   const { keyboardHeight } = useKeyboardHeight();
+ *
+ *   return (
+ *     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+ *       <input type="text" placeholder="Type a message..." />
+ *     </div>
+ *   );
+ * }
+ */
+declare function useKeyboardHeight(options?: UseKeyboardHeightOptions): UseKeyboardHeightResult;
+//#endregion
+export { useKeyboardHeight };