@teamix-evo/ui 0.3.0 → 0.5.0

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

@@ -1,283 +0,0 @@
-import * as React from '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'
-  > {
-  /**
-   * 大数/高精度字符串模式(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 | string | null) => void;
-  /** 最小值(antd `min` 并集)。 */
-  min?: number;
-  /** 最大值(antd `max` 并集)。 */
-  max?: number;
-  /**
-   * 步长(antd `step` 并集) — 增 / 减按钮以及键盘 ↑↓ 都按此步长。
-   * @default 1
-   */
-  step?: number;
-  /**
-   * 数值精度(antd `precision` 并集) — 保留小数位数(超出会四舍五入)。
-   */
-  precision?: number;
-  /**
-   * 千分位分隔展示(仅展示用,实际 value 仍是 number)。
-   * @default false
-   */
-  groupSeparator?: boolean;
-  /**
-   * 是否显示右侧上下步进按钮(antd `controls` 并集) — `false` 时隐藏。
-   * @default true
-   */
-  controls?: boolean;
-  /**
-   * 形态(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' | 'md' | 'default' | 'lg';
-}
-
-function format(
-  raw: number | null,
-  precision: number | undefined,
-  groupSeparator: boolean,
-): string {
-  if (raw === null || Number.isNaN(raw)) return '';
-  const fixed = precision !== undefined ? raw.toFixed(precision) : String(raw);
-  if (!groupSeparator) return fixed;
-  const [intPart, decPart] = fixed.split('.');
-  const grouped = intPart!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  return decPart !== undefined ? `${grouped}.${decPart}` : grouped;
-}
-
-const sizeMap = {
-  sm: 'h-6 text-xs',
-  md: 'h-8 text-xs',
-  default: 'h-8 text-xs',
-  lg: 'h-9 text-sm',
-} as const;
-
-/**
- * 数字输入框 — antd 独有补足。**等价 antd `InputNumber`**。区别于原生 `<input type="number">`:
- *   - 步进按钮可自定义显隐
- *   - 范围裁剪与 precision 由组件保证(超出 min/max 自动夹紧)
- *   - 千分位展示(仅 UI)
- *   - 支持空状态(value=null)
- */
-const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
-  (
-    {
-      value,
-      defaultValue,
-      onChange,
-      min,
-      max,
-      step = 1,
-      precision,
-      groupSeparator = false,
-      controls = true,
-      type = 'normal',
-      size = 'md',
-      stringMode = false,
-      disabled,
-      className,
-      onBlur,
-      onKeyDown,
-      ...props
-    },
-    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>(
-      toNum(defaultValue),
-    );
-    const current = isControlled ? toNum(value) : internal;
-    const [editing, setEditing] = React.useState<string | null>(null);
-
-    const display =
-      editing !== null ? editing : format(current, precision, groupSeparator);
-
-    const clamp = (n: number): number => {
-      let v = n;
-      if (typeof min === 'number') v = Math.max(min, v);
-      if (typeof max === 'number') v = Math.min(max, v);
-      if (typeof precision === 'number') v = Number(v.toFixed(precision));
-      return v;
-    };
-
-    const commit = (next: number | null) => {
-      if (!isControlled) setInternal(next);
-      if (stringMode) {
-        onChange?.(next === null ? null : String(next));
-      } else {
-        onChange?.(next);
-      }
-    };
-
-    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const raw = e.target.value;
-      // Allow free typing of intermediate states ("-", "1.").
-      setEditing(raw);
-      if (raw === '' || raw === '-' || raw === '.') return;
-      const parsed = Number(raw.replace(/,/g, ''));
-      if (!Number.isNaN(parsed)) commit(clamp(parsed));
-    };
-
-    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-      setEditing(null);
-      const raw = e.target.value;
-      if (raw === '' || raw === '-' || raw === '.') {
-        commit(null);
-      } else {
-        const parsed = Number(raw.replace(/,/g, ''));
-        commit(Number.isNaN(parsed) ? null : clamp(parsed));
-      }
-      onBlur?.(e);
-    };
-
-    const step1 = (sign: 1 | -1) => {
-      if (disabled) return;
-      const base = current ?? 0;
-      commit(clamp(base + sign * step));
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        step1(1);
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        step1(-1);
-      }
-      onKeyDown?.(e);
-    };
-
-    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',
-          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"
-          inputMode="decimal"
-          value={display}
-          disabled={disabled}
-          onChange={handleInput}
-          onBlur={handleBlur}
-          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 && 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)
-              }
-              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.5" />
-            </button>
-            <button
-              type="button"
-              tabIndex={-1}
-              disabled={
-                disabled ||
-                (typeof min === 'number' && (current ?? Infinity) <= min)
-              }
-              onClick={() => step1(-1)}
-              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.5" />
-            </button>
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
-InputNumber.displayName = 'InputNumber';
-
-export { InputNumber };

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

