shared-design-system 1.21.0 → 1.23.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 +1 -1
- package/dist/src/components/Alert.js +34 -20
- package/dist/src/components/Alert.js.map +1 -1
- package/dist/src/components/Avatar.d.ts +7 -2
- package/dist/src/components/Avatar.js +15 -12
- package/dist/src/components/Avatar.js.map +1 -1
- package/dist/src/components/Badge.d.ts +1 -1
- package/dist/src/components/Badge.js +113 -89
- package/dist/src/components/Badge.js.map +1 -1
- package/dist/src/components/Breadcrumbs.d.ts +1 -1
- package/dist/src/components/Breadcrumbs.js +7 -9
- package/dist/src/components/Breadcrumbs.js.map +1 -1
- package/dist/src/components/Button.d.ts +1 -1
- package/dist/src/components/Button.js +6 -4
- package/dist/src/components/Button.js.map +1 -1
- package/dist/src/components/ConfigProvider.d.ts +17 -0
- package/dist/src/components/ConfigProvider.js +54 -0
- package/dist/src/components/ConfigProvider.js.map +1 -0
- package/dist/src/components/ConfirmModal.d.ts +1 -1
- package/dist/src/components/ConfirmModal.js +82 -72
- package/dist/src/components/ConfirmModal.js.map +1 -1
- package/dist/src/components/DatePicker.d.ts +1 -1
- package/dist/src/components/DatePicker.js +33 -10
- package/dist/src/components/DatePicker.js.map +1 -1
- package/dist/src/components/Descriptions.d.ts +15 -0
- package/dist/src/components/Descriptions.js +44 -0
- package/dist/src/components/Descriptions.js.map +1 -0
- package/dist/src/components/Divider.d.ts +1 -1
- package/dist/src/components/Divider.js +21 -16
- package/dist/src/components/Divider.js.map +1 -1
- package/dist/src/components/Drawer.d.ts +1 -1
- package/dist/src/components/Drawer.js +81 -68
- package/dist/src/components/Drawer.js.map +1 -1
- package/dist/src/components/Dropdown.d.ts +17 -0
- package/dist/src/components/Dropdown.js +129 -0
- package/dist/src/components/Dropdown.js.map +1 -0
- package/dist/src/components/InputComponents.d.ts +4 -4
- package/dist/src/components/InputComponents.js +57 -26
- package/dist/src/components/InputComponents.js.map +1 -1
- package/dist/src/components/ListComponents.d.ts +4 -2
- package/dist/src/components/ListComponents.js +36 -15
- package/dist/src/components/ListComponents.js.map +1 -1
- package/dist/src/components/Modal.d.ts +1 -1
- package/dist/src/components/Modal.js +90 -77
- package/dist/src/components/Modal.js.map +1 -1
- package/dist/src/components/MultiSelect.d.ts +1 -1
- package/dist/src/components/MultiSelect.js +65 -20
- package/dist/src/components/MultiSelect.js.map +1 -1
- package/dist/src/components/Popconfirm.d.ts +12 -0
- package/dist/src/components/Popconfirm.js +24 -0
- package/dist/src/components/Popconfirm.js.map +1 -0
- package/dist/src/components/Popover.d.ts +10 -0
- package/dist/src/components/Popover.js +108 -0
- package/dist/src/components/Popover.js.map +1 -0
- package/dist/src/components/Portal.d.ts +11 -0
- package/dist/src/components/Portal.js +30 -0
- package/dist/src/components/Portal.js.map +1 -0
- package/dist/src/components/Radio.d.ts +5 -2
- package/dist/src/components/Radio.js +10 -6
- package/dist/src/components/Radio.js.map +1 -1
- package/dist/src/components/Result.d.ts +9 -0
- package/dist/src/components/Result.js +52 -0
- package/dist/src/components/Result.js.map +1 -0
- package/dist/src/components/Select.d.ts +1 -1
- package/dist/src/components/Select.js +70 -19
- package/dist/src/components/Select.js.map +1 -1
- package/dist/src/components/Skeleton.d.ts +1 -1
- package/dist/src/components/Skeleton.js +10 -7
- package/dist/src/components/Skeleton.js.map +1 -1
- package/dist/src/components/Steps.d.ts +1 -1
- package/dist/src/components/Steps.js +17 -14
- package/dist/src/components/Steps.js.map +1 -1
- package/dist/src/components/Switch.d.ts +1 -1
- package/dist/src/components/Switch.js +6 -6
- package/dist/src/components/Switch.js.map +1 -1
- package/dist/src/components/Table.d.ts +20 -7
- package/dist/src/components/Table.js +140 -113
- package/dist/src/components/Table.js.map +1 -1
- package/dist/src/components/Tabs.d.ts +4 -2
- package/dist/src/components/Tabs.js +15 -10
- package/dist/src/components/Tabs.js.map +1 -1
- package/dist/src/components/Tag.d.ts +1 -1
- package/dist/src/components/Tag.js +17 -8
- package/dist/src/components/Tag.js.map +1 -1
- package/dist/src/components/Timeline.d.ts +13 -0
- package/dist/src/components/Timeline.js +35 -0
- package/dist/src/components/Timeline.js.map +1 -0
- package/dist/src/components/Tooltip.d.ts +1 -1
- package/dist/src/components/Tooltip.js +17 -10
- package/dist/src/components/Tooltip.js.map +1 -1
- package/dist/src/components/Typography.d.ts +5 -5
- package/dist/src/components/Typography.js +38 -23
- package/dist/src/components/Typography.js.map +1 -1
- package/dist/src/index.d.ts +19 -4
- package/dist/src/index.js +12 -5
- package/dist/src/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
3
3
|
import { tokens } from '../tokens';
|
|
4
4
|
const floatingLabelStyle = {
|
|
5
5
|
position: 'absolute',
|
|
@@ -15,12 +15,12 @@ const floatingLabelStyle = {
|
|
|
15
15
|
zIndex: 10,
|
|
16
16
|
transition: tokens.transition.fast,
|
|
17
17
|
};
|
|
18
|
-
export const Select = ({ label, required, options, value, onChange, placeholder = 'Chọn...', className = '', style = {}, error, leadingIcon, searchable = true }) => {
|
|
18
|
+
export const Select = React.forwardRef(({ label, required, options, value, onChange, placeholder = 'Chọn...', className = '', style = {}, error, leadingIcon, searchable = true, }, ref) => {
|
|
19
19
|
const [isOpen, setIsOpen] = useState(false);
|
|
20
20
|
const [searchValue, setSearchValue] = useState('');
|
|
21
21
|
const containerRef = useRef(null);
|
|
22
22
|
// Normalize options to objects
|
|
23
|
-
const normalizedOptions = options === null || options === void 0 ? void 0 : options.map(opt => typeof opt === 'string' ? { label: opt, value: opt } : opt);
|
|
23
|
+
const normalizedOptions = options === null || options === void 0 ? void 0 : options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt);
|
|
24
24
|
useEffect(() => {
|
|
25
25
|
const handleClickOutside = (event) => {
|
|
26
26
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
@@ -28,9 +28,19 @@ export const Select = ({ label, required, options, value, onChange, placeholder
|
|
|
28
28
|
setSearchValue('');
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
|
+
const handleKeydown = (e) => {
|
|
32
|
+
if (e.key === 'Escape' && isOpen) {
|
|
33
|
+
setIsOpen(false);
|
|
34
|
+
setSearchValue('');
|
|
35
|
+
}
|
|
36
|
+
};
|
|
31
37
|
document.addEventListener('mousedown', handleClickOutside);
|
|
32
|
-
|
|
33
|
-
|
|
38
|
+
document.addEventListener('keydown', handleKeydown);
|
|
39
|
+
return () => {
|
|
40
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
41
|
+
document.removeEventListener('keydown', handleKeydown);
|
|
42
|
+
};
|
|
43
|
+
}, [isOpen]);
|
|
34
44
|
const handleSelectValue = (val) => {
|
|
35
45
|
if (onChange) {
|
|
36
46
|
onChange(val);
|
|
@@ -38,17 +48,27 @@ export const Select = ({ label, required, options, value, onChange, placeholder
|
|
|
38
48
|
setIsOpen(false);
|
|
39
49
|
setSearchValue('');
|
|
40
50
|
};
|
|
41
|
-
const selectedOption = normalizedOptions.find(opt => opt.value === value);
|
|
42
|
-
const filteredOptions = normalizedOptions.filter(opt => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
|
|
43
|
-
return (_jsxs("div", { ref:
|
|
51
|
+
const selectedOption = normalizedOptions.find((opt) => opt.value === value);
|
|
52
|
+
const filteredOptions = normalizedOptions.filter((opt) => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
|
|
53
|
+
return (_jsxs("div", { ref: (el) => {
|
|
54
|
+
containerRef.current = el;
|
|
55
|
+
if (typeof ref === 'function')
|
|
56
|
+
ref(el);
|
|
57
|
+
else if (ref)
|
|
58
|
+
ref.current = el;
|
|
59
|
+
}, className: className, style: { position: 'relative', width: '100%', ...style }, children: [label && (_jsxs("label", { style: {
|
|
44
60
|
...floatingLabelStyle,
|
|
45
|
-
color: isOpen
|
|
46
|
-
|
|
61
|
+
color: isOpen
|
|
62
|
+
? tokens.color.borderFocus
|
|
63
|
+
: error
|
|
64
|
+
? tokens.color.danger
|
|
65
|
+
: tokens.color.slate400,
|
|
66
|
+
left: leadingIcon ? '40px' : '14px',
|
|
47
67
|
}, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsxs("div", { onClick: () => setIsOpen(!isOpen), style: {
|
|
48
68
|
minHeight: '46px',
|
|
49
69
|
padding: '10px 14px',
|
|
50
70
|
backgroundColor: tokens.color.white,
|
|
51
|
-
border: `1px solid ${error ? tokens.color.danger :
|
|
71
|
+
border: `1px solid ${error ? tokens.color.danger : isOpen ? tokens.color.borderFocus : tokens.color.slate200}`,
|
|
52
72
|
borderRadius: tokens.radius.lg,
|
|
53
73
|
display: 'flex',
|
|
54
74
|
alignItems: 'center',
|
|
@@ -61,8 +81,21 @@ export const Select = ({ label, required, options, value, onChange, placeholder
|
|
|
61
81
|
color: isOpen ? tokens.color.primary : tokens.color.slate300,
|
|
62
82
|
display: 'flex',
|
|
63
83
|
alignItems: 'center',
|
|
64
|
-
marginTop: '2px'
|
|
65
|
-
}, children: leadingIcon })), _jsx("div", { style: { flex: 1 }, children: selectedOption ? (_jsx("span", { style: {
|
|
84
|
+
marginTop: '2px',
|
|
85
|
+
}, children: leadingIcon })), _jsx("div", { style: { flex: 1 }, children: selectedOption ? (_jsx("span", { style: {
|
|
86
|
+
fontSize: tokens.font.sm,
|
|
87
|
+
fontWeight: tokens.font.weightBold,
|
|
88
|
+
color: tokens.color.slate800,
|
|
89
|
+
}, children: selectedOption.label })) : (_jsx("span", { style: {
|
|
90
|
+
color: tokens.color.slate400,
|
|
91
|
+
fontSize: tokens.font.sm,
|
|
92
|
+
fontWeight: tokens.font.weightMedium,
|
|
93
|
+
}, children: placeholder })) }), _jsx("div", { style: { color: tokens.color.slate300 }, children: _jsx("svg", { style: {
|
|
94
|
+
width: '18px',
|
|
95
|
+
height: '18px',
|
|
96
|
+
transition: tokens.transition.fast,
|
|
97
|
+
transform: isOpen ? 'rotate(180deg)' : 'none',
|
|
98
|
+
}, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }) })] }), isOpen && (_jsxs("div", { style: {
|
|
66
99
|
position: 'absolute',
|
|
67
100
|
top: '100%',
|
|
68
101
|
left: 0,
|
|
@@ -74,8 +107,14 @@ export const Select = ({ label, required, options, value, onChange, placeholder
|
|
|
74
107
|
border: `1px solid ${tokens.color.slate100}`,
|
|
75
108
|
zIndex: 2000,
|
|
76
109
|
overflow: 'hidden',
|
|
77
|
-
animation: 'reveal 0.2s ease-out'
|
|
78
|
-
}, children: [searchable && (_jsx("div", { style: { padding: '10px 12px', borderBottom: `1px solid ${tokens.color.slate100}` }, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("div", { style: {
|
|
110
|
+
animation: 'reveal 0.2s ease-out',
|
|
111
|
+
}, children: [searchable && (_jsx("div", { style: { padding: '10px 12px', borderBottom: `1px solid ${tokens.color.slate100}` }, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("div", { style: {
|
|
112
|
+
position: 'absolute',
|
|
113
|
+
left: '10px',
|
|
114
|
+
top: '50%',
|
|
115
|
+
transform: 'translateY(-50%)',
|
|
116
|
+
color: tokens.color.slate300,
|
|
117
|
+
}, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }) }), _jsx("input", { type: "text", autoFocus: true, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: "T\u00ECm ki\u1EBFm...", style: {
|
|
79
118
|
width: '100%',
|
|
80
119
|
padding: '8px 12px 8px 32px',
|
|
81
120
|
fontSize: '12px',
|
|
@@ -83,7 +122,7 @@ export const Select = ({ label, required, options, value, onChange, placeholder
|
|
|
83
122
|
border: 'none',
|
|
84
123
|
borderRadius: '10px',
|
|
85
124
|
outline: 'none',
|
|
86
|
-
}, onKeyDown: (e) => e.stopPropagation() })] }) })), _jsx("div", { style: { maxHeight: '240px', overflowY: 'auto', padding: '4px' }, children: filteredOptions.length > 0 ? (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(opt => {
|
|
125
|
+
}, onKeyDown: (e) => e.stopPropagation() })] }) })), _jsx("div", { style: { maxHeight: '240px', overflowY: 'auto', padding: '4px' }, children: filteredOptions.length > 0 ? (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map((opt) => {
|
|
87
126
|
const isSelected = value === opt.value;
|
|
88
127
|
return (_jsxs("div", { onClick: (e) => {
|
|
89
128
|
e.stopPropagation();
|
|
@@ -100,12 +139,24 @@ export const Select = ({ label, required, options, value, onChange, placeholder
|
|
|
100
139
|
transition: tokens.transition.fast,
|
|
101
140
|
fontWeight: isSelected ? tokens.font.weightBold : tokens.font.weightMedium,
|
|
102
141
|
color: isSelected ? tokens.color.primary : tokens.color.slate600,
|
|
103
|
-
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = tokens.color.slate50, onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: [opt.label, isSelected && (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: tokens.color.primary, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }, opt.value));
|
|
104
|
-
})) : (_jsx("div", { style: {
|
|
142
|
+
}, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = tokens.color.slate50), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'transparent'), children: [opt.label, isSelected && (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: tokens.color.primary, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }, opt.value));
|
|
143
|
+
})) : (_jsx("div", { style: {
|
|
144
|
+
padding: '20px',
|
|
145
|
+
textAlign: 'center',
|
|
146
|
+
color: tokens.color.slate400,
|
|
147
|
+
fontSize: '11px',
|
|
148
|
+
fontStyle: 'italic',
|
|
149
|
+
}, children: "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3 ph\u00F9 h\u1EE3p" })) })] })), error && (_jsx("p", { style: {
|
|
150
|
+
fontSize: '11px',
|
|
151
|
+
color: tokens.color.danger,
|
|
152
|
+
marginTop: '6px',
|
|
153
|
+
fontWeight: tokens.font.weightMedium,
|
|
154
|
+
}, children: error })), _jsx("style", { children: `
|
|
105
155
|
@keyframes reveal {
|
|
106
156
|
from { opacity: 0; transform: translateY(-8px); }
|
|
107
157
|
to { opacity: 1; transform: translateY(0); }
|
|
108
158
|
}
|
|
109
159
|
` })] }));
|
|
110
|
-
};
|
|
160
|
+
});
|
|
161
|
+
Select.displayName = 'Select';
|
|
111
162
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select.tsx"],"names":[],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,4 +6,4 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
6
6
|
lines?: number;
|
|
7
7
|
animation?: 'wave' | 'pulse' | 'none';
|
|
8
8
|
}
|
|
9
|
-
export declare const Skeleton: React.
|
|
9
|
+
export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { tokens } from '../tokens';
|
|
3
4
|
const KEYFRAMES = `
|
|
4
5
|
@keyframes ds-skeleton-wave {
|
|
@@ -10,7 +11,7 @@ const KEYFRAMES = `
|
|
|
10
11
|
50% { opacity: 0.4; }
|
|
11
12
|
}
|
|
12
13
|
`;
|
|
13
|
-
const SingleSkeleton = ({ variant = 'text', width, height, animation = 'wave', className = '', style = {}, ...props }) => {
|
|
14
|
+
const SingleSkeleton = React.forwardRef(({ variant = 'text', width, height, animation = 'wave', className = '', style = {}, ...props }, ref) => {
|
|
14
15
|
const getDims = () => {
|
|
15
16
|
if (variant === 'circle') {
|
|
16
17
|
const d = width || '40px';
|
|
@@ -42,17 +43,19 @@ const SingleSkeleton = ({ variant = 'text', width, height, animation = 'wave', c
|
|
|
42
43
|
animation: 'ds-skeleton-pulse 1.5s ease-in-out infinite',
|
|
43
44
|
}
|
|
44
45
|
: { backgroundColor: tokens.color.slate100 };
|
|
45
|
-
return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx("div", { style: {
|
|
46
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx("div", { ref: ref, role: "progressbar", "aria-busy": "true", style: {
|
|
46
47
|
...getDims(),
|
|
47
48
|
...animStyle,
|
|
48
49
|
overflow: 'hidden',
|
|
49
50
|
...style,
|
|
50
51
|
}, className: `ds-skeleton ${className}`, ...props })] }));
|
|
51
|
-
};
|
|
52
|
-
|
|
52
|
+
});
|
|
53
|
+
SingleSkeleton.displayName = 'Skeleton.Inner';
|
|
54
|
+
export const Skeleton = React.forwardRef(({ lines, variant = 'text', animation = 'wave', width, height, className = '', style = {}, ...props }, ref) => {
|
|
53
55
|
if (lines && lines > 1 && variant === 'text') {
|
|
54
|
-
return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', ...style }, className: className, children: Array.from({ length: lines }).map((_, i) => (_jsx(SingleSkeleton, { variant: "text", animation: animation, width: i === lines - 1 ? '70%' : '100%', height: height, ...props }, i))) }));
|
|
56
|
+
return (_jsx("div", { ref: ref, style: { display: 'flex', flexDirection: 'column', gap: '8px', ...style }, className: className, children: Array.from({ length: lines }).map((_, i) => (_jsx(SingleSkeleton, { variant: "text", animation: animation, width: i === lines - 1 ? '70%' : '100%', height: height, ...props }, i))) }));
|
|
55
57
|
}
|
|
56
|
-
return (_jsx(SingleSkeleton, { variant: variant, animation: animation, width: width, height: height, className: className, style: style, ...props }));
|
|
57
|
-
};
|
|
58
|
+
return (_jsx(SingleSkeleton, { ref: ref, variant: variant, animation: animation, width: width, height: height, className: className, style: style, ...props }));
|
|
59
|
+
});
|
|
60
|
+
Skeleton.displayName = 'Skeleton';
|
|
58
61
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { tokens } from '../tokens';
|
|
3
4
|
const getColors = (status) => {
|
|
4
5
|
switch (status) {
|
|
@@ -15,9 +16,9 @@ const getColors = (status) => {
|
|
|
15
16
|
};
|
|
16
17
|
const ICON_SIZE = { sm: '28px', md: '36px', lg: '44px' };
|
|
17
18
|
const FONT_SIZE = { sm: tokens.font.xs, md: tokens.font.sm, lg: tokens.font.base };
|
|
18
|
-
export const Steps = ({ currentStep = 0, items = [], direction = 'horizontal', size = 'md', className = '', style = {},
|
|
19
|
+
export const Steps = React.forwardRef(({ currentStep = 0, items = [], direction = 'horizontal', size = 'md', className = '', style = {} }, ref) => {
|
|
19
20
|
const isVertical = direction === 'vertical';
|
|
20
|
-
return (_jsx("div", { style: {
|
|
21
|
+
return (_jsx("div", { ref: ref, role: "list", style: {
|
|
21
22
|
display: 'flex',
|
|
22
23
|
flexDirection: isVertical ? 'column' : 'row',
|
|
23
24
|
gap: 0,
|
|
@@ -25,10 +26,11 @@ export const Steps = ({ currentStep = 0, items = [], direction = 'horizontal', s
|
|
|
25
26
|
...style,
|
|
26
27
|
}, className: `ds-steps ds-steps--${direction} ${className}`, children: items.map((item, index) => {
|
|
27
28
|
const status = index < currentStep ? 'finish' : index === currentStep ? 'process' : 'wait';
|
|
28
|
-
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));
|
|
29
|
+
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, isCurrent: index === currentStep }, index));
|
|
29
30
|
}) }));
|
|
30
|
-
};
|
|
31
|
-
|
|
31
|
+
});
|
|
32
|
+
Steps.displayName = 'Steps';
|
|
33
|
+
const StepItemComponent = ({ index, status, title, description, icon, direction, isLast, size, isCurrent, }) => {
|
|
32
34
|
const isHorizontal = direction === 'horizontal';
|
|
33
35
|
const c = getColors(status);
|
|
34
36
|
const iconSize = ICON_SIZE[size] || ICON_SIZE.md;
|
|
@@ -36,7 +38,7 @@ const StepItemComponent = ({ index, status, title, description, icon, direction,
|
|
|
36
38
|
const fontSize = FONT_SIZE[size] || tokens.font.sm;
|
|
37
39
|
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" }) }));
|
|
38
40
|
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" }) }));
|
|
39
|
-
return (_jsxs("div", { style: {
|
|
41
|
+
return (_jsxs("div", { role: "listitem", "aria-current": isCurrent ? 'step' : undefined, style: {
|
|
40
42
|
display: 'flex',
|
|
41
43
|
flexDirection: isHorizontal ? 'column' : 'row',
|
|
42
44
|
flex: isHorizontal ? (isLast ? 'none' : 1) : 'none',
|
|
@@ -80,22 +82,23 @@ const StepItemComponent = ({ index, status, title, description, icon, direction,
|
|
|
80
82
|
zIndex: 2,
|
|
81
83
|
flexShrink: 0,
|
|
82
84
|
transition: tokens.transition.normal,
|
|
83
|
-
boxShadow: status === 'process'
|
|
84
|
-
? `0 0 0 4px ${tokens.color.primaryLight}`
|
|
85
|
-
: 'none',
|
|
85
|
+
boxShadow: status === 'process' ? `0 0 0 4px ${tokens.color.primaryLight}` : 'none',
|
|
86
86
|
marginBottom: isHorizontal ? tokens.spacing['2'] : 0,
|
|
87
87
|
marginRight: !isHorizontal ? tokens.spacing['3'] : 0,
|
|
88
|
-
}, children: icon ? icon : status === 'finish' ? _jsx(CheckIcon, {}) : status === 'error' ? _jsx(ErrorIcon, {}) : index + 1 }), _jsxs("div", { style: {
|
|
88
|
+
}, children: icon ? (icon) : status === 'finish' ? (_jsx(CheckIcon, {})) : status === 'error' ? (_jsx(ErrorIcon, {})) : (index + 1) }), _jsxs("div", { style: {
|
|
89
89
|
textAlign: isHorizontal ? 'center' : 'left',
|
|
90
90
|
paddingTop: !isHorizontal ? '6px' : 0,
|
|
91
91
|
paddingBottom: !isHorizontal && !isLast ? tokens.spacing['8'] : 0,
|
|
92
92
|
}, children: [_jsx("div", { style: {
|
|
93
93
|
fontSize,
|
|
94
94
|
fontWeight: status === 'process' ? tokens.font.weightBold : tokens.font.weightSemibold,
|
|
95
|
-
color: status === 'wait'
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
95
|
+
color: status === 'wait'
|
|
96
|
+
? tokens.color.textDisabled
|
|
97
|
+
: status === 'error'
|
|
98
|
+
? tokens.color.danger
|
|
99
|
+
: status === 'process'
|
|
100
|
+
? tokens.color.primary
|
|
101
|
+
: tokens.color.text,
|
|
99
102
|
lineHeight: 1.35,
|
|
100
103
|
transition: tokens.transition.fast,
|
|
101
104
|
}, children: title }), description && (_jsx("div", { style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Steps.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Steps.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,4 +6,4 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
|
|
|
6
6
|
color?: 'primary' | 'success' | 'warning' | 'danger';
|
|
7
7
|
description?: string;
|
|
8
8
|
}
|
|
9
|
-
export declare const Switch: React.
|
|
9
|
+
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { tokens } from '../tokens';
|
|
3
4
|
const SIZE_CONFIG = {
|
|
4
5
|
sm: { trackW: '34px', trackH: '18px', thumbSize: '14px', thumbOn: '18px', thumbOff: '2px' },
|
|
@@ -11,7 +12,7 @@ const COLOR_MAP = {
|
|
|
11
12
|
warning: tokens.color.warning,
|
|
12
13
|
danger: tokens.color.danger,
|
|
13
14
|
};
|
|
14
|
-
export const Switch = ({ checked, onChange, disabled = false, label, labelPlacement = 'end', size = 'md', color = 'primary', description, className = '', style = {}, ...props }) => {
|
|
15
|
+
export const Switch = React.forwardRef(({ checked, onChange, disabled = false, label, labelPlacement = 'end', size = 'md', color = 'primary', description, className = '', style = {}, ...props }, ref) => {
|
|
15
16
|
const sc = SIZE_CONFIG[size] || SIZE_CONFIG.md;
|
|
16
17
|
const activeColor = COLOR_MAP[color] || tokens.color.primary;
|
|
17
18
|
const containerStyle = {
|
|
@@ -32,9 +33,7 @@ export const Switch = ({ checked, onChange, disabled = false, label, labelPlacem
|
|
|
32
33
|
borderRadius: tokens.radius.full,
|
|
33
34
|
transition: 'background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
34
35
|
flexShrink: 0,
|
|
35
|
-
boxShadow: checked
|
|
36
|
-
? `0 0 0 3px ${activeColor}20`
|
|
37
|
-
: 'inset 0 1px 2px rgba(0,0,0,0.1)',
|
|
36
|
+
boxShadow: checked ? `0 0 0 3px ${activeColor}20` : 'inset 0 1px 2px rgba(0,0,0,0.1)',
|
|
38
37
|
};
|
|
39
38
|
const thumbStyle = {
|
|
40
39
|
position: 'absolute',
|
|
@@ -47,7 +46,7 @@ export const Switch = ({ checked, onChange, disabled = false, label, labelPlacem
|
|
|
47
46
|
transition: 'left 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
48
47
|
boxShadow: '0 1px 4px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.06)',
|
|
49
48
|
};
|
|
50
|
-
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: {
|
|
49
|
+
return (_jsxs("label", { style: containerStyle, className: `ds-switch ${className}`, children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("input", { ref: ref, type: "checkbox", role: "switch", "aria-checked": checked, 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: {
|
|
51
50
|
fontSize: tokens.font.sm,
|
|
52
51
|
fontWeight: tokens.font.weightSemibold,
|
|
53
52
|
color: disabled ? tokens.color.textDisabled : tokens.color.text,
|
|
@@ -58,5 +57,6 @@ export const Switch = ({ checked, onChange, disabled = false, label, labelPlacem
|
|
|
58
57
|
color: tokens.color.textMuted,
|
|
59
58
|
lineHeight: 1.4,
|
|
60
59
|
}, children: description }))] }))] }));
|
|
61
|
-
};
|
|
60
|
+
});
|
|
61
|
+
Switch.displayName = 'Switch';
|
|
62
62
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -40,31 +40,44 @@ export interface TableProps<T = any> {
|
|
|
40
40
|
activeKey?: string | number;
|
|
41
41
|
pagination?: TablePaginationProps | false;
|
|
42
42
|
}
|
|
43
|
-
export declare const
|
|
43
|
+
export declare const TablePagination: React.FC<TablePaginationProps & {
|
|
44
|
+
style?: React.CSSProperties;
|
|
45
|
+
}>;
|
|
44
46
|
export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
47
|
children: React.ReactNode;
|
|
46
48
|
bordered?: boolean;
|
|
47
49
|
}
|
|
48
|
-
export declare const TableContainer: React.
|
|
50
|
+
export declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
49
51
|
export interface THeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
50
52
|
children: React.ReactNode;
|
|
51
53
|
}
|
|
52
|
-
export declare const THead: React.
|
|
54
|
+
export declare const THead: React.ForwardRefExoticComponent<THeadProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
53
55
|
export interface TBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
54
56
|
children: React.ReactNode;
|
|
55
57
|
}
|
|
56
|
-
export declare const TBody: React.
|
|
58
|
+
export declare const TBody: React.ForwardRefExoticComponent<TBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
57
59
|
export interface TRProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
58
60
|
children: React.ReactNode;
|
|
59
61
|
active?: boolean;
|
|
60
62
|
header?: boolean;
|
|
61
63
|
}
|
|
62
|
-
export declare const TR: React.
|
|
64
|
+
export declare const TR: React.ForwardRefExoticComponent<TRProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
63
65
|
export interface THProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {
|
|
64
66
|
children?: React.ReactNode;
|
|
65
67
|
}
|
|
66
|
-
export declare const TH: React.
|
|
68
|
+
export declare const TH: React.ForwardRefExoticComponent<THProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
|
|
67
69
|
export interface TDProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
68
70
|
children?: React.ReactNode;
|
|
69
71
|
}
|
|
70
|
-
export declare const TD: React.
|
|
72
|
+
export declare const TD: React.ForwardRefExoticComponent<TDProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
73
|
+
export interface TableComponent extends React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<HTMLDivElement>> {
|
|
74
|
+
<T extends Record<string, any>>(props: TableProps<T> & React.RefAttributes<HTMLDivElement>): React.ReactElement;
|
|
75
|
+
Container: typeof TableContainer;
|
|
76
|
+
Head: typeof THead;
|
|
77
|
+
Body: typeof TBody;
|
|
78
|
+
Row: typeof TR;
|
|
79
|
+
HeaderCell: typeof TH;
|
|
80
|
+
Cell: typeof TD;
|
|
81
|
+
Pagination: typeof TablePagination;
|
|
82
|
+
}
|
|
83
|
+
export declare const Table: TableComponent;
|