@bigbinary/neeto-atoms 1.0.35 → 1.0.37

package/dist/{DatePicker-B7SYjsog.js → DatePicker-CCN3b1oz.js}

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useState, useCallback, useEffect } from 'react';
-import { g as getDefaultOptions$1, t as toDate, c as constructFrom, m as millisecondsInHour, b as millisecondsInMinute, d as millisecondsInSecond, e as getWeekYear, s as startOfWeek, f as startOfISOWeek, h as getWeek, i as getISOWeek, j as addDays, k as getTimezoneOffsetInMilliseconds, l as enUS, n as longFormatters, o as isProtectedWeekYearToken, w as warnOrThrowProtectedError, p as isProtectedDayOfYearToken, q as format, C as Calendar$1 } from './Calendar-gPWbQa_c.js';
+import { g as getDefaultOptions$1, t as toDate, c as constructFrom, m as millisecondsInHour, b as millisecondsInMinute, d as millisecondsInSecond, e as getWeekYear, s as startOfWeek, f as startOfISOWeek, h as getWeek, i as getISOWeek, j as addDays, k as getTimezoneOffsetInMilliseconds, l as enUS, n as longFormatters, o as isProtectedWeekYearToken, w as warnOrThrowProtectedError, p as isProtectedDayOfYearToken, q as format, C as Calendar$1 } from './Calendar-CjOBwDbx.js';
 import { Popover, PopoverAnchor, PopoverContent } from './primitives/Popover.js';
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from './primitives/Field.js';
-import { c as cn } from './utils-DdHUxIdC.js';
+import { c as cn } from './utils-BJnb9o5c.js';
 import { Button } from './primitives/Button.js';
-import { d as dateToTimeValue, T as TimePickerPanel } from './TimePickerPanel-CiF0RExY.js';
+import { d as dateToTimeValue, T as TimePickerPanel } from './TimePickerPanel-DAhz3B2d.js';
 import { c as createLucideIcon } from './createLucideIcon-C8ycilSN.js';
 import { X } from './x-_o2T3n6D.js';
 
