shared-design-system 1.11.0 → 1.13.0

package/dist/src/components/Steps.js

@@ -1,84 +1,109 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
 import { tokens } from '../tokens';
-export const Steps = ({ current = 0, items = [], direction = 'horizontal', className = '', style = {}, }) => {
-    const containerStyle = {
-        display: 'flex',
-        flexDirection: direction === 'vertical' ? 'column' : 'row',
-        gap: tokens.spacing['4'],
-        width: '100%',
-        ...style,
-    };
-    return (_jsx("div", { style: containerStyle, className: className, children: items.map((item, index) => {
-            const status = index < current ? 'finish' : index === current ? 'process' : 'wait';
-            return (_jsx(React.Fragment, { children: _jsx(StepItemComponent, { index: index, status: status, title: item.title, description: item.description, direction: direction, isLast: index === items.length - 1 }) }, index));
-        }) }));
-};
 const getColors = (status) => {
     switch (status) {
         case 'finish':
-            return { main: tokens.color.primary, bg: tokens.color.primaryLight, text: tokens.color.primary };
+            return { main: tokens.color.primary, bg: tokens.color.primaryLight, text: tokens.color.primary, line: tokens.color.primary };
         case 'process':
-            return { main: tokens.color.primary, bg: tokens.color.primary, text: '#ffffff' };
+            return { main: tokens.color.primary, bg: tokens.color.primary, text: '#ffffff', line: tokens.color.slate200 };
+        case 'error':
+            return { main: tokens.color.danger, bg: tokens.color.dangerBg, text: tokens.color.danger, line: tokens.color.slate200 };
         case 'wait':
         default:
-            return { main: tokens.color.border, bg: tokens.color.surfaceAlt, text: tokens.color.textMuted };
+            return { main: tokens.color.slate300, bg: tokens.color.slate50, text: tokens.color.slate400, line: tokens.color.slate200 };
     }
 };
