indas-ui 0.0.1 → 0.1.0

package/dist/hooks/useBusinessAudit.js

@@ -0,0 +1,51 @@
+'use client';
+/**
+ * useBusinessAudit Hook
+ *
+ * React hook for logging business actions.
+ *
+ * Usage:
+ * ```typescript
+ * const { logAction, isLogging } = useBusinessAudit()
+ * await logAction('CREATE', 'ESTIMATION', {
+ *   documentName: 'Quotation',
+ *   documentId: 123,
+ * })
+ * ```
+ */
+import { useState, useCallback } from 'react';
+import { useSession } from 'next-auth/react';
+import { BusinessAuditAPI } from '../lib/api/activity/audit/index.js';
+export function useBusinessAudit() {
+    const { data: session } = useSession();
+    const [isLogging, setIsLogging] = useState(false);
+    const logAction = useCallback(async (action, module, details) => {
+        if (!session)
+            return false;
+        setIsLogging(true);
+        try {
+            const response = await BusinessAuditAPI.logAction({
+                Event: 'BUSINESS_ACTION',
+                Username: session.user?.UserName || session.user?.name || 'Unknown',
+                UserID: (session.user?.UserID || 0).toString(),
+                CompanyID: (session.user?.CompanyID || 0).toString(),
+                UserAgent: typeof navigator !== 'undefined' ? navigator.userAgent : undefined,
+                Success: true,
+                Module: module,
+                Action: action,
+                DocumentName: details.documentName,
+                DocumentID: details.documentId?.toString(),
+                Comments: details.comments,
+                Metadata: details.metadata,
+            }, session);
+            return response.success;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            setIsLogging(false);
+        }
+    }, [session]);
+    return { logAction, isLogging };
+}

package/dist/hooks/useColumnFreezing.d.ts

@@ -0,0 +1,85 @@
+import { ColumnDef } from '@tanstack/react-table';
+export interface FrozenColumnState {
+    frozenLeft: string[];
+    frozenRight: string[];
+    isFrozen: (columnId: string) => boolean;
+    getFrozenPosition: (columnId: string) => 'left' | 'right' | null;
+}
+export interface UseColumnFreezingOptions {
+    columns: ColumnDef<any>[];
+    maxFrozenLeft?: number;
+    maxFrozenRight?: number;
+    onFreezingChange?: (frozenLeft: string[], frozenRight: string[]) => void;
+}
+/**
+ * Hook for managing frozen/pinned columns with advanced positioning
+ * Supports both left and right frozen columns
+ */
+export declare function useColumnFreezing({ columns, maxFrozenLeft, maxFrozenRight, onFreezingChange }: UseColumnFreezingOptions): {
+    canFreezeLeft: boolean;
+    canFreezeRight: boolean;
+    totalFrozen: number;
+    freezeLeft: (columnId: string) => boolean;
+    freezeRight: (columnId: string) => boolean;
+    unfreeze: (columnId: string) => false;
+    toggleFreeze: (columnId: string, position?: "left" | "right") => boolean;
+    clearAllFrozen: () => void;
+    reorderFrozen: (columnId: string, newIndex: number, position: "left" | "right") => boolean;
+    getFrozenStyle: (columnId: string, columnWidth?: number) => {
+        position?: undefined;
+        left?: undefined;
+        zIndex?: undefined;
+        backgroundColor?: undefined;
+        boxShadow?: undefined;
+        right?: undefined;
+    } | {
+        position: "sticky";
+        left: number;
+        zIndex: number;
+        backgroundColor: string;
+        boxShadow: string;
+        right?: undefined;
+    } | {
+        position: "sticky";
+        right: number;
+        zIndex: number;
+        backgroundColor: string;
+        boxShadow: string;
+        left?: undefined;
+    };
+    getColumnProps: (columnId: string, width?: number) => {
+        style: {
+            position?: undefined;
+            left?: undefined;
+            zIndex?: undefined;
+            backgroundColor?: undefined;
+            boxShadow?: undefined;
+            right?: undefined;
+        } | {
+            position: "sticky";
+            left: number;
+            zIndex: number;
+            backgroundColor: string;
+            boxShadow: string;
+            right?: undefined;
+        } | {
+            position: "sticky";
+            right: number;
+            zIndex: number;
+            backgroundColor: string;
+            boxShadow: string;
+            left?: undefined;
+        };
+        className: string;
+        'data-frozen': string;
+    };
+    bulkOperations: {
+        freezeMultiple: (columnIds: string[], position?: "left" | "right") => void;
+        unfreezeMultiple: (columnIds: string[]) => void;
+        setFrozenColumns: (left: string[], right: string[]) => void;
+    };
+    frozenLeft: string[];
+    frozenRight: string[];
+    isFrozen: (columnId: string) => boolean;
+    getFrozenPosition: (columnId: string) => "left" | "right" | null;
+};

