react-restyle-components 0.4.27 → 0.4.29

package/lib/src/core-components/src/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AA0Cf,OAAO,EAAC,UAAU,EAAc,MAAM,SAAS,CAAC;AAiQhD,eAAO,MAAM,KAAK;;MA4wDb,MAAM,YAAY,CAAC;AAIxB,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AA0Cf,OAAO,EAAC,UAAU,EAAc,MAAM,SAAS,CAAC;AAiQhD,eAAO,MAAM,KAAK;;MAm1Db,MAAM,YAAY,CAAC;AAIxB,eAAe,KAAK,CAAC"}

package/lib/src/core-components/src/components/Table/Table.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useState, useCallback, useMemo, useRef, } from 'react';
+import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef, } from 'react';
 import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, } from './elements';
 import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
 import { getFilterComponent } from './filters';
@@ -107,11 +107,27 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     };
     // Refs
     const tableRef = useRef(null);
+    const columnToggleRef = useRef(null);
     // State
     const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
     const [internalShowFilters, setInternalShowFilters] = useState(defaultShowFilters);
     const [columnToggleOpen, setColumnToggleOpen] = useState(false);
     const [columnSearch, setColumnSearch] = useState('');
+    // Close column toggle panel on outside click
+    useEffect(() => {
+        if (!columnToggleOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (columnToggleRef.current &&
+                !columnToggleRef.current.contains(event.target)) {
+                setColumnToggleOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [columnToggleOpen]);
     // Filter visibility (controlled or uncontrolled)
     const isFilterVisibilityControlled = controlledShowFilters !== undefined;
     const showFilterRow = isFilterVisibilityControlled
@@ -132,6 +148,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const { sort, handleSort } = useSortState(defaultSort, controlledSort);
     // Filter state
     const { filters, setFilter, clearFilters } = useFilterState(defaultFilters, controlledFilters);
+    // Debounced filters for onFilter callback
+    const debouncedFilters = useTableDebounce(filters, 500);
+    // Track if onFilter should be called (only after user interaction)
+    const shouldCallOnFilter = useRef(false);
+    const filterTypeRef = useRef('filter');
+    const onFilterRef = useRef(onFilter);
     // Pagination state
     const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(paginationConfig?.page || 0, paginationConfig?.pageSize || 10, totalSize ?? data.length);
     // Row selection
@@ -140,6 +162,27 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const { expandedKeys, isExpanded, toggleExpand } = useRowExpansion(expandable?.keyField || keyField, expandable?.defaultExpandedRowKeys, expandable?.expandedRowKeys, expandable?.accordion);
     // Column visibility
     const { visibleColumns, toggleColumn, isColumnHidden } = useColumnVisibility(columns, id);
+    // Keep onFilter ref updated
+    useEffect(() => {
+        onFilterRef.current = onFilter;
+    }, [onFilter]);
+    // Call onFilter when debounced values change (debounced)
+    useEffect(() => {
+        if (!shouldCallOnFilter.current)
+            return;
+        const hasFilters = Object.keys(debouncedFilters).some((key) => debouncedFilters[key] !== null &&
+            debouncedFilters[key] !== undefined &&
+            debouncedFilters[key] !== '');
+        if (debouncedSearchValue || hasFilters) {
+            // For 'search' type, include srText; for 'filter' type, only pass filters
+            const filterData = filterTypeRef.current === 'search'
+                ? { ...debouncedFilters, srText: debouncedSearchValue }
+                : debouncedFilters;
+            onFilterRef.current?.(filterTypeRef.current, filterData, page, pageSize);
+        }
+        // Reset the flag after calling onFilter to prevent duplicate calls
+        shouldCallOnFilter.current = false;
+    }, [debouncedSearchValue, debouncedFilters, page, pageSize]);
     // Process data (filter, sort, paginate)
     const processedData = useMemo(() => {
         if (remote) {
@@ -177,6 +220,9 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const handleSearchChange = useCallback((value) => {
         setInternalSearchValue(value);
         onSearch?.(value);
+        // Enable debounced onFilter callback with 'search' type
+        shouldCallOnFilter.current = true;
+        filterTypeRef.current = 'search';
         onChange?.({ type: 'search', search: value });
     }, [onSearch, onChange]);
     // Handle sort
@@ -192,7 +238,9 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         setFilter(field, value);
         const newFilters = { ...filters, [field]: value };
         onFilterChange?.(newFilters);
-        onFilter?.('filter', newFilters, page, pageSize);
+        // Enable debounced onFilter callback with 'filter' type
+        shouldCallOnFilter.current = true;
+        filterTypeRef.current = 'filter';
         onChange?.({ type: 'filter', filters: newFilters });
     }, [filters, setFilter, onFilterChange, onChange]);
     // Handle clear all filters
@@ -529,7 +577,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         if (toolbar)
             return toolbar;
         const hasFilters = Object.keys(filters).length > 0 || searchValue;
-        return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), "Export CSV"] })), showFilterToggle && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
+        return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), "Export CSV"] })), showFilterToggle && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
                                                         borderBottom: '1px solid #e5e7eb',
                                                         paddingBottom: 8,
                                                         marginBottom: 4,
