@mieweb/ui 0.6.1-dev.167 → 0.6.1-dev.169

package/dist/chunk-LIH3IZYK.js

@@ -0,0 +1,689 @@
+import { Input } from './chunk-PVUDXJAI.js';
+import { formatDateValue, isValidDate, isDateInFuture, isDateInPast, calculateAge } from './chunk-RC2YMOMS.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { Calendar } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var widthClasses = {
+  full: "w-full",
+  fit: "w-fit",
+  fixed: "w-44"
+  // ~176px - enough for MM/DD/YYYY + calendar icon
+};
+var sizeClasses = {
+  sm: "h-8 text-sm",
+  md: "h-10 text-base",
+  lg: "h-12 text-lg"
+};
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isValidPickerDate(year, month, day) {
+  return Number.isFinite(year) && month >= 1 && month <= 12 && day >= 1 && day <= new Date(year, month, 0).getDate();
+}
+function parsePickerDate(value, inputType) {
+  if (inputType === "datetime-local") {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T\d{2}:\d{2}$/.exec(value);
+    if (!match) return void 0;
+    const year2 = Number(match[1]);
+    const month2 = Number(match[2]);
+    const day2 = Number(match[3]);
+    const [hour, minute] = value.slice(-5).split(":").map(Number);
+    if (!isValidPickerDate(year2, month2, day2) || hour > 23 || minute > 59) {
+      return void 0;
+    }
+    return {
+      year: year2,
+      month: month2 - 1,
+      day: day2
+    };
+  }
+  if (inputType === "month") {
+    const match = /^(\d{4})-(\d{2})$/.exec(value);
+    if (!match) return void 0;
+    const year2 = Number(match[1]);
+    const month2 = Number(match[2]);
+    if (!Number.isFinite(year2) || month2 < 1 || month2 > 12) return void 0;
+    return { year: year2, month: month2 - 1, day: null };
+  }
+  if (!isValidDate(value)) return void 0;
+  const [month, day, year] = value.split("/").map(Number);
+  return { month: month - 1, year, day };
+}
+function formatPickerValue(value, inputType, timeFormat) {
+  if (inputType === "datetime-local") {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2})$/.exec(value);
+    if (!match) return "";
+    if (timeFormat === "12-hour") {
+      const [hour, minute] = match[4].split(":").map(Number);
+      const displayHour = hour % 12 || 12;
+      const meridiem = hour >= 12 ? "PM" : "AM";
+      return `${match[2]}/${match[3]}/${match[1]} ${displayHour}:${String(minute).padStart(2, "0")} ${meridiem}`;
+    }
+    return `${match[2]}/${match[3]}/${match[1]} ${match[4]}`;
+  }
+  if (inputType === "month") {
+    const date = parsePickerDate(value, inputType);
+    return date ? `${MONTH_NAMES[date.month]} ${date.year}` : "";
+  }
+  return value;
+}
+function getValidationError(value, mode, minAge, maxAge) {
+  if (!value || value.replace(/\D/g, "").length === 0) {
+    return void 0;
+  }
+  if (!isValidDate(value)) {
+    return "Please enter a valid date (MM/DD/YYYY)";
+  }
+  switch (mode) {
+    case "dob": {
+      if (!isDateInPast(value)) {
+        return "Date of birth must be in the past";
+      }
+      const age = calculateAge(value);
+      if (age !== null) {
+        if (minAge !== void 0 && age < minAge) {
+          return `Must be at least ${minAge} years old`;
+        }
+        if (maxAge !== void 0 && age > maxAge) {
+          return `Must be no more than ${maxAge} years old`;
+        }
+      }
+      break;
+    }
+    case "expiration":
+      if (!isDateInFuture(value)) {
+        return "Expiration date must be in the future";
+      }
+      break;
+    case "past":
+      if (!isDateInPast(value)) {
+        return "Date must be in the past";
+      }
+      break;
+    case "future":
+      if (!isDateInFuture(value)) {
+        return "Date must be in the future";
+      }
+      break;
+  }
+  return void 0;
+}
+var DateInput = React.forwardRef(
+  ({
+    value = "",
+    onChange,
+    inputType = "date",
+    timeFormat = "24-hour",
+    mode = "default",
+    minAge,
+    maxAge,
+    validateOnBlur,
+    showCalendar = false,
+    width = "full",
+    className,
+    onBlur,
+    onClick,
+    hasError,
+    error,
+    ...props
+  }, ref) => {
+    const isFormattedDate = inputType === "date";
+    const [displayValue, setDisplayValue] = React.useState(
+      () => isFormattedDate ? formatDateValue(value) : value
+    );
+    const [localError, setLocalError] = React.useState();
+    React.useEffect(() => {
+      setDisplayValue(isFormattedDate ? formatDateValue(value) : value);
+    }, [isFormattedDate, value]);
+    const handleChange = (e) => {
+      const formatted = formatDateValue(e.target.value);
+      setDisplayValue(formatted);
+      onChange?.(formatted);
+      if (localError) {
+        setLocalError(void 0);
+      }
+    };
+    const handleBlur = (e) => {
+      onBlur?.(e);
+      if (validateOnBlur) {
+        const validationError = getValidationError(
+          displayValue,
+          mode,
+          minAge,
+          maxAge
+        );
+        setLocalError(validationError);
+      }
+    };
+    const placeholder = mode === "expiration" ? "MM/DD/YYYY" : "MM/DD/YYYY";
+    const autoComplete = mode === "dob" ? "bday" : mode === "expiration" ? "cc-exp" : void 0;
+    const generatedId = React.useId();
+    const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
+    const calendarRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const [calendarStyle, setCalendarStyle] = React.useState();
+    const updateCalendarPosition = React.useCallback(() => {
+      if (!buttonRef.current) return;
+      const rect = buttonRef.current.getBoundingClientRect();
+      setCalendarStyle({
+        position: "fixed",
+        top: rect.bottom + 4,
+        left: Math.max(8, rect.right - 288),
+        zIndex: 9999
+      });
+    }, []);
+    React.useEffect(() => {
+      if (!isCalendarOpen) return;
+      updateCalendarPosition();
+      window.addEventListener("scroll", updateCalendarPosition, true);
+      window.addEventListener("resize", updateCalendarPosition);
+      return () => {
+        window.removeEventListener("scroll", updateCalendarPosition, true);
+        window.removeEventListener("resize", updateCalendarPosition);
+      };
+    }, [isCalendarOpen, updateCalendarPosition]);
+    const parsedDate = React.useMemo(() => {
+      const fallback = /* @__PURE__ */ new Date();
+      return parsePickerDate(displayValue, inputType) ?? {
+        month: fallback.getMonth(),
+        year: fallback.getFullYear(),
+        day: null
+      };
+    }, [displayValue, inputType]);
+    const [calendarMonth, setCalendarMonth] = React.useState(parsedDate.month);
+    const [calendarYear, setCalendarYear] = React.useState(parsedDate.year);
+    const [selectedTime, setSelectedTime] = React.useState(
+      () => inputType === "datetime-local" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value) ? value.slice(-5) : "00:00"
+    );
+    React.useEffect(() => {
+      const date = parsePickerDate(displayValue, inputType);
+      if (!date) return;
+      setCalendarMonth(date.month);
+      setCalendarYear(date.year);
+      if (inputType === "datetime-local") {
+        setSelectedTime(displayValue.slice(-5));
+      }
+    }, [displayValue, inputType]);
+    React.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (calendarRef.current && !calendarRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+          setIsCalendarOpen(false);
+        }
+      };
+      if (isCalendarOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [isCalendarOpen]);
+    React.useEffect(() => {
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setIsCalendarOpen(false);
+          buttonRef.current?.focus();
+        }
+      };
+      if (isCalendarOpen) {
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+      }
+    }, [isCalendarOpen]);
+    const handleDateSelect = (day) => {
+      const month = String(calendarMonth + 1).padStart(2, "0");
+      const dayStr = String(day).padStart(2, "0");
+      const year = String(calendarYear);
+      const formatted = inputType === "datetime-local" ? `${year}-${month}-${dayStr}T${selectedTime}` : `${month}/${dayStr}/${year}`;
+      setDisplayValue(formatted);
+      onChange?.(formatted);
+      if (inputType === "date") {
+        setIsCalendarOpen(false);
+      }
+      if (inputType === "date" && validateOnBlur) {
+        const validationError = getValidationError(
+          formatted,
+          mode,
+          minAge,
+          maxAge
+        );
+        setLocalError(validationError);
+      }
+    };
+    const handleMonthSelect = (month) => {
+      const formatted = `${calendarYear}-${String(month + 1).padStart(2, "0")}`;
+      setDisplayValue(formatted);
+      onChange?.(formatted);
+      setIsCalendarOpen(false);
+    };
+    const handleTimeChange = (part, nextValue) => {
+      const [hour, minute] = selectedTime.split(":");
+      const nextTime = part === "hour" ? `${nextValue}:${minute}` : `${hour}:${nextValue}`;
+      setSelectedTime(nextTime);
+      if (parsedDate.day === null) return;
+      const month = String(parsedDate.month + 1).padStart(2, "0");
+      const day = String(parsedDate.day).padStart(2, "0");
+      const formatted = `${parsedDate.year}-${month}-${day}T${nextTime}`;
+      setDisplayValue(formatted);
+      onChange?.(formatted);
+    };
+    const handleMeridiemChange = (meridiem) => {
+      const [hour] = selectedTime.split(":").map(Number);
+      const nextHour = hour % 12 + (meridiem === "PM" ? 12 : 0);
+      handleTimeChange("hour", String(nextHour).padStart(2, "0"));
+    };
+    const getDaysInMonth = (month, year) => {
+      return new Date(year, month + 1, 0).getDate();
+    };
+    const getFirstDayOfMonth = (month, year) => {
+      return new Date(year, month, 1).getDay();
+    };
+    const renderCalendar = () => {
+      const daysInMonth = getDaysInMonth(calendarMonth, calendarYear);
+      const firstDay = getFirstDayOfMonth(calendarMonth, calendarYear);
+      const days = [];
+      for (let i = 0; i < firstDay; i++) {
+        days.push(null);
+      }
+      for (let i = 1; i <= daysInMonth; i++) {
+        days.push(i);
+      }
+      const isSelectedDay = (day) => {
+        return parsedDate.day === day && parsedDate.month === calendarMonth && parsedDate.year === calendarYear;
+      };
+      const isToday = (day) => {
+        const today = /* @__PURE__ */ new Date();
+        return day === today.getDate() && calendarMonth === today.getMonth() && calendarYear === today.getFullYear();
+      };
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: calendarRef,
+          className: cn(
+            "bg-background border-border rounded-lg border shadow-lg",
+            "w-72 p-3"
+          ),
+          style: calendarStyle,
+          role: "dialog",
+          "aria-label": inputType === "month" ? "Choose month" : inputType === "datetime-local" ? "Choose date and time" : "Choose date",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (inputType === "month") {
+                      setCalendarYear(calendarYear - 1);
+                    } else if (calendarMonth === 0) {
+                      setCalendarMonth(11);
+                      setCalendarYear(calendarYear - 1);
+                    } else {
+                      setCalendarMonth(calendarMonth - 1);
+                    }
+                  },
+                  className: "hover:bg-muted rounded-md p-1 transition-colors",
+                  "aria-label": inputType === "month" ? "Previous year" : "Previous month",
+                  children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                inputType !== "month" && /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    value: calendarMonth,
+                    onChange: (e) => setCalendarMonth(Number(e.target.value)),
+                    className: "bg-background border-border rounded border px-2 py-1 text-sm",
+                    "aria-label": "Select month",
+                    children: MONTH_NAMES.map((name, i) => /* @__PURE__ */ jsx("option", { value: i, children: name }, name))
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    value: calendarYear,
+                    onChange: (e) => setCalendarYear(Number(e.target.value)),
+                    className: "bg-background border-border rounded border px-2 py-1 text-sm",
+                    "aria-label": "Select year",
+                    children: Array.from(
+                      { length: 150 },
+                      (_, i) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + i
+                    ).map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (inputType === "month") {
+                      setCalendarYear(calendarYear + 1);
+                    } else if (calendarMonth === 11) {
+                      setCalendarMonth(0);
+                      setCalendarYear(calendarYear + 1);
+                    } else {
+                      setCalendarMonth(calendarMonth + 1);
+                    }
+                  },
+                  className: "hover:bg-muted rounded-md p-1 transition-colors",
+                  "aria-label": inputType === "month" ? "Next year" : "Next month",
+                  children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+                }
+              )
+            ] }),
+            inputType === "month" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((name, month) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleMonthSelect(month),
+                className: cn(
+                  "rounded-md px-2 py-2 text-sm transition-colors",
+                  "focus:ring-ring focus:ring-2 focus:outline-none",
+                  "hover:bg-muted",
+                  parsedDate.month === month && parsedDate.year === calendarYear && "bg-primary-800 hover:bg-primary-900 text-white"
+                ),
+                children: name.slice(0, 3)
+              },
+              name
+            )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-1 grid grid-cols-7 gap-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-muted-foreground py-1 text-center text-xs font-medium",
+                  children: day
+                },
+                day
+              )) }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: day === null,
+                  onClick: () => day && handleDateSelect(day),
+                  className: cn(
+                    "h-8 w-8 rounded-md text-sm transition-colors",
+                    "focus:ring-ring focus:ring-2 focus:outline-none",
+                    day === null && "invisible",
+                    day !== null && "hover:bg-muted",
+                    isSelectedDay(day) && "bg-primary-800 hover:bg-primary-900 text-white",
+                    isToday(day) && !isSelectedDay(day) && "border-primary-800 text-primary-800 border"
+                  ),
+                  children: day
+                },
+                index
+              )) })
+            ] }),
+            inputType === "datetime-local" && /* @__PURE__ */ jsxs("div", { className: "border-border mt-3 flex items-center gap-2 border-t pt-3", children: [
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: timeFormat === "12-hour" ? String(
+                    Number(selectedTime.slice(0, 2)) % 12 || 12
+                  ).padStart(2, "0") : selectedTime.slice(0, 2),
+                  onChange: (event) => {
+                    const hour = Number(event.target.value);
+                    const isPm = Number(selectedTime.slice(0, 2)) >= 12;
+                    handleTimeChange(
+                      "hour",
+                      String(
+                        timeFormat === "12-hour" ? hour % 12 + (isPm ? 12 : 0) : hour
+                      ).padStart(2, "0")
+                    );
+                  },
+                  className: "bg-background border-border rounded border px-2 py-1 text-sm",
+                  "aria-label": "Select hour",
+                  children: Array.from(
+                    { length: timeFormat === "12-hour" ? 12 : 24 },
+                    (_, index) => timeFormat === "12-hour" ? index + 1 : index
+                  ).map((hour) => /* @__PURE__ */ jsx("option", { value: String(hour).padStart(2, "0"), children: String(hour).padStart(2, "0") }, hour))
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: ":" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: selectedTime.slice(3),
+                  onChange: (event) => handleTimeChange("minute", event.target.value),
+                  className: "bg-background border-border rounded border px-2 py-1 text-sm",
+                  "aria-label": "Select minute",
+                  children: Array.from({ length: 60 }, (_, minute) => /* @__PURE__ */ jsx("option", { value: String(minute).padStart(2, "0"), children: String(minute).padStart(2, "0") }, minute))
+                }
+              ),
+              timeFormat === "12-hour" && /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: Number(selectedTime.slice(0, 2)) >= 12 ? "PM" : "AM",
+                  onChange: (event) => handleMeridiemChange(event.target.value),
+                  className: "bg-background border-border rounded border px-2 py-1 text-sm",
+                  "aria-label": "Select AM or PM",
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "AM", children: "AM" }),
+                    /* @__PURE__ */ jsx("option", { value: "PM", children: "PM" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-border mt-3 flex gap-2 border-t pt-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    const today = /* @__PURE__ */ new Date();
+                    setCalendarMonth(today.getMonth());
+                    setCalendarYear(today.getFullYear());
+                    if (inputType === "month") {
+                      handleMonthSelect(today.getMonth());
+                    } else {
+                      handleDateSelect(today.getDate());
+                    }
+                  },
+                  className: "text-primary-800 flex-1 text-sm hover:underline",
+                  children: "Today"
+                }
+              ),
+              inputType === "datetime-local" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsCalendarOpen(false),
+                  className: "text-primary-800 flex-1 text-sm hover:underline",
+                  children: "Done"
+                }
+              )
+            ] })
+          ]
+        }
+      );
+    };
+    if (inputType === "year") {
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          type: inputType === "year" ? "text" : inputType,
+          inputMode: inputType === "year" ? "numeric" : void 0,
+          pattern: inputType === "year" ? "[0-9]{4}" : void 0,
+          maxLength: inputType === "year" ? 4 : void 0,
+          placeholder: inputType === "year" ? "YYYY" : void 0,
+          value: value.replace(/\D/g, "").slice(0, 4),
+          onChange: (event) => onChange?.(event.target.value.replace(/\D/g, "").slice(0, 4)),
+          onBlur,
+          onClick,
+          hasError,
+          error,
+          className: cn(widthClasses[width], className),
+          ...props
+        }
+      );
+    }
+    if (showCalendar || inputType !== "date") {
+      const { label, helperText, hideLabel, required, size, ...inputProps } = props;
+      const resolvedSize = size ?? "md";
+      const inputId = inputProps.id || generatedId;
+      const errorId = `${inputId}-error`;
+      const helperId = `${inputId}-helper`;
+      const showError = hasError || !!localError;
+      const errorMessage = error || localError;
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", widthClasses[width]), children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "text-foreground text-sm font-medium",
+              hideLabel && "sr-only"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ml-1",
+                  style: { color: "#ef4444" },
+                  "aria-hidden": "true",
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type: "text",
+              inputMode: inputType === "date" ? "numeric" : void 0,
+              autoComplete,
+              placeholder: inputType === "month" ? "Select month" : inputType === "datetime-local" ? "Select date and time" : placeholder,
+              value: formatPickerValue(displayValue, inputType, timeFormat),
+              onChange: handleChange,
+              onBlur: inputType === "date" ? handleBlur : onBlur,
+              onClick: (event) => {
+                onClick?.(event);
+                setIsCalendarOpen(true);
+              },
+              readOnly: !isFormattedDate,
+              "aria-invalid": showError,
+              "aria-describedby": [errorMessage ? errorId : null, helperText ? helperId : null].filter(Boolean).join(" ") || void 0,
+              className: cn(
+                "w-full px-3 py-2",
+                "rounded-lg border",
+                "bg-background text-foreground",
+                "placeholder:text-muted-foreground",
+                "transition-colors duration-200",
+                "focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                sizeClasses[resolvedSize],
+                showError ? "border-destructive focus:ring-destructive" : "border-input",
+                "pr-10",
+                className
+              ),
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              onClick: () => setIsCalendarOpen(!isCalendarOpen),
+              className: cn(
+                "absolute top-1/2 right-3 -translate-y-1/2",
+                "text-muted-foreground hover:text-foreground",
+                "focus:text-foreground focus:outline-none",
+                "transition-colors"
+              ),
+              "aria-label": "Open calendar",
+              "aria-expanded": isCalendarOpen,
+              "aria-haspopup": "dialog",
+              children: /* @__PURE__ */ jsx(Calendar, { size: 18 })
+            }
+          )
+        ] }),
+        isCalendarOpen && createPortal(renderCalendar(), document.body),
+        errorMessage && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: errorId,
+            className: "text-sm",
+            style: { color: "#ef4444" },
+            role: "alert",
+            children: errorMessage
+          }
+        ),
+        helperText && !errorMessage && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-sm", children: helperText })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete,
+        placeholder,
+        value: displayValue,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        hasError: hasError || !!localError,
+        error: error || localError,
+        className: cn(widthClasses[width], className),
+        ...props
+      }
+    );
+  }
+);
+DateInput.displayName = "DateInput";
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+
+export { DateInput };
+//# sourceMappingURL=chunk-LIH3IZYK.js.map
+//# sourceMappingURL=chunk-LIH3IZYK.js.map