cynx-lib 1.3.67 → 1.3.69

package/package.json

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

package/ui/components/DatePicker.jsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Calendar, Clock } from 'lucide-react';
+import { TimePicker } from './TimePicker.jsx';
 
 // DatePicker — reusable date picker component
 // Props:
@@ -12,9 +13,28 @@ import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 //   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'];
+//   showTime     – boolean, enables integrated TimePicker in dropdown
+//   timeValue    – string, time string e.g. "14:30"
+//   onTimeChange – function(timeString)
+//   timeFormat   – "24h" | "12h"
+//   showSeconds  – boolean
+
+const LOCALES = {
+  en: {
+    days: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    today: 'Today',
+    time: 'Time:',
+    ok: 'OK',
+  },
+  ru: {
+    days: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
+    months: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+    today: 'Сегодня',
+    time: 'Время:',
+    ok: 'OK',
+  },
+};
 
 function pad(n) { return String(n).padStart(2, '0'); }
 function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
@@ -42,11 +62,48 @@ 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, label, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, showStepper = true, stepperPosition = 'around', style }) {
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, iconSize: 11, btnSize: 24, closeSize: 11 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, iconSize: 12, btnSize: 28, closeSize: 12 },
+  md: { height: 32, fontSize: 13, paddingH: 10, iconSize: 13, btnSize: 32, closeSize: 13 },
+  lg: { height: 36, fontSize: 14, paddingH: 12, iconSize: 14, btnSize: 36, closeSize: 14 },
+};
+
+export function DatePicker({
+  value,
+  onChange,
+  label,
+  placeholder = 'Select date',
+  badges = {},
+  minDate,
+  maxDate,
+  disabled,
+  size = 'md',
+  showStepper = false,
+  stepperPosition = 'off',
+  locale = 'en',
+  style,
+  fullWidth = false,
+  showTime = false,
+  timeValue,
+  onTimeChange,
+  timeFormat = '24h',
+  showSeconds = false,
+  timePlaceholder = '00:00',
+  timeProps = {},
+  range = false,
+}) {
+  const loc = typeof locale === 'object' && locale !== null ? locale : (LOCALES[locale] || LOCALES.en);
+  const DAYS = loc.days;
+  const MONTHS = loc.months;
+  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);
@@ -77,10 +134,24 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     function close(e) {
       if (ref.current?.contains(e.target)) return;
       if (dropRef.current?.contains(e.target)) return;
+      if (e.target?.closest?.('.cynx-timepicker-drop') || e.target?.closest?.('.cynx-timepicker-cell')) return;
+      if (document.querySelector('.cynx-timepicker-drop')) return;
+      if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
       setOpen(false); setView('day');
     }
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        if (document.querySelector('.cynx-timepicker-drop')) return;
+        if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
+        setOpen(false); setView('day');
+      }
+    }
     document.addEventListener('mousedown', close, true);
-    return () => document.removeEventListener('mousedown', close, true);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', close, true);
+      document.removeEventListener('keydown', onKey);
+    };
   }, [open]);
 
   const [stepperPosState, setStepperPosState] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
@@ -93,11 +164,31 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     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;
@@ -138,6 +229,92 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     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);
@@ -145,6 +322,29 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     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);
@@ -153,8 +353,10 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     } else {
       onChange?.(date);
     }
-    setOpen(false);
-    setView('day');
+    if (!showTime) {
+      setOpen(false);
+      setView('day');
+    }
   }
 
   const isNavNextDisabled = () => {
@@ -212,26 +414,26 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   }
 
   const valDate = toDate(value);
