@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -1,209 +0,0 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-menu overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-/**
- * `onCloseAutoFocus` 默认 `preventDefault` — 阻止 Radix 关闭时把焦点程序化
- * restore 回 trigger。
- *
- * 原因:Chromium/Safari 把"程序化 restore 的 focus"判定为非鼠标焦点 → 触发
- * `:focus-visible` → trigger(尤其是 SplitButton 右侧 ChevronDown 这类只有
- * 下拉箭头的 Button)在关闭后残留蓝色 ring,与用户"鼠标点完已经失焦了"的
- * 视觉预期冲突。对齐 antd `Dropdown.Button` / cloud-design `SplitButton` 的
- * 鼠标体感:关闭后无残留 ring。
- *
- * 取舍:键盘 Esc 关闭后焦点也不会 restore 回 trigger,而是落到 body(下一次
- * Tab 从文档头开始)。这是为视觉体感做的可达性轻微降级 — 业务侧需要保留
- * restore 行为时,显式传 `onCloseAutoFocus` 即可完全覆盖默认。
- */
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, onCloseAutoFocus, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      onCloseAutoFocus={onCloseAutoFocus ?? ((event) => event.preventDefault())}
-      className={cn(
-        'z-50 min-w-menu overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="size-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="size-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-xs font-semibold',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span
-    className={cn(
-      'ml-auto text-xs tracking-widest text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-);
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

package/src/components/ellipsis/ellipsis.meta.md

@@ -1,87 +0,0 @@
----
-id: ellipsis
-name: Ellipsis
-displayName: 截断文本
-type: component
-category: data-display
-since: 0.2.0
-package: '@teamix-evo/ui'
----
-
-# Ellipsis 截断文本
-
-单行 / 多行文本截断 + 渐变遮罩 + 溢出时自动 hover tooltip。对齐《Teamix UI 表单设计规范》§八 "内容显示不完全 — 截断 + 渐变遮罩 + hover tooltip 三件套"。
-
-## When to use
-
-- 表格单元格、Field 详情值、Tag、面包屑等横向宽度受限场景
-- Label / Description 长文案需要在固定宽度下完整可读(hover 看全)
-- 任何"窄列展示长字符串"的位置(对齐规范第八节示例)
-
-## When NOT to use
-
-- 容器永远不会溢出 → 直接 `<span>` / `<p>`,不引入额外组件
-- 需要"逐字符显示且可换行" → 用普通段落
-- 富文本(含 button / link 等交互) → Tooltip 与子级事件可能冲突,自行组合 Tooltip + truncate
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `tooltip` | `React.ReactNode` | – | – | 超长时显示的 tooltip 文本 — 不传时自动用 children 的纯文本(优先)或 `title` 属性。 显示规则:仅当实际渲染时检测到溢出(scrollWidth > clientWidth 或 scrollHeight > clientHeight)才挂载 Tooltip。 |
-| `lines` | `number` | `1` | – | 多行截断行数。传入数字 >1 时走 `-webkit-line-clamp` 多行模式;否则单行 truncate。 |
-| `fade` | `boolean` | `true` | – | 是否在文本右侧叠加渐变遮罩(对齐《Teamix UI 表单设计规范》§八 "截断 + 渐变遮罩 + hover tooltip 三件套")。 默认开启;在容器无溢出时 mask 自动隐藏(scrollWidth ≤ clientWidth)。 |
-| `tooltipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | – | Tooltip 弹出方向。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add ellipsis` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `tooltip` | component | 文字提示气泡 — Radix Tooltip + antd arrow/placement(side) 并集 + cloud-design Balloon 双变体(default 深底 / light 白底) + 一行 wrapper API |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **不要手写 `truncate` + `<Tooltip>`**:直接用 `<Ellipsis>`,组件内置 ResizeObserver 检测溢出,仅溢出时挂 Tooltip(避免短文本也弹)
-- **多行截断走 `lines` prop**:`<Ellipsis lines={2}>`,不要手写 `-webkit-line-clamp` className
-- **`fade` 默认开启**:渐变遮罩仅在溢出时显示;关掉只走纯 ellipsis 可设 `fade={false}`
-- **tooltip 内容兜底**:不传 `tooltip` 时自动用 children 作为 tooltip 文本(适合纯文本场景);若 children 含 JSX,显式传 `tooltip="..."`
-
-## Examples
-
-```tsx
-import { Ellipsis } from '@/components/ui/ellipsis';
-
-// 单行 + 渐变遮罩 + 自动 tooltip
-<div className="w-32">
-  <Ellipsis>这一段超长文本会自动截断、右侧带渐变遮罩,hover 弹 tooltip 看全文</Ellipsis>
-</div>
-
-// 多行
-<div className="w-48">
-  <Ellipsis lines={2}>段落多行截断的示例文本,超过两行后剩余内容会被裁剪。</Ellipsis>
-</div>
-
-// 显式 tooltip 内容(child 含 JSX 时常用)
-<Ellipsis tooltip="完整路径:zhao.yu > 公共部门 > 财务部">
-  zhao.yu &gt; 公共部门 &gt; 财务部
-</Ellipsis>
-
-// 详情表格场景
-<Field orientation="horizontal" inputWidth="m">
-  <FieldLabel className="min-w-24 shrink-0 text-muted-foreground">备注</FieldLabel>
-  <Ellipsis className="flex-1 text-xs">{remark}</Ellipsis>
-</Field>
-```

package/src/components/ellipsis/ellipsis.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Ellipsis } from './ellipsis';
-
-const meta = {
-  title: 'Data Display / Ellipsis',
-  component: Ellipsis,
-  parameters: { layout: 'centered' },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Ellipsis>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** 单行截断 + 渐变遮罩 + 自动 tooltip(对齐规范 §八)。 */
-export const Default: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-48 rounded-md border border-border bg-card p-3">
-      <Ellipsis>
-        这是一段超长文本,容器宽度有限自动截断并右侧加渐变遮罩,hover 弹 tooltip 看全文
-      </Ellipsis>
-    </div>
-  ),
-};
-
-/** 不会溢出时,不挂 tooltip 也不显示渐变。 */
-export const NoOverflow: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-64 rounded-md border border-border bg-card p-3">
-      <Ellipsis>短文本不溢出</Ellipsis>
-    </div>
-  ),
-};
-
-/** 多行截断(`lines={2}`)。 */
-export const MultiLine: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-72 rounded-md border border-border bg-card p-3">
-      <Ellipsis lines={2}>
-        段落多行截断的示例文本。当容器宽度受限且文本超过指定行数时,剩余内容会被裁剪,
-        鼠标 hover 弹出完整内容。这是规范 §八 "内容显示不完全" 的标准做法之一。
-      </Ellipsis>
-    </div>
-  ),
-};
-
-/** 关闭渐变遮罩,仅保留 ellipsis。 */
-export const NoFade: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-48 rounded-md border border-border bg-card p-3">
-      <Ellipsis fade={false}>
-        这是一段超长文本,关闭渐变遮罩,仅保留省略号
-      </Ellipsis>
-    </div>
-  ),
-};
-
-/** 显式 tooltip 内容(JSX children 场景)。 */
-export const CustomTooltip: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-48 rounded-md border border-border bg-card p-3">
-      <Ellipsis tooltip="完整路径:zhao.yu > 公共部门 > 财务部">
-        zhao.yu &gt; 公共部门 &gt; 财务部
-      </Ellipsis>
-    </div>
-  ),
-};