@@ -2649,343 +2649,518 @@ function cleanEscapedString(input) {
 const DEFAULT_DATE_FORMAT = "dd/MM/yyyy";
 const DEFAULT_TIME_FORMAT = "HH:mm:ss";
 const SIZE_CONFIG = {
-    small: { trigger: "h-7 text-xs", icon: "size-3.5" },
-    medium: { trigger: "h-8 text-sm", icon: "size-4" },
-    large: { trigger: "h-10 text-sm", icon: "size-4" },
+  small: { trigger: "h-7 text-xs", icon: "size-3.5" },
+  medium: { trigger: "h-8 text-sm", icon: "size-4" },
+  large: { trigger: "h-10 text-sm", icon: "size-4" }
 };
 
-/** Coerce dayjs/moment-like objects or date strings to native Date. */
 const toNativeDate = (value) => {
-    if (value == null)
-        return null;
-    if (value instanceof Date)
-        return value;
-    if (typeof value.toDate === "function") {
-        return value.toDate();
-    }
-    if (typeof value === "string") {
-        const parsed = new Date(value);
-        if (!isNaN(parsed.getTime()))
-            return parsed;
-    }
-    return null;
+  if (value == null) return null;
+  if (value instanceof Date) return value;
+  if (typeof value.toDate === "function") {
+    return value.toDate();
+  }
+  if (typeof value === "string") {
+    const parsed = new Date(value);
+    if (!isNaN(parsed.getTime())) return parsed;
+  }
+  return null;
 };
-/** Coerce a single or range value to native Date(s). */
 const coerceDateValue = (value, type) => {
-    if (value == null)
-        return null;
-    if (type === "range" && Array.isArray(value)) {
-        return [toNativeDate(value[0]), toNativeDate(value[1])];
-    }
-    return toNativeDate(value);
+  if (value == null) return null;
+  if (type === "range" && Array.isArray(value)) {
+    return [toNativeDate(value[0]), toNativeDate(value[1])];
+  }
+  return toNativeDate(value);
 };
-/** Convert dayjs/moment format tokens to date-fns format tokens. */
-const normalizeDateFormat = (fmt) => fmt
-    .replace(/YYYY/g, "yyyy")
-    .replace(/YY/g, "yy")
-    .replace(/DD/g, "dd")
-    .replace(/\bD\b/g, "d");
+const normalizeDateFormat = (fmt) => fmt.replace(/YYYY/g, "yyyy").replace(/YY/g, "yy").replace(/DD/g, "dd").replace(/\bD\b/g, "d");
 const formatDate = (date, formatStr) => {
-    if (!date)
-        return "";
-    try {
-        return format(date, normalizeDateFormat(formatStr));
-    }
-    catch {
-        return "";
-    }
+  if (!date) return "";
+  try {
+    return format(date, normalizeDateFormat(formatStr));
+  } catch {
+    return "";
+  }
 };
 const parseDate = (str, formatStr) => {
-    if (!str)
-        return null;
+  if (!str) return null;
+  try {
+    const parsed = parse(str, normalizeDateFormat(formatStr), /* @__PURE__ */ new Date());
+    if (!isNaN(parsed.getTime())) return parsed;
+  } catch {
+  }
+  const flexibleFormats = [
+    "dd/MM/yyyy",
+    "MM/dd/yyyy",
+    "yyyy-MM-dd",
+    "dd-MM-yyyy",
+    "dd/MM/yyyy HH:mm:ss",
+    "dd/MM/yyyy HH:mm"
+  ];
+  for (const fmt of flexibleFormats) {
+    if (fmt === formatStr) continue;
     try {
-        const parsed = parse(str, normalizeDateFormat(formatStr), new Date());
-        if (!isNaN(parsed.getTime()))
-            return parsed;
+      const parsed = parse(str, fmt, /* @__PURE__ */ new Date());
+      if (!isNaN(parsed.getTime())) return parsed;
+    } catch {
+      continue;
     }
-    catch {
-        // Strict parse failed, try flexible parsing below
-    }
-    // Flexible parsing: try common date formats as fallback
-    const flexibleFormats = [
-        "dd/MM/yyyy",
-        "MM/dd/yyyy",
-        "yyyy-MM-dd",
-        "dd-MM-yyyy",
-        "dd/MM/yyyy HH:mm:ss",
-        "dd/MM/yyyy HH:mm",
-    ];
-    for (const fmt of flexibleFormats) {
-        if (fmt === formatStr)
-            continue;
-        try {
-            const parsed = parse(str, fmt, new Date());
-            if (!isNaN(parsed.getTime()))
-                return parsed;
-        }
-        catch {
-            continue;
-        }
-    }
-    return null;
+  }
+  return null;
 };
 const applyTimeToDate = (date, time) => {
-    const result = new Date(date);
-    result.setHours(time.hours, time.minutes, time.seconds ?? 0, 0);
-    return result;
+  const result = new Date(date);
+  result.setHours(time.hours, time.minutes, time.seconds ?? 0, 0);
+  return result;
 };
-const getDisplayFormat = (dateFormat, timeFormat, showTime) => (showTime ? `${dateFormat} ${timeFormat}` : dateFormat);
+const getDisplayFormat = (dateFormat, timeFormat, showTime) => showTime ? `${dateFormat} ${timeFormat}` : dateFormat;
 
 const TIMEZONE_OPTIONS = [
-    { label: "Local", value: "" },
-    { label: "UTC", value: "utc" },
+  { label: "Local", value: "" },
+  { label: "UTC", value: "utc" }
 ];
-const TimezoneSelect = ({ value, onChange, className, }) => (jsxs("div", { className: cn("flex items-center gap-1.5 text-sm", className), children: [jsx("span", { className: "text-muted-foreground text-xs", children: "Timezone" }), jsx("select", { value: value ?? "", onChange: e => onChange(e.target.value || undefined), className: cn("rounded-md border border-input bg-background px-2 py-0.5 text-xs", "focus:outline-none focus:ring-1 focus:ring-ring"), "aria-label": "Select timezone", children: TIMEZONE_OPTIONS.map(opt => (jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }));
+const TimezoneSelect = ({
+  value,
+  onChange,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5 text-sm", className), children: [
+  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Timezone" }),
+  /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: value ?? "",
+      onChange: (e) => onChange(e.target.value || void 0),
+      className: cn(
+        "rounded-md border border-input bg-background px-2 py-0.5 text-xs",
+        "focus:outline-none focus:ring-1 focus:ring-ring"
+      ),
+      "aria-label": "Select timezone",
+      children: TIMEZONE_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+    }
+  )
+] });
 TimezoneSelect.displayName = "TimezoneSelect";
 
-const DatePickerFooter = ({ showTime, needConfirm, timezone, onTimezoneChange, onNow, onOk, className, }) => {
-    const showOkButton = showTime || needConfirm;
-    return (jsxs("div", { className: cn("flex items-center border-t border-border px-3 py-2", className), children: [jsx(Button, { variant: "ghost", size: "sm", onClick: onNow, className: "text-xs", children: "Now" }), jsx("div", { className: "flex-1" }), onTimezoneChange && (jsx(TimezoneSelect, { value: timezone, onChange: onTimezoneChange, className: "me-2" })), showOkButton && (jsx(Button, { size: "sm", onClick: onOk, className: "text-xs", children: "OK" }))] }));
+const DatePickerFooter = ({
+  showTime,
+  needConfirm,
+  timezone,
+  onTimezoneChange,
+  onNow,
+  onOk,
+  className
+}) => {
+  const showOkButton = showTime || needConfirm;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center border-t border-border px-3 py-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onNow, className: "text-xs", children: "Now" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        onTimezoneChange && /* @__PURE__ */ jsx(
+          TimezoneSelect,
+          {
+            value: timezone,
+            onChange: onTimezoneChange,
+            className: "me-2"
+          }
+        ),
+        showOkButton && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onOk, className: "text-xs", children: "OK" })
+      ]
+    }
+  );
 };
 DatePickerFooter.displayName = "DatePickerFooter";
 