@@ -1,106 +0,0 @@
----
-id: input-otp
-name: InputOTP
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 验证码输入
----
-
-# InputOTP 验证码输入
-
-OTP 验证码输入 — 基于 [`input-otp`](https://github.com/guilhermerodz/input-otp)。**shadcn-only**(antd 无对标组件)。
-4~8 位短验证码常见场景:登录、二步验证、支付确认。
-
-## When to use
-
-- 短信 / 邮件验证码输入
-- 二步验证(TOTP / 短信)
-- 支付密码 / PIN
-
-## When NOT to use
-
-- 长密码输入 → `Input type="password"`
-- 富文本 / 自由格式 → `Input` / `Textarea`
-- 银行卡号 → `Input` + `format` 函数
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。`InputOTP` 透传 `input-otp` 的所有 props。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `className` | `string` | – | – | 输入框 className,作用在隐藏的真实 input 上;通常无需关心。 |
-| `containerClassName` | `string` | – | – | 容器 className,作用在 slot 列表外层 wrapper 上, 用于覆盖默认的 `flex items-center gap-2`。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `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) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```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 数字之间的点)。
-
-## AI 生成纪律
-
-- **`maxLength` 必传**:声明位数(常见 4 / 6 / 8)
-- **每个 Slot 必传 `index`**:0-based,与 maxLength 对应
-- **`pattern` 限制字符类**:数字 OTP 用 `pattern={REGEXP_ONLY_DIGITS}`(从 `input-otp` 导入),避免用户粘贴混合字符
-- **多 Group 用 Separator**:6 位时分 3-3 或 4-2 提升可读性
-- **复制粘贴自带**:input-otp 自动处理,不需要再监听 paste
-
-## Examples
-
-```tsx
-import {
-  InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator,
-} from '@/components/ui/input-otp';
-import { REGEXP_ONLY_DIGITS } from 'input-otp';
-
-// 6 位
-<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
-  <InputOTPGroup>
-    {[0, 1, 2, 3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}
-  </InputOTPGroup>
-</InputOTP>
-
-// 6 位,3-3 分组
-<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-  </InputOTPGroup>
-  <InputOTPSeparator />
-  <InputOTPGroup>
-    <InputOTPSlot index={3} />
-    <InputOTPSlot index={4} />
-    <InputOTPSlot index={5} />
-  </InputOTPGroup>
-</InputOTP>
-
-// 受控
-const [v, setV] = React.useState('');
-<InputOTP maxLength={6} value={v} onChange={setV}>
-  <InputOTPGroup>...</InputOTPGroup>
-</InputOTP>
-```

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

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

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

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { OTPInput, OTPInputContext } from 'input-otp';
-import { Dot } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-/**
- * InputOTP 自身的可定制属性。底层 `OTPInput` 的所有 props
- * (`maxLength` / `pattern` / `value` / `onChange` / `onComplete` /
- *  `children` / `render` / ...)由 input-otp 透传。
- */
-export interface InputOTPProps {
-  /**
-   * 输入框 className,作用在隐藏的真实 input 上;通常无需关心。
-   */
-  className?: string;
-  /**
-   * 容器 className,作用在 slot 列表外层 wrapper 上,
-   * 用于覆盖默认的 `flex items-center gap-2`。
-   */
-  containerClassName?: string;
-}
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: InputOTPProps & React.ComponentPropsWithoutRef<typeof OTPInput>) {
-  return (
-    <OTPInput
-      containerClassName={cn(
-        'flex items-center gap-2 has-[:disabled]:opacity-50',
-        containerClassName,
-      )}
-      className={cn('disabled:cursor-not-allowed', className)}
-      {...props}
-    />
-  );
-}
-InputOTP.displayName = 'InputOTP';
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center', className)} {...props} />
-));
-InputOTPGroup.displayName = 'InputOTPGroup';
-
-export interface InputOTPSlotProps
-  extends React.ComponentPropsWithoutRef<'div'> {
-  /** Slot 索引(必传)。OTP 的 slots 数组下标。 */
-  index: number;
-}
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<'div'>,
-  InputOTPSlotProps
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const slot = inputOTPContext.slots[index];
-  const char = slot?.char;
-  const hasFakeCaret = slot?.hasFakeCaret;
-  const isActive = slot?.isActive;
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        '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,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret ? (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      ) : null}
-    </div>
-  );
-});
-InputOTPSlot.displayName = 'InputOTPSlot';
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Dot className="size-4" />
-  </div>
-));
-InputOTPSeparator.displayName = 'InputOTPSeparator';
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/components/item/item.meta.md

