@dmsi/wedgekit-react 0.0.29 → 0.0.30

package/dist/components/DateRangeInput.cjs

@@ -774,11 +774,20 @@ function CalendarRange({
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
-    if (!d) return void 0;
-    if (typeof d === "number")
-      return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
-    if (typeof d === "string") return import_polyfill.Temporal.PlainDate.from(d);
-    return void 0;
+    if (!d) {
+      return void 0;
+    }
+    try {
+      if (typeof d === "number") {
+        return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
+      }
+      if (typeof d === "string") {
+        return import_polyfill.Temporal.PlainDate.from(d);
+      }
+      return void 0;
+    } catch (error) {
+      return import_polyfill.Temporal.Now.plainDateISO();
+    }
   };
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
@@ -789,6 +798,20 @@ function CalendarRange({
   const [selecting, setSelecting] = (0, import_react2.useState)("from");
   const [pendingFrom, setPendingFrom] = (0, import_react2.useState)(void 0);
   const [hoveredDate, setHoveredDate] = (0, import_react2.useState)(void 0);
+  (0, import_react2.useEffect)(() => {
+    if (fromDate) {
+      setBaseMonth(fromDate.with({ day: 1 }));
+    } else if (toDate) {
+      setBaseMonth(toDate.with({ day: 1 }));
+    }
+  }, [from, to]);
+  (0, import_react2.useEffect)(() => {
+    if (fromDate && toDate) {
+      setSelecting("from");
+      setPendingFrom(void 0);
+      setHoveredDate(void 0);
+    }
+  }, [from, to]);
   function getMonthData(monthOffset) {
     const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
     const days = monthDate.daysInMonth;
@@ -1002,6 +1025,125 @@ function findDocumentRoot(element) {
   return window.document.body;
 }
 
+// src/utils/date.ts
+function parseInputDate(input) {
+  const match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) {
+    return null;
+  }
+  const [, month, day, year] = match;
+  const paddedMonth = month.padStart(2, "0");
+  const paddedDay = day.padStart(2, "0");
+  return `${year}-${paddedMonth}-${paddedDay}`;
+}
+function isValidDate(dateString) {
+  const date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
+}
+function formatInputValue(value) {
+  const digits = value.replace(/\D/g, "");
+  if (digits.length < 2) {
+    return digits;
+  }
+  if (digits.length >= 4) {
+    return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+  }
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+function isDigit(character) {
+  return /\d/.test(character);
+}
+function isSlash(character) {
+  return character === "/";
+}
+function countDigitsUpToCursor(value, cursorPosition) {
+  let digitCount = 0;
+  for (let i = 0; i < cursorPosition && i < value.length; i++) {
+    if (!isDigit(value[i])) {
+      continue;
+    }
+    digitCount++;
+  }
+  return digitCount;
+}
+function findPositionAfterDigitCount(formattedValue, targetDigitCount) {
+  let currentDigitCount = 0;
+  for (let i = 0; i < formattedValue.length; i++) {
+    if (!isDigit(formattedValue[i])) {
+      continue;
+    }
+    currentDigitCount++;
+    if (currentDigitCount !== targetDigitCount) {
+      continue;
+    }
+    const positionAfterDigit = i + 1;
+    const nextCharacter = formattedValue[positionAfterDigit];
+    if (nextCharacter && isSlash(nextCharacter)) {
+      return positionAfterDigit + 1;
+    }
+    return positionAfterDigit;
+  }
+  return formattedValue.length;
+}
+function calculateCursorPosition(originalValue, formattedValue, originalPosition) {
+  const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
+  const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
+  return Math.min(newPosition, formattedValue.length);
+}
+function parseDateParts(dateString) {
+  const [yearStr, monthStr, dayStr] = dateString.split("-");
+  if (!yearStr || !monthStr || !dayStr) {
+    return null;
+  }
+  const year = parseInt(yearStr, 10);
+  const month = parseInt(monthStr, 10);
+  const day = parseInt(dayStr, 10);
+  if (isNaN(year) || isNaN(month) || isNaN(day)) {
+    return null;
+  }
+  return { year, month, day };
+}
+function isValidDateRange(month, day) {
+  if (month < 1 || month > 12) {
+    return false;
+  }
+  if (day < 1 || day > 31) {
+    return false;
+  }
+  return true;
+}
+function formatDatePartsToDisplay(year, month, day) {
+  const paddedMonth = month.toString().padStart(2, "0");
+  const paddedDay = day.toString().padStart(2, "0");
+  return `${paddedMonth}/${paddedDay}/${year}`;
+}
+function formatDate(date) {
+  if (!date) {
+    return "";
+  }
+  try {
+    const dateParts = parseDateParts(date);
+    if (!dateParts) {
+      return "";
+    }
+    const { year, month, day } = dateParts;
+    if (!isValidDateRange(month, day)) {
+      return "";
+    }
+    return formatDatePartsToDisplay(year, month, day);
+  } catch (error) {
+    return "";
+  }
+}
+function isValidDateRangeOrder(fromDate, toDate) {
+  if (!fromDate || !toDate || !isValidDate(fromDate) || !isValidDate(toDate)) {
+    return false;
+  }
+  const from = new Date(fromDate);
+  const to = new Date(toDate);
+  return to >= from;
+}
+
 // src/components/DateRangeInput.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DateRangeInput = (_a) => {
@@ -1013,7 +1155,8 @@ var DateRangeInput = (_a) => {
     disabled,
     readOnly = false,
     single = false,
-    label: label
+    disableRange = false,
+    label
   } = _b, props = __objRest(_b, [
     "id",
     "value",
@@ -1022,10 +1165,12 @@ var DateRangeInput = (_a) => {
     "disabled",
     "readOnly",
     "single",
-    // Enables single date selection instead of range
+    "disableRange",
     "label"
   ]);
   const [visible, setVisible] = (0, import_react3.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react3.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react3.useState)(false);
   const popoverRef = (0, import_react3.useRef)(null);
   const triggerRef = (0, import_react3.useRef)(null);
   const [calendarPosition, setCalendarPosition] = (0, import_react3.useState)({
@@ -1034,15 +1179,23 @@ var DateRangeInput = (_a) => {
     width: 0
   });
   const [from, to] = value.split("|");
+  (0, import_react3.useEffect)(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from, to));
+    }
+  }, [from, to, isTyping, disableRange]);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
   const updatePosition = () => {
     if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        const rect = triggerRef.current.getBoundingClientRect();
-        setCalendarPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-          width: rect.width
-        });
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
       });
     }
   };