-const DatePicker = forwardRef(({ value, defaultValue, onChange, type = "date", dateFormat = DEFAULT_DATE_FORMAT, timeFormat = DEFAULT_TIME_FORMAT, showTime = false, timePickerFormat = "24", showSeconds = false, minDate, maxDate, placeholder, label, error, helpText, size = "medium", disabled = false, allowClear = true, required = false, timezone, onTimezoneChange, onOk, needConfirm = false, onOpenChange, className, labelProps, }, ref) => {
+const DatePicker = forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    type = "date",
+    dateFormat = DEFAULT_DATE_FORMAT,
+    timeFormat = DEFAULT_TIME_FORMAT,
+    showTime = false,
+    timePickerFormat = "24",
+    showSeconds = false,
+    minDate,
+    maxDate,
+    placeholder,
+    label,
+    error,
+    helpText,
+    size = "medium",
+    disabled = false,
+    allowClear = true,
+    required = false,
+    timezone,
+    onTimezoneChange,
+    onOk,
+    needConfirm = false,
+    onOpenChange,
+    className,
+    labelProps
+  }, ref) => {
     const generatedId = useId();
     const errorId = `error_${generatedId}`;
     const helpTextId = `helpText_${generatedId}`;
     const containerRef = useRef(null);
-    const popoverContentId = useRef(`datepicker-popover-${generatedId}`).current;
+    const popoverContentId = useRef(
+      `datepicker-popover-${generatedId}`
+    ).current;
     const [open, setOpen] = useState(false);
     const [internalValue, setInternalValue] = useState(coerceDateValue(defaultValue, type) ?? null);
-    const currentValue = value !== undefined ? coerceDateValue(value, type) : internalValue;
-    const [calendarMonth, setCalendarMonth] = useState((type === "date"
-        ? (value ?? defaultValue)
-        : null) ?? new Date());
-    const [rangeSelectionStep, setRangeSelectionStep] = useState("from");
+    const currentValue = value !== void 0 ? coerceDateValue(value, type) : internalValue;
+    const [calendarMonth, setCalendarMonth] = useState(
+      (type === "date" ? value ?? defaultValue : null) ?? /* @__PURE__ */ new Date()
+    );
+    const [rangeSelectionStep, setRangeSelectionStep] = useState(
+      "from"
+    );
     const [pendingDate, setPendingDate] = useState(null);
     const [pendingTime, setPendingTime] = useState({
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0
     });
     const displayFormat = getDisplayFormat(dateFormat, timeFormat, showTime);
     const sizeConfig = SIZE_CONFIG[size];
-    const defaultPlaceholder = showTime
-        ? `${dateFormat.toUpperCase()} ${timeFormat}`
-        : dateFormat.toUpperCase();
+    const defaultPlaceholder = showTime ? `${dateFormat.toUpperCase()} ${timeFormat}` : dateFormat.toUpperCase();
     const getDisplayText = 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}`;
-        }
-        return formatDate(currentValue, displayFormat);
+      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}`;
+      }
+      return formatDate(currentValue, displayFormat);
     }, [currentValue, displayFormat, type]);
     const [inputText, setInputText] = useState(() => getDisplayText());
     useEffect(() => {
-        setInputText(getDisplayText());
+      setInputText(getDisplayText());
     }, [getDisplayText]);
     const closePopover = useCallback(() => {
-        setOpen(false);
-        onOpenChange?.(false);
-        setInputText(getDisplayText());
+      setOpen(false);
+      onOpenChange?.(false);
+      setInputText(getDisplayText());
     }, [onOpenChange, getDisplayText]);
     const openPopover = useCallback(() => {
-        setOpen(true);
-        onOpenChange?.(true);
-        setRangeSelectionStep("from");
-        const dateVal = type === "date" ? currentValue : null;
-        if (dateVal) {
-            setCalendarMonth(dateVal);
-            setPendingDate(dateVal);
-            setPendingTime(dateToTimeValue(dateVal));
-        }
-        else {
-            setPendingDate(null);
-            setPendingTime({ hours: 0, minutes: 0, seconds: 0 });
-        }
+      setOpen(true);
+      onOpenChange?.(true);
+      setRangeSelectionStep("from");
+      const dateVal = type === "date" ? currentValue : null;
+      if (dateVal) {
+        setCalendarMonth(dateVal);
+        setPendingDate(dateVal);
+        setPendingTime(dateToTimeValue(dateVal));
+      } else {
+        setPendingDate(null);
+        setPendingTime({ hours: 0, minutes: 0, seconds: 0 });
+      }
     }, [type, currentValue, onOpenChange]);
