@kubit-ui-web/react-components 2.0.0-beta.60 → 2.0.0-beta.63

package/dist/types/lib/hooks/useContentVisibility/types/useContentVisibility.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Represents the container and content elements for visibility detection.
+ */
+export interface ElementsType {
+    /** The container element that wraps the content */
+    container: HTMLElement | null | undefined;
+    /** The content element whose visibility is being monitored */
+    content: HTMLElement | null | undefined;
+}
+/**
+ * Return type for the useContentVisibility hook.
+ */
+export interface UseContentVisibilityReturnType {
+    /**
+     * Function to initialize visibility detection for the given container and content elements.
+     * @param elements - Object containing the container and content elements
+     */
+    handleContentVisibility: ({ container, content }: ElementsType) => void;
+}
+/**
+ * Configuration parameters for the useContentVisibility hook.
+ */
+export interface UseContentVisibilityParamsType {
+    /**
+     * Minimum height (in pixels) required for content to be considered visible.
+     * @default 100
+     */
+    minVisibleHeight?: number;
+    /**
+     * Optional callback invoked when content becomes visible.
+     * If not provided, default behavior clears overflow styles on container and content.
+     */
+    onContentVisible?: () => void;
+    /**
+     * Optional callback invoked when content becomes invisible.
+     * If not provided, default behavior sets `overflowY: auto` on container and `overflowY: visible` on content.
+     */
+    onContentInvisible?: () => void;
+}
+//# sourceMappingURL=useContentVisibility.d.ts.map

package/dist/types/lib/hooks/useContentVisibility/types/useContentVisibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentVisibility.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useContentVisibility/types/useContentVisibility.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,mDAAmD;IACnD,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,8DAA8D;IAC9D,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;CACzC;AAED;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,uBAAuB,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;CACzE;AAED;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC"}

package/dist/types/lib/hooks/useContentVisibility/useContentVisibility.d.ts

@@ -0,0 +1,56 @@
+import type { UseContentVisibilityParamsType, UseContentVisibilityReturnType } from './types/useContentVisibility';
+/**
+ * Custom React hook to manage and detect content visibility within a container.
+ * This hook combines visibility detection with automatic overflow management.
+ *
+ * This hook monitors the visibility of content within a container using ResizeObserver
+ * and automatically adjusts overflow styles based on whether the content is visible enough.
+ *
+ * @param params - Configuration options for the hook
+ * @param params.minVisibleHeight - Minimum height (in pixels) required for content to be considered visible. Default: 100
+ * @param params.onContentVisible - Optional callback invoked when content becomes visible
+ * @param params.onContentInvisible - Optional callback invoked when content becomes invisible
+ *
+ * @returns Object containing the `handleContentVisibility` function
+ *
+ * @remarks
+ * **Default Behavior:**
+ * - When content is visible: Both container and content `overflowY` styles are cleared
+ * - When content is invisible: Container gets `overflowY: auto`, content gets `overflowY: visible`
+ *
+ * **Custom Callbacks:**
+ * - Provide `onContentVisible` and `onContentInvisible` to override default behavior
+ * - Callbacks are triggered only when visibility state changes
+ *
+ * **Performance:**
+ * - Uses ResizeObserver API to efficiently monitor size changes
+ * - Automatically cleans up observers when elements are unmounted
+ *
+ * @example
+ * **Basic usage with default overflow management:**
+ * ```tsx
+ * const { handleContentVisibility } = useContentVisibility({
+ *   minVisibleHeight: 150
+ * });
+ *
+ * useEffect(() => {
+ *   const container = containerRef.current;
+ *   const content = contentRef.current;
+ *   if (container && content) {
+ *     handleContentVisibility({ container, content });
+ *   }
+ * }, [handleContentVisibility]);
+ * ```
+ *
+ * @example
+ * **Custom visibility callbacks:**
+ * ```tsx
+ * const { handleContentVisibility } = useContentVisibility({
+ *   minVisibleHeight: 200,
+ *   onContentVisible: () => console.log('Content is now visible'),
+ *   onContentInvisible: () => console.log('Content is now hidden')
+ * });
+ * ```
+ */
+export declare const useContentVisibility: ({ minVisibleHeight, onContentInvisible, onContentVisible, }: UseContentVisibilityParamsType) => UseContentVisibilityReturnType;
+//# sourceMappingURL=useContentVisibility.d.ts.map

