cynx-lib 1.3.97 → 1.3.98

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/ui/components/DatePicker.jsx +14 -14
  3. package/vue/components/DatePicker.vue +9 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cynx-lib",
3
- "version": "1.3.97",
3
+ "version": "1.3.98",
4
4
  "type": "module",
5
5
  "main": "./index.cjs",
6
6
  "module": "./index.js",
package/ui/components/DatePicker.jsx CHANGED
@@ -8,7 +8,7 @@ import { TimePicker } from './TimePicker.jsx';
8
8
  // value – Date object or null
9
9
  // onChange – called with Date object
10
10
  // placeholder – string shown when no date selected
11
- // badges – object { 'YYYY-MM-DD': { dot: true, color: 'var(--accent, #f99e2c)' } } for day badges
11
+ // badges – object { 'YYYY-MM-DD': { dot: true, color: 'var(--accent, #18181b)' } } for day badges
12
12
  // minDate – Date object, days before this are disabled
13
13
  // maxDate – Date object, days after this are disabled
14
14
  // disabled – boolean
@@ -537,9 +537,9 @@ export function DatePicker({
537
537
  cursor: dis ? 'not-allowed' : 'pointer',
538
538
  borderRadius: getRangeRadius(date),
539
539
  background: (range ? isRangeEndpoint(date) : false)
540
- ? 'var(--accent, #f99e2c)'
540
+ ? 'var(--accent, #18181b)'
541
541
  : isRangeBetween(date)
542
- ? 'rgba(18, 103, 93, 0.14)'
542
+ ? 'var(--accent-bg, rgba(24, 24, 27, 0.08))'
543
543
  : 'transparent',
544
544
  transition: 'background .12s',
545
545
  opacity: dis ? 0.35 : 0.7,
@@ -567,12 +567,12 @@ export function DatePicker({
567
567
  fontSize: '.8rem', fontWeight: sel ? 700 : today ? 600 : 400,
568
568
  borderRadius: getRangeRadius(date), cursor: dis ? 'not-allowed' : 'pointer',
569
569
  background: sel
570
- ? 'var(--accent, #12675D)'
570
+ ? 'var(--accent, #18181b)'
571
571
  : isRangeBetween(date)
572
- ? 'rgba(18, 103, 93, 0.14)'
572
+ ? 'var(--accent-bg, rgba(24, 24, 27, 0.08))'
573
573
  : 'transparent',
574
- color: sel ? '#ffffff' : dis ? 'var(--border, #e2e8f0)' : today ? 'var(--accent, #12675D)' : 'var(--primary-text, #0f172a)',
575
- border: today && !sel ? '1.5px solid var(--accent, #12675D)' : '1.5px solid transparent',
574
+ color: sel ? '#ffffff' : dis ? 'var(--border, #e2e8f0)' : today ? 'var(--accent, #18181b)' : 'var(--primary-text, #0f172a)',
575
+ border: today && !sel ? '1.5px solid var(--accent, #18181b)' : '1.5px solid transparent',
576
576
  transition: 'background .12s, color .12s',
577
577
  opacity: dis ? 0.35 : 1,
578
578
  }}
@@ -582,7 +582,7 @@ export function DatePicker({
582
582
  <span style={{
583
583
  position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)',
584
584
  width: 4, height: 4, borderRadius: '50%',
585
- background: badge.color || 'var(--accent, #12675D)',
585
+ background: badge.color || 'var(--accent, #18181b)',
586
586
  }} />
587
587
  )}
588
588
  </div>
@@ -638,7 +638,7 @@ export function DatePicker({
638
638
  fontWeight: 600,
639
639
  cursor: dis ? 'not-allowed' : 'pointer',
640
640
  opacity: dis ? 0.35 : 1,
641
- background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
641
+ background: sel ? 'var(--accent, #18181b)' : 'transparent',
642
642
  color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : 'var(--primary-text, #0f172a)',
643
643
  transition: 'background .12s',
644
644
  }}
@@ -702,7 +702,7 @@ export function DatePicker({
702
702
  fontWeight: 600,
703
703
  cursor: dis ? 'not-allowed' : 'pointer',
704
704
  opacity: dis ? 0.35 : 1,
705
- background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
705
+ background: sel ? 'var(--accent, #18181b)' : 'transparent',
706
706
  color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : 'var(--primary-text, #0f172a)',
707
707
  transition: 'background .12s',
708
708
  }}
@@ -771,7 +771,7 @@ export function DatePicker({
771
771
  flexShrink: 0
772
772
  }}
773
773
  title="Previous day (-1)"
774
- onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
774
+ onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #18181b)'; e.currentTarget.style.color = 'var(--accent, #18181b)'; } }}
775
775
  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
776
776
  >
777
777
  <ChevronLeft size={s.iconSize + 2} />
@@ -795,7 +795,7 @@ export function DatePicker({
795
795
  flexShrink: 0
796
796
  }}
797
797
  title="Next day (+1)"
798
- onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
798
+ onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #18181b)'; e.currentTarget.style.color = 'var(--accent, #18181b)'; } }}
799
799
  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
800
800
  >
801
801
  <ChevronRight size={s.iconSize + 2} />
@@ -814,7 +814,7 @@ export function DatePicker({
814
814
  whiteSpace: 'nowrap', minWidth: 0, flex: 1, height: s.height, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
815
815
  overflow: 'hidden'
816
816
  }}
817
- onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; }}
817
+ onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent, #18181b)'; }}
818
818
  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; }}>