@@ -1059,18 +1212,18 @@ var DateRangeInput = (_a) => {
     };
   }, []);
   (0, import_react3.useEffect)(() => {
-    const handleKeyDown = (event) => {
+    const handleKeyDown2 = (event) => {
       var _a2;
       if (event.key === "Escape" && popoverRef.current) {
         setVisible(false);
         (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown2);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown2);
     };
-  });
+  }, []);
   (0, import_react3.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -1083,24 +1236,312 @@ var DateRangeInput = (_a) => {
     };
   }, []);
   function handleRangeChange(fromValue, toValue) {
-    onChange(`${fromValue}|${toValue}`);
+    if (disableRange) {
+      onChange(`${fromValue}|${fromValue}`);
+    } else {
+      onChange(`${fromValue}|${toValue}`);
+    }
     setVisible(false);
+    setIsTyping(false);
   }
   const handleFocus = () => {
     if (readOnly) return;
     setVisible(true);
-    updatePosition();
   };
-  function formatDisplayValue(from2, to2) {
-    if (!from2 && !to2) return "";
-    if (from2 && to2) return `${formatDate(from2)} - ${formatDate(to2)}`;
-    if (from2) return `${formatDate(from2)} -`;
-    return "";
-  }
-  function formatDate(date) {
-    const [y, m, d] = date.split("-");
-    return `${m}/${d}/${y}`;
-  }
+  const handleClick = () => {
+    handleFocus();
+  };
+  const handleInputChange = (event) => {
+    if (readOnly) return;
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    if (shouldPreventManualDash(rawValue)) {
+      handleManualDashRemoval(rawValue, cursorPosition);
+      return;
+    }
+    setIsTyping(true);
+    const formattedValue = formatInputValue2(rawValue);
+    const finalValue = shouldAutoInsertDash(formattedValue, rawValue) ? `${formattedValue} - ` : formattedValue;
+    setInputValue(finalValue);
+    const newCursorPosition = calculateNewCursorPosition(
+      rawValue,
+      formattedValue,
+      finalValue,
+      cursorPosition
+    );
+    requestAnimationFrame(() => {
+      setCursorPosition(newCursorPosition);
+    });
+    updateParentValue(finalValue);
+  };
+  const shouldPreventManualDash = (value2) => {
+    return !disableRange && value2.includes("-") && !value2.includes(" - ");
+  };
+  const handleManualDashRemoval = (rawValue, cursorPosition) => {
+    const cleanValue = rawValue.replace(/-/g, "");
+    const formattedCleanValue = formatInputValue2(cleanValue);
+    setInputValue(formattedCleanValue);
+    requestAnimationFrame(() => {
+      const newPosition = Math.min(cursorPosition - 1, formattedCleanValue.length);
+      setCursorPosition(newPosition);
+    });
+  };
+  const shouldAutoInsertDash = (formattedValue, rawValue) => {
+    if (disableRange || formattedValue.includes(" - ")) {
+      return false;
+    }
+    const completeDate = formattedValue.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+    if (!completeDate || rawValue.length !== formattedValue.length) {
+      return false;
+    }
+    const prevLength = rawValue.length - 1;
+    const prevFormatted = formatInputValue2(rawValue.slice(0, prevLength));
+    return !prevFormatted.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  };
+  const calculateNewCursorPosition = (rawValue, formattedValue, finalValue, originalPosition) => {
+    if (finalValue !== formattedValue) {
+      return finalValue.length;
+    }
+    return calculateCursorPositionHelper(rawValue, finalValue, originalPosition, disableRange);
+  };
+  const setCursorPosition = (position) => {
+    if (triggerRef.current) {
+      triggerRef.current.setSelectionRange(position, position);
+    }
+  };
+  const updateParentValue = (value2) => {
+    if (disableRange) {
+      updateSingleDateValue(value2);
+    } else {
+      updateRangeValue(value2);
+    }
+  };
+  const updateSingleDateValue = (value2) => {
+    const parsedDate = parseInputDate(value2);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(`${parsedDate}|${parsedDate}`);
+    }
+  };
+  const updateRangeValue = (value2) => {
+    if (value2 === "") {
+      onChange("");
+      return;
+    }
+    const rangeMatch = value2.match(/^(.+?)\s*-\s*(.+)$/);
+    if (rangeMatch) {
+      updateCompleteRange(rangeMatch);
+    } else {
+      updatePartialRange(value2);
+    }
+  };
+  const updateCompleteRange = (rangeMatch) => {
+    const [, fromStr, toStr] = rangeMatch;
+    const fromDate = parseInputDate(fromStr.trim());
+    const toDate = parseInputDate(toStr.trim());
+    if (fromDate && toDate && isValidDateRange2(fromDate, toDate)) {
+      onChange(`${fromDate}|${toDate}`);
+    }
+  };
+  const updatePartialRange = (value2) => {
+    const singleDate = parseInputDate(value2);
+    if (singleDate && isValidDate(singleDate)) {
+      onChange(`${singleDate}|`);
+    }
+  };
+  const handleBlur = () => {
+    setIsTyping(false);
+    if (disableRange) {
+      const parsedDate = parseInputDate(inputValue);
+      if (!parsedDate || !isValidDate(parsedDate)) {
+        const lastValidValue = formatDisplayValue(from, to);
+        setInputValue(lastValidValue || "");
+      }
+    } else {
+      const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
+      if (rangeMatch) {
+        const [, fromStr, toStr] = rangeMatch;
+        const fromDate = parseInputDate(fromStr.trim());
+        const toDate = parseInputDate(toStr.trim());
+        if (!fromDate || !toDate || !isValidDateRange2(fromDate, toDate)) {
+          setInputValue("");
+          onChange("");
+        }
+      } else {
+        if (inputValue.includes(" - ")) {
+          setInputValue("");
+          onChange("");
+        } else {
+          const singleDate = parseInputDate(inputValue);
+          if (!singleDate || !isValidDate(singleDate)) {
+            setInputValue("");
+            onChange("");
+          } else {
+            setInputValue("");
+            onChange("");
+          }
+        }
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (!disableRange && event.key === "-") {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Backspace") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
+        const formattedValue = formatInputValue2(newValue);
+        setInputValue(formattedValue);
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        setIsTyping(true);
+        return;
+      }
+      if (!disableRange && value2.includes(" - ")) {
+        const dashIndex = value2.indexOf(" - ");
+        const dashStart = dashIndex;
+        const dashEnd = dashIndex + 3;
+        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
+          event.preventDefault();
+          const beforeDash = value2.slice(0, dashStart).trim();
+          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+          if (yearMatch) {
+            const [, month, day, year] = yearMatch;
+            const truncatedYear = year.slice(0, -1);
+            const newValue = `${month}/${day}/${truncatedYear}`;
+            const formattedValue = formatInputValue2(newValue);
+            setInputValue(formattedValue);
+            onChange("");
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+              }
+            });
+          } else {
+            const formattedValue = formatInputValue2(beforeDash);
+            setInputValue(formattedValue);
+            const singleDate = parseInputDate(beforeDash);
+            if (singleDate && isValidDate(singleDate)) {
+              onChange(`${singleDate}|`);
+            } else {
+              onChange("");
+            }
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                const newPosition = formattedValue.length;
+                triggerRef.current.setSelectionRange(newPosition, newPosition);
+              }
+            });
+          }
+          setIsTyping(true);
+          return;
+        }
+        if (cursorPosition === dashEnd) {
+          event.preventDefault();
+          const beforeDash = value2.slice(0, dashStart).trim();
+          const newValue = `${beforeDash} - `;
+          setInputValue(newValue);
+          const singleDate = parseInputDate(beforeDash);
+          if (singleDate && isValidDate(singleDate)) {
+            onChange(`${singleDate}|`);
+          }
+          requestAnimationFrame(() => {
+            if (triggerRef.current) {
+              triggerRef.current.setSelectionRange(newValue.length, newValue.length);
+            }
+          });
+          setIsTyping(true);
+          return;
+        }
+      }
+    }
+    if (event.key === "Delete") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (!disableRange && value2.includes(" - ")) {
+        const dashIndex = value2.indexOf(" - ");
+        const dashStart = dashIndex;
+        const dashEnd = dashIndex + 3;
+        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
+          event.preventDefault();
+          const beforeDash = value2.slice(0, dashStart).trim();
+          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+          if (yearMatch) {
+            const [, month, day, year] = yearMatch;
+            const truncatedYear = year.slice(0, -1);
+            const newValue = `${month}/${day}/${truncatedYear}`;
+            const formattedValue = formatInputValue2(newValue);
+            setInputValue(formattedValue);
+            onChange("");
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+              }
+            });
+          } else {
+            const formattedValue = formatInputValue2(beforeDash);
+            setInputValue(formattedValue);
+            const singleDate = parseInputDate(beforeDash);
+            if (singleDate && isValidDate(singleDate)) {
+              onChange(`${singleDate}|`);
+            } else {
+              onChange("");
+            }
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                const newPosition = formattedValue.length;
+                triggerRef.current.setSelectionRange(newPosition, newPosition);
+              }
+            });
+          }
+          setIsTyping(true);
+          return;
+        }
+      }
+    }
+    if (event.key === "Enter") {
+      if (disableRange) {
+        const parsedDate = parseInputDate(inputValue);
+        if (parsedDate && isValidDate(parsedDate)) {
+          onChange(`${parsedDate}|${parsedDate}`);
+          setVisible(false);
+          setIsTyping(false);
+        }
+      } else {
+        const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
+        if (rangeMatch) {
+          const [, fromStr, toStr] = rangeMatch;
+          const fromDate = parseInputDate(fromStr.trim());
+          const toDate = parseInputDate(toStr.trim());
+          if (fromDate && toDate && isValidDateRange2(fromDate, toDate)) {
+            onChange(`${fromDate}|${toDate}`);
+            setVisible(false);
+            setIsTyping(false);
+          } else {
+            setInputValue("");
+            onChange("");
+            setVisible(false);
+            setIsTyping(false);
+          }
+        } else {
+          setInputValue("");
+          onChange("");
+          setVisible(false);
+          setIsTyping(false);
+        }
+      }
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputBase,
@@ -1110,15 +1551,17 @@ var DateRangeInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
-        value: formatDisplayValue(from, to),
-        placeholder,
+        value: inputValue,
+        placeholder: disableRange ? "MM/DD/YYYY" : placeholder,
         disabled,
+        readOnly,
         after: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "calendar_month" }),
         onFocus: handleFocus,
