shared-design-system 1.10.0 → 1.12.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/Avatar.d.ts +2 -1
- package/dist/src/components/Avatar.js +39 -21
- package/dist/src/components/Avatar.js.map +1 -1
- package/dist/src/components/Badge.d.ts +3 -2
- package/dist/src/components/Badge.js +51 -25
- package/dist/src/components/Badge.js.map +1 -1
- package/dist/src/components/Button.d.ts +2 -0
- package/dist/src/components/Button.js +28 -12
- package/dist/src/components/Button.js.map +1 -1
- package/dist/src/components/Card.d.ts +4 -1
- package/dist/src/components/Card.js +43 -18
- package/dist/src/components/Card.js.map +1 -1
- package/dist/src/components/DatePicker.d.ts +3 -0
- package/dist/src/components/DatePicker.js +227 -0
- package/dist/src/components/DatePicker.js.map +1 -0
- package/dist/src/components/Divider.d.ts +2 -0
- package/dist/src/components/Divider.js +20 -12
- package/dist/src/components/Divider.js.map +1 -1
- package/dist/src/components/InputComponents.d.ts +4 -4
- package/dist/src/components/InputComponents.js +99 -99
- package/dist/src/components/InputComponents.js.map +1 -1
- package/dist/src/components/MultiSelect.d.ts +14 -0
- package/dist/src/components/MultiSelect.js +142 -0
- package/dist/src/components/MultiSelect.js.map +1 -0
- package/dist/src/components/ReadOnlyField.d.ts +2 -1
- package/dist/src/components/ReadOnlyField.js +20 -13
- package/dist/src/components/ReadOnlyField.js.map +1 -1
- package/dist/src/components/Select.d.ts +19 -0
- package/dist/src/components/Select.js +110 -0
- package/dist/src/components/Select.js.map +1 -0
- package/dist/src/components/Stack.d.ts +2 -0
- package/dist/src/components/Stack.js +18 -5
- package/dist/src/components/Stack.js.map +1 -1
- package/dist/src/components/Table.d.ts +6 -12
- package/dist/src/components/Table.js +13 -7
- package/dist/src/components/Table.js.map +1 -1
- package/dist/src/components/Tag.d.ts +3 -2
- package/dist/src/components/Tag.js +22 -22
- package/dist/src/components/Tag.js.map +1 -1
- package/dist/src/components/Typography.d.ts +2 -2
- package/dist/src/components/Typography.js +16 -8
- package/dist/src/components/Typography.js.map +1 -1
- package/dist/src/index.d.ts +7 -2
- package/dist/src/index.js +4 -1
- package/dist/src/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
3
3
|
src?: string;
|
|
4
4
|
alt?: string;
|
|
5
5
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
6
|
-
variant?: 'circle' | 'rounded'
|
|
6
|
+
variant?: 'circle' | 'rounded';
|
|
7
|
+
status?: 'online' | 'offline' | 'busy' | 'away';
|
|
7
8
|
}
|
|
8
9
|
export declare const Avatar: React.FC<AvatarProps>;
|
|
@@ -1,43 +1,61 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { tokens } from '../tokens';
|
|
3
|
-
export const Avatar = ({ src, alt, children, size = 'md', variant = 'circle', className = '', style = {}, ...props }) => {
|
|
3
|
+
export const Avatar = ({ src, alt, children, size = 'md', variant = 'circle', status, className = '', style = {}, ...props }) => {
|
|
4
4
|
const getDims = () => {
|
|
5
5
|
switch (size) {
|
|
6
6
|
case 'xs': return '24px';
|
|
7
7
|
case 'sm': return '32px';
|
|
8
8
|
case 'lg': return '48px';
|
|
9
9
|
case 'xl': return '64px';
|
|
10
|
-
case 'md':
|
|
11
10
|
default: return '40px';
|
|
12
11
|
}
|
|
13
12
|
};
|
|
14
|
-
const getRadius = () => {
|
|
15
|
-
if (variant === 'rounded')
|
|
16
|
-
return tokens.radius.md;
|
|
17
|
-
if (variant === 'square')
|
|
18
|
-
return '0';
|
|
19
|
-
return '50%';
|
|
20
|
-
};
|
|
21
13
|
const dims = getDims();
|
|
22
|
-
const
|
|
14
|
+
const radius = variant === 'circle' ? '50%' : tokens.radius.lg;
|
|
15
|
+
const containerStyle = {
|
|
16
|
+
position: 'relative',
|
|
23
17
|
width: dims,
|
|
24
18
|
height: dims,
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
display: 'inline-block',
|
|
20
|
+
...style
|
|
21
|
+
};
|
|
22
|
+
const baseStyle = {
|
|
23
|
+
width: '100%',
|
|
24
|
+
height: '100%',
|
|
25
|
+
borderRadius: radius,
|
|
26
|
+
display: 'flex',
|
|
27
27
|
alignItems: 'center',
|
|
28
28
|
justifyContent: 'center',
|
|
29
|
-
backgroundColor: tokens.color.
|
|
30
|
-
color: tokens.color.
|
|
29
|
+
backgroundColor: tokens.color.slate100,
|
|
30
|
+
color: tokens.color.slate600,
|
|
31
31
|
fontSize: `calc(${dims} / 2.2)`,
|
|
32
32
|
fontWeight: tokens.font.weightBold,
|
|
33
33
|
overflow: 'hidden',
|
|
34
34
|
userSelect: 'none',
|
|
35
|
-
border: `
|
|
36
|
-
|
|
35
|
+
border: `1.5px solid ${tokens.color.white}`,
|
|
36
|
+
boxShadow: tokens.shadow.sm,
|
|
37
|
+
objectFit: 'cover',
|
|
38
|
+
};
|
|
39
|
+
const getStatusColor = () => {
|
|
40
|
+
switch (status) {
|
|
41
|
+
case 'online': return tokens.color.success;
|
|
42
|
+
case 'busy': return tokens.color.danger;
|
|
43
|
+
case 'away': return tokens.color.warning;
|
|
44
|
+
case 'offline': return tokens.color.slate400;
|
|
45
|
+
default: return 'transparent';
|
|
46
|
+
}
|
|
37
47
|
};
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
48
|
+
const statusSize = size === 'xs' ? '6px' : (size === 'sm' ? '8px' : '10px');
|
|
49
|
+
return (_jsxs("div", { style: containerStyle, className: className, children: [src ? (_jsx("img", { src: src, alt: alt || 'Avatar', style: baseStyle, ...props })) : (_jsx("div", { style: baseStyle, ...props, children: children })), status && (_jsx("div", { style: {
|
|
50
|
+
position: 'absolute',
|
|
51
|
+
bottom: '1px',
|
|
52
|
+
right: '1px',
|
|
53
|
+
width: statusSize,
|
|
54
|
+
height: statusSize,
|
|
55
|
+
borderRadius: '50%',
|
|
56
|
+
backgroundColor: getStatusColor(),
|
|
57
|
+
border: `2px solid ${tokens.color.white}`,
|
|
58
|
+
boxShadow: '0 0 0 1px rgba(0,0,0,0.05)'
|
|
59
|
+
} }))] }));
|
|
42
60
|
};
|
|
43
61
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
3
|
-
variant?: 'success' | 'warning' | 'danger' | 'info' | '
|
|
4
|
-
|
|
3
|
+
variant?: 'success' | 'warning' | 'danger' | 'info' | 'primary' | 'slate';
|
|
4
|
+
type?: 'subtle' | 'solid';
|
|
5
|
+
size?: 'sm' | 'md';
|
|
5
6
|
}
|
|
6
7
|
export declare const Badge: React.FC<BadgeProps>;
|
|
@@ -1,45 +1,69 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { tokens } from '../tokens';
|
|
3
|
-
export const Badge = ({ children, variant = 'slate',
|
|
3
|
+
export const Badge = ({ children, variant = 'slate', type = 'subtle', size = 'md', className = '', style = {}, ...props }) => {
|
|
4
4
|
const getVariantStyles = () => {
|
|
5
|
+
const isSubtle = type === 'subtle';
|
|
5
6
|
switch (variant) {
|
|
7
|
+
case 'primary':
|
|
8
|
+
return isSubtle ? {
|
|
9
|
+
backgroundColor: tokens.color.primaryLight,
|
|
10
|
+
color: tokens.color.primary,
|
|
11
|
+
borderColor: 'rgba(37, 99, 235, 0.15)'
|
|
12
|
+
} : {
|
|
13
|
+
backgroundColor: tokens.color.primary,
|
|
14
|
+
color: 'white',
|
|
15
|
+
borderColor: 'transparent'
|
|
16
|
+
};
|
|
6
17
|
case 'success':
|
|
7
|
-
|
|
8
|
-
return {
|
|
18
|
+
return isSubtle ? {
|
|
9
19
|
backgroundColor: tokens.color.successBg,
|
|
10
20
|
color: tokens.color.success,
|
|
11
|
-
borderColor: 'rgba(5, 150, 105, 0.
|
|
21
|
+
borderColor: 'rgba(5, 150, 105, 0.15)'
|
|
22
|
+
} : {
|
|
23
|
+
backgroundColor: tokens.color.success,
|
|
24
|
+
color: 'white',
|
|
25
|
+
borderColor: 'transparent'
|
|
12
26
|
};
|
|
13
27
|
case 'warning':
|
|
14
|
-
return {
|
|
28
|
+
return isSubtle ? {
|
|
15
29
|
backgroundColor: tokens.color.warningBg,
|
|
16
30
|
color: tokens.color.warning,
|
|
17
|
-
borderColor: 'rgba(245, 158, 11, 0.
|
|
31
|
+
borderColor: 'rgba(245, 158, 11, 0.15)'
|
|
32
|
+
} : {
|
|
33
|
+
backgroundColor: tokens.color.warning,
|
|
34
|
+
color: 'white',
|
|
35
|
+
borderColor: 'transparent'
|
|
18
36
|
};
|
|
19
37
|
case 'danger':
|
|
20
|
-
return {
|
|
38
|
+
return isSubtle ? {
|
|
21
39
|
backgroundColor: tokens.color.dangerBg,
|
|
22
40
|
color: tokens.color.danger,
|
|
23
|
-
borderColor: 'rgba(220, 38, 38, 0.
|
|
41
|
+
borderColor: 'rgba(220, 38, 38, 0.15)'
|
|
42
|
+
} : {
|
|
43
|
+
backgroundColor: tokens.color.danger,
|
|
44
|
+
color: 'white',
|
|
45
|
+
borderColor: 'transparent'
|
|
24
46
|
};
|
|
25
47
|
case 'info':
|
|
26
|
-
return {
|
|
48
|
+
return isSubtle ? {
|
|
27
49
|
backgroundColor: tokens.color.infoBg,
|
|
28
50
|
color: tokens.color.info,
|
|
29
|
-
borderColor: 'rgba(59, 130, 246, 0.
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
color: '#0369a1',
|
|
35
|
-
borderColor: '#e0f2fe'
|
|
51
|
+
borderColor: 'rgba(59, 130, 246, 0.15)'
|
|
52
|
+
} : {
|
|
53
|
+
backgroundColor: tokens.color.info,
|
|
54
|
+
color: 'white',
|
|
55
|
+
borderColor: 'transparent'
|
|
36
56
|
};
|
|
37
57
|
case 'slate':
|
|
38
58
|
default:
|
|
39
|
-
return {
|
|
40
|
-
backgroundColor: tokens.color.
|
|
41
|
-
color: tokens.color.
|
|
42
|
-
borderColor:
|
|
59
|
+
return isSubtle ? {
|
|
60
|
+
backgroundColor: tokens.color.slate100,
|
|
61
|
+
color: tokens.color.slate700,
|
|
62
|
+
borderColor: 'rgba(100, 116, 139, 0.1)'
|
|
63
|
+
} : {
|
|
64
|
+
backgroundColor: tokens.color.slate700,
|
|
65
|
+
color: 'white',
|
|
66
|
+
borderColor: 'transparent'
|
|
43
67
|
};
|
|
44
68
|
}
|
|
45
69
|
};
|
|
@@ -47,14 +71,16 @@ export const Badge = ({ children, variant = 'slate', shape = 'pill', className =
|
|
|
47
71
|
const baseStyle = {
|
|
48
72
|
display: 'inline-flex',
|
|
49
73
|
alignItems: 'center',
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
padding: size === 'sm' ? '1px 8px' : '3px 12px',
|
|
76
|
+
borderRadius: tokens.radius.full,
|
|
77
|
+
fontSize: size === 'sm' ? '10px' : '11px',
|
|
53
78
|
fontWeight: tokens.font.weightBold,
|
|
54
79
|
textTransform: 'uppercase',
|
|
55
|
-
letterSpacing: '0.
|
|
80
|
+
letterSpacing: '0.04em',
|
|
56
81
|
border: '1px solid',
|
|
57
|
-
|
|
82
|
+
whiteSpace: 'nowrap',
|
|
83
|
+
transition: tokens.transition.fast,
|
|
58
84
|
...vStyles,
|
|
59
85
|
...style
|
|
60
86
|
};
|
|
@@ -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":"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"}
|
|
@@ -3,5 +3,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
3
3
|
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'amber';
|
|
4
4
|
size?: 'sm' | 'md' | 'lg';
|
|
5
5
|
isActive?: boolean;
|
|
6
|
+
startIcon?: React.ReactNode;
|
|
7
|
+
endIcon?: React.ReactNode;
|
|
6
8
|
}
|
|
7
9
|
export declare const Button: React.FC<ButtonProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
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 Button = ({ children, variant = 'primary', size = 'md', disabled = false, onClick, style = {}, className = '', isActive = false, ...props }) => {
|
|
4
|
+
export const Button = ({ children, variant = 'primary', size = 'md', disabled = false, onClick, style = {}, className = '', isActive = false, startIcon, endIcon, ...props }) => {
|
|
5
5
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
6
6
|
const getVariantStyles = () => {
|
|
7
7
|
switch (variant) {
|
|
@@ -19,7 +19,7 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
19
19
|
return {
|
|
20
20
|
backgroundColor: tokens.color.white,
|
|
21
21
|
color: tokens.color.danger,
|
|
22
|
-
border: `1px solid
|
|
22
|
+
border: `1px solid ${tokens.color.dangerBg}`,
|
|
23
23
|
boxShadow: tokens.shadow.sm,
|
|
24
24
|
hoverBg: tokens.color.danger,
|
|
25
25
|
hoverColor: tokens.color.white,
|
|
@@ -50,9 +50,10 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
50
50
|
return {
|
|
51
51
|
backgroundColor: tokens.color.white,
|
|
52
52
|
color: tokens.color.primary,
|
|
53
|
-
border: `1px solid ${tokens.color.
|
|
53
|
+
border: `1px solid ${tokens.color.primary}33`, // Subtle transparent border
|
|
54
54
|
boxShadow: tokens.shadow.sm,
|
|
55
55
|
hoverBg: tokens.color.primary,
|
|
56
|
+
gradient: `linear-gradient(135deg, ${tokens.color.primary}, ${tokens.color.primaryDark})`,
|
|
56
57
|
hoverColor: tokens.color.white,
|
|
57
58
|
hoverBorder: tokens.color.primary,
|
|
58
59
|
};
|
|
@@ -61,12 +62,24 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
61
62
|
const getSizeStyles = () => {
|
|
62
63
|
switch (size) {
|
|
63
64
|
case 'sm':
|
|
64
|
-
return {
|
|
65
|
+
return {
|
|
66
|
+
padding: `${tokens.spacing[1.5]} ${tokens.spacing[4]}`,
|
|
67
|
+
fontSize: '12px',
|
|
68
|
+
height: '32px'
|
|
69
|
+
};
|
|
65
70
|
case 'lg':
|
|
66
|
-
return {
|
|
71
|
+
return {
|
|
72
|
+
padding: `${tokens.spacing[4]} ${tokens.spacing[10]}`,
|
|
73
|
+
fontSize: tokens.font.md,
|
|
74
|
+
height: '52px'
|
|
75
|
+
};
|
|
67
76
|
case 'md':
|
|
68
77
|
default:
|
|
69
|
-
return {
|
|
78
|
+
return {
|
|
79
|
+
padding: `${tokens.spacing[2.5]} ${tokens.spacing[6]}`,
|
|
80
|
+
fontSize: tokens.font.sm,
|
|
81
|
+
height: '42px'
|
|
82
|
+
};
|
|
70
83
|
}
|
|
71
84
|
};
|
|
72
85
|
const vStyles = getVariantStyles();
|
|
@@ -74,8 +87,8 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
74
87
|
const isAppliedHover = !disabled && (isHovered || isActive);
|
|
75
88
|
const baseStyle = {
|
|
76
89
|
fontFamily: tokens.font.family,
|
|
77
|
-
fontWeight: tokens.font.
|
|
78
|
-
borderRadius: tokens.radius.
|
|
90
|
+
fontWeight: tokens.font.weightSemibold,
|
|
91
|
+
borderRadius: tokens.radius.lg,
|
|
79
92
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
80
93
|
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
81
94
|
display: 'inline-flex',
|
|
@@ -83,15 +96,18 @@ export const Button = ({ children, variant = 'primary', size = 'md', disabled =
|
|
|
83
96
|
justifyContent: 'center',
|
|
84
97
|
gap: tokens.spacing[2],
|
|
85
98
|
outline: 'none',
|
|
86
|
-
|
|
87
|
-
|
|
99
|
+
userSelect: 'none',
|
|
100
|
+
opacity: disabled ? 0.5 : 1,
|
|
101
|
+
backgroundColor: isAppliedHover && variant === 'primary' ? undefined : (isAppliedHover ? vStyles.hoverBg : vStyles.backgroundColor),
|
|
102
|
+
backgroundImage: isAppliedHover && variant === 'primary' ? vStyles.gradient : 'none',
|
|
88
103
|
color: isAppliedHover ? vStyles.hoverColor : vStyles.color,
|
|
89
104
|
border: isAppliedHover ? vStyles.hoverBorder : vStyles.border,
|
|
90
105
|
boxShadow: isAppliedHover ? tokens.shadow.md : vStyles.boxShadow,
|
|
91
106
|
transform: isAppliedHover ? 'translateY(-1px)' : 'translateY(0)',
|
|
107
|
+
whiteSpace: 'nowrap',
|
|
92
108
|
...sStyles,
|
|
93
109
|
...style,
|
|
94
110
|
};
|
|
95
|
-
return (
|
|
111
|
+
return (_jsxs("button", { style: baseStyle, className: className, disabled: disabled, onClick: disabled ? undefined : onClick, onMouseEnter: () => !disabled && setIsHovered(true), onMouseLeave: () => !disabled && setIsHovered(false), ...props, children: [startIcon && _jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: startIcon }), children, endIcon && _jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: endIcon })] }));
|
|
96
112
|
};
|
|
97
113
|
//# sourceMappingURL=Button.js.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,11 @@ import React from 'react';
|
|
|
2
2
|
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
3
|
title?: React.ReactNode;
|
|
4
4
|
subtitle?: React.ReactNode;
|
|
5
|
+
avatar?: React.ReactNode;
|
|
6
|
+
headerAction?: React.ReactNode;
|
|
5
7
|
footer?: React.ReactNode;
|
|
6
8
|
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
-
variant?: 'default' | '
|
|
9
|
+
variant?: 'default' | 'flat' | 'outlined';
|
|
10
|
+
hoverable?: boolean;
|
|
8
11
|
}
|
|
9
12
|
export declare const Card: React.FC<CardProps>;
|
|
@@ -1,41 +1,66 @@
|
|
|
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 = 'lg', variant = 'default', ...props }) => {
|
|
3
|
+
export const Card = ({ children, title, subtitle, avatar, headerAction, footer, className = '', style = {}, padding = 'lg', variant = 'default', hoverable = false, ...props }) => {
|
|
4
4
|
const getPadding = () => {
|
|
5
5
|
switch (padding) {
|
|
6
6
|
case 'none': return '0';
|
|
7
|
-
case 'sm': return tokens.spacing[
|
|
8
|
-
case 'md': return tokens.spacing[
|
|
7
|
+
case 'sm': return tokens.spacing[3];
|
|
8
|
+
case 'md': return tokens.spacing[4];
|
|
9
|
+
case 'lg': return tokens.spacing[6];
|
|
9
10
|
case 'xl': return tokens.spacing[10];
|
|
10
|
-
|
|
11
|
-
default: return tokens.spacing[8];
|
|
11
|
+
default: return tokens.spacing[6];
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
const containerStyle = {
|
|
15
|
-
backgroundColor:
|
|
16
|
-
borderRadius: tokens.radius
|
|
17
|
-
border: variant === '
|
|
18
|
-
boxShadow: variant === 'default'
|
|
15
|
+
backgroundColor: tokens.color.surface,
|
|
16
|
+
borderRadius: tokens.radius.xl,
|
|
17
|
+
border: variant === 'outlined' ? `1px solid ${tokens.color.slate200}` : `1px solid ${tokens.color.slate100}`,
|
|
18
|
+
boxShadow: variant === 'default' ? tokens.shadow.md : 'none',
|
|
19
19
|
overflow: 'hidden',
|
|
20
20
|
display: 'flex',
|
|
21
21
|
flexDirection: 'column',
|
|
22
|
+
transition: tokens.transition.normal,
|
|
23
|
+
cursor: hoverable ? 'pointer' : 'default',
|
|
22
24
|
...style
|
|
23
25
|
};
|
|
26
|
+
const headerStyle = {
|
|
27
|
+
padding: `${tokens.spacing[4]} ${getPadding()}`,
|
|
28
|
+
borderBottom: `1px solid ${tokens.color.slate100}`,
|
|
29
|
+
display: 'flex',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
gap: tokens.spacing[3],
|
|
32
|
+
backgroundColor: tokens.color.white,
|
|
33
|
+
};
|
|
24
34
|
const bodyStyle = {
|
|
25
35
|
padding: getPadding(),
|
|
26
36
|
flex: 1
|
|
27
37
|
};
|
|
28
|
-
const headerStyle = {
|
|
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',
|
|
33
|
-
};
|
|
34
38
|
const footerStyle = {
|
|
35
|
-
padding: `${tokens.spacing[
|
|
36
|
-
borderTop: `1px solid ${tokens.color.
|
|
39
|
+
padding: `${tokens.spacing[4]} ${getPadding()}`,
|
|
40
|
+
borderTop: `1px solid ${tokens.color.slate100}`,
|
|
37
41
|
backgroundColor: tokens.color.slate50,
|
|
38
42
|
};
|
|
39
|
-
return (_jsxs("div", { style: containerStyle, className:
|
|
43
|
+
return (_jsxs("div", { style: containerStyle, className: `ds-card ${className}`, ...props, onMouseEnter: (e) => {
|
|
44
|
+
if (hoverable && variant === 'default') {
|
|
45
|
+
e.currentTarget.style.boxShadow = tokens.shadow.lg;
|
|
46
|
+
e.currentTarget.style.transform = 'translateY(-2px)';
|
|
47
|
+
}
|
|
48
|
+
}, onMouseLeave: (e) => {
|
|
49
|
+
if (hoverable && variant === 'default') {
|
|
50
|
+
e.currentTarget.style.boxShadow = tokens.shadow.md;
|
|
51
|
+
e.currentTarget.style.transform = 'translateY(0)';
|
|
52
|
+
}
|
|
53
|
+
}, children: [(title || subtitle || avatar || headerAction) && (_jsxs("div", { style: headerStyle, children: [avatar && _jsx("div", { children: avatar }), _jsxs("div", { style: { flex: 1 }, children: [title && (_jsx("h3", { style: {
|
|
54
|
+
margin: 0,
|
|
55
|
+
fontSize: tokens.font.sm,
|
|
56
|
+
fontWeight: tokens.font.weightBold,
|
|
57
|
+
color: tokens.color.slate800,
|
|
58
|
+
letterSpacing: '-0.01em'
|
|
59
|
+
}, children: title })), subtitle && (_jsx("p", { style: {
|
|
60
|
+
margin: `${tokens.spacing[0.5]} 0 0 0`,
|
|
61
|
+
fontSize: '11px',
|
|
62
|
+
color: tokens.color.textMuted,
|
|
63
|
+
fontWeight: tokens.font.weightMedium
|
|
64
|
+
}, children: subtitle }))] }), headerAction && _jsx("div", { children: headerAction })] })), _jsx("div", { style: bodyStyle, children: children }), footer && (_jsx("div", { style: footerStyle, children: footer }))] }));
|
|
40
65
|
};
|
|
41
66
|
//# 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":"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"}
|