-  const formatted = valDate
-    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}`
-    : (typeof value === 'string' ? value : null);
+  const formattedTime = showTime && timeValue ? ` ${timeValue}` : '';
+  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;
@@ -250,7 +452,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
           ))}
         </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;
@@ -264,18 +466,22 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 <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>
@@ -284,30 +490,37 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
             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>
@@ -450,7 +663,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onClick={(e) => { e.stopPropagation(); changeDay(-1); }}
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          width: s.btnSize, height: s.btnSize, 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))',
@@ -460,7 +673,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         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} />
+        <ChevronLeft size={s.iconSize + 2} />
       </button>
     );
   };
@@ -474,7 +687,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onClick={(e) => { e.stopPropagation(); changeDay(1); }}
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          width: s.btnSize, height: s.btnSize, 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))',
@@ -484,7 +697,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         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} />
+        <ChevronRight size={s.iconSize + 2} />
       </button>
     );
   };
@@ -492,21 +705,24 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   const renderTriggerBtn = () => (
     <button ref={btnRef} type="button" onClick={toggleOpen} style={{
       display: 'flex', alignItems: 'center', gap: 7,
-      padding: '5px 10px', borderRadius: 'var(--rads, 8px)',
+      padding: `0 ${s.paddingH}px`, 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)',
+      fontSize: s.fontSize, 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))',
+      whiteSpace: 'nowrap', minWidth: 0, flex: 1, height: s.height, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+      overflow: 'hidden'
     }}
     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>
+      <Calendar size={s.iconSize} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
+      <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
+        {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' }}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted, #797b8d)', cursor: 'pointer', flexShrink: 0, fontSize: s.closeSize, lineHeight: 1, padding: '0 2px' }}
           onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger, #f64747)'; }}
           onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}>
           ✕
@@ -522,13 +738,30 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
     : 'around';
 
   return (
-    <div style={{ display: 'inline-flex', flexDirection: 'column', position: 'relative', width: style?.width || 'auto', boxSizing: 'border-box', minWidth: 0, ...style }}>
+    <div style={{
+      display: fullWidth || style?.display === 'flex' ? 'flex' : 'inline-flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: style?.width || (fullWidth ? '100%' : 'auto'),
+      maxWidth: style?.maxWidth || (fullWidth ? '100%' : 320),
+      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%' }}>
+      <div ref={ref} style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        width: '100%',
+        maxWidth: '100%',
+        minWidth: 0,
+      }}>
         {showStepperEffective && posMode === 'around' && renderPrevBtn()}
         {showStepperEffective && posMode === 'left' && renderPrevBtn()}
         {showStepperEffective && posMode === 'left' && renderNextBtn()}
@@ -542,7 +775,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
 
       {/* Dropdown via portal */}
       {open && createPortal(
-        <div ref={dropRef} style={{
+        <div ref={dropRef} className="cynx-datepicker-drop" 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))',
@@ -595,6 +828,56 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
           {view === 'month' && renderMonths()}
           {view === 'year'  && renderYears()}
 
+          {/* Integrated Time Picker footer */}
+          {showTime && (
+            <div
+              style={{
+                borderTop: '1px solid var(--border-light, #ebebf0)',
+                marginTop: 8,
+                paddingTop: 8,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 8,
+              }}
+            >
+              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: '.76rem', color: 'var(--muted, #797b8d)', fontWeight: 600 }}>
+                <Clock size={13} style={{ opacity: 0.85 }} />
+                <span>{loc.time || 'Time:'}</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <TimePicker
+                  value={timeValue || ''}
+                  onChange={(t) => onTimeChange?.(t)}
+                  format={timeFormat}
+                  showSeconds={showSeconds}
+                  placeholder={timePlaceholder}
+                  size={timeProps.size || size || 'md'}
+                  {...timeProps}
+                />
+                <button
+                  type="button"
+                  onClick={() => { setOpen(false); setView('day'); }}
+                  style={{
+                    padding: '4px 10px',
+                    borderRadius: 'var(--radxs, 6px)',
+                    background: 'var(--accent, #f99e2c)',
+                    color: 'var(--def-btn-text, #ffffff)',
+                    border: 'none',
+                    fontSize: '11.5px',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'opacity 0.15s ease',
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.9'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
+                >
+                  {loc.ok || 'OK'}
+                </button>
+              </div>
+            </div>
+          )}
+
         </div>,
         document.body
       )}

package/vue/components/Badge.vue

@@ -3,11 +3,19 @@ import { computed } from "vue";
 
 const VARIANTS: Record<string, any> = {
   ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
   err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
   warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
   blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
   teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
   dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
   ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
 };