cynx-lib 1.3.28

package/ui/components/DatePicker.jsx

@@ -0,0 +1,605 @@
+import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
+
+// DatePicker — reusable date picker component
+// Props:
+//   value        – Date object or null
+//   onChange     – called with Date object
+//   placeholder  – string shown when no date selected
+//   badges       – object { 'YYYY-MM-DD': { dot: true, color: 'var(--accent, #f99e2c)' } } for day badges
+//   minDate      – Date object, days before this are disabled
+//   maxDate      – Date object, days after this are disabled
+//   disabled     – boolean
+//   style        – container style overrides
+
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function pad(n) { return String(n).padStart(2, '0'); }
+function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
+function toDate(val) {
+  if (!val) return null;
+  if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+  if (typeof val === 'string') {
+    const parts = val.split('-');
+    if (parts.length === 3) {
+      const y = parseInt(parts[0], 10);
+      const m = parseInt(parts[1], 10) - 1;
+      const d = parseInt(parts[2], 10);
+      if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
+        return new Date(y, m, d);
+      }
+    }
+  }
+  const d = new Date(val);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function isSameDay(a, b) {
+  const da = toDate(a), db = toDate(b);
+  return da && db && da.getFullYear()===db.getFullYear() && da.getMonth()===db.getMonth() && da.getDate()===db.getDate();
+}
+function isToday(y, m, d) { const t = new Date(); return t.getFullYear()===y && t.getMonth()===m && t.getDate()===d; }
+
+export function DatePicker({ value, onChange, label, 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());
+  const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
+  const ref = useRef(null);
+  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);
+
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+    if (minD && next < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
+    if (maxD && next > new Date(new Date(maxD).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;
+    function close(e) {
+      if (ref.current?.contains(e.target)) return;
+      if (dropRef.current?.contains(e.target)) return;
+      setOpen(false); setView('day');
+    }
+    document.addEventListener('mousedown', close, true);
+    return () => document.removeEventListener('mousedown', close, true);
+  }, [open]);
+
+  const [stepperPosState, setStepperPosState] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
+
+  useEffect(() => {
+    function onPosChanged() {
+      setStepperPosState(typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
+    }
+    window.addEventListener('datepicker-pos-changed', onPosChanged);
+    return () => window.removeEventListener('datepicker-pos-changed', onPosChanged);
+  }, []);
+
+  // Sync cursor when value changes externally
+  useEffect(() => {
+    const d = toDate(value);
+    if (d) setCursor(d);
+  }, [value]);
+
+  const calcPos = useCallback(() => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const dropW = Math.max(r.width, 260);
+    const dropH = dropRef.current ? dropRef.current.offsetHeight : 280;
+
+    let left = r.left;
+    if (left + dropW > window.innerWidth - 12) {
+      left = Math.max(12, r.right - dropW);
+    }
+    if (left < 12) left = 12;
+
+    let top = r.bottom + 6;
+    if (top + dropH > window.innerHeight - 12 && r.top - 6 - dropH > 12) {
+      top = r.top - 6 - dropH;
+    }
+
+    setPos({ top, left, width: dropW });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    calcPos();
+    window.addEventListener('scroll', calcPos, true);
+    window.addEventListener('resize', calcPos);
+    return () => {
+      window.removeEventListener('scroll', calcPos, true);
+      window.removeEventListener('resize', calcPos);
+    };
+  }, [open, calcPos]);
+
+  const toggleOpen = () => {
+    if (disabled) return;
+    if (!open) {
+      calcPos();
+    }
+    setOpen(o => !o);
+  };
+
+  function pick(date) {
+    if (!date) return;
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+    if (minD && date < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
+    if (maxD && date > new Date(new Date(maxD).setHours(23, 59, 59, 999))) return;
+
+    if (typeof value === 'string') {
+      const y = date.getFullYear();
+      const m = pad(date.getMonth() + 1);
+      const d = pad(date.getDate());
+      onChange?.(`${y}-${m}-${d}`);
+    } else {
+      onChange?.(date);
+    }
+    setOpen(false);
+    setView('day');
+  }
+
+  const isNavNextDisabled = () => {
+    const maxD = toDate(maxDate);
+    if (!maxD) return false;
+    const y = cursor.getFullYear(), m = cursor.getMonth();
+    if (view === 'day') {
+      const nextMonthStart = new Date(y, m + 1, 1);
+      return nextMonthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
+    if (view === 'month') {
+      const nextYearStart = new Date(y + 1, 0, 1);
+      return nextYearStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
+    if (view === 'year') {
+      const base = Math.floor(y / 12) * 12;
+      const nextBlockStart = new Date(base + 12, 0, 1);
+      return nextBlockStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
+    return false;
+  };
+
+  const isNavPrevDisabled = () => {
+    const minD = toDate(minDate);
+    if (!minD) return false;
+    const y = cursor.getFullYear(), m = cursor.getMonth();
+    if (view === 'day') {
+      const prevMonthEnd = new Date(y, m, 0, 23, 59, 59, 999);
+      return prevMonthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
+    if (view === 'month') {
+      const prevYearEnd = new Date(y - 1, 11, 31, 23, 59, 59, 999);
+      return prevYearEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
+    if (view === 'year') {
+      const base = Math.floor(y / 12) * 12;
+      const prevBlockEnd = new Date(base - 1, 11, 31, 23, 59, 59, 999);
+      return prevBlockEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
+    return false;
+  };
+
+  function nav(dir) {
+    if (dir > 0 && isNavNextDisabled()) return;
+    if (dir < 0 && isNavPrevDisabled()) return;
+    const c = new Date(cursor);
+    if (view === 'day')   { c.setMonth(c.getMonth() + dir); }
+    if (view === 'month') { c.setFullYear(c.getFullYear() + dir); }
+    if (view === 'year')  { c.setFullYear(c.getFullYear() + dir * 12); }
+    setCursor(c);
+  }
+
+  function cycleView() {
+    setView(v => v === 'day' ? 'month' : v === 'month' ? 'year' : 'year');
+  }
+
+  const valDate = toDate(value);
+  const formatted = valDate
+    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}`
+    : (typeof value === 'string' ? value : null);
+
+  // ── Day grid ─────────────────────────────────────────────────
+  function renderDays() {
+    const y = cursor.getFullYear(), m = cursor.getMonth();
+    const first = new Date(y, m, 1).getDay(); // 0=Sun
+    const offset = first === 0 ? 6 : first === 1 ? 7 : first - 1; // 0=Sun→6, 1=Mon→7(show prev week), else Mon-start
+    const daysInMonth = new Date(y, m + 1, 0).getDate();
+    const prevDays = new Date(y, m, 0).getDate();
+
+    const cells = [];
+    // Prev month filler
+    for (let i = offset - 1; i >= 0; i--)
+      cells.push({ day: prevDays - i, cur: false, next: false });
+    // Current month
+    for (let d = 1; d <= daysInMonth; d++)
+      cells.push({ day: d, cur: true, next: false });
+    // Next month filler — complete last row + always show at least one full next month week
+    const totalSoFar = cells.length;
+    let remaining = (7 - (totalSoFar % 7)) % 7;
+    if (remaining === 0) remaining = 7;
+    for (let d = 1; d <= remaining; d++)
+      cells.push({ day: d, cur: false, next: true });
+
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+
+    return (
+      <div>
+        {/* Weekday headers */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 4 }}>
+          {DAYS.map(d => (
+            <div key={d} style={{ textAlign: 'center', fontSize: '.68rem', fontWeight: 700, color: 'var(--muted, #797b8d)', padding: '4px 0', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>{d}</div>
+          ))}
+        </div>
+        {/* Day cells */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 1 }}>
+          {cells.map((c, i) => {
+            if (!c.cur) {
+              const isPrev = !c.next;
+              const date = isPrev
+                ? new Date(y, m - 1, c.day)
+                : new Date(y, m + 1, c.day);
+              const disMin = minD && date < new Date(new Date(minD).setHours(0,0,0,0));
+              const disMax = maxD && date > new Date(new Date(maxD).setHours(23,59,59,999));
+              const dis    = disMin || disMax;
+              return (
+                <div
+                  key={i}
+                  onClick={() => { if (!dis) pick(date); }}
+                  style={{
+                    textAlign: 'center',
+                    padding: '6px 2px',
+                    fontSize: '.78rem',
+                    color: dis ? 'var(--border, #e5e7eb)' : 'var(--muted, #797b8d)',
+                    cursor: dis ? 'not-allowed' : 'pointer',
+                    borderRadius: 'var(--radxs, 6px)',
+                    transition: 'background .12s',
+                    opacity: dis ? 0.35 : 0.7,
+                  }}
+                  onMouseEnter={e => { if (!dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+                  onMouseLeave={e => { if (!dis) e.currentTarget.style.background = 'transparent'; }}
+                >
+                  {c.day}
+                </div>
+              );
+            }
+            const date   = new Date(y, m, c.day);
+            const key    = toKey(y, m, c.day);
+            const badge  = badges[key];
+            const sel    = isSameDay(date, value);
+            const today  = isToday(y, m, c.day);
+            const disMin = minD && date < new Date(new Date(minD).setHours(0,0,0,0));
+            const disMax = maxD && date > new Date(new Date(maxD).setHours(23,59,59,999));
+            const dis    = disMin || disMax;
+            return (
+              <div key={i} onClick={() => !dis && pick(date)} style={{
+                position: 'relative', textAlign: 'center', padding: '6px 2px',
+                fontSize: '.8rem', fontWeight: sel ? 700 : today ? 600 : 400,
+                borderRadius: 'var(--radxs, 6px)', cursor: dis ? 'not-allowed' : 'pointer',
+                background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : today ? 'var(--accent, #f99e2c)' : 'var(--primary-text, #0f172a)',
+                border: today && !sel ? '1.5px solid var(--accent, #f99e2c)' : '1.5px solid transparent',
+                transition: 'background .12s, color .12s',
+                opacity: dis ? 0.35 : 1,
+              }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+              onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}>
+                {c.day}
+                {badge && (
+                  <span style={{
+                    position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)',
+                    width: 4, height: 4, borderRadius: '50%',
+                    background: badge.color || 'var(--accent, #f99e2c)',
+                  }} />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Month grid ───────────────────────────────────────────────
+  function renderMonths() {
+    const y = cursor.getFullYear();
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 0' }}>
+        {MONTHS.map((name, i) => {
+          const sel = value && value.getFullYear() === y && value.getMonth() === i;
+          const monthStart = new Date(y, i, 1);
+          const monthEnd   = new Date(y, i + 1, 0, 23, 59, 59, 999);
+          const disMin = minD && monthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+          const disMax = maxD && monthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+          const dis = disMin || disMax;
+
+          return (
+            <div
+              key={i}
+              onClick={() => {
+                if (dis) return;
+                const c = new Date(cursor);
+                c.setMonth(i);
+                setCursor(c);
+                setView('day');
+              }}
+              style={{
+                textAlign: 'center',
+                padding: '10px 4px',
+                borderRadius: 'var(--radxs, 6px)',
+                fontSize: '.82rem',
+                fontWeight: 600,
+                cursor: dis ? 'not-allowed' : 'pointer',
+                opacity: dis ? 0.35 : 1,
+                background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : 'var(--primary-text, #0f172a)',
+                transition: 'background .12s',
+              }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+              onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}
+            >
+              {name}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ── Year grid ────────────────────────────────────────────────
+  function renderYears() {
+    const base = Math.floor(cursor.getFullYear() / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => base + i);
+    const minD = toDate(minDate);
+    const maxD = toDate(maxDate);
+
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 0' }}>
+        {years.map(yr => {
+          const sel = value && value.getFullYear() === yr;
+          const yrStart = new Date(yr, 0, 1);
+          const yrEnd   = new Date(yr, 11, 31, 23, 59, 59, 999);
+          const disMin = minD && yrEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+          const disMax = maxD && yrStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+          const dis = disMin || disMax;
+
+          return (
+            <div
+              key={yr}
+              onClick={() => {
+                if (dis) return;
+                const c = new Date(cursor);
+                c.setFullYear(yr);
+                setCursor(c);
+                setView('month');
+              }}
+              style={{
+                textAlign: 'center',
+                padding: '10px 4px',
+                borderRadius: 'var(--radxs, 6px)',
+                fontSize: '.82rem',
+                fontWeight: 600,
+                cursor: dis ? 'not-allowed' : 'pointer',
+                opacity: dis ? 0.35 : 1,
+                background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : 'var(--primary-text, #0f172a)',
+                transition: 'background .12s',
+              }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+              onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}
+            >
+              {yr}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  const headerLabel = view === 'day'
+    ? `${MONTHS[cursor.getMonth()]} ${cursor.getFullYear()}`
+    : view === 'month'
+    ? `${cursor.getFullYear()}`
+    : `${Math.floor(cursor.getFullYear()/12)*12} – ${Math.floor(cursor.getFullYear()/12)*12+11}`;
+
+  const isNextDisabled = () => {
+    if (disabled) return true;
+    const maxD = toDate(maxDate);
+    if (!maxD) return false;
+    const current = toDate(value) || new Date();
+    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+    return next > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  };
+
+  const isPrevDisabled = () => {
+    if (disabled) return true;
+    const minD = toDate(minDate);
+    if (!minD) return false;
+    const current = toDate(value) || new Date();
+    const prev = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+    return prev < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  };
+
+  const renderPrevBtn = () => {
+    const dis = isPrevDisabled();
+    return (
+      <button
+        type="button"
+        disabled={dis}
+        onClick={(e) => { e.stopPropagation(); changeDay(-1); }}
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
+          cursor: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
+          color: 'var(--muted, #797b8d)', transition: 'all .15s', boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+          flexShrink: 0
+        }}
+        title="Previous day (-1)"
+        onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
+        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
+      >
+        <ChevronLeft size={15} />
+      </button>
+    );
+  };
+
+  const renderNextBtn = () => {
+    const dis = isNextDisabled();
+    return (
+      <button
+        type="button"
+        disabled={dis}
+        onClick={(e) => { e.stopPropagation(); changeDay(1); }}
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
+          cursor: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
+          color: 'var(--muted, #797b8d)', transition: 'all .15s', boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+          flexShrink: 0
+        }}
+        title="Next day (+1)"
+        onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
+        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
+      >
+        <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, 8px)',
+      border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
+      cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
+      fontSize: '.8rem', color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
+      fontFamily: 'var(--sans, inherit)', transition: 'border-color .15s',
+      whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+    }}
+    onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; }}
+    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; }}>
+      <Calendar size={13} style={{ color: 'var(--muted, #797b8d)', 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, #797b8d)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
+          onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger, #f64747)'; }}
+          onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}>
+          ✕
+        </span>
+      )}
+    </button>
+  );
+
+  const actualPos = stepperPosition || 'around';
+  const showStepperEffective = showStepper && actualPos !== 'off';
+  const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
+    : actualPos === 'right' || actualPos === 'end' ? 'right'
+    : 'around';
+
+  return (
+    <div style={{ display: 'inline-flex', flexDirection: 'column', position: 'relative', width: style?.width || 'auto', boxSizing: 'border-box', minWidth: 0, ...style }}>
+      {label && (
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted, #797b8d))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}>
+          {label}
+        </label>
+      )}
+      <div ref={ref} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4, width: '100%' }}>
+        {showStepperEffective && posMode === 'around' && renderPrevBtn()}
+        {showStepperEffective && posMode === 'left' && renderPrevBtn()}
+        {showStepperEffective && posMode === 'left' && renderNextBtn()}
+
+        {renderTriggerBtn()}
+
+        {showStepperEffective && posMode === 'around' && renderNextBtn()}
+        {showStepperEffective && posMode === 'right' && renderPrevBtn()}
+        {showStepperEffective && posMode === 'right' && renderNextBtn()}
+      </div>
+
+      {/* Dropdown via portal */}
+      {open && createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 9000,
+          background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: 'var(--rad, 10px)', boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
+          padding: '10px 12px',
+          animation: 'dp-in .12s ease',
+        }}>
+          {/* Calendar header */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+            <button
+              type="button"
+              disabled={isNavPrevDisabled()}
+              onClick={() => nav(-1)}
+              style={{
+                background: 'none', border: 'none',
+                cursor: isNavPrevDisabled() ? 'not-allowed' : 'pointer',
+                opacity: isNavPrevDisabled() ? 0.35 : 1,
+                padding: 4, borderRadius: 'var(--radxs, 6px)',
+                color: 'var(--muted, #797b8d)', display: 'flex', alignItems: 'center'
+              }}
+              onMouseEnter={e => { if (!isNavPrevDisabled()) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}
+            >
+              <ChevronLeft size={15} />
+            </button>
+            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans, inherit)' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+              {headerLabel}
+            </button>
+            <button
+              type="button"
+              disabled={isNavNextDisabled()}
+              onClick={() => nav(1)}
+              style={{
+                background: 'none', border: 'none',
+                cursor: isNavNextDisabled() ? 'not-allowed' : 'pointer',
+                opacity: isNavNextDisabled() ? 0.35 : 1,
+                padding: 4, borderRadius: 'var(--radxs, 6px)',
+                color: 'var(--muted, #797b8d)', display: 'flex', alignItems: 'center'
+              }}
+              onMouseEnter={e => { if (!isNavNextDisabled()) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}
+            >
+              <ChevronRight size={15} />
+            </button>
+          </div>
+
+          {/* Calendar body */}
+          {view === 'day'   && renderDays()}
+          {view === 'month' && renderMonths()}
+          {view === 'year'  && renderYears()}
+
+        </div>,
+        document.body
+      )}
+
+      <style>{`@keyframes dp-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }`}</style>
+    </div>
+  );
+}