-        readOnly,
-        label,
-        onChange: () => {
-        }
+        onClick: handleClick,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        label
       })
     ),
     visible && !readOnly && (0, import_react_dom.createPortal)(
@@ -1142,7 +1585,8 @@ var DateRangeInput = (_a) => {
               to,
               onChange: handleRangeChange,
               cardStyle: true,
-              mode: single ? "single" : "double"
+              mode: single ? "single" : "double",
+              disableRange
             }
           )
         }
@@ -1150,8 +1594,77 @@ var DateRangeInput = (_a) => {
       findDocumentRoot(popoverRef.current)
     )
   ] });
+  function formatInputValue2(value2) {
+    return formatInputValueHelper(value2, disableRange);
+  }
+  function formatDisplayValue(from2, to2) {
+    return formatDisplayValueHelper(from2, to2, disableRange);
+  }
 };
 DateRangeInput.displayName = "DateRangeInput";
+function isValidDateRange2(fromDate, toDate) {
+  return isValidDateRangeOrder(fromDate, toDate);
+}
+function formatInputValueHelper(value, disableRange) {
+  if (disableRange) {
+    return formatInputValue(value);
+  }
+  if (value.includes(" - ")) {
+    const [from, to] = value.split(" - ");
+    const fromFormatted = formatInputValue(from);
+    const toFormatted = formatInputValue(to || "");
+    return `${fromFormatted} - ${toFormatted}`;
+  }
+  const cleanValue = value.replace(/-/g, "");
+  return formatInputValue(cleanValue);
+}
+function calculateCursorPositionHelper(originalValue, formattedValue, originalPosition, disableRange) {
+  if (!disableRange && formattedValue.includes(" - ")) {
+    const dashPosition = formattedValue.indexOf(" - ");
+    const originalDashPosition = originalValue.indexOf("-");
+    if (originalDashPosition !== -1 && originalPosition > originalDashPosition) {
+      const afterDashDigits = originalValue.slice(originalDashPosition + 1).replace(/\D/g, "").length;
+      const formattedAfterDash = formattedValue.slice(dashPosition + 3);
+      let newPosition = dashPosition + 3;
+      let digitCount = 0;
+      for (let i = 0; i < formattedAfterDash.length; i++) {
+        if (/\d/.test(formattedAfterDash[i])) {
+          digitCount++;
+          if (digitCount >= afterDashDigits) {
+            if (i + 1 < formattedAfterDash.length && formattedAfterDash[i + 1] === "/") {
+              newPosition = dashPosition + 3 + i + 2;
+            } else {
+              newPosition = dashPosition + 3 + i + 1;
+            }
+            break;
+          }
+        }
+        if (digitCount < afterDashDigits) {
+          newPosition = dashPosition + 3 + i + 1;
+        }
+      }
+      return Math.min(newPosition, formattedValue.length);
+    }
+  }
+  return calculateCursorPosition(originalValue, formattedValue, originalPosition);
+}
+function formatDisplayValueHelper(from, to, disableRange) {
+  if (!from && !to) {
+    return "";
+  }
+  const fromValid = from ? isValidDate(from) : false;
+  const toValid = to ? isValidDate(to) : false;
+  if (disableRange) {
+    return fromValid && from ? formatDate(from) : "";
+  }
+  if (fromValid && toValid && from && to && isValidDateRange2(from, to)) {
+    return `${formatDate(from)} - ${formatDate(to)}`;
+  }
+  if (fromValid && !to && from) {
+    return `${formatDate(from)} - `;
+  }
+  return "";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DateRangeInput