shared-design-system 1.8.0 → 1.10.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/README.md +40 -9
- package/dist/src/colors.d.ts +32 -45
- package/dist/src/colors.js +50 -57
- package/dist/src/colors.js.map +1 -1
- package/dist/src/components/Badge.d.ts +2 -1
- package/dist/src/components/Badge.js +14 -6
- package/dist/src/components/Badge.js.map +1 -1
- package/dist/src/components/Button.d.ts +1 -1
- package/dist/src/components/Button.js +42 -22
- package/dist/src/components/Button.js.map +1 -1
- package/dist/src/components/Card.d.ts +2 -1
- package/dist/src/components/Card.js +18 -16
- package/dist/src/components/Card.js.map +1 -1
- package/dist/src/components/InputComponents.d.ts +2 -0
- package/dist/src/components/InputComponents.js +100 -29
- package/dist/src/components/InputComponents.js.map +1 -1
- package/dist/src/components/ListComponents.d.ts +8 -3
- package/dist/src/components/ListComponents.js +47 -12
- package/dist/src/components/ListComponents.js.map +1 -1
- package/dist/src/components/Table.d.ts +22 -0
- package/dist/src/components/Table.js +34 -20
- package/dist/src/components/Table.js.map +1 -1
- package/dist/src/components/Tabs.d.ts +11 -3
- package/dist/src/components/Tabs.js +71 -19
- package/dist/src/components/Tabs.js.map +1 -1
- package/dist/src/components/Typography.d.ts +1 -1
- package/dist/src/components/Typography.js +2 -0
- package/dist/src/components/Typography.js.map +1 -1
- package/dist/src/index.d.ts +3 -3
- package/dist/src/index.js +1 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/tokens.d.ts +12 -0
- package/dist/src/tokens.js +35 -20
- package/dist/src/tokens.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -73,21 +73,52 @@ export default config;
|
|
|
73
73
|
|
|
74
74
|
### 🔹 Điều hướng & Cấu trúc (Navigation & Layout)
|
|
75
75
|
* **Breadcrumbs**: Chỉ dẫn vị trí trang.
|
|
76
|
-
* **Tabs**: Hệ thống chuyển đổi nội dung.
|
|
76
|
+
* **Tabs**: Hệ thống chuyển đổi nội dung, hỗ trợ truyền `items` cho tiện lợi.
|
|
77
|
+
```jsx
|
|
78
|
+
<Tabs
|
|
79
|
+
value={currentTab}
|
|
80
|
+
onChange={setCurrentTab}
|
|
81
|
+
items={[
|
|
82
|
+
{ label: 'Tổng quan', value: 'overview' },
|
|
83
|
+
{ label: 'Cài đặt', value: 'settings' }
|
|
84
|
+
]}
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
77
87
|
* **Steps**: Quy trình thực hiện (Workflow).
|
|
78
88
|
* **Stack**: Quản lý khoảng cách tự động giữa các phần tử.
|
|
79
89
|
* **Card**: Container bọc nội dung cao cấp.
|
|
80
90
|
|
|
81
91
|
### 🔹 Dữ liệu & Danh sách (Data Display)
|
|
82
|
-
* **Table**:
|
|
83
|
-
* **List & ListItem**:
|
|
92
|
+
* **Table**: Component xây dựng bảng dữ liệu chuyên nghiệp theo hướng data-driven.
|
|
84
93
|
```jsx
|
|
85
|
-
import {
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
94
|
+
import { Table } from 'shared-design-system';
|
|
95
|
+
|
|
96
|
+
<Table
|
|
97
|
+
columns={[
|
|
98
|
+
{ key: 'name', label: 'Họ tên' },
|
|
99
|
+
{ key: 'role', label: 'Vai trò' }
|
|
100
|
+
]}
|
|
101
|
+
data={[
|
|
102
|
+
{ name: 'Nguyễn Văn A', role: 'Admin' },
|
|
103
|
+
{ name: 'Lê Thị B', role: 'User' }
|
|
104
|
+
]}
|
|
105
|
+
/>
|
|
106
|
+
```
|
|
107
|
+
* **List & ListItem**: Danh sách hiển thị theo cấu trúc mảng hoặc children.
|
|
108
|
+
```jsx
|
|
109
|
+
import { List, ListItem, Button } from 'shared-design-system';
|
|
110
|
+
|
|
111
|
+
<List
|
|
112
|
+
items={[
|
|
113
|
+
{ title: 'Thông tin người dùng', id: 1 },
|
|
114
|
+
{ title: 'Cài đặt hệ thống', id: 2 }
|
|
115
|
+
]}
|
|
116
|
+
renderItem={(item) => (
|
|
117
|
+
<ListItem action={<Button size="sm">Sửa</Button>}>
|
|
118
|
+
{item.title}
|
|
119
|
+
</ListItem>
|
|
120
|
+
)}
|
|
121
|
+
/>
|
|
91
122
|
```
|
|
92
123
|
* **Tag/Chip**: Nhãn dán hỗ trợ nút đóng (close).
|
|
93
124
|
* **Avatar**: Ảnh đại diện hoặc tên viết tắt.
|
package/dist/src/colors.d.ts
CHANGED
|
@@ -2,47 +2,46 @@ export declare const colors: {
|
|
|
2
2
|
brandRed: string;
|
|
3
3
|
brandYellow: string;
|
|
4
4
|
brandGrey: string;
|
|
5
|
+
slate50: string;
|
|
6
|
+
slate100: string;
|
|
7
|
+
slate200: string;
|
|
8
|
+
slate300: string;
|
|
9
|
+
slate400: string;
|
|
10
|
+
slate500: string;
|
|
11
|
+
slate600: string;
|
|
12
|
+
slate700: string;
|
|
13
|
+
slate800: string;
|
|
14
|
+
slate900: string;
|
|
15
|
+
amber50: string;
|
|
16
|
+
amber100: string;
|
|
17
|
+
amber400: string;
|
|
18
|
+
amber500: string;
|
|
19
|
+
amber600: string;
|
|
20
|
+
blue50: string;
|
|
21
|
+
blue100: string;
|
|
22
|
+
blue500: string;
|
|
23
|
+
blue600: string;
|
|
24
|
+
blue700: string;
|
|
25
|
+
emerald50: string;
|
|
26
|
+
emerald100: string;
|
|
27
|
+
emerald600: string;
|
|
28
|
+
emerald700: string;
|
|
29
|
+
sky50: string;
|
|
30
|
+
sky100: string;
|
|
31
|
+
sky600: string;
|
|
32
|
+
sky700: string;
|
|
33
|
+
red50: string;
|
|
34
|
+
red100: string;
|
|
35
|
+
red600: string;
|
|
36
|
+
red700: string;
|
|
5
37
|
yellow5: string;
|
|
6
38
|
yellow4: string;
|
|
7
39
|
yellow3: string;
|
|
8
40
|
yellow2: string;
|
|
9
41
|
yellow1: string;
|
|
10
42
|
yellow0: string;
|
|
11
|
-
neutral5: string;
|
|
12
|
-
neutral4: string;
|
|
13
|
-
neutral3: string;
|
|
14
|
-
neutral2: string;
|
|
15
|
-
neutral1: string;
|
|
16
|
-
neutral0: string;
|
|
17
43
|
black: string;
|
|
18
44
|
white: string;
|
|
19
|
-
purple5: string;
|
|
20
|
-
purple4: string;
|
|
21
|
-
purple3: string;
|
|
22
|
-
purple2: string;
|
|
23
|
-
purple1: string;
|
|
24
|
-
orange5: string;
|
|
25
|
-
orange4: string;
|
|
26
|
-
orange3: string;
|
|
27
|
-
orange2: string;
|
|
28
|
-
orange1: string;
|
|
29
|
-
orange0: string;
|
|
30
|
-
green5: string;
|
|
31
|
-
green4: string;
|
|
32
|
-
green3: string;
|
|
33
|
-
green2: string;
|
|
34
|
-
green1: string;
|
|
35
|
-
green0: string;
|
|
36
|
-
blue5: string;
|
|
37
|
-
blue4: string;
|
|
38
|
-
blue3: string;
|
|
39
|
-
blue2: string;
|
|
40
|
-
blue1: string;
|
|
41
|
-
red5: string;
|
|
42
|
-
red4: string;
|
|
43
|
-
red3: string;
|
|
44
|
-
red2: string;
|
|
45
|
-
red1: string;
|
|
46
45
|
paper: string;
|
|
47
46
|
primaryMain: string;
|
|
48
47
|
primaryDark: string;
|
|
@@ -52,20 +51,8 @@ export declare const colors: {
|
|
|
52
51
|
successDark: string;
|
|
53
52
|
errorMain: string;
|
|
54
53
|
errorDark: string;
|
|
55
|
-
orangeMain: string;
|
|
56
|
-
orangeDark: string;
|
|
57
54
|
warningMain: string;
|
|
58
55
|
warningDark: string;
|
|
59
56
|
infoMain: string;
|
|
60
57
|
infoDark: string;
|
|
61
|
-
grey50: string;
|
|
62
|
-
grey100: string;
|
|
63
|
-
grey200: string;
|
|
64
|
-
grey300: string;
|
|
65
|
-
grey500: string;
|
|
66
|
-
grey600: string;
|
|
67
|
-
grey700: string;
|
|
68
|
-
grey900: string;
|
|
69
|
-
grey400: string;
|
|
70
|
-
grey800: string;
|
|
71
58
|
};
|
package/dist/src/colors.js
CHANGED
|
@@ -2,71 +2,64 @@ export const colors = {
|
|
|
2
2
|
brandRed: '#BE1128',
|
|
3
3
|
brandYellow: '#FFC20E',
|
|
4
4
|
brandGrey: '#464646',
|
|
5
|
+
// Slate Palette
|
|
6
|
+
slate50: '#f8fafc',
|
|
7
|
+
slate100: '#f1f5f9',
|
|
8
|
+
slate200: '#e2e8f0',
|
|
9
|
+
slate300: '#cbd5e1',
|
|
10
|
+
slate400: '#94a3b8',
|
|
11
|
+
slate500: '#64748b',
|
|
12
|
+
slate600: '#475569',
|
|
13
|
+
slate700: '#334155',
|
|
14
|
+
slate800: '#1e293b',
|
|
15
|
+
slate900: '#0f172a',
|
|
16
|
+
// Amber Palette
|
|
17
|
+
amber50: '#fffbeb',
|
|
18
|
+
amber100: '#fef3c7',
|
|
19
|
+
amber400: '#fbbf24',
|
|
20
|
+
amber500: '#f59e0b',
|
|
21
|
+
amber600: '#d97706',
|
|
22
|
+
// Blue Palette
|
|
23
|
+
blue50: '#eff6ff',
|
|
24
|
+
blue100: '#dbeafe',
|
|
25
|
+
blue500: '#3b82f6',
|
|
26
|
+
blue600: '#2563eb',
|
|
27
|
+
blue700: '#1d4ed8',
|
|
28
|
+
// Emerald Palette
|
|
29
|
+
emerald50: '#ecfdf5',
|
|
30
|
+
emerald100: '#d1fae5',
|
|
31
|
+
emerald600: '#059669',
|
|
32
|
+
emerald700: '#047857',
|
|
33
|
+
// Sky Palette
|
|
34
|
+
sky50: '#f0f9ff',
|
|
35
|
+
sky100: '#e0f2fe',
|
|
36
|
+
sky600: '#0284c7',
|
|
37
|
+
sky700: '#0369a1',
|
|
38
|
+
// Red Palette
|
|
39
|
+
red50: '#fef2f2',
|
|
40
|
+
red100: '#fee2e2',
|
|
41
|
+
red600: '#dc2626',
|
|
42
|
+
red700: '#b91c1c',
|
|
5
43
|
yellow5: '#F7A30A',
|
|
6
44
|
yellow4: '#F7B512',
|
|
7
45
|
yellow3: '#FCC954',
|
|
8
46
|
yellow2: '#FFDF80',
|
|
9
47
|
yellow1: '#FFECB3',
|
|
10
48
|
yellow0: '#FFF9E5',
|
|
11
|
-
neutral5: '#212B36',
|
|
12
|
-
neutral4: '#454F5B',
|
|
13
|
-
neutral3: '#B6BEC8',
|
|
14
|
-
neutral2: '#D3D8DE',
|
|
15
|
-
neutral1: '#EAEEF2',
|
|
16
|
-
neutral0: '#F8F9FA',
|
|
17
49
|
black: '#000000',
|
|
18
50
|
white: '#ffffff',
|
|
19
|
-
purple5: '#6B1C3A',
|
|
20
|
-
purple4: '#A60066',
|
|
21
|
-
purple3: '#D10373',
|
|
22
|
-
purple2: '#FF99D8',
|
|
23
|
-
purple1: '#FFE5F5',
|
|
24
|
-
orange5: '#D4470F',
|
|
25
|
-
orange4: '#F56600',
|
|
26
|
-
orange3: '#FF993B',
|
|
27
|
-
orange2: '#FFB580',
|
|
28
|
-
orange1: '#FFD2B3',
|
|
29
|
-
orange0: '#FFF0E5',
|
|
30
|
-
green5: '#337321',
|
|
31
|
-
green4: '#4FA800',
|
|
32
|
-
green3: '#7DBA00',
|
|
33
|
-
green2: '#ABD653',
|
|
34
|
-
green1: '#D5E5B4',
|
|
35
|
-
green0: '#F2FAE2',
|
|
36
|
-
blue5: '#006FD6',
|
|
37
|
-
blue4: '#1890FF',
|
|
38
|
-
blue3: '#80C2FF',
|
|
39
|
-
blue2: '#C2E1FF',
|
|
40
|
-
blue1: '#E5F3FF',
|
|
41
|
-
red5: '#AD2624',
|
|
42
|
-
red4: '#D12421',
|
|
43
|
-
red3: '#EB2629',
|
|
44
|
-
red2: '#FCA5A6',
|
|
45
|
-
red1: '#FDE8E8',
|
|
46
51
|
paper: '#ffffff',
|
|
47
|
-
primaryMain: '#
|
|
48
|
-
primaryDark: '#
|
|
49
|
-
secondaryMain: '#
|
|
50
|
-
secondaryDark: '#
|
|
51
|
-
successMain: '#
|
|
52
|
-
successDark: '#
|
|
53
|
-
errorMain: '#
|
|
54
|
-
errorDark: '#
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
infoMain: '#1890ff',
|
|
60
|
-
infoDark: '#006fd6',
|
|
61
|
-
grey50: '#fafafa',
|
|
62
|
-
grey100: '#f5f5f5',
|
|
63
|
-
grey200: '#f8f9fa',
|
|
64
|
-
grey300: '#eaeef2',
|
|
65
|
-
grey500: '#d3d8de',
|
|
66
|
-
grey600: '#b6bec8',
|
|
67
|
-
grey700: '#454f5b',
|
|
68
|
-
grey900: '#212b36',
|
|
69
|
-
grey400: '#bdbdbd',
|
|
70
|
-
grey800: '#7B7B7B'
|
|
52
|
+
primaryMain: '#2563eb', // Standardized to Blue 600 as per dashboard
|
|
53
|
+
primaryDark: '#1d4ed8',
|
|
54
|
+
secondaryMain: '#f1f5f9', // Slate 100
|
|
55
|
+
secondaryDark: '#e2e8f0',
|
|
56
|
+
successMain: '#059669',
|
|
57
|
+
successDark: '#047857',
|
|
58
|
+
errorMain: '#dc2626',
|
|
59
|
+
errorDark: '#b91c1c',
|
|
60
|
+
warningMain: '#f59e0b',
|
|
61
|
+
warningDark: '#d97706',
|
|
62
|
+
infoMain: '#3b82f6',
|
|
63
|
+
infoDark: '#2563eb',
|
|
71
64
|
};
|
|
72
65
|
//# sourceMappingURL=colors.js.map
|
package/dist/src/colors.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IAEpB,
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IAEpB,gBAAgB;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IAEnB,gBAAgB;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IAEnB,eAAe;IACf,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,kBAAkB;IAClB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IAErB,cAAc;IACd,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IAEjB,cAAc;IACd,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IAEjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS,EAAE,4CAA4C;IACpE,WAAW,EAAE,SAAS;IACtB,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;CACtB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
3
|
-
variant?: 'success' | 'warning' | 'danger' | 'info' | 'slate';
|
|
3
|
+
variant?: 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'sky' | 'emerald';
|
|
4
|
+
shape?: 'pill' | 'rounded';
|
|
4
5
|
}
|
|
5
6
|
export declare const Badge: React.FC<BadgeProps>;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { tokens } from '../tokens';
|
|
3
|
-
export const Badge = ({ children, variant = 'slate', className = '', style = {}, ...props }) => {
|
|
3
|
+
export const Badge = ({ children, variant = 'slate', shape = 'pill', className = '', style = {}, ...props }) => {
|
|
4
4
|
const getVariantStyles = () => {
|
|
5
5
|
switch (variant) {
|
|
6
6
|
case 'success':
|
|
7
|
+
case 'emerald':
|
|
7
8
|
return {
|
|
8
9
|
backgroundColor: tokens.color.successBg,
|
|
9
10
|
color: tokens.color.success,
|
|
10
|
-
borderColor: 'rgba(
|
|
11
|
+
borderColor: 'rgba(5, 150, 105, 0.2)'
|
|
11
12
|
};
|
|
12
13
|
case 'warning':
|
|
13
14
|
return {
|
|
@@ -19,7 +20,7 @@ export const Badge = ({ children, variant = 'slate', className = '', style = {},
|
|
|
19
20
|
return {
|
|
20
21
|
backgroundColor: tokens.color.dangerBg,
|
|
21
22
|
color: tokens.color.danger,
|
|
22
|
-
borderColor: 'rgba(
|
|
23
|
+
borderColor: 'rgba(220, 38, 38, 0.2)'
|
|
23
24
|
};
|
|
24
25
|
case 'info':
|
|
25
26
|
return {
|
|
@@ -27,6 +28,12 @@ export const Badge = ({ children, variant = 'slate', className = '', style = {},
|
|
|
27
28
|
color: tokens.color.info,
|
|
28
29
|
borderColor: 'rgba(59, 130, 246, 0.2)'
|
|
29
30
|
};
|
|
31
|
+
case 'sky':
|
|
32
|
+
return {
|
|
33
|
+
backgroundColor: '#f0f9ff',
|
|
34
|
+
color: '#0369a1',
|
|
35
|
+
borderColor: '#e0f2fe'
|
|
36
|
+
};
|
|
30
37
|
case 'slate':
|
|
31
38
|
default:
|
|
32
39
|
return {
|
|
@@ -40,13 +47,14 @@ export const Badge = ({ children, variant = 'slate', className = '', style = {},
|
|
|
40
47
|
const baseStyle = {
|
|
41
48
|
display: 'inline-flex',
|
|
42
49
|
alignItems: 'center',
|
|
43
|
-
padding:
|
|
44
|
-
borderRadius: tokens.radius.full,
|
|
50
|
+
padding: shape === 'pill' ? '6px 16px' : '6px 16px',
|
|
51
|
+
borderRadius: shape === 'pill' ? tokens.radius.full : tokens.radius.lg,
|
|
45
52
|
fontSize: tokens.font.xs,
|
|
46
53
|
fontWeight: tokens.font.weightBold,
|
|
47
54
|
textTransform: 'uppercase',
|
|
48
55
|
letterSpacing: '0.05em',
|
|
49
|
-
border: '1px solid
|
|
56
|
+
border: '1px solid',
|
|
57
|
+
boxShadow: shape === 'rounded' ? tokens.shadow.sm : 'none',
|
|
50
58
|
...vStyles,
|
|
51
59
|
...style
|
|
52
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,SAAS,CAAC;YACf,KAAK,SAAS;gBACZ,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;oBACvC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;oBAC3B,WAAW,EAAE,wBAAwB;iBACtC,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;oBACvC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;oBAC3B,WAAW,EAAE,yBAAyB;iBACvC,CAAC;YACJ,KAAK,QAAQ;gBACX,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;oBACtC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;oBAC1B,WAAW,EAAE,wBAAwB;iBACtC,CAAC;YACJ,KAAK,MAAM;gBACT,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;oBACpC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;oBACxB,WAAW,EAAE,yBAAyB;iBACvC,CAAC;YACJ,KAAK,KAAK;gBACR,OAAO;oBACL,eAAe,EAAE,SAAS;oBAC1B,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,SAAS;iBACvB,CAAC;YACJ,KAAK,OAAO,CAAC;YACb;gBACE,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;oBACxC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;oBAC7B,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;iBACjC,CAAC;QACN,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;QACnD,YAAY,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACtE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;QACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;QAClC,aAAa,EAAE,WAAoB;QACnC,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,WAAW;QACnB,SAAS,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;QAC1D,GAAG,OAAO;QACV,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,eAAM,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,YACpD,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
-
variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
|
|
3
|
+
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'amber';
|
|
4
4
|
size?: 'sm' | 'md' | 'lg';
|
|
5
5
|
isActive?: boolean;
|
|
6
6
|
}
|
|
@@ -7,19 +7,33 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
7
7
|
switch (variant) {
|
|
8
8
|
case 'secondary':
|
|
9
9
|
return {
|
|
10
|
-
backgroundColor: tokens.color.
|
|
11
|
-
color: tokens.color.
|
|
12
|
-
border: `1px solid ${tokens.color.
|
|
10
|
+
backgroundColor: tokens.color.white,
|
|
11
|
+
color: tokens.color.slate600,
|
|
12
|
+
border: `1px solid ${tokens.color.slate200}`,
|
|
13
13
|
boxShadow: tokens.shadow.sm,
|
|
14
|
-
hoverBg: tokens.color.
|
|
14
|
+
hoverBg: tokens.color.slate50,
|
|
15
|
+
hoverColor: tokens.color.slate800,
|
|
16
|
+
hoverBorder: tokens.color.slate300,
|
|
15
17
|
};
|
|
16
18
|
case 'danger':
|
|
17
19
|
return {
|
|
18
|
-
backgroundColor: tokens.color.
|
|
19
|
-
color:
|
|
20
|
-
border:
|
|
20
|
+
backgroundColor: tokens.color.white,
|
|
21
|
+
color: tokens.color.danger,
|
|
22
|
+
border: `1px solid #fee2e2`,
|
|
21
23
|
boxShadow: tokens.shadow.sm,
|
|
22
|
-
hoverBg:
|
|
24
|
+
hoverBg: tokens.color.danger,
|
|
25
|
+
hoverColor: tokens.color.white,
|
|
26
|
+
hoverBorder: tokens.color.danger,
|
|
27
|
+
};
|
|
28
|
+
case 'amber':
|
|
29
|
+
return {
|
|
30
|
+
backgroundColor: tokens.color.white,
|
|
31
|
+
color: tokens.color.warning,
|
|
32
|
+
border: `1px solid ${tokens.color.warningBg}`,
|
|
33
|
+
boxShadow: tokens.shadow.sm,
|
|
34
|
+
hoverBg: tokens.color.warning,
|
|
35
|
+
hoverColor: tokens.color.white,
|
|
36
|
+
hoverBorder: tokens.color.warning,
|
|
23
37
|
};
|
|
24
38
|
case 'ghost':
|
|
25
39
|
return {
|
|
@@ -27,48 +41,54 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
27
41
|
color: tokens.color.textMuted,
|
|
28
42
|
border: '1px solid transparent',
|
|
29
43
|
boxShadow: 'none',
|
|
30
|
-
hoverBg: tokens.color.
|
|
44
|
+
hoverBg: tokens.color.slate100,
|
|
45
|
+
hoverColor: tokens.color.text,
|
|
46
|
+
hoverBorder: 'transparent',
|
|
31
47
|
};
|
|
32
48
|
case 'primary':
|
|
33
49
|
default:
|
|
34
50
|
return {
|
|
35
|
-
backgroundColor: tokens.color.
|
|
36
|
-
color:
|
|
37
|
-
border:
|
|
51
|
+
backgroundColor: tokens.color.white,
|
|
52
|
+
color: tokens.color.primary,
|
|
53
|
+
border: `1px solid ${tokens.color.infoBg}`,
|
|
38
54
|
boxShadow: tokens.shadow.sm,
|
|
39
|
-
hoverBg: tokens.color.
|
|
55
|
+
hoverBg: tokens.color.primary,
|
|
56
|
+
hoverColor: tokens.color.white,
|
|
57
|
+
hoverBorder: tokens.color.primary,
|
|
40
58
|
};
|
|
41
59
|
}
|
|
42
60
|
};
|
|
43
61
|
const getSizeStyles = () => {
|
|
44
62
|
switch (size) {
|
|
45
63
|
case 'sm':
|
|
46
|
-
return { padding: `${tokens.spacing[
|
|
64
|
+
return { padding: `${tokens.spacing[2]} ${tokens.spacing[4]}`, fontSize: tokens.font.xs };
|
|
47
65
|
case 'lg':
|
|
48
|
-
return { padding: `${tokens.spacing[
|
|
66
|
+
return { padding: `${tokens.spacing[4]} ${tokens.spacing[8]}`, fontSize: tokens.font.md };
|
|
49
67
|
case 'md':
|
|
50
68
|
default:
|
|
51
|
-
return { padding: `${tokens.spacing[2]} ${tokens.spacing[
|
|
69
|
+
return { padding: `${tokens.spacing[2.5]} ${tokens.spacing[5]}`, fontSize: tokens.font.sm };
|
|
52
70
|
}
|
|
53
71
|
};
|
|
54
72
|
const vStyles = getVariantStyles();
|
|
55
73
|
const sStyles = getSizeStyles();
|
|
74
|
+
const isAppliedHover = !disabled && (isHovered || isActive);
|
|
56
75
|
const baseStyle = {
|
|
57
76
|
fontFamily: tokens.font.family,
|
|
58
77
|
fontWeight: tokens.font.weightBold,
|
|
59
|
-
borderRadius: tokens.radius.
|
|
78
|
+
borderRadius: tokens.radius.xl,
|
|
60
79
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
61
|
-
transition:
|
|
80
|
+
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
62
81
|
display: 'inline-flex',
|
|
63
82
|
alignItems: 'center',
|
|
64
83
|
justifyContent: 'center',
|
|
65
84
|
gap: tokens.spacing[2],
|
|
66
85
|
outline: 'none',
|
|
67
86
|
opacity: disabled ? 0.6 : 1,
|
|
68
|
-
backgroundColor:
|
|
69
|
-
color: vStyles.color,
|
|
70
|
-
border: vStyles.border,
|
|
71
|
-
boxShadow: vStyles.boxShadow,
|
|
87
|
+
backgroundColor: isAppliedHover ? vStyles.hoverBg : vStyles.backgroundColor,
|
|
88
|
+
color: isAppliedHover ? vStyles.hoverColor : vStyles.color,
|
|
89
|
+
border: isAppliedHover ? vStyles.hoverBorder : vStyles.border,
|
|
90
|
+
boxShadow: isAppliedHover ? tokens.shadow.md : vStyles.boxShadow,
|
|
91
|
+
transform: isAppliedHover ? 'translateY(-1px)' : 'translateY(0)',
|
|
72
92
|
...sStyles,
|
|
73
93
|
...style,
|
|
74
94
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
|
|
|
3
3
|
title?: React.ReactNode;
|
|
4
4
|
subtitle?: React.ReactNode;
|
|
5
5
|
footer?: React.ReactNode;
|
|
6
|
-
padding?: 'sm' | 'md' | 'lg';
|
|
6
|
+
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
+
variant?: 'default' | 'accent' | 'outlined' | 'ghost';
|
|
7
8
|
}
|
|
8
9
|
export declare const Card: React.FC<CardProps>;
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { tokens } from '../tokens';
|
|
3
|
-
export const Card = ({ children, title, subtitle, footer, className = '', style = {}, padding = '
|
|
3
|
+
export const Card = ({ children, title, subtitle, footer, className = '', style = {}, padding = 'lg', variant = 'default', ...props }) => {
|
|
4
4
|
const getPadding = () => {
|
|
5
5
|
switch (padding) {
|
|
6
|
+
case 'none': return '0';
|
|
6
7
|
case 'sm': return tokens.spacing[4];
|
|
7
|
-
case '
|
|
8
|
-
case '
|
|
9
|
-
|
|
8
|
+
case 'md': return tokens.spacing[6];
|
|
9
|
+
case 'xl': return tokens.spacing[10];
|
|
10
|
+
case 'lg':
|
|
11
|
+
default: return tokens.spacing[8];
|
|
10
12
|
}
|
|
11
13
|
};
|
|
12
14
|
const containerStyle = {
|
|
13
|
-
backgroundColor: tokens.color.surface,
|
|
14
|
-
borderRadius: tokens.radius
|
|
15
|
-
border: `1px solid ${tokens.color.
|
|
16
|
-
boxShadow: tokens.shadow.sm,
|
|
15
|
+
backgroundColor: variant === 'ghost' ? 'transparent' : tokens.color.surface,
|
|
16
|
+
borderRadius: tokens.radius['2xl'],
|
|
17
|
+
border: variant === 'ghost' ? 'none' : `1px solid ${tokens.color.slate100}`,
|
|
18
|
+
boxShadow: variant === 'default' || variant === 'accent' ? tokens.shadow.sm : 'none',
|
|
17
19
|
overflow: 'hidden',
|
|
18
20
|
display: 'flex',
|
|
19
21
|
flexDirection: 'column',
|
|
@@ -24,16 +26,16 @@ export const Card = ({ children, title, subtitle, footer, className = '', style
|
|
|
24
26
|
flex: 1
|
|
25
27
|
};
|
|
26
28
|
const headerStyle = {
|
|
27
|
-
padding: `${tokens.spacing[
|
|
28
|
-
borderBottom: `1px solid ${tokens.color.
|
|
29
|
-
backgroundColor: tokens.color.
|
|
30
|
-
borderTop: `
|
|
29
|
+
padding: `${tokens.spacing[5]} ${getPadding()}`,
|
|
30
|
+
borderBottom: `1px solid ${tokens.color.slate50}`,
|
|
31
|
+
backgroundColor: tokens.color.white,
|
|
32
|
+
borderTop: variant === 'accent' ? `2px solid ${tokens.color.danger}` : 'none',
|
|
31
33
|
};
|
|
32
34
|
const footerStyle = {
|
|
33
|
-
padding: `${tokens.spacing[
|
|
34
|
-
borderTop: `1px solid ${tokens.color.
|
|
35
|
-
backgroundColor: tokens.color.
|
|
35
|
+
padding: `${tokens.spacing[5]} ${getPadding()}`,
|
|
36
|
+
borderTop: `1px solid ${tokens.color.slate50}`,
|
|
37
|
+
backgroundColor: tokens.color.slate50,
|
|
36
38
|
};
|
|
37
|
-
return (_jsxs("div", { style: containerStyle, className: className, ...props, children: [(title || subtitle) && (_jsxs("div", { style: headerStyle, children: [title && _jsx("h3", { style: { margin: 0, fontSize: tokens.font.
|
|
39
|
+
return (_jsxs("div", { style: containerStyle, className: className, ...props, children: [(title || subtitle) && (_jsxs("div", { style: headerStyle, children: [title && _jsx("h3", { style: { margin: 0, fontSize: tokens.font.base, fontWeight: tokens.font.weightBold, color: tokens.color.slate800 }, children: title }), subtitle && _jsx("p", { style: { margin: `${tokens.spacing[1]} 0 0 0`, fontSize: tokens.font.xs, color: tokens.color.textMuted }, children: subtitle })] })), _jsx("div", { style: bodyStyle, children: children }), footer && (_jsx("div", { style: footerStyle, children: footer }))] }));
|
|
38
40
|
};
|
|
39
41
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAO,OAAO,EAAE,CAAC;YACf,KAAK,MAAM,CAAC,CAAC,OAAO,GAAG,CAAC;YACxB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACpC,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACpC,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACrC,KAAK,IAAI,CAAC;YACV,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAwB;QAC1C,eAAe,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;QAC3E,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;QAC3E,SAAS,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;QACpF,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,UAAU,EAAE;QACrB,IAAI,EAAE,CAAC;KACR,CAAC;IAEF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,UAAU,EAAE,EAAE;QAC/C,YAAY,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE;QACjD,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK;QACnC,SAAS,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM;KAC9E,CAAC;IAEF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,UAAU,EAAE,EAAE;QAC/C,SAAS,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE;QAC9C,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;KACtC,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,aACxD,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACtB,eAAK,KAAK,EAAE,WAAW,aACpB,KAAK,IAAI,aAAI,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,YAAG,KAAK,GAAM,EAC7I,QAAQ,IAAI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,YAAG,QAAQ,GAAK,IACpI,CACP,EACD,cAAK,KAAK,EAAE,SAAS,YAClB,QAAQ,GACL,EACL,MAAM,IAAI,CACT,cAAK,KAAK,EAAE,WAAW,YACpB,MAAM,GACH,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -3,6 +3,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
3
3
|
label?: string;
|
|
4
4
|
required?: boolean;
|
|
5
5
|
error?: string;
|
|
6
|
+
variant?: 'default' | 'filter';
|
|
6
7
|
}
|
|
7
8
|
export declare const Input: React.FC<InputProps>;
|
|
8
9
|
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
@@ -15,6 +16,7 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
|
|
|
15
16
|
label?: string;
|
|
16
17
|
required?: boolean;
|
|
17
18
|
error?: string;
|
|
19
|
+
variant?: 'default' | 'filter';
|
|
18
20
|
}
|
|
19
21
|
export declare const Select: React.FC<SelectProps>;
|
|
20
22
|
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|