@teamix-evo/ui 0.7.1 → 0.7.2

package/src/components/descriptions/meta.md

@@ -45,6 +45,81 @@ DescriptionsContent 自由组合，label 与 content 都是 ReactNode 槽位，
 
 ## 示例
 
+### Vertical
+
+垂直布局：label 与 content 上下堆叠。
+
+```tsx
+<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>
+```
+
+### Bordered
+
+带边框矩阵：经典 antd 风格。
+
+```tsx
+<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>
+```
+
+### BorderedVertical
+
+带边框 + 垂直布局：label 在上 content 在下。
+
+```tsx
+<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>
+```
+
 ### Sizes
 
 不同尺寸：sm / default 对比。
@@ -102,3 +177,173 @@ DescriptionsContent 自由组合，label 与 content 都是 ReactNode 槽位，
   </Descriptions>
 </div>
 ```
+
+### Responsive
+
+响应式列数：viewport 断点驱动。在 Storybook viewport 切换查看。
+
+```tsx
+<Descriptions {...args}>
+  <BaseItems />
+</Descriptions>
+```
+
+### WithSpan
+
+跨列：通过 span 合并多列。
+
+```tsx
+<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>
+```
+
+### WithTooltip
+
+label 旁带 Tooltip 图标：在 `<DescriptionsLabel>` 子树内直接拼装 `<Tooltip>`。 高频使用建议在自己工程抽一个 `<HelpLabel label tip />` helper（5 行即可）。
+
+```tsx
+<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>
+```
+
+### WithRichContent
+
+content 内部混排其他组件（Tag / 行内按钮等）—— 全部直接塞进 `<DescriptionsContent>`。
+
+```tsx
+<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>
+```
+
+### ControlAlignment
+
+控件高度对齐：horizontal 非 bordered 模式下label 默认 `min-h-6`（24px）与 sm Button / Tag 同高，顶对齐 = 视觉基线对齐。若 content 是 h-8 / h-10 等更高控件， 用 `<DescriptionsItem align="center">` 让 label 与控件整体居中。
+
+```tsx
+<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>
+```
+
+### WithHeaderExtra
+
+顶部 extra 槽：放刷新等操作。
+
+```tsx
+<Descriptions {...args}>
+  <BaseItems />
+</Descriptions>
+```
+
+### Collapsible
+
+折叠：头部点击展开收起。
+
+```tsx
+<Descriptions {...args}>
+  <BaseItems />
+</Descriptions>
+```

package/src/components/dialog/index.tsx

@@ -74,7 +74,7 @@ function DialogOverlay({
     <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',
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 supports-backdrop-filter:backdrop-blur-xs',
         className,
       )}
       {...props}
@@ -118,7 +118,7 @@ function DialogContent({
         }}
         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',
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=lg]:sm:max-w-3xl data-[size=md]:sm:max-w-xl data-[size=sm]:sm:max-w-md data-[size=xl]:sm:max-w-6xl',
           className,
         )}
         {...props}
@@ -150,7 +150,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <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',
+        'flex flex-col gap-1.5 border-b border-border py-3 pr-14 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}
@@ -207,7 +207,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        // eslint-disable-next-line teamix-evo/no-bare-border -- border-footer-separator 是 @theme 声明的语义 token，已加入 lint-core 白名单
+         
         'flex flex-col-reverse gap-2 border-t border-footer-separator px-5 py-4 sm:flex-row sm:justify-end',
         className,
       )}

package/src/components/dialog/meta.md

@@ -165,6 +165,52 @@
 </Dialog>
 ```
 
+### AsyncSubmit
+
+异步提交 — onSubmit 返回 Promise，按钮 loading 期间禁止关闭。
+
+```tsx
+const [open, setOpen] = React.useState(false);
+const [loading, setLoading] = React.useState(false);
+const onConfirm = async () => {
+  setLoading(true);
+  await new Promise((r) => setTimeout(r, 1500));
+  setLoading(false);
+  setOpen(false);
+};
+return (
+  <Dialog
+    open={open}
+    onOpenChange={(next) => {
+      if (loading) return;
+      setOpen(next);
+    }}
+  >
+    <DialogTrigger asChild>
+      <Button>打开</Button>
+    </DialogTrigger>
+    <DialogContent
+      onPointerDownOutside={(e) => loading && e.preventDefault()}
+      onEscapeKeyDown={(e) => loading && e.preventDefault()}
+    >
+      <DialogHeader>
+        <DialogTitle>确认删除？</DialogTitle>
+      </DialogHeader>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline" disabled={loading}>
+            取消
+          </Button>
+        </DialogClose>
+        <Button loading={loading} onClick={onConfirm}>
+          确认
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+```
+
 ### NoCloseButton
 
 隐藏关闭按钮 — 强制通过底部操作关闭，常用于流程类强引导。
@@ -196,7 +242,7 @@
   <DialogTrigger asChild>
     <Button>全屏打开</Button>
   </DialogTrigger>