-    // Close on outside click
     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);
+      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) => {
-        setInternalValue(date);
-        if (date === null) {
-            onChange?.(null, "");
-            setInputText("");
-        }
-        else if (Array.isArray(date)) {
-            const formatted = [
-                formatDate(date[0], displayFormat),
-                formatDate(date[1], displayFormat),
-            ];
-            onChange?.(date, formatted);
-            setInputText(`${formatted[0]} - ${formatted[1]}`);
-        }
-        else {
-            const formatted = formatDate(date, displayFormat);
-            onChange?.(date, formatted);
-            setInputText(formatted);
-        }
+      setInternalValue(date);
+      if (date === null) {
+        onChange?.(null, "");
+        setInputText("");
+      } else if (Array.isArray(date)) {
+        const formatted = [
+          formatDate(date[0], displayFormat),
+          formatDate(date[1], displayFormat)
+        ];
+        onChange?.(date, formatted);
+        setInputText(`${formatted[0]} - ${formatted[1]}`);
+      } else {
+        const formatted = formatDate(date, displayFormat);
+        onChange?.(date, formatted);
+        setInputText(formatted);
+      }
     };
     const handleDateSelect = (selected) => {
-        if (!selected)
-            return;
-        setCalendarMonth(selected);
-        if (showTime || needConfirm) {
-            setPendingDate(selected);
-        }
-        else {
-            commitValue(selected);
-            setOpen(false);
-            onOpenChange?.(false);
-        }
+      if (!selected) return;
+      setCalendarMonth(selected);
+      if (showTime || needConfirm) {
+        setPendingDate(selected);
+      } else {
+        commitValue(selected);
+        setOpen(false);
+        onOpenChange?.(false);
+      }
     };
     const handleRangeSelect = (range) => {
-        if (!range)
-            return;
-        const from = range.from ?? null;
-        const to = range.to ?? null;
-        if (rangeSelectionStep === "from") {
-            // First click: store the "from" date, wait for "to"
-            setInternalValue([from, null]);
-            setRangeSelectionStep("to");
-        }
-        else {
-            // Second click: we have both dates
-            if (from && to) {
-                if (showTime || needConfirm) {
-                    setPendingDate(from);
-                }
-                else {
-                    commitValue([from, to]);
-                    setOpen(false);
-                    onOpenChange?.(false);
-                }
-            }
-            else if (from) {
-                // Clicked the same date again or reset — treat as new "from"
-                setInternalValue([from, null]);
-            }
-            setRangeSelectionStep("from");
+      if (!range) return;
+      const from = range.from ?? null;
+      const to = range.to ?? null;
+      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]);
         }
