@teamix-evo/ui 0.2.0 → 0.4.0

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) => (
@@ -21,8 +33,8 @@ const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       ref={ref}
       data-disabled={disabled ? '' : undefined}
       className={cn(
-        'flex w-full items-stretch overflow-hidden rounded-md border border-input bg-background shadow-sm',
-        'focus-within:ring-1 focus-within:ring-ring',
+        'flex w-full items-stretch overflow-hidden rounded-md border border-input bg-card shadow-sm',
+        'hover:border-ring focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/10',
         'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
         className,
       )}
@@ -54,15 +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',
+          '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',
-        position === 'before' && variant !== 'icon' && 'border-r border-input',
-        position === 'after' && variant !== 'icon' && 'border-l border-input',
+          '[&>*]:!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}
@@ -79,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}
@@ -96,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,7 +2,7 @@
 id: input-number
 name: InputNumber
 type: component
-category: form
+category: data-entry
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 数字输入框
@@ -28,33 +28,32 @@ displayName: 数字输入框
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称             | 类型                              | 默认值      | 必填 | 说明                                                              |
-| ---------------- | --------------------------------- | ----------- | ---- | ----------------------------------------------------------------- |
-| `value`          | `number \| null`                  | –           | –    | 受控值 — `null` 等价空输入。                                      |
-| `defaultValue`   | `number \| null`                  | –           | –    | uncontrolled 初值。                                               |
-| `onChange`       | `(value: number \| null) => void` | –           | –    | 值变化回调 — 输入清空时传 `null`,正常输入 / 步进传 `number`。     |
-| `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"` | –    | 尺寸。                                                            |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `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` 时隐藏。 |
+| `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 -->
-
 ### 同库依赖
 
 > `teamix-evo ui add input-number` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -63,7 +62,6 @@ displayName: 数字输入框
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律
@@ -75,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
 
@@ -95,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,9 +1,9 @@
 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: {
@@ -15,13 +15,15 @@ const meta: Meta<typeof 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',
+    size: 'md',
+    type: 'normal',
     controls: true,
     groupSeparator: false,
     disabled: false,
@@ -64,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}
@@ -86,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,5 +1,5 @@
 import * as React from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
@@ -15,14 +15,23 @@ export interface InputNumberProps
     | '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` 并集)。 */
@@ -47,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(
@@ -67,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;
 
 /**
@@ -91,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,
@@ -101,10 +120,15 @@ 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 =
@@ -120,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>) => {
@@ -164,12 +192,27 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     return (
       <div
         className={cn(
-          'inline-flex items-stretch overflow-hidden rounded-md border border-input bg-background shadow-sm',
-          'focus-within:ring-1 focus-within:ring-ring',
+          'inline-flex items-stretch overflow-hidden rounded-md border border-input bg-card shadow-sm',
+          'hover:border-ring focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/10',
           disabled && 'cursor-not-allowed opacity-50',
           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"
@@ -181,11 +224,27 @@ 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 ? (
+        {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"
@@ -198,7 +257,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
               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"
@@ -211,7 +270,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
               aria-label="减少"
               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}

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

@@ -2,7 +2,7 @@
 id: input-otp
 name: InputOTP
 type: component
-category: form
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 验证码输入
@@ -30,20 +30,10 @@ OTP 验证码输入 — 基于 [`input-otp`](https://github.com/guilhermerodz/in
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。`InputOTP` 透传 `input-otp` 的所有 props。
 
 <!-- auto:props:begin -->
-
-#### InputOTP
-
-| 名称                 | 类型     | 默认值 | 必填 | 说明                                                                                         |
-| -------------------- | -------- | ------ | ---- | -------------------------------------------------------------------------------------------- |
-| `className`          | `string` | –      | –    | 输入框 className，作用在隐藏的真实 input 上；通常无需关心。                                  |
-| `containerClassName` | `string` | –      | –    | 容器 className，作用在 slot 列表外层 wrapper 上， 用于覆盖默认的 `flex items-center gap-2`。 |
-
-#### InputOTPSlot
-
-| 名称    | 类型     | 默认值 | 必填 | 说明                                       |
-| ------- | -------- | ------ | ---- | ------------------------------------------ |
-| `index` | `number` | –      | ✔    | Slot 索引（必传）。OTP 的 slots 数组下标。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `className` | `string` | – | – | 输入框 className,作用在隐藏的真实 input 上;通常无需关心。 |
+| `containerClassName` | `string` | – | – | 容器 className,作用在 slot 列表外层 wrapper 上, 用于覆盖默认的 `flex items-center gap-2`。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -51,14 +41,13 @@ OTP 验证码输入 — 基于 [`input-otp`](https://github.com/guilhermerodz/in
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add input-otp` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -67,7 +56,6 @@ OTP 验证码输入 — 基于 [`input-otp`](https://github.com/guilhermerodz/in
 ```bash
 pnpm add input-otp@^1.2.0 lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 > 子组件:`InputOTP`(Root)/ `InputOTPGroup`(slot 容器)/ `InputOTPSlot`(单 slot,需 `index`)/ `InputOTPSeparator`(分隔符,如 4-4 数字之间的点)。

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import {
   InputOTP,
@@ -9,14 +9,14 @@ import {
 } from './input-otp';
 
 const meta: Meta<typeof InputOTP> = {
-  title: '表单与输入 · Form/InputOTP',
+  title: '废弃 · Deprecated/InputOTP',
   component: InputOTP,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '一次性密码输入 — 短信 / 邮箱验证码场景的格式化输入，每位字符独立可视 slot。基于 [`input-otp`](https://input-otp.rodz.dev/) 实现，自动处理粘贴、键盘前后切换、IME 与 SMS autofill；通过 `pattern` 限制输入字符集(数字 / 字母数字)。shadcn 专有能力，填补 antd 未提供的验证码输入场景。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n一次性密码输入 — 短信 / 邮箱验证码场景的格式化输入，每位字符独立可视 slot。基于 [`input-otp`](https://input-otp.rodz.dev/) 实现，自动处理粘贴、键盘前后切换、IME 与 SMS autofill；通过 `pattern` 限制输入字符集(数字 / 字母数字)。shadcn 专有能力，填补 antd 未提供的验证码输入场景。',
       },
     },
   },

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

@@ -67,7 +67,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'relative flex size-10 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        'relative flex size-10 items-center justify-center border-y border-r border-input text-xs shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
         isActive && 'z-10 ring-1 ring-ring',
         className,
       )}