@farmzone/fz-react-ui 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -943,7 +943,7 @@ var SELECT_BORDER_COLORS = {
 };
 function Select2(props) {
   const {
-    containerClass,
+    containerClassName,
     options,
     placeholder = "\uC120\uD0DD\uD574 \uC8FC\uC138\uC694",
     triggerClassName,
@@ -973,7 +973,7 @@ function Select2(props) {
     onChange("");
     onReset?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-0.5", containerClass ?? "w-30"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-0.5", containerClassName ?? "w-30"), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
@@ -1056,6 +1056,7 @@ function Radio(props) {
     checked,
     onChange,
     disabled = false,
+    disabledMessage,
     checkColor = DEFAULT_CHECK_COLOR,
     unCheckColor = DEFAULT_UNCHECK_COLOR,
     labelClassName,
@@ -1104,23 +1105,29 @@ function Radio(props) {
       }
     )
   ] });
+  const withTooltip = (node) => {
+    if (!disabled || !disabledMessage) return node;
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { content: disabledMessage, position: "bottom", asChild: true, sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: node }) });
+  };
   if (onChange !== void 0 && checked !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadioGroupPrimitive__namespace.Root,
-      {
-        name,
-        value: checked ? value : "",
-        onValueChange: (newValue) => {
-          if (newValue === value) {
-            onChange(value);
-          }
-        },
-        disabled,
-        children: control
-      }
+    return withTooltip(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroupPrimitive__namespace.Root,
+        {
+          name,
+          value: checked ? value : "",
+          onValueChange: (newValue) => {
+            if (newValue === value) {
+              onChange(value);
+            }
+          },
+          disabled,
+          children: control
+        }
+      )
     );
   }
