@farmzone/fz-react-ui 1.0.1 → 1.0.2

package/dist/index.js

@@ -909,7 +909,7 @@ var SELECT_BORDER_COLORS = {
 };
 function Select2(props) {
   const {
-    containerClass,
+    containerClassName,
     options,
     placeholder = "\uC120\uD0DD\uD574 \uC8FC\uC138\uC694",
     triggerClassName,
@@ -939,7 +939,7 @@ function Select2(props) {
     onChange("");
     onReset?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-0.5", containerClass ?? "w-20"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-0.5", containerClassName ?? "w-30"), children: [
     label && /* @__PURE__ */ jsx(
       "label",
       {
@@ -1022,6 +1022,7 @@ function Radio(props) {
     checked,
     onChange,
     disabled = false,
+    disabledMessage,
     checkColor = DEFAULT_CHECK_COLOR,
     unCheckColor = DEFAULT_UNCHECK_COLOR,
     labelClassName,
@@ -1070,23 +1071,29 @@ function Radio(props) {
       }
     )
   ] });
+  const withTooltip = (node) => {
+    if (!disabled || !disabledMessage) return node;
+    return /* @__PURE__ */ jsx(Tooltip2, { content: disabledMessage, position: "bottom", asChild: true, sideOffset: 4, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: node }) });
+  };
   if (onChange !== void 0 && checked !== void 0) {
-    return /* @__PURE__ */ jsx(
-      RadioGroupPrimitive.Root,
-      {
-        name,
-        value: checked ? value : "",
-        onValueChange: (newValue) => {
-          if (newValue === value) {
-            onChange(value);
-          }
-        },
-        disabled,
-        children: control
-      }
+    return withTooltip(
+      /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Root,
+        {
+          name,
+          value: checked ? value : "",
+          onValueChange: (newValue) => {
+            if (newValue === value) {
+              onChange(value);
+            }
+          },
+          disabled,
+          children: control
+        }
+      )
     );
   }
-  return control;
+  return withTooltip(control);
 }
 function RadioGroup(props) {
   const {
@@ -1122,6 +1129,7 @@ function RadioGroup(props) {
           value: option.value,
           label: option.label,
           disabled: disabled || option.disabled,
+          disabledMessage: option.disabled ? option.disabledMessage : void 0,
           checkColor,
           unCheckColor,
           labelClassName,
@@ -1926,6 +1934,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;
@@ -1982,6 +2012,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,
@@ -1996,133 +2125,163 @@ function RenderCalendar(props) {
     goToNextMonth,
     onYearChange,
     onMonthChange,
+    onSelectOpenChange,
     editDateSelect = true,
     datePosition = "bottom",
-    calendarSelectContainerClass
+    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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-          /* @__PURE__ */ jsx("button", { onClick: goToPreviousMonth, className: "p-1 hover:bg-gray-100 rounded cursor-pointer", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 text-balck" }) }),
-          editDateSelect ? /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center gap-2",
-              onClick: handleStopPropagation,
-              onMouseDown: handleStopPropagation,
-              children: [
-                /* @__PURE__ */ jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsx(
-                  Select2,
-                  {
-                    value: year.toString(),
-                    options: yearOptions,
-                    onChange: handleYearChange,
-                    className: "cursor-pointer",
-                    containerClass: calendarSelectContainerClass
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsx(
-                  Select2,
-                  {
-                    value: (month + 1).toString(),
-                    options: monthOptions,
-                    onChange: handleMonthChange,
-                    className: "cursor-pointer",
-                    containerClass: calendarSelectContainerClass
-                  }
-                ) })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold", children: [
-            year,
-            "\uB144 ",
-            month + 1,
-            "\uC6D4"
-          ] }),
-          /* @__PURE__ */ jsx("button", { onClick: goToNextMonth, className: "p-1 hover:bg-gray-100 rounded cursor-pointer", children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"].map((day) => /* @__PURE__ */ jsx("div", { className: "text-center text-sm font-medium text-gray-500 py-2 ", children: day }, day)) }),
-        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: panelClass, onClick: stopBubble, onMouseDown: stopBubble, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: goToPreviousMonth,
+          className: "cursor-pointer rounded p-1 hover:bg-gray-100",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+        }
+      ),
+      editDateSelect ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "presentation",
+          className: "flex items-center gap-2",
+          onClick: stopBubble,
+          onMouseDown: stopBubble,
+          children: [
+            /* @__PURE__ */ 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__ */ 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__ */ jsxs("h3", { className: "text-lg font-semibold", children: [
+        year,
+        "\uB144 ",
+        monthIndex + 1,
+        "\uC6D4"
+      ] }),
+      /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mb-1 grid grid-cols-7 gap-1", children: CALENDAR_WEEKDAY_LABELS.map((day) => /* @__PURE__ */ jsx("div", { className: "py-2 text-center text-sm font-medium text-gray-500", children: day }, day)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: days }),
+    range && /* @__PURE__ */ jsx("div", { className: "mt-3 text-sm text-gray-600", children: /* @__PURE__ */ jsx("p", { className: "text-center", children: isSelectingEnd ? CALENDAR_RANGE_HINT.end : CALENDAR_RANGE_HINT.start }) }),
+    showTodayButton && isTodaySelectable && /* @__PURE__ */ jsx("div", { className: "-mx-3 -mb-3 mt-3 flex items-center justify-center border-t border-gray-200 py-2", children: /* @__PURE__ */ 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] = useState(false);
@@ -2219,11 +2378,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]);
@@ -6531,7 +6694,7 @@ function CascadingSelectFieldInner(props) {
         disabled,
         hasError,
         options: toSelectOptions(primaryOptions),
-        containerClass: firstSelectClass.containerClassName,
+        containerClassName: firstSelectClass.containerClassName,
         triggerClassName: firstSelectClass.triggerClassName,
         canReset: true,
         onChange: (nextPrimary) => {
@@ -6548,7 +6711,7 @@ 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) => {
@@ -6592,7 +6755,8 @@ function DateField(props) {
     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) {
@@ -6609,7 +6773,8 @@ function DateField(props) {
       className: "w-full",
       validation: hasError,
       datePosition,
-      maxDate
+      maxDate,
+      calendarSelectContainerClass
     }
   ) });
 }
@@ -6799,7 +6964,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
       }))
     }
   );
