react-restyle-components 0.3.65 → 0.3.67

package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.js

@@ -1,108 +1,298 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
+import { Icon } from '../../';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-const LI_ELEMENT_HEIGHT = 34;
-export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
-    const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));
+const DEFAULT_ITEM_HEIGHT = 34;
+export const Autocomplete = ({ value = '', onValueChange, options = [], filterConfig = {}, displayConfig = {}, keyboardConfig = {}, uiConfig = {}, hasError = false, disabled = false, name, className, style, inputClassName, onInputValueChange, onOpen, onClose, onSelect, autoFocus = false, }) => {
+    // Merge configs with defaults
+    const { enabled: filterEnabled = true, caseSensitive = false, filterFn, minCharacters = 0, } = filterConfig;
+    const { renderOption, renderEmptyState, highlightActive = true, activeOptionClassName, optionClassName, } = displayConfig;
+    const { enabled: keyboardEnabled = true, selectKeys = ['Enter'], closeKeys = ['Escape'], enterToSelect = true, escapeToClose = true, } = keyboardConfig;
+    const { placeholder = 'Search...', emptyStateMessage = 'Not Found Result!!', itemHeight = DEFAULT_ITEM_HEIGHT, maxHeight, zIndex = 999, showOnFocus = true, showOnClick = true, autoSelectFirst = true, } = uiConfig;
+    // Helper to get option label (moved outside to avoid dependency issues)
+    const getOptionLabel = useCallback((option) => {
+        return typeof option === 'string' ? option : option.label;
+    }, []);
+    // Helper to get option value (moved outside to avoid dependency issues)
+    const getOptionValue = useCallback((option) => {
+        return typeof option === 'string' ? option : String(option.value);
+    }, []);
+    // Find initial active option index
+    const getInitialActiveIndex = useCallback(() => {
+        if (!value || options.length === 0)
+            return 0;
+        const index = options.findIndex((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
+        return index !== -1 ? index : 0;
+    }, [value, options, getOptionValue, getOptionLabel]);
+    const [activeOption, setActiveOption] = useState(() => {
+        if (!value || options.length === 0)
+            return 0;
+        const index = options.findIndex((opt) => (typeof opt === 'string' ? opt : String(opt.value)) === value ||
+            (typeof opt === 'string' ? opt : opt.label) === value);
+        return index !== -1 ? index : 0;
+    });
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [shouldShowList, setShouldShowList] = useState(false);
     const [searchValue, setSearchValue] = useState(value);
     const inputRef = useRef(null);
     const listRef = useRef(null);
+    // Filter function
+    const filterOptions = useCallback((searchValue) => {
+        if (!filterEnabled)
+            return options;
+        if (searchValue.length < minCharacters)
+            return options;
+        if (filterFn) {
+            return options.filter((option) => filterFn(option, searchValue));
+        }
+        const lowerSearch = caseSensitive
+            ? searchValue
+            : searchValue.toLowerCase();
+        return options.filter((option) => {
+            const label = getOptionLabel(option);
+            const matchText = caseSensitive ? label : label.toLowerCase();
+            return matchText.indexOf(lowerSearch) > -1;
+        });
+    }, [
+        options,
+        filterEnabled,
+        caseSensitive,
+        filterFn,
+        minCharacters,
+        getOptionLabel,
+    ]);
     const onInputChange = useCallback((event) => {
         const input = event.target.value;
-        if (input != '') {
-            const newFilteredOptions = options.filter((option) => option.toLowerCase().indexOf(input.toLowerCase()) > -1);
-            setFilteredOptions(newFilteredOptions);
-        }
-        else {
-            setFilteredOptions(options);
+        // Call onInputValueChange callback
+        if (onInputValueChange) {
+            onInputValueChange(input);
         }
+        // Filter options
+        const filtered = filterOptions(input);
+        setFilteredOptions(filtered);
         setActiveOption(0);
         setShouldShowList(true);
         setSearchValue(input);
-    }, [
-        setActiveOption,
-        setFilteredOptions,
-        setShouldShowList,
-        setSearchValue,
-        onValueChange,
-    ]);
-    const onOptionClick = useCallback((event) => {
-        const symbol = event.currentTarget.innerText || event.currentTarget.textContent || '';
+        // Auto-select first option if enabled
+        if (autoSelectFirst && filtered.length > 0) {
+            onValueChange(filtered[0]);
+        }
+    }, [filterOptions, onInputValueChange, onValueChange, autoSelectFirst]);
+    const handleOptionSelect = useCallback((option, index) => {
+        const label = getOptionLabel(option);
         setShouldShowList(false);
         setActiveOption(0);
         setFilteredOptions([]);
-        setSearchValue(symbol);
-        onValueChange(symbol);
-    }, [
-        setShouldShowList,
-        setActiveOption,
-        setFilteredOptions,
-        setSearchValue,
-        onValueChange,
-    ]);
+        setSearchValue(label);
+        onValueChange(option);
+        if (onSelect) {
+            onSelect(option);
+        }
+        if (onClose) {
+            onClose();
+        }
+    }, [onValueChange, onSelect, onClose]);
+    const onOptionClick = useCallback((event) => {
+        const index = parseInt(event.currentTarget.getAttribute('data-index') || '0', 10);
+        const option = filteredOptions[index];
+        if (option) {
+            handleOptionSelect(option, index);
+        }
+    }, [filteredOptions, handleOptionSelect]);
     const onKeyDown = useCallback((event) => {
-        let selectedItem = '';
-        if (event.keyCode === 38) {
-            // arrow up
+        if (!keyboardEnabled)
+            return;
+        const key = event.key;
+        const keyCode = event.keyCode;
+        // Arrow Up
+        if (keyCode === 38 || key === 'ArrowUp') {
             event.preventDefault();
-            if (activeOption === 0) {
-                return;
-            }
-            else {
-                selectedItem = filteredOptions[activeOption - 1];
-                setSearchValue(filteredOptions[activeOption - 1]);
-                setActiveOption(activeOption - 1);
+            if (activeOption > 0) {
+                const newIndex = activeOption - 1;
+                const option = filteredOptions[newIndex];
+                setActiveOption(newIndex);
+                setSearchValue(getOptionLabel(option));
                 listRef.current?.scroll({
-                    top: LI_ELEMENT_HEIGHT * (activeOption - 1),
+                    top: itemHeight * newIndex,
+                    behavior: 'smooth',
                 });
             }
+            return;
         }
-        else if (event.keyCode === 40) {
-            // arrow down
+        // Arrow Down
+        if (keyCode === 40 || key === 'ArrowDown') {
             event.preventDefault();
-            if (activeOption === filteredOptions.length - 1) {
-                return;
-            }
-            else {
-                selectedItem = filteredOptions[activeOption + 1];
-                setSearchValue(filteredOptions[activeOption + 1]);
-                setActiveOption(activeOption + 1);
+            if (activeOption < filteredOptions.length - 1) {
+                const newIndex = activeOption + 1;
+                const option = filteredOptions[newIndex];
+                setActiveOption(newIndex);
+                setSearchValue(getOptionLabel(option));
                 listRef.current?.scroll({
-                    top: LI_ELEMENT_HEIGHT * (activeOption + 1),
+                    top: itemHeight * newIndex,
+                    behavior: 'smooth',
                 });
             }
+            return;
+        }
+        // Enter to select
+        if ((keyCode === 13 || key === 'Enter') && enterToSelect) {
+            event.preventDefault();
+            if (filteredOptions.length > 0 && activeOption >= 0) {
+                const option = filteredOptions[activeOption];
+                handleOptionSelect(option, activeOption);
+            }
+            return;
         }
-        if (Object.keys(selectedItem)?.length > 0) {
-            onValueChange(selectedItem);
+        // Escape to close
+        if ((keyCode === 27 || key === 'Escape') && escapeToClose) {
+            event.preventDefault();
+            setShouldShowList(false);
+            if (onClose) {
+                onClose();
+            }
+            return;
+        }
+        // Other select keys
+        if (selectKeys.includes(key) &&
+            filteredOptions.length > 0 &&
+            activeOption >= 0) {
+            event.preventDefault();
+            const option = filteredOptions[activeOption];
+            handleOptionSelect(option, activeOption);
+        }
+        // Close keys
+        if (closeKeys.includes(key)) {
+            event.preventDefault();
+            setShouldShowList(false);
+            if (onClose) {
+                onClose();
+            }
         }
     }, [
-        setActiveOption,
-        setSearchValue,
-        filteredOptions,
+        keyboardEnabled,
         activeOption,
-        onValueChange,
+        filteredOptions,
+        itemHeight,
+        enterToSelect,
+        escapeToClose,
+        selectKeys,
+        closeKeys,
+        handleOptionSelect,
+        onClose,
     ]);
+    const handleInputFocus = useCallback(() => {
+        if (showOnFocus && !shouldShowList) {
+            setShouldShowList(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    }, [showOnFocus, shouldShowList, onOpen]);
+    const handleInputClick = useCallback(() => {
+        if (showOnClick && !shouldShowList) {
+            setShouldShowList(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    }, [showOnClick, shouldShowList, onOpen]);
     const renderList = () => {
-        return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
-                            let className = cn(s['flex'], s['gap-2'], s['p-2']);
-                            if (index === activeOption) {
-                                className = cn(className, s['font-bold']);
-                            }
-                            return (_jsx("li", { className: className, role: "listitem", onClick: onOptionClick, children: option }, index));
-                        }) })) : (_jsx("div", { className: cn(s['flex'], s['bg-gray-200'], s['w-full'], s['p-2']), children: _jsx("span", { children: "Not Found Result!!" }) })) }) })) : (_jsx(_Fragment, {})) }));
+        if (!shouldShowList)
+            return null;
+        return (_jsxs("div", { className: cn(s['absolute'], s['w-full'], s['mt-1'], s['rounded-lg'], s['bg-white'], s['border'], s['border-gray-200'], s['shadow-lg'], s['overflow-hidden'], 'animate-fade-in'), style: {
+                zIndex,
+                animation: 'fadeIn 0.15s ease-out',
+                transformOrigin: 'top',
+            }, children: [_jsx("style", { children: `
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+              transform: translateY(-8px) scale(0.98);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0) scale(1);
+            }
+          }
+        ` }), filteredOptions.length > 0 ? (_jsx("ul", { role: "listbox", className: cn(s['flex'], s['flex-col'], s['py-1'], s['w-full'], s['overflow-y-auto'], s['overflow-x-hidden']), id: "autocomplete-list", ref: listRef, style: {
+                        maxHeight: maxHeight || '300px',
+                        scrollbarWidth: 'thin',
+                    }, children: filteredOptions.map((option, index) => {
+                        const isActive = highlightActive && index === activeOption;
+                        let itemClassName = cn(s['flex'], s['items-center'], s['px-4'], s['py-3'], s['cursor-pointer'], s['text-sm'], s['transition-all'], s['duration-150'], s['ease-in-out'], optionClassName, 'hover:bg-blue-50', 'hover:text-blue-700');
+                        if (isActive && highlightActive) {
+                            itemClassName = cn(itemClassName, s['bg-blue-50'], s['text-blue-700'], s['font-medium'], 'border-l-4', 'border-blue-500', activeOptionClassName);
+                        }
+                        return (_jsx("li", { className: itemClassName, role: "option", "aria-selected": isActive, id: `autocomplete-option-${index}`, "data-index": index, onClick: onOptionClick, onMouseEnter: () => setActiveOption(index), style: {
+                                transition: 'background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease',
+                            }, children: renderOption ? (renderOption(option, index, isActive)) : (_jsx("span", { className: cn(s['text-gray-700'], s['select-none']), children: getOptionLabel(option) })) }, index));
+                    }) })) : (_jsx("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], s['py-8'], s['px-4'], s['text-center']), children: renderEmptyState ? (renderEmptyState()) : (_jsxs(_Fragment, { children: [_jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
+                                    size: 32,
+                                    color: '#9ca3af',
+                                } }), _jsx("p", { className: cn(s['mt-3'], s['text-sm'], s['font-medium'], s['text-gray-500']), children: emptyStateMessage }), _jsx("p", { className: cn(s['mt-1'], s['text-xs'], s['text-gray-400']), children: "Try adjusting your search" })] })) }))] }));
     };
