npm - react-restyle-components - Versions diffs - 0.4.8 → 0.4.10 - Mend

react-restyle-components 0.4.8 → 0.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"~~AAQA~~,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,~~4CA4NvD~~,CAAC"}
1	+ {"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAsIA,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CAsWvD,CAAC"}

@@ -1,21 +1,136 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable  */
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { Icon } from '../../Icon/Icon';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
 import { debounce } from '@techabl/core-utils';
+// Inline styles for animations (CSS-in-JS approach for portability)
+const animationStyles = {
+    dropdown: {
+        base: {
+            transformOrigin: 'top center',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out',
+        },
+        entering: {
+            opacity: 1,
+            transform: 'scaleY(1) translateY(0)',
+        },
+        exiting: {
+            opacity: 0,
+            transform: 'scaleY(0.95) translateY(-8px)',
+        },
+    },
+    listItem: {
+        base: {
+            transition: 'opacity 180ms ease-out, transform 180ms ease-out, background-color 150ms ease',
+            cursor: 'pointer',
+        },
+        visible: {
+            opacity: 1,
+            transform: 'translateX(0)',
+        },
+        hidden: {
+            opacity: 0,
+            transform: 'translateX(-12px)',
+        },
+        hover: {
+            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        },
+    },
+    skeleton: {
+        base: {
+            background: 'linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%)',
+            backgroundSize: '200% 100%',
+            animation: 'shimmer 1.5s infinite',
+            borderRadius: '4px',
+        },
+    },
+    spinner: {
+        animation: 'spin 0.8s linear infinite',
+        border: '2px solid #e5e7eb',
+        borderTopColor: '#3b82f6',
+        borderRadius: '50%',
+        width: '16px',
+        height: '16px',
+    },
+    fadeContent: {
+        base: {
+            transition: 'opacity 200ms ease-out',
+        },
+        loading: {
+            opacity: 0.5,
+        },
+        ready: {
+            opacity: 1,
+        },
+    },
+};
+// Inject keyframes for shimmer animation
+const injectKeyframes = () => {
+    const styleId = 'autocomplete-animations';
+    if (typeof document !== 'undefined' && !document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      @keyframes shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      @keyframes fadeInUp {
+        from { opacity: 0; transform: translateY(8px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+};
+// Skeleton loader component
+const SkeletonItem = ({ delay = 0 }) => (_jsxs("div", { style: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 8px',
+        gap: '12px',
+        animation: `fadeInUp 300ms ease-out ${delay}ms both`,
+    }, children: [_jsx("div", { style: {
+                ...animationStyles.skeleton.base,
+                width: '60px',
+                height: '14px',
+            } }), _jsx("div", { style: {
+                ...animationStyles.skeleton.base,
+                flex: 1,
+                height: '14px',
+                maxWidth: '180px',
+            } })] }));
+// Loading spinner component
+const LoadingSpinner = () => (_jsx("div", { style: animationStyles.spinner, role: "status", "aria-label": "Loading" }));
 export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState(data.list);
     const [isListOpen, setIsListOpen] = useState(false);
     const [filterValue, setFilterValue] = useState();
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [visibleItems, setVisibleItems] = useState(new Set());
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [isFiltering, setIsFiltering] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    // Inject animation keyframes on mount
+    useEffect(() => {
+        injectKeyframes();
+    }, []);
     const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
                 if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    setIsListOpen(false);
-                    //setValue('');
+                    handleCloseDropdown();
                 }
             }
             document.addEventListener('mousedown', handleClickOutside);
@@ -27,8 +142,55 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
     const inputRef = useRef(null);
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef);
+    // Smooth dropdown open/close with animation
+    const handleOpenDropdown = useCallback(() => {
+        setIsListOpen(true);
+        // Small delay to trigger CSS transition
+        requestAnimationFrame(() => {
+            setShowDropdown(true);
+        });
+    }, []);
+    const handleCloseDropdown = useCallback(() => {
+        setShowDropdown(false);
+        // Wait for animation to complete before hiding
+        setTimeout(() => {
+            setIsListOpen(false);
+        }, 200);
+    }, []);
+    // Staggered animation for list items
+    useEffect(() => {
+        if (isListOpen && options.length > 0 && !loader) {
+            setVisibleItems(new Set());
+            // Stagger the appearance of items
+            options.forEach((_, index) => {
+                setTimeout(() => {
+                    setVisibleItems((prev) => new Set([...prev, index]));
+                }, Math.min(index * 30, 300)); // Cap at 300ms total
+            });
+        }
+    }, [isListOpen, options, loader]);
+    // Smooth transition when data changes
     useEffect(() => {
-        setOptions(data.list);
+        if (isFiltering) {
+            // Brief fade out during filter
+            setIsAnimating(true);
+            const timer = setTimeout(() => {
+                setOptions(data.list);
+                setIsAnimating(false);
+                setIsFiltering(false);
+                // Re-trigger staggered animation
+                setVisibleItems(new Set());
+                data.list.forEach((_, index) => {
+                    setTimeout(() => {
+                        setVisibleItems((prev) => new Set([...prev, index]));
+                    }, Math.min(index * 25, 200));
+                });
+            }, 150);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setOptions(data.list);
+        }
     }, [data]);
     useEffect(() => {
         setValue(displayValue);
@@ -37,8 +199,22 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
         const search = e.target.value;
         setValue(search);
         setFilterValue(search);
+        setIsFiltering(true);
         const filteredOptions = data.list.filter((item) => data.displayKey.some((key) => item[key]?.toString().toLowerCase().includes(search.toLowerCase())));
-        setOptions(filteredOptions);
+        // Animate transition
+        setIsAnimating(true);
+        setTimeout(() => {
+            setOptions(filteredOptions);
+            setIsAnimating(false);
+            setIsFiltering(false);
+            // Re-animate visible items
+            setVisibleItems(new Set());
+            filteredOptions.forEach((_, index) => {
+                setTimeout(() => {
+                    setVisibleItems((prev) => new Set([...prev, index]));
+                }, Math.min(index * 25, 200));
+            });
+        }, 100);
         debounce(() => {
             onFilter && onFilter(search);
         });
@@ -58,7 +234,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
                 const selectedItem = options.find((item) => item.labId === Number(value));
                 if (selectedItem) {
                     setValue(data.displayKey.map((key) => `${selectedItem[key]}`).join(' - '));
-                    setIsListOpen(false);
+                    handleCloseDropdown();
                     onSelect && onSelect(selectedItem);
                 }
             }
@@ -67,38 +243,80 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
     const calculateMaxHeight = () => {
         if (inputRef.current) {
             const inputRect = inputRef.current.getBoundingClientRect();
-            const availableHeight = window.innerHeight - inputRect.bottom - 20; // 10px padding
+            const availableHeight = window.innerHeight - inputRect.bottom - 20;
             return availableHeight;
         }
         return 'calc(100vh - 140px)';
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
+    const handleSelectItem = useCallback((item) => {
+        setValue(data.displayKey
+            .map((key) => item[key])
+            .filter((value) => value !== null && value !== undefined)
+            .join(' - '));
+        handleCloseDropdown();
+        onSelect && onSelect(item);
+    }, [data.displayKey, onSelect, handleCloseDropdown]);
+    // Show loading state
+    const isLoading = loader || isFiltering;
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['transition-all'], s['duration-200'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
                         [s['dark:text-black']]: true,
-                    }), children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                                size: 16,
-                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                                size: 16,
-                            } }))] }), options && isListOpen ? (options.length > 0 ? (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['overflow-y-auto']), style: {
+                    }), style: {
+                        transition: 'border-color 200ms ease, box-shadow 200ms ease',
+                    }, children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: handleOpenDropdown, disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px',
+                            }, children: [isLoading && _jsx(LoadingSpinner, {}), _jsx("div", { style: {
+                                        transition: 'transform 200ms ease',
+                                        transform: isListOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                                    }, children: _jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                            size: 16,
+                                        } }) })] })] }), isListOpen && (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-white'], s['rounded-md'], s['shadow-lg'], s['overflow-hidden']), style: {
+                        ...animationStyles.dropdown.base,
+                        ...(showDropdown
+                            ? animationStyles.dropdown.entering
+                            : animationStyles.dropdown.exiting),
                         zIndex: 500,
-                        maxHeight: `${calculateMaxHeight()}px`,
-                    }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
-                                setValue(data.displayKey
-                                    .map((key) => item[key])
-                                    .filter((value) => value !== null && value !== undefined)
-                                    .join(' - '));
-                                setIsListOpen(false);
-                                onSelect && onSelect(item);
-                            }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
-                                    textOverflow: 'ellipsis',
-                                    minWidth: 0,
-                                    overflow: 'hidden',
-                                    whiteSpace: 'nowrap',
-                                }, title: data.displayKey
-                                    .map((key) => item[key])
-                                    .join(' - '), children: data.displayKey
-                                    .map((key) => item[key])
-                                    .filter((value) => value !== null && value !== undefined)
-                                    .join(' - ') }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm']), style: { zIndex: 80, width: '100%' }, children: _jsx("span", { children: "Not Found Result!!" }) }))) : null] }) }));
+                        marginTop: '4px',
+                        border: '1px solid #e5e7eb',
+                    }, children: _jsx("div", { className: cn(s['overflow-y-auto'], s['p-1']), style: {
+                            maxHeight: `${calculateMaxHeight()}px`,
+                            ...animationStyles.fadeContent.base,
+                            ...(isAnimating
+                                ? animationStyles.fadeContent.loading
+                                : animationStyles.fadeContent.ready),
+                        }, children: loader ? (
+                        // Skeleton loading state
+                        _jsx("div", { style: { padding: '4px 0' }, children: [0, 1, 2, 3, 4].map((i) => (_jsx(SkeletonItem, { delay: i * 50 }, i))) })) : options.length > 0 ? (_jsx("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: options.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['items-center']), onClick: () => handleSelectItem(item), onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), style: {
+                                    ...animationStyles.listItem.base,
+                                    ...(visibleItems.has(index)
+                                        ? animationStyles.listItem.visible
+                                        : animationStyles.listItem.hidden),
+                                    ...(hoveredIndex === index
+                                        ? animationStyles.listItem.hover
+                                        : {}),
+                                    padding: '10px 12px',
+                                    borderRadius: '6px',
+                                    margin: '2px 0',
+                                    transitionDelay: `${Math.min(index * 20, 150)}ms`,
+                                }, children: _jsx("label", { className: cn(s['text-gray-700']), style: {
+                                        textOverflow: 'ellipsis',
+                                        minWidth: 0,
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                        cursor: 'pointer',
+                                        fontSize: '14px',
+                                    }, title: data.displayKey
+                                        .map((key) => item[key])
+                                        .join(' - '), children: data.displayKey
+                                        .map((key) => item[key])
+                                        .filter((value) => value !== null && value !== undefined)
+                                        .join(' - ') }) }, index))) })) : (_jsx("div", { style: {
+                                padding: '16px',
+                                textAlign: 'center',
+                                color: '#6b7280',
+                                animation: 'fadeInUp 200ms ease-out',
+                            }, children: _jsx("span", { children: "No results found" }) })) }) }))] }) }));
 };