-  return control;
+  return withTooltip(control);
 }
 function RadioGroup(props) {
   const {
@@ -1156,6 +1163,7 @@ function RadioGroup(props) {
           value: option.value,
           label: option.label,
           disabled: disabled || option.disabled,
+          disabledMessage: option.disabled ? option.disabledMessage : void 0,
           checkColor,
           unCheckColor,
           labelClassName,
@@ -1960,6 +1968,28 @@ function parseLocalYmd(ymd) {
   if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== d) return null;
   return dt;
 }
+function canSelectToday(options) {
+  const today = options.now ?? /* @__PURE__ */ new Date();
+  const todayYmd = formatDate(today);
+  if (options.maxDate && isCalendarDayAfterMax(today, options.maxDate)) {
+    return false;
+  }
+  if (!options.range) {
+    return true;
+  }
+  if (options.isSelectingEnd) {
+    const start = options.rangeStart?.trim() ?? "";
+    if (start.length === 10 && todayYmd < start) {
+      return false;
+    }
+    return true;
+  }
+  const end = options.rangeEnd?.trim() ?? "";
+  if (end.length === 10 && todayYmd > end) {
+    return false;
+  }
+  return true;
+}
 function isCalendarDayAfterMax(date, maxYmd) {
   const max = parseLocalYmd(maxYmd);
   if (!max) return false;
@@ -2016,6 +2046,105 @@ function validateAndFormatInput(input) {
   }
   return `${year}-${month}-${day}`;
 }
+
+// src/components/DatePicker/calendar/config/default.ts
+var DEFAULT_CALENDAR_YEAR_HALF_SPAN = 25;
+var CALENDAR_WEEKDAY_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+var CALENDAR_RANGE_HINT = {
+  start: "\uC2DC\uC791 \uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694",
+  end: "\uC885\uB8CC \uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694"
+};
+var CALENDAR_PORTAL_Z_INDEX = Z_INDEX.CALENDAR_PORTAL;
+var CALENDAR_SELECT_CLASSNAMES = {
+  containerClass: "w-20 shrink-0",
+  triggerClassName: "h-8 px-2 py-1 text-sm cursor-pointer",
+  contentClassName: "min-w-[5rem]"
+};
+var CALENDAR_PANEL_BASE_CLASS = "bg-white border border-gray-300 rounded-lg shadow-lg p-3 min-w-[280px]";
+var CALENDAR_PANEL_ANCHORED_CLASS = `${CALENDAR_PANEL_BASE_CLASS} absolute z-50`;
+var YEAR_SELECT_CONTENT_EXTRA_CLASS = "year-select-content custom-view-scrollbar max-h-50 overflow-y-auto";
+var YEAR_SELECT_OPEN_CONTENT_SELECTOR = ".year-select-content[data-state='open']";
+var SELECT_ITEM_CHECKED_SELECTOR = "[data-slot='select-item'][data-state='checked']";
+
+// src/components/DatePicker/calendar/config/calendar.ts
+function parseYmdDateString(value) {
+  if (value.length !== 10) return null;
+  return parseLocalYmd(value);
+}
+function resolveCalendarYearBounds(anchorYear, calendarYearRange) {
+  const fallbackMin = anchorYear - DEFAULT_CALENDAR_YEAR_HALF_SPAN;
+  const fallbackMax = anchorYear + DEFAULT_CALENDAR_YEAR_HALF_SPAN;
+  const rawMin = calendarYearRange?.minYear?.trim();
+  const rawMax = calendarYearRange?.maxYear?.trim();
+  if (rawMin === void 0 || rawMin === "" || rawMax === void 0 || rawMax === "") {
+    return { minYear: fallbackMin, maxYear: fallbackMax };
+  }
+  const minParsed = Number.parseInt(rawMin, 10);
+  const maxParsed = Number.parseInt(rawMax, 10);
+  if (Number.isNaN(minParsed) || Number.isNaN(maxParsed) || minParsed > maxParsed) {
+    return { minYear: fallbackMin, maxYear: fallbackMax };
+  }
+  return { minYear: minParsed, maxYear: maxParsed };
+}
+function buildCalendarYearSelectOptions(maxDate, anchorYear = (/* @__PURE__ */ new Date()).getFullYear(), calendarYearRange) {
+  const { minYear, maxYear } = resolveCalendarYearBounds(anchorYear, calendarYearRange);
+  const maxSelectableYear = maxDate ? parseLocalYmd(maxDate)?.getFullYear() ?? null : null;
+  const options = [];
+  for (let y = maxYear; y >= minYear; y--) {
+    options.push({
+      value: String(y),
+      label: `${y}\uB144`,
+      disabled: maxSelectableYear !== null && y > maxSelectableYear
+    });
+  }
+  return options;
+}
+function buildCalendarMonthSelectOptions(viewYear, maxDate) {
+  const maxDateParsed = maxDate ? parseLocalYmd(maxDate) : null;
+  const maxYear = maxDateParsed?.getFullYear() ?? null;
+  const maxMonth = maxDateParsed !== null && maxDateParsed !== void 0 ? maxDateParsed.getMonth() + 1 : null;
+  const isMaxYear = maxYear !== null && viewYear === maxYear;
+  const options = [];
+  for (let m = 1; m <= 12; m++) {
+    options.push({
+      value: String(m),
+      label: `${m}\uC6D4`,
+      disabled: isMaxYear && maxMonth !== null && m > maxMonth
+    });
+  }
+  return options;
+}
+function getCalendarMonthGrid(year, monthIndex) {
+  const firstDay = new Date(year, monthIndex, 1);
+  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+  const leadingEmpty = firstDay.getDay();
+  const totalCells = leadingEmpty + daysInMonth;
+  const trailingEmpty = totalCells % 7 === 0 ? 0 : 7 - totalCells % 7;
+  return { leadingEmpty, daysInMonth, trailingEmpty };
+}
+function disableNextCalendarMonth(year, monthIndex, maxDate) {
+  if (maxDate === void 0) return false;
+  return isCalendarDayAfterMax(new Date(year, monthIndex + 1, 1), maxDate);
+}
+function scrollOpenYearSelectCheckedIntoView() {
+  requestAnimationFrame(() => {
+    const root2 = document.querySelector(YEAR_SELECT_OPEN_CONTENT_SELECTOR);
+    if (!(root2 instanceof HTMLElement)) return;
+    const checkedItem = root2.querySelector(SELECT_ITEM_CHECKED_SELECTOR);
+    if (!(checkedItem instanceof HTMLElement)) return;
+    checkedItem.scrollIntoView({ block: "start" });
+  });
+}
+function dayCellButtonClass(opts) {
+  const { isToday, isSelected, isInRange, isRangeStart, isRangeEnd, interactiveDisabled } = opts;
+  const parts = ["w-8 h-8 text-sm flex items-center justify-center rounded-2xl transition-colors"];
+  if (isToday) parts.push("bg-gray-100");
+  if (isSelected && !isToday) parts.push("bg-neutral-200 text-gray-700");
+  if (isInRange && !isToday) parts.push("bg-gray-100/90");
+  if ((isRangeStart || isRangeEnd) && !isToday) parts.push("bg-neutral-300 text-gray-700 opacity-100");
+  parts.push(interactiveDisabled ? "opacity-20 cursor-not-allowed" : "hover:bg-blue-100 cursor-pointer");
+  return parts.filter(Boolean).join(" ").trim();
+}
 function RenderCalendar(props) {
   const {
     currentDate,
@@ -2030,130 +2159,163 @@ function RenderCalendar(props) {
     goToNextMonth,
     onYearChange,
     onMonthChange,
+    onSelectOpenChange,
     editDateSelect = true,
-    datePosition = "bottom"
+    datePosition = "bottom",
+    maxDate,
+    calendarYearRange,
+    calendarSelectContainerClass,
+    floating = false,
+    showTodayButton = true
   } = props;
   const year = currentDate.getFullYear();
-  const month = currentDate.getMonth();
-  const firstDay = new Date(year, month, 1);
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  const yearOptions = [];
-  for (let i = currentYear - 25; i <= currentYear + 20; i++) {
-    yearOptions.push({ value: i.toString(), label: `${i}\uB144` });
-  }
-  const monthOptions = [];
-  for (let i = 1; i <= 12; i++) {
-    monthOptions.push({ value: i.toString(), label: `${i}\uC6D4` });
-  }
-  const lastDay = new Date(year, month + 1, 0);
-  const startDate = new Date(firstDay);
-  startDate.setDate(startDate.getDate() - firstDay.getDay());
-  const endDate = new Date(lastDay);
-  endDate.setDate(endDate.getDate() + (6 - endDate.getDay()));
-  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+  const monthIndex = currentDate.getMonth();
+  const anchorYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const disableNextMonth = disableNextCalendarMonth(year, monthIndex, maxDate);
+  const { leadingEmpty, daysInMonth, trailingEmpty } = getCalendarMonthGrid(year, monthIndex);
+  const yearOptions = buildCalendarYearSelectOptions(maxDate, anchorYear, calendarYearRange);
+  const monthOptions = buildCalendarMonthSelectOptions(year, maxDate);
+  const todayFormatted = formatDate(/* @__PURE__ */ new Date());
+  const selectedSingleYmd = range ? null : inputValue;
+  const rangeStartYmd = rangeStart.trim();
+  const rangeEndYmd = rangeEnd.trim();
   const days = [];
-  const currentDateFormatted = formatDate(/* @__PURE__ */ new Date());
-  const selectedDate = range ? null : inputValue;
-  const handleStopPropagation = (e) => e.stopPropagation();
-  const handleYearChange = (value) => onYearChange(parseInt(value));
-  const handleMonthChange = (value) => onMonthChange(parseInt(value) - 1);
-  for (let i = 0; i < totalDays; i++) {
-    const date = new Date(startDate);
-    date.setDate(startDate.getDate() + i);
+  for (let i = 0; i < leadingEmpty; i++) {
+    days.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8", "aria-hidden": true }, `lead-${i}`));
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    const date = new Date(year, monthIndex, d);
     const dateFormatted = formatDate(date);
-    const isToday = dateFormatted === currentDateFormatted;
-    const isSelected = dateFormatted === selectedDate;
+    const isToday = dateFormatted === todayFormatted;
+    const isSelected = dateFormatted === selectedSingleYmd;
     const isInRange = isDateInRange(date, range, rangeStart, rangeEnd);
-    const isRangeStart = range && dateFormatted === rangeStart;
-    const isRangeEnd = range && dateFormatted === rangeEnd;
-    const isCurrentMonth = date.getMonth() === month;
-    const rangeStartDate = new Date(rangeStart);
-    rangeStartDate.setDate(rangeStartDate.getDate() - 1);
-    const isDisabled = range && isSelectingEnd && rangeStart && date < rangeStartDate;
+    const isRangeStartFlag = Boolean(range && dateFormatted === rangeStart);
+    const isRangeEndFlag = Boolean(range && dateFormatted === rangeEnd);
+    const isBeforeRangeStart = range && isSelectingEnd && rangeStartYmd.length === 10 && dateFormatted < rangeStartYmd;
+    const isAfterRangeEnd = range && !isSelectingEnd && rangeEndYmd.length === 10 && dateFormatted > rangeEndYmd;
+    const isGreyedForRange = Boolean(isBeforeRangeStart || isAfterRangeEnd);
+    const isPastMax = maxDate ? isCalendarDayAfterMax(date, maxDate) : false;
     days.push(
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
+          type: "button",
           onClick: () => handleDateSelect(date),
-          disabled: isDisabled || false,
-          className: `
-                w-8 h-8 text-sm flex items-center justify-center rounded-2xl transition-colors
-                ${!isCurrentMonth ? "text-gray-300" : ""}
-                ${isToday ? "bg-gray-100 " : ""}
-                ${isInRange && !isToday ? "bg-gray-100/90" : ""}
-                ${isSelected && !isToday ? "bg-neutral-200 text-gray-700" : ""}
-                ${(isRangeStart || isRangeEnd) && !isToday ? "bg-neutral-300 text-gray-700 opacity-100" : ""}
-                ${isDisabled ? "opacity-20 cursor-not-allowed" : "hover:bg-blue-100 cursor-pointer"}
-                `,
-          children: date.getDate()
+          disabled: isGreyedForRange || isPastMax,
+          className: dayCellButtonClass({
+            isToday,
+            isSelected: Boolean(isSelected),
+            isInRange,
+            isRangeStart: isRangeStartFlag,
+            isRangeEnd: isRangeEndFlag,
+            interactiveDisabled: isGreyedForRange || isPastMax
+          }),
+          children: d
         },
-        i
+        d
       )
     );
   }
-  const calendarPositionClass = range && calendarPosition === "end" ? "right-0" : "left-0";
-  const datePositionClass = datePosition === "top" ? "bottom-full mb-1" : "top-full mt-1";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `${datePositionClass} ${calendarPositionClass} bg-white border border-gray-300 rounded-lg shadow-lg p-3 z-50 min-w-[280px]`,
-      onClick: handleStopPropagation,
-      onMouseDown: handleStopPropagation,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: goToPreviousMonth, className: "p-1 hover:bg-gray-100 rounded cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4 text-balck" }) }),
-          editDateSelect ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "flex items-center gap-2",
-              onClick: handleStopPropagation,
-              onMouseDown: handleStopPropagation,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Select2,
-                  {
-                    value: year.toString(),
-                    options: yearOptions,
-                    onChange: handleYearChange,
-                    className: "cursor-pointer"
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Select2,
-                  {
-                    value: (month + 1).toString(),
-                    options: monthOptions,
-                    onChange: handleMonthChange,
-                    className: " cursor-pointer"
-                  }
-                ) })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold", children: [
-            year,
-            "\uB144 ",
-            month + 1,
-            "\uC6D4"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: goToNextMonth, className: "p-1 hover:bg-gray-100 rounded cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"].map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-gray-500 py-2 ", children: day }, day)) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: days })
-      ]
-    }
-  );
-}
-
-// src/components/DatePicker/calendar/config/default.ts
-var CALENDAR_PORTAL_Z_INDEX = Z_INDEX.CALENDAR_PORTAL;
-
-// src/components/DatePicker/calendar/config/calendar.ts
-function parseYmdDateString(value) {
-  if (value.length !== 10) return null;
-  return parseLocalYmd(value);
+  for (let i = 0; i < trailingEmpty; i++) {
+    days.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8", "aria-hidden": true }, `trail-${i}`));
+  }
+  const calendarPositionClass = !floating && range && calendarPosition === "end" ? "right-0" : !floating ? "left-0" : "";
+  const datePositionClass = floating ? "" : datePosition === "top" ? "bottom-full mb-1" : "top-full mt-1";
+  const panelClass = floating ? CALENDAR_PANEL_BASE_CLASS : cn(CALENDAR_PANEL_ANCHORED_CLASS, datePositionClass, calendarPositionClass);
+  const handleYearSelectOpenChange = (open) => {
+    onSelectOpenChange?.(open);
+    if (open) scrollOpenYearSelectCheckedIntoView();
+  };
+  const sel = CALENDAR_SELECT_CLASSNAMES;
+  const containerClass = cn(sel.containerClass, calendarSelectContainerClass);
+  const stopBubble = (e) => e.stopPropagation();
+  const isTodaySelectable = canSelectToday({
+    maxDate,
+    range,
+    isSelectingEnd,
+    rangeStart,
+    rangeEnd
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelClass, onClick: stopBubble, onMouseDown: stopBubble, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: goToPreviousMonth,
+          className: "cursor-pointer rounded p-1 hover:bg-gray-100",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
+        }
+      ),
+      editDateSelect ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "presentation",
+          className: "flex items-center gap-2",
+          onClick: stopBubble,
+          onMouseDown: stopBubble,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select2,
+              {
+                value: year.toString(),
+                options: yearOptions,
+                onChange: (value) => onYearChange(Number.parseInt(value, 10)),
+                containerClassName: containerClass,
+                triggerClassName: sel.triggerClassName,
+                contentClassName: cn(YEAR_SELECT_CONTENT_EXTRA_CLASS, sel.contentClassName),
+                disableScrollButtonEvents: true,
+                onOpenChange: handleYearSelectOpenChange
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select2,
+              {
+                value: (monthIndex + 1).toString(),
+                options: monthOptions,
+                onChange: (value) => onMonthChange(Number.parseInt(value, 10) - 1),
+                containerClassName: containerClass,
+                triggerClassName: sel.triggerClassName,
+                contentClassName: sel.contentClassName,
+                onOpenChange: (open) => onSelectOpenChange?.(open)
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold", children: [
+        year,
+        "\uB144 ",
+        monthIndex + 1,
+        "\uC6D4"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: goToNextMonth,
+          disabled: disableNextMonth,
+          className: cn(
+            "rounded p-1",
+            disableNextMonth ? "cursor-not-allowed opacity-30" : "cursor-pointer hover:bg-gray-100"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 grid grid-cols-7 gap-1", children: CALENDAR_WEEKDAY_LABELS.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 text-center text-sm font-medium text-gray-500", children: day }, day)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: days }),
+    range && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-sm text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center", children: isSelectingEnd ? CALENDAR_RANGE_HINT.end : CALENDAR_RANGE_HINT.start }) }),
+    showTodayButton && isTodaySelectable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-3 -mb-3 mt-3 flex items-center justify-center border-t border-gray-200 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleDateSelect(/* @__PURE__ */ new Date()),
+        className: "cursor-pointer text-sm text-gray-800 hover:text-main",
+        children: "Today"
+      }
+    ) })
+  ] });
 }