+    // Update filtered options when options change
     useEffect(() => {
-        // this only works on click when inside timeout
-        setTimeout(() => {
-            inputRef.current?.select();
-        }, 0);
-        filteredOptions[0] && onValueChange(filteredOptions[0]);
-        // setShouldShowList(true);
-    }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative']), children: [_jsx("div", { className: cn(s['flex'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md']), children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: cn(s['flex'], s['focus:outline-none']), placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
-                            setShouldShowList(true);
-                        } }) }), _jsx("div", { className: cn(s['flex']), children: renderList() })] }) }));
+        const filtered = filterOptions(searchValue);
+        setFilteredOptions(filtered);
+        // Update active option if current value is not in filtered options
+        if (filtered.length > 0) {
+            const currentIndex = filtered.findIndex((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
+            if (currentIndex !== -1 && currentIndex !== activeOption) {
+                setActiveOption(currentIndex);
+            }
+        }
+    }, [options, searchValue, filterOptions, value, activeOption]);
+    // Auto-focus and auto-select first option on mount
+    useEffect(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            }, 0);
+        }
+        if (autoSelectFirst && filteredOptions.length > 0 && !value) {
+            onValueChange(filteredOptions[0]);
+        }
+    }, [autoFocus, autoSelectFirst, filteredOptions, value, onValueChange]);
+    // Update search value when value prop changes
+    useEffect(() => {
+        if (value !== searchValue) {
+            const matchingOption = options.find((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
+            if (matchingOption) {
+                setSearchValue(getOptionLabel(matchingOption));
+            }
+            else {
+                setSearchValue(value);
+            }
+        }
+    }, [value, options, searchValue]);
+    return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative'], s['w-full'], className), style: style, children: [_jsx("div", { className: cn(s['flex'], s['items-center'], s['relative'], s['w-full'], s['bg-white'], s['border'], s['rounded-lg'], s['shadow-sm'], s['transition-all'], s['duration-200'], s['ease-in-out'], {
+                    [s['border-red-500']]: hasError,
+                    [s['border-gray-300']]: !hasError && !shouldShowList,
+                    'border-blue-500': !hasError && shouldShowList,
+                    'ring-2': !hasError && shouldShowList,
+                    'ring-blue-200': !hasError && shouldShowList,
+                    [s['opacity-50']]: disabled,
+                    [s['cursor-not-allowed']]: disabled,
+                    'hover:border-gray-400': !hasError && !disabled && !shouldShowList,
+                }), style: {
+                    boxShadow: shouldShowList && !hasError
+                        ? '0 0 0 3px rgba(59, 130, 246, 0.1)'
+                        : '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                }, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['px-3'], s['py-2']), children: [_jsx("div", { className: cn(s['mr-2'], s['flex-shrink-0']), children: _jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
+                                    size: 18,
+                                    color: shouldShowList ? '#3b82f6' : '#9ca3af',
+                                } }) }), _jsx("input", { type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": shouldShowList, "aria-controls": "autocomplete-list", "aria-activedescendant": shouldShowList && activeOption >= 0
+                                ? `autocomplete-option-${activeOption}`
+                                : undefined, name: name || 'autocomplete-input', className: cn(s['flex'], s['flex-1'], s['w-full'], s['bg-transparent'], s['text-sm'], s['text-gray-700'], s['placeholder-gray-400'], s['focus:outline-none'], s['border-none'], s['focus:ring-0'], inputClassName), placeholder: placeholder, onChange: onInputChange, onKeyDown: onKeyDown, onFocus: handleInputFocus, onClick: handleInputClick, value: searchValue, ref: inputRef, disabled: disabled, autoComplete: "off", style: {
+                                cursor: disabled ? 'not-allowed' : 'text',
+                            } }), _jsx("div", { className: cn(s['ml-2'], s['flex-shrink-0']), style: { transition: 'transform 0.2s ease' }, children: shouldShowList ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                    size: 16,
+                                    color: '#3b82f6',
+                                } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                    size: 16,
+                                    color: '#9ca3af',
+                                } })) })] }) }), renderList()] }));
 };