package/dist/hooks/useColumnFreezing.js

@@ -0,0 +1,201 @@
+'use client';
+import { useState, useCallback, useMemo } from 'react';
+/**
+ * Hook for managing frozen/pinned columns with advanced positioning
+ * Supports both left and right frozen columns
+ */
+export function useColumnFreezing({ columns, maxFrozenLeft = 3, maxFrozenRight = 2, onFreezingChange }) {
+    const [frozenLeft, setFrozenLeft] = useState([]);
+    const [frozenRight, setFrozenRight] = useState([]);
+    // Get column IDs for validation
+    const columnIds = useMemo(() => columns.map(col => col.id || col.accessorKey).filter(Boolean), [columns]);
+    // Calculate frozen state
+    const frozenState = useMemo(() => ({
+        frozenLeft,
+        frozenRight,
+        isFrozen: (columnId) => frozenLeft.includes(columnId) || frozenRight.includes(columnId),
+        getFrozenPosition: (columnId) => {
+            if (frozenLeft.includes(columnId))
+                return 'left';
+            if (frozenRight.includes(columnId))
+                return 'right';
+            return null;
+        }
+    }), [frozenLeft, frozenRight]);
+    // Freeze column to the left
+    const freezeLeft = useCallback((columnId) => {
+        if (!columnIds.includes(columnId))
+            return false;
+        setFrozenLeft(prev => {
+            // Remove from right if it's there
+            setFrozenRight(right => right.filter(id => id !== columnId));
+            // Add to left if not already there and under limit
+            if (!prev.includes(columnId) && prev.length < maxFrozenLeft) {
+                const newFrozenLeft = [...prev, columnId];
+                onFreezingChange?.(newFrozenLeft, frozenRight);
+                return newFrozenLeft;
+            }
+            return prev;
+        });
+        return true;
+    }, [columnIds, maxFrozenLeft, frozenRight, onFreezingChange]);
+    // Freeze column to the right
+    const freezeRight = useCallback((columnId) => {
+        if (!columnIds.includes(columnId))
+            return false;
+        setFrozenRight(prev => {
+            // Remove from left if it's there
+            setFrozenLeft(left => left.filter(id => id !== columnId));
+            // Add to right if not already there and under limit
+            if (!prev.includes(columnId) && prev.length < maxFrozenRight) {
+                const newFrozenRight = [...prev, columnId];
+                onFreezingChange?.(frozenLeft, newFrozenRight);
+                return newFrozenRight;
+            }
+            return prev;
+        });
+        return true;
+    }, [columnIds, maxFrozenRight, frozenLeft, onFreezingChange]);
+    // Unfreeze column
+    const unfreeze = useCallback((columnId) => {
+        let changed = false;
+        setFrozenLeft(prev => {
+            if (prev.includes(columnId)) {
+                changed = true;
+                return prev.filter(id => id !== columnId);
+            }
+            return prev;
+        });
+        setFrozenRight(prev => {
+            if (prev.includes(columnId)) {
+                changed = true;
+                return prev.filter(id => id !== columnId);
+            }
+            return prev;
+        });
+        if (changed) {
+            // Use setTimeout to ensure state updates are complete
+            setTimeout(() => {
+                onFreezingChange?.(frozenLeft.filter(id => id !== columnId), frozenRight.filter(id => id !== columnId));
+            }, 0);
+        }
+        return changed;
+    }, [frozenLeft, frozenRight, onFreezingChange]);
+    // Toggle freeze state (defaults to left)
+    const toggleFreeze = useCallback((columnId, position = 'left') => {
+        if (frozenState.isFrozen(columnId)) {
+            return unfreeze(columnId);
+        }
+        else {
+            return position === 'left' ? freezeLeft(columnId) : freezeRight(columnId);
+        }
+    }, [frozenState, unfreeze, freezeLeft, freezeRight]);
+    // Clear all frozen columns
+    const clearAllFrozen = useCallback(() => {
+        setFrozenLeft([]);
+        setFrozenRight([]);
+        onFreezingChange?.([], []);
+    }, [onFreezingChange]);
+    // Reorder frozen columns
+    const reorderFrozen = useCallback((columnId, newIndex, position) => {
+        const setter = position === 'left' ? setFrozenLeft : setFrozenRight;
+        const currentList = position === 'left' ? frozenLeft : frozenRight;
+        if (!currentList.includes(columnId))
+            return false;
+        setter(prev => {
+            const filtered = prev.filter(id => id !== columnId);
+            const clampedIndex = Math.max(0, Math.min(newIndex, filtered.length));
+            const newList = [
+                ...filtered.slice(0, clampedIndex),
+                columnId,
+                ...filtered.slice(clampedIndex)
+            ];
+            // Update callback
+            if (position === 'left') {
+                onFreezingChange?.(newList, frozenRight);
+            }
+            else {
+                onFreezingChange?.(frozenLeft, newList);
+            }
+            return newList;
+        });
+        return true;
+    }, [frozenLeft, frozenRight, onFreezingChange]);
+    // Get CSS properties for frozen columns
+    const getFrozenStyle = useCallback((columnId, columnWidth = 150) => {
+        const position = frozenState.getFrozenPosition(columnId);
+        if (!position)
+            return {};
+        let offset = 0;
+        const targetList = position === 'left' ? frozenLeft : frozenRight;
+        if (position === 'left') {
+            const index = targetList.indexOf(columnId);
+            offset = index * columnWidth;
+            return {
+                position: 'sticky',
+                left: offset,
+                zIndex: 10,
+                backgroundColor: 'var(--grid-header-bg)',
+                boxShadow: '2px 0 4px rgba(0,0,0,0.1)'
+            };
+        }
+        else {
+            const index = targetList.indexOf(columnId);
+            offset = index * columnWidth;
+            return {
+                position: 'sticky',
+                right: offset,
+                zIndex: 10,
+                backgroundColor: 'var(--grid-header-bg)',
+                boxShadow: '-2px 0 4px rgba(0,0,0,0.1)'
+            };
+        }
+    }, [frozenState, frozenLeft, frozenRight]);
+    // Utility functions
+    const canFreezeLeft = frozenLeft.length < maxFrozenLeft;
+    const canFreezeRight = frozenRight.length < maxFrozenRight;
+    const totalFrozen = frozenLeft.length + frozenRight.length;
+    return {
+        // State
+        ...frozenState,
+        canFreezeLeft,
+        canFreezeRight,
+        totalFrozen,
+        // Actions
+        freezeLeft,
+        freezeRight,
+        unfreeze,
+        toggleFreeze,
+        clearAllFrozen,
+        reorderFrozen,
+        // Utilities
+        getFrozenStyle,
+        // For integration with table libraries
+        getColumnProps: (columnId, width) => ({
+            style: getFrozenStyle(columnId, width),
+            className: frozenState.isFrozen(columnId) ? 'column-frozen' : '',
+            'data-frozen': frozenState.getFrozenPosition(columnId) || 'none'
+        }),
+        // Bulk operations
+        bulkOperations: {
+            freezeMultiple: (columnIds, position = 'left') => {
+                columnIds.forEach(id => {
+                    if (position === 'left' && canFreezeLeft) {
+                        freezeLeft(id);
+                    }
+                    else if (position === 'right' && canFreezeRight) {
+                        freezeRight(id);
+                    }
+                });
+            },
+            unfreezeMultiple: (columnIds) => {
+                columnIds.forEach(unfreeze);
+            },
+            setFrozenColumns: (left, right) => {
+                setFrozenLeft(left.slice(0, maxFrozenLeft));
+                setFrozenRight(right.slice(0, maxFrozenRight));
+                onFreezingChange?.(left, right);
+            }
+        }
+    };
+}

