shared-design-system 1.11.0 → 1.13.0

package/dist/src/components/LoadingSpinner.js

@@ -1,21 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const LoadingSpinner = ({ size = 'md', color = 'primary', className = '' }) => {
-    const getDims = () => {
-        switch (size) {
-            case 'sm': return '16px';
-            case 'lg': return '48px';
-            case 'md':
-            default: return '32px';
-        }
-    };
-    const getStrokeWidth = () => size === 'sm' ? '3' : '4';
-    const getColor = () => color === 'white' ? '#FFFFFF' : tokens.color.primary;
-    const dims = getDims();
-    return (_jsx("div", { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, className: className, children: _jsxs("svg", { width: dims, height: dims, viewBox: "0 0 50 50", style: { animation: 'ds-spin 1s linear infinite' }, children: [_jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: getColor(), strokeWidth: getStrokeWidth(), strokeDasharray: "90, 150", strokeLinecap: "round", style: { opacity: 1 } }), _jsx("style", { children: `
-          @keyframes ds-spin {
-            100% { transform: rotate(360deg); }
-          }
-        ` })] }) }));
+const SIZE_MAP = {
+    xs: '14px',
+    sm: '20px',
+    md: '32px',
+    lg: '48px',
+    xl: '64px',
+};
+const COLOR_MAP = {
+    primary: tokens.color.primary,
+    white: '#ffffff',
+    success: tokens.color.success,
+    warning: tokens.color.warning,
+    danger: tokens.color.danger,
+    info: tokens.color.info,
+    slate: tokens.color.slate400,
+};
+export const LoadingSpinner = ({ size = 'md', color = 'primary', label, className = '', style = {}, }) => {
+    const dims = SIZE_MAP[size] || '32px';
+    const strokeWidth = size === 'xs' || size === 'sm' ? '3' : size === 'xl' ? '5' : '4';
+    const resolvedColor = COLOR_MAP[color] || tokens.color.primary;
+    return (_jsxs("div", { style: {
+            display: 'inline-flex',
+            flexDirection: label ? 'column' : 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: label ? tokens.spacing[2] : 0,
+            ...style,
+        }, className: `ds-spinner ${className}`, children: [_jsxs("svg", { width: dims, height: dims, viewBox: "0 0 50 50", style: { animation: 'ds-spin 0.75s linear infinite', flexShrink: 0 }, "aria-hidden": "true", children: [_jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, style: { color: `${resolvedColor}20` } }), _jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: resolvedColor, strokeWidth: strokeWidth, strokeDasharray: "80, 150", strokeLinecap: "round", style: { transformOrigin: 'center' } }), _jsx("style", { children: `
+          @keyframes ds-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` })] }), label && (_jsx("span", { style: {
+                    fontSize: size === 'xs' || size === 'sm' ? tokens.font.xs : tokens.font.sm,
+                    fontWeight: tokens.font.weightMedium,
+                    color: resolvedColor,
+                    lineHeight: 1.4,
+                }, children: label }))] }));
+};
+export const LoadingOverlay = ({ visible = true, label, }) => {
+    if (!visible)
+        return null;
+    return (_jsxs("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: tokens.spacing[3],
+            backgroundColor: 'rgba(255, 255, 255, 0.75)',
+            backdropFilter: 'blur(3px)',
+            borderRadius: 'inherit',
+            zIndex: 10,
+        }, children: [_jsx(LoadingSpinner, { size: "md" }), label && (_jsx("span", { style: {
+                    fontSize: tokens.font.sm,
+                    fontWeight: tokens.font.weightMedium,
+                    color: tokens.color.textMuted,
+                }, children: label }))] }));
 };
 //# sourceMappingURL=LoadingSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAClH,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAO,IAAI,EAAE,CAAC;YACZ,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC;YACV,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACvD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;IAE5E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,SAAS,YAC1G,eACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,SAAS,EAAE,4BAA4B,EAAE,aAElD,iBACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,QAAQ,EAAE,EAClB,WAAW,EAAE,cAAc,EAAE,EAC7B,eAAe,EAAC,SAAS,EACzB,aAAa,EAAC,OAAO,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GACrB,EACF,0BAAQ;;;;SAIP,GAAS,IACN,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MultiSelectProps {