+        setRangeSelectionStep("from");
+      }
     };
     const handleTimeChange = (time) => {
-        setPendingTime(time);
+      setPendingTime(time);
     };
     const handleNow = () => {
-        const now = new Date();
-        if (showTime || needConfirm) {
-            setPendingDate(now);
-            setPendingTime(dateToTimeValue(now));
-        }
-        else {
-            commitValue(now);
-            setOpen(false);
-            onOpenChange?.(false);
-        }
-    };
-    const handleOk = () => {
-        if (pendingDate) {
-            const finalDate = showTime
-                ? applyTimeToDate(pendingDate, pendingTime)
-                : pendingDate;
-            commitValue(finalDate);
-            onOk?.(finalDate);
-        }
+      const now = /* @__PURE__ */ new Date();
+      if (showTime || needConfirm) {
+        setPendingDate(now);
+        setPendingTime(dateToTimeValue(now));
+      } else {
+        commitValue(now);
         setOpen(false);
         onOpenChange?.(false);
+      }
+    };
+    const handleOk = () => {
+      if (pendingDate) {
+        const finalDate = showTime ? applyTimeToDate(pendingDate, pendingTime) : pendingDate;
+        commitValue(finalDate);
+        onOk?.(finalDate);
+      }
+      setOpen(false);
+      onOpenChange?.(false);
     };
     const handleClear = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        commitValue(null);
