@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/item/item.stories.tsx

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemTitle,
-  ItemDescription,
-  ItemActions,
-  ItemGroup,
-} from './item';
-import { Avatar, AvatarFallback } from '@/components/avatar/avatar';
-import { Button } from '@/components/button/button';
-import { Switch } from '@/components/switch/switch';
-
-const meta: Meta<typeof Item> = {
-  title: '数据展示 · Data Display/Item',
-  component: Item,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '通用列表项 / 卡片项 — 5 个语义槽组合（ItemMedia / ItemContent / ItemTitle / ItemDescription / ItemActions），配 ItemGroup 纵向排列。shadcn 2025-10 新增，取代之前自实现的 List.Item（antd 老 List 在 v6 已 deprecated）。',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'inline-radio',
-      options: ['default', 'outline', 'muted'],
-    },
-    interactive: { control: 'boolean' },
-  },
-  args: { variant: 'default', interactive: false },
-};
-
-export default meta;
-type Story = StoryObj<typeof Item>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <Item {...args}>
-      <ItemContent>
-        <ItemTitle>邮件通知</ItemTitle>
-        <ItemDescription>有重要事件时给我发邮件</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Switch defaultChecked />
-      </ItemActions>
-    </Item>
-  ),
-};
-
-const users = [
-  { id: 1, name: 'Alice Wong', email: 'alice@example.com', initials: 'AW' },
-  { id: 2, name: 'Bob Lin', email: 'bob@example.com', initials: 'BL' },
-  { id: 3, name: 'Carol Sun', email: 'carol@example.com', initials: 'CS' },
-];
-
-export const ContactList: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ItemGroup className="w-96 rounded-md border border-border">
-      {users.map((u) => (
-        <Item key={u.id} interactive className="px-3 py-2">
-          <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>
-  ),
-};
-
-export const OutlineCard: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Item variant="outline" interactive className="w-96">
-      <ItemContent>
-        <ItemTitle>升级到 Pro</ItemTitle>
-        <ItemDescription>解锁更多组件与高级模板</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button>升级</Button>
-      </ItemActions>
-    </Item>
-  ),
-};
-
-export const Muted: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Item variant="muted" className="w-96">
-      <ItemContent>
-        <ItemTitle>提示</ItemTitle>
-        <ItemDescription>该 workspace 还没有任何项目</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="outline" size="sm">
-          新建
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
-};

