shared-design-system 1.12.0 → 1.13.0

package/dist/src/components/ConfirmModal.js

@@ -1,53 +1,105 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { Button } from './Button';
 import { tokens } from '../tokens';
-export const ConfirmModal = ({ isOpen, title, message, confirmText = 'Xác nhận', cancelText = 'Hủy bỏ', onConfirm, onCancel, variant = 'primary', }) => {
+const VARIANT_ICONS = {
+    danger: (_jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
+    warning: (_jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
+    primary: (_jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] })),
+};
+const VARIANT_STYLE = {
+    danger: { color: tokens.color.danger, bg: tokens.color.dangerBg },
+    warning: { color: tokens.color.warning, bg: tokens.color.warningBg },
+    primary: { color: tokens.color.primary, bg: tokens.color.primaryLight },
+};
+const SIZE_WIDTH = {
+    sm: '360px',
+    md: '440px',
+    lg: '560px',
+};
+export const ConfirmModal = ({ isOpen, title, message, confirmText = 'Xác nhận', cancelText = 'Hủy bỏ', onConfirm, onCancel, variant = 'primary', icon, size = 'md', loading = false, }) => {
+    // Escape key handler
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handler = (e) => { if (e.key === 'Escape')
+            onCancel(); };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [isOpen, onCancel]);
     if (!isOpen)
         return null;