package/lib/src/core-components/src/components/Badge/Badge.d.ts CHANGED Viewed

@@ -56,6 +56,8 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         unselectable?: "off" | "on" | undefined;
         inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "inline" | "both" | "none" | "list" | undefined;
@@ -130,7 +132,7 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
         onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
@@ -180,8 +182,6 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;

package/lib/src/core-components/src/components/FormField/FormField.d.ts CHANGED Viewed

@@ -82,8 +82,8 @@ type FieldEventHandlers = {
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** onBlur handler - receives the event object (standard React pattern) */
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /** onBlurValue - receives just the string value (cleaner alternative to onBlur for text inputs) */
-    onBlurValue?: (value: string) => void;
+    /** onValueBlur - receives just the string value (cleaner alternative to onBlur for text inputs) */
+    onValueBlur?: (value: string) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/lib/src/core-components/src/components/FormField/FormField.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { PasswordInput, ToggleInput, RadioInput, CheckboxInput, CheckboxGroupInp
 export { PasswordInput, ToggleInput, RadioInput, CheckboxInput, CheckboxGroupInput, DatePickerInput, DropdownInput, TextDropdownInput, PinInput, OtpInput, CssMultilineInput, } from './components';
 export const Label = (props) => (_jsx(_Fragment, { children: _jsx("label", { htmlFor: props.htmlFor, className: `${props.hasError ? 'text-red-400' : 'text-gray-700'} block text-3xs font-medium  mb-1`, style: { ...props.style }, children: props.children }) }));
 export const InputWrapper = (props) => (_jsxs("div", { className: props.className, ref: props.ref, children: [_jsx(Label, { htmlFor: props.id || '', hasError: props.hasError, style: { ...props.style }, children: _jsx("span", { className: "dark:text-white", children: props.label }) }), props.children] }));
-export const FormField = React.forwardRef(({ label, error, hasError, id, labelProps, required, type = 'text', showPasswordToggle, radioOptions, checkboxLabel, checkboxOptions, isToggleLabel = true, dateFormat = 'yyyy-MM-dd', dropdownItems = [], allowCustomInput = true, pinLength = 12, otpLength = 6, pinValue = [], pinErrorMsg, pinDefaultMsg, cssProperties, onReset, onMoreInfo, value, onChange, onValueChange, onBlur, onBlurValue, disabled, children, ...props }, ref) => {
+export const FormField = React.forwardRef(({ label, error, hasError, id, labelProps, required, type = 'text', showPasswordToggle, radioOptions, checkboxLabel, checkboxOptions, isToggleLabel = true, dateFormat = 'yyyy-MM-dd', dropdownItems = [], allowCustomInput = true, pinLength = 12, otpLength = 6, pinValue = [], pinErrorMsg, pinDefaultMsg, cssProperties, onReset, onMoreInfo, value, onChange, onValueChange, onBlur, onValueBlur, disabled, children, ...props }, ref) => {
     const fieldId = id || `field-${Math.random().toString(36).substr(2, 9)}`;
     const isTextarea = type === 'textarea';
     const isToggle = type === 'toggle';
@@ -86,18 +86,18 @@ export const FormField = React.forwardRef(({ label, error, hasError, id, labelPr
     }
     // Render textarea - use Textarea atom component
     if (isTextarea) {
-        return (_jsx(Textarea, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onBlurValue: onBlurValue, ...labelProps, ...props }));
+        return (_jsx(Textarea, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, ...labelProps, ...props }));
     }
     // Render standard input - use Input atom component
     // For password without toggle, use Input atom
     if (isPassword && !showPasswordToggle) {
-        return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onBlurValue: onBlurValue, ...labelProps, ...props }));
+        return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, ...labelProps, ...props }));
     }
     // For password with toggle, use PasswordInput component
     if (isPassword && showPasswordToggle) {
         return (_jsx(PasswordInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, labelProps: labelProps, ...props }));
     }
     // Render standard input - use Input atom component