package/src/components/item/item.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-const itemVariants = cva(
-  'flex w-full items-start gap-3 text-xs transition-colors',
-  {
-    variants: {
-      variant: {
-        default: '',
-        outline:
-          'rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm',
-        muted: 'rounded-md bg-muted p-3',
-      },
-      interactive: {
-        true: 'cursor-pointer hover:bg-accent',
-        false: '',
-      },
-    },
-    defaultVariants: { variant: 'default', interactive: false },
-  },
-);
-
-export interface ItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof itemVariants> {
-  /**
-   * 视觉变体 — `default` 透明无边框(嵌入 List / Group 用);`outline` 卡片化(独立卡片);`muted` 灰底卡片。
-   * @default "default"
-   */
-  variant?: 'default' | 'outline' | 'muted';
-  /**
-   * 是否带 hover 高亮 + cursor-pointer(行可点击场景)。
-   * @default false
-   */
-  interactive?: boolean;
-}
-
-/**
- * 通用列表项 / 卡片项容器 — shadcn 2025-10 新增。
- * 用 `<ItemMedia>` `<ItemContent>` `<ItemTitle>` `<ItemDescription>` `<ItemActions>`
- * 五个语义槽组合,替代之前 antd `List.Item` + `List.Item.Meta` 的强结构。
- *
- * 排列容器请用 `<ItemGroup>`(纵向 + divider)或直接用 div / ul 自行布局。
- */
-const Item = React.forwardRef<HTMLDivElement, ItemProps>(
-  ({ variant, interactive, className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(itemVariants({ variant, interactive }), className)}
-      {...props}
-    />
-  ),
-);
-Item.displayName = 'Item';
-
-// ─── ItemMedia(头像 / 图标 / 缩略图槽)──────────────────────────────────
-
-export interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 媒体尺寸 — `default` 用于头像 / 图标;`lg` 用于缩略图。
-   * @default "default"
-   */
-  size?: 'md' | 'default' | 'lg';
-}
-
-const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(
-  ({ size = 'md', className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'flex shrink-0 items-center justify-center text-muted-foreground',
-        size === 'lg' && 'size-16',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-ItemMedia.displayName = 'ItemMedia';
-
-// ─── ItemContent(主体内容容器)─────────────────────────────────────────
-
-const ItemContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex min-w-0 flex-1 flex-col gap-1', className)}
-    {...props}
-  />
-));
-ItemContent.displayName = 'ItemContent';
-
-// ─── ItemTitle / ItemDescription ───────────────────────────────────────
-
-const ItemTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('truncate text-xs font-semibold leading-none', className)}
-    {...props}
-  />
-));
-ItemTitle.displayName = 'ItemTitle';
-
-const ItemDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('truncate text-xs text-muted-foreground', className)}
-    {...props}
-  />
-));
-ItemDescription.displayName = 'ItemDescription';
-
-// ─── ItemActions(右侧操作槽)──────────────────────────────────────────
-
-const ItemActions = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex shrink-0 items-center gap-2', className)}
-    {...props}
-  />
-));
-ItemActions.displayName = 'ItemActions';
-
-// ─── ItemGroup(纵向排列容器,自带分隔线)──────────────────────────────
-
-export interface ItemGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 项之间是否显示分隔线。
-   * @default true
-   */
-  divided?: boolean;
-}
-
-const ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(
-  ({ divided = true, className, ...props }, ref) => (
-    <div
-      ref={ref}
-      role="list"
-      className={cn(
-        'flex w-full flex-col',
-        divided && 'divide-y divide-border',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-ItemGroup.displayName = 'ItemGroup';
-
-export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemTitle,
-  ItemDescription,
-  ItemActions,
-  ItemGroup,
-  itemVariants,
-};

package/src/components/kbd/kbd.meta.md

@@ -1,94 +0,0 @@
----
-id: kbd
-name: Kbd
-displayName: 键位展示
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Kbd 键位展示
-
-键位展示 — shadcn 2025-10 新增。语义化的 `<kbd>` 元素 + `KbdGroup` 组合容器,用于在 UI 中标注**快捷键**(`⌘K` / `Ctrl + Enter` / `Esc`)。常见于 Command Palette、Tooltip、文档 / 帮助提示。
-
-## When to use
-
-- Command Palette 项右侧的快捷键提示
-- Tooltip / 帮助气泡里指明键盘快捷键
-- 文档 / 帮助页中表达"按某键"
-
-## When NOT to use
-
-- 引用代码片段 → 用 `<code>` / Typography Code(`<Kbd>` 语义是物理键位)
-- 普通行内强调 → 用 `<strong>` / Typography Text strong
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"default"` | – | 尺寸 — 与文字行高匹配,大尺寸用于 Command Palette 等突出展示。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成，数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add kbd` 时,以下 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 生成纪律
-
-- **单键用 `<Kbd>`,组合键必须用 `<KbdGroup>`** — 不要直接用空格连接多个 Kbd,会丢失语义
-- **`separator` 仅做视觉**(`+` / `→`),按键间距已默认 `gap-1`,常见 mac 风格留空即可
-- **键名规范**:macOS 用 ⌘ ⇧ ⌥ ⌃ ⏎ 符号;Windows 用 `Ctrl` `Shift` `Alt` 缩写。同一界面保持一致
-- **不要嵌套 `<Kbd>` 在按钮内**做"按这个键"的提示 — 按钮已表达可点击,语义重复;改用 `aria-keyshortcuts` + Tooltip
-- **`size="lg"`** 仅用于 Command Palette / 教程页等视觉高亮,默认与正文同高
-
-## Examples
-
-```tsx
-import { Kbd, KbdGroup } from '@/components/ui/kbd';
-
-// 单键
-<Kbd>Esc</Kbd>
-
-// 组合(mac 风格)
-<KbdGroup>
-  <Kbd>⌘</Kbd>
-  <Kbd>K</Kbd>
-</KbdGroup>
-
-// 组合(Win 风格,带分隔)
-<KbdGroup separator="+">
-  <Kbd>Ctrl</Kbd>
-  <Kbd>Shift</Kbd>
-  <Kbd>P</Kbd>
-</KbdGroup>
-
-// 配 Command Palette
-<CommandItem>
-  打开搜索
-  <KbdGroup className="ml-auto">
-    <Kbd>⌘</Kbd><Kbd>K</Kbd>
-  </KbdGroup>
-</CommandItem>
-```

package/src/components/kbd/kbd.stories.tsx

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Kbd, KbdGroup } from './kbd';
-
-const meta: Meta<typeof Kbd> = {
-  title: '废弃 · Deprecated/Kbd',
-  component: Kbd,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n键位展示 — 语义化 `<kbd>` 元素，标注快捷键（⌘K / Ctrl + Enter）。单键 + KbdGroup 组合容器，常用于 Command Palette、Tooltip、文档帮助。antd 体系无对应原子。',
-      },
-    },
-  },
-  argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
-  },
-  args: { size: 'default', children: 'K' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Kbd>;
-
-export const Playground: Story = {};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-end gap-3">
-      <Kbd size="sm">K</Kbd>
-      <Kbd size="default">K</Kbd>
-      <Kbd size="lg">K</Kbd>
-    </div>
-  ),
-};
-
-export const MacCombo: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <KbdGroup>
-      <Kbd>⌘</Kbd>
-      <Kbd>K</Kbd>
-    </KbdGroup>
-  ),
-};
-
-export const WinCombo: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <KbdGroup separator="+">
-      <Kbd>Ctrl</Kbd>
-      <Kbd>Shift</Kbd>
-      <Kbd>P</Kbd>
-    </KbdGroup>
-  ),
-};
-
-export const InContext: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center justify-between rounded-md border border-border bg-card p-3 text-sm">
-      <span>打开命令面板</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>K</Kbd>
-      </KbdGroup>
-    </div>
-  ),
-};