-    const overlayStyle = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        backgroundColor: tokens.color.overlay,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 1000,
-        backdropFilter: 'blur(4px)',
-        fontFamily: tokens.font.family,
-    };
-    const modalStyle = {
-        backgroundColor: tokens.color.surface,
-        borderRadius: tokens.radius.xl,
-        padding: tokens.spacing[8],
-        width: '420px',
-        maxWidth: '90%',
-        boxShadow: tokens.shadow.xl,
-        animation: 'ds-fade-in 0.25s ease-out',
-    };
-    return (_jsxs("div", { style: overlayStyle, onClick: onCancel, children: [_jsxs("div", { style: modalStyle, onClick: e => e.stopPropagation(), children: [_jsx("h3", { style: {
-                            marginTop: 0,
-                            marginBottom: tokens.spacing[3],
-                            fontSize: tokens.font.xl,
-                            fontWeight: tokens.font.weightBold,
-                            color: tokens.color.text
-                        }, children: title }), _jsx("p", { style: {
-                            marginTop: 0,
-                            marginBottom: tokens.spacing[8],
-                            fontSize: tokens.font.base,
-                            lineHeight: 1.6,
-                            color: tokens.color.textMuted
-                        }, children: message }), _jsxs("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            gap: tokens.spacing[3]
-                        }, children: [_jsx(Button, { variant: "ghost", onClick: onCancel, children: cancelText }), _jsx(Button, { variant: variant, onClick: onConfirm, children: confirmText })] })] }), _jsx("style", { children: `
-        @keyframes ds-fade-in {
-          from { opacity: 0; transform: scale(0.95); }
-          to { opacity: 1; transform: scale(1); }
-        }
-      ` })] }));
+    const vs = VARIANT_STYLE[variant] || VARIANT_STYLE.primary;
+    const resolvedIcon = icon || VARIANT_ICONS[variant];
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        @keyframes ds-modal-in {
+          from { opacity: 0; transform: scale(0.94) translateY(8px); }
+          to   { opacity: 1; transform: scale(1)    translateY(0); }
+        }
+        @keyframes ds-overlay-in {
+          from { opacity: 0; }
+          to   { opacity: 1; }
+        }
+      ` }), _jsx("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'rgba(15, 23, 42, 0.45)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 1000,
+                    backdropFilter: 'blur(6px)',
+                    WebkitBackdropFilter: 'blur(6px)',
+                    fontFamily: tokens.font.family,
+                    padding: tokens.spacing[4],
+                    animation: 'ds-overlay-in 0.2s ease-out',
+                }, onClick: onCancel, children: _jsxs("div", { style: {
+                        backgroundColor: tokens.color.surface,
+                        borderRadius: tokens.radius['2xl'],
+                        width: SIZE_WIDTH[size] || SIZE_WIDTH.md,
+                        maxWidth: '100%',
+                        boxShadow: `
+              ${tokens.shadow.xl},
+              0 0 0 1px rgba(0,0,0,0.05),
+              inset 0 1px 0 rgba(255,255,255,0.9)
+            `,
+                        animation: 'ds-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                        overflow: 'hidden',
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: {
+                                height: '4px',
+                                background: `linear-gradient(90deg, ${vs.color}, ${vs.color}80)`,
+                            } }), _jsxs("div", { style: { padding: tokens.spacing[8] }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: tokens.spacing[4], marginBottom: tokens.spacing[4] }, children: [_jsx("div", { style: {
+                                                width: '52px',
+                                                height: '52px',
+                                                borderRadius: tokens.radius.xl,
+                                                backgroundColor: vs.bg,
+                                                color: vs.color,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                flexShrink: 0,
+                                            }, children: resolvedIcon }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("h3", { style: {
+                                                        margin: 0,
+                                                        fontSize: tokens.font.lg,
+                                                        fontWeight: tokens.font.weightBold,
+                                                        color: tokens.color.text,
+                                                        lineHeight: 1.25,
+                                                        letterSpacing: '-0.02em',
+                                                    }, children: title }), _jsx("div", { style: {
+                                                        marginTop: tokens.spacing[2],
+                                                        fontSize: tokens.font.sm,
+                                                        lineHeight: 1.65,
+                                                        color: tokens.color.textMuted,
+                                                        fontWeight: tokens.font.weightMedium,
+                                                    }, children: message })] })] }), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                        gap: tokens.spacing[3],
+                                        paddingTop: tokens.spacing[4],
+                                        borderTop: `1px solid ${tokens.color.slate100}`,
+                                    }, children: [_jsx(Button, { variant: "ghost", onClick: onCancel, disabled: loading, autoFocus: true, children: cancelText }), _jsx(Button, { variant: variant === 'warning' ? 'amber' : variant, onClick: onConfirm, disabled: loading, children: loading ? 'Đang xử lý...' : confirmText })] })] })] }) })] }));
 };
 //# sourceMappingURL=ConfirmModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/ConfirmModal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAanC,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,MAAM,EACN,KAAK,EACL,OAAO,EACP,WAAW,GAAG,UAAU,EACxB,UAAU,GAAG,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,SAAS,GACpB,EAAE,EAAE;IACH,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,YAAY,GAAwB;QACxC,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;QACrC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,WAAW;QAC3B,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM;KAC/B,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;QACrC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;QAC9B,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1B,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;QAC3B,SAAS,EAAE,2BAA2B;KACvC,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,aACzC,eAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aACvD,aAAI,KAAK,EAAE;4BACT,SAAS,EAAE,CAAC;4BACZ,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;4BAC/B,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;4BACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;4BAClC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;yBACzB,YACE,KAAK,GACH,EACL,YAAG,KAAK,EAAE;4BACR,SAAS,EAAE,CAAC;4BACZ,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;4BAC/B,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI;4BAC1B,UAAU,EAAE,GAAG;4BACf,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;yBAC9B,YACE,OAAO,GACN,EACJ,eAAK,KAAK,EAAE;4BACV,OAAO,EAAE,MAAM;4BACf,cAAc,EAAE,UAAU;4BAC1B,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;yBACvB,aACC,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,YACtC,UAAU,GACJ,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,YACzC,WAAW,GACL,IACL,IACF,EACN,0BAAQ;;;;;OAKP,GAAS,IACN,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/ConfirmModal.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/src/components/Divider.js

@@ -1,43 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Divider = ({ orientation = 'horizontal', type = 'solid', label, margin = 'md', className = '', style = {} }) => {
+export const Divider = ({ orientation = 'horizontal', type = 'solid', label, margin = 'md', color, thickness = 1, className = '', style = {}, }) => {
     const getMargin = () => {
         switch (margin) {
             case 'none': return '0';
+            case 'xs': return tokens.spacing[1];
             case 'sm': return tokens.spacing[2];
             case 'lg': return tokens.spacing[8];
             default: return tokens.spacing[4];
         }
     };
     const isVertical = orientation === 'vertical';
+    const isDashed = type === 'dashed';
     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',
+    const defaultColor = color || tokens.color.slate200;
+    const lineStyle = isGradient
+        ? {
+            background: isVertical
+                ? `linear-gradient(to bottom, transparent, ${defaultColor}, transparent)`
+                : `linear-gradient(to right, transparent, ${defaultColor}, transparent)`,
+            border: 'none',
+        }
+        : {
+            backgroundColor: isDashed ? 'transparent' : defaultColor,
+            border: isDashed
+                ? `${thickness}px dashed ${defaultColor}`
+                : 'none',
+        };
+    const baseLineStyle = {
+        ...lineStyle,
         flexShrink: 0,
-        ...style
+        width: isVertical ? `${thickness}px` : '100%',
+        height: isVertical ? '100%' : `${thickness}px`,
+        ...(!isDashed && !isGradient ? { backgroundColor: defaultColor } : {}),
     };
     if (isVertical) {
         return (_jsx("div", { style: {
-                ...lineStyle,
+                ...baseLineStyle,
                 margin: `0 ${getMargin()}`,
                 display: 'inline-block',
-                verticalAlign: 'middle'
-            }, className: className }));
+                alignSelf: 'stretch',
+                ...style,
+            }, className: `ds-divider ds-divider--vertical ${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 (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                margin: `${getMargin()} 0`,
+                gap: tokens.spacing[3],
+                ...style,
+            }, className: `ds-divider ds-divider--labeled ${className}`, children: [_jsx("div", { style: { ...baseLineStyle, flex: 1 } }), _jsx("span", { style: {
+                        fontSize: '11px',
+                        fontWeight: tokens.font.weightSemibold,
+                        color: tokens.color.slate400,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.08em',
+                        whiteSpace: 'nowrap',
+                        padding: `0 ${tokens.spacing[1]}`,
+                    }, children: label }), _jsx("div", { style: { ...baseLineStyle, flex: 1 } })] }));
     }
     return (_jsx("hr", { style: {
-            ...lineStyle,
-            margin: `${getMargin()} 0`
-        }, className: className }));
+            ...baseLineStyle,
+            margin: `${getMargin()} 0`,
+            ...style,
+        }, className: `ds-divider ${className}` }));
 };
 //# sourceMappingURL=Divider.js.map

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

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

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

