cynx-ui 1.3.1 → 1.3.3

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/components/DatePicker.jsx +16 -9
  2. package/components/TimePicker.jsx +33 -27
  3. package/package.json +1 -1
package/components/DatePicker.jsx CHANGED
@@ -42,7 +42,7 @@ function isSameDay(a, b) {
42
42
  }
43
43
  function isToday(y, m, d) { const t = new Date(); return t.getFullYear()===y && t.getMonth()===m && t.getDate()===d; }
44
44
 
45
- export function DatePicker({ value, onChange, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition, style }) {
45
+ export function DatePicker({ value, onChange, label, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition, style }) {
46
46
  const [open, setOpen] = useState(false);
47
47
  const [view, setView] = useState('day'); // 'day' | 'month' | 'year'
48
48
  const [cursor, setCursor] = useState(() => toDate(value) || new Date());
@@ -393,16 +393,23 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
393
393
  : 'around';
394
394
 
395
395
  return (
396
- <div ref={ref} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4, ...style }}>
397
- {showStepperEffective && posMode === 'around' && renderPrevBtn()}
398
- {showStepperEffective && posMode === 'left' && renderPrevBtn()}
399
- {showStepperEffective && posMode === 'left' && renderNextBtn()}
396
+ <div style={{ display: 'inline-flex', flexDirection: 'column', position: 'relative', width: style?.width || 'auto', boxSizing: 'border-box', minWidth: 0, ...style }}>
397
+ {label && (
398
+ <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}>
399
+ {label}
400
+ </label>
401
+ )}
402
+ <div ref={ref} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4, width: '100%' }}>
403
+ {showStepperEffective && posMode === 'around' && renderPrevBtn()}
404
+ {showStepperEffective && posMode === 'left' && renderPrevBtn()}
405
+ {showStepperEffective && posMode === 'left' && renderNextBtn()}
400
406
 
401
- {renderTriggerBtn()}
407
+ {renderTriggerBtn()}
402
408
 
403
- {showStepperEffective && posMode === 'around' && renderNextBtn()}
404
- {showStepperEffective && posMode === 'right' && renderPrevBtn()}
405
- {showStepperEffective && posMode === 'right' && renderNextBtn()}
409
+ {showStepperEffective && posMode === 'around' && renderNextBtn()}
410
+ {showStepperEffective && posMode === 'right' && renderPrevBtn()}
411
+ {showStepperEffective && posMode === 'right' && renderNextBtn()}
412
+ </div>
406
413
 
407
414
  {/* Dropdown via portal */}