package/src/components/kbd/kbd.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-const kbdVariants = cva(
-  // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- physical-key inset shadow; one-off effect not used elsewhere.
-  'pointer-events-none inline-flex select-none items-center gap-1 rounded border border-border bg-muted font-mono tabular-nums text-muted-foreground shadow-[0_1px_0_0_rgba(0,0,0,0.08)]',
-  {
-    variants: {
-      size: {
-        sm: 'h-4 px-1 text-xxs',
-        md: 'h-5 px-1.5 text-xs',
-        default: 'h-5 px-1.5 text-xs',
-        lg: 'h-6 px-2 text-sm',
-      },
-    },
-    defaultVariants: { size: 'md' },
-  },
-);
-
-export interface KbdProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof kbdVariants> {
-  /**
-   * 尺寸 — 与文字行高匹配,大尺寸用于 Command Palette 等突出展示。
-   * @default "default"
-   */
-  size?: 'sm' | 'md' | 'default' | 'lg';
-}
-
-/**
- * 单个键位展示 — shadcn 2025-10 新增。语义化的 `<kbd>` 元素,
- * 配 `KbdGroup` 表达"⌘ + K"等组合键。
- */
-const Kbd = React.forwardRef<HTMLElement, KbdProps>(
-  ({ size, className, ...props }, ref) => (
-    <kbd
-      ref={ref as React.Ref<HTMLElement>}
-      className={cn(kbdVariants({ size }), className)}
-      {...props}
-    />
-  ),
-);
-Kbd.displayName = 'Kbd';
-
-export interface KbdGroupProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /**
-   * 组合分隔符(纯视觉) — 默认 ` `(键位间距即可),如 "Ctrl + K" 风格传 "+";"⌘K" 风格传空串。
-   * @default ""
-   */
-  separator?: string;
-}
-
-/**
- * 组合键容器 — 渲染多个 `<Kbd>` 之间的间距与可选分隔符(`Ctrl + K`、`⇧⌘P`)。
- */
-const KbdGroup = React.forwardRef<HTMLSpanElement, KbdGroupProps>(
-  ({ separator = '', className, children, ...props }, ref) => {
-    const items = React.Children.toArray(children).filter(Boolean);
-    return (
-      <span
-        ref={ref}
-        className={cn('inline-flex items-center gap-1', className)}
-        {...props}
-      >
-        {items.map((child, i) => (
-          <React.Fragment key={i}>
-            {i > 0 && separator ? (
-              <span
-                aria-hidden="true"
-                className="text-xs text-muted-foreground"
-              >
-                {separator}
-              </span>
-            ) : null}
-            {child}
-          </React.Fragment>
-        ))}
-      </span>
-    );
-  },
-);
-KbdGroup.displayName = 'KbdGroup';
-
-export { Kbd, KbdGroup, kbdVariants };

package/src/components/label/label.meta.md

