@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/separator/separator.meta.md

@@ -3,7 +3,7 @@ id: separator
 name: Separator
 displayName: 分隔线
 type: component
-category: foundation
+category: layout
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -28,14 +28,12 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
-| 名称          | 类型                         | 默认值         | 必填 | 说明                                                                                                                                      |
-| ------------- | ---------------------------- | -------------- | ---- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | –    | 分隔方向。                                                                                                                                |
-| `decorative`  | `boolean`                    | `true`         | –    | `true` 时不参与无障碍树(语义上仅装饰性)。                                                                                                 |
-| `dashed`      | `boolean`                    | `false`        | –    | 虚线样式(antd Divider 并集)。                                                                                                             |
-| `children`    | `React.ReactNode`            | –              | –    | 中间装饰文本(antd Divider 并集)。提供时改用"两端线段 + 中间文本"布局, Radix Separator 不再使用,但通过 `role="separator"` 保留无障碍语义。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 分隔方向。 |
+| `decorative` | `boolean` | `true` | – | `true` 时不参与无障碍树(语义上仅装饰性)。 |
+| `dashed` | `boolean` | `false` | – | 虚线样式(antd Divider 并集)。 |
+| `children` | `React.ReactNode` | – | – | 中间装饰文本(antd Divider 并集)。提供时改用"两端线段 + 中间文本"布局, Radix Separator 不再使用,但通过 `role="separator"` 保留无障碍语义。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -43,14 +41,13 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add separator` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -59,7 +56,6 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add @radix-ui/react-separator@^1.1.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/separator/separator.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Separator } from './separator';
 
 const meta: Meta<typeof Separator> = {
-  title: '基础原语 · Foundation/Separator',
+  title: '布局 · Layout/Separator',
   component: Separator,
   tags: ['autodocs'],
   parameters: {

package/src/components/separator/separator.tsx

@@ -53,7 +53,7 @@ const Separator = React.forwardRef<
           role={decorative ? 'none' : 'separator'}
           aria-orientation={decorative ? undefined : 'horizontal'}
           className={cn(
-            'flex w-full items-center gap-3 text-sm text-muted-foreground',
+            'flex w-full items-center gap-3 text-xs text-muted-foreground',
             className,
           )}
           {...(props as React.HTMLAttributes<HTMLDivElement>)}
@@ -61,18 +61,14 @@ const Separator = React.forwardRef<
           <span
             className={cn(
               'h-px flex-1',
-              dashed
-                ? 'border-t border-dashed border-border'
-                : 'bg-border',
+              dashed ? 'border-t border-dashed border-border' : 'bg-border',
             )}
           />
           <span className="shrink-0">{children}</span>
           <span
             className={cn(
               'h-px flex-1',
-              dashed
-                ? 'border-t border-dashed border-border'
-                : 'bg-border',
+              dashed ? 'border-t border-dashed border-border' : 'bg-border',
             )}
           />
         </div>

package/src/components/sheet/sheet.meta.md

@@ -10,32 +10,32 @@ package: '@teamix-evo/ui'
 
 # Sheet 侧边面板
 
-侧边滑出面板 — Radix Dialog 底座 + side 方向变体(left / right / top / bottom)+ antd Drawer `placement` 并集。
-**与 Dialog 的关键差异**:Sheet 从屏幕边缘滑入,模态阻断同样;`Drawer` 是底部可拖拽抽屉(iOS 风格,移动端体验)。
+侧边滑出面板 — Radix Dialog 底座 + side 方向变体(left / right / top / bottom)+ size 尺寸变体 + `--radius-dialog` 圆角,对齐 antd Drawer 全能力集。
+`Drawer` 现为 Sheet 的别名 re-export,向后兼容。
 
 ## When to use
 
 - 设置面板 / 详情查看(从右侧滑入,主区域保留可见)
 - 移动端导航(从左侧滑入)
 - 编辑面板(主操作仍在画面内)
+- 任何需要从屏幕边缘抽出面板、承载次要流程的场景
 
 ## When NOT to use
 
 - 短交互 → `Popover`
 - 阻断式确认 → `AlertDialog`
-- 移动端可拖拽 → `Drawer`
-- 普通模态 → `Dialog`
+- 普通模态(居中) → `Dialog`
 
 ## Props
 
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `SheetContent` 的 props;`Sheet`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
 
 <!-- auto:props:begin -->
-
-| 名称   | 类型                                     | 默认值    | 必填 | 说明                                     |
-| ------ | ---------------------------------------- | --------- | ---- | ---------------------------------------- |
-| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `"right"` | –    | 弹出方向(antd Drawer `placement` 并集)。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `"right"` | – | 弹出方向(antd Drawer `placement` 并集)。 |
+| `size` | `SheetSize` | `"md"` | – | 面板尺寸 — 绑定 design tokens `--layout-dialog-{sm\|md\|lg\|xl}`。 仅在 side=left/right 时生效(控制宽度)。 |
+| `showClose` | `boolean` | `true` | – | 是否在标题区右侧显示默认关闭按钮。 若使用 SheetHeader 的内置 close 布局,可设为 false 自行控制。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -43,14 +43,13 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add sheet` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -59,18 +58,21 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add @radix-ui/react-dialog@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
-> 子组件:`Sheet` / `SheetTrigger` / `SheetContent`(`side` 在此)/ `SheetHeader` / `SheetFooter` / `SheetTitle` / `SheetDescription` / `SheetClose` / `SheetOverlay` / `SheetPortal`。
+> 子组件:`Sheet` / `SheetTrigger` / `SheetContent`(`side` + `size` 在此)/ `SheetHeader` / `SheetBody` / `SheetFooter` / `SheetTitle` / `SheetDescription` / `SheetClose` / `SheetOverlay` / `SheetPortal`。
 
 ## AI 生成纪律
 
 - **side 默认 right**:右侧是详情类滑出的工业惯例(Email / 设置 / 通知)
 - **side="left" 仅用于全局导航**(响应式抽屉);避免在桌面端把内容也用 left side