-
-// src/components/DatePicker/calendar/hooks/useCalendarState.ts
 function useCalendarState(props) {
   const { datePosition = "bottom", disabled = false, calendarRef } = props;
   const [isCalendarOpen, setIsCalendarOpen] = React6.useState(false);
@@ -2250,11 +2412,15 @@ function useFloatingCalendarPosition(anchorRef, isOpen2, placement, align = "sta
         setStyle({ ...base, top: rect.bottom + CALENDAR_GAP });
       }
     };
+    const handleScroll = (e) => {
+      if (e.target?.closest?.('[data-slot="select-content"]')) return;
+      update();
+    };
     update();
-    window.addEventListener("scroll", update, true);
+    window.addEventListener("scroll", handleScroll, true);
     window.addEventListener("resize", update);
     return () => {
-      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("scroll", handleScroll, true);
       window.removeEventListener("resize", update);
     };
   }, [isOpen2, placement, align, anchorRef]);
@@ -2292,6 +2458,7 @@ function DatePickerRange(props) {
     disabled = false,
     maxDate,
     calendarYearRange,
+    calendarSelectContainerClass,
     showTodayButton = true
   } = props;
   const [inputs, setInputs] = React6.useState({ start: startValue, end: endValue });
@@ -2428,6 +2595,7 @@ function DatePickerRange(props) {
           datePosition: autoDatePosition,
           maxDate,
           calendarYearRange,
+          calendarSelectContainerClass,
           showTodayButton
         }
       )
