@farmzone/fz-react-ui 1.0.0 → 1.0.1

package/dist/index.d.cts

@@ -441,6 +441,7 @@ type DatePickerBaseProps = {
     disabled?: boolean;
     maxDate?: YmdDateString;
     calendarYearRange?: CalendarYearRange;
+    calendarSelectContainerClass?: string;
     showTodayButton?: boolean;
 };
 type DatePickerSingleMode = DatePickerBaseProps & {
@@ -842,6 +843,9 @@ interface CascadingSelectFieldConfig {
     separator?: string;
 }
 interface SelectWithInputFieldConfig {
+    /** 입력 필드 숫자만 허용 여부. 기본: true. */
+    numbersOnly?: boolean;
+    /** @deprecated numbersOnly를 사용하세요. */
     inputMode?: "number" | "text";
 }
 interface InputWithButtonFieldConfig {
@@ -859,6 +863,7 @@ interface FormFieldConfig<TFieldValues extends FieldValues = FieldValues> {
     options?: SelectOption$1[];
     className?: string;
     allowDecimal?: boolean;
+    numbersOnly?: boolean;
     canReset?: boolean;
     datePosition?: "top" | "bottom";
     disableFutureDates?: boolean;

package/dist/index.d.ts

@@ -441,6 +441,7 @@ type DatePickerBaseProps = {
     disabled?: boolean;
     maxDate?: YmdDateString;
     calendarYearRange?: CalendarYearRange;
+    calendarSelectContainerClass?: string;
     showTodayButton?: boolean;
 };
 type DatePickerSingleMode = DatePickerBaseProps & {
@@ -842,6 +843,9 @@ interface CascadingSelectFieldConfig {
     separator?: string;
 }
 interface SelectWithInputFieldConfig {
+    /** 입력 필드 숫자만 허용 여부. 기본: true. */
+    numbersOnly?: boolean;
+    /** @deprecated numbersOnly를 사용하세요. */
     inputMode?: "number" | "text";
 }
 interface InputWithButtonFieldConfig {
@@ -859,6 +863,7 @@ interface FormFieldConfig<TFieldValues extends FieldValues = FieldValues> {
     options?: SelectOption$1[];
     className?: string;
     allowDecimal?: boolean;
+    numbersOnly?: boolean;
     canReset?: boolean;
     datePosition?: "top" | "bottom";
     disableFutureDates?: boolean;

package/dist/index.js

@@ -939,7 +939,7 @@ function Select2(props) {
     onChange("");
     onReset?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-0.5", containerClass ?? "w-30"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-0.5", containerClass ?? "w-20"), children: [
     label && /* @__PURE__ */ jsx(
       "label",
       {
@@ -1997,7 +1997,8 @@ function RenderCalendar(props) {
     onYearChange,
     onMonthChange,
     editDateSelect = true,
-    datePosition = "bottom"
+    datePosition = "bottom",
+    calendarSelectContainerClass
   } = props;
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth();
@@ -2081,7 +2082,8 @@ function RenderCalendar(props) {
                     value: year.toString(),
                     options: yearOptions,
                     onChange: handleYearChange,
-                    className: "cursor-pointer"
+                    className: "cursor-pointer",
+                    containerClass: calendarSelectContainerClass
                   }
                 ) }),
                 /* @__PURE__ */ jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsx(
@@ -2090,7 +2092,8 @@ function RenderCalendar(props) {
                     value: (month + 1).toString(),
                     options: monthOptions,
                     onChange: handleMonthChange,
-                    className: " cursor-pointer"
+                    className: "cursor-pointer",
+                    containerClass: calendarSelectContainerClass
                   }
                 ) })
               ]
@@ -2258,6 +2261,7 @@ function DatePickerRange(props) {
     disabled = false,
     maxDate,
     calendarYearRange,
+    calendarSelectContainerClass,
     showTodayButton = true
   } = props;
   const [inputs, setInputs] = useState({ start: startValue, end: endValue });
@@ -2394,6 +2398,7 @@ function DatePickerRange(props) {
           datePosition: autoDatePosition,
           maxDate,
           calendarYearRange,
+          calendarSelectContainerClass,
           showTodayButton
         }
       )
@@ -2473,6 +2478,7 @@ function DatePickerSingle(props) {
     disabled = false,
     maxDate,
     calendarYearRange,
+    calendarSelectContainerClass,
     onBlur,
     showTodayButton = true
   } = props;
@@ -2565,6 +2571,7 @@ function DatePickerSingle(props) {
           datePosition: autoDatePosition,
           maxDate,
           calendarYearRange,
+          calendarSelectContainerClass,
           showTodayButton
         }
       )
@@ -2623,6 +2630,7 @@ function DatePicker(props) {
     disabled,
     maxDate,
     calendarYearRange,
+    calendarSelectContainerClass,
     showTodayButton
   } = props;
   if (isRange) {
@@ -2640,6 +2648,7 @@ function DatePicker(props) {
         disabled,
         maxDate,
         calendarYearRange,
+        calendarSelectContainerClass,
         showTodayButton
       }
     );
@@ -2659,6 +2668,7 @@ function DatePicker(props) {
       disabled,
       maxDate,
       calendarYearRange,
+      calendarSelectContainerClass,
       showTodayButton,
       onBlur
     }
@@ -3524,7 +3534,7 @@ function TableFooter(props) {
   const { paginationInfo, renderLeft, renderRight } = props;
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-4 min-h-16", children: [
     /* @__PURE__ */ jsx("div", { className: "flex justify-start flex-1 min-w-0", children: renderLeft }),
-    paginationInfo && /* @__PURE__ */ jsx("div", { className: "flex-1 px-5", children: /* @__PURE__ */ jsx(Pagination, { ...paginationInfo }) }),
+    paginationInfo && /* @__PURE__ */ jsx("div", { className: "px-5", children: /* @__PURE__ */ jsx(Pagination, { ...paginationInfo }) }),
     /* @__PURE__ */ jsx("div", { className: "flex justify-end flex-1 min-w-0", children: renderRight })
   ] }) });
 }
