cynx-ui 1.2.38 → 1.2.39
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/components/Badge.jsx +33 -2
- package/package.json +1 -1
package/components/Badge.jsx
CHANGED
|
@@ -41,8 +41,9 @@ function ensureStyles() {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
const SIZE_MAP = {
|
|
44
|
+
xs: { padding: '1.5px 6px', fontSize: '9px' },
|
|
44
45
|
sm: { padding: '2px 7px', fontSize: '10px' },
|
|
45
|
-
md: { padding: '3px 9px', fontSize: '
|
|
46
|
+
md: { padding: '3px 9px', fontSize: '11px' },
|
|
46
47
|
lg: { padding: '4px 12px', fontSize: '12px' },
|
|
47
48
|
};
|
|
48
49
|
|
|
@@ -53,9 +54,31 @@ const SHAPE_STYLE = {
|
|
|
53
54
|
semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
|
|
54
55
|
};
|
|
55
56
|
|
|
57
|
+
const COLOR_MAP = {
|
|
58
|
+
green: '#10b981', passed: '#10b981', ok: '#10b981',
|
|
59
|
+
yellow: '#f97316', violation: '#f97316', warn: '#f97316', amber: '#f97316', orange: '#f97316',
|
|
60
|
+
red: '#ef4444', failed: '#ef4444', err: '#ef4444', danger: '#ef4444',
|
|
61
|
+
blue: '#3b82f6', conditional: '#3b82f6',
|
|
62
|
+
purple: '#8b5cf6',
|
|
63
|
+
indigo: '#6366f1',
|
|
64
|
+
cyan: '#06b6d4',
|
|
65
|
+
teal: '#14b8a6',
|
|
66
|
+
pink: '#ec4899',
|
|
67
|
+
grey: '#6b7280', gray: '#6b7280', dim: '#6b7280',
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
function resolveBadgeColor(cStr) {
|
|
71
|
+
if (!cStr) return null;
|
|
72
|
+
const c = cStr.toLowerCase();
|
|
73
|
+
if (COLOR_MAP[c]) return COLOR_MAP[c];
|
|
74
|
+
if (c.startsWith('#') || c.startsWith('rgb') || c.startsWith('hsl') || c.startsWith('var(')) return cStr;
|
|
75
|
+
return '#3b82f6';
|
|
76
|
+
}
|
|
77
|
+
|
|
56
78
|
export default function Badge({
|
|
57
79
|
children,
|
|
58
80
|
variant = 'dim',
|
|
81
|
+
color = null,
|
|
59
82
|
size = 'md',
|
|
60
83
|
dot = false,
|
|
61
84
|
shape = null,
|
|
@@ -69,7 +92,14 @@ export default function Badge({
|
|
|
69
92
|
const v = VARIANTS[variant] || VARIANTS.dim;
|
|
70
93
|
const sz = SIZE_MAP[size] || SIZE_MAP.md;
|
|
71
94
|
const shapeType = (shape === 'none' || shape === false) ? null : (shape || SHAPES[variant] || null);
|
|
72
|
-
|
|
95
|
+
|
|
96
|
+
const customHex = resolveBadgeColor(color);
|
|
97
|
+
const colorStyle = customHex ? {
|
|
98
|
+
color: customHex,
|
|
99
|
+
background: `${customHex}18`,
|
|
100
|
+
border: `1px solid ${customHex}33`,
|
|
101
|
+
} : {};
|
|
102
|
+
const dotColor = customHex || v.dot || v.color;
|
|
73
103
|
|
|
74
104
|
return (
|
|
75
105
|
<span
|
|
@@ -88,6 +118,7 @@ export default function Badge({
|
|
|
88
118
|
whiteSpace: 'nowrap',
|
|
89
119
|
transition: 'all .15s',
|
|
90
120
|
cursor: onClick ? 'pointer' : undefined,
|
|
121
|
+
...colorStyle,
|
|
91
122
|
...style,
|
|
92
123
|
}}
|
|
93
124
|
onClick={onClick}
|