@underverse-ui/underverse 1.0.130 → 1.0.131

package/dist/index.d.cts

@@ -924,6 +924,7 @@ interface DateRangePickerProps {
     maxDate?: Date;
     /** Size variant */
     size?: "sm" | "md" | "lg";
+    disabled?: boolean;
 }
 declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
 declare const CompactDatePicker: React$1.FC<{
@@ -2867,6 +2868,10 @@ declare function formatDateWithDay(date: string | Date | null | undefined, local
  * // "25/12/2024 14:30" (older)
  */
 declare function formatDateSmart(date: string | Date | null | undefined, locale?: SupportedLocale): string;
+/**
+ * Parse date string based on locale
+ */
+declare function parseDateString(str: string, locale?: SupportedLocale): Date | null;
 
 type date_SupportedLocale = SupportedLocale;
 declare const date_formatDate: typeof formatDate;
@@ -2881,8 +2886,9 @@ declare const date_formatTimeAgo: typeof formatTimeAgo;
 declare const date_getDayOfWeek: typeof getDayOfWeek;
 declare const date_isToday: typeof isToday;
 declare const date_isYesterday: typeof isYesterday;
+declare const date_parseDateString: typeof parseDateString;
 declare namespace date {
-  export { type date_SupportedLocale as SupportedLocale, date_formatDate as formatDate, date_formatDateForInput as formatDateForInput, date_formatDateShort as formatDateShort, date_formatDateSmart as formatDateSmart, date_formatDateTime as formatDateTime, date_formatDateTimeForInput as formatDateTimeForInput, date_formatDateWithDay as formatDateWithDay, date_formatTime as formatTime, date_formatTimeAgo as formatTimeAgo, date_getDayOfWeek as getDayOfWeek, date_isToday as isToday, date_isYesterday as isYesterday };
+  export { type date_SupportedLocale as SupportedLocale, date_formatDate as formatDate, date_formatDateForInput as formatDateForInput, date_formatDateShort as formatDateShort, date_formatDateSmart as formatDateSmart, date_formatDateTime as formatDateTime, date_formatDateTimeForInput as formatDateTimeForInput, date_formatDateWithDay as formatDateWithDay, date_formatTime as formatTime, date_formatTimeAgo as formatTimeAgo, date_getDayOfWeek as getDayOfWeek, date_isToday as isToday, date_isYesterday as isYesterday, date_parseDateString as parseDateString };
 }
 
 /**

package/dist/index.d.ts

@@ -924,6 +924,7 @@ interface DateRangePickerProps {
     maxDate?: Date;
     /** Size variant */
     size?: "sm" | "md" | "lg";
+    disabled?: boolean;
 }
 declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
 declare const CompactDatePicker: React$1.FC<{
@@ -2867,6 +2868,10 @@ declare function formatDateWithDay(date: string | Date | null | undefined, local
  * // "25/12/2024 14:30" (older)
  */
 declare function formatDateSmart(date: string | Date | null | undefined, locale?: SupportedLocale): string;
+/**
+ * Parse date string based on locale
+ */
+declare function parseDateString(str: string, locale?: SupportedLocale): Date | null;
 
 type date_SupportedLocale = SupportedLocale;
 declare const date_formatDate: typeof formatDate;
@@ -2881,8 +2886,9 @@ declare const date_formatTimeAgo: typeof formatTimeAgo;
 declare const date_getDayOfWeek: typeof getDayOfWeek;
 declare const date_isToday: typeof isToday;
 declare const date_isYesterday: typeof isYesterday;
+declare const date_parseDateString: typeof parseDateString;
 declare namespace date {
-  export { type date_SupportedLocale as SupportedLocale, date_formatDate as formatDate, date_formatDateForInput as formatDateForInput, date_formatDateShort as formatDateShort, date_formatDateSmart as formatDateSmart, date_formatDateTime as formatDateTime, date_formatDateTimeForInput as formatDateTimeForInput, date_formatDateWithDay as formatDateWithDay, date_formatTime as formatTime, date_formatTimeAgo as formatTimeAgo, date_getDayOfWeek as getDayOfWeek, date_isToday as isToday, date_isYesterday as isYesterday };
+  export { type date_SupportedLocale as SupportedLocale, date_formatDate as formatDate, date_formatDateForInput as formatDateForInput, date_formatDateShort as formatDateShort, date_formatDateSmart as formatDateSmart, date_formatDateTime as formatDateTime, date_formatDateTimeForInput as formatDateTimeForInput, date_formatDateWithDay as formatDateWithDay, date_formatTime as formatTime, date_formatTimeAgo as formatTimeAgo, date_getDayOfWeek as getDayOfWeek, date_isToday as isToday, date_isYesterday as isYesterday, date_parseDateString as parseDateString };
 }
 
 /**

package/dist/index.js

@@ -8331,7 +8331,8 @@ __export(date_exports, {
   formatTimeAgo: () => formatTimeAgo,
   getDayOfWeek: () => getDayOfWeek,
   isToday: () => isToday,
-  isYesterday: () => isYesterday
+  isYesterday: () => isYesterday,
+  parseDateString: () => parseDateString
 });
 var localeMap = {
   en: "en-US",
@@ -8530,6 +8531,44 @@ function formatDateSmart(date, locale = "en") {
   }
   return formatDateTime(date, locale);
 }
+function parseDateString(str, locale = "en") {
+  if (!str) return null;
+  const cleaned = str.trim();
+  if (!cleaned) return null;
+  const parts = cleaned.split(/[\/\-\.\s]+/).filter(Boolean);
+  if (parts.length !== 3) return null;
+  let day = 0;
+  let month = 0;
+  let year = 0;
+  if (locale === "vi") {
+    day = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    year = parseInt(parts[2], 10);
+  } else if (locale === "ja" || locale === "ko") {
+    year = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    day = parseInt(parts[2], 10);
+  } else {
+    if (parts[0].length === 4) {
+      year = parseInt(parts[0], 10);
+      month = parseInt(parts[1], 10);
+      day = parseInt(parts[2], 10);
+    } else {
+      month = parseInt(parts[0], 10);
+      day = parseInt(parts[1], 10);
+      year = parseInt(parts[2], 10);
+    }
+  }
+  if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
+  if (year < 100) {
+    year += year >= 50 ? 1900 : 2e3;
+  }
+  const parsedDate = new Date(year, month - 1, day);
+  if (parsedDate.getFullYear() === year && parsedDate.getMonth() === month - 1 && parsedDate.getDate() === day) {
+    return parsedDate;
+  }
+  return null;
+}
 
 // src/components/DatePicker.tsx
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles, X as XIcon } from "lucide-react";
@@ -8562,8 +8601,83 @@ var DatePicker = ({
   const [viewMode, setViewMode] = React30.useState("calendar");
   const [localRequiredError, setLocalRequiredError] = React30.useState();
   const triggerRef = React30.useRef(null);
+  const inputRef = React30.useRef(null);
   const wheelContainerRef = React30.useRef(null);
   const wheelDeltaRef = React30.useRef(0);
+  const [isFocused, setIsFocused] = React30.useState(false);
+  const [inputValue, setInputValue] = React30.useState("");
+  React30.useEffect(() => {
+    if (value) {
+      const parsed = parseDateString(inputValue, locale);
+      const isSame = parsed && parsed.getTime() === value.getTime();
+      if (!isSame) {
+        setInputValue(formatDateShort(value, locale));
+      }
+    } else if (!isFocused) {
+      setInputValue("");
+    }
+  }, [value, locale, isFocused]);
+  const handleInputChange = (e) => {
+    const text = e.target.value;
+    setInputValue(text);
+    const parsedDate = parseDateString(text, locale);
+    if (parsedDate) {
+      if (!isDateDisabled(parsedDate)) {
+        onChange(parsedDate);
+        setViewDate(parsedDate);
+        setLocalRequiredError(void 0);
+      }
+    }
+  };
+  const handleInputBlur = () => {
+    setIsFocused(false);
+    if (!inputValue.trim()) {
+      if (required) {
+        setLocalRequiredError(tv("required"));
+      } else {
+        onChange(void 0);
+        setLocalRequiredError(void 0);
+      }
+    } else {
+      const parsedDate = parseDateString(inputValue, locale);
+      if (parsedDate && !isDateDisabled(parsedDate)) {
+        onChange(parsedDate);
+        setInputValue(formatDateShort(parsedDate, locale));
+        setLocalRequiredError(void 0);
+      } else {
+        if (value) {
+          setInputValue(formatDateShort(value, locale));
+          setLocalRequiredError(void 0);
+        } else {
+          setInputValue("");
+          if (required) {
+            setLocalRequiredError(tv("required"));
+          }
+        }
+      }
+    }
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const parsedDate = parseDateString(inputValue, locale);
+      if (parsedDate && !isDateDisabled(parsedDate)) {
+        onChange(parsedDate);
+        setInputValue(formatDateShort(parsedDate, locale));
+        setViewDate(parsedDate);
+        setIsOpen(false);
+        setLocalRequiredError(void 0);
+      } else if (!inputValue.trim() && !required) {
+        onChange(void 0);
+        setIsOpen(false);
+        setLocalRequiredError(void 0);
+      } else {
+        setIsOpen(false);
+      }
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
   const normalizeToLocalDay = React30.useCallback((date) => {
     if (!date) return null;
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
@@ -8954,7 +9068,7 @@ var DatePicker = ({
       {
         id: labelId,
         htmlFor: resolvedId,
-        onClick: () => triggerRef.current?.focus(),
+        onClick: () => inputRef.current?.focus(),
         className: cn(
           labelSize,
           "font-semibold transition-colors duration-300 cursor-pointer",
@@ -9003,12 +9117,12 @@ var DatePicker = ({
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         trigger: /* @__PURE__ */ jsxs24(
-          "button",
+          "div",
           {
             ref: triggerRef,
-            type: "button",
-            disabled,
             id: resolvedId,
+            role: "button",
+            "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
             "aria-labelledby": labelId,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
@@ -9016,17 +9130,18 @@ var DatePicker = ({
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
               "rounded-full",
               sizeStyles8[size].trigger,
-              "border-border/60 hover:border-primary/40",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
+              disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
+                "border-border/60 hover:border-primary/40",
+                "focus-within:ring-2 focus-within:ring-primary/50 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:border-transparent focus-within:hover:border-transparent",
+                "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5"
+              ],
               "transition-all duration-300 ease-out",
-              isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
+              isOpen && !isFocused && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5",
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2.5 flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsx35(
                   "div",
                   {
@@ -9038,14 +9153,31 @@ var DatePicker = ({
                   }
                 ),
                 /* @__PURE__ */ jsx35(
-                  "span",
+                  "input",
                   {
-                    className: cn("truncate font-medium transition-colors duration-200", !value && "text-muted-foreground", value && "text-foreground"),
-                    children: value ? formatDateDisplay(value) : placeholder || t("placeholder")
+                    ref: inputRef,
+                    type: "text",
+                    disabled,
+                    placeholder: placeholder || t("placeholder"),
+                    value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
+                    onChange: handleInputChange,
+                    onFocus: () => {
+                      setIsFocused(true);
+                      if (!disabled) setIsOpen(true);
+                    },
+                    onBlur: handleInputBlur,
+                    onKeyDown: handleInputKeyDown,
+                    onClick: (e) => {
+                      if (isOpen) {
+                        e.stopPropagation();
+                      }
+                    },
+                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
                   }
-                )
+                ),
+                /* @__PURE__ */ jsx35("span", { className: "sr-only", children: value ? formatDateDisplay(value) : placeholder || t("placeholder") })
               ] }),
-              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1 shrink-0", children: [
                 value && /* @__PURE__ */ jsx35(
                   "span",
                   {
@@ -9105,7 +9237,8 @@ var DateRangePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  size = "md"
+  size = "md",
+  disabled = false
 }) => {
   const locale = useSmartLocale();
   const t = useSmartTranslations("DatePicker");
@@ -9115,6 +9248,165 @@ var DateRangePicker = ({
   const [localRequiredError, setLocalRequiredError] = React30.useState();
   const wheelContainerRef = React30.useRef(null);
   const wheelDeltaRef = React30.useRef(0);
+  const triggerRef = React30.useRef(null);
+  const inputRef = React30.useRef(null);
+  const [isFocused, setIsFocused] = React30.useState(false);
+  const [inputValue, setInputValue] = React30.useState("");
+  const todayDate = React30.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  }, []);
+  const getRangeString = React30.useCallback((s, e) => {
+    if (!s) return "";
+    const startStr = formatDateShort(s, locale);
+    if (!e) return `${startStr} - `;
+    return `${startStr} - ${formatDateShort(e, locale)}`;
+  }, [locale]);
+  React30.useEffect(() => {
+    if (startDate) {
+      const parts = inputValue.split(/\s*-\s*/);
+      const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
+      const inputEnd = parts[1] ? parseDateString(parts[1], locale) : null;
+      const startSame = inputStart && startDate && inputStart.getTime() === startDate.getTime();
+      const endSame = !endDate && !inputEnd || endDate && inputEnd && endDate.getTime() === inputEnd.getTime();
+      if (!(startSame && endSame)) {
+        setInputValue(getRangeString(startDate, endDate));
+      }
+    } else if (!isFocused) {
+      setInputValue("");
+    }
+  }, [startDate, endDate, locale, isFocused, getRangeString]);
+  const handleInputChange = (e) => {
+    const text = e.target.value;
+    setInputValue(text);
+    const parts = text.split(/\s*-\s*/);
+    if (parts.length === 2) {
+      const s = parseDateString(parts[0], locale);
+      const eVal = parseDateString(parts[1], locale);
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          setTempStart(s);
+          if (eVal) {
+            const isEndDisabled = disablePastDates && eVal < todayDate || !!minDay && eVal < minDay || !!maxDay && eVal > maxDay;
+            if (!isEndDisabled && s <= eVal) {
+              setTempEnd(eVal);
+              onChange(s, eVal);
+              setViewDate(s);
+              setLocalRequiredError(void 0);
+            } else {
+              setTempEnd(null);
+              onChange(s, null);
+            }
+          } else {
+            setTempEnd(null);
+            onChange(s, null);
+          }
+        }
+      }
+    } else if (parts.length === 1 && parts[0].trim()) {
+      const s = parseDateString(parts[0], locale);
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          setTempStart(s);
+          setTempEnd(null);
+          onChange(s, null);
+        }
+      }
+    }
+  };
+  const handleInputBlur = () => {
+    setIsFocused(false);
+    if (!inputValue.trim()) {
+      if (required) {
+        setLocalRequiredError(tv("required"));
+      } else {
+        setTempStart(null);
+        setTempEnd(null);
+        onChange(void 0, void 0);
+        setLocalRequiredError(void 0);
+      }
+    } else {
+      const parts = inputValue.split(/\s*-\s*/);
+      const s = parts[0] ? parseDateString(parts[0], locale) : null;
+      const eVal = parts[1] ? parseDateString(parts[1], locale) : null;
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          if (eVal) {
+            const isEndDisabled = disablePastDates && eVal < todayDate || !!minDay && eVal < minDay || !!maxDay && eVal > maxDay;
+            if (!isEndDisabled && s <= eVal) {
+              setTempStart(s);
+              setTempEnd(eVal);
+              onChange(s, eVal);
+              setInputValue(getRangeString(s, eVal));
+              setLocalRequiredError(void 0);
+              return;
+            }
+          } else {
+            setTempStart(s);
+            setTempEnd(null);
+            onChange(s, null);
+            setInputValue(getRangeString(s, null));
+            setLocalRequiredError(void 0);
+            return;
+          }
+        }
+      }
+      if (startDate) {
+        setTempStart(normalizeToLocal(startDate));
+        setTempEnd(normalizeToLocal(endDate));
+        setInputValue(getRangeString(startDate, endDate));
+        setLocalRequiredError(void 0);
+      } else {
+        setTempStart(null);
+        setTempEnd(null);
+        setInputValue("");
+        if (required) {
+          setLocalRequiredError(tv("required"));
+        }
+      }
+    }
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const parts = inputValue.split(/\s*-\s*/);
+      const s = parts[0] ? parseDateString(parts[0], locale) : null;
+      const eVal = parts[1] ? parseDateString(parts[1], locale) : null;
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          if (eVal) {
+            const isEndDisabled = disablePastDates && eVal < todayDate || !!minDay && eVal < minDay || !!maxDay && eVal > maxDay;
+            if (!isEndDisabled && s <= eVal) {
+              setTempStart(s);
+              setTempEnd(eVal);
+              onChange(s, eVal);
+              setInputValue(getRangeString(s, eVal));
+              setViewDate(s);
+              setIsOpen(false);
+              setLocalRequiredError(void 0);
+              return;
+            }
+          } else {
+            setTempStart(s);
+            setTempEnd(null);
+            onChange(s, null);
+            setInputValue(getRangeString(s, null));
+            setViewDate(s);
+            setIsOpen(false);
+            setLocalRequiredError(void 0);
+            return;
+          }
+        }
+      }
+      setIsOpen(false);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
   const sizeStyles8 = {
     sm: {
       trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
@@ -9393,10 +9685,6 @@ var DateRangePicker = ({
       );
     }) });
   };
