cynx-lib 1.3.68 → 1.3.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.68",
+  "version": "1.3.69",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/DatePicker.jsx

@@ -91,6 +91,7 @@ export function DatePicker({
   showSeconds = false,
   timePlaceholder = '00:00',
   timeProps = {},
+  range = false,
 }) {
   const loc = typeof locale === 'object' && locale !== null ? locale : (LOCALES[locale] || LOCALES.en);
   const DAYS = loc.days;
@@ -98,8 +99,11 @@ export function DatePicker({
   const s = SIZES[size] || SIZES.md;
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
-  const [cursor,  setCursor]  = useState(() => toDate(value) || new Date());
+  const [cursor,  setCursor]  = useState(() => new Date());
   const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
+  const [rangeStart, setRangeStart] = useState(null);
+  const [rangeEnd,   setRangeEnd]   = useState(null);
+  const [hoverDate,  setHoverDate]  = useState(null);
   const ref = useRef(null);
   const btnRef = useRef(null);
   const dropRef = useRef(null);
@@ -160,11 +164,31 @@ export function DatePicker({
     return () => window.removeEventListener('datepicker-pos-changed', onPosChanged);
   }, []);
 
-  // Sync cursor when value changes externally
+  // Sync cursor and range when value changes externally
   useEffect(() => {
-    const d = toDate(value);
-    if (d) setCursor(d);
-  }, [value]);
+    if (range) {
+      if (Array.isArray(value)) {
+        const sD = toDate(value[0]);
+        const eD = toDate(value[1]);
+        setRangeStart(sD);
+        setRangeEnd(eD);
+        if (sD) setCursor(sD);
+      } else if (typeof value === 'string' && value.includes(',')) {
+        const parts = value.split(',');
+        const sD = toDate(parts[0]);
+        const eD = toDate(parts[1]);
+        setRangeStart(sD);
+        setRangeEnd(eD);
+        if (sD) setCursor(sD);
+      } else {
+        setRangeStart(null);
+        setRangeEnd(null);
+      }
+    } else {
+      const d = toDate(value);
+      if (d) setCursor(d);
+    }
+  }, [value, range]);
 
   const calcPos = useCallback(() => {
     if (!btnRef.current) return;
@@ -205,6 +229,92 @@ export function DatePicker({
     setOpen(o => !o);
   };
 
+  function formatDateStr(d) {
+    if (!d) return '';
+    const y = d.getFullYear();
+    const m = pad(d.getMonth() + 1);
+    const day = pad(d.getDate());
+    return `${y}-${m}-${day}`;
+  }
+
+  function isRangeStartActive(d) {
+    if (!range || !rangeStart) return false;
+    if (rangeEnd) {
+      const sTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate()).getTime();
+      const eTime = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth(), rangeEnd.getDate()).getTime();
+      const minD = sTime <= eTime ? rangeStart : rangeEnd;
+      return isSameDay(d, minD);
+    }
+    if (hoverDate) {
+      const sTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate()).getTime();
+      const hTime = new Date(hoverDate.getFullYear(), hoverDate.getMonth(), hoverDate.getDate()).getTime();
+      const minD = sTime <= hTime ? rangeStart : hoverDate;
+      return isSameDay(d, minD);
+    }
+    return isSameDay(d, rangeStart);
+  }
+
+  function isRangeEndActive(d) {
+    if (!range || !rangeStart) return false;
+    if (rangeEnd) {
+      const sTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate()).getTime();
+      const eTime = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth(), rangeEnd.getDate()).getTime();
+      const maxD = sTime <= eTime ? rangeEnd : rangeStart;
+      return isSameDay(d, maxD);
+    }
+    if (hoverDate) {
+      const sTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate()).getTime();
+      const hTime = new Date(hoverDate.getFullYear(), hoverDate.getMonth(), hoverDate.getDate()).getTime();
+      const maxD = sTime <= hTime ? hoverDate : rangeStart;
+      return isSameDay(d, maxD);
+    }
+    return false;
+  }
+
+  function isRangeEndpoint(d) {
+    return isRangeStartActive(d) || isRangeEndActive(d);
+  }
+
+  function isRangeBetween(d) {
+    if (!range || !rangeStart) return false;
+    const dTime = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    if (rangeEnd) {
+      const sTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate()).getTime();
+      const eTime = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth(), rangeEnd.getDate()).getTime();
+      const minT = Math.min(sTime, eTime);
+      const maxT = Math.max(sTime, eTime);
+      return dTime > minT && dTime < maxT;
+    }
+    if (hoverDate) {
+      const sTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate()).getTime();
+      const hTime = new Date(hoverDate.getFullYear(), hoverDate.getMonth(), hoverDate.getDate()).getTime();
+      const minT = Math.min(sTime, hTime);
+      const maxT = Math.max(sTime, hTime);
+      return dTime > minT && dTime < maxT;
+    }
+    return false;
+  }
+
+  function getRangeRadius(d) {
+    if (!range) return 'var(--radxs, 6px)';
+    const isStart = isRangeStartActive(d);
+    const isEnd = isRangeEndActive(d);
+    const dayOfWeek = d.getDay();
+    const isRowStart = dayOfWeek === 1;
+    const isRowEnd = dayOfWeek === 0;
+
+    if (isStart && isEnd) return 'var(--radxs, 6px)';
+    if (isStart) return 'var(--radxs, 6px) 0 0 var(--radxs, 6px)';
+    if (isEnd) return '0 var(--radxs, 6px) var(--radxs, 6px) 0';
+    if (isRangeBetween(d)) {
+      if (isRowStart && isRowEnd) return 'var(--radxs, 6px)';
+      if (isRowStart) return 'var(--radxs, 6px) 0 0 var(--radxs, 6px)';
+      if (isRowEnd) return '0 var(--radxs, 6px) var(--radxs, 6px) 0';
+      return '0';
+    }
+    return 'var(--radxs, 6px)';
+  }
+
   function pick(date) {
     if (!date) return;
     const minD = toDate(minDate);
@@ -212,6 +322,29 @@ export function DatePicker({
     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 (range) {
+      if (!rangeStart || (rangeStart && rangeEnd)) {
+        setRangeStart(date);
+        setRangeEnd(null);
+      } else {
+        let start = rangeStart;
+        let end = date;
+        if (start > end) {
+          const tmp = start;
+          start = end;
+          end = tmp;
+        }
+        setRangeStart(start);
+        setRangeEnd(end);
+
+        const result = [formatDateStr(start), formatDateStr(end)];
+        onChange?.(result);
+        setOpen(false);
+        setView('day');
+      }
+      return;
+    }
+
     if (typeof value === 'string') {
       const y = date.getFullYear();
       const m = pad(date.getMonth() + 1);
@@ -282,26 +415,25 @@ export function DatePicker({
 
   const valDate = toDate(value);
   const formattedTime = showTime && timeValue ? ` ${timeValue}` : '';
-  const formatted = valDate
+  const formatted = range
+    ? (rangeStart && rangeEnd ? `${formatDateStr(rangeStart)} — ${formatDateStr(rangeEnd)}` : rangeStart ? `${formatDateStr(rangeStart)} — ...` : null)
+    : valDate
     ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}${formattedTime}`
     : (typeof value === 'string' && value ? `${value}${formattedTime}` : 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 first = new Date(y, m, 1).getDay();
+    const offset = first === 0 ? 6 : first === 1 ? 7 : first - 1;
     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;
@@ -320,7 +452,7 @@ export function DatePicker({
           ))}
         </div>
         {/* Day cells */}
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 1 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px 0' }}>
           {cells.map((c, i) => {
             if (!c.cur) {
               const isPrev = !c.next;
@@ -334,18 +466,22 @@ export function DatePicker({
                 <div
                   key={i}
                   onClick={() => { if (!dis) pick(date); }}
+                  onMouseEnter={() => { if (range && rangeStart && !rangeEnd) setHoverDate(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)',
+                    borderRadius: getRangeRadius(date),
+                    background: (range ? isRangeEndpoint(date) : false)
+                      ? 'var(--accent, #f99e2c)'
+                      : isRangeBetween(date)
+                      ? 'rgba(18, 103, 93, 0.14)'
+                      : 'transparent',
                     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>
@@ -354,30 +490,37 @@ export function DatePicker({
             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 sel    = range ? isRangeEndpoint(date) : 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'; }}>
+              <div
+                key={i}
+                onClick={() => !dis && pick(date)}
+                onMouseEnter={() => { if (range && rangeStart && !rangeEnd) setHoverDate(date); }}
+                style={{
+                  position: 'relative', textAlign: 'center', padding: '6px 2px',
+                  fontSize: '.8rem', fontWeight: sel ? 700 : today ? 600 : 400,
+                  borderRadius: getRangeRadius(date), cursor: dis ? 'not-allowed' : 'pointer',
+                  background: sel
+                    ? 'var(--accent, #12675D)'
+                    : isRangeBetween(date)
+                    ? 'rgba(18, 103, 93, 0.14)'
+                    : 'transparent',
+                  color: sel ? '#ffffff' : dis ? 'var(--border, #e2e8f0)' : today ? 'var(--accent, #12675D)' : 'var(--primary-text, #0f172a)',
+                  border: today && !sel ? '1.5px solid var(--accent, #12675D)' : '1.5px solid transparent',
+                  transition: 'background .12s, color .12s',
+                  opacity: dis ? 0.35 : 1,
+                }}
+              >
                 {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)',
+                    background: badge.color || 'var(--accent, #12675D)',
                   }} />
                 )}
               </div>