cynx-ui 1.2.45 → 1.2.46
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 +27 -51
- package/components/DatePicker.jsx +2 -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,47 +48,23 @@ 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:
|
|
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
|
-
|
|
62
|
-
|
|
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',
|
|
82
|
-
purple: '#8b5cf6',
|
|
83
|
-
violet: '#8b5cf6',
|
|
58
|
+
green: '#10b981', passed: '#10b981', ok: '#10b981', success: '#10b981', emerald: '#10b981',
|
|
59
|
+
yellow: '#f59e0b', violation: '#f97316', warn: '#f97316', warning: '#f97316', amber: '#f59e0b', orange: '#f97316', medium: '#f59e0b',
|
|
60
|
+
red: '#ef4444', failed: '#ef4444', err: '#ef4444', danger: '#ef4444', error: '#ef4444', high: '#ef4444', critical: '#ef4444',
|
|
61
|
+
blue: '#3b82f6', conditional: '#3b82f6', info: '#3b82f6', low: '#3b82f6', sky: '#0284c7',
|
|
62
|
+
purple: '#8b5cf6', violet: '#8b5cf6',
|
|
84
63
|
indigo: '#6366f1',
|
|
85
64
|
cyan: '#06b6d4',
|
|
86
65
|
teal: '#14b8a6',
|
|
87
|
-
pink: '#ec4899',
|
|
88
|
-
|
|
89
|
-
grey: '#6b7280',
|
|
90
|
-
gray: '#6b7280',
|
|
91
|
-
dim: '#6b7280',
|
|
66
|
+
pink: '#ec4899', rose: '#f43f5e',
|
|
67
|
+
grey: '#6b7280', gray: '#6b7280', dim: '#6b7280',
|
|
92
68
|
};
|
|
93
69
|
|
|
94
70
|
function resolveBadgeColor(cStr) {
|
|
@@ -375,7 +375,8 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
|
|
|
375
375
|
</button>
|
|
376
376
|
);
|
|
377
377
|
|
|
378
|
-
const
|
|
378
|
+
const savedPos = typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null;
|
|
379
|
+
const actualPos = stepperPosition || savedPos || 'around';
|
|
379
380
|
const showStepperEffective = showStepper && actualPos !== 'off';
|
|
380
381
|
const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
|
|
381
382
|
: actualPos === 'right' || actualPos === 'end' ? 'right'
|