cynx-ui 1.3.2 → 1.3.4

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 +31 -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
 
@@ -519,8 +519,8 @@ export function TimePicker({
519
519
  const presets24 = ['00:00', '07:00', '08:00', '09:00', '12:00', '18:00', '23:00'];
520
520
  const presets12 = ['07:00 AM', '09:00 AM', '12:00 PM', '03:00 PM', '06:00 PM', '11:00 PM'];
521
521
 
522
- const inputHeight = size === 'sm' ? '32px' : '38px';
523
- const fontSize = size === 'sm' ? '.78rem' : '.85rem';
522
+ const inputHeight = size === 'xs' ? '24px' : (size === 'sm' ? '32px' : '38px');
523
+ const fontSize = size === 'xs' ? '.72rem' : (size === 'sm' ? '.78rem' : '.85rem');
524
524
 
525
525
  return (
526
526
  <div
@@ -553,7 +553,7 @@ export function TimePicker({
553
553
  display: 'flex',
554
554
  alignItems: 'center',
555
555
  justifyContent: 'center',
556
- color: open ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
556
+ color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
557
557
  zIndex: 1,
558
558
  transition: 'color .15s ease',
559
559
  }}
@@ -580,21 +580,25 @@ export function TimePicker({
580
580
  maxWidth: '100%',
581
581
  boxSizing: 'border-box',
582
582
  height: inputHeight,
583
- paddingLeft: displayClockIcon ? 28 : 10,
584
- paddingRight: 26,
585
- border: `1px solid ${open ? 'var(--accent, var(--blue))' : 'var(--border-light, var(--border))'}`,
586
- borderRadius: 'var(--rads, 6px)',
583
+ paddingLeft: displayClockIcon ? (size === 'xs' ? 22 : 28) : (size === 'xs' ? 6 : 10),
584
+ paddingRight: size === 'xs' ? 18 : 26,
585
+ border: `1px solid ${open ? 'var(--accent)' : 'var(--bd, var(--border, #d7d8e0))'}`,
586
+ borderRadius: 'var(--rads, 8px)',
587
587
  fontSize: fontSize,
588
- background: disabled ? 'var(--grey-1, var(--surface-hover))' : 'var(--bg, var(--surface))',
589
- 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))',
590
590
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
591
591
  letterSpacing: '0.03em',
592
592
  fontWeight: 600,
593
593
  fontVariantNumeric: 'tabular-nums',
594
594
  textAlign: 'left',
595
595
  outline: 'none',
596
- boxShadow: open ? 'var(--pd, rgba(37, 99, 235, 0.12))' : 'var(--shadow, none)',
597
- 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',
598
602
  }}
599
603
  />
600
604
 
@@ -608,15 +612,15 @@ export function TimePicker({
608
612
  background: 'none',
609
613
  border: 'none',
610
614
  cursor: 'pointer',
611
- color: 'var(--muted, var(--t2))',
615
+ color: 'var(--t2, var(--muted, #9b9daa))',
612
616
  padding: 2,
613
617
  display: 'flex',
614
618
  alignItems: 'center',
615
619
  justifyContent: 'center',
616
620
  transition: 'color .14s ease',
617
621
  }}
618
- onMouseEnter={e => e.currentTarget.style.color = 'var(--danger)'}
619
- 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))'}
620
624
  >
621
625
  <X size={13} />
622
626
  </button>
@@ -624,7 +628,7 @@ export function TimePicker({
624
628
  <ChevronDown
625
629
  size={13}
626
630
  style={{
627
- color: open ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
631
+ color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
628
632
  transform: open ? 'rotate(180deg)' : 'none',
629
633
  transition: 'transform .2s ease, color .15s ease',
630
634
  pointerEvents: 'none',
@@ -644,10 +648,10 @@ export function TimePicker({
644
648
  top: pos.top,
645
649
  left: pos.left,
646
650
  zIndex: 999999,
647
- background: 'var(--surface, var(--bg))',
648
- border: '1px solid var(--border-light, var(--border))',
651
+ background: 'var(--surface, #ffffff)',
652
+ border: '1px solid var(--border, var(--bd, #d7d8e0))',
649
653
  borderRadius: 'var(--rad, 10px)',
650
- boxShadow: 'var(--shadow-lg, var(--shadow))',
654
+ boxShadow: 'var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15))',
651
655
  padding: 10,
652
656
  width: mode === '12h' ? 290 : 240,
653
657
  maxWidth: 'calc(100vw - 24px)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cynx-ui",
3
- "version": "1.3.2",
3
+ "version": "1.3.4",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.js"