@teamix-evo/ui 0.3.0 → 0.5.0

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

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Search, Send, X } from 'lucide-react';
-
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupTextarea,
-} from './input-group';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof InputGroup> = {
-  title: '数据录入 · Data Entry/InputGroup',
-  component: InputGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '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>;
-
-/** 基础 —— 前置图标 + 单行输入(替代旧 `<Input prefix={<Search />} />`)。 */
-export const Basic: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <InputGroup>
-      <InputGroupAddon position="before" variant="icon">
-        <Search className="size-4" />
-      </InputGroupAddon>
-      <InputGroupInput placeholder="搜索文档..." />
-    </InputGroup>
-  ),
-};
-
-/** URL 输入 —— text 前后缀(替代旧 `<Input addonBefore="https://" addonAfter=".com" />`)。 */
-export const Url: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <InputGroup>
-      <InputGroupAddon position="before">https://</InputGroupAddon>
-      <InputGroupInput defaultValue="example" />
-      <InputGroupAddon position="after">.com</InputGroupAddon>
-    </InputGroup>
-  ),
-};
-
-/** 金额输入 —— 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>
-      <InputGroupAddon position="before" variant="icon">
-        <Search className="size-4" />
-      </InputGroupAddon>
-      <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="items-end">
-      <InputGroupTextarea rows={3} placeholder="发表评论..." />
-      <InputGroupAddon position="after" variant="button">
-        <Button size="icon" icon={<Send />} aria-label="发送" />
-      </InputGroupAddon>
-    </InputGroup>
-  ),
-};
-
-/** 整组禁用 —— `disabled` 仅控制视觉 opacity,子项 disabled 仍需自行传。 */
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <InputGroup disabled>
-      <InputGroupAddon position="before">@</InputGroupAddon>
-      <InputGroupInput defaultValue="alice" disabled />
-    </InputGroup>
-  ),
-};

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

@@ -1,143 +0,0 @@
-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)。
-   */
-  disabled?: boolean;
-}
-
-/**
- * Input + addon 统一容器 — shadcn 2025-10 新增,等价 antd `Input` 的
- * `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合,但拆为更通用的
- * **复合插槽**:`<InputGroupAddon position="before|after">`(addon)+
- * `<InputGroupInput>` / `<InputGroupTextarea>`(主体)按需嵌套图标 / 按钮 / 文本。
- */
-const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
-  ({ className, disabled, children, ...props }, ref) => (
-    <div
-      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',
-        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  ),
-);
-InputGroup.displayName = 'InputGroup';
-
-export interface InputGroupAddonProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 位于输入框的哪一侧。
-   * @default "before"
-   */
-  position?: 'before' | 'after';
-  /**
-   * `text` = 默认 muted 文本背景 / `icon` = 紧凑、透明背景(图标专用)/
-   * `button` = 用于嵌入 `<Button>`(去内边距)。
-   * @default "text"
-   */
-  variant?: 'text' | 'icon' | 'button';
-}
-
-const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
-  ({ position = 'before', variant = 'text', className, ...props }, ref) => (
-    <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-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}
-    />
-  ),
-);
-InputGroupAddon.displayName = 'InputGroupAddon';
-
-const InputGroupInput = React.forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, type = 'text', ...props }, ref) => (
-  <input
-    ref={ref}
-    type={type}
-    className={cn(
-      // 高度与 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}
-  />
-));
-InputGroupInput.displayName = 'InputGroupInput';
-
-const InputGroupTextarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>
->(({ className, rows = 3, ...props }, ref) => (
-  <textarea
-    ref={ref}
-    rows={rows}
-    className={cn(
-      '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}
-  />
-));
-InputGroupTextarea.displayName = 'InputGroupTextarea';
-
-export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea };

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

@@ -1,148 +0,0 @@
----
-id: input-number
-name: InputNumber
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 数字输入框
----
-
-# InputNumber 数字输入框
-
-数字输入 — antd 独有补足。**等价 antd `InputNumber`**。区别于原生 `<input type="number">`:步进按钮显隐可配、范围裁剪与精度由组件保证、千分位展示、键盘 ↑↓ 步进、支持空状态(`value=null`)。
-
-## When to use
-
-- 价格 / 数量 / 度量等数值输入(配 `min` / `max` / `step` 范围限制)
-- 需要精度控制的小数(`precision={2}`)
-- 大数展示千分位(`groupSeparator`)
-- 移动端友好的数字键盘(已设 `inputMode="decimal"`)
-
-## When NOT to use
-
-- 滑动选择 → `Slider`
-- 多档枚举 → `Segmented` / `RadioGroup`
-- 普通文本输入 → `Input`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `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) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **空状态 = `null`**(不要用 `0` 代表"空") — `onChange(null)` 时表单层应视为未填
-- **`min` / `max` 自动夹紧**:用户输入越界值,blur 时组件会自动 clamp;**不要**在外层再做边界校验
-- **`precision`** 控制保留小数位:超出位数会四舍五入展示,**实际 onChange 值也是 toFixed 后的 number**
-- **`groupSeparator`** 仅展示用:实际 value 仍是裸 number,不会带逗号
-- **`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
-
-```tsx
-import { InputNumber } from '@/components/ui/input-number';
-import * as React from 'react';
-
-// 基础
-<InputNumber defaultValue={10} min={0} max={100} />
-
-// 精度 + 千分位
-<InputNumber defaultValue={12345.67} precision={2} groupSeparator />
-
-// 受控
-const [v, setV] = React.useState<number | null>(1);
-<InputNumber value={v} onChange={setV} step={0.5} min={0} max={5} />
-
-// 隐藏步进按钮(配合 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,125 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { InputNumber } from './input-number';
-
-const meta: Meta<typeof InputNumber> = {
-  title: '数据录入 · Data Entry/InputNumber',
-  component: InputNumber,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '数字输入框 — 区别于原生 type=number：步进按钮显隐可配、范围裁剪与精度由组件保证、千分位展示、键盘 ↑↓ 步进、支持空状态。等价 antd `InputNumber`。',
-      },
-    },
-  },
-  argTypes: {
-    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: 'md',
-    type: 'normal',
-    controls: true,
-    groupSeparator: false,
-    disabled: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InputNumber>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <InputNumber
-      {...args}
-      defaultValue={10}
-      min={0}
-      max={100}
-      className="w-40"
-    />
-  ),
-};
-
-export const Precision: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <InputNumber
-      defaultValue={12345.67}
-      precision={2}
-      groupSeparator
-      step={0.01}
-      className="w-48"
-    />
-  ),
-};
-
-export const Controlled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [v, setV] = React.useState<number | null>(1.5);
-    return (
-      <div className="flex items-center gap-3">
-        <InputNumber
-          value={v}
-          onChange={(val) => setV(val as number | null)}
-          step={0.5}
-          min={0}
-          max={5}
-          precision={1}
-          className="w-40"
-        />
-        <span className="text-sm text-muted-foreground tabular-nums">
-          值: {v === null ? '空' : v}
-        </span>
-      </div>
-    );
-  },
-};
-
-export const NoControls: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <InputNumber controls={false} defaultValue={1} className="w-32" />
-  ),
-};
-
-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="md" defaultValue={0} className="w-32" />
-      <InputNumber size="lg" defaultValue={0} className="w-36" />
-    </div>
-  ),
-};