@@ -1,99 +0,0 @@
----
-id: label
-name: Label
-displayName: 标签
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Label 标签
-
-表单字段标签 — 基于 [`@radix-ui/react-label`](https://www.radix-ui.com/primitives/docs/components/label) 包装。
-shadcn 原版只继承 Radix 的 `peer-disabled:` 联动；本版本补一条 antd Form.Item 风格的 `required`（红色 `*` 标记，**后置**在文字和 tooltip icon 右侧）+ 显式 `disabled` prop，适合 label 与目标控件**不直接相邻**的场景。
-
-## When to use
-
-- 表单字段标题(配合 `htmlFor` 或 Radix Label 默认的 click-to-focus 关联)
-- 任何需要"不可点击的强标题"的位置(如设置面板的开关组),提供清晰的可读层级
-
-## When NOT to use
-
-- 整段说明文字 → 用普通 `<p>` 或 design `Typography`
-- 表单字段说明(辅助说明) → 用 `<p className="text-sm text-muted-foreground">` 而非 Label
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`label.tsx`](./label.tsx) 的 `LabelProps` interface JSDoc。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `disabled` | `boolean` | `false` | – | 视觉禁用态。除原生 `peer-disabled:` 联动外,显式置 `true` 也会触发禁用样式; 适合 label 与目标控件不直接相邻、无法走 `peer` 约束的场景。 |
-| `required` | `boolean` | `false` | – | 必填标记。`true` 时在 children 与 info icon **后**追加红色 `*` (语义来自 design destructive token);顺序为 `文字 ⓘ *`,三者间距 4px。 配合 `aria-required` 在 input 上一起使用以保证可访问性。 |
-| `tooltip` | `string` | – | – | 辅助说明文本 — 有值时在 label 文字后渲染 info icon + hover tooltip (对齐 antd `Form.Item.tooltip` 习惯)。 |
-| `tooltipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | – | Tooltip 弹出方向。 |
-| `maxWidth` | `number \| string` | `undefined` | – | 最大宽度 — 超出时截断省略号。数字单位为 px,字符串直接用作 CSS 值。 适合长字段名在固定宽度表单中防止换行影响布局。 |
-| `minWidth` | `number` | `undefined` | – | 最小宽度(px) — 防止过度压缩,在响应式布局中保留可读宽度下限。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add label` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-label@^2.1.0 class-variance-authority@^0.7.0
-```
-<!-- auto:deps:end -->
-
-> 除上述 props 外,Label 透传所有 `<label>` 原生属性(`htmlFor` / `id` / `aria-*` / `onClick` / ...)。
-
-## AI 生成纪律
-
-- **`htmlFor` 必填**：Label 必须通过 `htmlFor` 关联到目标控件的 `id`，或把控件包裹在 Label 内。**不要**只渲染孤立 Label。
-- **`required` 配 `aria-required`**：仅视觉的 `*` 不够，目标 input 也要 `aria-required="true"`。
-- **`*` 后置不可额外加空格**：请使用 `required` prop，不要手写 `<span>邮箱 *</span>`，走组件才能保证间距一致 + double-click 文字可快捷选中标题。
-- **`disabled` 不替代 input 的 disabled**：Label 的 `disabled` 仅控制视觉，目标控件的 `disabled` 必须独立设置。
-- **不内嵌交互元素**：Label 内不要放 button / link / 复杂控件 — Radix Label 的事件冒泡可能误触发关联控件。
-- **文案克制**：Label 文字 ≤ 8 个汉字 / 16 字符，过长用 `tooltip` prop 补充说明（不要手写 `<Tooltip>` 包裹）。
-- **截断走 `maxWidth`**：长 label 用 `maxWidth` 自动截断 + ellipsis，不要手写 `truncate` className。
-- **horizontal 对齐走 `minWidth`**：表单 label 列宽对齐用 `minWidth={120}` 等档位，不要手写 `min-w-32` 等 utility。
-
-## Examples
-
-```tsx
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-
-// 基本
-<Label htmlFor="email">邮箱</Label>
-<Input id="email" type="email" />
-
-// 必填(视觉 + 语义)
-<Label htmlFor="username" required>用户名</Label>
-<Input id="username" required aria-required="true" />
-
-// 禁用
-<Label htmlFor="readonly" disabled>只读字段</Label>
-<Input id="readonly" disabled />
-
-// 与控件相邻 — 用 peer 自动联动
-<div>
-  <Input id="auto" disabled className="peer" />
-  <Label htmlFor="auto">自动联动 disabled 视觉</Label>
-</div>
-```