package/src/components/ellipsis/ellipsis.tsx

@@ -1,153 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-import {
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-} from '@/components/tooltip/tooltip';
-
-export interface EllipsisProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'title'> {
-  /**
-   * 超长时显示的 tooltip 文本 — 不传时自动用 children 的纯文本(优先)或 `title` 属性。
-   * 显示规则:仅当实际渲染时检测到溢出(scrollWidth > clientWidth 或 scrollHeight > clientHeight)才挂载 Tooltip。
-   */
-  tooltip?: React.ReactNode;
-  /**
-   * 多行截断行数。传入数字 >1 时走 `-webkit-line-clamp` 多行模式;否则单行 truncate。
-   * @default 1
-   */
-  lines?: number;
-  /**
-   * 是否在文本右侧叠加渐变遮罩(对齐《Teamix UI 表单设计规范》§八 "截断 + 渐变遮罩 + hover tooltip 三件套")。
-   * 默认开启;在容器无溢出时 mask 自动隐藏(scrollWidth ≤ clientWidth)。
-   * @default true
-   */
-  fade?: boolean;
-  /**
-   * Tooltip 弹出方向。
-   * @default 'top'
-   */
-  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
-}
-
-/**
- * `Ellipsis` 单行 / 多行文本截断 + 渐变遮罩 + 溢出时自动 tooltip 提示。
- *
- * 对齐《Teamix UI 表单设计规范》§八 "内容显示不完全 — 截断 + 渐变遮罩 + hover tooltip 三件套"。
- *
- * @example
- * <Ellipsis>这一段超长文本会自动截断、右侧带渐变遮罩,hover 弹 tooltip 看全文</Ellipsis>
- *
- * @example // 多行
- * <Ellipsis lines={2}>...</Ellipsis>
- *
- * @example // 显式 tooltip 内容
- * <Ellipsis tooltip="完整内容...">概要</Ellipsis>
- */
-const Ellipsis = React.forwardRef<HTMLSpanElement, EllipsisProps>(
-  (
-    {
-      children,
-      tooltip,
-      lines = 1,
-      fade = true,
-      tooltipSide = 'top',
-      className,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const innerRef = React.useRef<HTMLSpanElement | null>(null);
-    const [overflowing, setOverflowing] = React.useState(false);
-
-    // 把外部 ref 与内部 ref 合并
-    const setRef = React.useCallback(
-      (node: HTMLSpanElement | null) => {
-        innerRef.current = node;
-        if (typeof ref === 'function') ref(node);
-        else if (ref) (ref as React.MutableRefObject<HTMLSpanElement | null>).current = node;
-      },
-      [ref],
-    );
-
-    // 监听容器尺寸变化,实时计算是否溢出
-    React.useEffect(() => {
-      const el = innerRef.current;
-      if (!el) return;
-      const check = () => {
-        setOverflowing(
-          el.scrollWidth > el.clientWidth ||
-            el.scrollHeight > el.clientHeight,
-        );
-      };
-      check();
-      const ro = new ResizeObserver(check);
-      ro.observe(el);
-      return () => ro.disconnect();
-    }, [children, lines]);
-
-    const isMulti = lines > 1;
-
-    const baseStyle: React.CSSProperties = isMulti
-      ? {
-          display: '-webkit-box',
-          WebkitLineClamp: lines,
-          WebkitBoxOrient: 'vertical',
-          overflow: 'hidden',
-        }
-      : {
-          display: 'block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-        };
-
-    // 渐变遮罩:仅在溢出时挂(避免短文本也带 mask)。
-    // mask 只用 alpha 通道,颜色字面量 black 是 CSS 关键字、非语义色,等价于 alpha=1。
-    const fadeStyle: React.CSSProperties =
-      fade && overflowing
-        ? {
-            maskImage:
-              'linear-gradient(to right, black calc(100% - 2rem), transparent)',
-            WebkitMaskImage:
-              'linear-gradient(to right, black calc(100% - 2rem), transparent)',
-          }
-        : {};
-
-    const node = (
-      <span
-        ref={setRef}
-        data-overflowing={overflowing ? '' : undefined}
-        style={{ ...baseStyle, ...fadeStyle, ...style }}
-        className={cn('min-w-0 max-w-full', className)}
-        {...props}
-      >
-        {children}
-      </span>
-    );
-
-    if (!overflowing) return node;
-
-    const tooltipBody = tooltip ?? children;
-
-    return (
-      <TooltipProvider delayDuration={200}>
-        <TooltipRoot>
-          <TooltipTrigger asChild>{node}</TooltipTrigger>
-          <TooltipContent side={tooltipSide}>
-            <div className="max-w-xs whitespace-normal break-words text-xs">
-              {tooltipBody}
-            </div>
-          </TooltipContent>
-        </TooltipRoot>
-      </TooltipProvider>
-    );
-  },
-);
-Ellipsis.displayName = 'Ellipsis';
-
-export { Ellipsis };

package/src/components/empty/empty.meta.md

@@ -1,86 +0,0 @@
----
-id: empty
-name: Empty
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 空状态
----
-
-# Empty 空状态
-
-空状态 — antd 独有补足。**列表 / 表格 / 搜索结果为空**时的占位提示,提供引导动作鼓励用户创建首条数据。
-
-## When to use
-
-- 列表 / 表格无数据
-- 搜索结果为空
-- 收件箱 / 通知 / 任务首次访问无内容
-
-## When NOT to use
-
-- 加载中 → `Skeleton`
-- 错误 / 失败 → `Result` 或 `Alert`
-- 表单字段空 → 直接 placeholder
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `image` | `React.ReactNode` | – | – | 自定义图标(覆盖默认 Inbox)。 |
-| `description` | `React.ReactNode` | `"暂无数据"` | – | 描述文本。 |
-| `extra` | `React.ReactNode` | – | – | 操作区(放 Button 引导用户创建首条数据)。 |
-| `size` | `'sm' \| 'md' \| 'default'` | `"default"` | – | 尺寸 — `sm` 用于卡片内 / 表格空态;`default` 用于整区。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add empty` 时,以下 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 生成纪律
-
-- **`description` 引导而非陈述**:"暂无数据" 是最朴素的;有创建动作时改成"还没有项目,点击下方新建"
-- **`extra` 必有时配主操作**:Empty 不只是装饰,要给"接下来做什么"
-- **`size="sm"` 在卡片 / 表格内**:不要让 Empty 撑爆容器
-- **不嵌套 Empty**:嵌套占位是反模式
-
-## Examples
-
-```tsx
-import { Empty } from '@/components/ui/empty';
-import { Button } from '@/components/ui/button';
-import { Plus } from 'lucide-react';
-
-// 基础
-<Empty />
-
-// 带描述 + 操作
-<Empty
-  description="还没有项目"
-  extra={<Button icon={<Plus />}>创建项目</Button>}
-/>
-
-// 表格内空态
-<Empty size="sm" description="无匹配的搜索结果" />
-
-// 自定义图标
-<Empty image={<Mailbox className="size-16" />} description="收件箱空空" />
-```

package/src/components/empty/empty.stories.tsx

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Plus } from 'lucide-react';
-import { Empty } from './empty';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof Empty> = {
-  title: '数据展示 · Data Display/Empty',
-  component: Empty,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '空状态 — 列表 / 表格 / 搜索结果为空时的占位提示。提供 description 引导文案 + extra 主操作，鼓励用户创建首条数据。等价 antd Empty。',
-      },
-    },
-  },
-  argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'default'] },
-  },
-  args: { size: 'default' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Empty>;
-
-export const Default: Story = {};
-
-export const WithAction: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Empty
-      description="还没有项目"
-      extra={<Button icon={<Plus />}>创建项目</Button>}
-    />
-  ),
-};
-
-export const Small: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="rounded-md border border-border">
-      <Empty size="sm" description="无匹配的搜索结果" />
-    </div>
-  ),
-};