@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/alert-dialog/alert-dialog.tsx

@@ -1,183 +0,0 @@
-import * as React from 'react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/components/button/button';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogTrigger = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Trigger
-    ref={ref}
-    className={cn('cursor-pointer', className)}
-    {...props}
-  />
-));
-AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-/**
- * AlertDialog content 变体 — 与 Dialog 保持同源视觉。
- * - 圆角 `--radius-dialog`(16px)
- * - 无 border,纯白 + shadow 作为视觉分界
- * - size 绑定 `--layout-dialog-{sm|md|lg|xl}` tokens(确认类默认 `sm`,更紧凑)
- */
-const alertDialogContentVariants = cva(
-  'fixed left-1/2 top-1/2 z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-6 shadow-lg duration-200 rounded-[var(--radius-dialog)] 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',
-  {
-    variants: {
-      size: {
-        sm: 'max-w-[var(--layout-dialog-sm)]',
-        md: 'max-w-[var(--layout-dialog-md)]',
-        lg: 'max-w-[var(--layout-dialog-lg)]',
-        xl: 'max-w-[var(--layout-dialog-xl)]',
-      },
-    },
-    defaultVariants: { size: 'sm' },
-  },
-);
-
-export type AlertDialogSize = NonNullable<
-  VariantProps<typeof alertDialogContentVariants>['size']
->;
-
-export interface AlertDialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,
-    VariantProps<typeof alertDialogContentVariants> {
-  /**
-   * 确认对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm|md|lg|xl}`。
-   * OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。
-   * 确认场景文案短、信息少,默认 `sm`。
-   * @default "sm"
-   */
-  size?: AlertDialogSize;
-}
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  AlertDialogContentProps
->(({ className, size = 'sm', ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      data-slot="dialog-content"
-      className={cn(alertDialogContentVariants({ size }), className)}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2',
-      className,
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    data-slot="dialog-title"
-    className={cn('text-lg font-semibold', className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-xs text-muted-foreground', className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      className,
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-  alertDialogContentVariants,
-};

package/src/components/anchor/anchor.meta.md

@@ -1,92 +0,0 @@
----
-id: anchor
-name: Anchor
-displayName: 锚点
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Anchor 锚点
-
-锚点导航 — antd 独有补足。**等价 antd `Anchor`**。长文档 / 详情页侧边的目录,点击锚点滚动到对应 `id` 节点,滚动时自动高亮当前可见的锚点(IntersectionObserver)。支持嵌套两层缩进。
-
-## When to use
-
-- 文档 / 帮助页 / 设置页的侧边目录
-- 长详情页(订单 / 用户 / 商品)的快捷跳转
-- 协议 / 隐私政策的章节导航
-
-## When NOT to use
-
-- 单页应用路由跳转 → `Link` / 路由库
-- 主导航(顶部 / 侧栏菜单)→ `NavigationMenu` / `Sidebar`
-- 步骤导航(顺序操作)→ `Steps`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `items` | `AnchorItem[]` | – | ✓ | 锚点项树(antd `items` 并集)。 |
-| `offsetTop` | `number` | `0` | – | 当目标元素距视口顶部小于此值时高亮(IntersectionObserver `rootMargin`)。 |
-| `scrollBehavior` | `'smooth' \| 'auto'` | `"smooth"` | – | 点击锚点平滑滚动行为。 |
-| `onChange` | `(key: string) => void` | – | – | 当前高亮变化回调。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add anchor` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **必须给目标节点设 `id`** — Anchor 用 `document.getElementById(key)` 找元素;**不要**用 `data-*` 或 React ref
-- **`offsetTop` 与你的 Header 高度对齐** — 否则点击锚点后内容会被 header 遮挡
-- **`scrollBehavior="smooth"` 默认开** — 受用户系统 `prefers-reduced-motion` 影响,无需手动判断
-- **嵌套 ≤ 2 层** — 3 层以上侧栏拥挤;深结构改用 Tree 或折叠
-- **不要给 Anchor 包 Affix** — 直接 Tailwind `sticky top-N` 更轻
-- **`onChange`** 是只读回调(同步状态到 URL hash 等),**不要**在里面再调 scrollTo,会无限循环
-
-## Examples
-
-```tsx
-import { Anchor } from '@/components/ui/anchor';
-
-const items = [
-  { key: 'intro', title: '介绍' },
-  {
-    key: 'install',
-    title: '安装',
-    children: [
-      { key: 'npm', title: 'npm' },
-      { key: 'pnpm', title: 'pnpm' },
-    ],
-  },
-  { key: 'usage', title: '使用' },
-];
-
-<aside className="sticky top-16 w-56">
-  <Anchor items={items} offsetTop={64} />
-</aside>
-
-// 同步到 URL
-<Anchor
-  items={items}
-  onChange={(key) => {
-    window.history.replaceState(null, '', `#${key}`);
-  }}
-/>
-```

package/src/components/anchor/anchor.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Anchor } from './anchor';
-
-const meta: Meta<typeof Anchor> = {
-  title: '废弃 · Deprecated/Anchor',
-  component: Anchor,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n锚点导航 — 长文档 / 详情页侧边目录,点击滚动到 id 节点,滚动时 IntersectionObserver 自动高亮。等价 antd `Anchor`。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Anchor>;
-
-const items = [
-  { key: 'intro', title: '介绍' },
-  {
-    key: 'install',
-    title: '安装',
-    children: [
-      { key: 'npm', title: 'npm' },
-      { key: 'pnpm', title: 'pnpm' },
-      { key: 'yarn', title: 'yarn' },
-    ],
-  },
-  { key: 'usage', title: '使用' },
-  { key: 'faq', title: 'FAQ' },
-];
-
-export const Playground: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex gap-6">
-      <aside className="sticky top-0 h-fit w-44 shrink-0">
-        <Anchor items={items} offsetTop={20} />
-      </aside>
-      <article className="flex-1 space-y-12 text-sm">
-        <section id="intro">
-          <h2 className="mb-2 text-lg font-semibold">介绍</h2>
-          <p>{Array(8).fill('这是介绍段落。').join(' ')}</p>
-        </section>
-        <section id="install">
-          <h2 className="mb-2 text-lg font-semibold">安装</h2>
-          <section id="npm" className="mb-6">
-            <h3 className="mb-2 font-semibold">npm</h3>
-            <p>{Array(6).fill('npm install.').join(' ')}</p>
-          </section>
-          <section id="pnpm" className="mb-6">
-            <h3 className="mb-2 font-semibold">pnpm</h3>
-            <p>{Array(6).fill('pnpm add.').join(' ')}</p>
-          </section>
-          <section id="yarn">
-            <h3 className="mb-2 font-semibold">yarn</h3>
-            <p>{Array(6).fill('yarn add.').join(' ')}</p>
-          </section>
-        </section>
-        <section id="usage">
-          <h2 className="mb-2 text-lg font-semibold">使用</h2>
-          <p>{Array(10).fill('使用说明文字。').join(' ')}</p>
-        </section>
-        <section id="faq">
-          <h2 className="mb-2 text-lg font-semibold">FAQ</h2>
-          <p>{Array(10).fill('常见问题。').join(' ')}</p>
-        </section>
-      </article>
-    </div>
-  ),
-};

package/src/components/anchor/anchor.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-
-export interface AnchorItem {
-  /** 目标元素 id(组件会按 `#${id}` 滚动到该元素)。 */
-  key: string;
-  /** 显示文本。 */
-  title: React.ReactNode;
-  /** 子节点(渲染为嵌套缩进)。 */
-  children?: AnchorItem[];
-}
-
-export interface AnchorProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
-  /** 锚点项树(antd `items` 并集)。 */
-  items: AnchorItem[];
-  /**
-   * 当目标元素距视口顶部小于此值时高亮(IntersectionObserver `rootMargin`)。
-   * @default 0
-   */
-  offsetTop?: number;
-  /**
-   * 点击锚点平滑滚动行为。
-   * @default "smooth"
-   */
-  scrollBehavior?: 'smooth' | 'auto';
-  /** 当前高亮变化回调。 */
-  onChange?: (key: string) => void;
-}
-
-function flatten(items: AnchorItem[]): AnchorItem[] {
-  const out: AnchorItem[] = [];
-  const walk = (it: AnchorItem) => {
-    out.push(it);
-    it.children?.forEach(walk);
-  };
-  items.forEach(walk);
-  return out;
-}
-
-/**
- * 锚点导航 — antd 独有补足。**等价 antd `Anchor`**。长文档 / 详情页侧边的目录,
- * 点击锚点滚动到对应 `id` 节点,滚动时自动高亮当前可见的锚点(IntersectionObserver)。
- */
-const Anchor = React.forwardRef<HTMLElement, AnchorProps>(
-  (
-    {
-      items,
-      offsetTop = 0,
-      scrollBehavior = 'smooth',
-      onChange,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [active, setActive] = React.useState<string>('');
-    const flat = React.useMemo(() => flatten(items), [items]);
-
-    React.useEffect(() => {
-      if (typeof window === 'undefined') return;
-      const observer = new IntersectionObserver(
-        (entries) => {
-          const visible = entries.find((e) => e.isIntersecting);
-          if (visible) {
-            const id = visible.target.id;
-            setActive(id);
-            onChange?.(id);
-          }
-        },
-        {
-          rootMargin: `-${offsetTop}px 0px -50% 0px`,
-          threshold: 0,
-        },
-      );
-      flat.forEach((it) => {
-        const el = document.getElementById(it.key);
-        if (el) observer.observe(el);
-      });
-      return () => observer.disconnect();
-    }, [flat, offsetTop, onChange]);
-
-    const handleClick = (e: React.MouseEvent, key: string) => {
-      e.preventDefault();
-      const el = document.getElementById(key);
-      if (el) {
-        const top = el.getBoundingClientRect().top + window.scrollY - offsetTop;
-        window.scrollTo({ top, behavior: scrollBehavior });
-        setActive(key);
-        onChange?.(key);
-      }
-    };
-
-    const renderItem = (it: AnchorItem, depth: number): React.ReactNode => (
-      <li key={it.key}>
-        <a
-          href={`#${it.key}`}
-          onClick={(e) => handleClick(e, it.key)}
-          className={cn(
-            'block border-l-2 py-1 pr-2 text-xs transition-colors',
-            depth === 0 ? 'pl-3' : depth === 1 ? 'pl-6' : 'pl-9',
-            active === it.key
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground',
-          )}
-        >
-          {it.title}
-        </a>
-        {it.children && it.children.length > 0 ? (
-          <ul>{it.children.map((c) => renderItem(c, depth + 1))}</ul>
-        ) : null}
-      </li>
-    );
-
-    return (
-      <nav
-        ref={ref}
-        aria-label="目录"
-        className={cn('text-xs', className)}
-        {...props}
-      >
-        <ul>{items.map((it) => renderItem(it, 0))}</ul>
-      </nav>
-    );
-  },
-);
-Anchor.displayName = 'Anchor';
-
-export { Anchor };

package/src/components/app/app.meta.md

@@ -1,91 +0,0 @@
----
-id: app
-name: App
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 应用容器
----
-
-# App 应用容器
-
-应用根容器 — antd 独有补足。**对标 antd `App`** 的核心职责:挂全局 Toaster + 设置 dir / lang + 承载根级 className。**与 antd 区别**:不接管主题(本库主题靠 design tokens / CSS vars,**不引入 runtime ConfigProvider**),也不收敛 `useApp()` hook(toast / notification 直接 import 即可)。
-
-## When to use
-
-- 整个应用的最外层容器(`layout.tsx` / `_app.tsx` / `main.tsx` root)
-- 需要"挂一次 Toaster,后续到处 toast"的场景
-- 国际化需要 `dir="rtl"` 时
-
-## When NOT to use
-
-- 子页面层级容器 → 用 `Flex` / `Grid` / 普通 div
-- 需要 runtime 切换主题色 → 改 CSS variables(design tokens),**不要**通过 ConfigProvider
-- 单独需要 Toaster → 直接挂 `<Toaster />`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `withToaster` | `boolean` | `true` | – | 是否挂载 `<Toaster />`(antd `App` 内部托管 message / notification 静态实例) — 全应用根挂一次。 |
-| `toasterProps` | `ToasterProps` | – | – | 传递给 Toaster 的配置(位置 / 主题 / 自动关闭等) — 仅 `withToaster=true` 时生效。 |
-| `dir` | `'ltr' \| 'rtl'` | `"ltr"` | – | 文字方向 — 设到根容器的 `dir` 属性,Radix 等组件会自动适配。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add app` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器,面性 5 状态图标 + 无边框) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **整应用挂一次** — 子级别再嵌 `App` 会造成 Toaster 重复渲染
-- **不要把它当 Layout 用** — 它只是根 mount 点,真正的页面布局用 `Flex` / `Grid`
-- **`withToaster=false`** 仅当你已经在别处单独挂了 `<Toaster />` 时关闭,避免重复
-- **`dir="rtl"`** 仅在阿语 / 希伯来语等右到左语言场景设;Radix 组件已自动适配
-- **不要在 App 内做主题切换**:换 `class="dark"` 或写 CSS var 覆盖,**不要**走 React state
-
-## Examples
-
-```tsx
-import { App } from '@/components/ui/app';
-
-// 应用根
-function Root() {
-  return (
-    <App>
-      <Header />
-      <Main />
-      <Footer />
-    </App>
-  );
-}
-
-// 自定义 Toaster 位置
-<App toasterProps={{ position: 'top-center', richColors: true }}>
-  ...
-</App>
-
-// RTL
-<App dir="rtl">...</App>
-
-// 已自挂 Toaster
-<App withToaster={false}>
-  <Toaster position="bottom-right" />
-  ...
-</App>
-```

package/src/components/app/app.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { App } from './app';
-import { Button } from '@/components/button/button';
-import { toast } from '@/components/sonner/sonner';
-import { notification } from '@/components/notification/notification';
-
-const meta: Meta<typeof App> = {
-  title: '废弃 · Deprecated/App',
-  component: App,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n应用根容器 — 挂全局 Toaster + 设置 dir / lang + 承载根级 className。对标 antd `App`，但不接管主题（主题靠 design tokens / CSS vars），也不收敛 useApp() hook。',
-      },
-    },
-  },
-  argTypes: {
-    withToaster: { control: 'boolean' },
-    dir: { control: 'inline-radio', options: ['ltr', 'rtl'] },
-  },
-  args: { withToaster: true, dir: 'ltr' },
-};
-
-export default meta;
-type Story = StoryObj<typeof App>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <App {...args} className="rounded-md border border-border p-6">
-      <div className="flex flex-col gap-3">
-        <span className="text-sm text-muted-foreground">
-          App 内挂载了 Toaster,可直接触发:
-        </span>
-        <div className="flex gap-2">
-          <Button onClick={() => toast.success('已保存')}>触发 toast</Button>
-          <Button
-            variant="outline"
-            onClick={() =>
-              notification.primary({
-                title: 'App 容器在生效',
-                description: '右上角 Toaster 是 App 默认挂载的',
-              })
-            }
-          >
-            触发 notification
-          </Button>
-        </div>
-      </div>
-    </App>
-  ),
-};
-
-export const RTL: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <App dir="rtl" className="rounded-md border border-border p-6">
-      <div className="text-sm">
-        当前方向: <strong>rtl</strong> — 你会看到自然的右到左流向
-      </div>
-    </App>
-  ),
-};

package/src/components/app/app.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-import { Toaster, type ToasterProps } from '@/components/sonner/sonner';
-
-export interface AppProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 是否挂载 `<Toaster />`(antd `App` 内部托管 message / notification 静态实例) — 全应用根挂一次。
-   * @default true
-   */
-  withToaster?: boolean;
-  /**
-   * 传递给 Toaster 的配置(位置 / 主题 / 自动关闭等) — 仅 `withToaster=true` 时生效。
-   */
-  toasterProps?: ToasterProps;
-  /**
-   * 文字方向 — 设到根容器的 `dir` 属性,Radix 等组件会自动适配。
-   * @default "ltr"
-   */
-  dir?: 'ltr' | 'rtl';
-}
-
-/**
- * 应用根容器 — antd 独有补足。**对标 antd `App`** 的核心职责:
- *   - **挂载全局 Toaster**(后续 toast / notification 静态调用的渲染层)
- *   - **设置 dir / lang** 等顶层属性
- *   - **承载根级 className**(让业务侧把 design tokens 挂到这一层即可)
- *
- * 与 antd 区别:
- *   - 不接管主题(本库主题靠 design tokens / CSS vars,**不引入 runtime ConfigProvider**)
- *   - 不收敛 `useApp()` hook 提供 message/notification(直接 import `toast` / `notification` 即可)
- */
-const App = React.forwardRef<HTMLDivElement, AppProps>(
-  (
-    {
-      withToaster = true,
-      toasterProps,
-      dir = 'ltr',
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => (
-    <div
-      ref={ref}
-      dir={dir}
-      className={cn('min-h-screen bg-background text-foreground', className)}
-      {...props}
-    >
-      {children}
-      {withToaster ? <Toaster {...toasterProps} /> : null}
-    </div>
-  ),
-);
-App.displayName = 'App';
-
-export { App };