@bigbinary/neeto-atoms 1.0.56 → 1.0.58

package/dist/cjs/{DatePicker-JhQ7D2bu.js → DatePicker-BZd4rM2R.js}

@@ -6,11 +6,13 @@ var primitives_Calendar = require('./primitives/Calendar.js');
 var primitives_Popover = require('./primitives/Popover.js');
 var primitives_Field = require('./primitives/Field.js');
 var utils$1 = require('./utils-BhM0B89p.js');
+var TimePickerPanel = require('./TimePickerPanel-DX6cjrSN.js');
 var pureDayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var TimePickerPanel = require('./TimePickerPanel-B5h5khbs.js');
 var primitives_Button = require('./primitives/Button.js');
+var chevronLeft = require('./chevron-left-BldoOh5p.js');
+var chevronRight = require('./chevron-right-0jNdwX2Q.js');
 var createLucideIcon = require('./createLucideIcon-D0tRgV6l.js');
 var x = require('./x-Brw3FJst.js');
 
@@ -37,6 +39,11 @@ const Calendar = createLucideIcon.createLucideIcon("calendar", __iconNode);
 
 const DEFAULT_DATE_FORMAT = "dd/MM/yyyy";
 const DEFAULT_TIME_FORMAT = "HH:mm:ss";
+const INITIAL_TIME_VALUE = {
+  hours: 0,
+  minutes: 0,
+  seconds: 0
+};
 const SIZE_CONFIG = {
   small: {
     trigger: "h-8 md:h-7",
@@ -130,6 +137,10 @@ const getDisplayFormat = (dateFormat, timeFormat, showTime) => {
   const fmt = showTime ? `${dateFormat} ${timeFormat}` : dateFormat;
   return normalizeToDateFnsFormat(fmt);
 };
+const getDatePlaceholder = (dateFormat, timeFormat, showTime, type) => {
+  const single = showTime ? `${dateFormat.toUpperCase()} ${timeFormat}` : dateFormat.toUpperCase();
+  return type === "range" ? `${single} - ${single}` : single;
+};
 const isDatePartComplete = (part, maskEnabled, singleDateLen) => maskEnabled ? part.length >= singleDateLen : part.length > 0;
 const parseRangeText = (text, displayFormat, maskEnabled, singleDateLen) => {
   const parts = text.split(" - ");
@@ -140,6 +151,43 @@ const parseRangeText = (text, displayFormat, maskEnabled, singleDateLen) => {
   const to = parseDate(parts[1], displayFormat);
   return from && to ? [from, to] : null;
 };
+const startOfWeek = (date, weekStartsOn = 0) => {
+  const d = new Date(date);
+  const diff = (d.getDay() - weekStartsOn + 7) % 7;
+  d.setDate(d.getDate() - diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+};
+const weekDaysFrom = (start) => Array.from({ length: 7 }, (_, i) => {
+  const d = new Date(start);
+  d.setDate(start.getDate() + i);
+  return d;
+});
+const isMonthDisabled = (monthDate, minDate, maxDate) => {
+  const monthStart = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
+  const monthEnd = new Date(
+    monthDate.getFullYear(),
+    monthDate.getMonth() + 1,
+    0,
+    23,
+    59,
+    59,
+    999
+  );
+  if (maxDate && monthStart > maxDate) return true;
+  if (minDate && monthEnd < minDate) return true;
+  return false;
+};
+const isYearDisabled = (yearDate, minDate, maxDate) => {
+  const yearStart = new Date(yearDate.getFullYear(), 0, 1);
+  const yearEnd = new Date(yearDate.getFullYear(), 11, 31, 23, 59, 59, 999);
+  if (maxDate && yearStart > maxDate) return true;
+  if (minDate && yearEnd < minDate) return true;
+  return false;
+};
+const buildMonth = (year, month) => new Date(year, month, 1);
+const isSameMonth = (a, b) => !!a && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+const decadeStartFor = (year) => Math.floor(year / 10) * 10;
 
 const TIMEZONE_OPTIONS = [
   { label: "Local", value: "" },
@@ -202,11 +250,136 @@ const DatePickerFooter = ({
 };
 DatePickerFooter.displayName = "DatePickerFooter";
 
+const MonthPicker = ({
+  value,
+  displayedYear,
+  onYearChange,
+  onSelect,
+  isDisabled,
+  locale
+}) => {
+  const months = Array.from(
+    { length: 12 },
+    (_, m) => buildMonth(displayedYear, m)
+  );
+  const monthName = (date) => date.toLocaleString(locale, { month: "short" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background flex w-[16rem] flex-col gap-3 p-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Button.Button,
+        {
+          "aria-label": "Previous year",
+          size: "icon",
+          variant: "ghost",
+          onClick: () => onYearChange(displayedYear - 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.ChevronLeft, { className: "size-4 rtl:rotate-180" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: displayedYear }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Button.Button,
+        {
+          "aria-label": "Next year",
+          size: "icon",
+          variant: "ghost",
+          onClick: () => onYearChange(displayedYear + 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRight, { className: "size-4 rtl:rotate-180" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((monthDate) => {
+      const disabled = isDisabled?.(monthDate) ?? false;
+      const selected = isSameMonth(value, monthDate);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          "aria-pressed": selected,
+          className: utils$1.cn(
+            "rounded-md py-2 text-sm transition-colors",
+            "hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+            selected && "bg-primary text-primary-foreground hover:bg-primary"
+          ),
+          disabled,
+          type: "button",
+          onClick: () => onSelect(monthDate),
+          children: monthName(monthDate)
+        },
+        monthDate.getMonth()
+      );
+    }) })
+  ] });
+};
+
+const YearPicker = ({
+  value,
+  displayedYear,
+  onYearChange,
+  onSelect,
+  isDisabled
+}) => {
+  const decadeStart = decadeStartFor(displayedYear);
+  const years = Array.from({ length: 12 }, (_, i) => decadeStart - 1 + i);
+  const selectedYear = value?.getFullYear();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background flex w-[16rem] flex-col gap-3 p-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Button.Button,
+        {
+          "aria-label": "Previous decade",
+          size: "icon",
+          variant: "ghost",
+          onClick: () => onYearChange(decadeStart - 10),
+          children: /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.ChevronLeft, { className: "size-4 rtl:rotate-180" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
+        decadeStart,
+        "-",
+        decadeStart + 9
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Button.Button,
+        {
+          "aria-label": "Next decade",
+          size: "icon",
+          variant: "ghost",
+          onClick: () => onYearChange(decadeStart + 10),
+          children: /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRight, { className: "size-4 rtl:rotate-180" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: years.map((year) => {
+      const yearDate = new Date(year, 0, 1);
+      const disabled = isDisabled?.(yearDate) ?? false;
+      const selected = selectedYear === year;
+      const outsideDecade = year < decadeStart || year > decadeStart + 9;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          "aria-pressed": selected,
+          className: utils$1.cn(
+            "rounded-md py-2 text-sm transition-colors",
+            "hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+            outsideDecade && "text-muted-foreground",
+            selected && "bg-primary text-primary-foreground hover:bg-primary"
+          ),
+          disabled,
+          type: "button",
+          onClick: () => onSelect(yearDate),
+          children: year
+        },
+        year
+      );
+    }) })
+  ] });
+};
+
 const DatePicker = React.forwardRef(
   ({
     value,
     defaultValue,
     onChange,
+    onBlur,
     type = "date",
     dateFormat = DEFAULT_DATE_FORMAT,
     timeFormat = DEFAULT_TIME_FORMAT,
@@ -215,6 +388,7 @@ const DatePicker = React.forwardRef(
     showSeconds = false,
     minDate,
     maxDate,
+    disabledDate,
     placeholder,
     label,
     error,
@@ -227,9 +401,15 @@ const DatePicker = React.forwardRef(
     onTimezoneChange,
     onOk,
     needConfirm = false,
+    open: openProp,
     onOpenChange,
     className,
-    labelProps
+    labelProps,
+    picker = "date",
+    side = "bottom",
+    align = "start",
+    trigger,
+    weekStartsOn = 0
   }, ref) => {
     const generatedId = React.useId();
     const errorId = `error_${generatedId}`;
@@ -240,9 +420,10 @@ const DatePicker = React.forwardRef(
     const popoverContentId = React.useRef(
       `datepicker-popover-${generatedId}`
     ).current;
-    const [open, setOpen] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState(coerceDateValue(defaultValue, type) ?? null);
-    const currentValue = value !== void 0 ? coerceDateValue(value, type) : internalValue;
+    const { open, setOpen } = TimePickerPanel.useControlledOpen(openProp, onOpenChange);
+    const [internalValue, setInternalValue] = React.useState(
+      coerceDateValue(defaultValue, type) ?? null
+    );
     const [calendarMonth, setCalendarMonth] = React.useState(
       (type === "date" ? value ?? defaultValue : null) ?? /* @__PURE__ */ new Date()
     );
@@ -250,65 +431,47 @@ const DatePicker = React.forwardRef(
       "from"
     );
     const [pendingDate, setPendingDate] = React.useState(null);
-    const [pendingTime, setPendingTime] = React.useState({
-      hours: 0,
-      minutes: 0,
-      seconds: 0
-    });
+    const [pendingTime, setPendingTime] = React.useState(INITIAL_TIME_VALUE);
+    const currentValue = value !== void 0 ? coerceDateValue(value, type) : internalValue;
     const displayFormat = getDisplayFormat(dateFormat, timeFormat, showTime);
     const sizeConfig = SIZE_CONFIG[size];
     const maskEnabled = TimePickerPanel.isFixedWidthFormat(displayFormat);
+    const defaultPlaceholder = getDatePlaceholder(
+      dateFormat,
+      timeFormat,
+      showTime,
+      type
+    );
     const maskTemplate = React.useMemo(
       () => maskEnabled ? type === "range" ? TimePickerPanel.buildRangeMaskTemplate(displayFormat) : TimePickerPanel.buildMaskTemplate(displayFormat) : null,
       [displayFormat, type, maskEnabled]
     );
-    const singlePlaceholder = showTime ? `${dateFormat.toUpperCase()} ${timeFormat}` : dateFormat.toUpperCase();
-    const defaultPlaceholder = type === "range" ? `${singlePlaceholder} - ${singlePlaceholder}` : singlePlaceholder;
+    const singleDateLen = React.useMemo(
+      () => TimePickerPanel.buildMaskTemplate(displayFormat).pattern.length,
+      [displayFormat]
+    );
+    const calendarDisabled = React.useCallback(
+      (date) => {
+        if (disabledDate?.(date)) return true;
+        if (minDate && date < new Date(new Date(minDate).setHours(0, 0, 0, 0)))
+          return true;
+        if (maxDate && date > new Date(new Date(maxDate).setHours(23, 59, 59, 999)))
+          return true;
+        return false;
+      },
+      [minDate, maxDate, disabledDate]
+    );
     const getDisplayText = React.useCallback(() => {
-      if (type === "range") {
-        const rangeValue = currentValue;
-        if (!rangeValue || !rangeValue[0] && !rangeValue[1]) return "";
-        const from = rangeValue[0] ? formatDate(rangeValue[0], displayFormat) : "";
-        const to = rangeValue[1] ? formatDate(rangeValue[1], displayFormat) : "";
-        return `${from} - ${to}`;
+      if (type !== "range") {
+        return formatDate(currentValue, displayFormat);
       }
-      return formatDate(currentValue, displayFormat);
+      const rangeValue = currentValue;
+      if (!rangeValue || !rangeValue[0] && !rangeValue[1]) return "";
+      const from = rangeValue[0] ? formatDate(rangeValue[0], displayFormat) : "";
+      const to = rangeValue[1] ? formatDate(rangeValue[1], displayFormat) : "";
+      return `${from} - ${to}`;
     }, [currentValue, displayFormat, type]);
     const [inputText, setInputText] = React.useState(() => getDisplayText());
-    React.useEffect(() => {
-      if (!open) setInputText(getDisplayText());
-    }, [getDisplayText, open]);
-    const closePopover = React.useCallback(() => {
-      setOpen(false);
-      onOpenChange?.(false);
-      setInputText(getDisplayText());
-    }, [onOpenChange, getDisplayText]);
-    const openPopover = React.useCallback(() => {
-      setOpen(true);
-      onOpenChange?.(true);
-      setRangeSelectionStep("from");
-      const dateVal = type === "date" ? currentValue : null;
-      if (dateVal) {
-        setCalendarMonth(dateVal);
-        setPendingDate(dateVal);
-        setPendingTime(TimePickerPanel.dateToTimeValue(dateVal));
-      } else {
-        setPendingDate(null);
-        setPendingTime({ hours: 0, minutes: 0, seconds: 0 });
-      }
-    }, [type, currentValue, onOpenChange]);
-    React.useEffect(() => {
-      if (!open) return;
-      const handlePointerDown = (e) => {
-        const target = e.target;
-        if (containerRef.current?.contains(target)) return;
-        const popoverEl = document.getElementById(popoverContentId);
-        if (popoverEl?.contains(target)) return;
-        closePopover();
-      };
-      document.addEventListener("pointerdown", handlePointerDown);
-      return () => document.removeEventListener("pointerdown", handlePointerDown);
-    }, [open, closePopover]);
     const commitValue = (date) => {
       if (date === null) {
         setInternalValue(null);
@@ -336,16 +499,76 @@ const DatePicker = React.forwardRef(
       onChange?.(toDayjs(converted), formatted);
       setInputText(formatted);
     };
+    const parseAndApplyRange = (text) => {
+      const parts = text.split(" - ");
+      if (!isDatePartComplete(parts[0] ?? "", maskEnabled, singleDateLen))
+        return;
+      const from = parseDate(parts[0], displayFormat);
+      if (from) setCalendarMonth(from);
+      const range = parseRangeText(
+        text,
+        displayFormat,
+        maskEnabled,
+        singleDateLen
+      );
+      if (range) commitValue(range);
+    };
+    const commitPendingOnClose = React.useCallback(() => {
+      const hasOkButton = showTime || needConfirm;
+      if (!hasOkButton || !pendingDate) {
+        setInputText(getDisplayText());
+        return;
+      }
+      const finalDate = showTime ? applyTimeToDate(pendingDate, pendingTime) : pendingDate;
+      const currentSingle = type === "date" ? currentValue : null;
+      const isSame = currentSingle && finalDate.getTime() === currentSingle.getTime();
+      if (isSame) {
+        setInputText(getDisplayText());
+        return;
+      }
+      commitValue(finalDate);
+    }, [
+      showTime,
+      needConfirm,
+      pendingDate,
+      pendingTime,
+      type,
+      currentValue,
+      getDisplayText,
+      onChange
+    ]);
+    const closePopover = React.useCallback(() => {
+      commitPendingOnClose();
+      setOpen(false);
+    }, [commitPendingOnClose, setOpen]);
+    TimePickerPanel.useOutsideClickClose({
+      enabled: open,
+      containerRef,
+      popoverElementId: popoverContentId,
+      onClose: closePopover
+    });
+    const openPopover = () => {
+      setOpen(true);
+      setRangeSelectionStep("from");
+      const dateVal = type === "date" ? currentValue : null;
+      if (!dateVal) {
+        setPendingDate(null);
+        setPendingTime(INITIAL_TIME_VALUE);
+        return;
+      }
+      setCalendarMonth(dateVal);
+      setPendingDate(dateVal);
+      setPendingTime(TimePickerPanel.dateToTimeValue(dateVal));
+    };
     const handleDateSelect = (selected) => {
       if (!selected) return;
       setCalendarMonth(selected);
       if (showTime || needConfirm) {
         setPendingDate(selected);
-      } else {
-        commitValue(selected);
-        setOpen(false);
-        onOpenChange?.(false);
+        return;
       }
+      commitValue(selected);
+      setOpen(false);
     };
     const handleRangeSelect = (range) => {
       if (!range) return;
@@ -354,34 +577,29 @@ const DatePicker = React.forwardRef(
       if (rangeSelectionStep === "from") {
         setInternalValue([from, null]);
         setRangeSelectionStep("to");
-      } else {
-        if (from && to) {
-          if (showTime || needConfirm) {
-            setPendingDate(from);
-          } else {
-            commitValue([from, to]);
-            setOpen(false);
-            onOpenChange?.(false);
-          }
-        } else if (from) {
-          setInternalValue([from, null]);
+        return;
+      }
+      setRangeSelectionStep("from");
+      if (from && to) {
+        if (showTime || needConfirm) {
+          setPendingDate(from);
+          return;
         }
-        setRangeSelectionStep("from");
+        commitValue([from, to]);
+        setOpen(false);
+        return;
       }
-    };
-    const handleTimeChange = (time) => {
-      setPendingTime(time);
+      if (from) setInternalValue([from, null]);
     };
     const handleNow = () => {
       const now = toBrowserLocalDate(/* @__PURE__ */ new Date());
       if (showTime || needConfirm) {
         setPendingDate(now);
         setPendingTime(TimePickerPanel.dateToTimeValue(now));
-      } else {
-        commitValue(now);
-        setOpen(false);
-        onOpenChange?.(false);
+        return;
       }
+      commitValue(now);
+      setOpen(false);
     };
     const handleOk = () => {
       if (pendingDate) {
@@ -390,40 +608,12 @@ const DatePicker = React.forwardRef(
         onOk?.(finalDate);
       }
       setOpen(false);
-      onOpenChange?.(false);
     };
     const handleClear = (e) => {
       e.stopPropagation();
       e.preventDefault();
       commitValue(null);
     };
-    React.useLayoutEffect(() => {
-      if (cursorPosRef.current !== null && inputRef.current && document.activeElement === inputRef.current) {
-        inputRef.current.setSelectionRange(
-          cursorPosRef.current,
-          cursorPosRef.current
-        );
-        cursorPosRef.current = null;
-      }
-    });
-    const singleDateLen = React.useMemo(
-      () => TimePickerPanel.buildMaskTemplate(displayFormat).pattern.length,
-      [displayFormat]
-    );
-    const parseAndApplyRange = (text) => {
-      const parts = text.split(" - ");
-      if (!isDatePartComplete(parts[0] ?? "", maskEnabled, singleDateLen))
-        return;
-      const from = parseDate(parts[0], displayFormat);
-      if (from) setCalendarMonth(from);
-      const range = parseRangeText(
-        text,
-        displayFormat,
-        maskEnabled,
-        singleDateLen
-      );
-      if (range) commitValue(range);
-    };
     const handleInputChange = (e) => {
       let text = e.target.value;
       if (maskTemplate) {
@@ -449,12 +639,18 @@ const DatePicker = React.forwardRef(
       if (showTime || needConfirm) {
         setPendingDate(parsed);
         setPendingTime(TimePickerPanel.dateToTimeValue(parsed));
-      } else {
-        commitValue(parsed);
+        return;
       }
+      commitValue(parsed);
     };
     const handleInputKeyDown = (e) => {
-      if (e.key === "Escape") return closePopover();
+      if (e.key === "Escape") {
+        setPendingDate(null);
+        setPendingTime(INITIAL_TIME_VALUE);
+        setInputText(getDisplayText());
+        setOpen(false);
+        return;
+      }
       if (e.key !== "Enter") return;
       if (type === "range") {
         const range = parseRangeText(
@@ -469,31 +665,61 @@ const DatePicker = React.forwardRef(
         if (parsed) commitValue(parsed);
       }
       setOpen(false);
-      onOpenChange?.(false);
     };
-    const handleInputFocus = () => {
-      if (!open) openPopover();
+    const handleInputBlur = (e) => {
+      const next = e.relatedTarget;
+      if (next && containerRef.current?.contains(next)) return;
+      const popoverEl = document.getElementById(popoverContentId);
+      if (next && popoverEl?.contains(next)) return;
+      onBlur?.(e);
     };
+    React.useEffect(() => {
+      if (!open) setInputText(getDisplayText());
+    }, [getDisplayText, open]);
+    TimePickerPanel.useCursorRestore([{ inputRef, cursorRef: cursorPosRef }]);
+    React.useEffect(() => {
+      if (!open || type !== "date") return;
+      const dateVal = currentValue;
+      if (dateVal instanceof Date) setCalendarMonth(dateVal);
+    }, [open]);
     const hasField = !!(label || error || helpText);
     const showFooter = showTime || needConfirm || !!onTimezoneChange;
     const todayDate = toBrowserLocalDate(/* @__PURE__ */ new Date());
+    const handleGridPickerSelect = (date) => {
+      commitValue(date);
+      setOpen(false);
+    };
+    const handleSingleDateSelectWithPicker = (selected) => {
+      if (!selected) return handleDateSelect(void 0);
+      handleDateSelect(
+        picker === "week" ? startOfWeek(selected, weekStartsOn) : selected
+      );
+    };
+    const weekHighlightProps = (() => {
+      if (picker !== "week" || type !== "date" || !currentValue) return {};
+      const weekStart = startOfWeek(currentValue, weekStartsOn);
+      const weekDays = weekDaysFrom(weekStart);
+      return {
+        modifiers: {
+          weekStart: [weekDays[0]],
+          weekMiddle: weekDays.slice(1, 6),
+          weekEnd: [weekDays[6]]
+        },
+        modifiersClassNames: {
+          weekStart: "!bg-primary !text-primary-foreground !rounded-e-none hover:!bg-primary",
+          weekMiddle: "!bg-primary !text-primary-foreground !rounded-none hover:!bg-primary",
+          weekEnd: "!bg-primary !text-primary-foreground !rounded-s-none hover:!bg-primary"
+        }
+      };
+    })();
+    const weekRowHoverClassName = picker === "week" ? "[&_button]:!transition-none [&:hover_button]:!bg-primary [&:hover_button]:!text-primary-foreground [&:hover_button]:!rounded-none [&:hover_button]:cursor-pointer" : void 0;
     const ariaDescribedBy = [error ? errorId : null, helpText ? helpTextId : null].filter(Boolean).join(" ") || void 0;
-    const calendarDisabled = React.useCallback(
-      (date) => {
-        if (minDate && date < new Date(minDate.setHours(0, 0, 0, 0)))
-          return true;
-        if (maxDate && date > new Date(maxDate.setHours(23, 59, 59, 999)))
-          return true;
-        return false;
-      },
-      [minDate, maxDate]
-    );
-    const calendarSelected = React.useCallback(() => {
+    const calendarSelected = () => {
       if (showTime || needConfirm) return pendingDate ?? void 0;
       return currentValue ?? void 0;
-    }, [showTime, needConfirm, pendingDate, currentValue]);
-    const triggerContent = /* @__PURE__ */ jsxRuntime.jsxs(primitives_Popover.Popover, { open, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    };
+    const triggerContent = /* @__PURE__ */ jsxRuntime.jsxs(primitives_Popover.Popover, { open, onOpenChange: trigger ? setOpen : void 0, children: [
+      trigger ? /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverTrigger, { asChild: true, children: trigger }) : /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref: containerRef,
@@ -509,7 +735,10 @@ const DatePicker = React.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               Calendar,
               {
-                className: utils$1.cn("shrink-0 text-muted-foreground", sizeConfig.icon)
+                className: utils$1.cn(
+                  "shrink-0 text-muted-foreground",
+                  sizeConfig.icon
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -525,7 +754,10 @@ const DatePicker = React.forwardRef(
                 value: inputText,
                 onChange: handleInputChange,
                 onKeyDown: handleInputKeyDown,
-                onFocus: handleInputFocus,
+                onFocus: () => {
+                  if (!open) openPopover();
+                },
+                onBlur: handleInputBlur,
                 className: utils$1.cn(
                   "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
                   "disabled:cursor-not-allowed",
@@ -557,14 +789,35 @@ const DatePicker = React.forwardRef(
         {
           id: popoverContentId,
           className: "w-auto p-0",
-          align: "start",
+          align,
+          side,
           onOpenAutoFocus: (e) => e.preventDefault(),
           onCloseAutoFocus: (e) => e.preventDefault(),
           onPointerDownOutside: (e) => e.preventDefault(),
           onInteractOutside: (e) => e.preventDefault(),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils$1.cn("flex", showTime && "flex-row"), children: [
-              type === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
+              type === "date" && picker === "month" ? /* @__PURE__ */ jsxRuntime.jsx(
+                MonthPicker,
+                {
+                  value: currentValue ?? null,
+                  displayedYear: calendarMonth.getFullYear(),
+                  onYearChange: (year) => setCalendarMonth(
+                    new Date(year, calendarMonth.getMonth(), 1)
+                  ),
+                  onSelect: handleGridPickerSelect,
+                  isDisabled: (date) => isMonthDisabled(date, minDate, maxDate)
+                }
+              ) : type === "date" && picker === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
+                YearPicker,
+                {
+                  value: currentValue ?? null,
+                  displayedYear: calendarMonth.getFullYear(),
+                  onYearChange: (year) => setCalendarMonth(new Date(year, 0, 1)),
+                  onSelect: handleGridPickerSelect,
+                  isDisabled: (date) => isYearDisabled(date, minDate, maxDate)
+                }
+              ) : type === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
                 primitives_Calendar.Calendar,
                 {
                   mode: "single",
@@ -573,8 +826,11 @@ const DatePicker = React.forwardRef(
                   month: calendarMonth,
                   onMonthChange: setCalendarMonth,
                   selected: calendarSelected(),
-                  onSelect: handleDateSelect,
+                  onSelect: handleSingleDateSelectWithPicker,
                   disabled: calendarDisabled,
+                  weekStartsOn,
+                  classNames: weekRowHoverClassName ? { week: utils$1.cn("mt-2 flex w-full", weekRowHoverClassName) } : void 0,
+                  ...weekHighlightProps,
                   ...minDate && { fromDate: minDate },
                   ...maxDate && { toDate: maxDate }
                 }
@@ -585,6 +841,7 @@ const DatePicker = React.forwardRef(
                   numberOfMonths: 2,
                   captionLayout: "dropdown",
                   today: todayDate,
+                  weekStartsOn,
                   className: "[&_[data-outside][data-selected=true]]:!bg-transparent [&_[data-outside][data-selected=true]]:after:!bg-transparent [&_[data-outside]_button]:!bg-transparent [&_[data-outside]_button]:!text-muted-foreground",
                   month: calendarMonth,
                   onMonthChange: setCalendarMonth,
@@ -602,7 +859,7 @@ const DatePicker = React.forwardRef(
                 TimePickerPanel.TimePickerPanel,
                 {
                   value: pendingTime,
-                  onChange: handleTimeChange,
+                  onChange: setPendingTime,
                   format: timePickerFormat,
                   showSeconds,
                   disabled
@@ -658,4 +915,4 @@ const DatePicker = React.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 exports.DatePicker = DatePicker;
-//# sourceMappingURL=DatePicker-JhQ7D2bu.js.map
+//# sourceMappingURL=DatePicker-BZd4rM2R.js.map