@mohasinac/appkit 2.1.1 → 2.2.0

package/dist/react/index.d.cts

@@ -1,788 +0,0 @@
-import React$1, { RefObject, Dispatch, SetStateAction, Component, ReactNode, ErrorInfo } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/**
- * useMediaQuery Hook
- *
- * Detects if a CSS media query matches the current viewport.
- * Returns true/false based on whether the query matches.
- *
- * @param query - CSS media query string (e.g., '(min-width: 768px)')
- * @returns boolean - Whether the media query currently matches
- *
- * @example
- * ```tsx
- * const isMobile = useMediaQuery('(max-width: 767px)');
- * const isDesktop = useMediaQuery('(min-width: 1024px)');
- * ```
- */
-declare function useMediaQuery(query: string): boolean;
-
-/**
- * useBreakpoint Hook
- *
- * Convenience hook for detecting common Tailwind breakpoints.
- * Returns boolean flags and the current breakpoint name.
- *
- * Breakpoints (Tailwind defaults):
- * - Mobile: < 768px
- * - Tablet: 768px - 1023px
- * - Desktop: >= 1024px
- *
- * @returns Object with breakpoint detection flags
- *
- * @example
- * ```tsx
- * const { isMobile, isTablet, isDesktop, breakpoint } = useBreakpoint();
- *
- * if (isMobile) {
- *   return <MobileView />;
- * }
- * return <DesktopView />;
- * ```
- */
-declare function useBreakpoint(): {
-    isMobile: boolean;
-    isTablet: boolean;
-    isDesktop: boolean;
-    breakpoint: "mobile" | "tablet" | "desktop";
-};
-
-/**
- * Configuration options for useClickOutside hook
- */
-interface UseClickOutsideOptions {
-    /** Whether the hook is enabled */
-    enabled?: boolean;
-    /** Event type to listen for (default: 'mousedown') */
-    eventType?: "mousedown" | "mouseup" | "click";
-    /** Refs to additional elements that should be considered "inside" */
-    additionalRefs?: RefObject<HTMLElement | null>[];
-}
-/**
- * useClickOutside Hook
- *
- * Detects clicks outside of specified element(s) and triggers a callback.
- * Commonly used for dropdowns, modals, and popovers.
- *
- * @param ref - Primary element reference
- * @param callback - Function to call when clicking outside
- * @param options - Configuration options
- *
- * @example
- * ```tsx
- * const dropdownRef = useRef<HTMLDivElement>(null);
- * const triggerRef = useRef<HTMLButtonElement>(null);
- *
- * useClickOutside(dropdownRef, () => {
- *   setIsOpen(false);
- * }, {
- *   additionalRefs: [triggerRef],
- *   enabled: isOpen,
- * });
- * ```
- */
-declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, callback: (event: MouseEvent | TouchEvent) => void, options?: UseClickOutsideOptions): void;
-
-/**
- * Key combination modifiers
- */
-interface KeyModifiers {
-    ctrl?: boolean;
-    shift?: boolean;
-    alt?: boolean;
-    meta?: boolean;
-}
-/**
- * Configuration options for useKeyPress hook
- */
-interface UseKeyPressOptions extends KeyModifiers {
-    /** Whether the hook is enabled */
-    enabled?: boolean;
-    /** Event type to listen for (default: 'keydown') */
-    eventType?: "keydown" | "keyup" | "keypress";
-    /** Prevent default behavior */
-    preventDefault?: boolean;
-    /** Target element (default: document) */
-    target?: HTMLElement | Document | Window;
-}
-/**
- * useKeyPress Hook
- *
- * Detects keyboard events with support for key combinations.
- * Useful for keyboard shortcuts and accessibility.
- *
- * @param key - Key or array of keys to listen for (e.g., 'Enter', 'Escape', ['a', 'A'])
- * @param callback - Function to call when key is pressed
- * @param options - Configuration options including modifiers
- *
- * @example
- * ```tsx
- * // Simple key press
- * useKeyPress('Escape', () => closeModal());
- *
- * // Key combination (Ctrl+S)
- * useKeyPress('s', handleSave, {
- *   ctrl: true,
- *   preventDefault: true,
- * });
- *
- * // Multiple keys
- * useKeyPress(['Enter', 'NumpadEnter'], handleSubmit);
- * ```
- */
-declare function useKeyPress(key: string | string[], callback: (event: KeyboardEvent) => void, options?: UseKeyPressOptions): void;
-
-/**
- * useLongPress Hook
- *
- * Fires `callback` after the element is held for `ms` milliseconds.
- * A quick tap (pointer-up before the threshold) does NOT fire the callback.
- * Safe to use on both mouse and touch devices.
- *
- * @param callback - Function to call on long-press
- * @param ms       - Hold duration in ms before callback fires (default: 500)
- *
- * @example
- * ```tsx
- * const longPress = useLongPress(() => openContextMenu(), 500);
- *
- * return (
- *   <tr {...longPress}>…</tr>
- * );
- * ```
- */
-declare function useLongPress(callback: () => void, ms?: number): {
-    onMouseDown: () => void;
-    onMouseUp: () => void;
-    onMouseLeave: () => void;
-    onTouchStart: () => void;
-    onTouchEnd: () => void;
-};
-
-/**
- * Gesture types supported
- */
-type GestureType = "tap" | "doubletap" | "pinch" | "rotate";
-/**
- * Configuration options for useGesture hook
- */
-interface UseGestureOptions {
-    /** Callback for tap gesture */
-    onTap?: (x: number, y: number) => void;
-    /** Callback for double tap gesture */
-    onDoubleTap?: (x: number, y: number) => void;
-    /** Callback for pinch gesture (zoom in/out) */
-    onPinch?: (scale: number, distance: number) => void;
-    /** Callback during pinching */
-    onPinching?: (scale: number) => void;
-    /** Callback for rotation gesture */
-    onRotate?: (angle: number) => void;
-    /** Callback during rotation */
-    onRotating?: (angle: number) => void;
-    /** Maximum time between taps for double tap (ms, default: 300) */
-    doubleTapDelay?: number;
-    /** Maximum movement allowed for tap (px, default: 10) */
-    tapMovementThreshold?: number;
-    /** Prevent default behavior */
-    preventDefault?: boolean;
-}
-/**
- * useGesture Hook
- *
- * Detects various touch gestures including tap, double tap, pinch, and rotate.
- * Primarily designed for touch devices but also works with mouse for basic gestures.
- *
- * @param ref - Reference to the element to attach gesture handlers
- * @param options - Configuration options for gesture detection
- *
- * @example
- * ```tsx
- * const ref = useRef<HTMLDivElement>(null);
- *
- * useGesture(ref, {
- *   onTap: (x, y) => console.log('Tapped at', x, y),
- *   onDoubleTap: () => console.log('Double tapped'),
- *   onPinch: (scale) => console.log('Pinch scale', scale),
- * });
- *
- * return <div ref={ref}>Touch me!</div>;
- * ```
- */
-declare function useGesture<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, options?: UseGestureOptions): void;
-
-/**
- * Swipe direction types
- */
-type SwipeDirection = "left" | "right" | "up" | "down";
-/**
- * Configuration options for useSwipe hook
- */
-interface UseSwipeOptions {
-    /** Minimum distance in pixels to register as a swipe (default: 50) */
-    minSwipeDistance?: number;
-    /** Maximum time in ms for a swipe gesture (default: 300) */
-    maxSwipeTime?: number;
-    /** Threshold for swipe velocity (pixels/ms, default: 0.3) */
-    velocityThreshold?: number;
-    /** Callback when swipe is detected */
-    onSwipe?: (direction: SwipeDirection, distance: number, velocity: number) => void;
-    /** Callback for specific directions */
-    onSwipeLeft?: (distance: number, velocity: number) => void;
-    onSwipeRight?: (distance: number, velocity: number) => void;
-    onSwipeUp?: (distance: number, velocity: number) => void;
-    onSwipeDown?: (distance: number, velocity: number) => void;
-    /** Callback during swipe (for dragging effect) */
-    onSwiping?: (deltaX: number, deltaY: number) => void;
-    /** Callback when swipe starts */
-    onSwipeStart?: () => void;
-    /** Callback when swipe ends (regardless of direction detected) */
-    onSwipeEnd?: () => void;
-    /** Prevent default behavior during touch */
-    preventDefault?: boolean;
-}
-/**
- * useSwipe Hook
- *
- * Detects swipe gestures on touch and mouse events.
- * Works on both mobile (touch) and desktop (mouse drag).
- *
- * @param ref - Reference to the element to attach swipe handlers
- * @param options - Configuration options for swipe detection
- *
- * @example
- * ```tsx
- * const ref = useRef<HTMLDivElement>(null);
- *
- * useSwipe(ref, {
- *   onSwipeLeft: () => console.log('Swiped left'),
- *   onSwipeRight: () => console.log('Swiped right'),
- *   minSwipeDistance: 100,
- * });
- *
- * return <div ref={ref}>Swipe me!</div>;
- * ```
- */
-declare function useSwipe<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, options?: UseSwipeOptions): void;
-
-interface UsePullToRefreshOptions {
-    /** Distance in px the user must pull before onRefresh triggers (default: 80) */
-    threshold?: number;
-}
-interface UsePullToRefreshReturn {
-    /** Attach to the scrollable container element */
-    containerRef: RefObject<HTMLDivElement | null>;
-    /** `true` while the user is actively pulling */
-    isPulling: boolean;
-    /** Pull progress from 0 (not started) to 1 (threshold reached) */
-    progress: number;
-}
-/**
- * usePullToRefresh Hook
- *
- * Attaches touch event listeners to `containerRef`.
- * When the user overscrolls from the very top and pulls down past `threshold`,
- * `onRefresh` is called. Progress (0–1) can be used to render a loading indicator.
- *
- * @param onRefresh - Async function called when pull threshold is reached
- * @param options   - Configuration: `threshold` in px (default 80)
- *
- * @example
- * ```tsx
- * const { containerRef, isPulling, progress } = usePullToRefresh(async () => {
- *   await refetchOrders();
- * });
- *
- * return (
- *   <div ref={containerRef} className="overflow-y-auto">
- *     {isPulling && <PullIndicator progress={progress} />}
- *     {…}
- *   </div>
- * );
- * ```
- */
-declare function usePullToRefresh(onRefresh: () => Promise<void>, options?: UsePullToRefreshOptions): UsePullToRefreshReturn;
-
-/**
- * useCountdown — tracks time remaining until a future date.
- *
- * Returns `null` when the target date has passed or is not provided.
- *
- * Supports:
- * - `Date` objects
- * - ISO strings / numeric timestamps
- * - Firestore Timestamp JSON shape `{ _seconds, _nanoseconds }` (serialised
- *   by Firestore's REST API — no Firestore SDK import needed)
- */
-interface CountdownRemaining {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-}
-/**
- * @example
- * ```tsx
- * const remaining = useCountdown(auction.endsAt);
- * if (!remaining) return <span>Ended</span>;
- * return <span>{remaining.hours}h {remaining.minutes}m {remaining.seconds}s</span>;
- * ```
- */
-declare function useCountdown(endDate: Date | string | undefined): CountdownRemaining | null;
-
-interface UseCameraOptions {
-    facingMode?: "user" | "environment";
-    video?: boolean | MediaTrackConstraints;
-    audio?: boolean;
-}
-interface UseCameraReturn {
-    isSupported: boolean;
-    isActive: boolean;
-    isCapturing: boolean;
-    stream: MediaStream | null;
-    error: string | null;
-    videoRef: React.RefObject<HTMLVideoElement | null>;
-    startCamera: (options?: UseCameraOptions) => Promise<void>;
-    stopCamera: () => void;
-    takePhoto: () => Blob | null;
-    startRecording: () => void;
-    stopRecording: () => Promise<Blob>;
-    switchCamera: () => Promise<void>;
-}
-/**
- * useCamera
- *
- * Provides access to the device camera via the MediaDevices API.
- * Zero domain imports. Safe to use in any Tier 1 / Tier 2 component.
- *
- * Lifecycle:
- * - Call `startCamera()` to open the stream and wire `videoRef` to a <video> element.
- * - `stopCamera()` releases hardware tracks (turns off the camera indicator light).
- * - `takePhoto()` captures the current frame as image/webp.
- * - `startRecording()` / `stopRecording()` use MediaRecorder (video/webm output).
- * - `useEffect` cleanup calls `stopCamera()` automatically on unmount.
- */
-declare function useCamera(): UseCameraReturn;
-
-interface UseBulkSelectionOptions<T> {
-    /** The current page / list of items being displayed. */
-    items: T[];
-    /** Extract a stable unique key from each item (e.g. `item => item.id`). */
-    keyExtractor: (item: T) => string;
-    /**
-     * Maximum number of IDs that can be selected at once.
-     * @default 100
-     */
-    maxSelection?: number;
-}
-interface UseBulkSelectionReturn {
-    selectedIds: string[];
-    selectedCount: number;
-    /** Returns `true` if the given ID is currently selected. */
-    isSelected: (id: string) => boolean;
-    /** `true` when every item on the current page is selected. */
-    isAllSelected: boolean;
-    /**
-     * `true` when some — but not all — items are selected.
-     * Use to set the indeterminate state on the header checkbox.
-     */
-    isIndeterminate: boolean;
-    /** Toggle one item in or out of the selection. Respects `maxSelection`. */
-    toggle: (id: string) => void;
-    /**
-     * Select all items on the current page (up to `maxSelection`),
-     * or deselect all if every item is already selected.
-     */
-    toggleAll: () => void;
-    /** Deselect everything. Call this after a bulk action completes. */
-    clearSelection: () => void;
-    /**
-     * Direct state setter — pass straight to a table's `onSelectionChange`
-     * or use when you need to replace the entire selection programmatically.
-     */
-    setSelectedIds: Dispatch<SetStateAction<string[]>>;
-}
-declare function useBulkSelection<T>({ items, keyExtractor, maxSelection, }: UseBulkSelectionOptions<T>): UseBulkSelectionReturn;
-
-interface UseUrlTableOptions {
-    /** Default param values used when a param is absent from the URL */
-    defaults?: Record<string, string>;
-    /**
-     * Override the router used for navigation. Pass a locale-aware router
-     * (e.g. from next-intl) to preserve locale prefixes on replace.
-     */
-    router?: {
-        replace: (url: string) => void;
-    };
-    /** Override the current pathname (e.g. from a locale-aware usePathname). */
-    pathname?: string;
-    /**
-     * Override the URLSearchParams instance. Useful when driving the hook
-     * from a non-standard location source.
-     */
-    searchParams?: URLSearchParams;
-}
-declare function useUrlTable(options?: UseUrlTableOptions): {
-    params: URLSearchParams;
-    get: (key: string) => string;
-    getNumber: (key: string, fallback?: number) => number;
-    set: (key: string, value: string) => void;
-    setMany: (updates: Record<string, string>) => void;
-    clear: (keys?: string[]) => void;
-    setPage: (page: number) => void;
-    setPageSize: (size: number) => void;
-    setSort: (sort: string) => void;
-    buildSieveParams: (sieveFilters: string) => string;
-    buildSearchParams: () => string;
-};
-
-type UrlTable$1 = ReturnType<typeof useUrlTable>;
-interface UsePendingFiltersOptions {
-    /** The page's useUrlTable instance */
-    table: UrlTable$1;
-    /** URL param keys to manage (e.g. ['status', 'category', 'role']) */
-    keys: string[];
-}
-interface UsePendingFiltersReturn {
-    /** Current uncommitted selections per key (string[] per key) */
-    pending: Record<string, string[]>;
-    /** Values currently in the URL (committed) per key */
-    applied: Record<string, string[]>;
-    /** true when pending differs from applied */
-    isDirty: boolean;
-    /** Total number of selected values across all pending keys */
-    pendingCount: number;
-    /** Total number of selected values in the URL (for badge display) */
-    appliedCount: number;
-    /** Update one key in pending state (does NOT write to URL) */
-    set: (key: string, values: string[]) => void;
-    /** Write all pending keys to the URL (resets page to 1) */
-    apply: () => void;
-    /** Discard pending, revert to applied (URL) state */
-    reset: () => void;
-    /** Clear all keys in both pending state and the URL */
-    clear: () => void;
-}
-/**
- * usePendingFilters
- *
- * Manages local (uncommitted) filter state for a FilterDrawer or any deferred
- * filter panel. Values are only written to the URL when `apply()` is called.
- *
- * Initialised from the current URL params on mount, so opening a drawer
- * pre-fills any already-applied filters.
- *
- * @example
- * ```ts
- * const table   = useUrlTable({ defaults: { pageSize: '25' } });
- * const filters = usePendingFilters({ table, keys: ['status', 'category'] });
- *
- * <FilterDrawer
- *   onApply={() => { filters.apply(); setDrawerOpen(false); }}
- *   onReset={() => filters.clear()}
- *   activeCount={filters.appliedCount}
- * >
- *   <FilterFacetSection
- *     title="Status"
- *     options={STATUS_OPTIONS}
- *     selected={filters.pending['status'] ?? []}
- *     onChange={(v) => filters.set('status', v)}
- *   />
- * </FilterDrawer>
- * ```
- */
-declare function usePendingFilters({ table, keys, }: UsePendingFiltersOptions): UsePendingFiltersReturn;
-
-type UrlTable = ReturnType<typeof useUrlTable>;
-/**
- * Minimal UrlTable-compatible interface consumed by *Filters components.
- */
-interface PendingTable {
-    get: (key: string) => string;
-    set: (key: string, value: string) => void;
-    setMany: (updates: Record<string, string>) => void;
-}
-interface UsePendingTableReturn {
-    /** Drop-in UrlTable replacement that reads/writes to pending state */
-    pendingTable: PendingTable;
-    /** Count of applied (URL) filter values — use for the filter badge */
-    filterActiveCount: number;
-    /** Commit all pending changes to the URL (resets page to 1) */
-    onFilterApply: () => void;
-    /** Clear all filter keys from pending state and URL */
-    onFilterClear: () => void;
-    /**
-     * Revert pending state to the current URL values without clearing them.
-     * Call this when opening a filter drawer to ensure it shows the last
-     * committed state, even if the URL changed externally (e.g. a status tab).
-     */
-    onFilterReset: () => void;
-}
-/**
- * usePendingTable
- *
- * A thin wrapper around `usePendingFilters` that exposes a `pendingTable`
- * object matching the `UrlTable` interface (`get`, `set`, `setMany`).
- *
- * Drop this into any listing view to replace the per-filter `useState` +
- * `handleFilterApply` + `handleFilterClear` boilerplate.
- *
- * @example
- * ```tsx
- * const { pendingTable, filterActiveCount, onFilterApply, onFilterClear } =
- *   usePendingTable(table, ['status', 'category', 'minPrice', 'maxPrice']);
- *
- * // Pass pendingTable directly to any *Filters component:
- * filterContent={<ProductFilters table={pendingTable} showStatus />}
- * filterActiveCount={filterActiveCount}
- * onFilterApply={onFilterApply}
- * onFilterClear={onFilterClear}
- * ```
- */
-declare function usePendingTable(table: UrlTable, keys: string[]): UsePendingTableReturn;
-
-declare const UNSAVED_CHANGES_EVENT = "unsaved-changes:confirm";
-interface UseUnsavedChangesOptions {
-    /** Current form values to compare against initial */
-    formValues: Record<string, string>;
-    /** Initial form values snapshot (taken when data loads) */
-    initialValues: Record<string, string> | null;
-    /** Additional dirty flag from outside the form (e.g. pending avatar upload) */
-    extraDirty?: boolean;
-    /**
-     * Called when the user attempts to navigate away with unsaved changes.
-     * Must return a Promise that resolves to `true` (continue) or `false` (stay).
-     * Defaults to `window.confirm` with a generic message.
-     */
-    confirmFn?: () => Promise<boolean>;
-    /**
-     * Message shown in the browser-native `beforeunload` dialog.
-     * Most modern browsers ignore custom messages and show their own text.
-     */
-    beforeUnloadWarning?: string;
-}
-interface UseUnsavedChangesReturn {
-    /** Whether there are any unsaved changes (form or extra) */
-    isDirty: boolean;
-    /** Whether the form fields specifically have changed */
-    isFormDirty: boolean;
-    /** Call after a successful save to reset initial values to current */
-    markClean: () => void;
-    /** Prompt the user and return true if they confirmed leaving, false otherwise */
-    confirmLeave: () => Promise<boolean>;
-}
-/**
- * useUnsavedChanges
- *
- * Tracks unsaved form changes and warns users before navigating away.
- *
- * - Compares `formValues` to `initialValues` to detect form dirtiness
- * - Accepts an optional `extraDirty` flag (e.g. pending file upload)
- * - Registers a `beforeunload` handler while dirty
- * - Exposes `confirmLeave()` which calls the provided `confirmFn` (or falls back
- *   to `window.confirm`) to handle navigation guards
- * - `markClean()` resets the snapshot after a successful save
- */
-declare function useUnsavedChanges({ formValues, initialValues, extraDirty, confirmFn, beforeUnloadWarning, }: UseUnsavedChangesOptions): UseUnsavedChangesReturn;
-
-interface BulkActionItemFailure {
-    id: string;
-    reason: string;
-}
-interface BulkActionSummary {
-    total: number;
-    succeeded: number;
-    skipped: number;
-    failed: number;
-}
-interface BulkActionResult<TData = Record<string, unknown>> {
-    action: string;
-    summary: BulkActionSummary;
-    succeeded: string[];
-    skipped: string[];
-    failed: BulkActionItemFailure[];
-    data?: TData;
-}
-interface BulkActionPayload {
-    action: string;
-    ids: string[];
-}
-interface UseBulkActionOptions<TPayload extends BulkActionPayload, TData = Record<string, unknown>> {
-    /**
-     * Async function that POSTs to the bulk endpoint.
-     * Must return `Promise<BulkActionResult<TData>>`.
-     */
-    mutationFn: (payload: TPayload) => Promise<BulkActionResult<TData>>;
-    /**
-     * Called when `mutationFn` resolves (even for partial failures).
-     * Inspect `result.summary` to build feedback.
-     */
-    onSuccess?: (result: BulkActionResult<TData>, payload: TPayload) => void | Promise<void>;
-    /**
-     * Called when `mutationFn` rejects.
-     */
-    onError?: (error: Error, payload: TPayload) => void;
-    /**
-     * When `true`, `execute()` parks the payload in `pendingPayload` instead of
-     * running immediately. The caller renders a confirm modal wired to
-     * `confirmAndExecute` / `cancelConfirm`.
-     */
-    requiresConfirm?: boolean;
-}
-interface UseBulkActionReturn<TPayload extends BulkActionPayload, TData = Record<string, unknown>> {
-    execute: (payload: TPayload) => Promise<void>;
-    isLoading: boolean;
-    result: BulkActionResult<TData> | null;
-    error: Error | null;
-    reset: () => void;
-    pendingPayload: TPayload | null;
-    confirmAndExecute: () => Promise<void>;
-    cancelConfirm: () => void;
-}
-/**
- * useBulkAction
- *
- * Generic mutation hook for any `/bulk` endpoint.
- * Handles loading state, partial-success result tracking, and an optional
- * confirmation flow for destructive operations.
- *
- * Pair with `useBulkSelection` and a `BulkActionBar` component for the
- * full admin list pattern.
- */
-declare function useBulkAction<TPayload extends BulkActionPayload = BulkActionPayload, TData = Record<string, unknown>>(options: UseBulkActionOptions<TPayload, TData>): UseBulkActionReturn<TPayload, TData>;
-
-interface UseContainerGridOptions {
-    /** Minimum width of each grid item in pixels */
-    minItemWidth: number;
-    /** Gap between items in pixels (default: 16) */
-    gap?: number;
-    /** Minimum column count (default: 1) */
-    minCols?: number;
-    /** Maximum column count (default: Infinity) */
-    maxCols?: number;
-}
-interface UseContainerGridResult {
-    /** Attach to the grid container element */
-    containerRef: React.RefObject<HTMLElement | null>;
-    /** Current computed column count */
-    cols: number;
-}
-/**
- * `useContainerGrid` — compute the number of columns that fit in a container
- * using a `ResizeObserver`. Drives fluid skeleton loader card counts.
- *
- * **Formula**: `cols = clamp(minCols, floor((width + gap) / (minItemWidth + gap)), maxCols)`
- *
- * Pair with the `fluid-grid-*` CSS utilities in `tailwind.config.js` so the
- * skeleton count always matches the visible grid columns.
- *
- * @example
- * ```tsx
- * const { containerRef, cols } = useContainerGrid({ minItemWidth: 220 });
- *
- * return (
- *   <ul ref={containerRef as React.RefObject<HTMLUListElement>} className="fluid-grid-card gap-4">
- *     {isLoading
- *       ? Array.from({ length: cols * 2 }).map((_, i) => <li key={i}><Skeleton /></li>)
- *       : items.map((item) => <li key={item.id}><ProductCard product={item} /></li>)}
- *   </ul>
- * );
- * ```
- */
-declare function useContainerGrid({ minItemWidth, gap, minCols, maxCols, }: UseContainerGridOptions): UseContainerGridResult;
-
-interface UseVisibleItemsOptions {
-    /** Total number of items */
-    total: number;
-    /** Minimum width of each item in pixels */
-    minItemWidth: number;
-    /** Width reserved for each scroll arrow button (default: 36) */
-    arrowWidth?: number;
-    /** Gap between items in pixels (default: 8) */
-    gap?: number;
-}
-interface UseVisibleItemsResult {
-    /** Attach to the scroll container element */
-    containerRef: React.RefObject<HTMLElement | null>;
-    /** Number of items that fit in the current container width */
-    visibleCount: number;
-    /** Whether any items are hidden (arrows should be shown) */
-    hasOverflow: boolean;
-    /** Index of the first visible item */
-    scrollOffset: number;
-    setScrollOffset: React.Dispatch<React.SetStateAction<number>>;
-    /** Scroll left by one page */
-    scrollLeft: () => void;
-    /** Scroll right by one page */
-    scrollRight: () => void;
-    canScrollLeft: boolean;
-    canScrollRight: boolean;
-}
-/**
- * `useVisibleItems` — compute how many items fit in a container, handling
- * arrow button reservations. Powers `HorizontalScroller` and `TabStrip`.
- *
- * **Formula** (when overflow exists):
- * `visible = floor((containerWidth - 2 × (arrowWidth + gap) + gap) / (minItemWidth + gap))`
- *
- * When all items fit without arrows, no arrows are shown.
- */
-declare function useVisibleItems({ total, minItemWidth, arrowWidth, gap, }: UseVisibleItemsOptions): UseVisibleItemsResult;
-
-interface ModalEntry<T = unknown> {
-    id: string;
-    data?: T;
-}
-/**
- * useModalStack — manages a LIFO stack of modal/drawer instances.
- *
- * Supports nested modal flows (e.g. confirmation on top of form).
- * The topmost entry in the stack is the "active" modal.
- *
- * @example
- * ```tsx
- * const { open, close, closeAll, isOpen, peek } = useModalStack<ReviewData>();
- *
- * // open a modal with optional payload:
- * <Button onClick={() => open("review-modal", review)}>Write Review</Button>
- *
- * const active = peek();          // { id: "review-modal", data: review }
- * const visible = isOpen("review-modal");
- * ```
- */
-declare function useModalStack<T = unknown>(): {
-    stack: ModalEntry<T>[];
-    open: (id: string, data?: T) => void;
-    close: () => void;
-    closeAll: () => void;
-    closeById: (id: string) => void;
-    peek: () => ModalEntry<T> | undefined;
-    isOpen: (id: string) => boolean;
-    isTopmost: (id: string) => boolean;
-    nextId: () => string;
-    depth: number;
-};
-
-interface ErrorBoundaryProps {
-    children: ReactNode;
-    /** Static fallback node — shown instead of the default error UI. */
-    fallback?: ReactNode;
-    /** Render-prop fallback — receives the error and a reset callback. */
-    renderFallback?: (error: Error | null, reset: () => void) => ReactNode;
-    /** Optional callback invoked after componentDidCatch. */
-    onError?: (error: Error, errorInfo: ErrorInfo) => void;
-}
-interface State {
-    hasError: boolean;
-    error: Error | null;
-}
-declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
-    private readonly log;
-    constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): State;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    handleReset: () => void;
-    render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
-}
-
-export { type BulkActionItemFailure, type BulkActionPayload, type BulkActionResult, type BulkActionSummary, type CountdownRemaining, ErrorBoundary, type ErrorBoundaryProps, type GestureType, type KeyModifiers, type ModalEntry, type PendingTable, type SwipeDirection, UNSAVED_CHANGES_EVENT, type UseBulkActionOptions, type UseBulkActionReturn, type UseBulkSelectionOptions, type UseBulkSelectionReturn, type UseCameraOptions, type UseCameraReturn, type UseClickOutsideOptions, type UseContainerGridOptions, type UseContainerGridResult, type UseGestureOptions, type UseKeyPressOptions, type UsePendingFiltersOptions, type UsePendingFiltersReturn, type UsePendingTableReturn, type UsePullToRefreshOptions, type UsePullToRefreshReturn, type UseSwipeOptions, type UseUnsavedChangesOptions, type UseUnsavedChangesReturn, type UseUrlTableOptions, type UseVisibleItemsOptions, type UseVisibleItemsResult, useBreakpoint, useBulkAction, useBulkSelection, useCamera, useClickOutside, useContainerGrid, useCountdown, useGesture, useKeyPress, useLongPress, useMediaQuery, useModalStack, usePendingFilters, usePendingTable, usePullToRefresh, useSwipe, useUnsavedChanges, useUrlTable, useVisibleItems };