@@ -6837,7 +7004,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",
@@ -6949,11 +7116,12 @@ function SelectWithInputField(props) {
         disabled,
         hasError,
         options: toSelectOptions(options),
-        containerClass: selectClass.containerClassName,
+        containerClassName: selectClass.containerClassName,
         triggerClassName: selectClass.triggerClassName,
         onChange: (nextPrefix) => {
           setSelectedPrefix(nextPrefix);
           updateCombined(nextPrefix, inputPart);
+          onBlur();
         }
       }
     ),
@@ -7088,7 +7256,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();
@@ -7096,6 +7264,7 @@ function useBlurValidation(name, options) {
     [
       markHadValueIfFilled,
       options.revalidateOnChange,
+      options.validateEmptyOnChange,
       shouldValidateEmptyOnChange,
       trigger,
       name,
@@ -7116,9 +7285,7 @@ var REVALIDATE_ON_CHANGE_TYPES = /* @__PURE__ */ new Set([
   "radio",
   "switch",
   "select",
-  "date",
   "cascading-select",
-  "select-with-input",
   "input-with-button",
   "address"
 ]);
@@ -7139,14 +7306,15 @@ function FormFieldRow(props) {
   const { control } = useFormContext();
   const { isSubmitted } = 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) => {
@@ -7251,6 +7419,7 @@ function rowPropsToFieldConfig(props) {
     canReset,
     datePosition,
     disableFutureDates,
+    calendarSelectContainerClass,
     revalidateFields,
     renderCustomField,
     colspan,
@@ -7281,6 +7450,7 @@ function rowPropsToFieldConfig(props) {
     canReset,
     datePosition,
     disableFutureDates,
+    calendarSelectContainerClass,
     revalidateFields,
     renderCustomField,
     colspan,
@@ -7440,14 +7610,7 @@ function PageFilter(props) {
     const rowGap2 = index !== 0 ? option.label ? gap : 5 : 0;
     switch (option.type) {
       case "input":
-        return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(
-          Input2,
-          {
-            placeholder: option.placeholder,
-            value: currentValue,
-            onChange: handleInputChange(optionKey)
-          }
-        ) }, String(optionKey));
+        return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(Input2, { placeholder: option.placeholder, value: currentValue, onChange: handleInputChange(optionKey) }) }, String(optionKey));
       case "select":
         return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(
           Select2,
@@ -7455,7 +7618,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":