+    label?: string;
+    required?: boolean;
+    options: string[];
+    selectedValues: string[];
+    onChange: (values: string[]) => void;
+    onAddNew?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    error?: string;
+}
+export declare const MultiSelect: React.FC<MultiSelectProps>;

package/dist/src/components/MultiSelect.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { tokens } from '../tokens';
+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,
+};
+export const MultiSelect = ({ label, required, options, selectedValues, onChange, onAddNew, placeholder = 'Chọn...', className = '', style = {}, error }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchValue('');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleToggleValue = (value) => {
+        if (selectedValues.includes(value)) {
+            onChange(selectedValues.filter(v => v !== value));
+        }
+        else {
+            onChange([...selectedValues, value]);
+        }
+    };
+    const handleAddValue = () => {
+        if (!searchValue.trim())
+            return;
+        if (onAddNew) {
+            onAddNew(searchValue.trim());
+        }
+        else {
+            if (!options.includes(searchValue.trim())) {
+                // Fallback if onAddNew is not provided, we just add it to selection if it's not there
+                handleToggleValue(searchValue.trim());
+            }
+        }
+        setSearchValue('');
+    };
+    const filteredOptions = options.filter(opt => opt.toLowerCase().includes(searchValue.toLowerCase()));
+    return (_jsxs("div", { ref: containerRef, className: className, style: { position: 'relative', width: '100%', ...style }, children: [label && (_jsxs("label", { style: {
+                    ...floatingLabelStyle,
+                    color: isOpen ? tokens.color.borderFocus : (error ? tokens.color.danger : tokens.color.slate400)
+                }, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsxs("div", { onClick: () => setIsOpen(!isOpen), style: {
+                    minHeight: '46px',
+                    padding: '10px 14px',
+                    backgroundColor: tokens.color.white,
+                    border: `1px solid ${error ? tokens.color.danger : (isOpen ? tokens.color.borderFocus : tokens.color.slate200)}`,
+                    borderRadius: tokens.radius.lg,
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '6px',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    transition: tokens.transition.fast,
+                    boxShadow: isOpen ? '0 0 0 3px rgba(245, 158, 11, 0.1)' : tokens.shadow.sm,
+                }, children: [selectedValues.length > 0 ? (selectedValues.map(val => (_jsxs("span", { style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            padding: '2px 8px',
+                            backgroundColor: tokens.color.slate100,
+                            color: tokens.color.slate700,
+                            borderRadius: '6px',
+                            fontSize: '11px',
+                            fontWeight: tokens.font.weightBold,
+                            border: `1px solid ${tokens.color.slate200}`,
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            handleToggleValue(val);
+                        }, children: [val, _jsxs("svg", { style: { width: '12px', height: '12px', opacity: 0.6 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })] }, val)))) : (_jsx("span", { style: { color: tokens.color.slate400, fontSize: tokens.font.sm, fontWeight: tokens.font.weightMedium }, children: placeholder })), _jsx("div", { style: { marginLeft: 'auto', color: tokens.color.slate300 }, children: _jsx("svg", { style: { width: '16px', height: '16px', transition: tokens.transition.fast, transform: isOpen ? 'rotate(180deg)' : 'none' }, 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" }) }) })] }), isOpen && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: '8px',
+                    backgroundColor: tokens.color.white,
+                    borderRadius: tokens.radius.xl,
+                    boxShadow: tokens.shadow.xl,
+                    border: `1px solid ${tokens.color.slate100}`,
+                    zIndex: 1000,
+                    overflow: 'hidden',
+                    animation: 'reveal 0.2s ease-out'
+                }, children: [_jsxs("div", { style: { padding: '12px', borderBottom: `1px solid ${tokens.color.slate100}`, display: 'flex', gap: '8px' }, children: [_jsx("input", { type: "text", autoFocus: true, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: "T\u00ECm ho\u1EB7c th\u00EAm m\u1EDBi...", style: {
+                                    flex: 1,
+                                    padding: '8px 12px',
+                                    fontSize: '12px',
+                                    backgroundColor: tokens.color.slate50,
+                                    border: 'none',
+                                    borderRadius: '12px',
+                                    outline: 'none',
+                                }, onKeyDown: (e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault();
+                                        handleAddValue();
+                                    }
+                                } }), searchValue && !options.includes(searchValue) && (_jsx("button", { type: "button", onClick: handleAddValue, style: {
+                                    padding: '0 16px',
+                                    backgroundColor: tokens.color.warning,
+                                    color: 'white',
+                                    fontSize: '10px',
+                                    fontWeight: tokens.font.weightBold,
+                                    borderRadius: '12px',
+                                    border: 'none',
+                                    cursor: 'pointer'
+                                }, children: "TH\u00CAM" }))] }), _jsx("div", { style: { maxHeight: '240px', overflowY: 'auto', padding: '4px' }, children: filteredOptions.length > 0 ? (filteredOptions.map(opt => {
+                            const isSelected = selectedValues.includes(opt);
+                            return (_jsxs("div", { onClick: () => handleToggleValue(opt), style: {
+                                    padding: '10px 16px',
+                                    fontSize: '13px',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    borderRadius: '10px',
+                                    backgroundColor: isSelected ? 'transparent' : 'transparent',
+                                    transition: tokens.transition.fast,
+                                    fontWeight: isSelected ? tokens.font.weightBold : tokens.font.weightMedium,
+                                    color: isSelected ? tokens.color.slate800 : tokens.color.slate600,
+                                }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = tokens.color.slate50, onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: [opt, isSelected && (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: tokens.color.success, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }, opt));
+                        })) : (_jsx("div", { style: { padding: '20px', textAlign: 'center', color: tokens.color.slate400, fontSize: '11px', fontStyle: 'italic' }, children: "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3 ph\u00F9 h\u1EE3p" })) })] })), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error }), _jsx("style", { children: `
+        @keyframes reveal {
+          from { opacity: 0; transform: translateY(-8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` })] }));
+};
+//# sourceMappingURL=MultiSelect.js.map

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

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

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

@@ -2,8 +2,12 @@ import React from 'react';
 export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: number;
     max?: number;
-    color?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'gradient';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     height?: string;
     showLabel?: boolean;
+    label?: string;
+    striped?: boolean;
+    indeterminate?: boolean;
 }
 export declare const Progress: React.FC<ProgressProps>;

package/dist/src/components/Progress.js

@@ -1,43 +1,75 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Progress = ({ value = 0, max = 100, color = 'primary', height = '8px', className = '', style = {}, showLabel = false, ...props }) => {
-    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-    const getColor = () => {
-        switch (color) {
-            case 'success': return tokens.color.success;
-            case 'warning': return tokens.color.warning;
-            case 'danger': return tokens.color.danger;
-            case 'info': return tokens.color.info;
-            case 'primary':
-            default: return tokens.color.primary;
+const COLOR_MAP = {
+    success: tokens.color.success,
+    warning: tokens.color.warning,
+    danger: tokens.color.danger,
+    info: tokens.color.info,
+    primary: tokens.color.primary,
+};
+const SIZE_HEIGHT = {
+    xs: '4px',
+    sm: '6px',
+    md: '10px',
+    lg: '14px',
+};
+export const Progress = ({ value = 0, max = 100, color = 'primary', size = 'sm', height, className = '', style = {}, showLabel = false, label, striped = false, indeterminate = false, ...props }) => {
+    const percentage = indeterminate ? 100 : Math.min(100, Math.max(0, (value / max) * 100));
+    const barHeight = height || SIZE_HEIGHT[size] || '6px';
+    const getBarColor = () => {
+        if (color === 'gradient') {
+            return `linear-gradient(90deg, ${tokens.color.primary} 0%, ${tokens.color.info} 100%)`;
         }
+        return COLOR_MAP[color] || tokens.color.primary;
     };
-    const containerStyle = {
-        width: '100%',
-        ...style
-    };
+    const isGradient = color === 'gradient';
     const trackStyle = {
         width: '100%',
-        height: height,
-        backgroundColor: tokens.color.surfaceAlt,
+        height: barHeight,
+        backgroundColor: tokens.color.slate100,
         borderRadius: tokens.radius.full,
         overflow: 'hidden',
-        border: `1px solid ${tokens.color.border}`,
     };
     const barStyle = {
-        width: `${percentage}%`,
+        width: indeterminate ? '40%' : `${percentage}%`,
         height: '100%',
-        backgroundColor: getColor(),
-        transition: 'width 0.3s ease-in-out',
+        ...(isGradient
+            ? { background: getBarColor() }
+            : { backgroundColor: getBarColor() }),
         borderRadius: tokens.radius.full,
+        transition: indeterminate ? 'none' : 'width 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        animation: indeterminate ? 'ds-progress-indeterminate 1.4s ease-in-out infinite' : undefined,
+        position: 'relative',
+        overflow: 'hidden',
+        ...(striped ? {
+            backgroundImage: `repeating-linear-gradient(
+        45deg,
+        rgba(255,255,255,0.12) 0,
+        rgba(255,255,255,0.12) 6px,
+        transparent 6px,
+        transparent 12px
+      )`,
+        } : {}),
     };
-    return (_jsxs("div", { style: containerStyle, className: className, ...props, children: [showLabel && (_jsx("div", { style: {
+    return (_jsxs("div", { style: { width: '100%', ...style }, className: `ds-progress ${className}`, ...props, children: [(showLabel || label) && (_jsxs("div", { style: {
                     display: 'flex',
                     justifyContent: 'space-between',
+                    alignItems: 'center',
                     marginBottom: tokens.spacing[1],
-                    fontSize: tokens.font.xs,
-                    fontWeight: tokens.font.weightBold,
-                    color: tokens.color.textMuted
-                }, children: _jsxs("span", { children: [percentage.toFixed(0), "%"] }) })), _jsx("div", { style: trackStyle, children: _jsx("div", { style: barStyle }) })] }));
+                }, children: [label && (_jsx("span", { style: {
+                            fontSize: tokens.font.xs,
+                            fontWeight: tokens.font.weightSemibold,
+                            color: tokens.color.textMuted,
+                            letterSpacing: '0.02em',
+                        }, children: label })), showLabel && !indeterminate && (_jsxs("span", { style: {
+                            fontSize: tokens.font.xs,
+                            fontWeight: tokens.font.weightBold,
+                            color: COLOR_MAP[color] || tokens.color.primary,
+                        }, children: [percentage.toFixed(0), "%"] }))] })), _jsx("div", { style: trackStyle, children: _jsx("div", { style: barStyle, children: _jsx("style", { children: `
+            @keyframes ds-progress-indeterminate {
+              0% { transform: translateX(-200%); }
+              100% { transform: translateX(400%); }
+            }
+          ` }) }) })] }));
 };
 //# sourceMappingURL=Progress.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IAEnE,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,SAAS,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAC5C,KAAK,SAAS,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAC5C,KAAK,QAAQ,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;YAC1C,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;YACtC,KAAK,SAAS,CAAC;YACf,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAwB;QAC1C,KAAK,EAAE,MAAM;QACb,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;QACxC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;KAC3C,CAAC;IAEF,MAAM,QAAQ,GAAwB;QACpC,KAAK,EAAE,GAAG,UAAU,GAAG;QACvB,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,QAAQ,EAAE;QAC3B,UAAU,EAAE,wBAAwB;QACpC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;KACjC,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,aACxD,SAAS,IAAI,CACZ,cAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;oBAC/B,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;oBAC/B,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;oBACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;oBAClC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;iBAC9B,YACC,2BAAO,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GACjC,CACP,EACD,cAAK,KAAK,EAAE,UAAU,YACpB,cAAK,KAAK,EAAE,QAAQ,GAAI,GACpB,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAcnC,MAAM,SAAS,GAA2B;IACxC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;IAC7B,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;IAC7B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;IAC3B,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;IACvB,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;CAC9B,CAAC;AAEF,MAAM,WAAW,GAA2B;IAC1C,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,MAAM,EACN,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC;IAEvD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;YACzB,OAAO,0BAA0B,MAAM,CAAC,KAAK,CAAC,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC;QACzF,CAAC;QACD,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,KAAK,UAAU,CAAC;IAExC,MAAM,UAAU,GAAwB;QACtC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,SAAS;QACjB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;QACtC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,QAAQ,EAAE,QAAQ;KACnB,CAAC;IAEF,MAAM,QAAQ,GAAwB;QACpC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG;QAC/C,MAAM,EAAE,MAAM;QACd,GAAG,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE;YAC/B,CAAC,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,CAAC;QACvC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,yCAAyC;QAC9E,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,qDAAqD,CAAC,CAAC,CAAC,SAAS;QAC5F,QAAQ,EAAE,UAAmB;QAC7B,QAAQ,EAAE,QAAQ;QAClB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;YACZ,eAAe,EAAE;;;;;;QAMf;SACH,CAAC,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,SAAS,EAAE,KAAM,KAAK,aACtF,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CACvB,eAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;oBAC/B,UAAU,EAAE,QAAQ;oBACpB,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;iBAChC,aACE,KAAK,IAAI,CACR,eAAM,KAAK,EAAE;4BACX,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;4BACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc;4BACtC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;4BAC7B,aAAa,EAAE,QAAQ;yBACxB,YACE,KAAK,GACD,CACR,EACA,SAAS,IAAI,CAAC,aAAa,IAAI,CAC9B,gBAAM,KAAK,EAAE;4BACX,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;4BACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;4BAClC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO;yBAChD,aACE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SACjB,CACR,IACG,CACP,EAED,cAAK,KAAK,EAAE,UAAU,YACpB,cAAK,KAAK,EAAE,QAAQ,YAClB,0BAAQ;;;;;WAKP,GAAS,GACN,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -2,11 +2,14 @@ import React from 'react';
 import { tokens } from '../tokens';
 export interface RadioProps {
     label?: React.ReactNode;
+    description?: string;
     checked: boolean;
     name?: string;
     value?: string | number;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'success' | 'warning' | 'danger';
     className?: string;
     style?: React.CSSProperties;
 }
@@ -15,6 +18,7 @@ export interface RadioGroupProps {
     children: React.ReactNode;
     direction?: 'row' | 'column';
     spacing?: keyof typeof tokens.spacing;
+    label?: string;
     className?: string;
     style?: React.CSSProperties;
 }

package/dist/src/components/Radio.js

@@ -1,51 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Radio = ({ label, checked, name, value, onChange, disabled = false, className = '', style = {}, }) => {
+const COLOR_MAP = {
+    primary: tokens.color.primary,
+    success: tokens.color.success,
+    warning: tokens.color.warning,
+    danger: tokens.color.danger,
+};
+const SIZE_CONFIG = {
+    sm: { outer: '16px', inner: '8px' },
+    md: { outer: '20px', inner: '10px' },
+    lg: { outer: '24px', inner: '12px' },
+};
+export const Radio = ({ label, description, checked, name, value, onChange, disabled = false, size = 'md', color = 'primary', className = '', style = {}, }) => {
+    const activeColor = COLOR_MAP[color] || tokens.color.primary;
+    const sc = SIZE_CONFIG[size] || SIZE_CONFIG.md;
     const containerStyle = {
         display: 'inline-flex',
-        alignItems: 'center',
+        alignItems: description ? 'flex-start' : 'center',
         gap: tokens.spacing['3'],
         cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.6 : 1,
+        opacity: disabled ? 0.55 : 1,
         userSelect: 'none',
         ...style,
     };
     const radioBoxStyle = {
         position: 'relative',
-        width: '20px',
-        height: '20px',
+        width: sc.outer,
+        height: sc.outer,
         borderRadius: '50%',
-        border: `2px solid ${checked ? tokens.color.primary : tokens.color.border}`,
+        border: `2px solid ${checked ? activeColor : tokens.color.slate300}`,
         backgroundColor: tokens.color.surface,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        transition: tokens.transition.fast,
+        transition: 'border-color 0.2s, box-shadow 0.2s',
         flexShrink: 0,
+        boxShadow: checked ? `0 0 0 3px ${activeColor}20` : 'none',
+        marginTop: description ? '2px' : '0',
     };
     const innerCircleStyle = {
-        width: '10px',
-        height: '10px',
+        width: sc.inner,
+        height: sc.inner,
         borderRadius: '50%',
-        backgroundColor: tokens.color.primary,
+        backgroundColor: activeColor,
         transform: checked ? 'scale(1)' : 'scale(0)',
         opacity: checked ? 1 : 0,
-        transition: tokens.transition.fast,
+        transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease',
     };
-    return (_jsxs("label", { style: containerStyle, className: className, children: [_jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, disabled: disabled, style: { position: 'absolute', opacity: 0, width: 0, height: 0 } }), _jsx("div", { style: radioBoxStyle, children: _jsx("div", { style: innerCircleStyle }) })] }), label && (_jsx("span", { style: {
-                    fontSize: tokens.font.sm,
-                    fontWeight: tokens.font.weightMedium,
-                    color: tokens.color.text,
-                }, children: label }))] }));
+    return (_jsxs("label", { style: containerStyle, className: `ds-radio ${className}`, children: [_jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', flexShrink: 0 }, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, disabled: disabled, style: { position: 'absolute', opacity: 0, width: 0, height: 0 } }), _jsx("div", { style: radioBoxStyle, children: _jsx("div", { style: innerCircleStyle }) })] }), (label || description) && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [label && (_jsx("span", { style: {
+                            fontSize: tokens.font.sm,
+                            fontWeight: tokens.font.weightSemibold,
+                            color: disabled ? tokens.color.textDisabled : tokens.color.text,
+                            lineHeight: 1.4,
+                        }, children: label })), description && (_jsx("span", { style: {
+                            fontSize: '11px',
+                            fontWeight: tokens.font.weightMedium,
+                            color: tokens.color.textMuted,
+                            lineHeight: 1.4,
+                        }, children: description }))] }))] }));
 };