package/dist/types/lib/hooks/useContentVisibility/useContentVisibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentVisibility.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useContentVisibility/useContentVisibility.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,8BAA8B,EAC9B,8BAA8B,EAC/B,MAAM,8BAA8B,CAAC;AAItC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,oBAAoB,GAAI,6DAIlC,8BAA8B,KAAG,8BA4FnC,CAAC"}

package/dist/types/lib/hooks/useContentVisibility/utils/contentVisibility.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Determines whether content is visible enough within its container.
+ *
+ * @param params - Configuration object
+ * @param params.container - The container element
+ * @param params.content - The content element to check visibility for
+ * @param params.minVisibleHeight - Minimum height (in pixels) required for content to be considered visible
+ *
+ * @returns `true` if content is visible enough, `false` otherwise
+ *
+ * @remarks
+ * **Logic:**
+ * - If content has vertical scroll: Checks if content's clientHeight >= minVisibleHeight
+ * - If content has no vertical scroll: Checks if there's enough space in container for content + minVisibleHeight
+ */
+export declare const isContentVisibleEnough: ({ container, content, minVisibleHeight, }: {
+    container: HTMLElement;
+    content: HTMLElement;
+    minVisibleHeight: number;
+}) => boolean;
+//# sourceMappingURL=contentVisibility.d.ts.map

package/dist/types/lib/hooks/useContentVisibility/utils/contentVisibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contentVisibility.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useContentVisibility/utils/contentVisibility.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,sBAAsB,GAAI,2CAIpC;IACD,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;CAC1B,KAAG,OAYH,CAAC"}

package/dist/types/lib/hooks/useEscPressed/types/useEscPressed.d.ts

@@ -0,0 +1,7 @@
+export interface useEscPressedParamsType {
+    ref: React.RefObject<HTMLElement | null>;
+    onEscPress: (event: KeyboardEvent) => void;
+    disablePreventDefault?: boolean;
+    disableStopPropagation?: boolean;
+}
+//# sourceMappingURL=useEscPressed.d.ts.map

package/dist/types/lib/hooks/useEscPressed/types/useEscPressed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscPressed.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useEscPressed/types/useEscPressed.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,UAAU,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC"}

package/dist/types/lib/hooks/useEscPressed/useEscPressed.d.ts

@@ -0,0 +1,18 @@
+import type { useEscPressedParamsType } from './types/useEscPressed';
+/**
+ * Custom React hook to handle the `Escape` key press event on a specified element.
+ *
+ * @param disablePreventDefault - A boolean flag to disable the default behavior of the `Escape` key. Defaults to `false`.
+ * @param disableStopPropagation - A boolean flag to disable stopping the propagation of the `Escape` key event. Defaults to `false`.
+ * @param onEscPress - A callback function that is triggered when the `Escape` key is pressed.
+ * @param ref - A React ref object pointing to the target element where the `Escape` key press is detected.
+ *
+ * @returns `void`
+ *
+ * @remarks
+ * - This hook is useful for handling `Escape` key events, such as closing modals, dropdowns, or other interactive components.
+ * - By default, the hook prevents the default behavior of the `Escape` key and stops its propagation. These behaviors can be disabled using the `disablePreventDefault` and `disableStopPropagation` flags.
+ * - The hook attaches a `keydown` event listener to the specified element and cleans it up when the component unmounts or the dependencies change.
+ */
+export declare const useEscPressed: ({ disablePreventDefault, disableStopPropagation, onEscPress, ref, }: useEscPressedParamsType) => void;
+//# sourceMappingURL=useEscPressed.d.ts.map