-const StepItemComponent = ({ index, status, title, description, direction, isLast, }) => {
+const ICON_SIZE = { sm: '28px', md: '36px', lg: '44px' };
+const FONT_SIZE = { sm: tokens.font.xs, md: tokens.font.sm, lg: tokens.font.base };
+export const Steps = ({ current = 0, items = [], direction = 'horizontal', size = 'md', className = '', style = {}, }) => {
+    const isVertical = direction === 'vertical';
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: isVertical ? 'column' : 'row',
+            gap: 0,
+            width: '100%',
+            ...style,
+        }, className: `ds-steps ds-steps--${direction} ${className}`, children: items.map((item, index) => {
+            const status = index < current ? 'finish' : index === current ? 'process' : 'wait';
+            return (_jsx(StepItemComponent, { index: index, status: status, title: item.title, description: item.description, icon: item.icon, direction: direction, isLast: index === items.length - 1, size: size }, index));
+        }) }));
+};
+const StepItemComponent = ({ index, status, title, description, icon, direction, isLast, size, }) => {
     const isHorizontal = direction === 'horizontal';
     const c = getColors(status);
-    const itemStyle = {
-        display: 'flex',
-        flexDirection: isHorizontal ? 'column' : 'row',
-        flex: isHorizontal ? (isLast ? 'none' : 1) : 'none',
-        alignItems: isHorizontal ? 'center' : 'flex-start',
-        gap: tokens.spacing['2'],
-        position: 'relative',
-        minWidth: isHorizontal ? (isLast ? 'auto' : '150px') : 'auto',
-        marginBottom: isHorizontal ? 0 : isLast ? 0 : tokens.spacing['8'],
-    };
-    const iconStyle = {
-        width: '32px',
-        height: '32px',
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        border: `2px solid ${c.main}`,
-        backgroundColor: c.bg,
-        color: c.text,
-        fontSize: tokens.font.sm,
-        fontWeight: tokens.font.weightBold,
-        zIndex: 2,
-        flexShrink: 0,
-    };
-    const lineStyle = {
-        position: 'absolute',
-        backgroundColor: status === 'finish' ? tokens.color.primary : tokens.color.border,
-        zIndex: 1,
-        ...(isHorizontal
-            ? {
-                height: '2px',
-                top: '16px',
-                left: 'calc(50% + 20px)',
-                right: 'calc(-50% + 20px)',
-            }
-            : {
-                width: '2px',
-                left: '16px',
-                top: '36px',
-                bottom: '-20px',
-            }),
-    };
-    return (_jsxs("div", { style: itemStyle, children: [!isLast && _jsx("div", { style: lineStyle }), _jsx("div", { style: iconStyle, children: status === 'finish' ? (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : (index + 1) }), _jsxs("div", { style: {
+    const iconSize = ICON_SIZE[size] || ICON_SIZE.md;
+    const iconSizePx = parseInt(iconSize);
+    const fontSize = FONT_SIZE[size] || tokens.font.sm;
+    const CheckIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+    const ErrorIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }));
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: isHorizontal ? 'column' : 'row',
+            flex: isHorizontal ? (isLast ? 'none' : 1) : 'none',
+            alignItems: isHorizontal ? 'center' : 'flex-start',
+            position: 'relative',
+        }, children: [!isLast && (_jsx("div", { style: {
+                    position: 'absolute',
+                    backgroundColor: 'transparent',
+                    zIndex: 1,
+                    ...(isHorizontal
+                        ? {
+                            height: '2px',
+                            top: `${iconSizePx / 2}px`,
+                            left: `calc(50% + ${iconSizePx / 2 + 4}px)`,
+                            right: `calc(-50% + ${iconSizePx / 2 + 4}px)`,
+                            background: status === 'finish'
+                                ? `linear-gradient(to right, ${tokens.color.primary}, ${tokens.color.primaryLight})`
+                                : tokens.color.slate200,
+                        }
+                        : {
+                            width: '2px',
+                            left: `${iconSizePx / 2 - 1}px`,
+                            top: `${iconSizePx + 6}px`,
+                            height: '32px',
+                            background: status === 'finish'
+                                ? `linear-gradient(to bottom, ${tokens.color.primary}, ${tokens.color.primaryLight})`
+                                : tokens.color.slate200,
+                        }),
+                } })), _jsx("div", { style: {
+                    width: iconSize,
+                    height: iconSize,
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border: `2px solid ${c.main}`,
+                    backgroundColor: c.bg,
+                    color: c.text,
+                    fontSize,
+                    fontWeight: tokens.font.weightBold,
+                    zIndex: 2,
+                    flexShrink: 0,
+                    transition: tokens.transition.normal,
+                    boxShadow: status === 'process'
+                        ? `0 0 0 4px ${tokens.color.primaryLight}`
+                        : 'none',
+                    marginBottom: isHorizontal ? tokens.spacing['2'] : 0,
+                    marginRight: !isHorizontal ? tokens.spacing['3'] : 0,
+                }, children: icon ? icon : status === 'finish' ? _jsx(CheckIcon, {}) : status === 'error' ? _jsx(ErrorIcon, {}) : index + 1 }), _jsxs("div", { style: {
                     textAlign: isHorizontal ? 'center' : 'left',
-                    marginTop: isHorizontal ? tokens.spacing['2'] : '4px',
-                    paddingLeft: isHorizontal ? 0 : tokens.spacing['2'],
+                    paddingTop: !isHorizontal ? '6px' : 0,
+                    paddingBottom: !isHorizontal && !isLast ? tokens.spacing['8'] : 0,
                 }, children: [_jsx("div", { style: {
-                            fontSize: tokens.font.sm,
-                            fontWeight: status === 'process' ? tokens.font.weightBold : tokens.font.weightMedium,
-                            color: status === 'wait' ? tokens.color.textMuted : tokens.color.text,
-                        }, children: title }), description && (_jsx("div", { style: { fontSize: tokens.font.xs, color: tokens.color.textMuted, marginTop: '2px' }, children: description }))] })] }));
+                            fontSize,
+                            fontWeight: status === 'process' ? tokens.font.weightBold : tokens.font.weightSemibold,
+                            color: status === 'wait' ? tokens.color.textDisabled :
+                                status === 'error' ? tokens.color.danger :
+                                    status === 'process' ? tokens.color.primary :
+                                        tokens.color.text,
+                            lineHeight: 1.35,
+                            transition: tokens.transition.fast,
+                        }, children: title }), description && (_jsx("div", { style: {
+                            fontSize: tokens.font.xs,
+                            color: tokens.color.textMuted,
+                            marginTop: '3px',
+                            fontWeight: tokens.font.weightMedium,
+                            lineHeight: 1.4,
+                        }, children: description }))] })] }));
 };
 //# sourceMappingURL=Steps.js.map

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

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

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

