@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/input-group/input-group.stories.tsx

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Search, Send } from 'lucide-react';
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Search, Send, X } from 'lucide-react';
+
 import {
   InputGroup,
   InputGroupAddon,
@@ -9,26 +11,34 @@ import {
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof InputGroup> = {
-  title: '表单与输入 · Form/InputGroup',
+  title: '数据录入 · Data Entry/InputGroup',
   component: InputGroup,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '输入框 + addon 统一容器 — 拆为通用复合插槽:InputGroupAddon(图标 / 文本 / 按钮)+ InputGroupInput / InputGroupTextarea(主体)。shadcn 2025-10 新增,等价 antd Input 的 prefix / suffix / addonBefore / addonAfter 集合。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          'InputGroup 输入框组 —— 等价 antd `Input` 的 `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合,**完整覆盖前后缀图标 / 文本 / 按钮所有形态**。复合插槽:`<InputGroupAddon position variant>` + `<InputGroupInput>` / `<InputGroupTextarea>`,自由嵌套图标、文本、按钮(URL / 金额 / 搜索 / Send 等)。`shadcn 2025-10` 新增,与 Input / Button / Select 同档高度(32px)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof InputGroup>;
 
-export const Playground: Story = {
+/** 基础 —— 前置图标 + 单行输入(替代旧 `<Input prefix={<Search />} />`)。 */
+export const Basic: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <InputGroup className="w-80">
+    <InputGroup>
       <InputGroupAddon position="before" variant="icon">
         <Search className="size-4" />
       </InputGroupAddon>
@@ -37,10 +47,11 @@ export const Playground: Story = {
   ),
 };
 
+/** URL 输入 —— text 前后缀(替代旧 `<Input addonBefore="https://" addonAfter=".com" />`)。 */
 export const Url: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <InputGroup className="w-80">
+    <InputGroup>
       <InputGroupAddon position="before">https://</InputGroupAddon>
       <InputGroupInput defaultValue="example" />
       <InputGroupAddon position="after">.com</InputGroupAddon>
@@ -48,27 +59,48 @@ export const Url: Story = {
   ),
 };
 
-export const SearchWithButton: Story = {
+/** 金额输入 —— text 前后缀。 */
+export const Currency: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <InputGroup>
+      <InputGroupAddon position="before">¥</InputGroupAddon>
+      <InputGroupInput type="number" defaultValue={199} />
+      <InputGroupAddon position="after">/ 月</InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+/** 可清空搜索 —— icon 前后缀,后缀槽放可点击的清空按钮。 */
+export const SearchWithClear: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <InputGroup className="w-96">
+    <InputGroup>
       <InputGroupAddon position="before" variant="icon">
         <Search className="size-4" />
       </InputGroupAddon>
-      <InputGroupInput placeholder="输入关键词..." />
-      <InputGroupAddon position="after" variant="button">
-        <Button variant="ghost" size="sm">
-          搜索
-        </Button>
+      <InputGroupInput
+        defaultValue="OpenTrek 设计令牌"
+        placeholder="输入关键词..."
+      />
+      <InputGroupAddon position="after" variant="icon">
+        <button
+          type="button"
+          aria-label="清空"
+          className="rounded-sm p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          <X className="size-4" />
+        </button>
       </InputGroupAddon>
     </InputGroup>
   ),
 };
 
+/** Textarea + Send 按钮 —— `variant="button"` 把 Button 的边框 / 圆角去掉,与外壳合一。 */
 export const TextareaWithSend: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <InputGroup className="w-96 items-end">
+    <InputGroup className="items-end">
       <InputGroupTextarea rows={3} placeholder="发表评论..." />
       <InputGroupAddon position="after" variant="button">
         <Button size="icon" icon={<Send />} aria-label="发送" />
@@ -77,10 +109,11 @@ export const TextareaWithSend: Story = {
   ),
 };
 
+/** 整组禁用 —— `disabled` 仅控制视觉 opacity,子项 disabled 仍需自行传。 */
 export const Disabled: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <InputGroup className="w-80" disabled>
+    <InputGroup disabled>
       <InputGroupAddon position="before">@</InputGroupAddon>
       <InputGroupInput defaultValue="alice" disabled />
     </InputGroup>

package/src/components/input-group/input-group.tsx

@@ -2,6 +2,18 @@ import * as React from 'react';
 
 import { cn } from '@/utils/cn';
 
+// ─── InputGroup family ──────────────────────────────────────────────────────
+//
+// 复合输入框容器 — shadcn 2025-10 新增,等价 antd `Input` 的
+// `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合,但拆为更通用的
+// **复合插槽**:`<InputGroupAddon position="before|after">`(addon)+
+// `<InputGroupInput>` / `<InputGroupTextarea>`(主体)按需嵌套图标 / 按钮 / 文本。
+//
+// 设计纪律:
+// - 主体高度对齐 Input md(h-8 / 32px),与 Button / Select / Input 同档同行混排
+// - 圆角走 `rounded-md`(Tailwind v4 namespace),与 Input / Button 同档
+// - 由 InputGroup 外壳承担 border + ring + focus-within,内部 input / addon 全去边框
+
 export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * 整组禁用样式(子项请单独传 `disabled`,这里仅影响视觉上的 opacity)。
@@ -13,7 +25,7 @@ export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  * Input + addon 统一容器 — shadcn 2025-10 新增,等价 antd `Input` 的
  * `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合,但拆为更通用的
  * **复合插槽**:`<InputGroupAddon position="before|after">`(addon)+
- * `<InputGroupInput>` / `<InputGroupTextarea>`(主体),按需嵌套图标 / 按钮 / 文本。
+ * `<InputGroupInput>` / `<InputGroupTextarea>`(主体)按需嵌套图标 / 按钮 / 文本。
  */
 const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
   ({ className, disabled, children, ...props }, ref) => (
@@ -54,14 +66,27 @@ const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
     <div
       ref={ref}
       data-position={position}
+      data-variant={variant}
+      data-slot="input-group-addon"
       className={cn(
         'flex shrink-0 items-center',
         variant === 'text' &&
-          'border-input bg-muted px-3 text-sm text-muted-foreground',
-        variant === 'icon' && 'px-2 text-muted-foreground',
-        variant === 'button' && '[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none',
-        position === 'before' && variant !== 'icon' && 'border-r',
-        position === 'after' && variant !== 'icon' && 'border-l',
+          'border-input bg-muted px-3 text-xs text-muted-foreground',
+        // icon 形态:容器一侧 `pl-3 / pr-3` 与文本输入边距对齐;另一侧贴向 input,
+        // 让 input 自身的 `px-3` 提供 12px 图标-文字间距(总入边 12+16+12 = 40px,
+        // 与 shadcn / cd hybridcloud 模式接近)。
+        variant === 'icon' && 'text-muted-foreground',
+        variant === 'icon' && position === 'before' && 'pl-3 pr-0',
+        variant === 'icon' && position === 'after' && 'pl-0 pr-3',
+        // variant=button 下,直接子元素(Button / SelectTrigger / 自定义)的 border /
+        // 圆角 / 阴影 / hover/focus 反馈一律静默 — 视觉责任由 InputGroup 外壳承担。
+        // 用 `!` 锁优先级避免 uni-manager scoped CSS 的 hover-shadow 规则反复覆盖。
+        variant === 'button' &&
+          '[&>*]:!rounded-none [&>*]:!border-0 [&>*]:!shadow-none [&>*:hover]:!shadow-none [&>*:focus]:!shadow-none [&>*:focus-visible]:!shadow-none',
+        // 仅 variant=text 显示分隔线(与正文 input 区隔):button 自身有 primary 底色
+        // 作视觉分隔不需再叠灰条;icon 紧贴正文不分隔。
+        position === 'before' && variant === 'text' && 'border-r border-input',
+        position === 'after' && variant === 'text' && 'border-l border-input',
         className,
       )}
       {...props}
@@ -78,8 +103,15 @@ const InputGroupInput = React.forwardRef<
     ref={ref}
     type={type}
     className={cn(
-      'flex h-9 w-full min-w-0 flex-1 bg-transparent px-3 py-1 text-sm placeholder:text-muted-foreground',
+      // 高度与 Input md(h-8 / 32px)对齐 — 容器 InputGroup 不设高度,
+      // 由内部 input + addon 自身高度决定;Button 默认 h-8 也是 32px,自然对齐。
+      'flex h-8 w-full min-w-0 flex-1 bg-transparent px-3 text-xs placeholder:text-muted-foreground',
       'focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      // 紧贴 icon-before addon 时左 padding 收到 8px(addon pl-3 + 0 + input pl-2 = 20px 总内边距,
+      // 等价于 antd `<Input prefix>` 的 px-3 + gap-2 模式)。
+      '[[data-slot=input-group-addon][data-variant=icon][data-position=before]+&]:pl-2',
+      // 同理:右侧紧贴 icon-after addon 时右 padding 收到 8px。
+      '[&:has(+[data-slot=input-group-addon][data-variant=icon][data-position=after])]:pr-2',
       className,
     )}
     {...props}
@@ -95,8 +127,12 @@ const InputGroupTextarea = React.forwardRef<
     ref={ref}
     rows={rows}
     className={cn(
-      'flex w-full min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground',
+      'flex w-full min-w-0 flex-1 bg-transparent px-3 py-2 text-xs placeholder:text-muted-foreground',
       'focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      // 默认关闭原生 resize 手柄 — 嵌在 InputGroup(常配 Send/工具栏按钮)里时,
+      // 右下角斜线 grip 会从相邻 addon 边缘 peek 出来视觉脏。
+      // 业务确需 resize:`className="resize-y"` 自行 override。
+      'resize-none',
       className,
     )}
     {...props}

package/src/components/input-number/input-number.meta.md

@@ -2,12 +2,13 @@
 id: input-number
 name: InputNumber
 type: component
-category: form
+category: data-entry
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 数字输入框
 ---
 
-# InputNumber
+# InputNumber 数字输入框
 
 数字输入 — antd 独有补足。**等价 antd `InputNumber`**。区别于原生 `<input type="number">`:步进按钮显隐可配、范围裁剪与精度由组件保证、千分位展示、键盘 ↑↓ 步进、支持空状态(`value=null`)。
 
@@ -24,21 +25,27 @@ package: "@teamix-evo/ui"
 - 多档枚举 → `Segmented` / `RadioGroup`
 - 普通文本输入 → `Input`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
-| `value` | `number \| null` | – | – | 受控值 — `null` 等价空输入。 |
-| `defaultValue` | `number \| null` | – | – | uncontrolled 初值。 |
-| `onChange` | `(value: number \| null) => void` | – | – | 值变化回调 — 输入清空时传 `null`,正常输入 / 步进传 `number`。 |
+| `stringMode` | `boolean` | `false` | – | 大数/高精度字符串模式(antd `stringMode` 并集)。开启后: - `value` / `defaultValue` / `onChange` 使用 `string` 类型(避免 IEEE 754 精度丢失) - 步进 / 夹紧仍用 `parseFloat` 执行算术,但最终返回 string |
+| `value` | `number \| string \| null` | – | – | 受控值 — `null` 等价空输入。`stringMode` 时为 `string \| null`。 |
+| `defaultValue` | `number \| string \| null` | – | – | uncontrolled 初值。`stringMode` 时为 `string \| null`。 |
+| `onChange` | `(value: number \| string \| null) => void` | – | – | 值变化回调 — 输入清空时传 `null`。 `stringMode` 时回调 `(value: string \| null) => void`; 普通模式 `(value: number \| null) => void`。 |
 | `min` | `number` | – | – | 最小值(antd `min` 并集)。 |
 | `max` | `number` | – | – | 最大值(antd `max` 并集)。 |
 | `step` | `number` | `1` | – | 步长(antd `step` 并集) — 增 / 减按钮以及键盘 ↑↓ 都按此步长。 |
 | `precision` | `number` | – | – | 数值精度(antd `precision` 并集) — 保留小数位数(超出会四舍五入)。 |
 | `groupSeparator` | `boolean` | `false` | – | 千分位分隔展示(仅展示用,实际 value 仍是 number)。 |
 | `controls` | `boolean` | `true` | – | 是否显示右侧上下步进按钮(antd `controls` 并集) — `false` 时隐藏。 |
-| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
+| `type` | `'normal' \| 'inline'` | `"normal"` | – | 形态(cloud-design `type` 并集) — `"normal"` 右侧叠加 ChevronUp/Down 按钮(默认), `"inline"` 两侧各一个 Plus/Minus 按钮(【−】 value 【＋】),适合紧凑表单。 |
+| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"md"` | – | 尺寸。`md` 与 `default` 完全等价,后者作为向后兼容别名保留;新代码请优先使用 `md`, 与 Button / Input / Select 等表单原子的 size enum 一致。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -66,6 +73,8 @@ pnpm add lucide-react@^0.460.0
 - **`controls=false`** 仅在需要嵌入 InputGroup / 紧凑表格时关闭;默认带步进按钮更直观
 - **键盘 ↑↓ 已实现** — 不要再监听 keydown 加自定义步进
 - **不要传 `type="number"`** — 组件用 `type="text"` 才能支持千分位与精确控制
+- **`type="inline"`(本组件自身的 prop，与原生 input.type 无关)**:两侧 Plus/Minus 按钮适合表格与紧凑表单;`type="normal"`(默认) 右侧叠加 ChevronUp/Down,有更多调试空间
+- **步进 icon 走 lucide-react**:`ChevronUp` / `ChevronDown` (normal) 与 `Plus` / `Minus` (inline),**不要**换成 ▲/▼ 等 unicode 字符
 
 ## Examples
 
@@ -86,6 +95,54 @@ const [v, setV] = React.useState<number | null>(1);
 // 隐藏步进按钮(配合 InputGroup 使用)
 <InputNumber controls={false} defaultValue={1} className="rounded-none" />
 
+// inline 模式(Plus/Minus 两侧按钮,对齐 cloud-design)
+<InputNumber type="inline" defaultValue={1} min={0} max={10} className="w-32" />
+
 // 小尺寸
 <InputNumber size="sm" defaultValue={0} />
 ```
+
+## InputNumber 形态 — 旧库 API → 新映射
+
+> 决策:**不新增独立组件**,`InputNumber` 已承接 cloud-design `NumberPicker` 所有核心能力。本章节是迁移查表索引,与 [上面 Props 表](#props) 互补。
+
+### 命名映射
+
+| cloud-design 旧库 (`NumberPicker`) | `@teamix-evo/ui` (`InputNumber`)  | 说明                            |
+| ---------------------------------- | --------------------------------- | ------------------------------- |
+| 组件名 `NumberPicker`              | `InputNumber`                     | 对齐 antd 命名                  |
+| `value: number \| string`          | `value: number \| null`           | 空态用 `null` 代替空字符串      |
+| `onChange(value, e)`               | `onChange(value: number \| null)` | 单参数简化(无 event)            |
+| `size="small\|medium\|large"`      | `size="sm\|md\|lg"`               | 三档 + `default` 兼容别名       |
+| `hasTrigger`                       | `controls`                        | 显隐步进按钮                    |
+| `type="normal"`                    | `type="normal"`(默认)             | 右侧 Chevron 上下按钮           |
+| `type="inline"`                    | `type="inline"`                   | 两侧 Plus/Minus 按钮            |
+| `format`(通用格式化)               | `groupSeparator`(仅千分位)        | 通用 formatter/parser 待后续 P2 |
+| `editable`                         | 原生 `readOnly`                   | 直接用 HTML attr                |
+| `stringMode`(大数支持)             | `stringMode`                      | ✅ 已实现 — 规避精度丢失        |
+| `precision`                        | 同名                              | 四舍五入保留小数位              |
+| `min` / `max` / `step`             | 同名                              | 透传                            |
+
+### Breaking Changes(从旧库迁移时需改写)
+
+1. 组件名 `NumberPicker` → `InputNumber`(import 路径变动)
+2. `value` 类型 `string` → `null` 表示空态
+3. `onChange(value, e)` → `onChange(value: number | null)` 单参数
+4. `hasTrigger` → `controls`
+5. `size` 命名缩写(small→sm / medium→md / large→lg)
+6. `format` → `groupSeparator`(仅千分位;通用 formatter 待后续)
+
+### 不修复 / 后续工序清单
+
+- **~~stringMode 大数支持~~(P1)**:✅ 已落地 — `stringMode` prop 开启后 `value` 用 string 类型,规避 IEEE 754 精度丢失。报告 §3 标记为缺失为旧版本数据,本波次已纠正
+- **通用 formatter / parser**(P2):当前仅 `groupSeparator`千分位;自定义格式化待后续 slot
+- **size 档位对齐 Input/Button**(本波次):sm h-8 → h-7 / md h-9 → h-8 / lg h-10 → h-9(28/32/36),与表单原子家族同行视觉一致
+- **device/isPreview/upBtnProps/downBtnProps/onCorrect/alwaysShowTrigger**:报告 §5 已列入"保留新库优势",**不修复**
+
+### InputNumber 专项 AI 生成纪律
+
+- 新代码用 `size="md"`,与 Button / Input / Select 一致;`"default"` 仅向后兼容
+- 空态 = `null`(不要用 0 代表“空”)
+- `min`/`max` 自动夹紧,**不要**在外层再做边界校验
+- `controls=false` 仅在嵌入 InputGroup / 紧凑表格时关闭
+- 不要传 `type="number"`(这里的 `type` 是 InputNumber 自己的 prop,与原生 input.type 无关)

package/src/components/input-number/input-number.stories.tsx

@@ -1,26 +1,33 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { InputNumber } from './input-number';
 
 const meta: Meta<typeof InputNumber> = {
-  title: '表单与输入 · Form/InputNumber',
+  title: '数据录入 · Data Entry/InputNumber',
   component: InputNumber,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '数字输入框 — 区别于原生 type=number:步进按钮显隐可配、范围裁剪与精度由组件保证、千分位展示、键盘 ↑↓ 步进、支持空状态。等价 antd `InputNumber`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '数字输入框 — 区别于原生 type=number：步进按钮显隐可配、范围裁剪与精度由组件保证、千分位展示、键盘 ↑↓ 步进、支持空状态。等价 antd `InputNumber`。',
       },
     },
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    type: { control: 'inline-radio', options: ['normal', 'inline'] },
     controls: { control: 'boolean' },
     groupSeparator: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
-  args: { size: 'default', controls: true, groupSeparator: false, disabled: false },
+  args: {
+    size: 'md',
+    type: 'normal',
+    controls: true,
+    groupSeparator: false,
+    disabled: false,
+  },
 };
 
 export default meta;
@@ -28,7 +35,13 @@ type Story = StoryObj<typeof InputNumber>;
 
 export const Playground: Story = {
   render: (args) => (
-    <InputNumber {...args} defaultValue={10} min={0} max={100} className="w-40" />
+    <InputNumber
+      {...args}
+      defaultValue={10}
+      min={0}
+      max={100}
+      className="w-40"
+    />
   ),
 };
 
@@ -53,7 +66,7 @@ export const Controlled: Story = {
       <div className="flex items-center gap-3">
         <InputNumber
           value={v}
-          onChange={setV}
+          onChange={(val) => setV(val as number | null)}
           step={0.5}
           min={0}
           max={5}
@@ -75,12 +88,37 @@ export const NoControls: Story = {
   ),
 };
 
+export const InlineType: Story = {
+  name: 'Inline (Plus/Minus)',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <InputNumber
+        type="inline"
+        defaultValue={1}
+        min={0}
+        max={10}
+        className="w-32"
+      />
+      <InputNumber
+        type="inline"
+        size="sm"
+        defaultValue={3}
+        min={0}
+        max={10}
+        className="w-28"
+      />
+      <InputNumber type="inline" disabled defaultValue={1} className="w-32" />
+    </div>
+  ),
+};
+
 export const Sizes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-3">
       <InputNumber size="sm" defaultValue={0} className="w-28" />
-      <InputNumber size="default" defaultValue={0} className="w-32" />
+      <InputNumber size="md" defaultValue={0} className="w-32" />
       <InputNumber size="lg" defaultValue={0} className="w-36" />
     </div>
   ),

package/src/components/input-number/input-number.tsx

@@ -1,21 +1,37 @@
 import * as React from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
 export interface InputNumberProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    'onChange' | 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'type' | 'size'
+    | 'onChange'
+    | 'value'
+    | 'defaultValue'
+    | 'min'
+    | 'max'
+    | 'step'
+    | 'type'
+    | 'size'
   > {
-  /** 受控值 — `null` 等价空输入。 */
-  value?: number | null;
-  /** uncontrolled 初值。 */
-  defaultValue?: number | null;
   /**
-   * 值变化回调 — 输入清空时传 `null`,正常输入 / 步进传 `number`。
+   * 大数/高精度字符串模式(antd `stringMode` 并集)。开启后:
+   * - `value` / `defaultValue` / `onChange` 使用 `string` 类型(避免 IEEE 754 精度丢失)
+   * - 步进 / 夹紧仍用 `parseFloat` 执行算术,但最终返回 string
+   * @default false
+   */
+  stringMode?: boolean;
+  /** 受控值 — `null` 等价空输入。`stringMode` 时为 `string | null`。 */
+  value?: number | string | null;
+  /** uncontrolled 初值。`stringMode` 时为 `string | null`。 */
+  defaultValue?: number | string | null;
+  /**
+   * 值变化回调 — 输入清空时传 `null`。
+   * `stringMode` 时回调 `(value: string | null) => void`;
+   * 普通模式 `(value: number | null) => void`。
    */
-  onChange?: (value: number | null) => void;
+  onChange?: (value: number | string | null) => void;
   /** 最小值(antd `min` 并集)。 */
   min?: number;
   /** 最大值(antd `max` 并集)。 */
@@ -40,10 +56,17 @@ export interface InputNumberProps
    */
   controls?: boolean;
   /**
-   * 尺寸。
-   * @default "default"
+   * 形态(cloud-design `type` 并集) — `"normal"` 右侧叠加 ChevronUp/Down 按钮(默认),
+   * `"inline"` 两侧各一个 Plus/Minus 按钮(【−】 value 【＋】),适合紧凑表单。
+   * @default "normal"
+   */
+  type?: 'normal' | 'inline';
+  /**
+   * 尺寸。`md` 与 `default` 完全等价,后者作为向后兼容别名保留;新代码请优先使用 `md`,
+   * 与 Button / Input / Select 等表单原子的 size enum 一致。
+   * @default "md"
    */
-  size?: 'sm' | 'default' | 'lg';
+  size?: 'sm' | 'md' | 'default' | 'lg';
 }
 
 function format(
@@ -60,9 +83,10 @@ function format(
 }
 
 const sizeMap = {
-  sm: 'h-8 text-xs',
-  default: 'h-9 text-sm',
-  lg: 'h-10 text-base',
+  sm: 'h-6 text-xs',
+  md: 'h-8 text-xs',
+  default: 'h-8 text-xs',
+  lg: 'h-9 text-sm',
 } as const;
 
 /**
@@ -84,7 +108,9 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
       precision,
       groupSeparator = false,
       controls = true,
-      size = 'default',
+      type = 'normal',
+      size = 'md',
+      stringMode = false,
       disabled,
       className,
       onBlur,
@@ -94,13 +120,19 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     ref,
   ) => {
     const isControlled = value !== undefined;
+    const toNum = (v: number | string | null | undefined): number | null => {
+      if (v == null) return null;
+      const n = typeof v === 'string' ? parseFloat(v) : v;
+      return Number.isNaN(n) ? null : n;
+    };
     const [internal, setInternal] = React.useState<number | null>(
-      defaultValue ?? null,
+      toNum(defaultValue),
     );
-    const current = isControlled ? value! : internal;
+    const current = isControlled ? toNum(value) : internal;
     const [editing, setEditing] = React.useState<string | null>(null);
 
-    const display = editing !== null ? editing : format(current, precision, groupSeparator);
+    const display =
+      editing !== null ? editing : format(current, precision, groupSeparator);
 
     const clamp = (n: number): number => {
       let v = n;
@@ -112,7 +144,11 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
 
     const commit = (next: number | null) => {
       if (!isControlled) setInternal(next);
-      onChange?.(next);
+      if (stringMode) {
+        onChange?.(next === null ? null : String(next));
+      } else {
+        onChange?.(next);
+      }
     };
 
     const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -162,6 +198,21 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
           className,
         )}
       >
+        {controls && type === 'inline' ? (
+          <button
+            type="button"
+            tabIndex={-1}
+            disabled={
+              disabled ||
+              (typeof min === 'number' && (current ?? Infinity) <= min)
+            }
+            onClick={() => step1(-1)}
+            aria-label="减少"
+            className="flex items-center justify-center border-r border-input px-2 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
+          >
+            <Minus className="size-3.5" />
+          </button>
+        ) : null}
         <input
           ref={ref}
           type="text"
@@ -173,31 +224,53 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
           onKeyDown={handleKeyDown}
           className={cn(
             'w-full bg-transparent px-3 text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed',
+            type === 'inline' && 'text-center',
             sizeMap[size],
           )}
           {...props}
         />
-        {controls ? (
-          <div className="flex flex-col border-l">
+        {controls && type === 'inline' ? (
+          <button
+            type="button"
+            tabIndex={-1}
+            disabled={
+              disabled ||
+              (typeof max === 'number' && (current ?? -Infinity) >= max)
+            }
+            onClick={() => step1(1)}
+            aria-label="增加"
+            className="flex items-center justify-center border-l border-input px-2 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
+          >
+            <Plus className="size-3.5" />
+          </button>
+        ) : null}
+        {controls && type === 'normal' ? (
+          <div className="flex flex-col border-l border-input">
             <button
               type="button"
               tabIndex={-1}
-              disabled={disabled || (typeof max === 'number' && (current ?? -Infinity) >= max)}
+              disabled={
+                disabled ||
+                (typeof max === 'number' && (current ?? -Infinity) >= max)
+              }
               onClick={() => step1(1)}
               aria-label="增加"
               className="flex h-1/2 items-center justify-center px-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
             >
-              <ChevronUp className="size-3" />
+              <ChevronUp className="size-3.5" />
             </button>
             <button
               type="button"
               tabIndex={-1}
-              disabled={disabled || (typeof min === 'number' && (current ?? Infinity) <= min)}
+              disabled={
+                disabled ||
+                (typeof min === 'number' && (current ?? Infinity) <= min)
+              }
               onClick={() => step1(-1)}
               aria-label="减少"
-              className="flex h-1/2 items-center justify-center border-t px-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
+              className="flex h-1/2 items-center justify-center border-t border-input px-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
             >
-              <ChevronDown className="size-3" />
+              <ChevronDown className="size-3.5" />
             </button>
           </div>
         ) : null}