# NumInput

数字输入框组件，支持步进、精度控制、范围限制、千分分隔符等功能。

## 适用场景

- 需要输入数值的表单场景
- 需要限制数值范围（min/max）的输入
- 需要精确控制小数位数的数值输入
- 带前缀/后缀的金额、百分比等数值输入

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| value | `number` | - | 否 | 控制值 |
| defaultValue | `number` | `null` | 否 | 默认值 |
| onChange | `(value: number, e?: ChangeEvent<HTMLInputElement> \| MouseEvent<Element, MouseEvent> \| FocusEvent<Element, Element>) => void` | - | 否 | 值变化回调 |
| step | `number` | - | 否 | 步进操作的步长，优先级小于 stairStep；为 number 时会推导 precision 默认值 |
| stairStep | `number` | - | 否 | 阶梯步进模式步长，优先级大于 step（例：step=5 时 value=8 step up 为 10，step down 为 5） |
| precision | `number` | - | 否 | 精度（小数位数），未设置时根据 step/stairStep 推导 |
| max | `number` | `Number.MAX_SAFE_INTEGER` | 否 | 最大值 |
| min | `number` | `Number.MIN_SAFE_INTEGER` | 否 | 最小值 |
| thousandSeparator | `string` | `","` | 否 | 千分分隔符，如不需要可设置为 `''` |
| type | `"normal" \| "intensive"` | `"normal"` | 否 | 类型 |
| prefix | `string` | - | 否 | 前缀 |
| suffix | `string` | - | 否 | 后缀 |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | 否 | 聚焦回调 |
| onBlur | `(e: FocusEvent<HTMLInputElement, Element>, value: number) => void` | - | 否 | 失焦回调 |
| unitTipFrom | `number` | `3` | 否 | 开始显示"数字单位"的位数，0 为一直不显示 |
| disabled | `boolean` | - | 否 | 是否禁用 |
| status | `"normal" \| "error"` | - | 否 | 文本框状态 |
| size | `"md" \| "sm" \| "xs" \| "lg" \| "xl"` | - | 否 | 尺寸，默认取 config context `baseSize` |

## 典型用法

### 基础受控用法

```tsx
import { useState } from 'react'
import { NumInput } from '@befe/brick'

const [value, setValue] = useState<number>(3.217)

<NumInput value={value} onChange={setValue} />
```

### 精度控制

```tsx
<NumInput precision={2} defaultValue={1.015} />
<NumInput precision={0} defaultValue={1.015} />
<NumInput precision={4} defaultValue={1.015} />
```

### 范围限制与步进

```tsx
<NumInput defaultValue={1.23} step={0.1} min={1} max={10} />
<NumInput step={0.05} defaultValue={12.345} />
```

### 阶梯步进

```tsx
// value=8 step up 为 10，step down 为 5
<NumInput value={value} onChange={setValue} stairStep={5} />
```

### 前缀与后缀

```tsx
<NumInput prefix="$ " defaultValue={123} />
<NumInput suffix="%" defaultValue={88} precision={1} />
```

### 类型与状态

```tsx
<NumInput type="intensive" defaultValue={1234567.89} />
<NumInput type="normal" status="error" defaultValue={0} />
<NumInput size="sm" placeholder="小号" />
```

## 注意事项

- 键盘输入值时不会发生值修正，值修正发生在 blur 时；如果输入值超出范围，blur 时会额外触发一次 `onChange(validValue)`
- 通过代码直接设置超出范围的值（非键盘输入）不会触发值修正
- `precision` 未设置时根据 `step`/`stairStep` 推导：小数则取小数位数，整数则为 0，undefined 则不限制