@@ -3,16 +3,19 @@ export interface ListProps<T = any> extends Omit<React.HTMLAttributes<HTMLUListE
     children?: React.ReactNode;
     items?: T[];
     renderItem?: (item: T, index: number) => React.ReactNode;
-    variant?: 'default' | 'sidebar' | 'ghost';
-    spacing?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'sidebar' | 'ghost' | 'card';
+    spacing?: 'none' | 'xs' | 'sm' | 'md';
+    divider?: boolean;
 }
-export declare const List: <T extends any>({ children, items, renderItem, className, style, variant, spacing, ...props }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const List: <T extends any>({ children, items, renderItem, className, style, variant, spacing, divider, ...props }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     icon?: React.ReactNode;
     action?: React.ReactNode;
+    badge?: React.ReactNode;
     divider?: boolean;
     active?: boolean;
-    variant?: 'default' | 'sidebar' | 'ghost';
+    variant?: 'default' | 'sidebar' | 'ghost' | 'card';
+    description?: string;
 }
 export declare const ListItem: React.FC<ListItemProps>;

package/dist/src/components/ListComponents.js

@@ -1,63 +1,98 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { tokens } from '../tokens';
-export const List = ({ children, items, renderItem, className = '', style = {}, variant = 'default', spacing = 'sm', ...props }) => {
+export const List = ({ children, items, renderItem, className = '', style = {}, variant = 'default', spacing = 'xs', divider = false, ...props }) => {
+    const isCard = variant === 'card';
+    const isSidebarOrGhost = variant === 'sidebar' || variant === 'ghost';
     const getSpacing = () => {
         switch (spacing) {
-            case 'sm': return '4px';
-            case 'md': return '8px';
-            case 'lg': return '12px';
+            case 'none': return '0';
+            case 'xs': return '2px';
+            case 'md': return tokens.spacing[2];
             default: return '4px';
         }
     };
     const containerStyle = {
         listStyle: 'none',
-        padding: 0,
+        padding: isCard ? tokens.spacing[3] : 0,
         margin: 0,
         display: 'flex',
         flexDirection: 'column',
-        gap: variant === 'sidebar' || variant === 'ghost' ? getSpacing() : '0',
-        border: variant === 'default' ? `1px solid ${tokens.color.slate100}` : 'none',
-        borderRadius: variant === 'default' ? tokens.radius.lg : '0',
+        gap: isSidebarOrGhost || isCard ? getSpacing() : '0',
+        border: variant === 'default' ? `1px solid ${tokens.color.slate100}` : isCard ? `1px solid ${tokens.color.slate100}` : 'none',
+        borderRadius: variant === 'default' ? tokens.radius.xl : isCard ? tokens.radius['2xl'] : '0',
         overflow: 'hidden',
-        backgroundColor: variant === 'default' ? tokens.color.white : 'transparent',
-        ...style
+        backgroundColor: variant === 'default' ? tokens.color.white : isCard ? tokens.color.white : 'transparent',
+        boxShadow: isCard ? tokens.shadow.sm : 'none',
+        ...style,
     };
-    return (_jsx("ul", { style: containerStyle, className: className, ...props, children: items && renderItem ? items.map((item, index) => _jsx(React.Fragment, { children: renderItem(item, index) }, index)) : children }));
+    return (_jsx("ul", { style: containerStyle, className: `ds-list ds-list--${variant} ${className}`, ...props, children: items && renderItem
+            ? items.map((item, index) => (_jsxs(React.Fragment, { children: [renderItem(item, index), divider && index < items.length - 1 && (_jsx("li", { "aria-hidden": true, style: { height: '1px', backgroundColor: tokens.color.slate100, margin: '0 -0px' } }))] }, index)))
+            : children }));
 };
-export const ListItem = ({ children, icon, action, onClick, className = '', style = {}, divider = false, active = false, variant = 'sidebar', ...props }) => {
-    const isSidebar = variant === 'sidebar';
+export const ListItem = ({ children, icon, action, badge, onClick, className = '', style = {}, divider = false, active = false, variant = 'sidebar', description, ...props }) => {
+    const [hovered, setHovered] = React.useState(false);
+    const isSidebar = variant === 'sidebar' || variant === 'card';
+    const isClickable = !!onClick;
+    const showHover = isClickable && hovered && !active;
+    const getActiveStyles = () => {
+        if (active)
+            return {
+                backgroundColor: tokens.color.primaryLight,
+                color: tokens.color.primary,
+                borderColor: 'rgba(37, 99, 235, 0.2)',
+            };
+        if (showHover)
+            return {
+                backgroundColor: tokens.color.slate50,
+                color: tokens.color.slate700,
+            };
+        return {
+            backgroundColor: 'transparent',
+            color: tokens.color.slate600,
+        };
+    };
     const itemStyle = {
         display: 'flex',
-        alignItems: 'center',
-        padding: isSidebar ? '12px 16px' : '12px 16px',
+        alignItems: description ? 'flex-start' : 'center',
+        padding: isSidebar ? `${tokens.spacing[3]} ${tokens.spacing[4]}` : `${tokens.spacing[4]} ${tokens.spacing[4]}`,
         gap: tokens.spacing[3],
-        cursor: onClick ? 'pointer' : 'default',
-        borderRadius: isSidebar ? tokens.radius.md : '0',
+        cursor: isClickable ? 'pointer' : 'default',
+        borderRadius: isSidebar ? tokens.radius.lg : '0',
         transition: tokens.transition.fast,
-        border: isSidebar ? `1px solid ${active ? tokens.color.borderFocus : 'transparent'}` : 'none',
-        backgroundColor: active && isSidebar ? 'rgba(255, 251, 235, 0.5)' : 'transparent',
-        color: active ? tokens.color.warning : tokens.color.slate500,
-        borderBottom: divider && !isSidebar ? `1px solid ${tokens.color.slate50}` : 'none',
+        border: isSidebar ? `1px solid ${active ? 'rgba(37, 99, 235, 0.15)' : 'transparent'}` : 'none',
+        borderBottom: !isSidebar && (divider || variant === 'default')
+            ? `1px solid ${tokens.color.slate100}`
+            : 'none',
         fontWeight: active ? tokens.font.weightSemibold : tokens.font.weightMedium,
-        ...style
+        outline: 'none',
+        ...getActiveStyles(),
+        ...style,
     };
-    const iconStyle = {
+    const iconWrapStyle = {
         display: 'flex',
         flexShrink: 0,
-        color: active ? tokens.color.warning : tokens.color.slate400,
+        color: active ? tokens.color.primary : showHover ? tokens.color.slate500 : tokens.color.slate400,
         transition: tokens.transition.fast,
+        marginTop: description ? '2px' : '0',
     };
-    return (_jsxs("li", { style: itemStyle, className: className, onClick: onClick, onMouseEnter: onClick ? (e) => {
-            if (!active) {
-                e.currentTarget.style.backgroundColor = 'rgba(248, 250, 252, 1)';
-                e.currentTarget.style.color = tokens.color.slate700;
-            }
-        } : undefined, onMouseLeave: onClick ? (e) => {
-            if (!active) {
-                e.currentTarget.style.backgroundColor = 'transparent';
-                e.currentTarget.style.color = tokens.color.slate500;
-            }
-        } : undefined, ...props, children: [icon && _jsx("div", { style: iconStyle, children: icon }), _jsx("div", { style: { flex: 1, fontSize: '13px' }, children: children }), action && _jsx("div", { style: { flexShrink: 0 }, children: action })] }));
+    return (_jsxs("li", { style: itemStyle, className: `ds-list-item ${className}`, onClick: onClick, onMouseEnter: () => isClickable && setHovered(true), onMouseLeave: () => isClickable && setHovered(false), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, ...props, children: [icon && _jsx("div", { style: iconWrapStyle, children: icon }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                            fontSize: tokens.font.sm,
+                            lineHeight: 1.4,
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                        }, children: children }), description && (_jsx("div", { style: {
+                            fontSize: '11px',
+                            color: tokens.color.textMuted,
+                            marginTop: '2px',
+                            fontWeight: tokens.font.weightMedium,
+                            lineHeight: 1.4,
+                        }, children: description }))] }), badge && (_jsx("div", { style: { flexShrink: 0, marginLeft: tokens.spacing[1] }, children: badge })), action && (_jsx("div", { style: { flexShrink: 0 }, children: action })), isSidebar && isClickable && !action && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", style: {
+                    flexShrink: 0,
+                    opacity: active ? 0.7 : 0.3,
+                    transition: tokens.transition.fast,
+                    marginLeft: 'auto',
+                }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }))] }));
 };
 //# sourceMappingURL=ListComponents.js.map

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

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

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

@@ -1,7 +1,14 @@
 import React from 'react';
 export interface LoadingSpinnerProps {
-    size?: 'sm' | 'md' | 'lg';
-    color?: 'primary' | 'white';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'primary' | 'white' | 'success' | 'warning' | 'danger' | 'info' | 'slate';
+    label?: string;
     className?: string;
+    style?: React.CSSProperties;
 }
 export declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;
+export interface LoadingOverlayProps {
+    visible?: boolean;
+    label?: string;
+}
+export declare const LoadingOverlay: React.FC<LoadingOverlayProps>;

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