package/dist/types/lib/hooks/useEscPressed/useEscPressed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscPressed.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useEscPressed/useEscPressed.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,GAAI,qEAK3B,uBAAuB,KAAG,IAqB5B,CAAC"}

package/dist/types/lib/hooks/useManageState/types/useManageState.d.ts

@@ -0,0 +1,9 @@
+import type { StateType } from '../../../types/states/states';
+export interface ParamsType {
+    states?: StateType[];
+    ref?: React.ForwardedRef<HTMLElement> | undefined | null;
+    disabled?: boolean;
+    loading?: boolean;
+    active?: boolean;
+}
+//# sourceMappingURL=useManageState.d.ts.map

package/dist/types/lib/hooks/useManageState/types/useManageState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useManageState.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useManageState/types/useManageState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/types/lib/hooks/useManageState/useManageState.d.ts

@@ -0,0 +1,88 @@
+import type { ParamsType } from './types/useManageState';
+import { type StateType } from '../../types/states/states';
+/**
+ * A custom React hook to manage and track interactive states of an element.
+ *
+ * Provides automatic state management for hover, pressed, active, disabled, and loading states.
+ * Efficiently handles event listeners with proper cleanup and prevents memory leaks.
+ * Implements hover detection that respects device capabilities (touch vs mouse devices).
+ *
+ * @param params - Configuration options for state management
+ * @param params.active - Whether the element should be in an active state (e.g., selected/highlighted)
+ * @param params.disabled - Whether the element should be in a disabled state (non-interactive)
+ * @param params.loading - Whether the element should be in a loading state (pending operation)
+ * @param params.states - Array of states to monitor (e.g., `[STATES.HOVER, STATES.PRESSED]`)
+ * @param params.ref - Optional forwarded ref to expose the internal element reference
+ *
+ * @returns Object containing the current state and ref setter
+ * @returns return.states - The current active state based on priority: loading > disabled > active > pressed > hover > default
+ * @returns return.setRef - Callback ref to attach to the target element for state tracking
+ *
+ * @remarks
+ * **State Priority:**
+ * States are evaluated in priority order: LOADING → DISABLED → ACTIVE → PRESSED → HOVER → DEFAULT
+ *
+ * **Device Detection:**
+ * - Automatically detects hover capability using media queries
+ * - Hover events are not attached on touch-only devices
+ * - Prevents unwanted hover states on mobile devices
+ *
+ * **Performance:**
+ * - Event listeners are only attached for requested states
+ * - Proper cleanup prevents memory leaks
+ * - Uses callback refs for efficient element tracking
+ * - Memoized state calculation prevents unnecessary re-renders
+ *
+ * **Event Handling:**
+ * - Hover: `mouseenter` and `mouseleave` events
+ * - Pressed: `pointerdown`, `pointercancel`, and `pointerup` events
+ * - Window-level `pointerup` ensures pressed state is cleared even when pointer moves outside element
+ *
+ * @example
+ * **Basic button with hover and pressed states:**
+ * ```tsx
+ * const { states, setRef } = useManageState({
+ *   states: [STATES.HOVER, STATES.PRESSED, STATES.DISABLED],
+ *   disabled: isDisabled
+ * });
+ *
+ * <button ref={setRef} className={`button-${states}`}>
+ *   Click me
+ * </button>
+ * ```
+ *
+ * @example
+ * **With forwarded ref:**
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLDivElement>((props, ref) => {
+ *   const { states, setRef } = useManageState({
+ *     ref,
+ *     states: [STATES.HOVER, STATES.ACTIVE],
+ *     active: props.isSelected
+ *   });
+ *
+ *   return <div ref={setRef}>Content</div>;
+ * });
+ * ```
+ *
+ * @example
+ * **Loading state with all interactions:**
+ * ```tsx
+ * const { states, setRef } = useManageState({
+ *   states: Object.values(STATES),
+ *   loading: isLoading,
+ *   disabled: isDisabled,
+ *   active: isActive
+ * });
+ *
+ * // When loading=true, states will be STATES.LOADING regardless of other interactions
+ * ```
+ *
+ * @see {@link STATES} - Available state constants
+ * @see {@link StateType} - State type definitions
+ */
+export declare const useManageState: ({ active, disabled, loading, ref, states, }: ParamsType) => {
+    states: StateType;
+    setRef?: (node: HTMLElement) => void;
+};
+//# sourceMappingURL=useManageState.d.ts.map