@@ -1,121 +0,0 @@
----
-id: item
-name: Item
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 列表项
----
-
-# Item 列表项
-
-通用列表项 / 卡片项容器 — shadcn 2025-10 新增。**取代我们之前自实现的 `List.Item` + `List.Item.Meta`**(antd 老 List 在 v6 已 deprecated)。用 5 个语义槽组合:`ItemMedia` 媒体 / `ItemContent` 主体 / `ItemTitle` 标题 / `ItemDescription` 描述 / `ItemActions` 操作。排列用 `ItemGroup`(纵向 + 分隔)或自行 div / ul 自由布局。
-
-## When to use
-
-- 消息流 / 通知列表的单条
-- 设置项(标题 + 描述 + 开关 / 按钮)
-- 文件 / 联系人 / 任务卡片化展示
-- 配 Flex / Grid / Card / Sidebar 自由组合排列容器
-
-## When NOT to use
-
-- 结构化数据(有列对齐 / 排序)→ `Table` / `DataTable`
-- 完整业务卡片(带 Header / Cover / Footer)→ `Card`
-- 树形嵌套 → `Tree`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `variant` | `'default' \| 'outline' \| 'muted'` | `"default"` | – | 视觉变体 — `default` 透明无边框(嵌入 List / Group 用);`outline` 卡片化(独立卡片);`muted` 灰底卡片。 |
-| `interactive` | `boolean` | `false` | – | 是否带 hover 高亮 + cursor-pointer(行可点击场景)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add item` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add class-variance-authority@^0.7.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **5 个槽是约定不是强制**:`Item` 内子节点顺序就是渲染顺序,可以只用 `ItemContent + ItemActions`,也可以五个都用
-- **`ItemContent`** 必须放主体内容,它有 `min-w-0 flex-1` 用来对抗 truncate;不要外面再裹 div
-- **`ItemTitle / ItemDescription` 自带 `truncate`** — 不希望截断的场景请覆盖 `className="whitespace-normal"`
-- **`variant="default"`(默认)透明无边框** — 嵌入 `ItemGroup` / `List` / `Sidebar` 容器使用
-- **`variant="outline"` 卡片化** — 独立单 Item 卡片(关注小白卡 / 消息中心整条)
-- **`interactive=true` 等价 cursor-pointer + hover 高亮** — 配合 `onClick` 或外层 `<a>` 包裹;**不要**给 Item 加 `role="button"`,完整按钮请用 Button
-
-## Examples
-
-```tsx
-import {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemTitle,
-  ItemDescription,
-  ItemActions,
-  ItemGroup,
-} from '@/components/ui/item';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Switch } from '@/components/ui/switch';
-
-// 设置项
-<Item>
-  <ItemContent>
-    <ItemTitle>邮件通知</ItemTitle>
-    <ItemDescription>有重要事件时给我发邮件</ItemDescription>
-  </ItemContent>
-  <ItemActions>
-    <Switch defaultChecked />
-  </ItemActions>
-</Item>
-
-// 联系人列表
-<ItemGroup>
-  {users.map((u) => (
-    <Item key={u.id} interactive>
-      <ItemMedia>
-        <Avatar><AvatarFallback>{u.initials}</AvatarFallback></Avatar>
-      </ItemMedia>
-      <ItemContent>
-        <ItemTitle>{u.name}</ItemTitle>
-        <ItemDescription>{u.email}</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="ghost" size="sm">邀请</Button>
-      </ItemActions>
-    </Item>
-  ))}
-</ItemGroup>
-
-// 独立卡片化 Item
-<Item variant="outline" interactive>
-  <ItemContent>
-    <ItemTitle>升级到 Pro</ItemTitle>
-    <ItemDescription>解锁更多组件与高级模板</ItemDescription>
-  </ItemContent>
-  <ItemActions>
-    <Button>升级</Button>
-  </ItemActions>
-</Item>
-```