@pactor-app/ui 1.8.0 → 1.9.0

package/dist/index.js

@@ -71,7 +71,7 @@ import {
   createComponentRegistry,
   registerBuiltinComponents,
   useFormContext
-} from "./chunk-7YOIAVV6.js";
+} from "./chunk-KUFQSYTS.js";
 import {
   InteractionProvider,
   OVERLAY_CANCEL_PAYLOAD,
@@ -79,7 +79,7 @@ import {
   OverlayManager,
   createUiBridge,
   registerInteractionActions
-} from "./chunk-7KC6DMKH.js";
+} from "./chunk-S3SMCICK.js";
 import {
   AdminLayout,
   BlankLayout,
@@ -101,7 +101,7 @@ import {
   normalizeIconName,
   useSidebarDrawer
 } from "./chunk-PECP7DJB.js";
-import "./chunk-XUIXZJDQ.js";
+import "./chunk-VT5XP4U4.js";
 import "./chunk-F42SGQNW.js";
 import "./chunk-VM4FESQB.js";
 import "./chunk-WKJUCGV4.js";

package/dist/interaction/index.cjs

@@ -422,6 +422,7 @@ function InteractionProvider({
   children
 }) {
   const [confirmState, setConfirmState] = (0, import_react.useState)(null);
+  const [confirmOpen, setConfirmOpen] = (0, import_react.useState)(false);
   const [toasts, setToasts] = (0, import_react.useState)([]);
   const { t } = (0, import_runtime2.useI18n)();
   const { modal, message } = (0, import_react.useMemo)(() => {
@@ -435,6 +436,7 @@ function InteractionProvider({
     const modalImpl = {
       confirm(config) {
         setConfirmState({ ...config });
+        setConfirmOpen(true);
       }
     };
     const messageImpl = {
@@ -455,12 +457,12 @@ function InteractionProvider({
   }, [bridge, modal, message]);
   const handleOk = () => {
     const state = confirmState;
-    setConfirmState(null);
+    setConfirmOpen(false);
     state?.onOk?.();
   };
   const handleCancel = () => {
     const state = confirmState;
-    setConfirmState(null);
+    setConfirmOpen(false);
     state?.onCancel?.();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -470,12 +472,17 @@ function InteractionProvider({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Dialog,
           {
-            open: confirmState !== null,
+            open: confirmOpen,
             onOpenChange: (open) => {
               if (!open) {
                 handleCancel();
               }
             },
+            onOpenChangeComplete: (open) => {
+              if (!open) {
+                setConfirmState(null);
+              }
+            },
             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogContent, { "data-slot": "confirm-dialog", className: "sm:max-w-sm", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogHeader, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogTitle, { children: confirmState?.title ?? "" }),

package/dist/interaction/index.d.cts

@@ -142,7 +142,9 @@ interface InteractionProviderProps {
  * InteractionProvider：mount 时向 UiBridge 注入自绘实现：
  *
  * - `modal.confirm({ title, content, onOk, onCancel })`：vendored shadcn
- *   Dialog 渲染确认框，确定/取消回调后关闭（先关闭再回调）；
+ *   Dialog 渲染确认框，确定/取消时先关闭再回调（与 antd Modal.confirm
+ *   时序一致）；内容状态与 open 标志分离，待关闭动画结束才清空，
+ *   避免退出动画期间渲染空内容导致闪烁；
  * - `message.{success,error,info,warning}`：toast 栈（容器固定右上角，
  *   自动约 3s 消失，类型色条读语义令牌）。
  *

package/dist/interaction/index.d.ts

@@ -142,7 +142,9 @@ interface InteractionProviderProps {
  * InteractionProvider：mount 时向 UiBridge 注入自绘实现：
  *
  * - `modal.confirm({ title, content, onOk, onCancel })`：vendored shadcn
- *   Dialog 渲染确认框，确定/取消回调后关闭（先关闭再回调）；
+ *   Dialog 渲染确认框，确定/取消时先关闭再回调（与 antd Modal.confirm
+ *   时序一致）；内容状态与 open 标志分离，待关闭动画结束才清空，
+ *   避免退出动画期间渲染空内容导致闪烁；
  * - `message.{success,error,info,warning}`：toast 栈（容器固定右上角，
  *   自动约 3s 消失，类型色条读语义令牌）。
  *

package/dist/interaction/index.js

@@ -5,7 +5,7 @@ import {
   OverlayManager,
   createUiBridge,
   registerInteractionActions
-} from "../chunk-7KC6DMKH.js";
+} from "../chunk-S3SMCICK.js";
 import "../chunk-F42SGQNW.js";
 import "../chunk-WKJUCGV4.js";
 export {

package/dist/ui/index.cjs

@@ -4554,6 +4554,7 @@ function TableCaption({
 
 // src/ui/tabs.tsx
 var import_tabs = require("@base-ui/react/tabs");
+var import_class_variance_authority9 = require("class-variance-authority");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function Tabs({
   className,
@@ -4568,18 +4569,31 @@ function Tabs({
     }
   );
 }
+var tabsListVariants = (0, import_class_variance_authority9.cva)(
+  "group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        default: "h-9 rounded-lg bg-muted p-[3px]",
+        line: "h-auto gap-1 rounded-none border-b border-border bg-transparent p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
 function TabsList({
   className,
+  variant,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_tabs.Tabs.List,
     {
       "data-slot": "tabs-list",
-      className: cn(
-        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
-        className
-      ),
+      "data-variant": variant ?? "default",
+      className: cn(tabsListVariants({ variant }), className),
       ...props
     }
   );
@@ -4593,7 +4607,12 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:border-border data-active:bg-card data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // default 变体：激活态胶囊（边框 + 卡片底 + 阴影）
+        "group-data-[variant=default]/tabs-list:data-active:border-border group-data-[variant=default]/tabs-list:data-active:bg-card group-data-[variant=default]/tabs-list:data-active:shadow-sm",
+        // line 变体：下划线指示——弱化未激活文字，激活态底部 2px 主色线
+        //（叠在 List 的底边轨道上），无底色/圆角/阴影
+        "group-data-[variant=line]/tabs-list:-mb-px group-data-[variant=line]/tabs-list:h-9 group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-x-0 group-data-[variant=line]/tabs-list:border-t-0 group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:py-1.5 group-data-[variant=line]/tabs-list:text-muted-foreground group-data-[variant=line]/tabs-list:data-active:border-b-primary group-data-[variant=line]/tabs-list:data-active:text-foreground",
         className
       ),
       ...props
@@ -4635,9 +4654,9 @@ function Textarea({
 
 // src/ui/toggle.tsx
 var import_toggle = require("@base-ui/react/toggle");
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var toggleVariants = (0, import_class_variance_authority9.cva)(
+var toggleVariants = (0, import_class_variance_authority10.cva)(
   "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-pressed:bg-accent data-pressed:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
@@ -4733,9 +4752,9 @@ function ToggleGroupItem({
 }
 
 // src/ui/typography.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var typographyVariants = (0, import_class_variance_authority10.cva)("", {
+var typographyVariants = (0, import_class_variance_authority11.cva)("", {
   variants: {
     variant: {
       h1: "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance",

package/dist/ui/index.d.cts

@@ -72,7 +72,7 @@ declare function AlertDescription({ className, ...props }: React.ComponentProps<
  */
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, children, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
@@ -658,9 +658,14 @@ declare function TableCaption({ className, ...props }: React.ComponentProps<'cap
  * 官方源码：https://ui.shadcn.com/r/styles/base-nova/tabs.json
  * Root/List/Tab/Panel 对应原 Radix Root/List/Trigger/Content；激活态属性
  * 由 `data-[state=active]` 换成官方 `data-active` 自定义变体。
+ * List 支持 `variant`（default 胶囊 / line 下划线）；激活态装饰按
+ * `group-data-[variant=*]/tabs-list` 分别限定，两种变体互不污染。
  */
 declare function Tabs({ className, ...props }: Tabs$1.Root.Props): React.JSX.Element;
-declare function TabsList({ className, ...props }: Tabs$1.List.Props): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: Tabs$1.List.Props & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: Tabs$1.Tab.Props): React.JSX.Element;
 declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): React.JSX.Element;
 

package/dist/ui/index.d.ts

@@ -72,7 +72,7 @@ declare function AlertDescription({ className, ...props }: React.ComponentProps<
  */
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, children, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
@@ -658,9 +658,14 @@ declare function TableCaption({ className, ...props }: React.ComponentProps<'cap
  * 官方源码：https://ui.shadcn.com/r/styles/base-nova/tabs.json
  * Root/List/Tab/Panel 对应原 Radix Root/List/Trigger/Content；激活态属性
  * 由 `data-[state=active]` 换成官方 `data-active` 自定义变体。
+ * List 支持 `variant`（default 胶囊 / line 下划线）；激活态装饰按
+ * `group-data-[variant=*]/tabs-list` 分别限定，两种变体互不污染。
  */
 declare function Tabs({ className, ...props }: Tabs$1.Root.Props): React.JSX.Element;
-declare function TabsList({ className, ...props }: Tabs$1.List.Props): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: Tabs$1.List.Props & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: Tabs$1.Tab.Props): React.JSX.Element;
 declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): React.JSX.Element;
 

package/dist/ui/index.js

@@ -160,7 +160,7 @@ import {
   toggleVariants,
   typographyVariants,
   useCarousel
-} from "../chunk-XUIXZJDQ.js";
+} from "../chunk-VT5XP4U4.js";
 import {
   Dialog,
   DialogClose,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Pactor UI kit (shadcn): the single built-in UI kit — vendored shadcn/ui components (Base UI primitives + cva + tailwind-merge + lucide-react), props contracts, interaction core (OverlayManager / UiBridge) and layouts, with build-time Tailwind v4 prebuilt styles.css (zero consumer-side Tailwind config)",
   "keywords": [
     "pactor",
@@ -105,10 +105,10 @@
     "recharts": "^3.10.1",
     "tailwind-merge": "^3.6.0",
     "vaul": "^1.1.2",
-    "@pactor-app/core": "1.8.0",
-    "@pactor-app/runtime": "1.8.0",
-    "@pactor-app/permission": "1.8.0",
-    "@pactor-app/router": "1.8.0"
+    "@pactor-app/core": "1.9.0",
+    "@pactor-app/permission": "1.9.0",
+    "@pactor-app/router": "1.9.0",
+    "@pactor-app/runtime": "1.9.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/styles.css

@@ -1882,6 +1882,33 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .group-data-\[variant\=line\]\/tabs-list\:-mb-px:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    margin-bottom: -1px;
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:h-9:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    height: calc(var(--spacing) * 9);
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:rounded-none:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    border-radius: 0;
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:border-x-0:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 0px;
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:border-t-0:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0px;
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:border-b-2:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:py-1\.5:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:text-muted-foreground:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    color: var(--muted-foreground);
+  }
   .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) {
     display: block;
   }
@@ -2744,25 +2771,31 @@
   .data-closed\:slide-out-to-top:where([data-closed]:not([data-closed='false'])) {
     --tw-exit-translate-y: -100%;
   }
-  .data-active\:border-border:where([data-active]:not([data-active='false'])) {
-    border-color: var(--border);
-  }
   .data-active\:bg-\(--menu-active-background\)\/50:where([data-active]:not([data-active='false'])) {
     background-color: var(--menu-active-background);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--menu-active-background) 50%, transparent);
     }
   }
-  .data-active\:bg-card:where([data-active]:not([data-active='false'])) {
-    background-color: var(--card);
-  }
   .data-active\:text-\(--menu-active-foreground\):where([data-active]:not([data-active='false'])) {
     color: var(--menu-active-foreground);
   }
-  .data-active\:shadow-sm:where([data-active]:not([data-active='false'])) {
+  .group-data-\[variant\=default\]\/tabs-list\:data-active\:border-border:is(:where(.group\/tabs-list)[data-variant="default"] *):where([data-active]:not([data-active='false'])) {
+    border-color: var(--border);
+  }
+  .group-data-\[variant\=default\]\/tabs-list\:data-active\:bg-card:is(:where(.group\/tabs-list)[data-variant="default"] *):where([data-active]:not([data-active='false'])) {
+    background-color: var(--card);
+  }
+  .group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(:where(.group\/tabs-list)[data-variant="default"] *):where([data-active]:not([data-active='false'])) {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .group-data-\[variant\=line\]\/tabs-list\:data-active\:border-b-primary:is(:where(.group\/tabs-list)[data-variant="line"] *):where([data-active]:not([data-active='false'])) {
+    border-bottom-color: var(--primary);
+  }
+  .group-data-\[variant\=line\]\/tabs-list\:data-active\:text-foreground:is(:where(.group\/tabs-list)[data-variant="line"] *):where([data-active]:not([data-active='false'])) {
+    color: var(--foreground);
+  }
   .data-disabled\:pointer-events-none:where([data-disabled]:not([data-disabled='false'])) {
     pointer-events: none;
   }