cynx-ui 1.2.45 → 1.2.47
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 +12 -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) {
|
|
@@ -98,6 +98,16 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
|
|
|
98
98
|
return () => document.removeEventListener('mousedown', close, true);
|
|
99
99
|
}, [open]);
|
|
100
100
|
|
|
101
|
+
const [stepperPosState, setStepperPosState] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
|
|
102
|
+
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
function onPosChanged() {
|
|
105
|
+
setStepperPosState(typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
|
|
106
|
+
}
|
|
107
|
+
window.addEventListener('datepicker-pos-changed', onPosChanged);
|
|
108
|
+
return () => window.removeEventListener('datepicker-pos-changed', onPosChanged);
|
|
109
|
+
}, []);
|
|
110
|
+
|
|
101
111
|
// Sync cursor when value changes externally
|
|
102
112
|
useEffect(() => {
|
|
103
113
|
const d = toDate(value);
|
|
@@ -375,7 +385,8 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
|
|
|
375
385
|
</button>
|
|
376
386
|
);
|
|
377
387
|
|
|
378
|
-
const
|
|
388
|
+
const savedPos = stepperPosState || (typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
|
|
389
|
+
const actualPos = stepperPosition || savedPos || 'around';
|
|
379
390
|
const showStepperEffective = showStepper && actualPos !== 'off';
|
|
380
391
|
const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
|
|
381
392
|
: actualPos === 'right' || actualPos === 'end' ? 'right'
|