@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/select/stories.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPrefix,
+  SelectSuffix,
+  SelectTrigger,
+  SelectValue,
+} from './index';
+
+const meta: Meta<typeof Select> = {
+  title: '数据录入 · Data Entry/Select 选择器',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+      description: {
+        component: '轻量单选选择器。',
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 基础选择器。 */
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-48">
+        <SelectValue placeholder="请选择水果" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">苹果</SelectItem>
+        <SelectItem value="banana">香蕉</SelectItem>
+        <SelectItem value="orange">橙子</SelectItem>
+        <SelectItem value="grape">葡萄</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** 带分组的选择器。 */
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-48">
+        <SelectValue placeholder="选择一个时区" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>亚太地区</SelectLabel>
+          <SelectItem value="cst">中国标准时间 (CST)</SelectItem>
+          <SelectItem value="jst">日本标准时间 (JST)</SelectItem>
+          <SelectItem value="kst">韩国标准时间 (KST)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>欧洲</SelectLabel>
+          <SelectItem value="gmt">格林威治时间 (GMT)</SelectItem>
+          <SelectItem value="cet">中欧时间 (CET)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** 禁用某些选项。 */
+export const DisabledItems: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-48">
+        <SelectValue placeholder="选择方案" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="free">免费版</SelectItem>
+        <SelectItem value="pro">专业版</SelectItem>
+        <SelectItem value="enterprise" disabled>
+          企业版（即将推出）
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** 小尺寸选择器。 */
+export const Small: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-36" size="sm">
+        <SelectValue placeholder="选择" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="10">10 条/页</SelectItem>
+        <SelectItem value="20">20 条/页</SelectItem>
+        <SelectItem value="50">50 条/页</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** 三档尺寸：sm / default / lg，对齐 Button、Input 三档规范。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Select>
+        <SelectTrigger className="w-32" size="sm">
+          <SelectValue placeholder="sm" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">选项 A</SelectItem>
+          <SelectItem value="b">选项 B</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger className="w-36">
+          <SelectValue placeholder="default" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">选项 A</SelectItem>
+          <SelectItem value="b">选项 B</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger className="w-40" size="lg">
+          <SelectValue placeholder="lg" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">选项 A</SelectItem>
+          <SelectItem value="b">选项 B</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+/** 触发器内的前后缀装饰：用 `SelectPrefix` / `SelectSuffix` 组合显示固定标签与单位。 */
+export const WithPrefixSuffix: Story = {
+  render: () => (
+    <Select defaultValue="50">
+      <SelectTrigger className="w-56">
+        <SelectPrefix>大小</SelectPrefix>
+        <SelectValue />
+        <SelectSuffix>GB</SelectSuffix>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="10">10</SelectItem>
+        <SelectItem value="50">50</SelectItem>
+        <SelectItem value="100">100</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** 已选时右侧 chevron 切为 ×，点击清空 value；chevron 与 × 占同一位置、互斥。 */
+export const WithClear: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>('apple');
+    return (
+      <Select value={value} onValueChange={setValue}>
+        <SelectTrigger
+          className="w-56"
+          onClear={value ? () => setValue('') : undefined}
+        >
+          <SelectValue placeholder="请选择水果" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">苹果</SelectItem>
+          <SelectItem value="banana">香蕉</SelectItem>
+          <SelectItem value="orange">橙子</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+  },
+};
+
+/** 加载态：`<SelectTrigger loading>` 把 chevron 替换为旋转 spinner。 */
+export const Loading: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-48" loading>
+        <SelectValue placeholder="正在加载选项..." />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">选项 A</SelectItem>
+        <SelectItem value="b">选项 B</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** 错误态：通过 `aria-invalid` 触发 destructive 边框与 ring（与 shadcn 单一真相对齐）。 */
+export const Invalid: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-48" aria-invalid>
+        <SelectValue placeholder="必填项未选择" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">选项 A</SelectItem>
+        <SelectItem value="b">选项 B</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

package/src/components/separator/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * 分割线 Separator
+ *
+ * 视觉分隔元素，支持水平和垂直方向，基于 Radix Separator 原语。
+ *
+ * @when
+ * - 内容区域之间的视觉分隔
+ * - 工具栏按钮组分隔
+ * - 菜单项分组分隔
+ */
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+export interface SeparatorProps
+  extends Omit<
+    React.ComponentProps<typeof SeparatorPrimitive.Root>,
+    'orientation' | 'decorative'
+  > {
+  /** 方向。 @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /** 是否仅装饰用途（为 true 时对辅助技术隐藏）。 @default true */
+  decorative?: boolean;
+}
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        // 垂直模式默认上下各内缩 2px（`py-0.5 + bg-clip-content`）：padding 占自身 box 4px、背景只画在 content-box，
+        // 任何对齐上下文（items-center / items-stretch）都能看到分隔线比容器短 4px。需要全高可用 className="py-0" 覆盖。
+        'shrink-0 bg-border',
+        'data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',
+        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:py-0.5 data-[orientation=vertical]:bg-clip-content',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/components/separator/meta.md

@@ -0,0 +1,68 @@
+# Separator
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+分割线 Separator
+视觉分隔元素，支持水平和垂直方向，基于 Radix Separator 原语。
+
+## 使用场景
+
+- 内容区域之间的视觉分隔
+- 工具栏按钮组分隔
+- 菜单项分组分隔
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | – | 方向。 |
+| `decorative` | `boolean` | `true` | – | 是否仅装饰用途（为 true 时对辅助技术隐藏）。 |
+
+## 示例
+
+### Horizontal
+
+水平分割线，用于分隔上下两段内容。
+
+```tsx
+<div className="flex w-80 flex-col gap-3">
+  <p className="text-xs text-foreground">上方内容区域</p>
+  <Separator />
+  <p className="text-xs text-foreground">下方内容区域</p>
+</div>
+```
+
+### Vertical
+
+垂直分割线，用于行内操作之间的视觉分隔。
+
+```tsx
+<div className="flex h-5 items-center gap-3 text-xs">
+  <span>新增</span>
+  <Separator orientation="vertical" />
+  <span>编辑</span>
+  <Separator orientation="vertical" />
+  <span>删除</span>
+</div>
+```
+
+### WithLabel
+
+带文字标签的分割线布局，通过 flex 组合实现。
+
+```tsx
+<div className="flex w-80 flex-col gap-4">
+  <div className="flex items-center gap-3">
+    <Separator className="flex-1" />
+    <span className="text-xs text-muted-foreground">OR</span>
+    <Separator className="flex-1" />
+  </div>
+  <div className="flex items-center gap-3">
+    <Separator className="w-8" />
+    <span className="text-xs text-muted-foreground">左侧标题</span>
+    <Separator className="flex-1" />
+  </div>
+</div>
+```

package/src/components/separator/stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Separator } from './index';
+
+const meta: Meta<typeof Separator> = {
+  title: '布局 · Layout/Separator 分割线',
+  component: Separator,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 水平分割线，用于分隔上下两段内容。 */
+export const Horizontal: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-3">
+      <p className="text-xs text-foreground">上方内容区域</p>
+      <Separator />
+      <p className="text-xs text-foreground">下方内容区域</p>
+    </div>
+  ),
+};
+
+/** 垂直分割线，用于行内操作之间的视觉分隔。 */
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-5 items-center gap-3 text-xs">
+      <span>新增</span>
+      <Separator orientation="vertical" />
+      <span>编辑</span>
+      <Separator orientation="vertical" />
+      <span>删除</span>
+    </div>
+  ),
+};
+
+/** 带文字标签的分割线布局，通过 flex 组合实现。 */
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <Separator className="flex-1" />
+        <span className="text-xs text-muted-foreground">OR</span>
+        <Separator className="flex-1" />
+      </div>
+      <div className="flex items-center gap-3">
+        <Separator className="w-8" />
+        <span className="text-xs text-muted-foreground">左侧标题</span>
+        <Separator className="flex-1" />
+      </div>
+    </div>
+  ),
+};

