cynx-lib 1.3.67 → 1.3.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.67",
+  "version": "1.3.68",
   "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,7 +62,40 @@ 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 = {},
+}) {
+  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());
@@ -77,10 +130,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);
@@ -153,8 +220,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,9 +281,10 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   }
 
   const valDate = toDate(value);
+  const formattedTime = showTime && timeValue ? ` ${timeValue}` : '';
   const formatted = valDate
-    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}`
-    : (typeof value === 'string' ? value : null);
+    ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}${formattedTime}`
+    : (typeof value === 'string' && value ? `${value}${formattedTime}` : null);
 
   // ── Day grid ─────────────────────────────────────────────────
   function renderDays() {
@@ -450,7 +520,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 +530,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 +544,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 +554,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 +562,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 +595,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 +632,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 +685,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)" },
 };
 

package/vue/components/DatePicker.vue

@@ -0,0 +1,978 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  useSlots,
+} from "vue";
+import { ChevronLeft, ChevronRight, Calendar, Clock } from "lucide-vue-next";
+
+export interface DatePickerBadge {
+  dot?: boolean;
+  color?: string;
+}
+
+export interface DatePickerLocale {
+  days: string[];
+  months: string[];
+  today?: string;
+  time?: string;
+  ok?: string;
+}
+
+const LOCALES: Record<string, DatePickerLocale> = {
+  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",
+  },
+};
+
+const SIZES: Record<
+  string,
+  {
+    height: number;
+    fontSize: number;
+    paddingH: number;
+    iconSize: number;
+    btnSize: number;
+    closeSize: number;
+  }
+> = {
+  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 },
+};
+
+function pad(n: number) {
+  return String(n).padStart(2, "0");
+}
+
+function toKey(y: number, m: number, d: number) {
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+
+function toDate(val: any): Date | null {
+  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: any, b: any) {
+  const da = toDate(a);
+  const db = toDate(b);
+  return (
+    Boolean(da && db) &&
+    da!.getFullYear() === db!.getFullYear() &&
+    da!.getMonth() === db!.getMonth() &&
+    da!.getDate() === db!.getDate()
+  );
+}
+
+function isToday(y: number, m: number, d: number) {
+  const t = new Date();
+  return t.getFullYear() === y && t.getMonth() === m && t.getDate() === d;
+}
+
+const STYLES = `
+@keyframes dpFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+`;
+const _id = "cynx-datepicker-styles";
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+ensureStyles();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any;
+    value?: any;
+    label?: string;
+    placeholder?: string;
+    badges?: Record<string, DatePickerBadge>;
+    minDate?: any;
+    maxDate?: any;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    showStepper?: boolean;
+    stepperPosition?: "off" | "around" | "left" | "right" | "start" | "end";
+    locale?: "en" | "ru" | DatePickerLocale | string;
+    clearable?: boolean;
+    fullWidth?: boolean;
+    style?: Record<string, any>;
+    showTime?: boolean;
+    timeValue?: string;
+    timeFormat?: "24h" | "12h";
+    showSeconds?: boolean;
+    timePlaceholder?: string;
+  }>(),
+  {
+    modelValue: undefined,
+    value: undefined,
+    label: "",
+    placeholder: "Select date",
+    badges: () => ({}),
+    minDate: undefined,
+    maxDate: undefined,
+    disabled: false,
+    size: "md",
+    showStepper: false,
+    stepperPosition: "off",
+    locale: "en",
+    clearable: true,
+    fullWidth: false,
+    style: () => ({}),
+    showTime: false,
+    timeValue: "",
+    timeFormat: "24h",
+    showSeconds: false,
+    timePlaceholder: "00:00",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: any): void;
+  (e: "update:value", value: any): void;
+  (e: "change", value: any): void;
+  (e: "update:timeValue", value: string): void;
+  (e: "time-change", value: string): void;
+  (e: "clear"): void;
+}>();
+
+const currentVal = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value;
+});
+
+const loc = computed<DatePickerLocale>(() => {
+  if (typeof props.locale === "object" && props.locale !== null) {
+    return props.locale;
+  }
+  return LOCALES[props.locale as string] || LOCALES.en;
+});
+
+const s = computed(() => SIZES[props.size] || SIZES.md);
+const open = ref(false);
+const view = ref<"day" | "month" | "year">("day");
+const cursor = ref<Date>(toDate(currentVal.value) || new Date());
+const pos = ref({ top: 0, left: 0, width: 0 });
+
+const wrapRef = ref<HTMLElement | null>(null);
+const btnRef = ref<HTMLElement | null>(null);
+const dropRef = ref<HTMLElement | null>(null);
+
+watch(
+  currentVal,
+  (newVal) => {
+    const d = toDate(newVal);
+    if (d) cursor.value = d;
+  },
+  { immediate: true }
+);
+
+const calcPos = () => {
+  if (!btnRef.value) return;
+  const r = btnRef.value.getBoundingClientRect();
+  const dropW = Math.max(r.width, 260);
+  const dropH = dropRef.value ? dropRef.value.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;
+  }
+
+  pos.value = { top, left, width: dropW };
+};
+
+const handleWindowClick = (e: MouseEvent) => {
+  if (!open.value) return;
+  const target = e.target as Node;
+  if (wrapRef.value?.contains(target)) return;
+  if (dropRef.value?.contains(target)) return;
+  open.value = false;
+  view.value = "day";
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value) {
+    open.value = false;
+    view.value = "day";
+  }
+};
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    calcPos();
+    window.addEventListener("scroll", calcPos, true);
+    window.addEventListener("resize", calcPos);
+    document.addEventListener("mousedown", handleWindowClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    nextTick(calcPos);
+  } else {
+    window.removeEventListener("scroll", calcPos, true);
+    window.removeEventListener("resize", calcPos);
+    document.removeEventListener("mousedown", handleWindowClick, true);
+    document.removeEventListener("keydown", handleKeyDown);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", calcPos, true);
+  window.removeEventListener("resize", calcPos);
+  document.removeEventListener("mousedown", handleWindowClick, true);
+  document.removeEventListener("keydown", handleKeyDown);
+});
+
+const toggleOpen = () => {
+  if (props.disabled) return;
+  if (!open.value) calcPos();
+  open.value = !open.value;
+};
+
+function pick(date: Date) {
+  if (!date) return;
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.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;
+
+  const y = date.getFullYear();
+  const m = pad(date.getMonth() + 1);
+  const d = pad(date.getDate());
+  const strVal = `${y}-${m}-${d}`;
+
+  if (typeof currentVal.value === "string" || currentVal.value === undefined) {
+    emit("update:modelValue", strVal);
+    emit("update:value", strVal);
+    emit("change", strVal);
+  } else {
+    emit("update:modelValue", date);
+    emit("update:value", date);
+    emit("change", date);
+  }
+
+  if (!props.showTime) {
+    open.value = false;
+    view.value = "day";
+  }
+}
+
+function handleClear(e: MouseEvent) {
+  e.stopPropagation();
+  emit("update:modelValue", null);
+  emit("update:value", null);
+  emit("change", null);
+  emit("clear");
+}
+
+const changeDay = (delta: number) => {
+  if (props.disabled) return;
+  const current = toDate(currentVal.value) || new Date();
+  const next = new Date(
+    current.getFullYear(),
+    current.getMonth(),
+    current.getDate() + delta
+  );
+
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.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;
+
+  pick(next);
+};
+
+const isNavNextDisabled = () => {
+  const maxD = toDate(props.maxDate);
+  if (!maxD) return false;
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  if (view.value === "day") {
+    const nextMonthStart = new Date(y, m + 1, 1);
+    return nextMonthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  }
+  if (view.value === "month") {
+    const nextYearStart = new Date(y + 1, 0, 1);
+    return nextYearStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  }
+  if (view.value === "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(props.minDate);
+  if (!minD) return false;
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  if (view.value === "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.value === "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.value === "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: number) {
+  if (dir > 0 && isNavNextDisabled()) return;
+  if (dir < 0 && isNavPrevDisabled()) return;
+  const c = new Date(cursor.value);
+  if (view.value === "day") c.setMonth(c.getMonth() + dir);
+  if (view.value === "month") c.setFullYear(c.getFullYear() + dir);
+  if (view.value === "year") c.setFullYear(c.getFullYear() + dir * 12);
+  cursor.value = c;
+}
+
+function cycleView() {
+  view.value = view.value === "day" ? "month" : "year";
+}
+
+const valDate = computed(() => toDate(currentVal.value));
+
+const formatted = computed(() => {
+  const vd = valDate.value;
+  const formattedTime =
+    props.showTime && props.timeValue ? ` ${props.timeValue}` : "";
+  if (vd) {
+    const mName = loc.value.months[vd.getMonth()] || "";
+    return `${mName} ${vd.getDate()}, ${vd.getFullYear()}${formattedTime}`;
+  }
+  if (typeof currentVal.value === "string" && currentVal.value) {
+    return `${currentVal.value}${formattedTime}`;
+  }
+  return null;
+});
+
+const headerLabel = computed(() => {
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  if (view.value === "day") {
+    return `${loc.value.months[m]} ${y}`;
+  }
+  if (view.value === "month") {
+    return `${y}`;
+  }
+  const base = Math.floor(y / 12) * 12;
+  return `${base} – ${base + 11}`;
+});
+
+const daysCells = computed(() => {
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  const first = new Date(y, m, 1).getDay(); // 0=Sun
+  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: Array<{ day: number; cur: boolean; next: boolean; date: Date }> =
+    [];
+  for (let i = offset - 1; i >= 0; i--) {
+    const d = prevDays - i;
+    cells.push({ day: d, cur: false, next: false, date: new Date(y, m - 1, d) });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, cur: true, next: false, date: new Date(y, m, d) });
+  }
+  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, date: new Date(y, m + 1, d) });
+  }
+  return cells;
+});
+
+const yearsList = computed(() => {
+  const base = Math.floor(cursor.value.getFullYear() / 12) * 12;
+  return Array.from({ length: 12 }, (_, i) => base + i);
+});
+
+const isCellDisabled = (date: Date) => {
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  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));
+  return Boolean(disMin || disMax);
+};
+
+const isMonthDisabled = (monthIndex: number) => {
+  const y = cursor.value.getFullYear();
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  const monthStart = new Date(y, monthIndex, 1);
+  const monthEnd = new Date(y, monthIndex + 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));
+  return Boolean(disMin || disMax);
+};
+
+const isYearDisabled = (yr: number) => {
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  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));
+  return Boolean(disMin || disMax);
+};
+
+const showStepperEffective = computed(
+  () => props.showStepper && props.stepperPosition !== "off"
+);
+const posMode = computed(() => {
+  const p = props.stepperPosition;
+  if (p === "left" || p === "start") return "left";
+  if (p === "right" || p === "end") return "right";
+  return "around";
+});
+</script>
+
+<template>
+  <div
+    ref="wrapRef"
+    :style="{
+      display: fullWidth || style?.display === 'flex' ? 'flex' : 'inline-flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: style?.width || (fullWidth ? '100%' : 'auto'),
+      maxWidth: style?.maxWidth || (fullWidth ? '100%' : '320px'),
+      boxSizing: 'border-box',
+      minWidth: 0,
+      ...style,
+    }"
+  >
+    <label
+      v-if="label"
+      style="
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--t2, var(--muted, #797b8d));
+        text-transform: uppercase;
+        letter-spacing: .08em;
+        display: block;
+        margin-bottom: 4px;
+        user-select: none;
+      "
+    >
+      {{ label }}
+    </label>
+
+    <div
+      style="
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+      "
+    >
+      <!-- Left stepper buttons -->
+      <button
+        v-if="showStepperEffective && (posMode === 'around' || posMode === 'left')"
+        type="button"
+        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() - 1)))"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          color: var(--muted, #797b8d);
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: all .15s;
+        "
+        :style="{
+          width: `${s.btnSize}px`,
+          height: `${s.btnSize}px`,
+          opacity: disabled ? 0.35 : 1,
+        }"
+        title="Previous day (-1)"
+        @click.stop="changeDay(-1)"
+      >
+        <ChevronLeft :size="s.iconSize + 2" />
+      </button>
+
+      <!-- Trigger button -->
+      <button
+        ref="btnRef"
+        type="button"
+        :disabled="disabled"
+        style="
+          display: flex;
+          align-items: center;
+          gap: 7px;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          font-family: var(--sans, inherit);
+          transition: border-color .15s;
+          white-space: nowrap;
+          min-width: 0;
+          flex: 1;
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          overflow: hidden;
+        "
+        :style="{
+          height: `${s.height}px`,
+          padding: `0 ${s.paddingH}px`,
+          fontSize: `${s.fontSize}px`,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          opacity: disabled ? 0.5 : 1,
+          color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
+          borderColor: open ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)',
+        }"
+        @click="toggleOpen"
+      >
+        <Calendar
+          :size="s.iconSize"
+          style="color: var(--muted, #797b8d); flex-shrink: 0;"
+        />
+        <span
+          style="
+            flex: 1;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
+          "
+        >
+          {{ formatted || placeholder }}
+        </span>
+        <span
+          v-if="currentVal && clearable"
+          title="Clear"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--muted, #797b8d);
+            cursor: pointer;
+            flex-shrink: 0;
+            line-height: 1;
+            padding: 0 2px;
+          "
+          :style="{ fontSize: `${s.closeSize}px` }"
+          @click.stop="handleClear"
+        >
+          ✕
+        </span>
+      </button>
+
+      <!-- Right stepper buttons -->
+      <button
+        v-if="showStepperEffective && (posMode === 'around' || posMode === 'right')"
+        type="button"
+        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() + 1)))"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          color: var(--muted, #797b8d);
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: all .15s;
+        "
+        :style="{
+          width: `${s.btnSize}px`,
+          height: `${s.btnSize}px`,
+          opacity: disabled ? 0.35 : 1,
+        }"
+        title="Next day (+1)"
+        @click.stop="changeDay(1)"
+      >
+        <ChevronRight :size="s.iconSize + 2" />
+      </button>
+    </div>
+
+    <!-- Dropdown via Teleport -->
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="dropRef"
+        class="cynx-datepicker-drop"
+        :style="{
+          position: 'fixed',
+          top: `${pos.top}px`,
+          left: `${pos.left}px`,
+          width: `${pos.width}px`,
+          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: 'dpFadeIn .12s ease',
+          boxSizing: 'border-box',
+        }"
+        @mousedown.stop
+      >
+        <!-- Calendar Header -->
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+          "
+        >
+          <button
+            type="button"
+            :disabled="isNavPrevDisabled()"
+            style="
+              background: none;
+              border: none;
+              padding: 4px;
+              border-radius: var(--radxs, 6px);
+              color: var(--muted, #797b8d);
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+              transition: background .12s;
+            "
+            :style="{
+              opacity: isNavPrevDisabled() ? 0.35 : 1,
+              cursor: isNavPrevDisabled() ? 'not-allowed' : 'pointer',
+            }"
+            @click="nav(-1)"
+          >
+            <ChevronLeft :size="15" />
+          </button>
+
+          <button
+            type="button"
+            style="
+              background: none;
+              border: none;
+              cursor: pointer;
+              font-size: .82rem;
+              font-weight: 700;
+              color: var(--primary-text, #0f172a);
+              padding: 4px 8px;
+              border-radius: var(--radxs, 6px);
+              font-family: var(--sans, inherit);
+            "
+            @click="cycleView"
+          >
+            {{ headerLabel }}
+          </button>
+
+          <button
+            type="button"
+            :disabled="isNavNextDisabled()"
+            style="
+              background: none;
+              border: none;
+              padding: 4px;
+              border-radius: var(--radxs, 6px);
+              color: var(--muted, #797b8d);
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+              transition: background .12s;
+            "
+            :style="{
+              opacity: isNavNextDisabled() ? 0.35 : 1,
+              cursor: isNavNextDisabled() ? 'not-allowed' : 'pointer',
+            }"
+            @click="nav(1)"
+          >
+            <ChevronRight :size="15" />
+          </button>
+        </div>
+
+        <!-- Day View -->
+        <div v-if="view === 'day'">
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              margin-bottom: 4px;
+            "
+          >
+            <div
+              v-for="d in loc.days"
+              :key="d"
+              style="
+                text-align: center;
+                font-size: .68rem;
+                font-weight: 700;
+                color: var(--muted, #797b8d);
+                padding: 4px 0;
+                font-family: var(--mono, ui-monospace, monospace);
+              "
+            >
+              {{ d }}
+            </div>
+          </div>
+
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              gap: 1px;
+            "
+          >
+            <div
+              v-for="(c, i) in daysCells"
+              :key="i"
+              :style="{
+                position: 'relative',
+                textAlign: 'center',
+                padding: '6px 2px',
+                fontSize: c.cur ? '.8rem' : '.78rem',
+                fontWeight: isSameDay(c.date, currentVal) ? 700 : isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate()) ? 600 : 400,
+                borderRadius: 'var(--radxs, 6px)',
+                cursor: isCellDisabled(c.date) ? 'not-allowed' : 'pointer',
+                opacity: isCellDisabled(c.date) ? 0.35 : c.cur ? 1 : 0.65,
+                background: isSameDay(c.date, currentVal) ? 'var(--accent, #12675D)' : 'transparent',
+                color: isSameDay(c.date, currentVal)
+                  ? 'var(--def-btn-text, #ffffff)'
+                  : isCellDisabled(c.date)
+                  ? 'var(--border, #e2e8f0)'
+                  : isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate())
+                  ? 'var(--accent, #12675D)'
+                  : c.cur
+                  ? 'var(--primary-text, #0f172a)'
+                  : 'var(--muted, #797b8d)',
+                border: isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate()) && !isSameDay(c.date, currentVal)
+                  ? '1.5px solid var(--accent, #12675D)'
+                  : '1.5px solid transparent',
+                transition: 'background .12s, color .12s',
+              }"
+              @click="!isCellDisabled(c.date) && pick(c.date)"
+            >
+              {{ c.day }}
+              <span
+                v-if="badges[toKey(c.date.getFullYear(), c.date.getMonth(), c.day)]"
+                :style="{
+                  position: 'absolute',
+                  bottom: '2px',
+                  left: '50%',
+                  transform: 'translateX(-50%)',
+                  width: '4px',
+                  height: '4px',
+                  borderRadius: '50%',
+                  background: badges[toKey(c.date.getFullYear(), c.date.getMonth(), c.day)]?.color || 'var(--accent, #12675D)',
+                }"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Month View -->
+        <div
+          v-else-if="view === 'month'"
+          style="
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px;
+            padding: 4px 0;
+          "
+        >
+          <div
+            v-for="(mName, idx) in loc.months"
+            :key="idx"
+            :style="{
+              textAlign: 'center',
+              padding: '10px 4px',
+              borderRadius: 'var(--radxs, 6px)',
+              fontSize: '.82rem',
+              fontWeight: 600,
+              cursor: isMonthDisabled(idx) ? 'not-allowed' : 'pointer',
+              opacity: isMonthDisabled(idx) ? 0.35 : 1,
+              background: valDate && valDate.getFullYear() === cursor.getFullYear() && valDate.getMonth() === idx
+                ? 'var(--accent, #12675D)'
+                : 'transparent',
+              color: valDate && valDate.getFullYear() === cursor.getFullYear() && valDate.getMonth() === idx
+                ? 'var(--def-btn-text, #ffffff)'
+                : isMonthDisabled(idx)
+                ? 'var(--border, #e2e8f0)'
+                : 'var(--primary-text, #0f172a)',
+              transition: 'background .12s',
+            }"
+            @click="
+              () => {
+                if (isMonthDisabled(idx)) return;
+                const c = new Date(cursor);
+                c.setMonth(idx);
+                cursor = c;
+                view = 'day';
+              }
+            "
+          >
+            {{ mName }}
+          </div>
+        </div>
+
+        <!-- Year View -->
+        <div
+          v-else-if="view === 'year'"
+          style="
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px;
+            padding: 4px 0;
+          "
+        >
+          <div
+            v-for="yr in yearsList"
+            :key="yr"
+            :style="{
+              textAlign: 'center',
+              padding: '10px 4px',
+              borderRadius: 'var(--radxs, 6px)',
+              fontSize: '.82rem',
+              fontWeight: 600,
+              cursor: isYearDisabled(yr) ? 'not-allowed' : 'pointer',
+              opacity: isYearDisabled(yr) ? 0.35 : 1,
+              background: valDate && valDate.getFullYear() === yr ? 'var(--accent, #12675D)' : 'transparent',
+              color: valDate && valDate.getFullYear() === yr
+                ? 'var(--def-btn-text, #ffffff)'
+                : isYearDisabled(yr)
+                ? 'var(--border, #e2e8f0)'
+                : 'var(--primary-text, #0f172a)',
+              transition: 'background .12s',
+            }"
+            @click="
+              () => {
+                if (isYearDisabled(yr)) return;
+                const c = new Date(cursor);
+                c.setFullYear(yr);
+                cursor = c;
+                view = 'month';
+              }
+            "
+          >
+            {{ yr }}
+          </div>
+        </div>
+
+        <!-- Time Picker Footer (Optional) -->
+        <div
+          v-if="showTime"
+          style="
+            border-top: 1px solid var(--border-light, #ebebf0);
+            margin-top: 8px;
+            padding-top: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+          "
+        >
+          <div
+            style="
+              display: inline-flex;
+              align-items: center;
+              gap: 5px;
+              font-size: .76rem;
+              color: var(--muted, #797b8d);
+              fontWeight: 600;
+            "
+          >
+            <Clock :size="13" style="opacity: 0.85;" />
+            <span>{{ loc.time || 'Time:' }}</span>
+          </div>
+          <button
+            type="button"
+            style="
+              padding: 4px 10px;
+              border-radius: var(--radxs, 6px);
+              background: var(--accent, #12675D);
+              color: var(--def-btn-text, #ffffff);
+              border: none;
+              font-size: 11.5px;
+              font-weight: 600;
+              cursor: pointer;
+            "
+            @click="open = false; view = 'day';"
+          >
+            {{ loc.ok || 'OK' }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/vue/index.js

@@ -13,6 +13,7 @@ import Skeleton from "./components/Skeleton.vue";
 import Modal from "./components/Modal.vue";
 import Drawer from "./components/Drawer.vue";
 import Toggle from "./components/Toggle.vue";
+import DatePicker from "./components/DatePicker.vue";
 import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
 
@@ -31,6 +32,7 @@ export {
   Modal,
   Drawer,
   Toggle,
+  DatePicker,
   XTable,
   XThead,
   XTbody,
@@ -55,6 +57,7 @@ export default {
   Modal,
   Drawer,
   Toggle,
+  DatePicker,
   XTable,
   XThead,
   XTbody,