@mieweb/ui 0.6.1 → 0.7.0-dev.178

package/dist/{chunk-NINI4WVS.cjs → chunk-JC6Y3LGF.cjs}

@@ -4,6 +4,7 @@ var chunkMSRU3XBH_cjs = require('./chunk-MSRU3XBH.cjs');
 var chunkCW75IKA6_cjs = require('./chunk-CW75IKA6.cjs');
 var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
 var React = require('react');
+var reactDom = require('react-dom');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -38,6 +39,70 @@ var sizeClasses = {
   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 (!chunkCW75IKA6_cjs.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;
@@ -83,6 +148,8 @@ var DateInput = React__namespace.forwardRef(
   ({
     value = "",
     onChange,
+    inputType = "date",
+    timeFormat = "24-hour",
     mode = "default",
     minAge,
     maxAge,
@@ -91,17 +158,19 @@ var DateInput = React__namespace.forwardRef(
     width = "full",
     className,
     onBlur,
+    onClick,
     hasError,
     error,
     ...props
   }, ref) => {
+    const isFormattedDate = inputType === "date";
     const [displayValue, setDisplayValue] = React__namespace.useState(
-      () => chunkCW75IKA6_cjs.formatDateValue(value)
+      () => isFormattedDate ? chunkCW75IKA6_cjs.formatDateValue(value) : value
     );
     const [localError, setLocalError] = React__namespace.useState();
     React__namespace.useEffect(() => {
-      setDisplayValue(chunkCW75IKA6_cjs.formatDateValue(value));
-    }, [value]);
+      setDisplayValue(isFormattedDate ? chunkCW75IKA6_cjs.formatDateValue(value) : value);
+    }, [isFormattedDate, value]);
     const handleChange = (e) => {
       const formatted = chunkCW75IKA6_cjs.formatDateValue(e.target.value);
       setDisplayValue(formatted);
@@ -128,26 +197,49 @@ var DateInput = React__namespace.forwardRef(
     const [isCalendarOpen, setIsCalendarOpen] = React__namespace.useState(false);
     const calendarRef = React__namespace.useRef(null);
     const buttonRef = React__namespace.useRef(null);
+    const [calendarStyle, setCalendarStyle] = React__namespace.useState();
+    const updateCalendarPosition = React__namespace.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__namespace.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__namespace.useMemo(() => {
-      if (!displayValue || !chunkCW75IKA6_cjs.isValidDate(displayValue)) {
-        return {
-          month: (/* @__PURE__ */ new Date()).getMonth(),
-          year: (/* @__PURE__ */ new Date()).getFullYear(),
-          day: null
-        };
-      }
-      const [month, day, year] = displayValue.split("/").map(Number);
-      return { month: month - 1, year, day };
-    }, [displayValue]);
+      const fallback = /* @__PURE__ */ new Date();
+      return parsePickerDate(displayValue, inputType) ?? {
+        month: fallback.getMonth(),
+        year: fallback.getFullYear(),
+        day: null
+      };
+    }, [displayValue, inputType]);
     const [calendarMonth, setCalendarMonth] = React__namespace.useState(parsedDate.month);
     const [calendarYear, setCalendarYear] = React__namespace.useState(parsedDate.year);
+    const [selectedTime, setSelectedTime] = React__namespace.useState(
+      () => inputType === "datetime-local" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value) ? value.slice(-5) : "00:00"
+    );
     React__namespace.useEffect(() => {
-      if (displayValue && chunkCW75IKA6_cjs.isValidDate(displayValue)) {
-        const [month, , year] = displayValue.split("/").map(Number);
-        setCalendarMonth(month - 1);
-        setCalendarYear(year);
+      const date = parsePickerDate(displayValue, inputType);
+      if (!date) return;
+      setCalendarMonth(date.month);
+      setCalendarYear(date.year);
+      if (inputType === "datetime-local") {
+        setSelectedTime(displayValue.slice(-5));
       }
-    }, [displayValue]);
+    }, [displayValue, inputType]);
     React__namespace.useEffect(() => {
       const handleClickOutside = (event) => {
         if (calendarRef.current && !calendarRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
@@ -175,11 +267,13 @@ var DateInput = React__namespace.forwardRef(
       const month = String(calendarMonth + 1).padStart(2, "0");
       const dayStr = String(day).padStart(2, "0");
       const year = String(calendarYear);
-      const formatted = `${month}/${dayStr}/${year}`;
+      const formatted = inputType === "datetime-local" ? `${year}-${month}-${dayStr}T${selectedTime}` : `${month}/${dayStr}/${year}`;
       setDisplayValue(formatted);
       onChange?.(formatted);
-      setIsCalendarOpen(false);
-      if (validateOnBlur) {
+      if (inputType === "date") {
+        setIsCalendarOpen(false);
+      }
+      if (inputType === "date" && validateOnBlur) {
         const validationError = getValidationError(
           formatted,
           mode,
@@ -189,6 +283,28 @@ var DateInput = React__namespace.forwardRef(
         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();
     };
@@ -205,20 +321,6 @@ var DateInput = React__namespace.forwardRef(
       for (let i = 1; i <= daysInMonth; i++) {
         days.push(i);
       }
-      const monthNames = [
-        "January",
-        "February",
-        "March",
-        "April",
-        "May",
-        "June",
-        "July",
-        "August",
-        "September",
-        "October",
-        "November",
-        "December"
-      ];
       const isSelectedDay = (day) => {
         return parsedDate.day === day && parsedDate.month === calendarMonth && parsedDate.year === calendarYear;
       };
@@ -231,12 +333,12 @@ var DateInput = React__namespace.forwardRef(
         {
           ref: calendarRef,
           className: chunkOR5DRJCW_cjs.cn(
-            "absolute top-full left-0 z-50 mt-1",
             "bg-background border-border rounded-lg border shadow-lg",
             "w-72 p-3"
           ),
+          style: calendarStyle,
           role: "dialog",
-          "aria-label": "Choose date",
+          "aria-label": inputType === "month" ? "Choose month" : inputType === "datetime-local" ? "Choose date and time" : "Choose date",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -244,7 +346,9 @@ var DateInput = React__namespace.forwardRef(
                 {
                   type: "button",
                   onClick: () => {
-                    if (calendarMonth === 0) {
+                    if (inputType === "month") {
+                      setCalendarYear(calendarYear - 1);
+                    } else if (calendarMonth === 0) {
                       setCalendarMonth(11);
                       setCalendarYear(calendarYear - 1);
                     } else {
@@ -252,19 +356,19 @@ var DateInput = React__namespace.forwardRef(
                     }
                   },
                   className: "hover:bg-muted rounded-md p-1 transition-colors",
-                  "aria-label": "Previous month",
+                  "aria-label": inputType === "month" ? "Previous year" : "Previous month",
                   children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+                inputType !== "month" && /* @__PURE__ */ jsxRuntime.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: monthNames.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i, children: name }, name))
+                    children: MONTH_NAMES.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i, children: name }, name))
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -286,7 +390,9 @@ var DateInput = React__namespace.forwardRef(
                 {
                   type: "button",
                   onClick: () => {
-                    if (calendarMonth === 11) {
+                    if (inputType === "month") {
+                      setCalendarYear(calendarYear + 1);
+                    } else if (calendarMonth === 11) {
                       setCalendarMonth(0);
                       setCalendarYear(calendarYear + 1);
                     } else {
@@ -294,56 +400,158 @@ var DateInput = React__namespace.forwardRef(
                     }
                   },
                   className: "hover:bg-muted rounded-md p-1 transition-colors",
-                  "aria-label": "Next month",
+                  "aria-label": inputType === "month" ? "Next year" : "Next month",
                   children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 grid grid-cols-7 gap-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "text-muted-foreground py-1 text-center text-xs font-medium",
-                children: day
-              },
-              day
-            )) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            inputType === "month" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((name, month) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                disabled: day === null,
-                onClick: () => day && handleDateSelect(day),
+                onClick: () => handleMonthSelect(month),
                 className: chunkOR5DRJCW_cjs.cn(
-                  "h-8 w-8 rounded-md text-sm transition-colors",
+                  "rounded-md px-2 py-2 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"
+                  "hover:bg-muted",
+                  parsedDate.month === month && parsedDate.year === calendarYear && "bg-primary-800 hover:bg-primary-900 text-white"
                 ),
-                children: day
+                children: name.slice(0, 3)
               },
-              index
-            )) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border mt-3 border-t pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  const today = /* @__PURE__ */ new Date();
-                  setCalendarMonth(today.getMonth());
-                  setCalendarYear(today.getFullYear());
-                  handleDateSelect(today.getDate());
+              name
+            )) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 grid grid-cols-7 gap-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-muted-foreground py-1 text-center text-xs font-medium",
+                  children: day
+                },
+                day
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: day === null,
+                  onClick: () => day && handleDateSelect(day),
+                  className: chunkOR5DRJCW_cjs.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
                 },
-                className: "text-primary-800 w-full text-sm hover:underline",
-                children: "Today"
-              }
-            ) })
+                index
+              )) })
+            ] }),
+            inputType === "datetime-local" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border mt-3 flex items-center gap-2 border-t pt-3", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: String(hour).padStart(2, "0"), children: String(hour).padStart(2, "0") }, hour))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: ":" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: String(minute).padStart(2, "0"), children: String(minute).padStart(2, "0") }, minute))
+                }
+              ),
+              timeFormat === "12-hour" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "AM", children: "AM" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "PM", children: "PM" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border mt-3 flex gap-2 border-t pt-3", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsCalendarOpen(false),
+                  className: "text-primary-800 flex-1 text-sm hover:underline",
+                  children: "Done"
+                }
+              )
+            ] })
           ]
         }
       );
     };