package/lib/src/core-components/src/components/Loader/loader.component.d.ts

@@ -1,6 +1,18 @@
+export type LoaderVariant = 'spinner' | 'dots' | 'bars' | 'pulse';
+export type LoaderSize = 'sm' | 'md' | 'lg';
 export interface LoadingAnimateSpinProps {
+    /** Wrapper className for positioning */
     classWarper?: string;
+    /** Additional className for the loader element */
     className?: string;
+    /** Variant of loader: spinner, dots, bars, or pulse */
+    variant?: LoaderVariant;
+    /** Size of the loader: sm, md, or lg */
+    size?: LoaderSize;
+    /** Color variant - uses CSS classes from tc.module.css */
+    color?: 'blue' | 'green' | 'gray' | 'primary';
+    /** Accessibility label */
+    'aria-label'?: string;
 }
-export declare const LoadingAnimateSpin: ({ classWarper, className, }: LoadingAnimateSpinProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingAnimateSpin: ({ classWarper, className, variant, size, color, "aria-label": ariaLabel, }: LoadingAnimateSpinProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loader.component.d.ts.map

package/lib/src/core-components/src/components/Loader/loader.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Loader/loader.component.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gCAG5B,uBAAuB,4CAwBzB,CAAC"}
+{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Loader/loader.component.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9C,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuCD,eAAO,MAAM,kBAAkB,+EAO5B,uBAAuB,4CAsJzB,CAAC"}

package/lib/src/core-components/src/components/Loader/loader.component.js

@@ -1,6 +1,124 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
-export const LoadingAnimateSpin = ({ classWarper = '', className = '', }) => {
-    return (_jsx("div", { className: cn(s.absolute, s['justify-center'], s['items-center'], classWarper), children: _jsx("div", { className: cn(s['w-10'], s['h-10'], s['border-t-2'], s['border-b-2'], s['border-blue-500'], s['rounded-full'], s['animate-spin'], className) }) }));
+const sizeClasses = {
+    sm: {
+        wrapper: cn(s['w-4'], s['h-4']),
+        spinner: cn(s['w-4'], s['h-4']),
+        dots: cn(s['w-1'], s['h-1']),
+        bars: cn(s['w-1'], s['h-6']),
+        pulse: cn(s['w-4'], s['h-4']),
+    },
+    md: {
+        wrapper: cn(s['w-8'], s['h-8']),
+        spinner: cn(s['w-8'], s['h-8']),
+        dots: cn(s['w-2'], s['h-2']),
+        bars: cn(s['w-1'], s['h-8']),
+        pulse: cn(s['w-8'], s['h-8']),
+    },
+    lg: {
+        wrapper: cn(s['w-10'], s['h-10']),
+        spinner: cn(s['w-10'], s['h-10']),
+        dots: cn(s['w-3'], s['h-3']),
+        bars: cn(s['w-2'], s['h-10']),
+        pulse: cn(s['w-10'], s['h-10']),
+    },
+};
+const getColorValue = (color) => {
+    const colors = {
+        blue: 'rgb(59 130 246)',
+        green: 'rgb(34 197 94)',
+        gray: 'rgb(156 163 175)',
+        primary: 'rgb(59 130 246)',
+    };
+    return colors[color] || colors.blue;
+};
+export const LoadingAnimateSpin = ({ classWarper = '', className = '', variant = 'spinner', size = 'md', color = 'blue', 'aria-label': ariaLabel = 'Loading', }) => {
+    const sizeConfig = sizeClasses[size];
+    const renderSpinner = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(sizeConfig.spinner, s['rounded-full'], className), style: {
+                borderWidth: '2px',
+                borderStyle: 'solid',
+                borderTopColor: colorValue,
+                borderRightColor: colorValue,
+                borderBottomColor: 'transparent',
+                borderLeftColor: 'transparent',
+                animation: 'spin 1s linear infinite',
+            }, "aria-label": ariaLabel, role: "status" }));
+    };
+    const renderDots = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(s['flex'], s['gap-2'], s['items-center'], className), "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.dots, s['rounded-full']), style: {
+                    backgroundColor: colorValue,
+                    animation: `bounce 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite`,
+                    animationDelay: `${i * 0.16}s`,
+                    animationFillMode: 'both',
+                } }, i))) }));
+    };
+    const renderBars = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(s['flex'], s['gap-1'], s['items-center'], className), "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.bars, s.rounded), style: {
+                    backgroundColor: colorValue,
+                    borderRadius: '0.125rem',
+                    animation: `pulse 1.2s ease-in-out infinite`,
+                    animationDelay: `${i * 0.15}s`,
+                    animationFillMode: 'both',
+                } }, i))) }));
+    };
+    const renderPulse = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(sizeConfig.pulse, s['rounded-full'], className), style: {
+                backgroundColor: colorValue,
+                animation: `pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,
+                animationFillMode: 'both',
+            }, "aria-label": ariaLabel, role: "status" }));
+    };
+    const renderLoader = () => {
+        switch (variant) {
+            case 'dots':
+                return renderDots();
+            case 'bars':
+                return renderBars();
+            case 'pulse':
+                return renderPulse();
+            case 'spinner':
+            default:
+                return renderSpinner();
+        }
+    };
+    return (_jsxs("div", { className: cn(s['absolute'], s['inset-0'], s['flex'], s['justify-center'], s['items-center'], classWarper), children: [_jsx("style", { children: `
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        @keyframes pulse {
+          0% {
+            opacity: 1;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.5;
+            transform: scale(0.95);
+          }
+          100% {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        @keyframes bounce {
+          0%, 100% {
+            transform: translateY(0) scale(1);
+            opacity: 1;
+          }
+          50% {
+            transform: translateY(-10px) scale(1.1);
+            opacity: 0.8;
+          }
+        }
+      ` }), renderLoader()] }));
 };

package/lib/src/core-components/src/components/check-box/checkBox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkBox.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/check-box/checkBox.component.tsx"],"names":[],"mappings":"AAMA,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,wDAOlB,aAAa,4CAuCf,CAAC"}
+{"version":3,"file":"checkBox.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/check-box/checkBox.component.tsx"],"names":[],"mappings":"AAMA,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,wDAOlB,aAAa,4CAoCf,CAAC"}

package/lib/src/core-components/src/components/check-box/checkBox.component.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
-import { UnCheckbox, CheckedBox } from '../../library/assets/svg';
 import { InputWrapper } from '../Form/form.component';
+import { Icon } from '..';
 export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, fill = '#E7503D', stroke = '#E7503D', onChange, }) => {
     const [list, setList] = useState(data);
     const width = 20;
@@ -16,5 +16,5 @@ export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked
                 });
                 setList(result);
                 onChange(result?.filter((item) => item.checked));
-            }, children: [_jsx("div", { className: cn(s.flex, s['mt-1']), children: item.checked ? (_jsx(CheckedBox, { width: width, height: width, fill: fill, stroke: stroke })) : (_jsx(UnCheckbox, { width: width, height: width })) }), _jsx("span", { children: item?.title })] }, index))) }));
+            }, children: [_jsx("div", { className: cn(s.flex, s['gap-2']), children: item.checked ? (_jsx(Icon, { nameIcon: "ImCheckboxChecked" })) : (_jsx(Icon, { nameIcon: "ImCheckboxUnchecked" })) }), _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['ml-2']), children: item?.title })] }, index))) }));
 };

package/lib/src/core-components/src/components/date-picker/date-picker.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import { DatePickerSvg } from '../../library/assets/svg';
+import { Icon } from '..';
 import dayjs from 'dayjs';
 import { InputWrapper } from '../Form/form.component';
 import s from '../../tc.module.css';
@@ -10,7 +10,7 @@ import { cn } from '../../utils';
 export const DatePickerComp = ({ title = 'Title', className, disable, value, showFormat = 'yyyy-MM-dd', placeholder = 'Select Date', }) => {
     const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
     const CustomInput = forwardRef((props, ref) => {
-        return (_jsxs("div", { onClick: !disable && props.onClick, ref: ref, className: cn(s['border-gray-light'], s['place-items-center'], s['border'], s['rounded-md'], s['px-2'], s.flex), children: [_jsx("label", { className: cn(s['mr-3'], s['font-arimaRegular'], s['text-primaryCharcoal'], s['text-lg']), children: props.value || props.placeholder }), _jsx(DatePickerSvg, { width: 15, height: 15 })] }));
+        return (_jsxs("div", { onClick: !disable && props.onClick, ref: ref, className: cn(s['border-gray-light'], s['place-items-center'], s['border'], s['rounded-md'], s['px-2'], s.flex), children: [_jsx("label", { className: cn(s['mr-3'], s['font-arimaRegular'], s['text-primaryCharcoal'], s['text-lg']), children: props.value || props.placeholder }), _jsx(Icon, { nameIcon: "ImCalendar" })] }));
     });
     CustomInput.displayName = 'CustomInput';
     const handleChanges = (date) => {

package/lib/src/core-components/src/components/radio/radio.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { CheckedRadio, UncheckRadio } from '../../library/assets/svg';
+import { Icon } from '..';
 import { InputWrapper } from '../Form/form.component';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
@@ -16,5 +16,5 @@ export const Radio = ({ title = 'Source', data = [], className, onChange, }) =>
                     });
                     setList(result);
                     onChange(result?.find((item) => item.checked));
-                }, children: _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['gap-1'], s['items-center']), children: [item.checked ? (_jsx(CheckedRadio, { width: width, height: width })) : (_jsx(UncheckRadio, { width: width, height: width })), _jsx("span", { className: cn(s['text-4xs']), children: item?.title })] }) }, index))) }) }));
+                }, children: _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['gap-1'], s['items-center']), children: [item.checked ? (_jsx(Icon, { nameIcon: "ImRadioChecked" })) : (_jsx(Icon, { nameIcon: "ImRadioUnchecked" })), _jsx("span", { className: cn(s['text-4xs']), children: item?.title })] }) }, index))) }) }));
 };