-  <DialogContent className="inset-0 top-0 left-0 max-w-none -translate-x-0 -translate-y-0 grid-rows-[auto_1fr_auto] rounded-none data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:zoom-out-100 data-[state=closed]:slide-out-to-bottom-2 sm:max-w-none">
+  <DialogContent className="inset-0 top-0 left-0 max-w-none grid-rows-[auto_1fr_auto] rounded-none data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:zoom-out-100 data-[state=closed]:slide-out-to-bottom-2 sm:max-w-none -translate-0">
     <DialogHeader>
       <DialogTitle>全屏编辑</DialogTitle>
     </DialogHeader>

package/src/components/dialog/stories.tsx

@@ -206,48 +206,45 @@ export const LargeContent: Story = {
 export const AsyncSubmit: Story = {
   name: '异步提交',
   render: () => {
-    function Demo() {
-      const [open, setOpen] = React.useState(false);
-      const [loading, setLoading] = React.useState(false);
-      const onConfirm = async () => {
-        setLoading(true);
-        await new Promise((r) => setTimeout(r, 1500));
-        setLoading(false);
-        setOpen(false);
-      };
-      return (
-        <Dialog
-          open={open}
-          onOpenChange={(next) => {
-            if (loading) return;
-            setOpen(next);
-          }}
+    const [open, setOpen] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const onConfirm = async () => {
+      setLoading(true);
+      await new Promise((r) => setTimeout(r, 1500));
+      setLoading(false);
+      setOpen(false);
+    };
+    return (
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          if (loading) return;
+          setOpen(next);
+        }}
+      >
+        <DialogTrigger asChild>
+          <Button>打开</Button>
+        </DialogTrigger>
+        <DialogContent
+          onPointerDownOutside={(e) => loading && e.preventDefault()}
+          onEscapeKeyDown={(e) => loading && e.preventDefault()}
         >
-          <DialogTrigger asChild>
-            <Button>打开</Button>
-          </DialogTrigger>
-          <DialogContent
-            onPointerDownOutside={(e) => loading && e.preventDefault()}
-            onEscapeKeyDown={(e) => loading && e.preventDefault()}
-          >
-            <DialogHeader>
-              <DialogTitle>确认删除？</DialogTitle>
-            </DialogHeader>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="outline" disabled={loading}>
-                  取消
-                </Button>
-              </DialogClose>
-              <Button loading={loading} onClick={onConfirm}>
-                确认
+          <DialogHeader>
+            <DialogTitle>确认删除？</DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline" disabled={loading}>
+                取消
               </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      );
-    }
-    return <Demo />;
+            </DialogClose>
+            <Button loading={loading} onClick={onConfirm}>
+              确认
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
   },
 };
 
@@ -281,7 +278,7 @@ export const Fullscreen: Story = {
       <DialogTrigger asChild>
         <Button>全屏打开</Button>
       </DialogTrigger>
-      <DialogContent className="inset-0 top-0 left-0 max-w-none -translate-x-0 -translate-y-0 grid-rows-[auto_1fr_auto] rounded-none data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:zoom-out-100 data-[state=closed]:slide-out-to-bottom-2 sm:max-w-none">
+      <DialogContent className="inset-0 top-0 left-0 max-w-none grid-rows-[auto_1fr_auto] rounded-none data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:zoom-out-100 data-[state=closed]:slide-out-to-bottom-2 sm:max-w-none -translate-0">
         <DialogHeader>
           <DialogTitle>全屏编辑</DialogTitle>
         </DialogHeader>

package/src/components/dropdown-menu/index.tsx

@@ -72,7 +72,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          'z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden 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',
+          'z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:overflow-hidden data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -104,7 +104,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className,
       )}
       {...props}
@@ -126,7 +126,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -169,7 +169,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -274,7 +274,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'z-50 min-w-24 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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',
+        'z-50 min-w-24 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}

package/src/components/empty/index.tsx