408
415
  {open && createPortal(
package/components/TimePicker.jsx CHANGED
@@ -39,7 +39,7 @@ const STYLES = `
39
39
  }
40
40
 
41
41
  .cynx-timepicker-cell:hover {
42
- background-color: var(--grey-1, var(--surface-hover));
42
+ background-color: var(--hover-bg, var(--grey-1, #f5f5f8));
43
43
  }
44
44
 
45
45
  .cynx-timepicker-stepper-btn {
@@ -48,22 +48,22 @@ const STYLES = `
48
48
  justify-content: center;
49
49
  width: 100%;
50
50
  height: 28px;
51
- border-radius: var(--rads, 6px);
52
- border: 1px solid var(--border-light, var(--border));
53
- background: var(--grey-1, var(--surface-hover));
54
- color: var(--fg, var(--t1));
51
+ border-radius: var(--rads, 8px);
52
+ border: 1px solid var(--bd, var(--border, #d7d8e0));
53
+ background: var(--grey-1, #f5f5f8);
54
+ color: var(--t1, var(--primary-text, #1a1a2e));
55
55
  cursor: pointer;
56
56
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
57
57
  }
58
58
 
59
59
  .cynx-timepicker-stepper-btn:hover {
60
- background: var(--surface, var(--bg));
61
- border-color: var(--accent, var(--blue));
62
- color: var(--accent, var(--blue));
60
+ background: var(--surface, #ffffff);
61
+ border-color: var(--accent);
62
+ color: var(--accent);
63
63
  }
64
64
 
65
65
  .cynx-timepicker-stepper-btn:active {
66
- background: var(--accent-bg, rgba(37,99,235,0.08));
66
+ background: var(--accent-bg, rgba(249,158,44,0.08));
67
67
  }
68
68
  `;
69
69
 
@@ -505,10 +505,12 @@ export function TimePicker({
505
505
  closePicker();
506
506
  };
507
507
 
508
- const defaultPlaceholder = mode === '12h' && showPlaceholder
509
- ? (showSeconds ? 'hh:mm:ss AM' : 'hh:mm AM')
510
- : (showSeconds ? 'HH:MM:SS' : 'HH:MM');
511
- const ph = placeholder || defaultPlaceholder;
508
+ const defaultPlaceholder = showPlaceholder
509
+ ? (mode === '12h'
510
+ ? (showSeconds ? 'hh:mm:ss AM' : 'hh:mm AM')
511
+ : (showSeconds ? 'HH:MM:SS' : 'HH:MM'))
512
+ : '';
513
+ const ph = placeholder !== undefined ? placeholder : defaultPlaceholder;
512
514
 
513
515
  const hours24List = Array.from({ length: 24 }, (_, i) => i);
514
516
  const hours12List = Array.from({ length: 12 }, (_, i) => i + 1);
@@ -551,7 +553,7 @@ export function TimePicker({
551
553
  display: 'flex',
552
554
  alignItems: 'center',
553
555
  justifyContent: 'center',
554
- color: open ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
556
+ color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
555
557
  zIndex: 1,
556
558
  transition: 'color .15s ease',
557
559
  }}
@@ -580,19 +582,23 @@ export function TimePicker({
580
582
  height: inputHeight,
581
583
  paddingLeft: displayClockIcon ? 28 : 10,
582
584
  paddingRight: 26,
583
- border: `1px solid ${open ? 'var(--accent, var(--blue))' : 'var(--border-light, var(--border))'}`,
584
- borderRadius: 'var(--rads, 6px)',
585
+ border: `1px solid ${open ? 'var(--accent)' : 'var(--bd, var(--border, #d7d8e0))'}`,
586
+ borderRadius: 'var(--rads, 8px)',
585
587
  fontSize: fontSize,
586
- background: disabled ? 'var(--grey-1, var(--surface-hover))' : 'var(--bg, var(--surface))',
587
- color: 'var(--fg, var(--t1, var(--primary-text)))',
588
+ background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, var(--surface, #ffffff))',
589
+ color: 'var(--t1, var(--primary-text, #1a1a2e))',
588
590
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
589
591
  letterSpacing: '0.03em',
590
592
  fontWeight: 600,
591
593
  fontVariantNumeric: 'tabular-nums',
592
594
  textAlign: 'left',
593
595
  outline: 'none',
594
- boxShadow: open ? 'var(--pd, rgba(37, 99, 235, 0.12))' : 'var(--shadow, none)',
595
- transition: 'all .15s cubic-bezier(.16,1,.3,1)',
596
+ boxShadow: open
597
+ ? 'var(--pd, rgba(249,158,44,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
598
+ : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
599
+ opacity: disabled ? 0.5 : 1,
600
+ cursor: disabled ? 'not-allowed' : undefined,
601
+ transition: 'border-color .14s, box-shadow .14s',
596
602
  }}
597
603
  />
598
604
 
@@ -606,15 +612,15 @@ export function TimePicker({
606
612
  background: 'none',
607
613
  border: 'none',
608
614
  cursor: 'pointer',
609
- color: 'var(--muted, var(--t2))',
615
+ color: 'var(--t2, var(--muted, #9b9daa))',
610
616
  padding: 2,
611
617
  display: 'flex',
612
618
  alignItems: 'center',
613
619
  justifyContent: 'center',
614
620
  transition: 'color .14s ease',
615
621
  }}
616
- onMouseEnter={e => e.currentTarget.style.color = 'var(--danger)'}
617
- onMouseLeave={e => e.currentTarget.style.color = 'var(--muted, var(--t2))'}
622
+ onMouseEnter={e => e.currentTarget.style.color = 'var(--danger, #f64747)'}
623
+ onMouseLeave={e => e.currentTarget.style.color = 'var(--t2, var(--muted, #9b9daa))'}
618
624
  >
619
625
  <X size={13} />
620
626
  </button>
@@ -622,7 +628,7 @@ export function TimePicker({
622
628
  <ChevronDown
623
629
  size={13}
624
630
  style={{
625
- color: open ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
631
+ color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
626
632
  transform: open ? 'rotate(180deg)' : 'none',
627
633
  transition: 'transform .2s ease, color .15s ease',
628
634
  pointerEvents: 'none',
@@ -642,10 +648,10 @@ export function TimePicker({
642
648
  top: pos.top,
643
649
  left: pos.left,
644
650
  zIndex: 999999,
645
- background: 'var(--surface, var(--bg))',
646
- border: '1px solid var(--border-light, var(--border))',
651
+ background: 'var(--surface, #ffffff)',
652
+ border: '1px solid var(--border, var(--bd, #d7d8e0))',
647
653
  borderRadius: 'var(--rad, 10px)',
648
- boxShadow: 'var(--shadow-lg, var(--shadow))',
654
+ boxShadow: 'var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15))',
649
655
  padding: 10,
650
656
  width: mode === '12h' ? 290 : 240,
651
657
  maxWidth: 'calc(100vw - 24px)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cynx-ui",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.js"