-  const todayDate = React30.useMemo(() => {
-    const today = /* @__PURE__ */ new Date();
-    return new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  }, []);
   const isTodayUnavailable = !!minDay && todayDate < minDay || !!maxDay && todayDate > maxDay;
   const panel = /* @__PURE__ */ jsxs24("div", { ref: wheelContainerRef, className: "w-full", children: [
     /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center justify-between px-1", sizeStyles8[size].headerMargin), children: [
@@ -9531,7 +9819,14 @@ var DateRangePicker = ({
       {
         id: labelId,
         htmlFor: resolvedId,
-        className: cn(size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm", "font-medium text-foreground", effectiveError && "text-destructive", labelClassName),
+        onClick: () => inputRef.current?.focus(),
+        className: cn(
+          size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+          "font-medium transition-colors duration-300",
+          disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground group-focus-within:text-primary hover:text-primary cursor-pointer",
+          effectiveError && "text-destructive",
+          labelClassName
+        ),
         children: [
           label,
           required && /* @__PURE__ */ jsx35("span", { className: "text-destructive ml-1", children: "*" })
@@ -9547,6 +9842,7 @@ var DateRangePicker = ({
         onChange: () => {
         },
         required,
+        disabled,
         onInvalid: (e) => {
           e.preventDefault();
           setLocalRequiredError(tv("required"));
@@ -9560,6 +9856,7 @@ var DateRangePicker = ({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
+        disabled,
         contentWidth: sizeStyles8[size].contentWidth,
         contentClassName: cn(
           "p-0",
@@ -9570,25 +9867,29 @@ var DateRangePicker = ({
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         trigger: /* @__PURE__ */ jsxs24(
-          "button",
+          "div",
           {
+            ref: triggerRef,
             id: resolvedId,
-            type: "button",
+            role: "button",
+            "aria-label": tempStart ? displayLabel : placeholder,
             "aria-labelledby": labelId,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm",
               sizeStyles8[size].trigger,
-              "border-border/60 hover:border-primary/40",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-              "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
+              disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
+                "border-border/60 hover:border-primary/40",
+                "focus-within:ring-2 focus-within:ring-primary/50 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:border-transparent focus-within:hover:border-transparent",
+                "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5"
+              ],
               "transition-all duration-300 ease-out",
-              isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5"
+              isOpen && !isFocused && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+              /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center flex-1 min-w-0", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
                 /* @__PURE__ */ jsx35(
                   "div",
                   {
@@ -9600,16 +9901,29 @@ var DateRangePicker = ({
                   }
                 ),
                 /* @__PURE__ */ jsx35(
-                  "span",
+                  "input",
                   {
-                    className: cn(
-                      "truncate font-medium transition-colors duration-200",
-                      !tempStart && !tempEnd && "text-muted-foreground",
-                      (tempStart || tempEnd) && "text-foreground"
-                    ),
-                    children: displayLabel
+                    ref: inputRef,
+                    type: "text",
+                    disabled,
+                    placeholder,
+                    value: isFocused ? inputValue : tempStart ? displayLabel : "",
+                    onChange: handleInputChange,
+                    onFocus: () => {
+                      setIsFocused(true);
+                      if (!disabled) setIsOpen(true);
+                    },
+                    onBlur: handleInputBlur,
+                    onKeyDown: handleInputKeyDown,
+                    onClick: (e) => {
+                      if (isOpen) {
+                        e.stopPropagation();
+                      }
+                    },
+                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
                   }
-                )
+                ),
+                /* @__PURE__ */ jsx35("span", { className: "sr-only", children: tempStart ? displayLabel : placeholder })
               ] }),
               /* @__PURE__ */ jsx35("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx35("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx35("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]