@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/descriptions/stories.tsx

@@ -0,0 +1,389 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CopyIcon, InfoIcon, RefreshCwIcon, StarIcon } from 'lucide-react';
+
+import {
+  Descriptions,
+  DescriptionsContent,
+  DescriptionsItem,
+  DescriptionsLabel,
+} from '.';
+import { Button } from '@/components/button';
+import { Tag } from '@/components/tag';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip';
+
+const meta: Meta<typeof Descriptions> = {
+  title: '数据展示 · Data Display/Descriptions 描述列表',
+  component: Descriptions,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Descriptions>;
+
+// ───────────────────────────────────────────────────────────────────────────
+// 通用基础数据：以纯 slot 形态复用
+// ───────────────────────────────────────────────────────────────────────────
+
+const BaseItems = () => (
+  <>
+    <DescriptionsItem>
+      <DescriptionsLabel>项目名称</DescriptionsLabel>
+      <DescriptionsContent>Teamix Evo</DescriptionsContent>
+    </DescriptionsItem>
+    <DescriptionsItem>
+      <DescriptionsLabel>负责人</DescriptionsLabel>
+      <DescriptionsContent>张三</DescriptionsContent>
+    </DescriptionsItem>
+    <DescriptionsItem>
+      <DescriptionsLabel>状态</DescriptionsLabel>
+      <DescriptionsContent>进行中</DescriptionsContent>
+    </DescriptionsItem>
+    <DescriptionsItem>
+      <DescriptionsLabel>创建时间</DescriptionsLabel>
+      <DescriptionsContent>2024-01-01</DescriptionsContent>
+    </DescriptionsItem>
+    <DescriptionsItem>
+      <DescriptionsLabel>更新时间</DescriptionsLabel>
+      <DescriptionsContent>2026-06-01</DescriptionsContent>
+    </DescriptionsItem>
+    <DescriptionsItem span={2}>
+      <DescriptionsLabel>描述</DescriptionsLabel>
+      <DescriptionsContent>面向 AI Coding 的研发套件</DescriptionsContent>
+    </DescriptionsItem>
+  </>
+);
+
+/** 基础用法：3 列水平布局 + 顶部标题。 */
+export const Default: Story = {
+  args: { title: '项目信息' },
+  render: (args) => (
+    <Descriptions {...args}>
+      <BaseItems />
+    </Descriptions>
+  ),
+};
+
+/** 垂直布局：label 与 content 上下堆叠。 */
+export const Vertical: Story = {
+  args: { title: '配置详情', layout: 'vertical', column: 4 },
+  render: (args) => (
+    <Descriptions {...args}>
+      <DescriptionsItem>
+        <DescriptionsLabel>CPU</DescriptionsLabel>
+        <DescriptionsContent>8 核</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>内存</DescriptionsLabel>
+        <DescriptionsContent>16 GB</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>硬盘</DescriptionsLabel>
+        <DescriptionsContent>512 GB SSD</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>网络</DescriptionsLabel>
+        <DescriptionsContent>千兆</DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/** 带边框矩阵：经典 antd 风格。 */
+export const Bordered: Story = {
+  args: { title: '订单详情', bordered: true, column: 2 },
+  render: (args) => (
+    <Descriptions {...args}>
+      <DescriptionsItem>
+        <DescriptionsLabel>订单号</DescriptionsLabel>
+        <DescriptionsContent>ORD-20260601-001</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>金额</DescriptionsLabel>
+        <DescriptionsContent>¥1,299.00</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>收货人</DescriptionsLabel>
+        <DescriptionsContent>李四</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>联系电话</DescriptionsLabel>
+        <DescriptionsContent>138****0001</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem span={2}>
+        <DescriptionsLabel>收货地址</DescriptionsLabel>
+        <DescriptionsContent>杭州市余杭区文一西路</DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/** 带边框 + 垂直布局：label 在上 content 在下。 */
+export const BorderedVertical: Story = {
+  args: {
+    title: '资源规格',
+    bordered: true,
+    layout: 'vertical',
+    column: 3,
+  },
+  render: (args) => (
+    <Descriptions {...args}>
+      <DescriptionsItem>
+        <DescriptionsLabel>实例 ID</DescriptionsLabel>
+        <DescriptionsContent>i-2zee0xxxxxxx</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>可用区</DescriptionsLabel>
+        <DescriptionsContent>cn-hangzhou-h</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>镜像</DescriptionsLabel>
+        <DescriptionsContent>AnolisOS 8.6</DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/** 不同尺寸：sm / default 对比。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Descriptions title="default 尺寸" bordered column={2}>
+        <DescriptionsItem>
+          <DescriptionsLabel>名称</DescriptionsLabel>
+          <DescriptionsContent>evo</DescriptionsContent>
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <DescriptionsLabel>版本</DescriptionsLabel>
+          <DescriptionsContent>v0.8</DescriptionsContent>
+        </DescriptionsItem>
+      </Descriptions>
+      <Descriptions title="sm 尺寸" bordered size="sm" column={2}>
+        <DescriptionsItem>
+          <DescriptionsLabel>名称</DescriptionsLabel>
+          <DescriptionsContent>evo</DescriptionsContent>
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <DescriptionsLabel>版本</DescriptionsLabel>
+          <DescriptionsContent>v0.8</DescriptionsContent>
+        </DescriptionsItem>
+      </Descriptions>
+    </div>
+  ),
+};
+
+/** 冒号开关：默认不带冒号，需要时显式 `colon` 开启。 */
+export const Colon: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Descriptions title="默认不带冒号" column={2}>
+        <DescriptionsItem>
+          <DescriptionsLabel>名称</DescriptionsLabel>
+          <DescriptionsContent>evo</DescriptionsContent>
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <DescriptionsLabel>版本</DescriptionsLabel>
+          <DescriptionsContent>v0.8</DescriptionsContent>
+        </DescriptionsItem>
+      </Descriptions>
+      <Descriptions title="显式开启冒号" colon column={2}>
+        <DescriptionsItem>
+          <DescriptionsLabel>名称</DescriptionsLabel>
+          <DescriptionsContent>evo</DescriptionsContent>
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <DescriptionsLabel>版本</DescriptionsLabel>
+          <DescriptionsContent>v0.8</DescriptionsContent>
+        </DescriptionsItem>
+      </Descriptions>
+    </div>
+  ),
+};
+
+/** 响应式列数：viewport 断点驱动。在 Storybook viewport 切换查看。 */
+export const Responsive: Story = {
+  args: {
+    title: '响应式列数',
+    column: { xs: 1, sm: 2, md: 3, lg: 4 },
+  },
+  render: (args) => (
+    <Descriptions {...args}>
+      <BaseItems />
+    </Descriptions>
+  ),
+};
+
+/** 跨列：通过 span 合并多列。 */
+export const WithSpan: Story = {
+  args: { title: '跨列展示', bordered: true, column: 3 },
+  render: (args) => (
+    <Descriptions {...args}>
+      <DescriptionsItem>
+        <DescriptionsLabel>名称</DescriptionsLabel>
+        <DescriptionsContent>Teamix Evo</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>版本</DescriptionsLabel>
+        <DescriptionsContent>v0.8</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>语言</DescriptionsLabel>
+        <DescriptionsContent>TypeScript</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem span={3}>
+        <DescriptionsLabel>描述</DescriptionsLabel>
+        <DescriptionsContent>
+          面向 AI Coding 的研发套件，覆盖设计、组件、技能。
+        </DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/**
+ * label 旁带 Tooltip 图标：在 `<DescriptionsLabel>` 子树内直接拼装 `<Tooltip>`。
+ * 高频使用建议在自己工程抽一个 `<HelpLabel label tip />` helper（5 行即可）。
+ */
+export const WithTooltip: Story = {
+  args: { title: '带 Tooltip', column: 2 },
+  render: (args) => (
+    <Descriptions {...args}>
+      <DescriptionsItem>
+        <DescriptionsLabel>
+          实例 ID
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label="字段说明"
+                className="inline-flex cursor-pointer items-center text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <InfoIcon className="size-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>云资源唯一标识</TooltipContent>
+          </Tooltip>
+        </DescriptionsLabel>
+        <DescriptionsContent>i-2zee0xxx</DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>
+          收藏
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label="字段说明"
+                className="inline-flex cursor-pointer items-center text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <StarIcon className="size-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>收藏后可在工作台直接进入</TooltipContent>
+          </Tooltip>
+        </DescriptionsLabel>
+        <DescriptionsContent>已收藏</DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/** content 内部混排其他组件（Tag / 行内按钮等）—— 全部直接塞进 `<DescriptionsContent>`。 */
+export const WithRichContent: Story = {
+  args: { title: 'content 混排', column: 2 },
+  render: (args) => (
+    <Descriptions {...args}>
+      <DescriptionsItem>
+        <DescriptionsLabel>实例 ID</DescriptionsLabel>
+        <DescriptionsContent>
+          <span className="inline-flex items-center gap-2">
+            i-2zee0xxxxxxx
+            <Button variant="ghost" size="sm" aria-label="复制">
+              <CopyIcon />
+            </Button>
+          </span>
+        </DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>状态</DescriptionsLabel>
+        <DescriptionsContent>
+          <Tag color="success">运行中</Tag>
+        </DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/**
+ * 控件高度对齐：horizontal 非 bordered 模式下label 默认 `min-h-6`（24px）与 sm
+ * Button / Tag 同高，顶对齐 = 视觉基线对齐。若 content 是 h-8 / h-10 等更高控件，
+ * 用 `<DescriptionsItem align="center">` 让 label 与控件整体居中。
+ */
+export const ControlAlignment: Story = {
+  args: { title: '控件对齐示例', column: 2 },
+  render: (args) => (
+    <Descriptions {...args}>
+      {/* sm 控件 24px：label min-h-6 同高，默认 align="start" 即可对齐 */}
+      <DescriptionsItem>
+        <DescriptionsLabel>状态</DescriptionsLabel>
+        <DescriptionsContent>
+          <Tag color="success">运行中</Tag>
+        </DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem>
+        <DescriptionsLabel>实例 ID</DescriptionsLabel>
+        <DescriptionsContent>
+          <span className="inline-flex items-center gap-2">
+            i-2zee0xxxxxxx
+            <Button variant="ghost" size="sm" aria-label="复制">
+              <CopyIcon />
+            </Button>
+          </span>
+        </DescriptionsContent>
+      </DescriptionsItem>
+      {/* default 控件 32px：需 align="center" 让 label 与控件整体居中 */}
+      <DescriptionsItem align="center">
+        <DescriptionsLabel>操作</DescriptionsLabel>
+        <DescriptionsContent>
+          <Button variant="outline">重启实例</Button>
+        </DescriptionsContent>
+      </DescriptionsItem>
+      <DescriptionsItem align="center">
+        <DescriptionsLabel>变更</DescriptionsLabel>
+        <DescriptionsContent>
+          <Button variant="ghost">
+            <RefreshCwIcon /> 同步配置
+          </Button>
+        </DescriptionsContent>
+      </DescriptionsItem>
+    </Descriptions>
+  ),
+};
+
+/** 顶部 extra 槽：放刷新等操作。 */
+export const WithHeaderExtra: Story = {
+  args: {
+    title: '基础信息',
+    extra: (
+      <Button variant="ghost" size="sm">
+        <RefreshCwIcon /> 刷新
+      </Button>
+    ),
+    column: 3,
+  },
+  render: (args) => (
+    <Descriptions {...args}>
+      <BaseItems />
+    </Descriptions>
+  ),
+};
+
+/** 折叠：头部点击展开收起。 */
+export const Collapsible: Story = {
+  args: { title: '可折叠区域', collapsible: true, column: 3 },
+  render: (args) => (
+    <Descriptions {...args}>
+      <BaseItems />
+    </Descriptions>
+  ),
+};

package/src/components/dialog/index.tsx

@@ -0,0 +1,255 @@
+/**
+ * 对话框 Dialog
+ *
+ * 通用模态对话框，用于展示需要用户关注的内容，基于 Radix Dialog 原语。
+ * 采用 shadcn v4 composable 模式：所有结构以子组件显式拼装，size 通过 data-size 驱动。
+ *
+ * 视觉规范：
+ * - 外层容器圆角走主题默认（`rounded-md`），自身不带 padding，由 Header / Body / Footer 各自控制
+ * - Header 区：`pt-3 pr-14 pb-3 pl-5`（右侧 56px 给关闭按钮预留），底部 1px 分隔线（默认 `border-border`，可 className 覆盖）
+ * - Body 区：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground
+ * - Footer 区：`px-5 py-4`，顶部分隔线默认透明
+ * - 关闭按钮：`absolute top-3 right-5`，可点击区 20px
+ *
+ * @when
+ * - 表单编辑弹窗
+ * - 详情信息展示
+ * - 工作流子步骤弹出层
+ * - 危险操作前的二次确认（推荐使用 AlertDialog）
+ */
+'use client';
+
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import { XIcon } from 'lucide-react';
+
+export interface DialogProps
+  extends Omit<
+    React.ComponentProps<typeof DialogPrimitive.Root>,
+    'open' | 'defaultOpen' | 'onOpenChange' | 'modal'
+  > {
+  /** 受控显示状态。 */
+  open?: boolean;
+  /** 非受控初始显示状态。 @default false */
+  defaultOpen?: boolean;
+  /**
+   * 显示 / 关闭状态变化回调。
+   * @param open 当前是否显示
+   */
+  onOpenChange?: (open: boolean) => void;
+  /** 是否模态（背景遮罩 + 阻止外部交互）。 @default true */
+  modal?: boolean;
+}
+
+function Dialog({ ...props }: DialogProps) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 isolate 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。
+ *
+ * 通过 `size` 控制最大宽度（参考 cloud-design Dialog 的 mini/small/medium/large）：
+ * - `sm`：紧凑表单或确认场景（≈ 400px）
+ * - `md`：通用表单（≈ 600px）
+ * - `lg`：信息展示与多列布局（≈ 800px）
+ * - `xl`：宽幅复杂内容（≈ 1200px）
+ */
+function DialogContent({
+  className,
+  children,
+  size = 'sm',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  /** 内容区尺寸。 @default 'sm' */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** 是否显示右上角关闭按钮。 @default true */
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        data-size={size}
+        className={cn(
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- mobile viewport needs calc(100% - 2rem) for safe inset; box-shadow drives via component-level token --dialog-shadow per ADR 0026.
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md bg-popover text-sm text-popover-foreground shadow-[var(--dialog-shadow,0px_6px_24px_0px_rgba(0,0,0,0.1))] duration-100 outline-none data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-xl data-[size=lg]:sm:max-w-3xl data-[size=xl]:sm:max-w-6xl data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-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>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+/**
+ * Header 容器，标题 / 描述 / 标题右侧附加内容（DialogHeaderExtra）的布局承载。
+ *
+ * 视觉规范：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`，消费侧可
+ * 通过 `className="border-transparent"` 关闭。当存在 DialogHeaderExtra 时自动切换为
+ * grid 双列：左侧 title + 下方 description（跨列），右侧 extra 居顶对齐。
+ */
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        'flex flex-col gap-1.5 border-b border-border pt-3 pr-14 pb-3 pl-5 has-data-[slot=dialog-header-extra]:grid has-data-[slot=dialog-header-extra]:grid-cols-[1fr_auto] has-data-[slot=dialog-header-extra]:items-start has-data-[slot=dialog-header-extra]:gap-x-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 标题右侧附加内容（如帮助链接、外部跳转）。
+ *
+ * 推荐放置低权重的次要操作，避免与主按钮抢焦点。需放在 DialogHeader 内，
+ * description 会自动跨列贴在 title 下方。
+ */
+function DialogHeaderExtra({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header-extra"
+      className={cn(
+        'col-start-2 row-start-1 flex shrink-0 items-center gap-2 self-start text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 内容区容器（Body）。
+ *
+ * 视觉规范：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground。
+ * 包裹表单 / 详情等正文内容；若需自定义滚动行为，外层 className 加 `overflow-y-auto`。
+ */
+function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn('px-5 pt-4 pb-5 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Footer 容器。
+ *
+ * 视觉规范：`px-5 py-4`，顶部分隔线默认透明（消费侧可通过 className 覆盖）。
+ * 移动端按钮垂直反向堆叠，sm 及以上水平右对齐。
+ */
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 border-t border-transparent px-5 py-4 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        'col-start-1 row-start-1 text-sm leading-5 font-medium text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        'col-span-full text-sm text-muted-foreground *:[a]:text-primary *:[a]:hover:text-primary/80',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogHeaderExtra,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};