cynx-ui 1.2.39 → 1.2.40

package/components/DatePicker.jsx

@@ -42,7 +42,7 @@ function isSameDay(a, b) {
 }
 function isToday(y, m, d) { const t = new Date(); return t.getFullYear()===y && t.getMonth()===m && t.getDate()===d; }
 
-export function DatePicker({ value, onChange, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, style }) {
+export function DatePicker({ value, onChange, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition = 'around', style }) {
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => toDate(value) || new Date());
@@ -51,6 +51,24 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   const btnRef = useRef(null);
   const dropRef = useRef(null);
 
+  const changeDay = (delta) => {
+    if (disabled) return;
+    const current = toDate(value) || new Date();
+    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);
+
+    if (minDate && next < new Date(new Date(minDate).setHours(0, 0, 0, 0))) return;
+    if (maxDate && next > new Date(new Date(maxDate).setHours(23, 59, 59, 999))) return;
+
+    if (typeof value === 'string') {
+      const y = next.getFullYear();
+      const m = pad(next.getMonth() + 1);
+      const d = pad(next.getDate());
+      onChange?.(`${y}-${m}-${d}`);
+    } else {
+      onChange?.(next);
+    }
+  };
+
   // Close on outside click
   useEffect(() => {
     if (!open) return;
@@ -272,32 +290,89 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
     ? `${cursor.getFullYear()}`
     : `${Math.floor(cursor.getFullYear()/12)*12} – ${Math.floor(cursor.getFullYear()/12)*12+11}`;
 
-  return (
-    <div ref={ref} style={{ position: 'relative', display: 'inline-block', ...style }}>
-      {/* Trigger */}
-      <button ref={btnRef} type="button" onClick={toggleOpen} style={{
-        display: 'flex', alignItems: 'center', gap: 7,
-        padding: '5px 10px', borderRadius: 'var(--rads)',
+  const renderPrevBtn = () => (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(e) => { e.stopPropagation(); changeDay(-1); }}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        width: 32, height: 32, borderRadius: 'var(--rads)',
+        border: '1px solid var(--border)', background: 'var(--surface)',
+        cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
+        color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+        flexShrink: 0
+      }}
+      title="Previous day (-1)"
+      onMouseEnter={e => { if (!disabled) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; } }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--muted)'; }}
+    >
+      <ChevronLeft size={15} />
+    </button>
+  );
+
+  const renderNextBtn = () => (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(e) => { e.stopPropagation(); changeDay(1); }}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        width: 32, height: 32, borderRadius: 'var(--rads)',
         border: '1px solid var(--border)', background: 'var(--surface)',
         cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
-        fontSize: '.8rem', color: formatted ? 'var(--primary-text)' : 'var(--muted)',
-        fontFamily: 'var(--sans)', transition: 'border-color .15s',
-        whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow)',
+        color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+        flexShrink: 0
       }}
-      onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent)'; }}
-      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
-        <Calendar size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
-        <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
-        {value && (
-          <span
-            onClick={e => { e.stopPropagation(); onChange?.(null); }}
-            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
-            onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger)'; }}
-            onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; }}>
-            ✕
-          </span>
-        )}
-      </button>
+      title="Next day (+1)"
+      onMouseEnter={e => { if (!disabled) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; } }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--muted)'; }}
+    >
+      <ChevronRight size={15} />
+    </button>
+  );
+
+  const renderTriggerBtn = () => (
+    <button ref={btnRef} type="button" onClick={toggleOpen} style={{
+      display: 'flex', alignItems: 'center', gap: 7,
+      padding: '5px 10px', borderRadius: 'var(--rads)',
+      border: '1px solid var(--border)', background: 'var(--surface)',
+      cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
+      fontSize: '.8rem', color: formatted ? 'var(--primary-text)' : 'var(--muted)',
+      fontFamily: 'var(--sans)', transition: 'border-color .15s',
+      whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow)',
+    }}
+    onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent)'; }}
+    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
+      <Calendar size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
+      <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
+      {value && (
+        <span
+          onClick={e => { e.stopPropagation(); onChange?.(null); }}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
+          onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger)'; }}
+          onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; }}>
+          ✕
+        </span>
+      )}
+    </button>
+  );
+
+  const posMode = stepperPosition === 'left' || stepperPosition === 'start' ? 'left'
+    : stepperPosition === 'right' || stepperPosition === 'end' ? 'right'
+    : 'around';
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4, ...style }}>
+      {showStepper && posMode === 'around' && renderPrevBtn()}
+      {showStepper && posMode === 'left' && renderPrevBtn()}
+      {showStepper && posMode === 'left' && renderNextBtn()}
+
+      {renderTriggerBtn()}
+
+      {showStepper && posMode === 'around' && renderNextBtn()}
+      {showStepper && posMode === 'right' && renderPrevBtn()}
+      {showStepper && posMode === 'right' && renderNextBtn()}
 
       {/* Dropdown via portal */}
       {open && createPortal(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.2.39",
+  "version": "1.2.40",
   "type": "module",
   "exports": {
     ".": "./index.js"