-export const RadioGroup = ({ children, direction = 'column', spacing = '3', className = '', style = {}, }) => {
+export const RadioGroup = ({ children, direction = 'column', spacing = '3', label, className = '', style = {}, }) => {
     var _a;
-    const groupStyle = {
-        display: 'flex',
-        flexDirection: direction,
-        gap: (_a = tokens.spacing[spacing]) !== null && _a !== void 0 ? _a : tokens.spacing['3'],
-        ...style,
-    };
-    return (_jsx("div", { style: groupStyle, className: className, children: children }));
+    return (_jsxs("div", { role: "radiogroup", style: { ...style }, className: `ds-radio-group ${className}`, children: [label && (_jsx("div", { style: {
+                    fontSize: tokens.font.xs,
+                    fontWeight: tokens.font.weightBold,
+                    color: tokens.color.slate500,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.07em',
+                    marginBottom: tokens.spacing['2'],
+                }, children: label })), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: direction,
+                    gap: (_a = tokens.spacing[spacing]) !== null && _a !== void 0 ? _a : tokens.spacing['3'],
+                }, children: children })] }));
 };
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAanC,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;IACH,MAAM,cAAc,GAAwB;QAC1C,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QACxB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QAC5C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3B,UAAU,EAAE,MAAM;QAClB,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,aAAa,GAAwB;QACzC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,aAAa,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;QAC3E,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;QACrC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;QAClC,UAAU,EAAE,CAAC;KACd,CAAC;IAEF,MAAM,gBAAgB,GAAwB;QAC5C,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;QACrC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;QAC5C,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;KACnC,CAAC;IAEF,OAAO,CACL,iBAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,aAChD,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,GAChE,EACF,cAAK,KAAK,EAAE,aAAa,YACvB,cAAK,KAAK,EAAE,gBAAgB,GAAI,GAC5B,IACF,EACL,KAAK,IAAI,CACR,eACE,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;oBACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY;oBACpC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;iBACzB,YAEA,KAAK,GACD,CACR,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,OAAO,GAAG,GAAG,EACb,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;;IACH,MAAM,UAAU,GAAwB;QACtC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,SAAS;QACxB,GAAG,EAAE,MAAA,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,mCAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QACnD,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio.tsx"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,11 @@
 import React from 'react';
 export interface ReadOnlyFieldProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
-    value?: string;
+    value?: React.ReactNode;
+    icon?: React.ReactNode;
+    copyable?: boolean;
+    placeholder?: string;
+    hint?: string;
+    layout?: 'floating' | 'stacked';
 }
 export declare const ReadOnlyField: React.FC<ReadOnlyFieldProps>;