@@ -547,7 +595,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                                         }
                                                                     }
                                                                 });
-                                                            } }), _jsx("span", { style: { fontWeight: 600 }, children: "Select All" })] }), filteredToggleColumns.map((column) => (_jsxs(ColumnToggleItem, { children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField) }), _jsx("span", { children: column.text })] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && (_jsxs("div", { style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column) => (_jsxs(ColumnToggleItem, { children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField) }), _jsx("span", { children: column.text })] }, column.dataField))) })] }))] })), toolbarRight] })] }));
+                                                            } }), _jsx("span", { style: { fontWeight: 600 }, children: "Select All" })] }), filteredToggleColumns.map((column) => (_jsxs(ColumnToggleItem, { children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField) }), _jsx("span", { children: column.text })] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && (_jsxs("div", { ref: !showFilterToggle ? columnToggleRef : undefined, style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column) => (_jsxs(ColumnToggleItem, { children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField) }), _jsx("span", { children: column.text })] }, column.dataField))) })] }))] })), toolbarRight] })] }));
     };
     // Render pagination
     const renderPagination = () => {

package/lib/src/core-components/src/components/Table/filters.d.ts

@@ -104,6 +104,8 @@ export interface SelectFilterOptions {
     style?: React.CSSProperties;
     /** Default selected value */
     defaultValue?: string;
+    /** Debounce delay in milliseconds */
+    delay?: number;
     /** Options for the select */
     options?: Array<{
         value: string;

package/lib/src/core-components/src/components/Table/filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/filters.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/filters.tsx"],"names":[],"mappings":"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"}

package/lib/src/core-components/src/components/Table/filters.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { styled, css } from 'styled-components';
 import { tokens } from '../../utils/designTokens';
+import { useDebouncedValue } from '../../utils/hooks/useDebouncedValue';
 // Styled components for filters
 const FilterContainer = styled.div `
   display: flex;
@@ -14,6 +15,7 @@ const FilterInputBase = styled.input `
   height: 22px;
   padding: 0 5px;
   font-size: 10px;
+  font-weight: normal;
   color: #000000;
   border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
@@ -41,6 +43,7 @@ const FilterSelectBase = styled.select `
   height: 22px;
   padding: 0 5px;
   font-size: 10px;
+  font-weight: normal;
   color: #000000;
   border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
@@ -64,6 +67,7 @@ const ComparatorSelect = styled.select `
   height: 22px;
   padding: 0 2px;
   font-size: 9px;
+  font-weight: normal;
   border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
   background: white;
@@ -134,22 +138,28 @@ const ToggleButton = styled.button `
  * Internal Text filter component with options support
  */
 const TextFilterComponent = ({ column, value, onChange, options }) => {
-    const { placeholder, className, style, defaultValue, delay = 0, getFilter, onFilter, id, disabled, } = options || {};
+    const { placeholder, className, style, defaultValue, delay = 500, getFilter, onFilter, id, disabled, } = options || {};
+    // Local state for immediate input updates (maintains focus)
     const [internalValue, setInternalValue] = useState(value || defaultValue || '');
-    const timeoutRef = useRef(null);
-    const isFirstRender = useRef(true);
     const internalValueRef = useRef(internalValue);
-    // Keep ref in sync with state
+    const inputRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    const onFilterRef = useRef(onFilter);
+    // Keep refs in sync
     useEffect(() => {
         internalValueRef.current = internalValue;
     }, [internalValue]);
-    // Sync with external value changes
     useEffect(() => {
-        if (!isFirstRender.current) {
-            setInternalValue(value || '');
-        }
-        isFirstRender.current = false;
-    }, [value]);
+        onChangeRef.current = onChange;
+        onFilterRef.current = onFilter;
+    }, [onChange, onFilter]);
+    // Debounce the internal value
+    const [debouncedValue] = useDebouncedValue(internalValue, { wait: delay });
+    // Propagate debounced value to parent
+    useEffect(() => {
+        onChangeRef.current(debouncedValue || null);
+        onFilterRef.current?.(debouncedValue);
+    }, [debouncedValue]);
     // Provide filter instance via getFilter callback - only on mount
     useEffect(() => {
         if (getFilter) {
@@ -159,51 +169,35 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
                 },
                 setValue: (newValue) => {
                     setInternalValue(newValue);
-                    onChange(newValue || null);
-                    onFilter?.(newValue);
+                    onChangeRef.current(newValue || null);
+                    onFilterRef.current?.(newValue);
                 },
                 clear: () => {
                     setInternalValue('');
-                    onChange(null);
-                    onFilter?.('');
+                    onChangeRef.current(null);
+                    onFilterRef.current?.('');
                 },
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getFilter]);
+    // Simple change handler - just update local state
     const handleChange = useCallback((e) => {
-        const newValue = e.target.value;
-        setInternalValue(newValue);
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-                onChange(newValue || null);
-                onFilter?.(newValue);
-            }, delay);
-        }
-        else {
-            onChange(newValue || null);
-            onFilter?.(newValue);
-        }
-    }, [onChange, onFilter, delay]);
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
+        setInternalValue(e.target.value);
     }, []);
+    const inputStyle = {
+        fontWeight: 400,
+        ...style,
+    };
     // If custom className is provided, use plain input to allow full CSS control
     if (className) {
-        return (_jsx("input", { type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
+        return (_jsx("input", { ref: inputRef, type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
                 width: '100%',
+                fontWeight: 400,
                 ...style,
             }, disabled: disabled }));
     }
-    return (_jsx(FilterInputBase, { type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: style, disabled: disabled }));
+    return (_jsx(FilterInputBase, { ref: inputRef, type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: inputStyle, disabled: disabled }));
 };
 export function TextFilter(optionsOrProps) {
     // Check if it's being used as a factory function (options object without column/value/onChange)
@@ -224,24 +218,34 @@ export function TextFilter(optionsOrProps) {
  * Internal Number filter component with options support
  */
 const NumberFilterComponent = ({ column, value, onChange, options }) => {
-    const { placeholder, className, style, defaultValue, delay = 0, defaultComparator = '=', allowDecimal = true, getFilter, onFilter, id, disabled, hideComparator, comparators = ['=', '!=', '>', '>=', '<', '<='], } = options || {};
+    const { placeholder, className, style, defaultValue, delay = 500, defaultComparator = '=', allowDecimal = true, getFilter, onFilter, id, disabled, hideComparator, comparators = ['=', '!=', '>', '>=', '<', '<='], } = options || {};
+    // Local state for immediate input updates (maintains focus)
     const [number, setNumber] = useState(value?.number || defaultValue?.number || '');
     const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
-    const timeoutRef = useRef(null);
     const numberRef = useRef(number);
     const comparatorRef = useRef(comparator);
+    const inputRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    const onFilterRef = useRef(onFilter);
     // Keep refs in sync with state
     useEffect(() => {
         numberRef.current = number;
         comparatorRef.current = comparator;
     }, [number, comparator]);
-    // Sync with external value changes
     useEffect(() => {
-        if (value) {
-            setNumber(value.number || '');
-            setComparator(value.comparator || defaultComparator);
-        }
-    }, [value, defaultComparator]);
+        onChangeRef.current = onChange;
+        onFilterRef.current = onFilter;
+    }, [onChange, onFilter]);
+    // Debounce the number value
+    const [debouncedNumber] = useDebouncedValue(number, { wait: delay });
+    // Propagate debounced value to parent
+    useEffect(() => {
+        const newValue = debouncedNumber
+            ? { number: debouncedNumber, comparator: comparatorRef.current }
+            : null;
+        onChangeRef.current(newValue);
+        onFilterRef.current?.(newValue);
+    }, [debouncedNumber]);
     // Provide filter instance via getFilter callback - only on mount
     useEffect(() => {
         if (getFilter) {
@@ -255,53 +259,34 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
                     if (newValue) {
                         setNumber(newValue.number);
                         setComparator(newValue.comparator);
-                        onChange(newValue);
-                        onFilter?.(newValue);
+                        onChangeRef.current(newValue);
+                        onFilterRef.current?.(newValue);
                     }
                     else {
                         setNumber('');
-                        onChange(null);
-                        onFilter?.(null);
+                        onChangeRef.current(null);
+                        onFilterRef.current?.(null);
                     }
                 },
                 clear: () => {
                     setNumber('');
                     setComparator(defaultComparator);
-                    onChange(null);
-                    onFilter?.(null);
+                    onChangeRef.current(null);
+                    onFilterRef.current?.(null);
                 },
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getFilter]);
-    const handleChange = useCallback((newNumber, newComparator) => {
-        setNumber(newNumber);
+    // Handle comparator change - trigger immediate filter update
+    const handleComparatorChange = useCallback((newComparator) => {
         setComparator(newComparator);
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        const newValue = newNumber
-            ? { number: newNumber, comparator: newComparator }
-            : null;
-        if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-                onChange(newValue);
-                onFilter?.(newValue);
-            }, delay);
+        if (number) {
+            const newValue = { number, comparator: newComparator };
+            onChangeRef.current(newValue);
+            onFilterRef.current?.(newValue);
         }
-        else {
-            onChange(newValue);
-            onFilter?.(newValue);
-        }
-    }, [onChange, onFilter, delay]);
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
+    }, [number]);
     const comparatorSymbols = {
         '=': '=',
         '!=': '≠',
@@ -310,6 +295,11 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
         '<': '<',
         '<=': '≤',
     };
+    const inputStyle = {
+        flex: 1,
+        fontWeight: 400,
+        ...style,
+    };
     const inputProps = {
         type: 'text',
         id,
@@ -318,13 +308,13 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
             const val = e.target.value;
             const pattern = allowDecimal ? /^[0-9.,]*$/ : /^[0-9]*$/;
             if (pattern.test(val)) {
-                handleChange(val, comparator);
+                setNumber(val);
             }
         },
         placeholder: placeholder || column.filterPlaceholder || 'Number...',
         disabled,
     };
-    return (_jsxs(FilterContainer, { children: [!hideComparator && (_jsx(ComparatorSelect, { value: comparator, onChange: (e) => handleChange(number, e.target.value), disabled: disabled, children: comparators.map((comp) => (_jsx("option", { value: comp, children: comparatorSymbols[comp] || comp }, comp))) })), className ? (_jsx("input", { ...inputProps, className: className, style: { flex: 1, width: '100%', ...style } })) : (_jsx(FilterInputBase, { ...inputProps, style: { flex: 1, ...style } }))] }));
+    return (_jsxs(FilterContainer, { children: [!hideComparator && (_jsx(ComparatorSelect, { value: comparator, onChange: (e) => handleComparatorChange(e.target.value), disabled: disabled, children: comparators.map((comp) => (_jsx("option", { value: comp, children: comparatorSymbols[comp] || comp }, comp))) })), className ? (_jsx("input", { ref: inputRef, ...inputProps, className: className, style: { flex: 1, width: '100%', fontWeight: 400, ...style } })) : (_jsx(FilterInputBase, { ref: inputRef, ...inputProps, style: inputStyle }))] }));
 };
 export function NumberFilter(optionsOrProps) {
     if (!('column' in optionsOrProps) &&
@@ -343,24 +333,38 @@ export function NumberFilter(optionsOrProps) {
  */
 const DateFilterComponent = ({ column, value, onChange, options }) => {
     const { className, style, defaultValue, defaultComparator = '=', defaultRangeMode = false, getFilter, onFilter, id, disabled, minDate, maxDate, } = options || {};
+    // Local state for immediate updates
     const [startDate, setStartDate] = useState(value?.startDate || defaultValue?.startDate || '');
     const [endDate, setEndDate] = useState(value?.endDate || defaultValue?.endDate || '');
     const [diffFlag, setDiffFlag] = useState(value?.diffFlag ?? defaultValue?.diffFlag ?? defaultRangeMode);
     const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
     const stateRef = useRef({ startDate, endDate, diffFlag, comparator });
-    // Keep ref in sync with state
+    const onChangeRef = useRef(onChange);
+    const onFilterRef = useRef(onFilter);
+    // Keep refs in sync with state
     useEffect(() => {
         stateRef.current = { startDate, endDate, diffFlag, comparator };
     }, [startDate, endDate, diffFlag, comparator]);
-    // Sync with external value changes
     useEffect(() => {
-        if (value) {
-            setStartDate(value.startDate || '');
-            setEndDate(value.endDate || '');
-            setDiffFlag(value.diffFlag ?? defaultRangeMode);
-            setComparator(value.comparator || defaultComparator);
-        }
-    }, [value, defaultRangeMode, defaultComparator]);
+        onChangeRef.current = onChange;
+        onFilterRef.current = onFilter;
+    }, [onChange, onFilter]);
+    // Debounce the date values
+    const [debouncedStartDate] = useDebouncedValue(startDate, { wait: 500 });
+    const [debouncedEndDate] = useDebouncedValue(endDate, { wait: 500 });
+    // Propagate debounced value to parent
+    useEffect(() => {
+        const newValue = debouncedStartDate || debouncedEndDate
+            ? {
+                startDate: debouncedStartDate,
+                endDate: debouncedEndDate,
+                diffFlag,
+                comparator,
+            }
+            : null;
+        onChangeRef.current(newValue);
+        onFilterRef.current?.(newValue);
+    }, [debouncedStartDate, debouncedEndDate, diffFlag, comparator]);
     // Provide filter instance via getFilter callback - only on mount
     useEffect(() => {
         if (getFilter) {
@@ -377,14 +381,14 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
                         setEndDate(newValue.endDate || '');
                         setDiffFlag(newValue.diffFlag ?? defaultRangeMode);
                         setComparator(newValue.comparator || defaultComparator);
-                        onChange(newValue);
-                        onFilter?.(newValue);
+                        onChangeRef.current(newValue);
+                        onFilterRef.current?.(newValue);
                     }
                     else {
                         setStartDate('');
                         setEndDate('');
-                        onChange(null);
-                        onFilter?.(null);
+                        onChangeRef.current(null);
+                        onFilterRef.current?.(null);
                     }
                 },
                 clear: () => {
@@ -392,39 +396,27 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
                     setEndDate('');
                     setDiffFlag(defaultRangeMode);
                     setComparator(defaultComparator);
-                    onChange(null);
-                    onFilter?.(null);
+                    onChangeRef.current(null);
+                    onFilterRef.current?.(null);
                 },
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getFilter]);
-    const handleChange = useCallback((updates) => {
-        const newValue = {
-            startDate,
-            endDate,
-            diffFlag,
-            comparator,
-            ...updates,
-        };
-        if (updates.startDate !== undefined)
-            setStartDate(updates.startDate);
-        if (updates.endDate !== undefined)
-            setEndDate(updates.endDate);
-        if (updates.diffFlag !== undefined)
-            setDiffFlag(updates.diffFlag);
-        if (updates.comparator !== undefined)
-            setComparator(updates.comparator);
-        if (newValue.startDate || newValue.endDate) {
-            onChange(newValue);
-            onFilter?.(newValue);
-        }
-        else {
-            onChange(null);
-            onFilter?.(null);
-        }
-    }, [startDate, endDate, diffFlag, comparator, onChange, onFilter]);
-    return (_jsxs(FilterContainer, { className: className, style: style, children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: () => handleChange({ diffFlag: !diffFlag }), title: "Date range mode", disabled: disabled, children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: (e) => handleChange({ comparator: e.target.value }), disabled: disabled, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", id: id, value: startDate, onChange: (e) => handleChange({ startDate: e.target.value }), disabled: disabled, min: minDate, max: maxDate }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: (e) => handleChange({ endDate: e.target.value }), disabled: disabled, min: minDate, max: maxDate })] }))] }));
+    // Simple change handlers - just update local state
+    const handleStartDateChange = useCallback((e) => {
+        setStartDate(e.target.value);
+    }, []);
+    const handleEndDateChange = useCallback((e) => {
+        setEndDate(e.target.value);
+    }, []);
+    const handleDiffFlagChange = useCallback(() => {
+        setDiffFlag((prev) => !prev);
+    }, []);
+    const handleComparatorChange = useCallback((e) => {
+        setComparator(e.target.value);
+    }, []);
+    return (_jsxs(FilterContainer, { className: className, style: style, children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: handleDiffFlagChange, title: "Date range mode", disabled: disabled, children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: handleComparatorChange, disabled: disabled, style: { fontWeight: 400 }, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", id: id, value: startDate, onChange: handleStartDateChange, disabled: disabled, min: minDate, max: maxDate, style: { fontWeight: 400 } }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12, fontWeight: 400 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: handleEndDateChange, disabled: disabled, min: minDate, max: maxDate, style: { fontWeight: 400 } })] }))] }));
 };
 export function DateFilter(optionsOrProps) {
     if (!('column' in optionsOrProps) &&
@@ -442,17 +434,27 @@ export function DateFilter(optionsOrProps) {
  * Internal Select filter component with options support
  */
 const SelectFilterComponent = ({ column, value, onChange, options }) => {
-    const { placeholder = 'All', className, style, defaultValue, options: customOptions, getFilter, onFilter, id, disabled, } = options || {};
+    const { placeholder = 'All', className, style, defaultValue, delay = 300, options: customOptions, getFilter, onFilter, id, disabled, } = options || {};
+    // Local state for immediate updates
     const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
     const selectedValueRef = useRef(selectedValue);
-    // Keep ref in sync with state
+    const onChangeRef = useRef(onChange);
+    const onFilterRef = useRef(onFilter);
+    // Keep refs in sync with state
     useEffect(() => {
         selectedValueRef.current = selectedValue;
     }, [selectedValue]);
-    // Sync with external value changes
     useEffect(() => {
-        setSelectedValue(value || '');
-    }, [value]);
+        onChangeRef.current = onChange;
+        onFilterRef.current = onFilter;
+    }, [onChange, onFilter]);
+    // Debounce the selected value
+    const [debouncedValue] = useDebouncedValue(selectedValue, { wait: delay });
+    // Propagate debounced value to parent
+    useEffect(() => {
+        onChangeRef.current(debouncedValue || null);
+        onFilterRef.current?.(debouncedValue || null);
+    }, [debouncedValue]);
     // Provide filter instance via getFilter callback - only on mount
     useEffect(() => {
         if (getFilter) {
@@ -462,32 +464,30 @@ const SelectFilterComponent = ({ column, value, onChange, options }) => {
                 },
                 setValue: (newValue) => {
                     setSelectedValue(newValue || '');
-                    onChange(newValue);
-                    onFilter?.(newValue);
+                    onChangeRef.current(newValue);
+                    onFilterRef.current?.(newValue);
                 },
                 clear: () => {
                     setSelectedValue('');
-                    onChange(null);
-                    onFilter?.(null);
+                    onChangeRef.current(null);
+                    onFilterRef.current?.(null);
                 },
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getFilter]);
+    // Simple change handler - just update local state
     const handleChange = useCallback((e) => {
-        const newValue = e.target.value || null;
         setSelectedValue(e.target.value);
-        onChange(newValue);
-        onFilter?.(newValue);
-    }, [onChange, onFilter]);
+    }, []);
     // Use custom options if provided, otherwise fall back to column.filterOptions
     const selectOptions = customOptions || column.filterOptions || [];
     const selectContent = (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: placeholder }), selectOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
     // If custom className is provided, use plain select to allow full CSS control
     if (className) {
-        return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className, style: { width: '100%', ...style }, disabled: disabled, children: selectContent }));
+        return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className, style: { width: '100%', fontWeight: 400, ...style }, disabled: disabled, children: selectContent }));
     }
-    return (_jsx(FilterSelectBase, { id: id, value: selectedValue, onChange: handleChange, style: style, disabled: disabled, children: selectContent }));
+    return (_jsx(FilterSelectBase, { id: id, value: selectedValue, onChange: handleChange, style: { fontWeight: 400, ...style }, disabled: disabled, children: selectContent }));
 };
 export function SelectFilter(optionsOrProps) {
     if (!('column' in optionsOrProps) &&

package/lib/src/core-components/src/tc.global.css

@@ -163,6 +163,16 @@
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.filter,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "private": false,
   "description": "Easy use restyle components",
   "author": {