cynx-ui 1.2.44 → 1.2.45
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 +49 -25
- package/components/DatePicker.jsx +1 -1
- package/package.json +1 -1
package/components/Badge.jsx
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
const VARIANTS = {
|
|
2
|
-
ok:
|
|
3
|
-
err:
|
|
4
|
-
warn:
|
|
5
|
-
blue:
|
|
6
|
-
dim:
|
|
7
|
-
purple:
|
|
8
|
-
teal:
|
|
9
|
-
pink:
|
|
10
|
-
ghost:
|
|
11
|
-
paid:
|
|
2
|
+
ok: { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'var(--sd, rgba(39,174,96,.2))', dot: 'var(--success,#27ae60)' },
|
|
3
|
+
err: { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'var(--dd, rgba(246,71,71,.2))', dot: 'var(--danger,#f64747)' },
|
|
4
|
+
warn: { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
|
|
5
|
+
blue: { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'var(--infd, rgba(39,130,228,.2))', dot: 'var(--blue,#2782e4)' },
|
|
6
|
+
dim: { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
|
|
7
|
+
purple: { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
|
|
8
|
+
teal: { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
|
|
9
|
+
pink: { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
|
|
10
|
+
ghost: { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
|
|
11
|
+
paid: { bg: 'var(--pd, rgba(30,41,59,.08))', color: 'var(--t, #1e293b)', border: 'var(--accent-border, rgba(30,41,59,.15))', dot: 'var(--t, #1e293b)' },
|
|
12
12
|
invoiced: { bg: 'rgba(120,120,130,.08)', color: 'var(--t2, #787882)', border: 'rgba(120,120,130,.15)', dot: 'var(--t2, #787882)' },
|
|
13
13
|
verified: { bg: 'var(--sd, rgba(34,197,94,.08))', color: 'var(--s, #22c55e)', border: 'var(--sd, rgba(34,197,94,.15))', dot: 'var(--s, #22c55e)' },
|
|
14
|
-
partial:
|
|
15
|
-
deleted:
|
|
16
|
-
update:
|
|
17
|
-
ready:
|
|
18
|
-
new:
|
|
19
|
-
active:
|
|
14
|
+
partial: { bg: 'rgba(100,100,110,.08)', color: '#64646e', border: 'rgba(100,100,110,.15)', dot: '#64646e' },
|
|
15
|
+
deleted: { bg: 'var(--dd, rgba(239,68,68,.08))', color: 'var(--d, #ef4444)', border: 'var(--dd, rgba(239,68,68,.15))', dot: 'var(--d, #ef4444)' },
|
|
16
|
+
update: { bg: 'var(--wd, rgba(249,115,22,.08))', color: 'var(--w, #f97316)', border: 'var(--wd, rgba(249,115,22,.15))', dot: 'var(--w, #f97316)' },
|
|
17
|
+
ready: { bg: 'var(--wd, rgba(234,179,8,.08))', color: 'var(--w, #eab308)', border: 'var(--wd, rgba(234,179,8,.15))', dot: 'var(--w, #eab308)' },
|
|
18
|
+
new: { bg: 'var(--infd, rgba(59,130,246,.08))', color: 'var(--inf, #3b82f6)', border: 'var(--infd, rgba(59,130,246,.15))', dot: 'var(--inf, #3b82f6)' },
|
|
19
|
+
active: { bg: 'transparent', color: 'var(--s, #22c55e)', border: 'none', dot: 'var(--s, #22c55e)', noPad: true },
|
|
20
20
|
inactive: { bg: 'transparent', color: 'var(--d, #ef4444)', border: 'none', dot: 'var(--d, #ef4444)', noPad: true },
|
|
21
|
-
pending:
|
|
21
|
+
pending: { bg: 'transparent', color: 'var(--w, #d97706)', border: 'none', dot: 'var(--w, #d97706)', noPad: true, pulse: true },
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
const SHAPES = {
|
|
@@ -48,23 +48,47 @@ const SIZE_MAP = {
|
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
const SHAPE_STYLE = {
|
|
51
|
-
circle:
|
|
51
|
+
circle: (c) => ({ width: 7, height: 7, borderRadius: '50%', background: c, border: 'none' }),
|
|
52
52
|
triangle: (c) => ({ width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderBottom: `7px solid ${c}`, background: 'none', borderTop: 'none' }),
|
|
53
|
-
diamond:
|
|
54
|
-
semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
|
|
53
|
+
diamond: (c) => ({ width: 7, height: 7, borderRadius: 1, transform: 'rotate(45deg)', background: c, border: 'none' }),
|
|
54
|
+
semicircle: (c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
|
|
55
55
|
};
|
|
56
56
|
|
|
57
57
|
const COLOR_MAP = {
|
|
58
|
-
green: '#10b981',
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
green: '#10b981',
|
|
59
|
+
passed: '#10b981',
|
|
60
|
+
ok: '#10b981',
|
|
61
|
+
success: '#10b981',
|
|
62
|
+
emerald: '#10b981',
|
|
63
|
+
yellow: '#f59e0b',
|
|
64
|
+
violation: '#f97316',
|
|
65
|
+
warn: '#f97316',
|
|
66
|
+
warning: '#f97316',
|
|
67
|
+
amber: '#f59e0b',
|
|
68
|
+
orange: '#f97316',
|
|
69
|
+
medium: '#f59e0b',
|
|
70
|
+
red: '#ef4444',
|
|
71
|
+
failed: '#ef4444',
|
|
72
|
+
err: '#ef4444',
|
|
73
|
+
danger: '#ef4444',
|
|
74
|
+
error: '#ef4444',
|
|
75
|
+
high: '#ef4444',
|
|
76
|
+
critical: '#ef4444',
|
|
77
|
+
blue: '#3b82f6',
|
|
78
|
+
conditional: '#3b82f6',
|
|
79
|
+
info: '#3b82f6',
|
|
80
|
+
low: '#3b82f6',
|
|
81
|
+
sky: '#0284c7',
|
|
62
82
|
purple: '#8b5cf6',
|
|
83
|
+
violet: '#8b5cf6',
|
|
63
84
|
indigo: '#6366f1',
|
|
64
85
|
cyan: '#06b6d4',
|
|
65
86
|
teal: '#14b8a6',
|
|
66
87
|
pink: '#ec4899',
|
|
67
|
-
|
|
88
|
+
rose: '#f43f5e',
|
|
89
|
+
grey: '#6b7280',
|
|
90
|
+
gray: '#6b7280',
|
|
91
|
+
dim: '#6b7280',
|
|
68
92
|
};
|
|
69
93
|
|
|
70
94
|
function resolveBadgeColor(cStr) {
|
|
@@ -375,7 +375,7 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
|
|
|
375
375
|
</button>
|
|
376
376
|
);
|
|
377
377
|
|
|
378
|
-
const actualPos = stepperPosition ||
|
|
378
|
+
const actualPos = stepperPosition || 'around';
|
|
379
379
|
const showStepperEffective = showStepper && actualPos !== 'off';
|
|
380
380
|
const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
|
|
381
381
|
: actualPos === 'right' || actualPos === 'end' ? 'right'
|