@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/sheet/sheet.tsx

@@ -1,226 +0,0 @@
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-const Sheet = SheetPrimitive.Root;
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetTrigger = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Trigger
-    ref={ref}
-    className={cn('cursor-pointer', className)}
-    {...props}
-  />
-));
-SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
-
-const SheetClose = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Close>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Close
-    ref={ref}
-    className={cn('cursor-pointer', className)}
-    {...props}
-  />
-));
-SheetClose.displayName = SheetPrimitive.Close.displayName;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.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}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-/**
- * Sheet content 变体。
- * - 圆角统一绑定 `--radius-dialog`(16px,OpenTrek),按 side 方向仅在内侧施加
- * - size 绑定 `--layout-dialog-{sm|md|lg|xl}` tokens
- * - 去掉 border,使用 shadow 作为视觉分界
- */
-const sheetContentVariants = cva(
-  'fixed z-50 flex flex-col bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 rounded-b-[var(--radius-dialog)] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 rounded-t-[var(--radius-dialog)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full rounded-r-[var(--radius-dialog)] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
-        right:
-          'inset-y-0 right-0 h-full rounded-l-[var(--radius-dialog)] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
-      },
-      size: {
-        sm: 'w-[var(--layout-dialog-sm)]',
-        md: 'w-[var(--layout-dialog-md)]',
-        lg: 'w-[var(--layout-dialog-lg)]',
-        xl: 'w-[var(--layout-dialog-xl)]',
-      },
-    },
-    compoundVariants: [
-      // top/bottom sides ignore width-based size — use height or auto
-      { side: 'top', size: 'sm', className: 'w-auto' },
-      { side: 'top', size: 'md', className: 'w-auto' },
-      { side: 'top', size: 'lg', className: 'w-auto' },
-      { side: 'top', size: 'xl', className: 'w-auto' },
-      { side: 'bottom', size: 'sm', className: 'w-auto' },
-      { side: 'bottom', size: 'md', className: 'w-auto' },
-      { side: 'bottom', size: 'lg', className: 'w-auto' },
-      { side: 'bottom', size: 'xl', className: 'w-auto' },
-    ],
-    defaultVariants: { side: 'right', size: 'md' },
-  },
-);
-
-export type SheetSize = NonNullable<
-  VariantProps<typeof sheetContentVariants>['size']
->;
-
-export interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetContentVariants> {
-  /**
-   * 弹出方向(antd Drawer `placement` 并集)。
-   * @default "right"
-   */
-  side?: 'top' | 'right' | 'bottom' | 'left';
-  /**
-   * 面板尺寸 — 绑定 design tokens `--layout-dialog-{sm|md|lg|xl}`。
-   * 仅在 side=left/right 时生效(控制宽度)。
-   * @default "md"
-   */
-  size?: SheetSize;
-  /**
-   * 是否在标题区右侧显示默认关闭按钮。
-   * 若使用 SheetHeader 的内置 close 布局,可设为 false 自行控制。
-   * @default true
-   */
-  showClose?: boolean;
-}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(
-  (
-    {
-      side = 'right',
-      size = 'md',
-      showClose = true,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        ref={ref}
-        data-slot="sheet-content"
-        className={cn(sheetContentVariants({ side, size }), className)}
-        {...props}
-      >
-        {children}
-        {showClose ? (
-          <SheetPrimitive.Close className="absolute right-4 top-4 inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-70 ring-offset-background transition-opacity hover:bg-accent hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none">
-            <X className="size-4" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        ) : null}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  ),
-);
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex items-center justify-between border-b border-border px-6 py-4',
-      className,
-    )}
-    {...props}
-  />
-);
-SheetHeader.displayName = 'SheetHeader';
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex items-center justify-end gap-2 border-t border-border px-6 py-4',
-      className,
-    )}
-    {...props}
-  />
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetBody = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex-1 overflow-auto px-6 py-4', className)} {...props} />
-);
-SheetBody.displayName = 'SheetBody';
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    data-slot="sheet-title"
-    className={cn('text-lg font-semibold text-foreground', className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-xs text-muted-foreground', className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetBody,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-  sheetContentVariants,
-};

package/src/components/sidebar/sidebar.meta.md

@@ -1,151 +0,0 @@
----
-id: sidebar
-name: Sidebar
-displayName: 侧边栏
-type: component
-category: layout
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Sidebar 侧边栏
-
-侧边导航栏 — shadcn 完整版 25 primitives 复合,**对应 antd `Layout.Sider + Menu` + 移动端 `Drawer`**。
-
-**已含**:Provider(open 受控/cookie 持久化/Cmd+B 快捷键/mobile 自动切 Sheet)、Sidebar(`variant=sidebar|floating|inset` × `side=left|right` × `collapsible=offcanvas|icon|none`)、Trigger / Rail / Inset / Input、Header / Footer / Separator / Content、Group / GroupLabel / GroupAction / GroupContent、Menu / MenuItem / MenuButton(cva variant+size + 折叠态自动 Tooltip)/ MenuAction / MenuBadge / MenuSkeleton、MenuSub / MenuSubItem / MenuSubButton。
-
-## When to use
-
-- 后台管理系统的侧边导航(项目列表 / 资源类目)
-- 文档站 / 编辑器的侧边目录
-- 多模块切换(配 SidebarMenuButton 的 isActive)
-
-## When NOT to use
-
-- 顶部导航 → `NavigationMenu` / `Menubar`
-- 临时面板 → `Sheet` / `Drawer`
-- 单层简单菜单 → `Tabs`(垂直 orientation)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `Sidebar` 主容器 props。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `side` | `'left' \| 'right'` | – | – | – |
-| `variant` | `'sidebar' \| 'floating' \| 'inset'` | – | – | – |
-| `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | – | – | – |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add sidebar` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
-| `separator` | component | 分隔线 — Radix Separator + antd Divider 的 dashed / 中间装饰文本 |
-| `sheet` | component | 侧边面板 — Radix Dialog + side(left/right/top/bottom) + size(sm/md/lg/xl) + --radius-dialog 圆角,对齐 antd Drawer 全能力集 |
-| `tooltip` | component | 文字提示气泡 — Radix Tooltip + antd arrow/placement(side) 并集 + cloud-design Balloon 双变体(default 深底 / light 白底) + 一行 wrapper API |
-| `skeleton` | component | 骨架屏 — shadcn pulse 单元素 + antd Avatar/Image/Button/Input/Paragraph 子家族,自动 motion-reduce |
-| `input` | component | 单行文本输入 — clearable / showCount / size(sm 24 / md 32 / lg 36,与 Button 同档)/ error 四档内建能力。前缀/后缀/addon 等复合形态已拆出独立 InputGroup;多行已拆出独立 Textarea |
-| `use-mobile` | hook | 检测视口是否为移动尺寸(< 768px) — Sidebar 在 mobile 视口切 Sheet 抽屉的判定依据 |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-slot@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **必装 SidebarProvider**:Sidebar 上下层任何子组件都依赖 Context;通常在 Layout 顶层包裹。Provider 内置 `TooltipProvider`,无需额外挂
-- **`embedded` 嵌入模式**:Provider 加 `embedded` prop(默认 `false`),下游 Sidebar 的 sidebar-container 从默认 `fixed inset-y-0 h-svh`(贴 viewport 全屏)切到 `relative h-full`(嵌入外层布局)。常用于 PageShell / 任何需要 sidebar 与 header 共存的 layout。**消费方一般不直接传 `embedded`**,而是用 [`<PageShell>`](../page-shell/page-shell.meta.md) —— PageShell 内部自动开启。embedded 模式下 `collapsible="offcanvas"` 折叠改用宽度收 0,无滑出动画
-- **`SidebarMenuButton` 配 `asChild`**:wrap React Router / Next.js Link
-- **`SidebarMenuButton` 折叠态 tooltip**:`collapsible="icon"` 时务必传 `tooltip="导航名"`,否则折叠后只剩 icon 无法识别
-- **`isActive` 由路由判断**:不要用 useState 自管;`pathname === href`
-- **`collapsible="icon"` 默认**:折叠后保留图标列;`offcanvas` 完全收起;`none` 静态宽度
-- **`variant`**:`sidebar`(默认贴边)/ `floating`(浮起圆角阴影)/ `inset`(主内容区圆角内嵌,Sidebar 留白)
-- **`SidebarInset` 与 Sidebar 配对**:`<SidebarProvider><Sidebar/><SidebarInset>main content</SidebarInset></SidebarProvider>`
-- **`SidebarMenuSub` 二级菜单**:与 `Collapsible`(`@/components/ui/collapsible`)组合实现展开/收起;sub 在折叠态自动隐藏
-- **`SidebarMenuBadge`** 用于未读数 / 状态徽章;**`SidebarMenuAction`**(`showOnHover` 默认 false,设 true 仅 hover 显示)用于行内操作
-- **`SidebarMenuSkeleton`** 用于异步加载占位,`showIcon` 控制是否显示左侧 icon 骨架
-- **`SidebarRail`** 是替代 Trigger 的可拖拽收合区;放在 `<Sidebar>` 内最后即可
-- **菜单图标 first**:`<SidebarMenuButton><Icon /> <span>文字</span></SidebarMenuButton>`,顺序固定
-- **mobile 自动切 Sheet**:`useIsMobile` 检测 < 768px 时 Sidebar 自动切为 Sheet 抽屉,无需消费方做媒体查询
-
-## Examples
-
-```tsx
-import {
-  SidebarProvider,
-  Sidebar,
-  SidebarHeader,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarFooter,
-  SidebarTrigger,
-  SidebarInset,
-} from '@/components/ui/sidebar';
-import { Home, Settings, Inbox, Users } from 'lucide-react';
-
-const items = [
-  { title: '首页', url: '/', icon: Home },
-  { title: '收件箱', url: '/inbox', icon: Inbox },
-  { title: '团队', url: '/team', icon: Users },
-  { title: '设置', url: '/settings', icon: Settings },
-];
-
-function AppLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
-        </SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>导航</SidebarGroupLabel>
-            <SidebarMenu>
-              {items.map((it) => (
-                <SidebarMenuItem key={it.title}>
-                  <SidebarMenuButton asChild>
-                    <a href={it.url}>
-                      <it.icon />
-                      <span>{it.title}</span>
-                    </a>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-            </SidebarMenu>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarFooter>
-          <p className="px-2 text-xs text-muted-foreground">v0.1.0</p>
-        </SidebarFooter>
-      </Sidebar>
-      <SidebarInset>
-        <header className="flex h-12 items-center gap-2 border-b px-4">
-          <SidebarTrigger />
-          <h2 className="text-sm font-medium">主内容区</h2>
-        </header>
-        <div className="p-6">{children}</div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}
-```