@@ -43,7 +43,7 @@ const emptyVariants = cva(
     variants: {
       layout: {
         vertical: 'flex-col text-center',
-        horizontal: 'flex-row text-left min-h-80',
+        horizontal: 'min-h-80 flex-row text-left',
       },
       size: {
         sm: 'p-4',
@@ -386,7 +386,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="empty-title"
       className={cn(
-        'font-medium tracking-tight text-foreground group-data-[size=sm]/empty:text-sm group-data-[size=default]/empty:text-base group-data-[size=lg]/empty:text-2xl group-data-[size=lg]/empty:leading-9 group-data-[layout=horizontal]/empty:text-muted-foreground',
+        'font-medium tracking-tight text-foreground group-data-[layout=horizontal]/empty:text-muted-foreground group-data-[size=default]/empty:text-base group-data-[size=lg]/empty:text-2xl group-data-[size=lg]/empty:leading-9 group-data-[size=sm]/empty:text-sm',
         className,
       )}
       {...props}

package/src/components/field/index.tsx

@@ -158,7 +158,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="field-group"
       className={cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-5 [&>[data-slot=field-set]+[data-slot=field-set]]:mt-3 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 [&>[data-slot=field-set]+[data-slot=field-set]]:mt-3',
         className,
       )}
       {...props}
@@ -173,7 +173,7 @@ const fieldVariants = cva(
       orientation: {
         vertical: 'flex-col gap-1 *:w-full [&>.sr-only]:w-auto',
         responsive:
-          'flex-col gap-1 *:w-full @[30rem]/field-group:grid @[30rem]/field-group:grid-cols-12 @[30rem]/field-group:gap-x-4 @[30rem]/field-group:gap-y-1 @[30rem]/field-group:items-start @[30rem]/field-group:[&>[data-slot=field-label]]:col-span-2 @[30rem]/field-group:[&>:not([data-slot=field-label])]:col-span-8 @[30rem]/field-group:[&>:not([data-slot=field-label])]:col-start-3 [&>.sr-only]:w-auto',
+          'flex-col gap-1 *:w-full @[30rem]/field-group:grid @[30rem]/field-group:grid-cols-12 @[30rem]/field-group:items-start @[30rem]/field-group:gap-x-4 @[30rem]/field-group:gap-y-1 [&>.sr-only]:w-auto @[30rem]/field-group:[&>:not([data-slot=field-label])]:col-span-8 @[30rem]/field-group:[&>:not([data-slot=field-label])]:col-start-3 @[30rem]/field-group:[&>[data-slot=field-label]]:col-span-2',
         inset: 'flex-col gap-1',
       },
     },
@@ -243,7 +243,7 @@ function FieldLabel({
       className={cn(
         'group/field-label peer/field-label flex w-fit gap-1 leading-8 group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
         'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
-        'group-data-[orientation=inset]/field:h-full group-data-[orientation=inset]/field:shrink-0 group-data-[orientation=inset]/field:items-center group-data-[orientation=inset]/field:pl-3 group-data-[orientation=inset]/field:pr-2 group-data-[orientation=inset]/field:leading-normal group-data-[orientation=inset]/field:text-muted-foreground',
+        'group-data-[orientation=inset]/field:h-full group-data-[orientation=inset]/field:shrink-0 group-data-[orientation=inset]/field:items-center group-data-[orientation=inset]/field:pr-2 group-data-[orientation=inset]/field:pl-3 group-data-[orientation=inset]/field:leading-normal group-data-[orientation=inset]/field:text-muted-foreground',
         className,
       )}
       {...props}
@@ -351,7 +351,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn('text-xs font-normal text-destructive -mt-1', className)}
+      className={cn('-mt-1 text-xs font-normal text-destructive', className)}
       {...props}
     >
       {content}

package/src/components/filter-bar/index.tsx

@@ -470,7 +470,7 @@ function FilterBarSearchKey({ options, className }: FilterBarSearchKeyProps) {
       <SelectTrigger
         size="sm"
         className={cn(
-          'h-full rounded-none border-0 border-r border-r-input bg-transparent shadow-none focus-visible:ring-0 focus:border-r-input data-[state=open]:border-r-input',
+          'h-full rounded-none border-0 border-r border-r-input bg-transparent shadow-none focus:border-r-input focus-visible:ring-0 data-[state=open]:border-r-input',
           className,
         )}
       >
@@ -624,12 +624,12 @@ function FilterBarContent({
       >
         <div
           className={cn(
-            'grid gap-x-4 gap-y-3 rounded-md bg-muted px-4 py-4',
-            '[&_[data-slot=input]]:bg-card [&_[data-slot=select-trigger]]:bg-card [&_[data-slot=input-number]]:bg-card [&_[data-slot=textarea]]:bg-card',
+            'grid gap-x-4 gap-y-3 rounded-md bg-muted p-4',
+            '[&_[data-slot=input-number]]:bg-card [&_[data-slot=input]]:bg-card [&_[data-slot=select-trigger]]:bg-card [&_[data-slot=textarea]]:bg-card',
             // 面板内表单控件统一全宽（仅作用于 FilterBarContent 子树）
-            '[&_[data-slot=input]]:w-full [&_[data-slot=input-group]]:w-full [&_[data-slot=input-number]]:w-full [&_[data-slot=input-ip]]:w-full [&_[data-slot=textarea]]:w-full',
-            '[&_[data-slot=select-trigger]]:w-full [&_[data-slot=cascader-select-trigger]]:w-full [&_[data-slot=tree-select-trigger]]:w-full',
-            '[&_[data-slot=date-picker]]:w-full [&_[data-slot=date-range-picker]]:w-full [&_[data-slot=time-picker]]:w-full [&_[data-slot=time-range-picker]]:w-full [&_[data-slot=mentions]]:w-full',
+            '[&_[data-slot=input-group]]:w-full [&_[data-slot=input-ip]]:w-full [&_[data-slot=input-number]]:w-full [&_[data-slot=input]]:w-full [&_[data-slot=textarea]]:w-full',
+            '[&_[data-slot=cascader-select-trigger]]:w-full [&_[data-slot=select-trigger]]:w-full [&_[data-slot=tree-select-trigger]]:w-full',
+            '[&_[data-slot=date-picker]]:w-full [&_[data-slot=date-range-picker]]:w-full [&_[data-slot=mentions]]:w-full [&_[data-slot=time-picker]]:w-full [&_[data-slot=time-range-picker]]:w-full',
             colClass,
           )}
         >