@@ -2507,6 +2675,7 @@ function DatePickerSingle(props) {
     disabled = false,
     maxDate,
     calendarYearRange,
+    calendarSelectContainerClass,
     onBlur,
     showTodayButton = true
   } = props;
@@ -2599,6 +2768,7 @@ function DatePickerSingle(props) {
           datePosition: autoDatePosition,
           maxDate,
           calendarYearRange,
+          calendarSelectContainerClass,
           showTodayButton
         }
       )
@@ -2657,6 +2827,7 @@ function DatePicker(props) {
     disabled,
     maxDate,
     calendarYearRange,
+    calendarSelectContainerClass,
     showTodayButton
   } = props;
   if (isRange) {
@@ -2674,6 +2845,7 @@ function DatePicker(props) {
         disabled,
         maxDate,
         calendarYearRange,
+        calendarSelectContainerClass,
         showTodayButton
       }
     );
@@ -2693,6 +2865,7 @@ function DatePicker(props) {
       disabled,
       maxDate,
       calendarYearRange,
+      calendarSelectContainerClass,
       showTodayButton,
       onBlur
     }
@@ -3558,7 +3731,7 @@ function TableFooter(props) {
   const { paginationInfo, renderLeft, renderRight } = props;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-4 min-h-16", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start flex-1 min-w-0", children: renderLeft }),
