@teamix-evo/ui 0.6.1 → 0.7.0

package/manifest.json

@@ -1150,6 +1150,11 @@
           "source": "src/components/tree/index.tsx",
           "targetAlias": "components",
           "targetName": "tree.tsx"
+        },
+        {
+          "source": "src/components/tree/utils.ts",
+          "targetAlias": "components",
+          "targetName": "utils.ts"
         }
       ],
       "meta": "src/components/tree/meta.md",
@@ -1372,7 +1377,7 @@
         }
       ],
       "meta": "src/components/tree-select/meta.md",
-      "registryDependencies": ["cn", "popover", "checkbox"],
+      "registryDependencies": ["cn", "popover", "checkbox", "tree"],
       "dependencies": {
         "lucide-react": "^0.460.0",
         "class-variance-authority": "^0.7.1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix-evo/ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Source-injected UI components for Teamix Evo (shadcn-based, antd capabilities)",
   "type": "module",
   "files": [
@@ -51,9 +51,9 @@
     "vite": "^5.4.0",
     "vite-tsconfig-paths": "^6.1.1",
     "zod": "^3",
+    "@teamix-evo/registry": "0.12.0",
     "@teamix-evo/eslint-config": "0.2.3",
-    "@teamix-evo/tokens": "^0.7.2",
-    "@teamix-evo/registry": "0.12.0"
+    "@teamix-evo/tokens": "^0.8.0"
   },
   "publishConfig": {
     "access": "public",

package/src/components/data-table/index.tsx

@@ -289,12 +289,6 @@ function alignClass(align?: DataTableColumn<unknown>['align']) {
   return undefined;
 }
 
-function widthStyle(col: DataTableColumn<unknown>): React.CSSProperties {
-  const w = col.size ?? col.width;
-  if (w === undefined) return {};
-  return { width: typeof w === 'number' ? `${w}px` : w };
-}
-
 /** 把 DataTableColumn 适配为 TanStack ColumnDef；同时按 fixed 重排（左→中→右）以满足锁列 sticky 计算。 */
 function adaptColumns<T>(
   columns: DataTableColumn<T>[],

package/src/components/date-picker/index.tsx

@@ -50,7 +50,6 @@ import { Spinner } from '@/components/spinner';
 import {
   TimePickerPanel,
   parseTime,
-  formatTime,
   triggerVariants,
   type TimeParts,
   type TriggerSize,

package/src/components/dialog/index.tsx

@@ -23,6 +23,7 @@ import * as React from 'react';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
+import { useRadixPopperGuard } from '@/hooks/use-radix-popper-guard';
 import { XIcon } from 'lucide-react';
 
 export interface DialogProps
@@ -95,6 +96,7 @@ function DialogContent({
   children,
   size = 'sm',
   showCloseButton = true,
+  onPointerDownOutside,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   /** 内容区尺寸。 @default 'sm' */
@@ -102,12 +104,18 @@ function DialogContent({
   /** 是否显示右上角关闭按钮。 @default true */
   showCloseButton?: boolean;
 }) {
+  const guard = useRadixPopperGuard();
+
   return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         data-size={size}
+        onPointerDownOutside={(e) => {
+          guard.onPointerDownOutside(e);
+          onPointerDownOutside?.(e);
+        }}
         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',
@@ -199,7 +207,8 @@ function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <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',
+        // 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,
       )}
       {...props}

package/src/components/page-header/stories.tsx

@@ -39,8 +39,94 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-/** 完整版页头：面包屑 + 帮助链接 + 返回 + 主图标 + 标题（含 ⓘ） + 描述 + 多操作 + 底部信息。 */
+/** 仅标题：最基础的页头形态，只包含一个标题。 */
 export const Default: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderContent>
+        <PageHeaderHeading>
+          <PageHeaderTitle>页面标题</PageHeaderTitle>
+        </PageHeaderHeading>
+      </PageHeaderContent>
+    </PageHeader>
+  ),
+};
+
+/** 标题 + 描述：标题下方附加一行描述文字。 */
+export const WithDescription: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderContent>
+        <div className="flex flex-col">
+          <PageHeaderHeading>
+            <PageHeaderTitle>页面标题</PageHeaderTitle>
+          </PageHeaderHeading>
+          <PageHeaderDescription>
+            页面描述页面描述页面描述页面描述页面描述页面描述页面描述
+          </PageHeaderDescription>
+        </div>
+      </PageHeaderContent>
+    </PageHeader>
+  ),
+};
+
+/** 仅面包屑：只有面包屑导航，无标题。 */
+export const OnlyBreadcrumb: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderNav>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">实例列表</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>实例详情</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeaderNav>
+    </PageHeader>
+  ),
+};
+
+/** 面包屑 + 标题：面包屑导航 + 标题，常见于二级页面。 */
+export const WithBreadcrumb: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderNav>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">实例列表</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>实例详情</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeaderNav>
+      <PageHeaderContent>
+        <PageHeaderHeading>
+          <PageHeaderTitle>实例详情</PageHeaderTitle>
+        </PageHeaderHeading>
+      </PageHeaderContent>
+    </PageHeader>
+  ),
+};
+
+/** 完整版页头：面包屑 + 帮助链接 + 返回 + 主图标 + 标题（含 ⓘ） + 描述 + 多操作。 */
+export const Full: Story = {
   render: () => (
     <PageHeader>
       <PageHeaderNav>

package/src/components/sheet/index.tsx

@@ -25,6 +25,7 @@ import * as React from 'react';
 import { Dialog as SheetPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
+import { useRadixPopperGuard } from '@/hooks/use-radix-popper-guard';
 import { XIcon } from 'lucide-react';
 
 export interface SheetProps
@@ -104,6 +105,7 @@ function SheetContent({
   side = 'right',
   size = 'sm',
   showCloseButton = true,
+  onPointerDownOutside,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   /** 弹出方向。 @default 'right' */
@@ -113,6 +115,8 @@ function SheetContent({
   /** 是否显示右上角关闭按钮。 @default true */
   showCloseButton?: boolean;
 }) {
+  const guard = useRadixPopperGuard();
+
   return (
     <SheetPortal>
       <SheetOverlay />
@@ -120,6 +124,10 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         data-size={size}
+        onPointerDownOutside={(e) => {
+          guard.onPointerDownOutside(e);
+          onPointerDownOutside?.(e);
+        }}
         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 在源码内显式声明。
@@ -237,7 +245,8 @@ function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <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',
+        // eslint-disable-next-line teamix-evo/no-bare-border -- border-footer-separator 是 @theme 声明的语义 token，已加入 lint-core 白名单
+        'flex flex-col gap-2 border-t border-footer-separator px-4 py-2.5 sm:flex-row sm:justify-start',
         className,
       )}
       {...props}

package/src/components/table/index.tsx

@@ -154,7 +154,7 @@ function Table({
 // ─── TableHeader ────────────────────────────────────────────────────────────
 
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  const { stickyHeader, bordered, size } = useTableContext();
+  const { stickyHeader } = useTableContext();
   return (
     <thead
       data-slot="table-header"

package/src/components/tabs/index.tsx

@@ -269,7 +269,7 @@ const tabsTriggerVariants = cva(
   {
     variants: {
       variant: {
-        line: '-mb-px border-b-2 border-transparent text-muted-foreground data-[state=active]:border-primary data-[state=active]:text-foreground group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:border-b-0 group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:justify-start',
+        line: '-mb-px border-b-2 border-transparent text-muted-foreground data-[state=active]:border-tab-indicator data-[state=active]:text-foreground group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:border-b-0 group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:justify-start',
         capsule:
           'rounded-md text-muted-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
         // text 模式：trigger 间 ::after 竖线分隔（8px 高、1px 宽、垂直居中、border 色）