shared-design-system 1.8.0 → 1.10.0

package/dist/src/components/InputComponents.js

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

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

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

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

@@ -1,13 +1,18 @@
 import React from 'react';
-export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-    children: React.ReactNode;
+export interface ListProps<T = any> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    children?: React.ReactNode;
+    items?: T[];
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    variant?: 'default' | 'sidebar' | 'ghost';
+    spacing?: 'sm' | 'md' | 'lg';
 }
-export declare const List: React.FC<ListProps>;
+export declare const List: <T extends any>({ children, items, renderItem, className, style, variant, spacing, ...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;
     divider?: boolean;
     active?: boolean;
+    variant?: 'default' | 'sidebar' | 'ghost';
 }
 export declare const ListItem: React.FC<ListItemProps>;

package/dist/src/components/ListComponents.js

@@ -1,28 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { tokens } from '../tokens';
-export const List = ({ children, className = '', style = {} }) => (_jsx("ul", { style: {
+export const List = ({ children, items, renderItem, className = '', style = {}, variant = 'default', spacing = 'sm', ...props }) => {
+    const getSpacing = () => {
+        switch (spacing) {
+            case 'sm': return '4px';
+            case 'md': return '8px';
+            case 'lg': return '12px';
+            default: return '4px';
+        }
+    };
+    const containerStyle = {
         listStyle: 'none',
         padding: 0,
         margin: 0,
-        border: `1px solid ${tokens.color.border}`,
-        borderRadius: tokens.radius.lg,
+        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',
         overflow: 'hidden',
-        backgroundColor: tokens.color.surface,
+        backgroundColor: variant === 'default' ? tokens.color.white : 'transparent',
         ...style
-    }, className: className, children: children }));
-export const ListItem = ({ children, icon, action, onClick, className = '', style = {}, divider = true, active = false, ...props }) => {
+    };
+    return (_jsx("ul", { style: containerStyle, className: className, ...props, children: items && renderItem ? items.map((item, index) => _jsx(React.Fragment, { children: renderItem(item, index) }, index)) : children }));
+};
+export const ListItem = ({ children, icon, action, onClick, className = '', style = {}, divider = false, active = false, variant = 'sidebar', ...props }) => {
+    const isSidebar = variant === 'sidebar';
     const itemStyle = {
         display: 'flex',
         alignItems: 'center',
-        padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
-        gap: tokens.spacing[4],
+        padding: isSidebar ? '12px 16px' : '12px 16px',
+        gap: tokens.spacing[3],
         cursor: onClick ? 'pointer' : 'default',
-        backgroundColor: active ? tokens.color.primaryLight : (onClick ? tokens.color.surface : 'transparent'),
-        borderBottom: divider ? `1px solid ${tokens.color.surfaceAlt}` : 'none',
+        borderRadius: isSidebar ? tokens.radius.md : '0',
         transition: tokens.transition.fast,
-        color: active ? tokens.color.primary : tokens.color.text,
+        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',
+        fontWeight: active ? tokens.font.weightSemibold : tokens.font.weightMedium,
         ...style
     };
-    return (_jsxs("li", { style: itemStyle, className: className, onClick: onClick, onMouseEnter: onClick ? (e) => e.currentTarget.style.backgroundColor = active ? tokens.color.primaryLight : tokens.color.surfaceAlt : undefined, onMouseLeave: onClick ? (e) => e.currentTarget.style.backgroundColor = active ? tokens.color.primaryLight : tokens.color.surface : undefined, ...props, children: [icon && _jsx("div", { style: { flexShrink: 0, color: active ? tokens.color.primary : tokens.color.textMuted }, children: icon }), _jsx("div", { style: { flex: 1, fontSize: tokens.font.sm, fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium }, children: children }), action && _jsx("div", { style: { flexShrink: 0 }, children: action })] }));
+    const iconStyle = {
+        display: 'flex',
+        flexShrink: 0,
+        color: active ? tokens.color.warning : tokens.color.slate400,
+        transition: tokens.transition.fast,
+    };
+    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 })] }));
 };
 //# 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":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAgB,EAClC,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,IAAI,EACd,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC;YACxB,KAAK,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC;YACxB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,OAAO,CAAC,CAAC,OAAO,KAAK,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAwB;QAC1C,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG;QACtE,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM;QAC7E,YAAY,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;QAC5D,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;QAC3E,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,aAAI,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,YACvD,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,KAAK,CAAC,QAAQ,cAAc,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,IAA/B,KAAK,CAA4C,CAAC,CAAC,CAAC,CAAC,QAAQ,GACjI,CACN,CAAC;AACJ,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC;IAExC,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;QAC9C,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACtB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACvC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;QAChD,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;QAClC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM;QAC7F,eAAe,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,aAAa;QACjF,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ;QAC5D,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM;QAClF,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY;QAC1E,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,CAAC;QACb,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ;QAC5D,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;KACnC,CAAC;IAEF,OAAO,CACL,cACE,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,eAAe,GAAG,wBAAwB,CAAC;gBACjE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;YACtD,CAAC;QACH,CAAC,CAAC,CAAC,CAAC,SAAS,EACb,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;gBACtD,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;YACtD,CAAC;QACH,CAAC,CAAC,CAAC,CAAC,SAAS,KACT,KAAK,aAER,IAAI,IAAI,cAAK,KAAK,EAAE,SAAS,YAAG,IAAI,GAAO,EAC5C,cAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YACtC,QAAQ,GACL,EACL,MAAM,IAAI,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,YAAG,MAAM,GAAO,IACrD,CACN,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,4 +1,24 @@
 import React from 'react';