-- **Sheet 内表单 Footer 居底**:用 `flex-1` + 滚动区让表单可滚动,Footer 固定底部
-- **`SheetTitle` 必有**(无障碍)
-- **Sheet 与 Drawer 混用**:同一应用内只挑一个,响应式断点切换由设计层决定
+- **size 默认 md(600px)**:sm(400) 适合简单设置;lg(800) 适合有表格/表单的编辑;xl(1200) 仅全屏级编辑器
+- **SheetBody 必须包裹内容区**:确保 flex-1 + overflow-auto 滚动正确
+- **SheetHeader 已含 border-b,SheetFooter 已含 border-t**:不要再额外加分隔线
+- **Sheet 内表单 Footer 居底**:SheetBody + SheetFooter 自然形成 header | body(scrollable) | footer 三段式
+- **`SheetTitle` 必有**(无障碍,Radix Dialog 要求)
+- **圆角由 `--radius-dialog` token 控制**:不要手动覆盖 rounded 值
+- **Drawer 现在是 Sheet 的 alias**:新代码一律使用 Sheet,Drawer 仅为向后兼容保留
 
 ## Examples
 
@@ -80,6 +82,7 @@ import {
   SheetTrigger,
   SheetContent,
   SheetHeader,
+  SheetBody,
   SheetTitle,
   SheetDescription,
   SheetFooter,
@@ -91,12 +94,14 @@ import { Button } from '@/components/ui/button';
   <SheetTrigger asChild>
     <Button variant="outline">查看详情</Button>
   </SheetTrigger>
-  <SheetContent side="right" className="sm:max-w-md">
+  <SheetContent side="right" size="md">
     <SheetHeader>
       <SheetTitle>用户详情</SheetTitle>
-      <SheetDescription>查看与编辑用户基本信息</SheetDescription>
     </SheetHeader>
-    {/* content */}
+    <SheetBody>
+      <SheetDescription>查看与编辑用户基本信息</SheetDescription>
+      {/* content */}
+    </SheetBody>
     <SheetFooter>
       <SheetClose asChild>
         <Button variant="outline">关闭</Button>

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

@@ -1,9 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Sheet,
   SheetTrigger,
   SheetContent,
   SheetHeader,
+  SheetBody,
   SheetTitle,
   SheetDescription,
   SheetFooter,
@@ -12,14 +13,14 @@ import {
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof SheetContent> = {
-  title: '反馈与浮层 · Feedback/Sheet',
+  title: '反馈 · Feedback/Sheet',
   component: SheetContent,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '侧边抽屉 — 从屏幕边缘滑入的补充内容面板，补充主区不中断主流程。语义上是 Dialog 的表弟但定位于边缘，对齐 antd `Drawer`；Radix Dialog 内核实现 + shadcn `Sheet` 的 `side` 变体 (top / right / bottom / left)。',
+          '侧边面板 —— 从屏幕边缘滑入的模态面板,承载次要流程(设置/详情/编辑)且不中断主区域。Radix Dialog 内核 + cva side/size 双变体 + `--radius-dialog` 圆角,对齐 antd `Drawer` 全能力(`placement` / `size` / header+close / footer 操作栏)并兼容 shadcn `Sheet` 的 `side` 模型:`side`、`size`、`showClose`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
@@ -28,8 +29,15 @@ const meta: Meta<typeof SheetContent> = {
       control: 'inline-radio',
       options: ['top', 'right', 'bottom', 'left'],
     },
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+    showClose: {
+      control: 'boolean',
+    },
   },
-  args: { side: 'right' },
+  args: { side: 'right', size: 'md', showClose: true },
 };
 
 export default meta;
@@ -44,14 +52,16 @@ export const Playground: Story = {
       <SheetContent {...args}>
         <SheetHeader>
           <SheetTitle>编辑资料</SheetTitle>
-          <SheetDescription>保存后立即生效。</SheetDescription>
         </SheetHeader>
-        <div className="py-4 text-sm text-muted-foreground">
-          表单字段放在这里...
-        </div>
+        <SheetBody>
+          <SheetDescription>保存后立即生效。</SheetDescription>
+          <div className="py-4 text-sm text-muted-foreground">
+            表单字段放在这里...
+          </div>
+        </SheetBody>
         <SheetFooter>
           <SheetClose asChild>
-            <Button variant="outline">关闭</Button>
+            <Button variant="outline">取消</Button>
           </SheetClose>
           <Button>保存</Button>
         </SheetFooter>
@@ -61,6 +71,7 @@ export const Playground: Story = {
 };
 
 export const FourSides: Story = {
+  name: '四个方向',
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex flex-wrap gap-3">
@@ -69,14 +80,109 @@ export const FourSides: Story = {
           <SheetTrigger asChild>
             <Button variant="outline">{s}</Button>
           </SheetTrigger>
-          <SheetContent side={s}>
+          <SheetContent side={s} size="md">
             <SheetHeader>
               <SheetTitle>side = {s}</SheetTitle>
+            </SheetHeader>
+            <SheetBody>
               <SheetDescription>从 {s} 方向滑入。</SheetDescription>
+            </SheetBody>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  name: '尺寸变体',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {(['sm', 'md', 'lg', 'xl'] as const).map((sz) => (
+        <Sheet key={sz}>
+          <SheetTrigger asChild>
+            <Button variant="outline">{sz}</Button>
+          </SheetTrigger>
+          <SheetContent side="right" size={sz}>
+            <SheetHeader>
+              <SheetTitle>size = {sz}</SheetTitle>
             </SheetHeader>
+            <SheetBody>
+              <SheetDescription>
+                宽度由 --layout-dialog-{sz} token 控制。
+              </SheetDescription>
+            </SheetBody>
           </SheetContent>
         </Sheet>
       ))}
     </div>
   ),
 };
+
+export const WithHeaderFooter: Story = {
+  name: 'Header + Body + Footer 三段式',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">打开完整面板</Button>
+      </SheetTrigger>
+      <SheetContent side="right" size="lg">
+        <SheetHeader>
+          <SheetTitle>订单详情</SheetTitle>
+        </SheetHeader>
+        <SheetBody>
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              订单号:ORD-2026-001234
+            </p>
+            <p className="text-sm text-muted-foreground">
+              创建时间:2026-05-29 10:30
+            </p>
+            <div className="h-64 rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
+              模拟长内容区域(可滚动)...
+            </div>
+            <div className="h-64 rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
+              更多内容...
+            </div>
+          </div>
+        </SheetBody>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">取消</Button>
+          </SheetClose>
+          <Button>确认操作</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const NoCloseButton: Story = {
+  name: '隐藏关闭按钮',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">无关闭按钮</Button>
+      </SheetTrigger>
+      <SheetContent side="right" size="sm" showClose={false}>
+        <SheetHeader>
+          <SheetTitle>必选操作</SheetTitle>
+        </SheetHeader>
+        <SheetBody>
+          <SheetDescription>
+            隐藏右上角关闭按钮,用户必须通过底部按钮完成操作。
+          </SheetDescription>
+        </SheetBody>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">放弃</Button>
+          </SheetClose>
+          <Button>完成</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/src/components/sheet/sheet.tsx

@@ -6,10 +6,32 @@ 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 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>
@@ -25,52 +47,106 @@ const SheetOverlay = React.forwardRef<
 ));
 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',
+/**
+ * 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 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        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 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',
+          '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 w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          '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)]',
       },
     },
-    defaultVariants: { side: 'right' },
+    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 sheetVariants> {
+    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', 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>
-));
+>(
+  (
+    {
+      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 = ({
@@ -79,7 +155,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
+      'flex items-center justify-between border-b border-border px-6 py-4',
       className,
     )}
     {...props}
@@ -93,7 +169,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2',
+      'flex items-center justify-end gap-2 border-t border-border px-6 py-4',
       className,
     )}
     {...props}
@@ -101,12 +177,21 @@ const SheetFooter = ({
 );
 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}
   />
@@ -119,7 +204,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-xs text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -133,7 +218,9 @@ export {
   SheetClose,
   SheetContent,
   SheetHeader,
+  SheetBody,
   SheetFooter,
   SheetTitle,
   SheetDescription,
+  sheetContentVariants,
 };