-    return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onBlurValue: onBlurValue, ...labelProps, ...props }));
+    return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, ...labelProps, ...props }));
 });
 FormField.displayName = 'FormField';

package/lib/src/core-components/src/core-components/atoms/Input/Input.d.ts CHANGED Viewed

@@ -8,8 +8,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /** onValueChange - receives just the string value (alternative to onChange) */
     onValueChange?: (value: string) => void;
-    /** onBlurValue - receives just the string value (alternative to onBlur) */
-    onBlurValue?: (value: string) => void;
+    /** onValueBlur - receives just the string value (alternative to onBlur) */
+    onValueBlur?: (value: string) => void;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Input.d.ts.map

package/lib/src/core-components/src/core-components/atoms/Input/Input.js CHANGED Viewed

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const Input = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onBlurValue, ...props }, ref) => {
+export const Input = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onValueBlur, ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     // Handle onChange - always pass event to onChange, value to onValueChange
     const handleChange = (e) => {
         onChange?.(e);
         onValueChange?.(e.target.value);
     };
-    // Handle onBlur - always pass event to onBlur, value to onBlurValue
+    // Handle onBlur - always pass event to onBlur, value to onValueBlur
     const handleBlur = (e) => {
         onBlur?.(e);
-        onBlurValue?.(e.target.value);
+        onValueBlur?.(e.target.value);
     };
     return (_jsxs("div", { className: cn(s['w-full']), children: [label && (_jsx("label", { className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), children: label })), _jsx("input", { ref: ref, id: inputId, className: cn(s['w-full'], s['px-4'], s['py-2'], s['border'], s['rounded-lg'], s['transition-colors'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), style: {
                     ...props.style,

package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.d.ts CHANGED Viewed

@@ -8,8 +8,8 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     /** onValueChange - receives just the string value (alternative to onChange) */
     onValueChange?: (value: string) => void;
-    /** onBlurValue - receives just the string value (alternative to onBlur) */
-    onBlurValue?: (value: string) => void;
+    /** onValueBlur - receives just the string value (alternative to onBlur) */
+    onValueBlur?: (value: string) => void;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=Textarea.d.ts.map

package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.js CHANGED Viewed

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const Textarea = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onBlurValue, ...props }, ref) => {
+export const Textarea = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onValueBlur, ...props }, ref) => {
     const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
     // Handle onChange - always pass event to onChange, value to onValueChange
     const handleChange = (e) => {
         onChange?.(e);
         onValueChange?.(e.target.value);
     };
-    // Handle onBlur - always pass event to onBlur, value to onBlurValue
+    // Handle onBlur - always pass event to onBlur, value to onValueBlur
     const handleBlur = (e) => {
         onBlur?.(e);
-        onBlurValue?.(e.target.value);
+        onValueBlur?.(e.target.value);
     };
     return (_jsxs("div", { className: cn(s['w-full']), children: [label && (_jsx("label", { className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), children: label })), _jsx("textarea", { ref: ref, id: textareaId, className: cn(s['w-full'], s['px-4'], s['py-2'], s['border'], s['rounded-lg'], s['transition-colors'], s['resize-vertical'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), ...props, onChange: handleChange, onBlur: handleBlur }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
 });

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

@@ -78,5 +78,9 @@
 /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.blur,.ring-1,.shadow,.shadow-lg,body{font-family:Arima Regular;font-size:14px}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.17 | 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 *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-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.17 | 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))}.-my-2{margin-bottom:-.5rem;margin-top:-.5rem}.-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))}.blur,.ring-1,.shadow,.shadow-lg,.shadow-sm,body{font-family:Arima Regular;font-size:14px}.dark\:border-gray-600:is(.dark *),.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.17 | 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))}.-my-2{margin-bottom:-.5rem;margin-top:-.5rem}.-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))}.shadow,.shadow-lg,.shadow-sm,.ring-1,.blur,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}.focus\:ring-0: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 CHANGED Viewed

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