@ehfuse/mui-form-controls 3.1.16 → 3.1.17

package/README.md

@@ -327,7 +327,7 @@ import { AddressTextField } from '@ehfuse/mui-form-controls/address';
 | `stepperAccelerateHoldDelay` | 누른 직후 1회 변경 후, 자동 반복까지 대기(ms) |
 | `stepperAccelerateRampDuration` | 시작 CPS→최대 CPS까지 걸리는 시간(ms) |
 | `stepperAccelerateCps` | 자동 반복 **시작** 속도 (초당 횟수) |
-| `thousandSeparator` | 기본 `true`(천 단위 그룹·입력 중 표시). `false`로 끔. Intl·로케일 규칙(`NumberTextField`의 콤마 고정과 다를 수 있음) |
+| `thousandSeparator` | `boolean \| string` — 기본 `true`. `false` 끔 · `string` 구분 문자 고정 · NumberField는 `true`일 때 Intl |
 
 `stepperEditable`, `stepperButtonDivider`, `spinnerDivider` 등 전체 props는 [API](./docs/ko/api.md#numberfield)를 참고하세요.
 

package/dist/components/NumberField.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
 import type { SxProps, Theme } from "@mui/material/styles";
 import type { FormLike } from "../types";
+import { type ThousandSeparatorProp } from "../utils/number";
 export type NumberFieldVariant = "default" | "stepper";
 export type NumberFieldAlign = "left" | "center" | "right";
 export type NumberFieldProps = BaseNumberField.Root.Props & {
@@ -14,12 +15,13 @@ export type NumberFieldProps = BaseNumberField.Root.Props & {
     /** 입력 숫자 텍스트 정렬 방향. */
     align?: NumberFieldAlign;
     /**
-     * 천 단위 구분자(표시·입력 모두 Base UI `Intl.NumberFormat`, 로케일 규칙).
-     * `false`이면 천 단위 구분 없음. 그 외(기본)는 `format.useGrouping: true` 병합.
-     * `format`·`locale`과 함께 사용 가능.
+     * 천 단위 구분.
+     * - `false`: 구분 없음
+     * - `true` / `undefined`(기본): `Intl` 로케일 규칙 (`locale`·`format`과 함께)
+     * - `string`: 구분 문자 직접 지정 (예: `","`, `"."`, `" "`)
      * @default true
      */
-    thousandSeparator?: boolean;
+    thousandSeparator?: ThousandSeparatorProp;
     /** @default "default" — `stepper`는 [-] 값 [+] 가로 스테퍼 UI */
     variant?: NumberFieldVariant;
     /**

package/dist/components/NumberSpinner.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { type ThousandSeparatorProp } from "../utils/number";
 type NumberSpinnerProps = BaseNumberField.Root.Props & {
     label?: React.ReactNode;
     size?: "small" | "medium";
@@ -7,9 +8,9 @@ type NumberSpinnerProps = BaseNumberField.Root.Props & {
     suffix?: React.ReactNode;
     /**
      * 천 단위 구분자(표시·입력, `Intl.NumberFormat`). `true`이면 `format.useGrouping: true` 병합.
-     * @default true
+     * @default true — `string`이면 해당 문자로 그룹
      */
-    thousandSeparator?: boolean;
+    thousandSeparator?: ThousandSeparatorProp;
 };
 export default function NumberSpinner({ id: idProp, label, error, size, suffix, thousandSeparator, locale, format, ...other }: NumberSpinnerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/hooks/useNumberFieldLiveGrouping.d.ts

@@ -1,16 +1,16 @@
 /**
  * useNumberFieldLiveGrouping.ts
  *
- * NumberField + thousandSeparator — 입력 중에도 천 단위 구분 표시
- * (Base UI는 타이핑 중 raw 숫자만 보여 주므로 표시값을 보조)
+ * NumberField — 입력 중 천 단위 구분 표시
  *
  * @license MIT
  * @copyright 2025 김영진 (Kim Young Jin)
  * @author 김영진 (ehfuse@gmail.com)
  */
 import * as React from "react";
-export declare function useNumberFieldLiveGrouping({ enabled, locale, format, }: {
-    enabled: boolean;
+import { type ThousandSeparatorProp } from "../utils/number";
+export declare function useNumberFieldLiveGrouping({ thousandSeparator, locale, format, }: {
+    thousandSeparator?: ThousandSeparatorProp;
     locale?: Intl.LocalesArgument;
     format?: Intl.NumberFormatOptions;
 }): {

package/dist/hooks/useNumberFieldValueChange.d.ts

@@ -9,11 +9,13 @@
  */
 import * as React from "react";
 import type { NumberFieldRoot } from "@base-ui/react/number-field";
-export declare function useNumberFieldValueChange({ min, max, locale, format, onValueChange, inputRef, isControlled, setInternalValue, onLiveDisplaySync, }: {
+import { type ThousandSeparatorProp } from "../utils/number";
+export declare function useNumberFieldValueChange({ min, max, locale, format, thousandSeparator, onValueChange, inputRef, isControlled, setInternalValue, onLiveDisplaySync, }: {
     min?: number;
     max?: number;
     locale?: Intl.LocalesArgument;
     format?: Intl.NumberFormatOptions;
+    thousandSeparator?: ThousandSeparatorProp;
     onValueChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
     inputRef: React.RefObject<HTMLInputElement | null>;
     isControlled: boolean;