package/dist/types/lib/hooks/useManageState/useManageState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useManageState.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useManageState/useManageState.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,eAAO,MAAM,cAAc,GAAI,6CAM5B,UAAU,KAAG;IACd,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CA0GtC,CAAC"}

package/dist/types/lib/hooks/useMediaDevice/types/useActiveBreakpoints.d.ts

@@ -0,0 +1,11 @@
+import type { DeviceBreakpointsType } from '../../../types/breakpoints/breakpoints';
+export interface useActiveBreakpointsReturn {
+    isMobile: boolean;
+    isTablet: boolean;
+    isMobileOrTablet: boolean;
+    isDesktop: boolean;
+    isLargeDesktop: boolean;
+    isOnlyDesktop: boolean;
+    device: DeviceBreakpointsType;
+}
+//# sourceMappingURL=useActiveBreakpoints.d.ts.map

package/dist/types/lib/hooks/useMediaDevice/types/useActiveBreakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveBreakpoints.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useMediaDevice/types/useActiveBreakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;CAC/B"}

package/dist/types/lib/hooks/useMediaDevice/useActiveBreakpoints.d.ts

@@ -0,0 +1,19 @@
+import type { useActiveBreakpointsReturn } from './types/useActiveBreakpoints';
+/**
+ * A custom hook that determines the active device breakpoint and provides
+ * utility flags for common device types such as desktop, large desktop, mobile, and tablet.
+ *
+ * This hook relies on the `useMediaDevice` hook to determine the current device type
+ * and maps it to the corresponding `DeviceBreakpointsType`.
+ *
+ * @returns {useActiveBreakpointsReturn} An object containing:
+ * - `device`: The current device type as determined by `useMediaDevice`.
+ * - `isDesktop`: A boolean indicating if the current device is a desktop.
+ * - `isLargeDesktop`: A boolean indicating if the current device is a large desktop.
+ * - `isMobile`: A boolean indicating if the current device is a mobile device.
+ * - `isTablet`: A boolean indicating if the current device is a tablet.
+ * - `isMobileOrTablet`: A boolean indicating if the current device is either mobile or tablet.
+ *
+ */
+export declare const useActiveBreakpoints: () => useActiveBreakpointsReturn;
+//# sourceMappingURL=useActiveBreakpoints.d.ts.map

package/dist/types/lib/hooks/useMediaDevice/useActiveBreakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveBreakpoints.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useMediaDevice/useActiveBreakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAI/E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,oBAAoB,QAAO,0BAYvC,CAAC"}

package/dist/types/lib/hooks/useMediaDevice/useMediaDevice.d.ts