-    if (showCalendar) {
+    if (inputType === "year") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMSRU3XBH_cjs.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: chunkOR5DRJCW_cjs.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;
@@ -381,12 +589,17 @@ var DateInput = React__namespace.forwardRef(
               ref,
               id: inputId,
               type: "text",
-              inputMode: "numeric",
+              inputMode: inputType === "date" ? "numeric" : void 0,
               autoComplete,
-              placeholder,
-              value: displayValue,
+              placeholder: inputType === "month" ? "Select month" : inputType === "datetime-local" ? "Select date and time" : placeholder,
+              value: formatPickerValue(displayValue, inputType, timeFormat),
               onChange: handleChange,
-              onBlur: handleBlur,
+              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: chunkOR5DRJCW_cjs.cn(
@@ -422,9 +635,9 @@ var DateInput = React__namespace.forwardRef(
               "aria-haspopup": "dialog",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 18 })
             }
-          ),
-          isCalendarOpen && renderCalendar()
+          )
         ] }),
+        isCalendarOpen && reactDom.createPortal(renderCalendar(), document.body),
         errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
@@ -494,5 +707,5 @@ function ChevronRightIcon() {
 }
 
 exports.DateInput = DateInput;
-//# sourceMappingURL=chunk-NINI4WVS.cjs.map
-//# sourceMappingURL=chunk-NINI4WVS.cjs.map
+//# sourceMappingURL=chunk-JC6Y3LGF.cjs.map
+//# sourceMappingURL=chunk-JC6Y3LGF.cjs.map