@@ -3680,7 +3690,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);
@@ -3767,19 +3777,14 @@ function TableHeader(props) {
   const columns = 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);
@@ -4252,11 +4257,11 @@ function SkeletonTd(props) {
   return /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center justify-center min-h-4", children: showSquare ? /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-xs" }) : /* @__PURE__ */ jsx(Skeleton, { className: "h-1.5 rounded-sm", style: { width: "calc(100% - 20px)" } }) })
     }
@@ -4337,7 +4342,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 };
 }
@@ -4786,17 +4791,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__ */ 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) => {
@@ -4892,7 +4898,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__ */ jsxs("table", { className: "w-full table-layout", children: [
+        children: /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed", children: [
           /* @__PURE__ */ jsx(
             TableHeader,
             {
@@ -5992,6 +5998,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";
 }
@@ -6338,6 +6345,7 @@ function AddressField(props) {
   const {
     placeholder = "\uC8FC\uC18C\uB97C \uAC80\uC0C9\uD558\uC138\uC694",
     disabled = false,
+    readOnly = false,
     className = "",
     addressDetailKey,
     addressClassNames
@@ -6352,6 +6360,9 @@ function AddressField(props) {
       searchButtonRef.current?.click();
     }
   }, [isFocused]);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   const handleComplete = (data) => {
     isAddressSelectedRef.current = true;
     const nextAddress = data.roadAddress || data.address;
@@ -6470,12 +6481,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,
@@ -6489,10 +6500,17 @@ function CascadingSelectFieldInner(props) {
     [formValue, getSecondaryOptions, separator]
   );
   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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayText }) });
+  }
   const updateValue = (nextPrimary, nextSecondary) => {
     onChange(createCascadingSelectValue(nextPrimary, nextSecondary, separator));
   };
@@ -6518,6 +6536,7 @@ function CascadingSelectFieldInner(props) {
         canReset: true,
         onChange: (nextPrimary) => {
           updateValue(nextPrimary, "");
+          if (!nextPrimary) onBlur();
         }
       }
     ),
@@ -6534,6 +6553,7 @@ function CascadingSelectFieldInner(props) {
         canReset: true,
         onChange: (nextSecondary) => {
           updateValue(primary, nextSecondary);
+          onBlur();
         }
       }
     )
