shared-design-system 1.12.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/Alert.d.ts +2 -1
- package/dist/src/components/Alert.js +80 -38
- package/dist/src/components/Alert.js.map +1 -1
- package/dist/src/components/Avatar.d.ts +11 -2
- package/dist/src/components/Avatar.js +87 -40
- package/dist/src/components/Avatar.js.map +1 -1
- package/dist/src/components/Badge.d.ts +4 -2
- package/dist/src/components/Badge.js +67 -29
- package/dist/src/components/Badge.js.map +1 -1
- package/dist/src/components/Breadcrumbs.d.ts +4 -1
- package/dist/src/components/Breadcrumbs.js +56 -27
- package/dist/src/components/Breadcrumbs.js.map +1 -1
- package/dist/src/components/Button.d.ts +4 -2
- package/dist/src/components/Button.js +99 -95
- package/dist/src/components/Button.js.map +1 -1
- package/dist/src/components/Card.d.ts +3 -1
- package/dist/src/components/Card.js +86 -23
- package/dist/src/components/Card.js.map +1 -1
- package/dist/src/components/ConfirmModal.d.ts +5 -2
- package/dist/src/components/ConfirmModal.js +99 -47
- package/dist/src/components/ConfirmModal.js.map +1 -1
- package/dist/src/components/Divider.d.ts +4 -2
- package/dist/src/components/Divider.js +46 -19
- package/dist/src/components/Divider.js.map +1 -1
- package/dist/src/components/ListComponents.d.ts +7 -4
- package/dist/src/components/ListComponents.js +70 -35
- package/dist/src/components/ListComponents.js.map +1 -1
- package/dist/src/components/LoadingSpinner.d.ts +9 -2
- package/dist/src/components/LoadingSpinner.js +59 -17
- package/dist/src/components/LoadingSpinner.js.map +1 -1
- package/dist/src/components/Progress.d.ts +5 -1
- package/dist/src/components/Progress.js +58 -26
- package/dist/src/components/Progress.js.map +1 -1
- package/dist/src/components/Radio.d.ts +4 -0
- package/dist/src/components/Radio.js +50 -24
- package/dist/src/components/Radio.js.map +1 -1
- package/dist/src/components/ReadOnlyField.d.ts +4 -0
- package/dist/src/components/ReadOnlyField.js +78 -25
- package/dist/src/components/ReadOnlyField.js.map +1 -1
- package/dist/src/components/Select.js +2 -2
- package/dist/src/components/Select.js.map +1 -1
- package/dist/src/components/Skeleton.d.ts +3 -1
- package/dist/src/components/Skeleton.js +52 -22
- package/dist/src/components/Skeleton.js.map +1 -1
- package/dist/src/components/Stack.d.ts +2 -0
- package/dist/src/components/Stack.js +21 -20
- package/dist/src/components/Stack.js.map +1 -1
- package/dist/src/components/Steps.d.ts +3 -1
- package/dist/src/components/Steps.js +93 -68
- package/dist/src/components/Steps.js.map +1 -1
- package/dist/src/components/Switch.d.ts +6 -2
- package/dist/src/components/Switch.js +45 -22
- package/dist/src/components/Switch.js.map +1 -1
- package/dist/src/components/Table.d.ts +9 -1
- package/dist/src/components/Table.js +102 -37
- package/dist/src/components/Table.js.map +1 -1
- package/dist/src/components/Tabs.d.ts +9 -5
- package/dist/src/components/Tabs.js +88 -88
- package/dist/src/components/Tabs.js.map +1 -1
- package/dist/src/components/Tag.d.ts +3 -1
- package/dist/src/components/Tag.js +104 -26
- package/dist/src/components/Tag.js.map +1 -1
- package/dist/src/components/Tooltip.d.ts +3 -0
- package/dist/src/components/Tooltip.js +89 -38
- package/dist/src/components/Tooltip.js.map +1 -1
- package/dist/src/components/Typography.d.ts +14 -1
- package/dist/src/components/Typography.js +108 -61
- package/dist/src/components/Typography.js.map +1 -1
- package/dist/src/index.d.ts +6 -6
- package/dist/src/index.js +3 -3
- package/dist/src/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,32 +1,103 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { tokens } from '../tokens';
|
|
3
|
-
export const Table = ({ columns, data, onRowClick, className = '', style = {}, headerStyle = {}, rowStyle = {}, emptyText = 'Không tìm thấy dữ liệu
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
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, }) => {
|
|
5
|
+
const [sortKey, setSortKey] = useState(null);
|
|
6
|
+
const [sortDir, setSortDir] = useState('asc');
|
|
7
|
+
const [hoveredRow, setHoveredRow] = useState(null);
|
|
8
|
+
const getRowKey = (record, index) => {
|
|
9
|
+
var _a, _b;
|
|
10
|
+
if (rowKey) {
|
|
11
|
+
return typeof rowKey === 'function' ? rowKey(record) : record[rowKey];
|
|
12
|
+
}
|
|
13
|
+
return (_b = (_a = record.id) !== null && _a !== void 0 ? _a : record.key) !== null && _b !== void 0 ? _b : index;
|
|
14
|
+
};
|
|
15
|
+
// Optional client-side sort
|
|
16
|
+
const handleSort = (col) => {
|
|
17
|
+
if (!col.sortable)
|
|
18
|
+
return;
|
|
19
|
+
if (sortKey === col.key) {
|
|
20
|
+
setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
setSortKey(col.key);
|
|
24
|
+
setSortDir('asc');
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
let displayData = [...data];
|
|
28
|
+
if (sortKey !== null) {
|
|
29
|
+
displayData.sort((a, b) => {
|
|
30
|
+
const av = a[sortKey];
|
|
31
|
+
const bv = b[sortKey];
|
|
32
|
+
if (av == null)
|
|
33
|
+
return 1;
|
|
34
|
+
if (bv == null)
|
|
35
|
+
return -1;
|
|
36
|
+
const cmp = String(av).localeCompare(String(bv), 'vi', { numeric: true });
|
|
37
|
+
return sortDir === 'asc' ? cmp : -cmp;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
return (_jsxs(TableContainer, { className: className, style: style, bordered: bordered, children: [loading && (_jsxs("div", { style: {
|
|
41
|
+
position: 'absolute',
|
|
42
|
+
inset: 0,
|
|
43
|
+
display: 'flex',
|
|
44
|
+
alignItems: 'center',
|
|
45
|
+
justifyContent: 'center',
|
|
46
|
+
backgroundColor: 'rgba(255,255,255,0.7)',
|
|
47
|
+
backdropFilter: 'blur(2px)',
|
|
48
|
+
zIndex: 10,
|
|
49
|
+
borderRadius: 'inherit',
|
|
50
|
+
}, children: [_jsx("div", { style: {
|
|
51
|
+
width: '28px',
|
|
52
|
+
height: '28px',
|
|
53
|
+
border: `3px solid ${tokens.color.slate200}`,
|
|
54
|
+
borderTopColor: tokens.color.primary,
|
|
55
|
+
borderRadius: '50%',
|
|
56
|
+
animation: 'ds-spin 0.7s linear infinite',
|
|
57
|
+
} }), _jsx("style", { children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` })] })), _jsx(THead, { children: _jsx(TR, { header: true, children: columns.map((col) => {
|
|
58
|
+
const isSorted = sortKey === col.key;
|
|
59
|
+
return (_jsx(TH, { onClick: col.sortable ? () => handleSort(col) : undefined, style: {
|
|
60
|
+
textAlign: col.align || 'left',
|
|
61
|
+
width: col.width,
|
|
62
|
+
minWidth: col.minWidth,
|
|
63
|
+
cursor: col.sortable ? 'pointer' : 'default',
|
|
64
|
+
userSelect: col.sortable ? 'none' : undefined,
|
|
65
|
+
...col.headerStyle,
|
|
66
|
+
...headerStyle,
|
|
67
|
+
}, 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()));
|
|
68
|
+
}) }) }), _jsx(TBody, { children: displayData.length > 0 ? (displayData.map((record, rowIndex) => {
|
|
69
|
+
const key = getRowKey(record, rowIndex);
|
|
70
|
+
const isActive = activeKey !== undefined && getRowKey(record, rowIndex) === activeKey;
|
|
71
|
+
const isHovered = hoveredRow === rowIndex;
|
|
72
|
+
const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(record, rowIndex) : rowStyle;
|
|
73
|
+
const zebraStyle = striped && rowIndex % 2 === 1
|
|
74
|
+
? { backgroundColor: 'rgba(248, 250, 252, 0.6)' }
|
|
75
|
+
: {};
|
|
76
|
+
return (_jsx(TR, { onClick: onRowClick ? () => onRowClick(record, rowIndex) : undefined, active: isActive, style: {
|
|
77
|
+
...zebraStyle,
|
|
78
|
+
...(isHovered && !isActive ? { backgroundColor: tokens.color.primaryLight } : {}),
|
|
79
|
+
...computedRowStyle,
|
|
80
|
+
}, onMouseEnter: () => onRowClick && setHoveredRow(rowIndex), onMouseLeave: () => onRowClick && setHoveredRow(null), children: columns.map((col) => (_jsx(TD, { style: { textAlign: col.align || 'left', ...col.cellStyle }, children: col.render
|
|
81
|
+
? col.render(record[col.key], record, rowIndex)
|
|
82
|
+
: record[col.key] }, col.key.toString()))) }, String(key)));
|
|
83
|
+
})) : (_jsx(TR, { children: _jsx(TD, { colSpan: columns.length, style: { textAlign: 'center', padding: tokens.spacing[12], color: tokens.color.slate400 }, children: _jsxs("div", { style: {
|
|
84
|
+
display: 'flex',
|
|
85
|
+
flexDirection: 'column',
|
|
86
|
+
alignItems: 'center',
|
|
87
|
+
gap: tokens.spacing[3],
|
|
88
|
+
}, 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 })] }) }) })) })] }));
|
|
20
89
|
};
|
|
21
|
-
export const TableContainer = ({ children, className = '', style = {}, ...props }) => (_jsx("div", { ...props, style: {
|
|
90
|
+
export const TableContainer = ({ children, className = '', style = {}, bordered = false, ...props }) => (_jsx("div", { ...props, style: {
|
|
22
91
|
width: '100%',
|
|
23
92
|
overflowX: 'auto',
|
|
93
|
+
overflowY: 'hidden',
|
|
24
94
|
backgroundColor: tokens.color.white,
|
|
25
95
|
borderRadius: tokens.radius['2xl'],
|
|
26
|
-
border: `1px solid ${tokens.color.slate100}`,
|
|
96
|
+
border: `1px solid ${bordered ? tokens.color.slate200 : tokens.color.slate100}`,
|
|
27
97
|
boxShadow: tokens.shadow.sm,
|
|
98
|
+
position: 'relative',
|
|
28
99
|
...style,
|
|
29
|
-
}, className: className
|
|
100
|
+
}, className: `ds-table-container ${className}`, children: _jsx("table", { style: {
|
|
30
101
|
width: '100%',
|
|
31
102
|
borderCollapse: 'collapse',
|
|
32
103
|
textAlign: 'left',
|
|
@@ -34,41 +105,35 @@ export const TableContainer = ({ children, className = '', style = {}, ...props
|
|
|
34
105
|
fontFamily: tokens.font.family,
|
|
35
106
|
}, children: children }) }));
|
|
36
107
|
export const THead = ({ children, style = {}, ...props }) => (_jsx("thead", { ...props, style: {
|
|
37
|
-
backgroundColor:
|
|
108
|
+
backgroundColor: tokens.color.slate50,
|
|
109
|
+
borderBottom: `2px solid ${tokens.color.slate100}`,
|
|
38
110
|
...style,
|
|
39
111
|
}, children: children }));
|
|
40
112
|
export const TBody = ({ children, style = {}, ...props }) => (_jsx("tbody", { ...props, style: { backgroundColor: tokens.color.white, ...style }, children: children }));
|
|
41
113
|
export const TR = ({ children, onClick, active = false, header = false, style = {}, ...props }) => (_jsx("tr", { ...props, onClick: onClick, style: {
|
|
42
|
-
borderBottom: `1px solid ${tokens.color.
|
|
114
|
+
borderBottom: `1px solid ${tokens.color.slate100}`,
|
|
43
115
|
backgroundColor: active ? tokens.color.primaryLight : 'transparent',
|
|
44
116
|
transition: tokens.transition.fast,
|
|
45
117
|
cursor: onClick ? 'pointer' : 'default',
|
|
46
118
|
...style,
|
|
47
|
-
},
|
|
48
|
-
? (e) => {
|
|
49
|
-
e.currentTarget.style.backgroundColor = 'rgba(248, 250, 252, 0.3)';
|
|
50
|
-
}
|
|
51
|
-
: undefined, onMouseLeave: !header
|
|
52
|
-
? (e) => {
|
|
53
|
-
e.currentTarget.style.backgroundColor = active
|
|
54
|
-
? tokens.color.primaryLight
|
|
55
|
-
: 'transparent';
|
|
56
|
-
}
|
|
57
|
-
: undefined, children: children }));
|
|
119
|
+
}, children: children }));
|
|
58
120
|
export const TH = ({ children, style = {}, ...props }) => (_jsx("th", { ...props, style: {
|
|
59
|
-
padding: `${tokens.spacing[
|
|
121
|
+
padding: `${tokens.spacing[3]} ${tokens.spacing[5]}`,
|
|
60
122
|
fontWeight: tokens.font.weightBold,
|
|
61
|
-
color: tokens.color.
|
|
123
|
+
color: tokens.color.slate500,
|
|
62
124
|
textTransform: 'uppercase',
|
|
63
|
-
letterSpacing: '0.
|
|
125
|
+
letterSpacing: '0.08em',
|
|
64
126
|
fontSize: '11px',
|
|
127
|
+
whiteSpace: 'nowrap',
|
|
65
128
|
...style,
|
|
66
129
|
}, children: children }));
|
|
67
130
|
export const TD = ({ children, style = {}, ...props }) => (_jsx("td", { ...props, style: {
|
|
68
|
-
padding: `${tokens.spacing[
|
|
131
|
+
padding: `${tokens.spacing[4]} ${tokens.spacing[5]}`,
|
|
69
132
|
color: tokens.color.slate600,
|
|
70
133
|
verticalAlign: 'middle',
|
|
71
134
|
fontSize: tokens.font.sm,
|
|
135
|
+
fontWeight: tokens.font.weightMedium,
|
|
136
|
+
lineHeight: 1.5,
|
|
72
137
|
...style,
|
|
73
138
|
}, children: children }));
|
|
74
139
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export interface
|
|
2
|
+
export interface TabItem {
|
|
3
3
|
label: string;
|
|
4
4
|
value: any;
|
|
5
5
|
icon?: React.ReactNode;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
badge?: React.ReactNode;
|
|
7
|
+
disabled?: boolean;
|
|
8
8
|
}
|
|
9
|
-
export interface
|
|
9
|
+
export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
10
10
|
label: string;
|
|
11
11
|
value: any;
|
|
12
12
|
icon?: React.ReactNode;
|
|
13
|
+
badge?: React.ReactNode;
|
|
14
|
+
active?: boolean;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
variant?: 'standard' | 'pills' | 'underline' | 'dashboard';
|
|
13
17
|
}
|
|
14
18
|
export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
15
19
|
value: any;
|
|
16
20
|
onChange: (value: any) => void;
|
|
17
|
-
variant?: 'standard' | 'pills' | 'dashboard';
|
|
21
|
+
variant?: 'standard' | 'pills' | 'underline' | 'dashboard';
|
|
18
22
|
items?: TabItem[];
|
|
19
23
|
children?: React.ReactNode;
|
|
20
24
|
columns?: number;
|
|
@@ -1,94 +1,94 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { tokens } from '../tokens';
|
|
4
|
-
export const Tabs = ({ value, onChange, items, children, variant = 'standard', columns = 4, className = '', style = {} }) => {
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
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 => {
|
|
16
|
-
if (!React.isValidElement(child))
|
|
17
|
-
return null;
|
|
18
|
-
return React.cloneElement(child, {
|
|
19
|
-
active: child.props.value === value,
|
|
20
|
-
onClick: () => onChange(child.props.value),
|
|
21
|
-
variant
|
|
22
|
-
});
|
|
23
|
-
}) }));
|
|
24
|
-
};
|
|
25
|
-
export const Tab = ({ label, value, icon, active, onClick, variant, className = '', style = {} }) => {
|
|
26
|
-
const getTabStyle = () => {
|
|
27
|
-
switch (variant) {
|
|
28
|
-
case 'dashboard':
|
|
29
|
-
return {
|
|
30
|
-
position: 'relative',
|
|
31
|
-
cursor: 'pointer',
|
|
32
|
-
backgroundColor: tokens.color.white,
|
|
33
|
-
borderRadius: tokens.radius.xl,
|
|
34
|
-
padding: tokens.spacing[5],
|
|
35
|
-
boxShadow: active ? tokens.shadow.md : tokens.shadow.sm,
|
|
36
|
-
borderTop: `2px solid ${active ? tokens.color.danger : 'transparent'}`,
|
|
37
|
-
transition: tokens.transition.normal,
|
|
38
|
-
display: 'flex',
|
|
39
|
-
alignItems: 'center',
|
|
40
|
-
gap: tokens.spacing[3],
|
|
41
|
-
flex: 1,
|
|
42
|
-
borderBottom: 'none',
|
|
43
|
-
...style
|
|
44
|
-
};
|
|
45
|
-
case 'pills':
|
|
46
|
-
return {
|
|
47
|
-
display: 'flex',
|
|
48
|
-
alignItems: 'center',
|
|
49
|
-
gap: tokens.spacing[2],
|
|
50
|
-
padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
|
|
51
|
-
fontSize: tokens.font.sm,
|
|
52
|
-
fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
|
|
53
|
-
color: active ? tokens.color.primary : tokens.color.textMuted,
|
|
54
|
-
cursor: 'pointer',
|
|
55
|
-
transition: tokens.transition.fast,
|
|
56
|
-
backgroundColor: active ? tokens.color.primaryLight : 'transparent',
|
|
57
|
-
borderRadius: tokens.radius.md,
|
|
58
|
-
whiteSpace: 'nowrap',
|
|
59
|
-
...style
|
|
60
|
-
};
|
|
61
|
-
case 'standard':
|
|
62
|
-
default:
|
|
63
|
-
return {
|
|
64
|
-
display: 'flex',
|
|
65
|
-
alignItems: 'center',
|
|
66
|
-
gap: tokens.spacing[2],
|
|
67
|
-
padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
|
|
68
|
-
fontSize: tokens.font.sm,
|
|
69
|
-
fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
|
|
70
|
-
color: active ? tokens.color.primary : tokens.color.textMuted,
|
|
71
|
-
cursor: 'pointer',
|
|
72
|
-
borderBottom: `2px solid ${active ? tokens.color.primary : 'transparent'}`,
|
|
73
|
-
transition: tokens.transition.fast,
|
|
74
|
-
whiteSpace: 'nowrap',
|
|
75
|
-
...style
|
|
76
|
-
};
|
|
4
|
+
export const Tabs = ({ value, onChange, items, children, variant = 'standard', columns = 4, className = '', style = {}, }) => {
|
|
5
|
+
const isPills = variant === 'pills';
|
|
6
|
+
const isDashboard = variant === 'dashboard';
|
|
7
|
+
const isUnderline = variant === 'underline' || variant === 'standard';
|
|
8
|
+
const containerStyle = isDashboard
|
|
9
|
+
? {
|
|
10
|
+
display: 'grid',
|
|
11
|
+
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
12
|
+
gap: tokens.spacing[4],
|
|
13
|
+
width: '100%',
|
|
14
|
+
...style,
|
|
77
15
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
16
|
+
: {
|
|
17
|
+
display: 'flex',
|
|
18
|
+
gap: isPills ? tokens.spacing[1] : tokens.spacing[2],
|
|
19
|
+
borderBottom: isUnderline ? `1.5px solid ${tokens.color.slate100}` : 'none',
|
|
20
|
+
width: '100%',
|
|
21
|
+
overflowX: 'auto',
|
|
22
|
+
padding: isPills ? tokens.spacing[1] : '0',
|
|
23
|
+
backgroundColor: isPills ? tokens.color.slate50 : 'transparent',
|
|
24
|
+
borderRadius: isPills ? tokens.radius.xl : 'none',
|
|
25
|
+
...style,
|
|
26
|
+
};
|
|
27
|
+
return (_jsx("div", { style: containerStyle, className: `ds-tabs ds-tabs--${variant} ${className}`, role: "tablist", children: items
|
|
28
|
+
? items.map((item, index) => (_jsx(Tab, { label: item.label, value: item.value, icon: item.icon, badge: item.badge, disabled: item.disabled, active: item.value === value, onClick: () => !item.disabled && onChange(item.value), variant: variant }, index)))
|
|
29
|
+
: React.Children.map(children, (child) => {
|
|
30
|
+
if (!React.isValidElement(child))
|
|
31
|
+
return null;
|
|
32
|
+
return React.cloneElement(child, {
|
|
33
|
+
active: child.props.value === value,
|
|
34
|
+
onClick: () => !child.props.disabled && onChange(child.props.value),
|
|
35
|
+
variant,
|
|
36
|
+
});
|
|
37
|
+
}) }));
|
|
38
|
+
};
|
|
39
|
+
export const Tab = ({ label, value, icon, badge, active, disabled = false, onClick, variant, className = '', style = {}, }) => {
|
|
40
|
+
const isPills = variant === 'pills';
|
|
41
|
+
const isDashboard = variant === 'dashboard';
|
|
42
|
+
if (isDashboard) {
|
|
43
|
+
return (_jsxs("div", { role: "tab", "aria-selected": active, style: {
|
|
44
|
+
position: 'relative',
|
|
45
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
46
|
+
backgroundColor: tokens.color.white,
|
|
47
|
+
borderRadius: tokens.radius.xl,
|
|
48
|
+
padding: tokens.spacing[5],
|
|
49
|
+
boxShadow: active ? tokens.shadow.md : tokens.shadow.sm,
|
|
50
|
+
borderTop: `3px solid ${active ? tokens.color.primary : 'transparent'}`,
|
|
51
|
+
transition: tokens.transition.normal,
|
|
52
|
+
display: 'flex',
|
|
53
|
+
alignItems: 'center',
|
|
54
|
+
gap: tokens.spacing[3],
|
|
55
|
+
opacity: disabled ? 0.5 : 1,
|
|
56
|
+
...style,
|
|
57
|
+
}, onClick: disabled ? undefined : onClick, className: className, children: [icon && (_jsx("span", { style: {
|
|
58
|
+
display: 'flex',
|
|
59
|
+
padding: tokens.spacing[2],
|
|
60
|
+
borderRadius: tokens.radius.md,
|
|
61
|
+
color: active ? tokens.color.primary : tokens.color.slate400,
|
|
62
|
+
backgroundColor: active ? tokens.color.primaryLight : tokens.color.slate50,
|
|
63
|
+
transition: tokens.transition.fast,
|
|
64
|
+
}, children: icon })), _jsx("span", { style: {
|
|
65
|
+
fontSize: tokens.font.sm,
|
|
66
|
+
fontWeight: active ? tokens.font.weightBold : tokens.font.weightSemibold,
|
|
67
|
+
color: active ? tokens.color.slate800 : tokens.color.slate500,
|
|
68
|
+
transition: tokens.transition.fast,
|
|
69
|
+
}, children: label }), badge && _jsx("span", { style: { marginLeft: 'auto' }, children: badge })] }));
|
|
70
|
+
}
|
|
71
|
+
// Pills & Standard/Underline
|
|
72
|
+
return (_jsxs("div", { role: "tab", "aria-selected": active, style: {
|
|
73
|
+
display: 'inline-flex',
|
|
74
|
+
alignItems: 'center',
|
|
75
|
+
gap: tokens.spacing[2],
|
|
76
|
+
padding: isPills
|
|
77
|
+
? `${tokens.spacing[2]} ${tokens.spacing[4]}`
|
|
78
|
+
: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
|
|
79
|
+
fontSize: tokens.font.sm,
|
|
80
|
+
fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
|
|
81
|
+
color: active ? tokens.color.primary : tokens.color.textMuted,
|
|
82
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
83
|
+
borderRadius: isPills ? tokens.radius.lg : '0',
|
|
84
|
+
borderBottom: !isPills ? `2px solid ${active ? tokens.color.primary : 'transparent'}` : 'none',
|
|
85
|
+
backgroundColor: isPills && active ? tokens.color.surface : 'transparent',
|
|
86
|
+
boxShadow: isPills && active ? tokens.shadow.sm : 'none',
|
|
87
|
+
transition: tokens.transition.fast,
|
|
88
|
+
whiteSpace: 'nowrap',
|
|
89
|
+
opacity: disabled ? 0.45 : 1,
|
|
90
|
+
userSelect: 'none',
|
|
91
|
+
...style,
|
|
92
|
+
}, onClick: disabled ? undefined : onClick, className: className, children: [icon && _jsx("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: icon }), label, badge && _jsx("span", { style: { marginLeft: '2px' }, children: badge })] }));
|
|
93
93
|
};
|
|
94
94
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
3
|
-
color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'premium';
|
|
3
|
+
color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'premium' | 'gold';
|
|
4
4
|
variant?: 'subtle' | 'solid' | 'outline' | 'gradient';
|
|
5
5
|
size?: 'sm' | 'md';
|
|
6
6
|
onClose?: () => void;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
clickable?: boolean;
|
|
7
9
|
}
|
|
8
10
|
export declare const Tag: React.FC<TagProps>;
|