@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/badge/badge.tsx

@@ -1,204 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-        success:
-          'border-transparent bg-success text-success-foreground hover:bg-success/80',
-        warning:
-          'border-transparent bg-warning text-warning-foreground hover:bg-warning/80',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const statusDotClasses: Record<BadgeStatus, string> = {
-  default: 'bg-muted-foreground',
-  success: 'bg-success',
-  processing: 'bg-info',
-  error: 'bg-destructive',
-  warning: 'bg-warning',
-};
-
-export type BadgeStatus =
-  | 'default'
-  | 'success'
-  | 'processing'
-  | 'error'
-  | 'warning';
-
-export interface BadgeProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
-    VariantProps<typeof badgeVariants> {
-  /**
-   * 视觉风格;`default / secondary / destructive / outline` 来自 shadcn,
-   * `success / warning` 来自 antd 状态色补足。
-   * @default "default"
-   */
-  variant?:
-    | 'default'
-    | 'secondary'
-    | 'destructive'
-    | 'outline'
-    | 'success'
-    | 'warning';
-  /**
-   * 数字徽标内容。配合 `children` 时,数字气泡浮在右上角(包裹模式);
-   * 无 `children` 时,渲染为独立小气泡(standalone 模式)。
-   * `0` 默认不显示,需配 `showZero`。
-   */
-  count?: number;
-  /**
-   * 数字超过此值时显示 `${overflowCount}+`。仅在有 `count` 时生效。
-   * @default 99
-   */
-  overflowCount?: number;
-  /**
-   * `true` 时即使 `count === 0` 也显示气泡。
-   * @default false
-   */
-  showZero?: boolean;
-  /**
-   * `true` 时渲染为纯红点(无文字)。配合 `children` 时浮在右上角。
-   * `dot` 与 `count` 同时存在,`dot` 优先。
-   * @default false
-   */
-  dot?: boolean;
-  /**
-   * 状态点 + 文字(`<dot> <text>` 行内组合),用于"运行中 / 已停止"等状态描述。
-   * 必须与 `children` 互斥使用 — 这是 standalone 状态条形态。
-   */
-  status?: BadgeStatus;
-  /**
-   * 配合 `status` 使用,渲染在状态点右侧。无 `status` 时忽略。
-   */
-  text?: React.ReactNode;
-  /** 被包裹的元素(包裹模式)或徽标文本内容(standalone 文本模式)。 */
-  children?: React.ReactNode;
-}
-
-const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  (
-    {
-      className,
-      variant,
-      count,
-      overflowCount = 99,
-      showZero = false,
-      dot = false,
-      status,
-      text,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    // ── Standalone status mode: <dot> + <text> ────────────────────────────────
-    if (status) {
-      return (
-        <span
-          ref={ref}
-          className={cn('inline-flex items-center gap-2 text-xs', className)}
-          {...props}
-        >
-          <span
-            className={cn(
-              'inline-block size-2 rounded-full',
-              statusDotClasses[status],
-            )}
-            aria-hidden="true"
-          />
-          {text != null ? <span>{text}</span> : null}
-        </span>
-      );
-    }
-
-    const hasNumeric = count !== undefined;
-    const shouldShowCount = hasNumeric && (count !== 0 || showZero);
-    const display =
-      hasNumeric && count! > overflowCount ? `${overflowCount}+` : count;
-
-    // ── Wrapped mode: badge floats on top-right of children ───────────────────
-    if (children !== undefined && (dot || shouldShowCount)) {
-      return (
-        <span
-          ref={ref}
-          className={cn('relative inline-flex shrink-0', className)}
-          {...props}
-        >
-          {children}
-          {dot ? (
-            <span
-              className="absolute right-0 top-0 size-2 -translate-y-1/2 translate-x-1/2 rounded-full bg-destructive ring-2 ring-background"
-              aria-hidden="true"
-            />
-          ) : (
-            <span className="absolute right-0 top-0 inline-flex h-5 min-w-counter -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full bg-destructive px-1.5 text-xs font-semibold leading-none text-destructive-foreground ring-2 ring-background">
-              {display}
-            </span>
-          )}
-        </span>
-      );
-    }
-
-    // ── Standalone dot ────────────────────────────────────────────────────────
-    if (dot) {
-      return (
-        <span
-          ref={ref}
-          className={cn(
-            'inline-block size-2 rounded-full bg-destructive',
-            className,
-          )}
-          aria-hidden="true"
-          {...props}
-        />
-      );
-    }
-
-    // ── Standalone numeric badge ──────────────────────────────────────────────
-    if (shouldShowCount) {
-      return (
-        <span
-          ref={ref}
-          className={cn(
-            'inline-flex h-5 min-w-counter items-center justify-center rounded-full bg-destructive px-1.5 text-xs font-semibold leading-none text-destructive-foreground',
-            className,
-          )}
-          {...props}
-        >
-          {display}
-        </span>
-      );
-    }
-
-    // ── shadcn-style text badge (default mode) ────────────────────────────────
-    return (
-      <span
-        ref={ref}
-        className={cn(badgeVariants({ variant }), className)}
-        {...props}
-      >
-        {children}
-      </span>
-    );
-  },
-);
-Badge.displayName = 'Badge';
-
-export { Badge, badgeVariants };

