@teamix-evo/ui 0.1.1

package/src/components/sheet/sheet.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose,
+} from './sheet';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof SheetContent> = {
+  title: '反馈与浮层 · Feedback/Sheet',
+  component: SheetContent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '侧边抽屉 — 从屏幕边缘滑入的补充内容面板，补充主区不中断主流程。语义上是 Dialog 的表弟但定位于边缘，对齐 antd `Drawer`；Radix Dialog 内核实现 + shadcn `Sheet` 的 `side` 变体 (top / right / bottom / left) 。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    side: {
+      control: 'inline-radio',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+  },
+  args: { side: 'right' },
+};
+
+export default meta;
+type Story = StoryObj<typeof SheetContent>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">打开 Sheet</Button>
+      </SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>编辑资料</SheetTitle>
+          <SheetDescription>保存后立即生效。</SheetDescription>
+        </SheetHeader>
+        <div className="py-4 text-sm text-muted-foreground">
+          表单字段放在这里...
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">关闭</Button>
+          </SheetClose>
+          <Button>保存</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const FourSides: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {(['top', 'right', 'bottom', 'left'] as const).map((s) => (
+        <Sheet key={s}>
+          <SheetTrigger asChild>
+            <Button variant="outline">{s}</Button>
+          </SheetTrigger>
+          <SheetContent side={s}>
+            <SheetHeader>
+              <SheetTitle>side = {s}</SheetTitle>
+              <SheetDescription>从 {s} 方向滑入。</SheetDescription>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+};

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,139 @@
+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 SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+
+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;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 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 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  },
+);
+
+export interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  /**
+   * 弹出方向(antd Drawer `placement` 并集)。
+   * @default "right"
+   */
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+  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}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    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-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

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

@@ -0,0 +1,131 @@
+---
+id: sidebar
+name: Sidebar
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Sidebar
+
+侧边导航栏 — shadcn 风格复合组件,**对应 antd `Layout.Sider + Menu`**。
+**精简版**(MVP):涵盖 Provider + 折叠状态 + Header/Footer/Content + Menu + Trigger。
+**未含**(留 v0.x):mobile sheet 自动切换、cookie 持久化、Rail(可拖拽折叠杆)、富 SubMenu 嵌套。
+
+## 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'` | `"left"` | – | 侧边方向。 |
+| `collapsible` | `'icon' \| 'offcanvas' \| 'none'` | `"icon"` | – | 折叠模式 — `icon` 折叠后只剩图标列(64px);`offcanvas` 完全收起(0px)。 |
+| `width` | `string` | `"16rem"` | – | 展开宽度。 |
+| `collapsedWidth` | `string` | `"3rem"` | – | 折叠后宽度(`collapsible="icon"` 时生效)。 |
+<!-- 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 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `separator` | component | 分隔线 — Radix Separator + antd Divider 的 dashed / 中间装饰文本 |
+
+### 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 -->
+
+> 完整子组件:`SidebarProvider`(Context 容器,必装)/ `Sidebar`(主侧边栏)/ `SidebarHeader` / `SidebarFooter` / `SidebarContent`(中间滚动区)/ `SidebarGroup` + `SidebarGroupLabel` / `SidebarMenu` + `SidebarMenuItem` + `SidebarMenuButton`(支持 `isActive` / `asChild`)/ `SidebarSeparator` / `SidebarTrigger`(切换按钮)/ `SidebarInset`(主内容区)+ `useSidebar()` hook。
+
+## AI 生成纪律
+
+- **必装 SidebarProvider**:Sidebar 上下层任何子组件都依赖 Context;通常在 Layout 顶层包裹
+- **`SidebarMenuButton` 配 `asChild`**:wrap React Router / Next.js Link
+- **`isActive` 由路由判断**:不要用 useState 自管;`pathname === href`
+- **`collapsible="icon"` 默认**:折叠后保留图标列;`offcanvas` 完全收起;`none` 静态宽度
+- **`SidebarInset` 与 Sidebar 配对**:`<SidebarProvider><Sidebar/><SidebarInset>main content</SidebarInset></SidebarProvider>`
+- **菜单图标 first**:`<SidebarMenuButton><Icon /> 文字</SidebarMenuButton>`,顺序固定
+
+## 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>
+  );
+}
+```

package/src/components/sidebar/sidebar.stories.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Home, Inbox, Settings, Users } from 'lucide-react';
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarFooter,
+  SidebarTrigger,
+  SidebarInset,
+} from './sidebar';
+
+const meta: Meta<typeof Sidebar> = {
+  title: '导航 · Navigation/Sidebar',
+  component: Sidebar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+const items = [
+  { title: '首页', url: '#home', icon: Home },
+  { title: '收件箱', url: '#inbox', icon: Inbox },
+  { title: '团队', url: '#team', icon: Users },
+  { title: '设置', url: '#settings', icon: Settings },
+];
+
+function DemoLayout({ active }: { active: string }) {
+  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
+                    isActive={active === it.url}
+                  >
+                    <a href={it.url} onClick={(e) => e.preventDefault()}>
+                      <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="flex-1 p-6 text-sm text-muted-foreground">
+          点击左上角图标可折叠 / 展开 Sidebar。
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DemoLayout active="#home" />,
+};