shared-design-system 1.10.0 → 1.12.0

package/dist/src/components/DatePicker.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { tokens } from '../tokens';
+const Calendar = ({ value, onChange, onClose }) => {
+    const now = new Date();
+    const [viewDate, setViewDate] = useState(value || now);
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = new Date(year, month, 1).getDay(); // 0 (Sun) to 6 (Sat)
+    // Adjusted for Monday start if needed, but 0=Sun is standard for native pickers.
+    // Let's stick with 0=Sun.
+    const monthNames = [
+        'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
+        'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
+    ];
+    const daysOfWeek = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
+    const handlePrevMonth = (e) => {
+        e.stopPropagation();
+        setViewDate(new Date(year, month - 1, 1));
+    };
+    const handleNextMonth = (e) => {
+        e.stopPropagation();
+        setViewDate(new Date(year, month + 1, 1));
+    };
+    const handleDayClick = (day) => {
+        const selectedDate = new Date(year, month, day);
+        onChange(selectedDate);
+        onClose();
+    };
+    const isSelected = (day) => {
+        return value &&
+            value.getDate() === day &&
+            value.getMonth() === month &&
+            value.getFullYear() === year;
+    };
+    const isToday = (day) => {
+        return now.getDate() === day &&
+            now.getMonth() === month &&
+            now.getFullYear() === year;
+    };
+    return (_jsxs("div", { style: {
+            padding: tokens.spacing[4],
+            width: '280px',
+            userSelect: 'none'
+        }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: tokens.spacing[4]
+                }, children: [_jsx("button", { onClick: handlePrevMonth, style: {
+                            border: 'none',
+                            background: 'transparent',
+                            cursor: 'pointer',
+                            padding: tokens.spacing[1],
+                            borderRadius: '50%',
+                            color: tokens.color.slate500,
+                            transition: tokens.transition.fast,
+                        }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = tokens.color.slate100, onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }) }), _jsxs("div", { style: { fontWeight: tokens.font.weightBold, color: tokens.color.slate800, fontSize: tokens.font.sm }, children: [monthNames[month], " - ", year] }), _jsx("button", { onClick: handleNextMonth, style: {
+                            border: 'none',
+                            background: 'transparent',
+                            cursor: 'pointer',
+                            padding: tokens.spacing[1],
+                            borderRadius: '50%',
+                            color: tokens.color.slate500,
+                            transition: tokens.transition.fast,
+                        }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = tokens.color.slate100, onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] }), _jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(7, 1fr)',
+                    marginBottom: tokens.spacing[2],
+                    textAlign: 'center'
+                }, children: daysOfWeek.map(d => (_jsx("div", { style: { fontSize: '11px', fontWeight: tokens.font.weightBold, color: tokens.color.slate400 }, children: d }, d))) }), _jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(7, 1fr)',
+                    gap: '2px'
+                }, children: [Array.from({ length: firstDayOfMonth }).map((_, i) => (_jsx("div", {}, `empty-${i}`))), Array.from({ length: daysInMonth }).map((_, i) => {
+                        const day = i + 1;
+                        const selected = isSelected(day);
+                        const today = isToday(day);
+                        return (_jsx("div", { onClick: () => handleDayClick(day), style: {
+                                height: '34px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontSize: tokens.font.sm,
+                                borderRadius: '8px',
+                                cursor: 'pointer',
+                                transition: tokens.transition.fast,
+                                fontWeight: selected || today ? tokens.font.weightBold : tokens.font.weightMedium,
+                                backgroundColor: selected ? tokens.color.primary : (today ? tokens.color.primaryLight : 'transparent'),
+                                color: selected ? 'white' : (today ? tokens.color.primary : tokens.color.slate700),
+                            }, onMouseEnter: (e) => {
+                                if (!selected)
+                                    e.currentTarget.style.backgroundColor = tokens.color.slate100;
+                            }, onMouseLeave: (e) => {
+                                if (!selected)
+                                    e.currentTarget.style.backgroundColor = today ? tokens.color.primaryLight : 'transparent';
+                            }, children: day }, day));
+                    })] }), _jsx("div", { style: {
+                    marginTop: tokens.spacing[3],
+                    paddingTop: tokens.spacing[3],
+                    borderTop: `1px solid ${tokens.color.slate100}`,
+                    display: 'flex',
+                    justifyContent: 'center'
+                }, children: _jsx("button", { onClick: (e) => { e.stopPropagation(); handleDayClick(now.getDate()); }, style: {
+                        border: 'none',
+                        background: 'transparent',
+                        color: tokens.color.primary,
+                        fontSize: '12px',
+                        fontWeight: tokens.font.weightBold,
+                        cursor: 'pointer'
+                    }, children: "H\u00F4m nay" }) })] }));
+};
+const floatingLabelStyle = {
+    position: 'absolute',
+    top: '-10px',
+    left: '14px',
+    backgroundColor: 'white',
+    padding: '0 6px',
+    fontSize: '10px',
+    fontWeight: tokens.font.weightBold,
+    color: tokens.color.slate400,
+    textTransform: 'uppercase',
+    letterSpacing: '0.1em',
+    zIndex: 10,
+    transition: tokens.transition.fast,
+};
+const inputContainerStyle = (isFocused, hasError) => ({
+    position: 'relative',
+    width: '100%',
+    backgroundColor: tokens.color.white,
+    border: `1px solid ${hasError ? tokens.color.danger : (isFocused ? tokens.color.borderFocus : tokens.color.slate200)}`,
+    borderRadius: tokens.radius.lg,
+    padding: '12px 16px',
+    transition: tokens.transition.fast,
+    boxShadow: isFocused ? '0 0 0 3px rgba(245, 158, 11, 0.1)' : tokens.shadow.sm,
+});
+const inputFieldBaseStyle = {
+    width: '100%',
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    fontSize: tokens.font.sm,
+    fontFamily: tokens.font.family,
+    fontWeight: tokens.font.weightSemibold,
+    color: tokens.color.slate800,
+    padding: '4px 0 0 0',
+};
+export const DatePicker = ({ value, onChange, placeholder, label, required, error, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    // Parse incoming value string if format is YYYY-MM-DD or DD/MM/YYYY
+    const parseValue = (val) => {
+        if (!val)
+            return undefined;
+        if (val instanceof Date)
+            return val;
+        // Try simple parse
+        const d = new Date(val);
+        if (!isNaN(d.getTime()))
+            return d;
+        return undefined;
+    };
+    const [dateValue, setDateValue] = useState(parseValue(value));
+    useEffect(() => {
+        setDateValue(parseValue(value));
+    }, [value]);
+    const handleDateChange = (date) => {
+        setDateValue(date);
+        if (onChange) {
+            // Mocking target for native-like onChange
+            const event = {
+                target: { value: date.toISOString().split('T')[0] },
+            };
+            onChange(event);
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const displayValue = dateValue ? dateValue.toLocaleDateString('vi-VN') : '';
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', width: '100%', ...props.style }, children: [label && (_jsxs("label", { style: {
+                    ...floatingLabelStyle,
+                    color: isOpen ? tokens.color.borderFocus : (error ? tokens.color.danger : tokens.color.slate400),
+                    left: '40px'
+                }, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsx("div", { onClick: () => setIsOpen(!isOpen), style: inputContainerStyle(isOpen, !!error), children: _jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', cursor: 'pointer' }, children: [_jsx("div", { style: {
+                                position: 'absolute',
+                                left: '0',
+                                color: isOpen ? tokens.color.primary : tokens.color.slate300,
+                                display: 'flex',
+                                alignItems: 'center',
+                                zIndex: 1,
+                                pointerEvents: 'none',
+                                marginTop: '2px'
+                            }, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), _jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), _jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }) }), _jsx("input", { ...props, readOnly: true, placeholder: placeholder || 'Chọn ngày...', value: displayValue, autoComplete: "off", style: {
+                                ...inputFieldBaseStyle,
+                                paddingLeft: '28px',
+                                cursor: 'pointer',
+                            } })] }) }), isOpen && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    zIndex: 2000,
+                    marginTop: tokens.spacing[2],
+                    backgroundColor: tokens.color.white,
+                    borderRadius: tokens.radius.lg,
+                    boxShadow: tokens.shadow.xl,
+                    border: `1px solid ${tokens.color.slate100}`,
+                    animation: 'fadeIn 0.2s ease-out'
+                }, children: _jsx(Calendar, { value: dateValue, onChange: handleDateChange, onClose: () => setIsOpen(false) }) })), _jsx("style", { children: `
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(-10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error })] }));
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/src/components/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Divider.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export interface DividerProps extends React.HTMLAttributes<HTMLElement> {
     orientation?: 'horizontal' | 'vertical';
+    type?: 'solid' | 'gradient';
+    label?: React.ReactNode;
     margin?: 'none' | 'sm' | 'md' | 'lg';
 }
 export declare const Divider: React.FC<DividerProps>;

package/dist/src/components/Divider.js

@@ -1,34 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Divider = ({ orientation = 'horizontal', margin = 'md', className = '', style = {} }) => {
+export const Divider = ({ orientation = 'horizontal', type = 'solid', label, margin = 'md', className = '', style = {} }) => {
     const getMargin = () => {
         switch (margin) {
             case 'none': return '0';
             case 'sm': return tokens.spacing[2];
             case 'lg': return tokens.spacing[8];
-            case 'md':
             default: return tokens.spacing[4];
         }
     };
-    const baseStyle = {
-        backgroundColor: tokens.color.border,
+    const isVertical = orientation === 'vertical';
+    const isGradient = type === 'gradient';
+    const lineStyle = {
+        backgroundColor: isGradient ? 'transparent' : tokens.color.slate100,
+        backgroundImage: isGradient
+            ? (isVertical
+                ? `linear-gradient(to bottom, transparent, ${tokens.color.slate200}, transparent)`
+                : `linear-gradient(to right, transparent, ${tokens.color.slate200}, transparent)`)
+            : 'none',
         border: 'none',
+        width: isVertical ? '1.5px' : '100%',
+        height: isVertical ? '100%' : '1.5px',
+        flexShrink: 0,
         ...style
     };
-    if (orientation === 'vertical') {
+    if (isVertical) {
         return (_jsx("div", { style: {
-                ...baseStyle,
-                width: '1px',
-                height: '100%',
+                ...lineStyle,
                 margin: `0 ${getMargin()}`,
                 display: 'inline-block',
                 verticalAlign: 'middle'
             }, className: className }));
     }
+    if (label) {
+        return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', margin: `${getMargin()} 0`, gap: tokens.spacing[4], ...style }, className: className, children: [_jsx("div", { style: { ...lineStyle, flex: 1, margin: 0 } }), _jsx("span", { style: { fontSize: '11px', fontWeight: tokens.font.weightBold, color: tokens.color.slate500, textTransform: 'uppercase', letterSpacing: '0.05em' }, children: label }), _jsx("div", { style: { ...lineStyle, flex: 1, margin: 0 } })] }));
+    }
     return (_jsx("hr", { style: {
-            ...baseStyle,
-            width: '100%',
-            height: '1px',
+            ...lineStyle,
             margin: `${getMargin()} 0`
         }, className: className }));
 };

package/dist/src/components/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,WAAW,GAAG,YAAY,EAC1B,MAAM,GAAG,IAAI,EACb,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACX,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,QAAO,MAAM,EAAE,CAAC;YACd,KAAK,MAAM,CAAC,CAAC,OAAO,GAAG,CAAC;YACxB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACpC,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACpC,KAAK,IAAI,CAAC;YACV,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;QACpC,MAAM,EAAE,MAAM;QACd,GAAG,KAAK;KACT,CAAC;IAEF,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QAC/B,OAAO,CACL,cACE,KAAK,EAAE;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,KAAK,SAAS,EAAE,EAAE;gBAC1B,OAAO,EAAE,cAAc;gBACvB,aAAa,EAAE,QAAQ;aACxB,EACD,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,aACE,KAAK,EAAE;YACL,GAAG,SAAS;YACZ,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,KAAK;YACb,MAAM,EAAE,GAAG,SAAS,EAAE,IAAI;SAC3B,EACD,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/InputComponents.d.ts

@@ -3,7 +3,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     label?: string;
     required?: boolean;
     error?: string;
-    variant?: 'default' | 'filter';
+    leadingIcon?: React.ReactNode;
 }
 export declare const Input: React.FC<InputProps>;
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -12,13 +12,13 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     error?: string;
 }
 export declare const Textarea: React.FC<TextareaProps>;
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     label?: string;
     required?: boolean;
     error?: string;
-    variant?: 'default' | 'filter';
+    leadingIcon?: React.ReactNode;
 }
-export declare const Select: React.FC<SelectProps>;
+export declare const NativeSelect: React.FC<NativeSelectProps>;
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
 }

package/dist/src/components/InputComponents.js

@@ -1,126 +1,124 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { tokens } from '../tokens';
-const labelStyle = {
-    display: 'block',
-    fontSize: tokens.font.xs,
-    fontWeight: tokens.font.weightMedium,
-    color: tokens.color.textMuted,
-    marginBottom: tokens.spacing[1],
-};
-const filterLabelStyle = {
+const floatingLabelStyle = {
     position: 'absolute',
     top: '-10px',
-    left: '16px',
+    left: '14px',
     backgroundColor: 'white',
     padding: '0 6px',
-    fontSize: '11px',
-    fontWeight: tokens.font.weightSemibold,
+    fontSize: '10px',
+    fontWeight: tokens.font.weightBold,
     color: tokens.color.slate400,
     textTransform: 'uppercase',
-    letterSpacing: '0.05em',
+    letterSpacing: '0.1em',
     zIndex: 1,
+    transition: tokens.transition.fast,
 };
-const inputBaseStyle = {
+const inputContainerStyle = (isFocused, hasError) => ({
+    position: 'relative',
     width: '100%',
-    padding: `${tokens.spacing[3]} ${tokens.spacing[5]}`,
-    fontSize: tokens.font.sm,
-    borderRadius: tokens.radius.lg,
-    border: `1px solid ${tokens.color.slate200}`,
     backgroundColor: tokens.color.white,
-    color: tokens.color.slate800,
-    outline: 'none',
+    border: `1px solid ${hasError ? tokens.color.danger : (isFocused ? tokens.color.borderFocus : tokens.color.slate200)}`,
+    borderRadius: tokens.radius.lg,
+    padding: '12px 16px',
     transition: tokens.transition.fast,
+    boxShadow: isFocused ? '0 0 0 3px rgba(245, 158, 11, 0.1)' : tokens.shadow.sm,
+});
+const inputFieldBaseStyle = {
+    width: '100%',
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    fontSize: tokens.font.sm,
     fontFamily: tokens.font.family,
-    fontWeight: tokens.font.weightMedium,
+    fontWeight: tokens.font.weightSemibold,
+    color: tokens.color.slate800,
+    padding: '4px 0 0 0',
 };
-export const Input = ({ label, required, error, variant = 'default', className = '', style = {}, onFocus, onBlur, ...props }) => {
+export const Input = ({ label, required, error, className = '', style = {}, onFocus, onBlur, leadingIcon, ...props }) => {
     const [isFocused, setIsFocused] = React.useState(false);
-    const isFilter = variant === 'filter';
-    const containerStyle = {
-        position: 'relative',
-        width: '100%',
-        ...(isFilter && {
-            border: `1px solid ${isFocused ? tokens.color.borderFocus : tokens.color.slate200}`,
-            borderRadius: tokens.radius.lg,
-            padding: '12px 16px',
-            backgroundColor: tokens.color.white,
-            transition: tokens.transition.fast,
-        })
-    };
-    const fieldStyle = {
-        ...inputBaseStyle,
-        ...(isFilter && {
-            border: 'none',
-            padding: '4px 0 0 0',
-            backgroundColor: 'transparent',
-        }),
-        ...(isFocused && !isFilter && {
-            borderColor: tokens.color.borderFocus,
-            backgroundColor: tokens.color.white,
-        }),
-        ...style
-    };
-    return (_jsxs("div", { className: className, style: { width: '100%', position: 'relative' }, children: [label && !isFilter && (_jsxs("label", { style: labelStyle, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsxs("div", { style: containerStyle, children: [label && isFilter && (_jsx("label", { style: { ...filterLabelStyle, color: isFocused ? tokens.color.borderFocus : tokens.color.slate400 }, children: label })), _jsx("input", { style: fieldStyle, onFocus: (e) => {
+    return (_jsxs("div", { className: className, style: { width: '100%', position: 'relative', ...style }, children: [label && (_jsxs("label", { style: {
+                    ...floatingLabelStyle,
+                    color: isFocused ? tokens.color.borderFocus : (error ? tokens.color.danger : tokens.color.slate400),
+                    left: leadingIcon ? '40px' : '14px'
+                }, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsxs("div", { style: inputContainerStyle(isFocused, !!error), children: [leadingIcon && (_jsx("div", { style: {
+                            position: 'absolute',
+                            left: '16px',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            color: isFocused ? tokens.color.primary : tokens.color.slate300,
+                            display: 'flex',
+                            alignItems: 'center',
+                            zIndex: 1,
+                            pointerEvents: 'none',
+                            marginTop: '2px'
+                        }, children: leadingIcon })), _jsx("input", { style: {
+                            ...inputFieldBaseStyle,
+                            ...(leadingIcon && { paddingLeft: '28px' }),
+                        }, onFocus: (e) => {
                             setIsFocused(true);
                             onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                         }, onBlur: (e) => {
                             setIsFocused(false);
                             onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                        }, ...props })] }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '4px' }, children: error })] }));
+                        }, ...props })] }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error })] }));
 };
-export const Textarea = ({ label, required, error, className = '', style = {}, ...props }) => {
-    return (_jsxs("div", { className: className, style: { width: '100%' }, children: [label && (_jsxs("label", { style: labelStyle, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsx("textarea", { style: {
-                    ...inputBaseStyle,
-                    minHeight: '80px',
-                    resize: 'vertical',
-                    ...style
-                }, ...props }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '4px' }, children: error })] }));
+export const Textarea = ({ label, required, error, className = '', style = {}, onFocus, onBlur, ...props }) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    return (_jsxs("div", { className: className, style: { width: '100%', position: 'relative', ...style }, children: [label && (_jsxs("label", { style: {
+                    ...floatingLabelStyle,
+                    color: isFocused ? tokens.color.borderFocus : (error ? tokens.color.danger : tokens.color.slate400)
+                }, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsx("div", { style: inputContainerStyle(isFocused, !!error), children: _jsx("textarea", { style: {
+                        ...inputFieldBaseStyle,
+                        minHeight: '100px',
+                        resize: 'none',
+                    }, onFocus: (e) => {
+                        setIsFocused(true);
+                        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                    }, onBlur: (e) => {
+                        setIsFocused(false);
+                        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                    }, ...props }) }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error })] }));
 };
-export const Select = ({ label, required, children, error, variant = 'default', className = '', style = {}, onFocus, onBlur, ...props }) => {
+export const NativeSelect = ({ label, required, children, error, className = '', style = {}, onFocus, onBlur, leadingIcon, ...props }) => {
     const [isFocused, setIsFocused] = React.useState(false);
-    const isFilter = variant === 'filter';
-    const containerStyle = {
-        position: 'relative',
-        width: '100%',
-        ...(isFilter && {
-            border: `1px solid ${isFocused ? tokens.color.borderFocus : tokens.color.slate200}`,
-            borderRadius: tokens.radius.lg,
-            padding: '12px 16px',
-            backgroundColor: tokens.color.white,
-            transition: tokens.transition.fast,
-        })
-    };
-    const fieldStyle = {
-        ...inputBaseStyle,
-        appearance: 'none',
-        paddingRight: tokens.spacing[10],
-        ...(isFilter && {
-            border: 'none',
-            padding: '4px 0 0 0',
-            backgroundColor: 'transparent',
-        }),
-        ...(isFocused && !isFilter && {
-            borderColor: tokens.color.borderFocus,
-            backgroundColor: tokens.color.white,
-        }),
-        ...style
-    };
-    return (_jsxs("div", { className: className, style: { width: '100%', position: 'relative' }, children: [label && !isFilter && (_jsxs("label", { style: labelStyle, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsxs("div", { style: containerStyle, children: [label && isFilter && (_jsx("label", { style: { ...filterLabelStyle, color: isFocused ? tokens.color.borderFocus : tokens.color.slate400 }, children: label })), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("select", { style: fieldStyle, onFocus: (e) => {
-                                    setIsFocused(true);
-                                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-                                }, onBlur: (e) => {
-                                    setIsFocused(false);
-                                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                }, ...props, children: children }), _jsx("div", { style: {
-                                    position: 'absolute',
-                                    right: isFilter ? '0' : tokens.spacing[4],
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    pointerEvents: 'none',
-                                    color: tokens.color.slate300,
-                                    marginTop: isFilter ? '2px' : '0'
-                                }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }) })] })] }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '4px' }, children: error })] }));
+    return (_jsxs("div", { className: className, style: { width: '100%', position: 'relative', ...style }, children: [label && (_jsxs("label", { style: {
+                    ...floatingLabelStyle,
+                    color: isFocused ? tokens.color.borderFocus : (error ? tokens.color.danger : tokens.color.slate400),
+                    left: leadingIcon ? '40px' : '14px'
+                }, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsx("div", { style: inputContainerStyle(isFocused, !!error), children: _jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [leadingIcon && (_jsx("div", { style: {
+                                position: 'absolute',
+                                left: '0',
+                                color: isFocused ? tokens.color.primary : tokens.color.slate300,
+                                display: 'flex',
+                                alignItems: 'center',
+                                zIndex: 1,
+                                pointerEvents: 'none',
+                                marginTop: '2px'
+                            }, children: leadingIcon })), _jsx("select", { style: {
+                                ...inputFieldBaseStyle,
+                                appearance: 'none',
+                                paddingRight: '32px',
+                                ...(leadingIcon && { paddingLeft: '28px' }),
+                                cursor: 'pointer',
+                            }, onFocus: (e) => {
+                                setIsFocused(true);
+                                onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                            }, onBlur: (e) => {
+                                setIsFocused(false);
+                                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                            }, ...props, children: children }), _jsx("div", { style: {
+                                position: 'absolute',
+                                right: '0',
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                pointerEvents: 'none',
+                                color: isFocused ? tokens.color.borderFocus : tokens.color.slate300,
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginTop: '2px'
+                            }, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }) })] }) }), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error })] }));
 };
 export const Checkbox = ({ label, checked, className = '', style = {}, ...props }) => {
     return (_jsxs("label", { className: className, style: {
@@ -131,16 +129,18 @@ export const Checkbox = ({ label, checked, className = '', style = {}, ...props
             fontSize: tokens.font.sm,
             fontWeight: tokens.font.weightMedium,
             color: tokens.color.slate800,
+            userSelect: 'none',
             ...style
         }, children: [_jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx("input", { type: "checkbox", checked: checked, style: {
                             appearance: 'none',
                             width: '20px',
                             height: '20px',
                             borderRadius: '6px',
-                            border: `1px solid ${checked ? tokens.color.primary : tokens.color.slate200}`,
+                            border: `2px solid ${checked ? tokens.color.primary : tokens.color.slate200}`,
                             backgroundColor: checked ? tokens.color.primary : 'transparent',
                             cursor: 'pointer',
                             transition: tokens.transition.fast,
+                            boxShadow: checked ? `0 2px 4px ${tokens.color.primary}33` : 'none',
                         }, ...props }), checked && (_jsx("svg", { style: {
                             position: 'absolute',
                             left: '3px',