+      e.stopPropagation();
+      e.preventDefault();
+      commitValue(null);
     };
     const handleInputChange = (e) => {
-        const text = e.target.value;
-        setInputText(text);
-        if (type === "range")
-            return;
-        const parsed = parseDate(text, displayFormat);
-        if (parsed) {
-            setCalendarMonth(parsed);
-            if (showTime || needConfirm) {
-                setPendingDate(parsed);
-                setPendingTime(dateToTimeValue(parsed));
-            }
-            else {
-                setInternalValue(parsed);
-            }
+      const text = e.target.value;
+      setInputText(text);
+      if (type === "range") return;
+      const parsed = parseDate(text, displayFormat);
+      if (parsed) {
+        setCalendarMonth(parsed);
+        if (showTime || needConfirm) {
+          setPendingDate(parsed);
+          setPendingTime(dateToTimeValue(parsed));
+        } else {
+          setInternalValue(parsed);
         }
+      }
     };
     const handleInputKeyDown = (e) => {
-        if (e.key === "Enter" && type !== "range") {
-            const parsed = parseDate(inputText, displayFormat);
-            if (parsed) {
-                commitValue(parsed);
-            }
-            setOpen(false);
-            onOpenChange?.(false);
-        }
-        else if (e.key === "Escape") {
-            closePopover();
+      if (e.key === "Enter" && type !== "range") {
+        const parsed = parseDate(inputText, displayFormat);
+        if (parsed) {
+          commitValue(parsed);
         }
+        setOpen(false);
+        onOpenChange?.(false);
+      } else if (e.key === "Escape") {
+        closePopover();
+      }
     };
     const handleInputFocus = () => {
-        if (!open)
-            openPopover();
+      if (!open) openPopover();
     };
     const hasField = !!(label || error || helpText);
     const showFooter = showTime || needConfirm || !!onTimezoneChange;
-    const ariaDescribedBy = [error ? errorId : null, helpText ? helpTextId : null]
-        .filter(Boolean)
-        .join(" ") || undefined;
-    const calendarDisabled = useCallback((date) => {
+    const ariaDescribedBy = [error ? errorId : null, helpText ? helpTextId : null].filter(Boolean).join(" ") || void 0;
+    const calendarDisabled = useCallback(
+      (date) => {
         if (minDate && date < new Date(minDate.setHours(0, 0, 0, 0)))
-            return true;
+          return true;
         if (maxDate && date > new Date(maxDate.setHours(23, 59, 59, 999)))
-            return true;
+          return true;
         return false;
-    }, [minDate, maxDate]);
+      },
+      [minDate, maxDate]
+    );
     const calendarSelected = useCallback(() => {
-        if (showTime || needConfirm)
-            return pendingDate ?? undefined;
-        return currentValue ?? undefined;
+      if (showTime || needConfirm) return pendingDate ?? void 0;
+      return currentValue ?? void 0;
     }, [showTime, needConfirm, pendingDate, currentValue]);
-    const triggerContent = (jsxs(Popover, { open: open, children: [jsx(PopoverAnchor, { asChild: true, children: jsxs("div", { ref: containerRef, className: cn("relative flex w-full items-center gap-2 rounded-md border border-input bg-background pe-8 ps-3", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", disabled && "cursor-not-allowed opacity-50", !!error && "border-destructive ring-destructive/20 ring-3", sizeConfig.trigger, !hasField && className), children: [jsx(Calendar, { className: cn("shrink-0 text-muted-foreground", sizeConfig.icon) }), jsx("input", { type: "text", disabled: disabled, "aria-label": label || "Pick a date", "aria-describedby": ariaDescribedBy, "aria-invalid": !!error || undefined, placeholder: placeholder ?? defaultPlaceholder, value: inputText, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onFocus: handleInputFocus, className: cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", "disabled:cursor-not-allowed", sizeConfig.trigger.split(" ").find(c => c.startsWith("text-"))) }), timezone && (jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: timezone.toUpperCase() })), allowClear && (jsx("button", { type: "button", onPointerDown: e => e.preventDefault(), onClick: handleClear, className: cn("absolute inset-y-0 end-2 flex items-center text-muted-foreground hover:text-foreground focus:outline-none", !(inputText && !disabled) && "invisible"), "aria-label": "Clear date", tabIndex: -1, children: jsx(X, { className: sizeConfig.icon }) }))] }) }), open && (jsxs(PopoverContent, { id: popoverContentId, className: "w-auto p-0", align: "start", onOpenAutoFocus: e => e.preventDefault(), onCloseAutoFocus: e => e.preventDefault(), onPointerDownOutside: e => e.preventDefault(), onInteractOutside: e => e.preventDefault(), children: [jsxs("div", { className: cn("flex", showTime && "flex-row"), children: [type === "date" ? (jsx(Calendar$1, { mode: "single", captionLayout: "dropdown", month: calendarMonth, onMonthChange: setCalendarMonth, selected: calendarSelected(), onSelect: handleDateSelect, disabled: calendarDisabled, ...(minDate && { fromDate: minDate }), ...(maxDate && { toDate: maxDate }) })) : (jsx(Calendar$1, { mode: "range", numberOfMonths: 2, captionLayout: "dropdown", month: calendarMonth, onMonthChange: setCalendarMonth, selected: currentValue
-                                    ? {
-                                        from: currentValue[0] ??
-                                            undefined,
-                                        to: currentValue[1] ??
-                                            undefined,
-                                    }
-                                    : undefined, onSelect: handleRangeSelect, disabled: calendarDisabled, ...(minDate && { fromDate: minDate }), ...(maxDate && { toDate: maxDate }) })), showTime && (jsx("div", { className: "border-inline-start border-border", children: jsx(TimePickerPanel, { value: pendingTime, onChange: handleTimeChange, format: timePickerFormat, showSeconds: showSeconds, disabled: disabled }) }))] }), showFooter && (jsx(DatePickerFooter, { showTime: showTime, needConfirm: needConfirm, timezone: timezone, onTimezoneChange: onTimezoneChange, onNow: handleNow, onOk: handleOk }))] }))] }));
+    const triggerContent = /* @__PURE__ */ jsxs(Popover, { open, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "relative flex w-full items-center gap-2 rounded-md border border-input bg-background pe-8 ps-3",
+            "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            disabled && "cursor-not-allowed opacity-50",
+            !!error && "border-destructive ring-destructive/20 ring-3",
+            sizeConfig.trigger,
+            !hasField && className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                className: cn("shrink-0 text-muted-foreground", sizeConfig.icon)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                disabled,
+                "aria-label": label || "Pick a date",
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": !!error || void 0,
+                placeholder: placeholder ?? defaultPlaceholder,
+                value: inputText,
+                onChange: handleInputChange,
+                onKeyDown: handleInputKeyDown,
+                onFocus: handleInputFocus,
+                className: cn(
+                  "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                  "disabled:cursor-not-allowed",
+                  sizeConfig.trigger.split(" ").find((c) => c.startsWith("text-"))
+                )
+              }
+            ),
+            timezone && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: timezone.toUpperCase() }),
+            allowClear && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onPointerDown: (e) => e.preventDefault(),
+                onClick: handleClear,
+                className: cn(
+                  "absolute inset-y-0 end-2 flex items-center text-muted-foreground hover:text-foreground focus:outline-none",
+                  !(inputText && !disabled) && "invisible"
+                ),
+                "aria-label": "Clear date",
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsx(X, { className: sizeConfig.icon })
+              }
+            )
+          ]
+        }
+      ) }),
+      open && /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          id: popoverContentId,
+          className: "w-auto p-0",
+          align: "start",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          onPointerDownOutside: (e) => e.preventDefault(),
+          onInteractOutside: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("flex", showTime && "flex-row"), children: [
+              type === "date" ? /* @__PURE__ */ jsx(
+                Calendar$1,
+                {
+                  mode: "single",
+                  captionLayout: "dropdown",
+                  month: calendarMonth,
+                  onMonthChange: setCalendarMonth,
+                  selected: calendarSelected(),
+                  onSelect: handleDateSelect,
+                  disabled: calendarDisabled,
+                  ...minDate && { fromDate: minDate },
+                  ...maxDate && { toDate: maxDate }
+                }
+              ) : /* @__PURE__ */ jsx(
+                Calendar$1,
+                {
+                  mode: "range",
+                  numberOfMonths: 2,
+                  captionLayout: "dropdown",
+                  month: calendarMonth,
+                  onMonthChange: setCalendarMonth,
+                  selected: currentValue ? {
+                    from: currentValue[0] ?? void 0,
+                    to: currentValue[1] ?? void 0
+                  } : void 0,
+                  onSelect: handleRangeSelect,
+                  disabled: calendarDisabled,
+                  ...minDate && { fromDate: minDate },
+                  ...maxDate && { toDate: maxDate }
+                }
+              ),
+              showTime && /* @__PURE__ */ jsx("div", { className: "border-inline-start border-border", children: /* @__PURE__ */ jsx(
+                TimePickerPanel,
+                {
+                  value: pendingTime,
+                  onChange: handleTimeChange,
+                  format: timePickerFormat,
+                  showSeconds,
+                  disabled
+                }
+              ) })
+            ] }),
+            showFooter && /* @__PURE__ */ jsx(
+              DatePickerFooter,
+              {
+                showTime,
+                needConfirm,
+                timezone,
+                onTimezoneChange,
+                onNow: handleNow,
+                onOk: handleOk
+              }
+            )
+          ]
+        }
+      )
+    ] });
     if (!hasField) {
-        return (jsx("div", { ref: ref, className: className, children: triggerContent }));
+      return /* @__PURE__ */ jsx("div", { ref, className, children: triggerContent });
     }
-    return (jsxs(Field, { ref: ref, "data-disabled": disabled || undefined, "data-invalid": !!error || undefined, className: className, children: [label && (jsxs(FieldLabel, { ...labelProps, children: [label, required && (jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" }))] })), jsxs(FieldContent, { children: [triggerContent, !!error && jsx(FieldError, { id: errorId, children: error }), helpText && (jsx(FieldDescription, { id: helpTextId, children: helpText }))] })] }));
-});
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ref,
+        "data-disabled": disabled || void 0,
+        "data-invalid": !!error || void 0,
+        className,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            FieldLabel,
+            {
+              ...labelProps,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(FieldContent, { children: [
+            triggerContent,
+            !!error && /* @__PURE__ */ jsx(FieldError, { id: errorId, children: error }),
+            helpText && /* @__PURE__ */ jsx(FieldDescription, { id: helpTextId, children: helpText })
+          ] })
+        ]
+      }
+    );
+  }
+);
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker as D };
-//# sourceMappingURL=DatePicker-B7SYjsog.js.map
+//# sourceMappingURL=DatePicker-CCN3b1oz.js.map