package/src/components/sheet/index.tsx

@@ -0,0 +1,293 @@
+/**
+ * 抽屉 Sheet
+ *
+ * 从屏幕边缘滑出的面板，承载详情、表单、筛选、二级流程等补充内容，基于 Radix Dialog 原语。
+ * 采用 shadcn v4 composable 模式：所有结构以子组件显式拼装，方向通过 `side`（4 向）驱动，
+ * 尺寸通过 `data-size` 驱动（参考 cloud-design Drawer 的 mini/small/medium/large）。
+ *
+ * 视觉规范（与 Dialog 对齐）：
+ * - Header 区：`pt-3 pr-5 pb-3 pl-5`，底部 1px 分隔线 `border-border`，存在 SheetHeaderExtra 时动态加 `pr-14` 预留关闭按钮
+ * - Body 区：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground，自带垂直滚动
+ * - Footer 区：`px-4 py-2.5`，顶部分隔线默认透明（消费侧需要时设为 `border-t border-border`）
+ * - 关闭按钮：`absolute top-3 right-5`，可点击区 20px
+ * - 阴影：组件级 token `--drawer-shadow`，fallback `0px 0px 24px 0px rgba(0,0,0,0.1)`
+ * - 不设边框：抽屉与背景的边界由阴影表达，默认不画 border
+ *
+ * @when
+ * - 详情侧栏 / 多步流程的右侧面板
+ * - 大型筛选 / 配置编辑（避免 Dialog 高度受限）
+ * - 移动端导航或全屏操作菜单
+ * - 表单内容超出一屏需独立滚动的场景
+ */
+'use client';
+
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import { XIcon } from 'lucide-react';
+
+export interface SheetProps
+  extends Omit<
+    React.ComponentProps<typeof SheetPrimitive.Root>,
+    'open' | 'defaultOpen' | 'onOpenChange' | 'modal'
+  > {
+  /** 受控显示状态。 */
+  open?: boolean;
+  /** 非受控初始显示状态。 @default false */
+  defaultOpen?: boolean;
+  /**
+   * 显示 / 关闭状态变化回调。
+   * @param open 当前是否显示
+   */
+  onOpenChange?: (open: boolean) => void;
+  /** 是否模态（背景遮罩 + 阻止外部交互）。 @default true */
+  modal?: boolean;
+}
+
+function Sheet({ ...props }: SheetProps) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 抽屉主体内容容器，承载 Header / Body / Footer。
+ *
+ * 通过 `side` 控制弹出方向（4 向），通过 `size` 控制内容区尺寸：
+ * - `side=left/right`：`size` 控制宽度
+ * - `side=top/bottom`：`size` 控制高度
+ *
+ * `size` 档位对齐 cloud-design Drawer：
+ * - `sm`：紧凑面板（≈ 400px）
+ * - `md`：通用表单（≈ 600px）
+ * - `lg`：详情/多列内容（≈ 800px）
+ * - `xl`：复杂工作台或编辑区（≈ 1200px）
+ *
+ * 默认全屏宽度由 Tailwind 响应式 max-w 约束，移动端会贴合屏幕。
+ */
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  size = 'sm',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  /** 弹出方向。 @default 'right' */
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  /** 内容区尺寸（参考 cloud-design Drawer mini/small/medium/large）。 @default 'sm' */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** 是否显示右上角关闭按钮。 @default true */
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        data-size={size}
+        className={cn(
+          // 基础布局：fixed 定位 + flex 列容器 + token 化阴影（抽屉与背景的边界由阴影表达，不画 border）
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- box-shadow 走 component-level token --drawer-shadow，按 ADR 0026 在源码内显式声明。
+          'fixed z-50 flex flex-col bg-popover text-xs text-popover-foreground shadow-[var(--drawer-shadow,0px_0px_24px_0px_rgba(0,0,0,0.1))] transition ease-in-out outline-none data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=closed]:animate-out data-[state=closed]:duration-200',
+          // 4 向定位（不加 border）
+          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-full',
+          'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-full',
+          'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full',
+          'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full',
+          // 4 向滑入滑出动画
+          'data-[side=right]:data-[state=open]:slide-in-from-right data-[side=right]:data-[state=closed]:slide-out-to-right',
+          'data-[side=left]:data-[state=open]:slide-in-from-left data-[side=left]:data-[state=closed]:slide-out-to-left',
+          'data-[side=top]:data-[state=open]:slide-in-from-top data-[side=top]:data-[state=closed]:slide-out-to-top',
+          'data-[side=bottom]:data-[state=open]:slide-in-from-bottom data-[side=bottom]:data-[state=closed]:slide-out-to-bottom',
+          // size 档位：left/right 控宽，top/bottom 控高（sm 断点以上生效，移动端默认贴边全屏）
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- 像素值对齐 cloud-design Drawer mini/small/medium/large 视觉档位 (400/600/800/1200)；通过 component-level token 表达过于碎片化，按 ADR 0026 在源码内显式声明。
+          'data-[side=left]:data-[size=sm]:sm:max-w-[400px] data-[side=left]:data-[size=md]:sm:max-w-[600px] data-[side=left]:data-[size=lg]:sm:max-w-[800px] data-[side=left]:data-[size=xl]:sm:max-w-[1200px]',
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- 同上，对齐 cloud-design Drawer 视觉档位。
+          'data-[side=right]:data-[size=sm]:sm:max-w-[400px] data-[side=right]:data-[size=md]:sm:max-w-[600px] data-[side=right]:data-[size=lg]:sm:max-w-[800px] data-[side=right]:data-[size=xl]:sm:max-w-[1200px]',
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- top/bottom 方向 size 控高度，对齐视觉档位。
+          'data-[side=top]:data-[size=sm]:max-h-[280px] data-[side=top]:data-[size=md]:max-h-[400px] data-[side=top]:data-[size=lg]:max-h-[560px] data-[side=top]:data-[size=xl]:max-h-[80vh]',
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- 同上。
+          'data-[side=bottom]:data-[size=sm]:max-h-[280px] data-[side=bottom]:data-[size=md]:max-h-[400px] data-[side=bottom]:data-[size=lg]:max-h-[560px] data-[side=bottom]:data-[size=xl]:max-h-[80vh]',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            className="absolute top-3 right-5 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none"
+          >
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+/**
+ * Header 容器，标题 / 描述 / 标题右侧附加内容（SheetHeaderExtra）的布局承载。
+ *
+ * 视觉规范：`pt-3 pr-5 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`，消费侧可通过
+ * `className="border-transparent"` 关闭。存在 SheetHeaderExtra 时自动切换为 grid 双列并动态加 `pr-14`
+ * 预留关闭按钮位置：左侧 title + 下方 description（跨列），右侧 extra 居顶对齐。
+ */
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn(
+        'flex flex-col gap-1.5 border-b border-border pt-3 pr-5 pb-3 pl-5 has-data-[slot=sheet-header-extra]:grid has-data-[slot=sheet-header-extra]:grid-cols-[1fr_auto] has-data-[slot=sheet-header-extra]:items-start has-data-[slot=sheet-header-extra]:gap-x-3 has-data-[slot=sheet-header-extra]:pr-14',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 标题右侧附加内容（如帮助链接、外部跳转）。
+ *
+ * 推荐放置低权重的次要操作，避免与主按钮抢焦点。需放在 SheetHeader 内，
+ * description 会自动跨列贴在 title 下方。
+ */
+function SheetHeaderExtra({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header-extra"
+      className={cn(
+        'col-start-2 row-start-1 flex shrink-0 items-center gap-2 self-start text-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 内容区容器（Body）。
+ *
+ * 视觉规范：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground，自带 `overflow-y-auto`
+ * 与 `flex-1`，承担 Sheet 内主滚动区。如不需要滚动可通过 className 覆盖 `overflow-visible`。
+ */
+function SheetBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-body"
+      className={cn(
+        'flex-1 overflow-y-auto px-5 pt-4 pb-5 text-xs text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Footer 容器。
+ *
+ * 视觉规范：`px-4 py-2.5`（10px / 16px，对齐 cloud-design Drawer footer），顶部分隔线默认透明
+ * （消费侧需要时通过 `className="border-t border-border"` 启用）。
+ * 默认布局：移动端垂直堆叠（主按钮在上），sm 断点以上水平左对齐（主按钮在左）。与
+ * cloud-design Drawer 默认 `footerAlign='left'` 一致，也与设计稿主/次顺序对齐。children 顺序建议
+ * “主,次”；如需居中/右对齐请用 `sm:justify-center` / `sm:justify-end` 覆盖。
+ */
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        'flex flex-col gap-2 border-t border-transparent px-4 py-2.5 sm:flex-row sm:justify-start',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        'col-start-1 row-start-1 text-sm leading-5 font-medium text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn(
+        'col-span-full text-xs text-muted-foreground *:[a]:text-primary *:[a]:hover:text-primary/80',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetPortal,
+  SheetOverlay,
+  SheetContent,
+  SheetHeader,
+  SheetHeaderExtra,
+  SheetBody,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};