@underverse-ui/underverse 1.0.130 → 1.0.131

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.130",
+  "version": "1.0.131",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

package/dist/index.cjs

@@ -8517,7 +8517,8 @@ __export(date_exports, {
   formatTimeAgo: () => formatTimeAgo,
   getDayOfWeek: () => getDayOfWeek,
   isToday: () => isToday,
-  isYesterday: () => isYesterday
+  isYesterday: () => isYesterday,
+  parseDateString: () => parseDateString
 });
 var localeMap = {
   en: "en-US",
@@ -8716,6 +8717,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
 var import_lucide_react15 = require("lucide-react");
@@ -8748,8 +8787,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());
@@ -9140,7 +9254,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",
@@ -9189,12 +9303,12 @@ var DatePicker = ({
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         trigger: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-          "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,
@@ -9202,17 +9316,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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2.5 flex-1 min-w-0", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "div",
                   {
@@ -9224,14 +9339,31 @@ var DatePicker = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                  "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__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: value ? formatDateDisplay(value) : placeholder || t("placeholder") })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
                 value && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "span",
                   {
@@ -9291,7 +9423,8 @@ var DateRangePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  size = "md"
+  size = "md",
+  disabled = false
 }) => {
   const locale = useSmartLocale();
   const t = useSmartTranslations("DatePicker");
@@ -9301,6 +9434,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",
@@ -9579,10 +9871,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__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: wheelContainerRef, className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex items-center justify-between px-1", sizeStyles8[size].headerMargin), children: [
@@ -9717,7 +10005,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__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-destructive ml-1", children: "*" })
@@ -9733,6 +10028,7 @@ var DateRangePicker = ({
         onChange: () => {
         },
         required,
+        disabled,
         onInvalid: (e) => {
           e.preventDefault();
           setLocalRequiredError(tv("required"));
@@ -9746,6 +10042,7 @@ var DateRangePicker = ({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
+        disabled,
         contentWidth: sizeStyles8[size].contentWidth,
         contentClassName: cn(
           "p-0",
@@ -9756,25 +10053,29 @@ var DateRangePicker = ({
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         trigger: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-          "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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex items-center flex-1 min-w-0", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "div",
                   {
@@ -9786,16 +10087,29 @@ var DateRangePicker = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                  "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__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: tempStart ? displayLabel : placeholder })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]