-    paginationInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 px-5", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { ...paginationInfo }) }),
+    paginationInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { ...paginationInfo }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end flex-1 min-w-0", children: renderRight })
   ] }) });
 }
@@ -3714,7 +3887,7 @@ function useTableFixed(columns, isHeader = false) {
     window.addEventListener("resize", onResize);
     const firstKey = columns[0]?.key;
     const cell = firstKey ? document.getElementById(`${firstKey}${isHeader ? "-header" : "-body"}`) : null;
-    const tableEl = cell?.closest("table") || document.querySelector("table.table-layout");
+    const tableEl = cell?.closest("table") || document.querySelector("table.table-fixed");
     if (tableEl && "ResizeObserver" in window) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(tableEl);
@@ -3801,19 +3974,14 @@ function TableHeader(props) {
   const columns = React6.useMemo(() => {
     return customColumns.map((column) => {
       const { key } = column;
-      const getWidth = () => {
-        if (key === "__checkbox__") {
-          return "40px";
-        }
-        return column.width ?? "calc(100%/4)";
-      };
-      const getAlign = () => {
-        if (key === "__checkbox__") {
-          return "center";
-        }
-        return column.align ?? "left";
+      const isCheckbox = key === "__checkbox__";
+      return {
+        ...column,
+        width: isCheckbox ? "40px" : column.width,
+        minWidth: isCheckbox ? "40px" : column.minWidth ?? column.width,
+        maxWidth: isCheckbox ? "40px" : column.maxWidth,
+        align: isCheckbox ? "center" : column.align ?? "left"
       };
-      return { ...column, width: getWidth(), align: getAlign() };
     });
   }, [customColumns]);
   const { getColumnFixedStyle } = useTableFixed(columns, true);
@@ -4286,11 +4454,11 @@ function SkeletonTd(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
-      className: "px-2 py-[6.8px] whitespace-nowrap text-sm border-r border-b border-gray-200/70 last:border-r-0",
+      className: `${col.key === "__checkbox__" ? "p-0" : "px-2 py-[6.8px]"} whitespace-nowrap text-sm border-r border-b border-gray-200/70 last:border-r-0`,
       style: {
         width: col.width,
         minWidth: col.minWidth || col.width,
-        maxWidth: col.maxWidth || col.width
+        maxWidth: col.key === "__checkbox__" ? col.maxWidth || col.width : void 0
       },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-4", children: showSquare ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "size-4 rounded-xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-1.5 rounded-sm", style: { width: "calc(100% - 20px)" } }) })
     }
@@ -4371,7 +4539,7 @@ function getAlignStyle(align) {
   return align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
 }
 function applyColDefaults(col) {
-  const width = col.key === "__checkbox__" ? "40px" : col.width ?? col.minWidth ?? "100px";
+  const width = col.key === "__checkbox__" ? "40px" : col.width ?? col.minWidth;
   const align = col.key === "__checkbox__" ? "center" : col.align ?? "left";
   return { ...col, width, align };
 }
@@ -4820,17 +4988,18 @@ function Table(props) {
       const { width, minWidth, maxWidth, align } = col;
       const fixedStyle = isPinned ? getColumnFixedStyleRef.current(col) : void 0;
       const cellContent = col.render ? col.render(record[col.key], record, rowIdx) : String(record[col.key] ?? "");
+      const isCheckbox = col.key === "__checkbox__";
       return /* @__PURE__ */ jsxRuntime.jsx(
         "td",
         {
           id: `${col.key}-body`,
           "data-row-cell": "true",
           "data-col-key": col.key,
-          className: "px-2 py-[6.8px] whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all",
+          className: `${isCheckbox ? "p-0" : "px-2 py-[6.8px]"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
           style: {
             width,
             minWidth: minWidth || width,
-            maxWidth: maxWidth || width,
+            maxWidth: isCheckbox ? maxWidth || width : void 0,
             ...fixedStyle
           },
           onClick: (event) => {
@@ -4926,7 +5095,7 @@ function Table(props) {
         ref: scrollRef,
         className: "relative w-full overflow-y-auto overflow-x-auto custom-view-scrollbar bg-white",
         style: { height: `${tableHeight}px` },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-layout", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             TableHeader,
             {
@@ -6026,6 +6195,7 @@ var FORM_CONTROL_CLASS = "h-8 w-full rounded border border-gray-300 bg-white px-
 function formControlClass(hasError, extra) {
   return cn2(FORM_CONTROL_CLASS, FORM_CONTROL_FOCUS_CLASS, hasError && FORM_FIELD_ERROR_BORDER_CLASS, extra);
 }
+var FIELD_READONLY_TEXT_CLASS = "text-sm text-gray-800 leading-tight";
 function fieldControlWrapClass(className) {
   return className ? cn2("min-w-0 shrink-0", className) : "min-w-0 w-full";
 }
@@ -6372,6 +6542,7 @@ function AddressField(props) {
   const {
     placeholder = "\uC8FC\uC18C\uB97C \uAC80\uC0C9\uD558\uC138\uC694",
     disabled = false,
+    readOnly = false,
     className = "",
     addressDetailKey,
     addressClassNames
@@ -6386,6 +6557,9 @@ function AddressField(props) {
       searchButtonRef.current?.click();
     }
   }, [isFocused]);
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   const handleComplete = (data) => {
     isAddressSelectedRef.current = true;
     const nextAddress = data.roadAddress || data.address;
@@ -6504,12 +6678,12 @@ function CascadingSelectField(props) {
 }
 function CascadingSelectFieldInner(props) {
   const {
-    field: { onChange, value },
+    field: { onChange, onBlur, value },
     config,
     hasError = false,
     cascadingSelect
   } = props;
-  const { disabled = false, className = "", cascadingSelectClassNames } = config;
+  const { disabled = false, readOnly = false, className = "", cascadingSelectClassNames } = config;
   const {
     primaryOptions,
     getSecondaryOptions,
@@ -6523,10 +6697,17 @@ function CascadingSelectFieldInner(props) {
     [formValue, getSecondaryOptions, separator]
   );
   React6.useLayoutEffect(() => {
+    if (readOnly) return;
     if (normalizedFormValue !== formValue) {
       onChange(normalizedFormValue);
     }
-  }, [formValue, normalizedFormValue, onChange]);
+  }, [formValue, normalizedFormValue, onChange, readOnly]);
+  if (readOnly) {
+    const primaryLabel = primaryOptions.find((o) => String(o.value) === primary)?.label ?? primary;
+    const secondaryLabel = secondary ? secondaryOptions.find((o) => String(o.value) === secondary)?.label ?? secondary : "";
+    const displayText = secondaryLabel ? `${primaryLabel} ${secondaryLabel}` : primaryLabel || "\u2014";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayText }) });
+  }
   const updateValue = (nextPrimary, nextSecondary) => {
     onChange(createCascadingSelectValue(nextPrimary, nextSecondary, separator));
   };
@@ -6547,11 +6728,12 @@ function CascadingSelectFieldInner(props) {
         disabled,
         hasError,
         options: toSelectOptions(primaryOptions),
-        containerClass: firstSelectClass.containerClassName,
+        containerClassName: firstSelectClass.containerClassName,
         triggerClassName: firstSelectClass.triggerClassName,
         canReset: true,
         onChange: (nextPrimary) => {
           updateValue(nextPrimary, "");
+          if (!nextPrimary) onBlur();
         }
       }
     ),
@@ -6563,11 +6745,12 @@ function CascadingSelectFieldInner(props) {
         disabled: disabled || !primary || secondaryOptions.length === 0,
         hasError,
         options: toSelectOptions(secondaryOptions),
-        containerClass: secondSelectClass.containerClassName,
+        containerClassName: secondSelectClass.containerClassName,
         triggerClassName: secondSelectClass.triggerClassName,
         canReset: true,
         onChange: (nextSecondary) => {
           updateValue(primary, nextSecondary);
+          onBlur();
         }
       }
     )
@@ -6578,7 +6761,11 @@ function CheckboxField(props) {
     field: { onChange, value },
     config
   } = props;
-  const { disabled = false, checkboxLabel, className = "" } = config;
+  const { disabled = false, readOnly = false, checkboxLabel, className = "" } = config;
+  if (readOnly) {
+    const text = value ? checkboxLabel ?? "\uC120\uD0DD\uB428" : "\u2014";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: text }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Checkbox,
     {
@@ -6599,11 +6786,16 @@ function DateField(props) {
   const {
     placeholder = "YYYY-MM-DD",
     disabled = false,
+    readOnly = false,
     className = "w-40",
     datePosition = "bottom",
-    disableFutureDates = false
+    disableFutureDates = false,
+    calendarSelectContainerClass = "w-20"
   } = config;
   const maxDate = disableFutureDates ? formatDate(/* @__PURE__ */ new Date()) : void 0;
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("flex items-center", fieldControlWrapClass(className)), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("flex items-center", fieldControlWrapClass(className)), children: /* @__PURE__ */ jsxRuntime.jsx(
     DatePicker,
     {
@@ -6615,7 +6807,8 @@ function DateField(props) {
       className: "w-full",
       validation: hasError,
       datePosition,
-      maxDate
+      maxDate,
+      calendarSelectContainerClass
     }
   ) });
 }
@@ -6631,11 +6824,17 @@ function InputField(props) {
     readOnly = false,
     maxLength,
     className = "",
-    type = "input"
+    type = "input",
+    numbersOnly = false
   } = config;
   const inputType = type === "email" ? "email" : type === "password" ? "password" : "text";
+  if (readOnly) {
+    const text = type === "password" ? value ? "**********" : "" : String(value ?? "") || "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: text }) });
+  }
   const handleChange = (e) => {
-    onChange(e.target.value);
+    const value2 = numbersOnly ? e.target.value.replace(/\D/g, "") : e.target.value;
+    onChange(value2);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Input2,
@@ -6666,7 +6865,7 @@ function InputWithButtonField(props) {
     placeholder = "\uC870\uD68C \uBC84\uD2BC\uC73C\uB85C \uC120\uD0DD",
     disabled = false,
     className = "",
-    readOnly = true,
+    readOnly = false,
     inputWithButton,
     onClickInputWithButton
   } = config;
@@ -6675,13 +6874,16 @@ function InputWithButtonField(props) {
     if (disabled) return;
     onClickInputWithButton?.();
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input2,
       {
         placeholder,
         value: String(value ?? ""),
-        readOnly,
+        readOnly: true,
         disabled,
         bare: true,
         className: formControlClass(hasError),
@@ -6721,6 +6923,9 @@ function NumberField(props) {
     }
   };
   const displayValue = value != null && value !== "" ? isMoney ? formatNumberWithCommas(value) : String(value) : "";
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayValue || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Input2,
     {
@@ -6750,6 +6955,9 @@ function PhoneField(props) {
   const handleChange = (e) => {
     onChange(formatPhoneNumber(e.target.value));
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Input2,
     {
@@ -6774,7 +6982,11 @@ function RadioField(props) {
     field: { onChange, value, name },
     config
   } = props;
-  const { disabled = false, options = [], className = "" } = config;
+  const { disabled = false, readOnly = false, options = [], className = "" } = config;
+  if (readOnly) {
+    const label = options.find((o) => String(o.value) === String(value ?? ""))?.label ?? String(value ?? "");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: label || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroup,
     {
@@ -6786,7 +6998,9 @@ function RadioField(props) {
       containerClassName: cn2("justify-start", fieldControlWrapClass(className)),
       options: options.map((option) => ({
         label: option.label,
-        value: String(option.value)
+        value: String(option.value),
+        disabled: option.disabled,
+        disabledMessage: option.disabledMessage
       }))
     }
   );
@@ -6806,11 +7020,16 @@ function SelectField(props) {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
     disabled = false,
+    readOnly = false,
     options = [],
     className = "",
     canReset = false
   } = config;
   const selectOptions = toSelectOptions2(options);
+  if (readOnly) {
+    const label = selectOptions.find((o) => o.value === String(value ?? ""))?.label ?? String(value ?? "");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: label || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Select2,
     {
@@ -6819,7 +7038,7 @@ function SelectField(props) {
       disabled,
       hasError,
       options: selectOptions,
-      containerClass: "flex w-full min-w-0 max-w-full items-center",
+      containerClassName: "flex w-full min-w-0 max-w-full items-center",
       className: "w-full min-w-0",
       triggerClassName: cn2(
         "h-8 w-full min-w-0 max-w-full rounded border bg-white px-2 py-1 text-sm shadow-none",
@@ -6857,16 +7076,6 @@ function combineSelectWithInputValue(prefix, input) {
   return `${prefix}${input}`;
 }
 var DEFAULT_SELECT_TRIGGER = "h-8 rounded border bg-white px-2 text-sm shadow-none min-w-[5rem]";
-function resolveSelectWithInputState(formValue, defaultPrefix, options) {
-  const parsed = parseSelectWithInputValue(formValue, defaultPrefix);
-  const validPrefixes = new Set(options.map((opt) => String(opt.value)));
-  const prefix = validPrefixes.has(parsed.prefix) ? parsed.prefix : defaultPrefix;
-  return {
-    prefix,
-    inputPart: parsed.input,
-    normalizedFormValue: combineSelectWithInputValue(prefix, parsed.input)
-  };
-}
 function SelectWithInputField(props) {
   const {
     field: { onChange, onBlur, value },
@@ -6875,37 +7084,58 @@ function SelectWithInputField(props) {
   } = props;
   const {
     disabled = false,
+    readOnly = false,
     options = [],
     maxLength,
     className = "",
     selectWithInput,
     selectWithInputClassNames
   } = config;
-  const inputMode = selectWithInput?.inputMode ?? "number";
+  const validationCtx = useSubmitFormValidation();
+  const numbersOnly = selectWithInput?.numbersOnly ?? selectWithInput?.inputMode !== "text";
   const defaultPrefix = String(options[0]?.value ?? "");
   const numberInputRef = React6.useRef(null);
   const formValue = String(value ?? "");
-  const { prefix, inputPart, normalizedFormValue } = React6.useMemo(
-    () => resolveSelectWithInputState(formValue, defaultPrefix, options),
-    [defaultPrefix, formValue, options]
-  );
+  const { prefix, inputPart, normalizedFormValue } = React6.useMemo(() => {
+    const parsed = parseSelectWithInputValue(formValue, defaultPrefix);
+    const validPrefixes = new Set(options.map((opt) => String(opt.value)));
+    const resolvedPrefix = validPrefixes.has(parsed.prefix) ? parsed.prefix : defaultPrefix;
+    return {
+      prefix: resolvedPrefix,
+      inputPart: parsed.input,
+      normalizedFormValue: combineSelectWithInputValue(resolvedPrefix, parsed.input)
+    };
+  }, [defaultPrefix, formValue, options]);
+  const [selectedPrefix, setSelectedPrefix] = React6.useState(prefix);
+  const [prevFormValue, setPrevFormValue] = React6.useState(formValue);
+  if (prevFormValue !== formValue) {
+    setPrevFormValue(formValue);
+    setSelectedPrefix(formValue ? prefix : defaultPrefix);
+  }
   React6.useLayoutEffect(() => {
-    if (normalizedFormValue !== formValue) {
+    if (readOnly) return;
+    if (formValue && normalizedFormValue !== formValue) {
       onChange(normalizedFormValue);
     }
-  }, [formValue, normalizedFormValue, onChange]);
+  }, [formValue, normalizedFormValue, onChange, readOnly]);
+  if (readOnly) {
+    const prefixLabel = options.find((o) => String(o.value) === prefix)?.label ?? prefix;
+    const displayText = inputPart ? `${prefixLabel} ${inputPart}` : prefix ? prefixLabel : "\u2014";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayText || "\u2014" }) });
+  }
   const updateCombined = (nextPrefix, nextInput) => {
     onChange(combineSelectWithInputValue(nextPrefix, nextInput));
   };
   const normalizeInput = (raw) => {
-    if (inputMode === "number") {
-      return raw.replace(/\D+/g, "");
-    }
+    if (numbersOnly) return raw.replace(/\D+/g, "");
     return raw;
   };
   const handleInputChange = (raw) => {
     const normalized = normalizeInput(raw.normalize("NFKC"));
-    updateCombined(prefix, normalized);
+    if (normalized) {
+      validationCtx?.markFieldHadValue(String(config.name));
+    }
+    updateCombined(selectedPrefix, normalized);
   };
   const selectClass = resolveSelectClassNameProp(selectWithInputClassNames?.selectClassName, {
     containerClassName: "shrink-0",
@@ -6915,15 +7145,17 @@ function SelectWithInputField(props) {
     /* @__PURE__ */ jsxRuntime.jsx(
       Select2,
       {
-        value: prefix,
+        value: selectedPrefix,
         placeholder: "\uC120\uD0DD",
         disabled,
         hasError,
         options: toSelectOptions(options),
-        containerClass: selectClass.containerClassName,
+        containerClassName: selectClass.containerClassName,
         triggerClassName: selectClass.triggerClassName,
         onChange: (nextPrefix) => {
+          setSelectedPrefix(nextPrefix);
           updateCombined(nextPrefix, inputPart);
+          onBlur();
         }
       }
     ),
@@ -6941,7 +7173,7 @@ function SelectWithInputField(props) {
         },
         onBlur: (e) => {
           const normalized = normalizeInput(e.target.value.normalize("NFKC"));
-          handleInputChange(normalized);
+          updateCombined(selectedPrefix, normalized);
           onBlur();
         }
       }
@@ -6953,7 +7185,10 @@ function SwitchField(props) {
     field: { onChange, value },
     config
   } = props;
-  const { disabled = false, className = "" } = config;
+  const { disabled = false, readOnly = false, className = "" } = config;
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: value ? "\uCF1C\uC9D0" : "\uAEBC\uC9D0" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(BaseSwitch, { checked: Boolean(value), onCheckedChange: onChange, disabled }) });
 }
 function TextareaField(props) {
@@ -6966,6 +7201,9 @@ function TextareaField(props) {
   const handleChange = (e) => {
     onChange(e.target.value);
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn2(FIELD_READONLY_TEXT_CLASS, "whitespace-pre-wrap"), children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Textarea,
     {
@@ -7052,7 +7290,7 @@ function useBlurValidation(name, options) {
     (value, fieldOnChange) => {
       markHadValueIfFilled(value);
       fieldOnChange(value);
-      if (options.revalidateOnChange || shouldValidateEmptyOnChange(value)) {
+      if (options.revalidateOnChange || options.validateEmptyOnChange && shouldValidateEmptyOnChange(value)) {
         void trigger(name);
       }
       void triggerRelatedFields();
@@ -7060,6 +7298,7 @@ function useBlurValidation(name, options) {
     [
       markHadValueIfFilled,
       options.revalidateOnChange,
+      options.validateEmptyOnChange,
       shouldValidateEmptyOnChange,
       trigger,
       name,
@@ -7080,9 +7319,7 @@ var REVALIDATE_ON_CHANGE_TYPES = /* @__PURE__ */ new Set([
   "radio",
   "switch",
   "select",
-  "date",
   "cascading-select",
-  "select-with-input",
   "input-with-button",
   "address"
 ]);
@@ -7103,14 +7340,15 @@ function FormFieldRow(props) {
   const { control } = reactHookForm.useFormContext();
   const { isSubmitted } = reactHookForm.useFormState({ control });
   const { name, label, type = "input", required = false, renderCustomField, contentAlign = "left" } = config;
+  const revalidateOnChange = REVALIDATE_ON_CHANGE_TYPES.has(type);
   const { handleBlur, handleChange } = useBlurValidation(name, {
     required,
-    revalidateOnChange: REVALIDATE_ON_CHANGE_TYPES.has(type),
+    revalidateOnChange,
+    validateEmptyOnChange: revalidateOnChange,
     revalidateFields: config.revalidateFields
   });
   const showError = Boolean(fieldState.error?.message) && (isSubmitted || fieldState.isTouched);
   const isTextarea = type === "textarea";
-  const revalidateOnChange = REVALIDATE_ON_CHANGE_TYPES.has(type);
   const wrappedField = wrapFieldHandlers(field, {
     onBlur: () => handleBlur(() => field.onBlur()),
     onChange: (value) => {
@@ -7211,9 +7449,11 @@ function rowPropsToFieldConfig(props) {
     options,
     className,
     allowDecimal,
+    numbersOnly,
     canReset,
     datePosition,
     disableFutureDates,
+    calendarSelectContainerClass,
     revalidateFields,
     renderCustomField,
     colspan,
@@ -7240,9 +7480,11 @@ function rowPropsToFieldConfig(props) {
     options,
     className,
     allowDecimal,
+    numbersOnly,
     canReset,
     datePosition,
     disableFutureDates,
+    calendarSelectContainerClass,
     revalidateFields,
     renderCustomField,
     colspan,
@@ -7402,14 +7644,7 @@ function PageFilter(props) {
     const rowGap2 = index !== 0 ? option.label ? gap : 5 : 0;
     switch (option.type) {
       case "input":
-        return /* @__PURE__ */ jsxRuntime.jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input2,
-          {
-            placeholder: option.placeholder,
-            value: currentValue,
-            onChange: handleInputChange(optionKey)
-          }
-        ) }, String(optionKey));
+        return /* @__PURE__ */ jsxRuntime.jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsxRuntime.jsx(Input2, { placeholder: option.placeholder, value: currentValue, onChange: handleInputChange(optionKey) }) }, String(optionKey));
       case "select":
         return /* @__PURE__ */ jsxRuntime.jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsxRuntime.jsx(
           Select2,
@@ -7417,7 +7652,8 @@ function PageFilter(props) {
             value: currentValue,
             onChange: handleSelectChange(optionKey),
             options: option.options,
-            placeholder: "\uC120\uD0DD\uD574\uC8FC\uC138\uC694"
+            placeholder: "\uC120\uD0DD",
+            containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
       case "radio":