package/dist/hooks/useColumnMetadata.d.ts

@@ -0,0 +1,20 @@
+import { ColumnDef } from '@tanstack/react-table';
+export interface ColumnMetadata {
+    isNumeric: boolean;
+    isFrozen: boolean;
+    isSelectColumn: boolean;
+    isMainColumn: boolean;
+    columnKey: string;
+    alignment: 'left' | 'right' | 'center';
+}
+/**
+ * Pre-compute column metadata to avoid repeated calculations during renders
+ */
+export declare function useColumnMetadata<TData>(columns: ColumnDef<TData>[], mainColumnsArray: string[], frozenColumnPositions: Map<string, {
+    left: number;
+    width: number;
+}>): Map<string, ColumnMetadata>;
+/**
+ * Check if a cell value should be right-aligned (numeric content)
+ */
+export declare function isNumericContent(cellValue: any): boolean;

package/dist/hooks/useColumnMetadata.js

@@ -0,0 +1,44 @@
+'use client';
+import { useMemo } from 'react';
+/**
+ * Pre-compute column metadata to avoid repeated calculations during renders
+ */
+export function useColumnMetadata(columns, mainColumnsArray, frozenColumnPositions) {
+    return useMemo(() => {
+        const metadataMap = new Map();
+        columns.forEach((column) => {
+            const columnKey = column.id || column.accessorKey || '';
+            const isSelectColumn = column.meta?.isSelectColumn ||
+                column.meta?.skipSearch ||
+                column.id === 'select' ||
+                columnKey === 'select';
+            const isMainColumn = !isSelectColumn && columnKey && mainColumnsArray.includes(columnKey);
+            const isFrozen = frozenColumnPositions.has(columnKey);
+            metadataMap.set(columnKey, {
+                isNumeric: false, // Will be determined per cell value
+                isFrozen,
+                isSelectColumn,
+                isMainColumn,
+                columnKey,
+                alignment: 'left' // Default alignment
+            });
+        });
+        return metadataMap;
+    }, [columns, mainColumnsArray, frozenColumnPositions]);
+}
+/**
+ * Check if a cell value should be right-aligned (numeric content)
+ */
+export function isNumericContent(cellValue) {
+    const cellString = String(cellValue || '').trim();
+    return typeof cellValue === 'number' ||
+        (!isNaN(Number(cellString)) && cellString !== '' && cellString !== 'null' && cellString !== 'undefined') ||
+        /^\d*\.?\d+%$/.test(cellString) ||
+        /^[\$€£¥₹₽]\s?\d/.test(cellString) ||
+        /^\d[\d,]*\.?\d*\s?[\$€£¥₹₽]$/.test(cellString) ||
+        /^\(\d/.test(cellString) ||
+        /^\d{1,3}(,\d{3})*(\.\d+)?$/.test(cellString) ||
+        /^\d+\.?\d*[eE][+-]?\d+$/.test(cellString) ||
+        /^\d+\/\d+$/.test(cellString) ||
+        /^[+\-=<>≤≥≠±∞]/.test(cellString);
+}

package/dist/hooks/useConditionalFormatting.d.ts

@@ -0,0 +1,43 @@
+export type ConditionOperator = 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'greater_than_or_equal' | 'less_than_or_equal' | 'contains' | 'not_contains' | 'starts_with' | 'ends_with' | 'is_empty' | 'is_not_empty' | 'between' | 'in_list';
+export interface ConditionalStyle {
+    backgroundColor?: string;
+    textColor?: string;
+    fontWeight?: 'normal' | 'bold' | 'lighter';
+    fontStyle?: 'normal' | 'italic';
+    borderColor?: string;
+    borderWidth?: number;
+    opacity?: number;
+    className?: string;
+}
+export interface FormattingRule {
+    id: string;
+    name: string;
+    columnId?: string;
+    operator: ConditionOperator;
+    value: any;
+    secondValue?: any;
+    style: ConditionalStyle;
+    enabled?: boolean;
+    priority?: number;
+}
+export declare const STYLE_PRESETS: Record<string, ConditionalStyle>;
+/**
+ * Hook for conditional formatting in data grids
+ * Evaluates formatting rules against cell values and returns appropriate styles
+ */
+export declare function useConditionalFormatting<TData>(data: TData[], rules: FormattingRule[]): {
+    getCellStyle: (rowData: TData, columnId: string) => ConditionalStyle | null;
+    getCellCSSProperties: (rowData: TData, columnId: string) => React.CSSProperties;
+    getCellClassName: (rowData: TData, columnId: string) => string;
+    getCellProps: (rowData: TData, columnId: string) => {
+        style: import("react").CSSProperties;
+        className: string;
+    };
+    createRule: {
+        threshold: (columnId: string, threshold: number, operator?: "greater_than" | "less_than", style?: ConditionalStyle) => FormattingRule;
+        valueMatch: (columnId: string, value: any, style?: ConditionalStyle) => FormattingRule;
+        emptyValues: (columnId: string, style?: ConditionalStyle) => FormattingRule;
+        range: (columnId: string, min: number, max: number, style?: ConditionalStyle) => FormattingRule;
+    };
+    STYLE_PRESETS: Record<string, ConditionalStyle>;
+};

package/dist/hooks/useConditionalFormatting.js

@@ -0,0 +1,193 @@
+'use client';
+import { useMemo } from 'react';
+// Predefined style presets
+export const STYLE_PRESETS = {
+    success: {
+        backgroundColor: '#dcfce7',
+        textColor: '#166534',
+        borderColor: '#22c55e'
+    },
+    warning: {
+        backgroundColor: '#fef3c7',
+        textColor: '#92400e',
+        borderColor: '#f59e0b'
+    },
+    error: {
+        backgroundColor: '#fee2e2',
+        textColor: '#dc2626',
+        borderColor: '#ef4444'
+    },
+    info: {
+        backgroundColor: '#dbeafe',
+        textColor: '#1d4ed8',
+        borderColor: '#3b82f6'
+    },
+    highlight: {
+        backgroundColor: '#fef3c7',
+        fontWeight: 'bold',
+        borderColor: '#f59e0b',
+        borderWidth: 2
+    },
+    muted: {
+        opacity: 0.6,
+        fontStyle: 'italic'
+    },
+    important: {
+        backgroundColor: '#fecaca',
+        textColor: '#991b1b',
+        fontWeight: 'bold'
+    }
+};
+// Evaluation functions for each operator
+function evaluateCondition(cellValue, operator, ruleValue, secondValue) {
+    // Handle null/undefined values
+    const isEmptyValue = cellValue === null || cellValue === undefined || cellValue === '';
+    if (operator === 'is_empty') {
+        return isEmptyValue;
+    }
+    if (operator === 'is_not_empty') {
+        return !isEmptyValue;
+    }
+    if (isEmptyValue) {
+        return false;
+    }
+    // Convert to strings for string operations
+    const cellStr = String(cellValue).toLowerCase();
+    const ruleStr = String(ruleValue).toLowerCase();
+    // Convert to numbers for numeric operations
+    const cellNum = Number(cellValue);
+    const ruleNum = Number(ruleValue);
+    const isNumericComparison = !isNaN(cellNum) && !isNaN(ruleNum);
+    switch (operator) {
+        case 'equals':
+            return isNumericComparison ? cellNum === ruleNum : cellStr === ruleStr;
+        case 'not_equals':
+            return isNumericComparison ? cellNum !== ruleNum : cellStr !== ruleStr;
+        case 'greater_than':
+            return isNumericComparison ? cellNum > ruleNum : cellStr > ruleStr;
+        case 'less_than':
+            return isNumericComparison ? cellNum < ruleNum : cellStr < ruleStr;
+        case 'greater_than_or_equal':
+            return isNumericComparison ? cellNum >= ruleNum : cellStr >= ruleStr;
+        case 'less_than_or_equal':
+            return isNumericComparison ? cellNum <= ruleNum : cellStr <= ruleStr;
+        case 'contains':
+            return cellStr.includes(ruleStr);
+        case 'not_contains':
+            return !cellStr.includes(ruleStr);
+        case 'starts_with':
+            return cellStr.startsWith(ruleStr);
+        case 'ends_with':
+            return cellStr.endsWith(ruleStr);
+        case 'between':
+            if (secondValue === undefined)
+                return false;
+            const secondNum = Number(secondValue);
+            if (isNumericComparison && !isNaN(secondNum)) {
+                return cellNum >= Math.min(ruleNum, secondNum) && cellNum <= Math.max(ruleNum, secondNum);
+            }
+            return cellStr >= ruleStr && cellStr <= String(secondValue).toLowerCase();
+        case 'in_list':
+            const list = Array.isArray(ruleValue) ? ruleValue : String(ruleValue).split(',');
+            return list.some(item => isNumericComparison ? cellNum === Number(item) : cellStr === String(item).toLowerCase());
+        default:
+            return false;
+    }
+}
+/**
+ * Hook for conditional formatting in data grids
+ * Evaluates formatting rules against cell values and returns appropriate styles
+ */
+export function useConditionalFormatting(data, rules) {
+    const enabledRules = useMemo(() => rules
+        .filter(rule => rule.enabled !== false)
+        .sort((a, b) => (b.priority || 0) - (a.priority || 0)), [rules]);
+    // Get styles for a specific cell
+    const getCellStyle = useMemo(() => (rowData, columnId) => {
+        for (const rule of enabledRules) {
+            // Skip if rule is for a specific column and doesn't match
+            if (rule.columnId && rule.columnId !== columnId) {
+                continue;
+            }
+            const cellValue = rowData[columnId];
+            if (evaluateCondition(cellValue, rule.operator, rule.value, rule.secondValue)) {
+                return rule.style;
+            }
+        }
+        return null;
+    }, [enabledRules]);
+    // Get CSS properties object for a cell
+    const getCellCSSProperties = useMemo(() => (rowData, columnId) => {
+        const style = getCellStyle(rowData, columnId);
+        if (!style)
+            return {};
+        return {
+            backgroundColor: style.backgroundColor,
+            color: style.textColor,
+            fontWeight: style.fontWeight,
+            fontStyle: style.fontStyle,
+            borderColor: style.borderColor,
+            borderWidth: style.borderWidth ? `${style.borderWidth}px` : undefined,
+            borderStyle: style.borderColor || style.borderWidth ? 'solid' : undefined,
+            opacity: style.opacity
+        };
+    }, [getCellStyle]);
+    // Get CSS class name for a cell
+    const getCellClassName = useMemo(() => (rowData, columnId) => {
+        const style = getCellStyle(rowData, columnId);
+        return style?.className || '';
+    }, [getCellStyle]);
+    // Get combined props for a cell
+    const getCellProps = useMemo(() => (rowData, columnId) => ({
+        style: getCellCSSProperties(rowData, columnId),
+        className: getCellClassName(rowData, columnId)
+    }), [getCellCSSProperties, getCellClassName]);
+    // Utility functions for creating common rules
+    const createRule = {
+        // Highlight cells above/below threshold
+        threshold: (columnId, threshold, operator = 'greater_than', style = STYLE_PRESETS.warning) => ({
+            id: `threshold-${columnId}-${threshold}`,
+            name: `${columnId} ${operator} ${threshold}`,
+            columnId,
+            operator,
+            value: threshold,
+            style
+        }),
+        // Highlight specific values
+        valueMatch: (columnId, value, style = STYLE_PRESETS.highlight) => ({
+            id: `value-${columnId}-${value}`,
+            name: `${columnId} equals ${value}`,
+            columnId,
+            operator: 'equals',
+            value,
+            style
+        }),
+        // Highlight empty cells
+        emptyValues: (columnId, style = STYLE_PRESETS.error) => ({
+            id: `empty-${columnId}`,
+            name: `${columnId} is empty`,
+            columnId,
+            operator: 'is_empty',
+            value: null,
+            style
+        }),
+        // Range highlighting
+        range: (columnId, min, max, style = STYLE_PRESETS.success) => ({
+            id: `range-${columnId}-${min}-${max}`,
+            name: `${columnId} between ${min} and ${max}`,
+            columnId,
+            operator: 'between',
+            value: min,
+            secondValue: max,
+            style
+        })
+    };
+    return {
+        getCellStyle,
+        getCellCSSProperties,
+        getCellClassName,
+        getCellProps,
+        createRule,
+        STYLE_PRESETS
+    };
+}

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Custom hook for debouncing function calls
+ * @param callback - The function to debounce
+ * @param delay - Delay in milliseconds
+ * @returns Debounced function
+ */
+export declare function useDebounce<T extends (...args: any[]) => any>(callback: T, delay: number): T;
+/**
+ * Custom hook for debouncing state values
+ * @param value - The value to debounce
+ * @param delay - Delay in milliseconds
+ * @returns Debounced value
+ */
+export declare function useDebouncedValue<T>(value: T, delay: number): T;