@@ -6544,7 +6564,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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: text }) });
+  }
   return /* @__PURE__ */ jsx(
     Checkbox,
     {
@@ -6565,11 +6589,15 @@ function DateField(props) {
   const {
     placeholder = "YYYY-MM-DD",
     disabled = false,
+    readOnly = false,
     className = "w-40",
     datePosition = "bottom",
     disableFutureDates = false
   } = config;
   const maxDate = disableFutureDates ? formatDate(/* @__PURE__ */ new Date()) : void 0;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: cn2("flex items-center", fieldControlWrapClass(className)), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: cn2("flex items-center", fieldControlWrapClass(className)), children: /* @__PURE__ */ jsx(
     DatePicker,
     {
@@ -6597,11 +6625,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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ 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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(
     Input2,
@@ -6632,7 +6666,7 @@ function InputWithButtonField(props) {
     placeholder = "\uC870\uD68C \uBC84\uD2BC\uC73C\uB85C \uC120\uD0DD",
     disabled = false,
     className = "",
-    readOnly = true,
+    readOnly = false,
     inputWithButton,
     onClickInputWithButton
   } = config;
@@ -6641,13 +6675,16 @@ function InputWithButtonField(props) {
     if (disabled) return;
     onClickInputWithButton?.();
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [
     /* @__PURE__ */ jsx(
       Input2,
       {
         placeholder,
         value: String(value ?? ""),
-        readOnly,
+        readOnly: true,
         disabled,
         bare: true,
         className: formControlClass(hasError),
@@ -6687,6 +6724,9 @@ function NumberField(props) {
     }
   };
   const displayValue = value != null && value !== "" ? isMoney ? formatNumberWithCommas(value) : String(value) : "";
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayValue || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(
     Input2,
     {
@@ -6716,6 +6756,9 @@ function PhoneField(props) {
   const handleChange = (e) => {
     onChange(formatPhoneNumber(e.target.value));
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(
     Input2,
     {
@@ -6740,7 +6783,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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: label || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx(
     RadioGroup,
     {
@@ -6772,11 +6819,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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: label || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(
     Select2,
     {
@@ -6823,16 +6875,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 },
@@ -6841,37 +6883,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 = useRef(null);
   const formValue = String(value ?? "");
-  const { prefix, inputPart, normalizedFormValue } = useMemo(
-    () => resolveSelectWithInputState(formValue, defaultPrefix, options),
-    [defaultPrefix, formValue, options]
-  );
+  const { prefix, inputPart, normalizedFormValue } = 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] = useState(prefix);
+  const [prevFormValue, setPrevFormValue] = useState(formValue);
+  if (prevFormValue !== formValue) {
+    setPrevFormValue(formValue);
+    setSelectedPrefix(formValue ? prefix : defaultPrefix);
+  }
   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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ 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",
@@ -6881,7 +6944,7 @@ function SelectWithInputField(props) {
     /* @__PURE__ */ jsx(
       Select2,
       {
-        value: prefix,
+        value: selectedPrefix,
         placeholder: "\uC120\uD0DD",
         disabled,
         hasError,
@@ -6889,6 +6952,7 @@ function SelectWithInputField(props) {
         containerClass: selectClass.containerClassName,
         triggerClassName: selectClass.triggerClassName,
         onChange: (nextPrefix) => {
+          setSelectedPrefix(nextPrefix);
           updateCombined(nextPrefix, inputPart);
         }
       }
@@ -6907,7 +6971,7 @@ function SelectWithInputField(props) {
         },
         onBlur: (e) => {
           const normalized = normalizeInput(e.target.value.normalize("NFKC"));
-          handleInputChange(normalized);
+          updateCombined(selectedPrefix, normalized);
           onBlur();
         }
       }
@@ -6919,7 +6983,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__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: value ? "\uCF1C\uC9D0" : "\uAEBC\uC9D0" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(BaseSwitch, { checked: Boolean(value), onCheckedChange: onChange, disabled }) });
 }
 function TextareaField(props) {
@@ -6932,6 +6999,9 @@ function TextareaField(props) {
   const handleChange = (e) => {
     onChange(e.target.value);
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: cn2(FIELD_READONLY_TEXT_CLASS, "whitespace-pre-wrap"), children: String(value ?? "") || "\u2014" }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(
     Textarea,
     {
@@ -7177,6 +7247,7 @@ function rowPropsToFieldConfig(props) {
     options,
     className,
     allowDecimal,
+    numbersOnly,
     canReset,
     datePosition,
     disableFutureDates,
@@ -7206,6 +7277,7 @@ function rowPropsToFieldConfig(props) {
     options,
     className,
     allowDecimal,
+    numbersOnly,
     canReset,
     datePosition,
     disableFutureDates,