@@ -0,0 +1,20 @@
+import { type DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
+/**
+ * A custom React hook to determine and track the current media device type (e.g., mobile, tablet, desktop) based on CSS media queries.
+ *
+ * @returns {DeviceBreakpointsType} - The current device type, which can be one of `DEVICE_BREAKPOINTS.MOBILE`, `DEVICE_BREAKPOINTS.TABLET`, or `DEVICE_BREAKPOINTS.DESKTOP`.
+ *
+ * @remarks
+ * - The hook uses the `useStylesContext` to access media query definitions from the application's style provider.
+ * - It initializes the device type based on the current media query matches and updates it dynamically when the viewport changes.
+ * - The hook listens for changes in media query matches using the `addEventListener` method and cleans up listeners on unmount.
+ *
+ * @see {@link DeviceBreakpointsType} for the list of available device types.
+ *
+ * @dependencies
+ * - `useStylesContext`: Provides access to the application's media query definitions.
+ * - `useEffect`: React hook to handle side effects, such as adding and removing event listeners.
+ * - `useState`: React hook to manage the current device type state.
+ */
+export declare const useMediaDevice: () => DeviceBreakpointsType;
+//# sourceMappingURL=useMediaDevice.d.ts.map

package/dist/types/lib/hooks/useMediaDevice/useMediaDevice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaDevice.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useMediaDevice/useMediaDevice.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qCAAqC,CAAC;AAE7C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,QAAO,qBA0DjC,CAAC"}

package/dist/types/lib/hooks/useRoveFocus/types/useRoveFocus.d.ts

@@ -0,0 +1,14 @@
+type keyMoveType = number | ((previous: number, e?: KeyboardEvent) => number) | null;
+export interface UseRoveFocusProps {
+    size: number;
+    keyDownMove?: keyMoveType;
+    keyUpMove?: keyMoveType;
+    keyRightMove?: keyMoveType;
+    keyLeftMove?: keyMoveType;
+    keyTabMove?: keyMoveType;
+    keyPageDownMove?: keyMoveType;
+    keyPageUpMove?: keyMoveType;
+    currentFocusSelected?: number;
+}
+export {};
+//# sourceMappingURL=useRoveFocus.d.ts.map

package/dist/types/lib/hooks/useRoveFocus/types/useRoveFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRoveFocus.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useRoveFocus/types/useRoveFocus.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GACZ,MAAM,GACN,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,MAAM,CAAC,GACjD,IAAI,CAAC;AAET,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B"}

package/dist/types/lib/hooks/useRoveFocus/useRoveFocus.d.ts

@@ -0,0 +1,40 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { UseRoveFocusProps } from './types/useRoveFocus';
+/**
+ * A custom hook that provides keyboard navigation functionality for a list of focusable elements.
+ * It allows users to navigate through the list using various keyboard keys such as arrow keys,
+ * tab, and page navigation keys. The hook supports customizable movement logic for each key.
+ *
+ * @param {UseRoveFocusProps} props - The configuration object for the hook.
+ * @param {number} [props.currentFocusSelected=0] - The index of the initially focused element.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyDownMove=1] -
+ *        The movement logic for the "Arrow Down" key. Can be a number or a custom function.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyUpMove=-1] -
+ *        The movement logic for the "Arrow Up" key. Can be a number or a custom function.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyLeftMove=-1] -
+ *        The movement logic for the "Arrow Left" key. Can be a number or a custom function.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyRightMove=1] -
+ *        The movement logic for the "Arrow Right" key. Can be a number or a custom function.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyTabMove=1] -
+ *        The movement logic for the "Tab" key. Can be a number or a custom function.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyPageDownMove=1] -
+ *        The movement logic for the "Page Down" key. Can be a number or a custom function.
+ * @param {number | ((prevValue: number, e: KeyboardEvent) => number)} [props.keyPageUpMove=-1] -
+ *        The movement logic for the "Page Up" key. Can be a number or a custom function.
+ * @param {number} props.size - The total number of focusable elements in the list.
+ *
+ * @returns {[number, Dispatch<SetStateAction<number>>, React.RefObject<HTMLElement | null>]}
+ *          A tuple containing:
+ *          - `currentFocus`: The index of the currently focused element.
+ *          - `setCurrentFocus`: A state setter function to manually update the focused index.
+ *          - `listEl`: A React ref object to be attached to the container element of the list.
+ *
+ * @remarks
+ * - The hook attaches a `keydown` event listener to the container element (via `listEl`).
+ * - Ensure the container element is focusable (e.g., by adding `tabIndex={0}`).
+ * - The movement logic for each key can be customized by providing a number or a function.
+ * - If a function is provided for movement logic, it receives the previous focus index and the
+ *   keyboard event as arguments.
+ */
+export declare const useRoveFocus: ({ currentFocusSelected, keyDownMove, keyLeftMove, keyPageDownMove, keyPageUpMove, keyRightMove, keyTabMove, keyUpMove, size, }: UseRoveFocusProps) => [number, Dispatch<SetStateAction<number>>, React.RefObject<HTMLElement | null>];
+//# sourceMappingURL=useRoveFocus.d.ts.map

package/dist/types/lib/hooks/useRoveFocus/useRoveFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRoveFocus.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useRoveFocus/useRoveFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,YAAY,GAAI,gIAU1B,iBAAiB,KAAG,CACrB,MAAM,EACN,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,EAChC,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAoJpC,CAAC"}

package/dist/types/lib/hooks/useScrollBlock/types/useScrollBlock.d.ts

@@ -0,0 +1,7 @@
+export interface BlockScrollParamsType {
+    elementsToOmit?: (HTMLElement | null)[];
+}
+export interface ParamsType {
+    elementsToOmit?: (HTMLElement | null)[];
+}
+//# sourceMappingURL=useScrollBlock.d.ts.map

package/dist/types/lib/hooks/useScrollBlock/types/useScrollBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useScrollBlock/types/useScrollBlock.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,cAAc,CAAC,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC;CACzC;AAED,MAAM,WAAW,UAAU;IACzB,cAAc,CAAC,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC;CACzC"}

package/dist/types/lib/hooks/useScrollBlock/useScrollBlock.d.ts

@@ -0,0 +1,24 @@
+import type { BlockScrollParamsType } from './types/useScrollBlock';
+/**
+ * A custom React hook to block and allow scrolling on the document body and specific elements.
+ * This is particularly useful for managing scroll behavior in modals, sidebars, or other UI components
+ * where background scrolling needs to be disabled while allowing specific elements to scroll.
+ *
+ * @returns {Object} An object containing two functions:
+ * - `blockScroll`: Blocks scrolling on the document body and optionally allows scrolling on specific elements.
+ * - `allowScroll`: Restores scrolling on the document body and removes any applied restrictions.
+ *
+ * @example
+ * const { blockScroll, allowScroll } = useScrollBlock();
+ *
+ * // Block scrolling
+ * blockScroll({ elementsToOmit: [modalRef.current] });
+ *
+ * // Allow scrolling
+ * allowScroll();
+ */
+export declare const useScrollBlock: () => {
+    blockScroll: (params?: BlockScrollParamsType) => void;
+    allowScroll: () => void;
+};
+//# sourceMappingURL=useScrollBlock.d.ts.map

package/dist/types/lib/hooks/useScrollBlock/useScrollBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollBlock.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useScrollBlock/useScrollBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAc,MAAM,wBAAwB,CAAC;AAIhF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc,QAAO;IAChC,WAAW,EAAE,CAAC,MAAM,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;CAgKzB,CAAC"}

package/dist/types/lib/hooks/useScrollBlock/utils/useScrollBlock.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const isElementScrollable: (el: Element) => boolean;
+export declare const getFirstScrollableElement: ({ element, parentsToStop, }: {
+    element: Element | null;
+    parentsToStop: (Element | null)[];
+}) => Element | null;
+//# sourceMappingURL=useScrollBlock.utils.d.ts.map

package/dist/types/lib/hooks/useScrollBlock/utils/useScrollBlock.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollBlock.utils.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useScrollBlock/utils/useScrollBlock.utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,GAAI,IAAI,OAAO,KAAG,OAEjD,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,6BAGvC;IACD,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;CACnC,KAAG,OAAO,GAAG,IAUb,CAAC"}

package/dist/types/lib/hooks/useScrollDetection/types/useScrollDetection.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Configuration options for scroll detection.
+ */
+export interface UseScrollDetectionParamsType {
+    /**
+     * If true, automatically focuses the container when scroll is detected.
+     * Focus is applied only once on the first scroll event.
+     * @default false
+     */
+    autoFocus?: boolean;
+}
+/**
+ * Return value from the useScrollDetection hook.
+ */
+export interface UseScrollDetectionReturnType {
+    /**
+     * Handler function to attach to an element ref for scroll detection.
+     * Call this function with the element reference to enable scroll monitoring.
+     */
+    handleScrollDetection: (element: HTMLElement | null | undefined) => void;
+    /**
+     * Indicates whether the monitored element has scrollable content.
+     */
+    hasScroll: boolean;
+}
+//# sourceMappingURL=useScrollDetection.d.ts.map

package/dist/types/lib/hooks/useScrollDetection/types/useScrollDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollDetection.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useScrollDetection/types/useScrollDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,qBAAqB,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IACzE;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB"}

package/dist/types/lib/hooks/useScrollDetection/useScrollDetection.d.ts

@@ -0,0 +1,35 @@
+import type { UseScrollDetectionParamsType, UseScrollDetectionReturnType } from './types/useScrollDetection';
+/**
+ * Custom hook to detect whether an element has scrollable content.
+ *
+ * Monitors an element using ResizeObserver to detect if content overflows and requires scrolling.
+ * Optionally supports automatic focus when scroll is detected for better accessibility.
+ *
+ * @param options - Configuration options for scroll detection
+ * @param options.autoFocus - If true, automatically focuses the container when scroll is first detected
+ * @returns Object containing scroll detection handler and scroll state
+ *
+ * @example
+ * **Basic usage:**
+ * ```tsx
+ * const { handleScrollDetection, hasScroll } = useScrollDetection();
+ *
+ * <div ref={handleScrollDetection}>
+ *   <Content />
+ * </div>
+ * ```
+ *
+ * @example
+ * **With auto focus:**
+ * ```tsx
+ * const { handleScrollDetection, hasScroll } = useScrollDetection({
+ *   autoFocus: true
+ * });
+ *
+ * <div ref={handleScrollDetection} tabIndex={-1}>
+ *   <Modal content />
+ * </div>
+ * ```
+ */
+export declare const useScrollDetection: ({ autoFocus, }?: UseScrollDetectionParamsType) => UseScrollDetectionReturnType;
+//# sourceMappingURL=useScrollDetection.d.ts.map

package/dist/types/lib/hooks/useScrollDetection/useScrollDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollDetection.d.ts","sourceRoot":"","sources":["../../../../../src/lib/hooks/useScrollDetection/useScrollDetection.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,4BAA4B,EAC5B,4BAA4B,EAC7B,MAAM,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,kBAAkB,GAAI,iBAEhC,4BAAiC,KAAG,4BAsCtC,CAAC"}

package/dist/types/lib/hooks/useScrollEffect/types/useScrollEffect.d.ts

@@ -0,0 +1,12 @@
+export interface CustomHookReturnValue {
+    scrollableRef: (node: HTMLElement | null) => void;
+    resizeRef: (node: HTMLElement | null) => void;
+    shadowRef: (node: HTMLElement | null) => void;
+}
+export interface CustomHookProps {
+    shadowStyles?: string;
+    conditional?: boolean;
+    shadowVisible?: number;
+    scrollCallback?: (e: Event) => void;
+}
+//# sourceMappingURL=useScrollEffect.d.ts.map

package/dist/types/lib/hooks/useScrollEffect/types/useScrollEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollEffect.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/hooks/useScrollEffect/types/useScrollEffect.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACrC"}

package/dist/types/lib/hooks/useScrollEffect/useScrollEffect.d.ts

@@ -0,0 +1,88 @@
+import type { CustomHookProps, CustomHookReturnValue } from './types/useScrollEffect';
+/**
+ * A custom React hook that applies dynamic scroll-based effects to elements.
+ *
+ * Provides optimized scroll handling with requestAnimationFrame for smooth animations.
+ * Supports dynamic resizing based on scroll percentage and shadow effects with configurable visibility thresholds.
+ * Automatically handles cleanup of event listeners and animation frames to prevent memory leaks.
+ *
+ * @param props - Configuration options for scroll effects
+ * @param props.conditional - Enable or disable scroll effects (defaults to true)
+ * @param props.scrollCallback - Optional callback triggered on scroll events
+ * @param props.shadowStyles - CSS class names to apply when shadow should be visible (space-separated)
+ * @param props.shadowVisible - Scroll percentage threshold (0-100) at which shadow becomes visible (defaults to 1)
+ *
+ * @returns Object containing ref callbacks for the affected elements
+ * @returns return.scrollableRef - Ref callback for the scrollable container element
+ * @returns return.resizeRef - Ref callback for the element to dynamically resize based on scroll
+ * @returns return.shadowRef - Ref callback for the element where shadow styles are applied
+ *
+ * @remarks
+ * **Performance Optimization:**
+ * - Uses `requestAnimationFrame` to throttle scroll event handling
+ * - Prevents layout thrashing by batching style updates
+ * - Only one animation frame is queued at a time
+ * - Automatically cancels pending frames on cleanup
+ *
+ * **Resize Effect:**
+ * - Captures initial dimensions on mount
+ * - Calculates resize proportionally to scroll percentage
+ * - Applies both width and height transformations
+ * - Uses CSS calc() for smooth transitions
+ * - Proportion limit of 1.25 for maximum resize factor
+ *
+ * **Shadow Effect:**
+ * - Toggles CSS classes based on scroll threshold
+ * - Supports multiple class names (space-separated)
+ * - Only applied when scroll percentage exceeds `shadowVisible`
+ * - Automatically removes classes when scrolling up
+ *
+ * **Memory Management:**
+ * - Proper cleanup of all event listeners
+ * - Cancels pending animation frames
+ * - Nullifies all refs on unmount
+ * - No memory leaks from retained closures
+ *
+ * @example
+ * **Basic header that shrinks on scroll:**
+ * ```tsx
+ * const { resizeRef, scrollableRef, shadowRef } = useScrollEffect({
+ *   conditional: true,
+ *   shadowStyles: 'shadow-visible',
+ *   shadowVisible: 10,
+ * });
+ *
+ * <div ref={scrollableRef} className="content">
+ *   <header ref={resizeRef} className="header">
+ *     Dynamic Header
+ *   </header>
+ *   <main>Content...</main>
+ *   <div ref={shadowRef} className="shadow" />
+ * </div>
+ * ```
+ *
+ * @example
+ * **With scroll callback:**
+ * ```tsx
+ * const { scrollableRef } = useScrollEffect({
+ *   scrollCallback: (e) => {
+ *     console.log('Scrolled to:', e.target.scrollTop);
+ *   },
+ *   shadowStyles: 'elevation-2',
+ *   shadowVisible: 5,
+ * });
+ * ```
+ *
+ * @example
+ * **Conditional effects:**
+ * ```tsx
+ * const { scrollableRef } = useScrollEffect({
+ *   conditional: !isMobile, // Disable on mobile
+ *   shadowStyles: 'has-shadow',
+ * });
+ * ```
+ *
+ * @see {@link scrollPercentage} - Utility function for calculating scroll percentage
+ */
+export declare const useScrollEffect: ({ conditional, scrollCallback, shadowStyles, shadowVisible, }: CustomHookProps) => CustomHookReturnValue;
+//# sourceMappingURL=useScrollEffect.d.ts.map