package/src/components/breadcrumb/breadcrumb.meta.md

@@ -1,127 +0,0 @@
----
-id: breadcrumb
-name: Breadcrumb
-displayName: 面包屑
-type: component
-category: navigation
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Breadcrumb 面包屑
-
-在多层级页面中显示当前位置并提供回溯路径。默认分隔符 lucide `ChevronRight`,字号 `text-sm`,普通项 `text-muted-foreground` / 当前项 `text-foreground` / 链接 hover 升至 `text-foreground`,能力 = shadcn 原子 ∪ antd `separator`,不收 antd `routes` / `itemRender`。
-
-**与 antd Breadcrumb 的差异**:antd 用 `routes` 数组配置;本组件走 shadcn 的**组合式**(每项手写 `<BreadcrumbItem>`),配 React Router / Next.js Link 时更灵活。
-
-## When to use
-
-- 多层级页面的当前位置导航(项目 / 资源 / 详情)
-- 文件系统 / 树形结构当前路径
-- 表单分步流程的位置提示
-
-## When NOT to use
-
-- 平级 tab → `Tabs`
-- 步骤流程 → `Steps`(v0.x)
-- 仅一级 → 不需要 Breadcrumb
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `separator` | `React.ReactNode` | `<ChevronRight />` | – | 自定义全局分隔符(antd `separator` 并集)。仅作类型层占位 — 实际渲染由 `<BreadcrumbSeparator>` 控制,默认 lucide `ChevronRight`, 通过 `<BreadcrumbSeparator>{节点}</BreadcrumbSeparator>` 覆盖单个分隔符。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add breadcrumb` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-slot@^1.1.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **默认分隔符是箭头**(`ChevronRight`),不要手写 `/` / `>` / `·` 字符 — 需覆盖时传入 `<BreadcrumbSeparator>{customNode}</BreadcrumbSeparator>`
-- **字号走 token**:所有项默认 `text-sm`(14px),不要在业务层覆写 `text-base` / `text-xs`,跨面包屑不一致会破坏顶部导航识别度
-- **颜色走 semantic**:普通项 `text-muted-foreground` / 当前项 `text-foreground` / 链接 hover 升至 `text-foreground`。不要用 `text-primary` / `text-blue-*` 手动上色
-- **当前页用 `BreadcrumbPage`**,不是 `BreadcrumbLink`(语义 + 视觉都不同)
-- **配路由用 `asChild`**:`<BreadcrumbLink asChild><Link to="/x">...</Link></BreadcrumbLink>`
-- **每两项之间必有 Separator**:不要手写文本分隔
-- **过长路径用 Ellipsis**:超过 4 级时中间收成 `<BreadcrumbEllipsis />`(可配 DropdownMenu 展开完整列表)
-- **路径文字简短**:每段 ≤ 6 字 / 12 字符,过长导致换行视觉破碎
-
-## Breadcrumb 形态 — 旧库 API → 新库映射
-
-旧库(Teamix 1.0 / `@alifd/next`)走数据驱动的 `Breadcrumb.Item` + `maxNode`,新库走 shadcn 的**纯组合**(`BreadcrumbList` / `BreadcrumbItem` / `BreadcrumbLink` / `BreadcrumbPage` / `BreadcrumbSeparator` / `BreadcrumbEllipsis`)。下表给出旧库 API 到新库写法的逐项映射。
-
-| 旧库 API | 新库写法 | 备注 |
-| --- | --- | --- |
-| `<Breadcrumb>` 容器 | `<Breadcrumb><BreadcrumbList>...</BreadcrumbList></Breadcrumb>` | 容器 + List 双层是 `nav > ol` 语义,无障碍更准 |
-| `<Breadcrumb.Item link="/x">label</Breadcrumb.Item>` | `<BreadcrumbItem><BreadcrumbLink href="/x">label</BreadcrumbLink></BreadcrumbItem>` | Item 与 Link 拆开,Link 可单独控制 hover / focus 样式 |
-| 末项(当前页) | `<BreadcrumbItem><BreadcrumbPage>label</BreadcrumbPage></BreadcrumbItem>` | `aria-current="page"` 自动注入 |
-| `separator="/"` | `<BreadcrumbSeparator>{customNode}</BreadcrumbSeparator>` | 默认 lucide `ChevronRight`,组件化覆盖更可控 |
-| `maxNode={3}` 自动折叠 | 业务自切片 + `<BreadcrumbEllipsis />` 配 `<DropdownMenu>` 弹出 | 见 `MaxNodeCollapse` Story —— 折叠 UI 完全由你控制(Dropdown / Tooltip / Popover 任选) |
-| `showHiddenItems` 弹层展开 | 同上,用 `<DropdownMenu>` 触发器包 `<BreadcrumbEllipsis />` | — |
-| `popupContainer` / `popupProps` | DropdownMenu 自身的 `modal` / `onOpenChange` | 弹层细节转交 DropdownMenu |
-| `component="span"` 自定义根标签 | 不修复 — 固定 `<nav>`(无障碍语义) | — |
-| `prefix` CSS 前缀 | 不修复 — Tailwind 无 CSS prefix 概念 | — |
-| 路由集成 | `<BreadcrumbLink asChild><Link to="/x">...</Link></BreadcrumbLink>` | shadcn 的 `asChild`(Slot),适配任意路由组件 |
-
-## Examples
-
-```tsx
-import {
-  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink,
-  BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis,
-} from '@/components/ui/breadcrumb';
-
-// 基本
-<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">首页</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/projects">项目</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbPage>运营后台</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>
-
-// 自定义 Separator
-<BreadcrumbSeparator>/</BreadcrumbSeparator>
-
-// 长路径折叠
-<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem><BreadcrumbLink href="/">首页</BreadcrumbLink></BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem><BreadcrumbPage>当前页</BreadcrumbPage></BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>
-```

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -1,207 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Slash } from 'lucide-react';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './breadcrumb';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/dropdown-menu/dropdown-menu';
-
-const meta: Meta<typeof Breadcrumb> = {
-  title: '导航 · Navigation/Breadcrumb',
-  component: Breadcrumb,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '面包屑 —— 在多层级页面中显示当前位置并提供回溯路径。shadcn 纯组合原子(`Breadcrumb` / `BreadcrumbList` / `BreadcrumbItem` / `BreadcrumbLink` / `BreadcrumbPage` / `BreadcrumbSeparator` / `BreadcrumbEllipsis`) + 对齐 antd `Breadcrumb` 的 `separator` 自定义并集,差异点是不收 antd `routes` / `itemRender` 数组式 API,改走 children 组合 + `asChild` 适配 React Router / Next.js `<Link>`:`asChild`、`separator`(默认 `ChevronRight`)、`BreadcrumbEllipsis` 折叠。视觉走 OpenTrek semantic tokens,字号 `text-sm`、普通项 `text-muted-foreground`、当前项 `text-foreground`、链接 hover 升至 `text-foreground`,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Breadcrumb>;
-
-export const Default: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">首页</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/projects">项目</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>运营后台</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-export const CustomSeparator: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '通过 `<BreadcrumbSeparator>` 的 children 覆盖默认 `ChevronRight`,可换为 `Slash` / 文字 / 任意 ReactNode。',
-      },
-    },
-  },
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">首页</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/projects">项目</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <span>·</span>
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>当前页</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-export const Collapsed: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '层级超过 4 级时使用 `<BreadcrumbEllipsis />` 折叠中间项,避免横向空间撑爆;可叠加 `DropdownMenu` 在悬停时展开完整路径。',
-      },
-    },
-  },
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">首页</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/services">服务</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>详情</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-export const MaxNodeCollapse: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '对齐旧库 `maxNode` 自动折叠能力 — 把 `<BreadcrumbEllipsis />` 包到 `<DropdownMenu>` 触发器里,点击 `…` 弹出被折叠层级列表(单击跳转)。组合优于专门 prop:可任意控制弹层位置 / 触发方式 / 自定义弹出 UI。',
-      },
-    },
-  },
-  render: () => {
-    const all = [
-      { label: '首页', href: '/' },
-      { label: 'Whatever', href: '/whatever' },
-      { label: 'All Categories', href: '/all' },
-      { label: "Women's Clothing", href: '/women' },
-      { label: 'Blouses & Shirts', href: '/blouses' },
-    ];
-    const head = all[0]!;
-    const middle = all.slice(1, -1);
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink href={head.href}>{head.label}</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                aria-label="展开折叠层级"
-                className="rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-              >
-                <BreadcrumbEllipsis />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
-                {middle.map((it) => (
-                  <DropdownMenuItem key={it.href} asChild>
-                    <a href={it.href}>{it.label}</a>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>T-shirts</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    );
-  },
-};
-
-export const WithRouterLink: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '通过 `asChild` 把 `BreadcrumbLink` 替换为路由组件(此处用 `<a>` 演示),保持视觉与无障碍语义一致。',
-      },
-    },
-  },
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <a href="/">首页</a>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <a href="/orgs">组织</a>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>成员管理</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
-  /**
-   * 自定义全局分隔符(antd `separator` 并集)。仅作类型层占位 —
-   * 实际渲染由 `<BreadcrumbSeparator>` 控制,默认 lucide `ChevronRight`,
-   * 通过 `<BreadcrumbSeparator>{节点}</BreadcrumbSeparator>` 覆盖单个分隔符。
-   * @default <ChevronRight />
-   */
-  separator?: React.ReactNode;
-}
-
-const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  // separator 仅作 API 占位,不下传到 DOM,避免触发未知属性警告。
-  ({ separator: _separator, ...props }, ref) => (
-    <nav ref={ref} aria-label="breadcrumb" {...props} />
-  ),
-);
-Breadcrumb.displayName = 'Breadcrumb';
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<'ol'>
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      'flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground sm:gap-2.5',
-      className,
-    )}
-    {...props}
-  />
-));
-BreadcrumbList.displayName = 'BreadcrumbList';
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<'li'>
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn('inline-flex items-center gap-1.5', className)}
-    {...props}
-  />
-));
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-
-export interface BreadcrumbLinkProps
-  extends React.ComponentPropsWithoutRef<'a'> {
-  /**
-   * 用 Slot 渲染为子元素(常配合 React Router `<Link>` / Next.js `<Link>`)。
-   * @default false
-   */
-  asChild?: boolean;
-}
-
-const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-  ({ asChild, className, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'a';
-    return (
-      <Comp
-        ref={ref}
-        className={cn(
-          'text-xs text-muted-foreground transition-colors hover:text-foreground',
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-BreadcrumbLink.displayName = 'BreadcrumbLink';
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<'span'>
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn('text-xs font-normal text-foreground', className)}
-    {...props}
-  />
-));
-BreadcrumbPage.displayName = 'BreadcrumbPage';
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'li'>) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn(
-      'inline-flex items-center text-muted-foreground [&>svg]:size-3.5',
-      className,
-    )}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn('flex size-9 items-center justify-center', className)}
-    {...props}
-  >
-    <MoreHorizontal className="size-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};