@@ -1,5 +1,9 @@
 import React from 'react';
-export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: React.ReactNode;
+    labelPlacement?: 'start' | 'end';
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'success' | 'warning' | 'danger';
+    description?: string;
 }
 export declare const Switch: React.FC<SwitchProps>;

package/dist/src/components/Switch.js

@@ -1,39 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Switch = ({ checked, onChange, disabled = false, label, className = '', style = {}, ...props }) => {
+const SIZE_CONFIG = {
+    sm: { trackW: '34px', trackH: '18px', thumbSize: '14px', thumbOn: '18px', thumbOff: '2px' },
+    md: { trackW: '44px', trackH: '24px', thumbSize: '20px', thumbOn: '22px', thumbOff: '2px' },
+    lg: { trackW: '54px', trackH: '30px', thumbSize: '26px', thumbOn: '26px', thumbOff: '2px' },
+};
+const COLOR_MAP = {
+    primary: tokens.color.primary,
+    success: tokens.color.success,
+    warning: tokens.color.warning,
+    danger: tokens.color.danger,
+};
+export const Switch = ({ checked, onChange, disabled = false, label, labelPlacement = 'end', size = 'md', color = 'primary', description, className = '', style = {}, ...props }) => {
+    const sc = SIZE_CONFIG[size] || SIZE_CONFIG.md;
+    const activeColor = COLOR_MAP[color] || tokens.color.primary;
     const containerStyle = {
         display: 'inline-flex',
-        alignItems: 'center',
+        alignItems: description ? 'flex-start' : 'center',
+        flexDirection: labelPlacement === 'start' ? 'row-reverse' : 'row',
         gap: tokens.spacing[3],
         cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.6 : 1,
-        ...style
+        opacity: disabled ? 0.55 : 1,
+        userSelect: 'none',
+        ...style,
     };
     const trackStyle = {
         position: 'relative',
-        width: '44px',
-        height: '24px',
-        backgroundColor: checked ? tokens.color.primary : tokens.color.border,
+        width: sc.trackW,
+        height: sc.trackH,
+        backgroundColor: checked ? activeColor : tokens.color.slate200,
         borderRadius: tokens.radius.full,
-        transition: tokens.transition.normal,
-        flexShrink: 0
+        transition: 'background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        flexShrink: 0,
+        boxShadow: checked
+            ? `0 0 0 3px ${activeColor}20`
+            : 'inset 0 1px 2px rgba(0,0,0,0.1)',
     };
     const thumbStyle = {
         position: 'absolute',
-        top: '2px',
-        left: checked ? '22px' : '2px',
-        width: '20px',
-        height: '20px',
-        backgroundColor: 'white',
+        top: `calc(50% - ${sc.thumbSize} / 2)`,
+        left: checked ? sc.thumbOn : sc.thumbOff,
+        width: sc.thumbSize,
+        height: sc.thumbSize,
+        backgroundColor: '#ffffff',
         borderRadius: '50%',
-        transition: tokens.transition.normal,
-        boxShadow: '0 1px 3px rgba(0,0,0,0.2)'
+        transition: 'left 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
+        boxShadow: '0 1px 4px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.06)',
     };
-    return (_jsxs("label", { style: containerStyle, className: className, children: [_jsxs("div", { style: { position: 'relative' }, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: onChange, disabled: disabled, style: {
-                            position: 'absolute',
-                            opacity: 0,
-                            width: 0,
-                            height: 0
-                        }, ...props }), _jsx("div", { style: trackStyle, children: _jsx("div", { style: thumbStyle }) })] }), 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-switch ${className}`, children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: onChange, disabled: disabled, style: { position: 'absolute', opacity: 0, width: 0, height: 0 }, ...props }), _jsx("div", { style: trackStyle, children: _jsx("div", { style: thumbStyle }) })] }), (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 }))] }))] }));
 };
 //# sourceMappingURL=Switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMnC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,cAAc,GAAwB;QAC1C,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACtB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QAC5C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3B,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;QACrE,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM;QACpC,UAAU,EAAE,CAAC;KACd,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;QAC9B,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM;QACpC,SAAS,EAAE,2BAA2B;KACvC,CAAC;IAEF,OAAO,CACL,iBAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,aAChD,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClC,gBACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;4BACL,QAAQ,EAAE,UAAU;4BACpB,OAAO,EAAE,CAAC;4BACV,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,CAAC;yBACV,KACG,KAAK,GACT,EACF,cAAK,KAAK,EAAE,UAAU,YACpB,cAAK,KAAK,EAAE,UAAU,GAAI,GACtB,IACF,EACL,KAAK,IAAI,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,YAAG,KAAK,GAAQ,IAC7H,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":"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"}

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

@@ -3,7 +3,9 @@ export interface TableColumn<T = any> {
     key: string | number;
     label: React.ReactNode;
     width?: string | number;
+    minWidth?: string;
     align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
     render?: (value: any, record: T, index: number) => React.ReactNode;
     headerStyle?: React.CSSProperties;
     cellStyle?: React.CSSProperties;
@@ -17,10 +19,16 @@ export interface TableProps<T = any> {
     headerStyle?: React.CSSProperties;
     rowStyle?: React.CSSProperties | ((record: T, index: number) => React.CSSProperties);
     emptyText?: React.ReactNode;
+    striped?: boolean;
+    bordered?: boolean;
+    loading?: boolean;
+    rowKey?: string | ((record: T) => string | number);
+    activeKey?: string | number;
 }
-export declare const Table: <T extends Record<string, any>>({ columns, data, onRowClick, className, style, headerStyle, rowStyle, emptyText, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends Record<string, any>>({ columns, data, onRowClick, className, style, headerStyle, rowStyle, emptyText, striped, bordered, loading, rowKey, activeKey, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    bordered?: boolean;
 }
 export declare const TableContainer: React.FC<TableContainerProps>;
 export interface THeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {

package/dist/src/components/Table.js

@@ -1,32 +1,103 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { tokens } from '../tokens';
-export const Table = ({ columns, data, onRowClick, className = '', style = {}, headerStyle = {}, rowStyle = {}, emptyText = 'Không tìm thấy dữ liệu liên quan', }) => {
-    return (_jsxs(TableContainer, { className: className, style: style, children: [_jsx(THead, { children: _jsx(TR, { header: true, children: columns.map((col) => (_jsx(TH, { style: {
-                            textAlign: col.align || 'left',
-                            width: col.width,
-                            ...col.headerStyle,
-                            ...headerStyle,
-                        }, children: col.label }, col.key.toString()))) }) }), _jsx(TBody, { children: data.length > 0 ? (data.map((record, rowIndex) => (_jsx(TR, { onClick: onRowClick ? () => onRowClick(record, rowIndex) : undefined, style: typeof rowStyle === 'function' ? rowStyle(record, rowIndex) : rowStyle, children: columns.map((col) => (_jsx(TD, { style: {
-                            textAlign: col.align || 'left',
-                            ...col.cellStyle,
-                        }, children: col.render
-                            ? col.render(record[col.key], record, rowIndex)
-                            : record[col.key] }, col.key.toString()))) }, record.id || record.key || rowIndex)))) : (_jsx(TR, { children: _jsxs(TD, { colSpan: columns.length, style: {
-                            textAlign: 'center',
-                            padding: tokens.spacing[12],
-                            color: tokens.color.slate400,
-                            fontStyle: 'italic',
-                        }, children: [_jsx("div", { style: { fontSize: '2rem', marginBottom: tokens.spacing[4] }, children: "\uD83D\uDCE6" }), emptyText] }) })) })] }));
+export const Table = ({ columns, data, onRowClick, className = '', style = {}, headerStyle = {}, rowStyle = {}, emptyText = 'Không tìm thấy dữ liệu', striped = true, bordered = false, loading = false, rowKey, activeKey, }) => {
+    const [sortKey, setSortKey] = useState(null);
+    const [sortDir, setSortDir] = useState('asc');
+    const [hoveredRow, setHoveredRow] = useState(null);
+    const getRowKey = (record, index) => {
+        var _a, _b;
+        if (rowKey) {
+            return typeof rowKey === 'function' ? rowKey(record) : record[rowKey];
+        }
+        return (_b = (_a = record.id) !== null && _a !== void 0 ? _a : record.key) !== null && _b !== void 0 ? _b : index;
+    };
+    // Optional client-side sort
+    const handleSort = (col) => {
+        if (!col.sortable)
+            return;
+        if (sortKey === col.key) {
+            setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+        }
+        else {
+            setSortKey(col.key);
+            setSortDir('asc');
+        }
+    };
+    let displayData = [...data];
+    if (sortKey !== null) {
+        displayData.sort((a, b) => {
+            const av = a[sortKey];
+            const bv = b[sortKey];
+            if (av == null)
+                return 1;
+            if (bv == null)
+                return -1;
+            const cmp = String(av).localeCompare(String(bv), 'vi', { numeric: true });
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+    }
+    return (_jsxs(TableContainer, { className: className, style: style, bordered: bordered, children: [loading && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(255,255,255,0.7)',
+                    backdropFilter: 'blur(2px)',
+                    zIndex: 10,
+                    borderRadius: 'inherit',
+                }, children: [_jsx("div", { style: {
+                            width: '28px',
+                            height: '28px',
+                            border: `3px solid ${tokens.color.slate200}`,
+                            borderTopColor: tokens.color.primary,
+                            borderRadius: '50%',
+                            animation: 'ds-spin 0.7s linear infinite',
+                        } }), _jsx("style", { children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` })] })), _jsx(THead, { children: _jsx(TR, { header: true, children: columns.map((col) => {
+                        const isSorted = sortKey === col.key;
+                        return (_jsx(TH, { onClick: col.sortable ? () => handleSort(col) : undefined, style: {
+                                textAlign: col.align || 'left',
+                                width: col.width,
+                                minWidth: col.minWidth,
+                                cursor: col.sortable ? 'pointer' : 'default',
+                                userSelect: col.sortable ? 'none' : undefined,
+                                ...col.headerStyle,
+                                ...headerStyle,
+                            }, children: _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '5px' }, children: [col.label, col.sortable && (_jsxs("span", { style: { display: 'inline-flex', flexDirection: 'column', gap: '1px', opacity: isSorted ? 1 : 0.3 }, children: [_jsx("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: isSorted && sortDir === 'asc' ? tokens.color.primary : tokens.color.slate400, children: _jsx("path", { d: "M4 0L8 5H0L4 0Z" }) }), _jsx("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: isSorted && sortDir === 'desc' ? tokens.color.primary : tokens.color.slate400, children: _jsx("path", { d: "M4 5L0 0H8L4 5Z" }) })] }))] }) }, col.key.toString()));
+                    }) }) }), _jsx(TBody, { children: displayData.length > 0 ? (displayData.map((record, rowIndex) => {
+                    const key = getRowKey(record, rowIndex);
+                    const isActive = activeKey !== undefined && getRowKey(record, rowIndex) === activeKey;
+                    const isHovered = hoveredRow === rowIndex;
+                    const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(record, rowIndex) : rowStyle;
+                    const zebraStyle = striped && rowIndex % 2 === 1
+                        ? { backgroundColor: 'rgba(248, 250, 252, 0.6)' }
+                        : {};
+                    return (_jsx(TR, { onClick: onRowClick ? () => onRowClick(record, rowIndex) : undefined, active: isActive, style: {
+                            ...zebraStyle,
+                            ...(isHovered && !isActive ? { backgroundColor: tokens.color.primaryLight } : {}),
+                            ...computedRowStyle,
+                        }, onMouseEnter: () => onRowClick && setHoveredRow(rowIndex), onMouseLeave: () => onRowClick && setHoveredRow(null), children: columns.map((col) => (_jsx(TD, { style: { textAlign: col.align || 'left', ...col.cellStyle }, children: col.render
+                                ? col.render(record[col.key], record, rowIndex)
+                                : record[col.key] }, col.key.toString()))) }, String(key)));
+                })) : (_jsx(TR, { children: _jsx(TD, { colSpan: columns.length, style: { textAlign: 'center', padding: tokens.spacing[12], color: tokens.color.slate400 }, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                gap: tokens.spacing[3],
+                            }, children: [_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: tokens.color.slate300, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }), _jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }), _jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })] }), _jsx("span", { style: { fontSize: tokens.font.sm, fontStyle: 'italic', fontWeight: tokens.font.weightMedium }, children: emptyText })] }) }) })) })] }));
 };