+export interface TableColumn<T = any> {
+    key: string | number;
+    label: React.ReactNode;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: any, record: T, index: number) => React.ReactNode;
+    headerStyle?: React.CSSProperties;
+    cellStyle?: React.CSSProperties;
+}
+export interface TableProps<T = any> {
+    columns: TableColumn<T>[];
+    data: T[];
+    onRowClick?: (record: T, index: number) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    rowStyle?: React.CSSProperties | ((record: T, index: number) => React.CSSProperties);
+    emptyText?: React.ReactNode;
+}
+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 interface TableContainerProps {
     children: React.ReactNode;
     className?: string;
@@ -17,6 +37,8 @@ export interface TRProps {
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLTableRowElement>;
     active?: boolean;
+    header?: boolean;
+    style?: React.CSSProperties;
 }
 export declare const TR: React.FC<TRProps>;
 export interface THProps {

package/dist/src/components/Table.js

@@ -1,11 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
+export const 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, { 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 TableContainer = ({ children, className = '', style = {} }) => (_jsx("div", { style: {
         width: '100%',
         overflowX: 'auto',
-        backgroundColor: tokens.color.surface,
-        borderRadius: tokens.radius.xl,
-        border: `1px solid ${tokens.color.border}`,
+        backgroundColor: tokens.color.white,
+        borderRadius: tokens.radius['2xl'],
+        border: `1px solid ${tokens.color.slate100}`,
         boxShadow: tokens.shadow.sm,
         ...style,
     }, className: className, children: _jsx("table", { style: {
@@ -16,39 +29,40 @@ export const TableContainer = ({ children, className = '', style = {} }) => (_js
             fontFamily: tokens.font.family,
         }, children: children }) }));
 export const THead = ({ children }) => (_jsx("thead", { style: {
-        backgroundColor: tokens.color.surfaceAlt,
-        borderBottom: `2px solid ${tokens.color.border}`,
+        backgroundColor: 'rgba(248, 250, 252, 0.5)', // Slate 50/50
     }, children: children }));
-export const TBody = ({ children }) => (_jsx("tbody", { style: { backgroundColor: tokens.color.surface }, children: children }));
-export const TR = ({ children, onClick, active = false }) => (_jsx("tr", { onClick: onClick, style: {
-        borderBottom: `1px solid ${tokens.color.surfaceAlt}`,
-        backgroundColor: active ? tokens.color.primaryLight + '44' : 'transparent',
+export const TBody = ({ children }) => (_jsx("tbody", { style: { backgroundColor: tokens.color.white }, children: children }));
+export const TR = ({ children, onClick, active = false, header = false, style = {} }) => (_jsx("tr", { onClick: onClick, style: {
+        borderBottom: `1px solid ${tokens.color.slate50}`,
+        backgroundColor: active ? tokens.color.primaryLight : 'transparent',
         transition: tokens.transition.fast,
         cursor: onClick ? 'pointer' : 'default',
-    }, onMouseEnter: onClick
+        ...style,
+    }, onMouseEnter: !header
         ? (e) => {
-            e.currentTarget.style.backgroundColor = tokens.color.surfaceAlt;
+            e.currentTarget.style.backgroundColor = 'rgba(248, 250, 252, 0.3)';
         }
-        : undefined, onMouseLeave: onClick
+        : undefined, onMouseLeave: !header
         ? (e) => {
             e.currentTarget.style.backgroundColor = active
-                ? tokens.color.primaryLight + '44'
+                ? tokens.color.primaryLight
                 : 'transparent';
         }
         : undefined, children: children }));
 export const TH = ({ children, style = {} }) => (_jsx("th", { style: {
-        padding: `${tokens.spacing['4']} ${tokens.spacing['4']}`,
+        padding: `${tokens.spacing[5]} ${tokens.spacing[6]}`,
         fontWeight: tokens.font.weightBold,
-        color: tokens.color.textMuted,
+        color: tokens.color.slate400,
         textTransform: 'uppercase',
-        letterSpacing: '0.05em',
-        fontSize: tokens.font.xs,
+        letterSpacing: '0.15em',
+        fontSize: '11px',
         ...style,
     }, children: children }));
 export const TD = ({ children, style = {} }) => (_jsx("td", { style: {
-        padding: `${tokens.spacing['4']} ${tokens.spacing['4']}`,
-        color: tokens.color.text,
+        padding: `${tokens.spacing[6]} ${tokens.spacing[6]}`,
+        color: tokens.color.slate600,
         verticalAlign: 'middle',
+        fontSize: tokens.font.sm,
         ...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

@@ -4,12 +4,20 @@ export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
     value: any;
     icon?: React.ReactNode;
     active?: boolean;
-    variant?: 'standard' | 'pills';
+    variant?: 'standard' | 'pills' | 'dashboard';
 }
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabItem {
+    label: string;
+    value: any;
+    icon?: React.ReactNode;
+}
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value: any;
     onChange: (value: any) => void;
-    variant?: 'standard' | 'pills';
+    variant?: 'standard' | 'pills' | 'dashboard';
+    items?: TabItem[];
+    children?: React.ReactNode;
+    columns?: number;
 }
 export declare const Tabs: React.FC<TabsProps>;
 export declare const Tab: React.FC<TabProps>;

package/dist/src/components/Tabs.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { tokens } from '../tokens';
-export const Tabs = ({ value, onChange, children, variant = 'standard', className = '', style = {} }) => {
+export const Tabs = ({ value, onChange, items, children, variant = 'standard', columns = 4, className = '', style = {} }) => {
     const containerStyle = {
-        display: 'flex',
-        borderBottom: variant === 'standard' ? `1px solid ${tokens.color.border}` : 'none',
-        gap: tokens.spacing[4],
+        display: variant === 'dashboard' ? 'grid' : 'flex',
+        gridTemplateColumns: variant === 'dashboard' ? `repeat(${columns}, 1fr)` : 'none',
+        borderBottom: variant === 'standard' ? `1px solid ${tokens.color.slate100}` : 'none',
+        gap: variant === 'dashboard' ? tokens.spacing[4] : tokens.spacing[4],
         width: '100%',
         overflowX: 'auto',
+        paddingBottom: variant === 'dashboard' ? tokens.spacing[2] : '0',
         ...style
     };
-    return (_jsx("div", { style: containerStyle, className: className, children: React.Children.map(children, child => {
+    return (_jsx("div", { style: containerStyle, className: className, children: items ? items.map((item, index) => (_jsx(Tab, { label: item.label, value: item.value, icon: item.icon, active: item.value === value, onClick: () => onChange(item.value), variant: variant }, index))) : React.Children.map(children, child => {
             if (!React.isValidElement(child))
                 return null;
             return React.cloneElement(child, {
@@ -21,22 +23,72 @@ export const Tabs = ({ value, onChange, children, variant = 'standard', classNam
         }) }));
 };
 export const Tab = ({ label, value, icon, active, onClick, variant, className = '', style = {} }) => {
-    const tabStyle = {
-        display: 'flex',
-        alignItems: 'center',
-        gap: tokens.spacing[2],
-        padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
+    const getTabStyle = () => {
+        switch (variant) {
+            case 'dashboard':
+                return {
+                    position: 'relative',
+                    cursor: 'pointer',
+                    backgroundColor: tokens.color.white,
+                    borderRadius: tokens.radius.xl,
+                    padding: tokens.spacing[5],
+                    boxShadow: active ? tokens.shadow.md : tokens.shadow.sm,
+                    borderTop: `2px solid ${active ? tokens.color.danger : 'transparent'}`,
+                    transition: tokens.transition.normal,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: tokens.spacing[3],
+                    flex: 1,
+                    borderBottom: 'none',
+                    ...style
+                };
+            case 'pills':
+                return {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: tokens.spacing[2],
+                    padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
+                    fontSize: tokens.font.sm,
+                    fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
+                    color: active ? tokens.color.primary : tokens.color.textMuted,
+                    cursor: 'pointer',
+                    transition: tokens.transition.fast,
+                    backgroundColor: active ? tokens.color.primaryLight : 'transparent',
+                    borderRadius: tokens.radius.md,
+                    whiteSpace: 'nowrap',
+                    ...style
+                };
+            case 'standard':
+            default:
+                return {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: tokens.spacing[2],
+                    padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
+                    fontSize: tokens.font.sm,
+                    fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
+                    color: active ? tokens.color.primary : tokens.color.textMuted,
+                    cursor: 'pointer',
+                    borderBottom: `2px solid ${active ? tokens.color.primary : 'transparent'}`,
+                    transition: tokens.transition.fast,
+                    whiteSpace: 'nowrap',
+                    ...style
+                };
+        }
+    };
+    const textStyle = {
         fontSize: tokens.font.sm,
-        fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
-        color: active ? tokens.color.primary : tokens.color.textMuted,
-        cursor: 'pointer',
-        borderBottom: active && variant === 'standard' ? `2px solid ${tokens.color.primary}` : '2px solid transparent',
+        fontWeight: tokens.font.weightSemibold,
+        color: active ? tokens.color.slate800 : tokens.color.slate500,
+        transition: tokens.transition.fast,
+    };
+    const iconStyle = {
+        display: 'flex',
+        padding: tokens.spacing[2],
+        borderRadius: tokens.radius.md,
+        color: active ? tokens.color.warning : tokens.color.slate400,
         transition: tokens.transition.fast,
-        backgroundColor: active && variant === 'pills' ? tokens.color.primaryLight : 'transparent',
-        borderRadius: variant === 'pills' ? tokens.radius.md : '0',
-        whiteSpace: 'nowrap',
-        ...style
     };
-    return (_jsxs("div", { style: tabStyle, onClick: onClick, className: className, children: [icon && _jsx("span", { style: { display: 'flex' }, children: icon }), label] }));
+    return (_jsxs("div", { style: getTabStyle(), onClick: onClick, className: className, children: [icon && _jsx("span", { style: variant === 'dashboard' ? iconStyle : { display: 'flex' }, children: icon }), variant === 'dashboard' ? (_jsx("span", { style: textStyle, children: label })) : label] }));
 };
 //# sourceMappingURL=Tabs.js.map