819
819
  <Calendar size={s.iconSize} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
820
820
  <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
@@ -1018,7 +1018,7 @@ export function DatePicker({
1018
1018
  style={{
1019
1019
  padding: '4px 10px',
1020
1020
  borderRadius: 'var(--radxs, 6px)',
1021
- background: 'var(--accent, #f99e2c)',
1021
+ background: 'var(--accent, #18181b)',
1022
1022
  color: 'var(--def-btn-text, #ffffff)',
1023
1023
  border: 'none',
1024
1024
  fontSize: '11.5px',
package/vue/components/DatePicker.vue CHANGED
@@ -861,7 +861,7 @@ const isYearDisabled = (yr: number) => {
861
861
  cursor: disabled ? 'not-allowed' : 'pointer',
862
862
  opacity: disabled ? 0.5 : 1,
863
863
  color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
864
- borderColor: open ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)',
864
+ borderColor: open ? 'var(--accent, #18181b)' : 'var(--border, #e2e8f0)',
865
865
  }"
866
866
  @click="toggleOpen"
867
867
  >
@@ -1161,21 +1161,21 @@ const isYearDisabled = (yr: number) => {
1161
1161
  cursor: isCellDisabled(c.date) ? 'not-allowed' : 'pointer',
1162
1162
  opacity: isCellDisabled(c.date) ? 0.35 : c.cur ? 1 : 0.65,
1163
1163
  background: (props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal))
1164
- ? 'var(--accent, #12675D)'
1164
+ ? 'var(--accent, #18181b)'
1165
1165
  : isRangeBetween(c.date)
1166
- ? 'rgba(18, 103, 93, 0.14)'
1166
+ ? 'var(--accent-bg, rgba(24, 24, 27, 0.08))'
1167
1167
  : 'transparent',
1168
1168
  color: (props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal))
1169
1169
  ? '#ffffff'
1170
1170
  : isCellDisabled(c.date)
1171
1171
  ? 'var(--border, #e2e8f0)'
1172
1172
  : isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate())
1173
- ? 'var(--accent, #12675D)'
1173
+ ? 'var(--accent, #18181b)'
1174
1174
  : c.cur
1175
1175
  ? 'var(--primary-text, #0f172a)'
1176
1176
  : 'var(--muted, #797b8d)',
1177
1177
  border: isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate()) && !(props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal))
1178
- ? '1.5px solid var(--accent, #12675D)'
1178
+ ? '1.5px solid var(--accent, #18181b)'
1179
1179
  : '1.5px solid transparent',
1180
1180
  transition: 'background .12s, color .12s',
1181
1181
  }"
@@ -1193,7 +1193,7 @@ const isYearDisabled = (yr: number) => {
1193
1193
  width: '4px',
1194
1194
  height: '4px',
1195
1195
  borderRadius: '50%',
1196
- background: badges[toKey(c.date.getFullYear(), c.date.getMonth(), c.day)]?.color || 'var(--accent, #12675D)',
1196
+ background: badges[toKey(c.date.getFullYear(), c.date.getMonth(), c.day)]?.color || 'var(--accent, #18181b)',
1197
1197
  }"
1198
1198
  />
1199
1199
  </div>
@@ -1222,7 +1222,7 @@ const isYearDisabled = (yr: number) => {
1222
1222
  cursor: isMonthDisabled(idx) ? 'not-allowed' : 'pointer',
1223
1223
  opacity: isMonthDisabled(idx) ? 0.35 : 1,
1224
1224
  background: valDate && valDate.getFullYear() === cursor.getFullYear() && valDate.getMonth() === idx
1225
- ? 'var(--accent, #12675D)'
1225
+ ? 'var(--accent, #18181b)'
1226
1226
  : 'transparent',
1227
1227
  color: valDate && valDate.getFullYear() === cursor.getFullYear() && valDate.getMonth() === idx
1228
1228
  ? '#ffffff'
@@ -1277,7 +1277,7 @@ const isYearDisabled = (yr: number) => {
1277
1277
  fontWeight: 600,
1278
1278
  cursor: isYearDisabled(yr) ? 'not-allowed' : 'pointer',
1279
1279
  opacity: isYearDisabled(yr) ? 0.35 : 1,
1280
- background: valDate && valDate.getFullYear() === yr ? 'var(--accent, #12675D)' : 'transparent',
1280
+ background: valDate && valDate.getFullYear() === yr ? 'var(--accent, #18181b)' : 'transparent',
1281
1281
  color: valDate && valDate.getFullYear() === yr
1282
1282
  ? '#ffffff'
1283
1283
  : isYearDisabled(yr)
@@ -1352,7 +1352,7 @@ const isYearDisabled = (yr: number) => {
1352
1352
  style="
1353
1353
  padding: 4px 10px;
1354
1354
  border-radius: var(--radxs, 6px);
1355
- background: var(--accent, #12675D);
1355
+ background: var(--accent, #18181b);
1356
1356
  color: var(--def-btn-text, #ffffff);
1357
1357
  border: none;
1358
1358
  font-size: 11.5px;