-export const TableContainer = ({ children, className = '', style = {}, ...props }) => (_jsx("div", { ...props, style: {
+export const TableContainer = ({ children, className = '', style = {}, bordered = false, ...props }) => (_jsx("div", { ...props, style: {
         width: '100%',
         overflowX: 'auto',
+        overflowY: 'hidden',
         backgroundColor: tokens.color.white,
         borderRadius: tokens.radius['2xl'],
-        border: `1px solid ${tokens.color.slate100}`,
+        border: `1px solid ${bordered ? tokens.color.slate200 : tokens.color.slate100}`,
         boxShadow: tokens.shadow.sm,
+        position: 'relative',
         ...style,
-    }, className: className, children: _jsx("table", { style: {
+    }, className: `ds-table-container ${className}`, children: _jsx("table", { style: {
             width: '100%',
             borderCollapse: 'collapse',
             textAlign: 'left',
@@ -34,41 +105,35 @@ export const TableContainer = ({ children, className = '', style = {}, ...props
             fontFamily: tokens.font.family,
         }, children: children }) }));
 export const THead = ({ children, style = {}, ...props }) => (_jsx("thead", { ...props, style: {
-        backgroundColor: 'rgba(248, 250, 252, 0.5)', // Slate 50/50
+        backgroundColor: tokens.color.slate50,
+        borderBottom: `2px solid ${tokens.color.slate100}`,
         ...style,
     }, children: children }));
 export const TBody = ({ children, style = {}, ...props }) => (_jsx("tbody", { ...props, style: { backgroundColor: tokens.color.white, ...style }, children: children }));
 export const TR = ({ children, onClick, active = false, header = false, style = {}, ...props }) => (_jsx("tr", { ...props, onClick: onClick, style: {
-        borderBottom: `1px solid ${tokens.color.slate50}`,
+        borderBottom: `1px solid ${tokens.color.slate100}`,
         backgroundColor: active ? tokens.color.primaryLight : 'transparent',
         transition: tokens.transition.fast,
         cursor: onClick ? 'pointer' : 'default',
         ...style,
-    }, onMouseEnter: !header
-        ? (e) => {
-            e.currentTarget.style.backgroundColor = 'rgba(248, 250, 252, 0.3)';
-        }
-        : undefined, onMouseLeave: !header
-        ? (e) => {
-            e.currentTarget.style.backgroundColor = active
-                ? tokens.color.primaryLight
-                : 'transparent';
-        }
-        : undefined, children: children }));
+    }, children: children }));
 export const TH = ({ children, style = {}, ...props }) => (_jsx("th", { ...props, style: {
-        padding: `${tokens.spacing[5]} ${tokens.spacing[6]}`,
+        padding: `${tokens.spacing[3]} ${tokens.spacing[5]}`,
         fontWeight: tokens.font.weightBold,
-        color: tokens.color.slate400,
+        color: tokens.color.slate500,
         textTransform: 'uppercase',
-        letterSpacing: '0.15em',
+        letterSpacing: '0.08em',
         fontSize: '11px',
+        whiteSpace: 'nowrap',
         ...style,
     }, children: children }));
 export const TD = ({ children, style = {}, ...props }) => (_jsx("td", { ...props, style: {
-        padding: `${tokens.spacing[6]} ${tokens.spacing[6]}`,
+        padding: `${tokens.spacing[4]} ${tokens.spacing[5]}`,
         color: tokens.color.slate600,
         verticalAlign: 'middle',
         fontSize: tokens.font.sm,
+        fontWeight: tokens.font.weightMedium,
+        lineHeight: 1.5,
         ...style,
     }, children: children }));
 //# sourceMappingURL=Table.js.map

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

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

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

@@ -1,20 +1,24 @@
 import React from 'react';
-export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabItem {
     label: string;
     value: any;
     icon?: React.ReactNode;
-    active?: boolean;
-    variant?: 'standard' | 'pills' | 'dashboard';
+    badge?: React.ReactNode;
+    disabled?: boolean;
 }
-export interface TabItem {
+export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     value: any;
     icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    variant?: 'standard' | 'pills' | 'underline' | 'dashboard';
 }
 export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value: any;
     onChange: (value: any) => void;
-    variant?: 'standard' | 'pills' | 'dashboard';
+    variant?: 'standard' | 'pills' | 'underline' | 'dashboard';
     items?: TabItem[];
     children?: React.ReactNode;
     columns?: number;