@pactor-app/ui 1.9.0 → 1.11.0

package/dist/index.js

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

package/dist/interaction/index.cjs

@@ -310,7 +310,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-closed:fill-mode-forwards",
         className
       ),
       ...props
@@ -330,7 +330,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:fill-mode-forwards sm:max-w-lg",
           className
         ),
         ...props,

package/dist/interaction/index.js

@@ -5,8 +5,8 @@ import {
   OverlayManager,
   createUiBridge,
   registerInteractionActions
-} from "../chunk-S3SMCICK.js";
-import "../chunk-F42SGQNW.js";
+} from "../chunk-VRAVO5LE.js";
+import "../chunk-XUHJ5YSG.js";
 import "../chunk-WKJUCGV4.js";
 export {
   InteractionProvider,

package/dist/ui/index.cjs

@@ -934,6 +934,7 @@ function Badge({
 
 // src/ui/breadcrumb.tsx
 var import_lucide_react2 = require("lucide-react");
+var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
@@ -961,12 +962,27 @@ function BreadcrumbItem({ className, ...props }) {
     }
   );
 }
-function BreadcrumbLink({ className, ...props }) {
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}) {
+  const linkClassName = cn("transition-colors hover:text-foreground", className);
+  if (render) {
+    return React3.cloneElement(render, {
+      "data-slot": "breadcrumb-link",
+      ...props,
+      className: cn(
+        linkClassName,
+        render.props.className
+      )
+    });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "a",
     {
       "data-slot": "breadcrumb-link",
-      className: cn("transition-colors hover:text-foreground", className),
+      className: linkClassName,
       ...props
     }
   );
@@ -1036,7 +1052,7 @@ function ButtonGroup({ className, ...props }) {
 }
 
 // src/ui/bubble.tsx
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function BubbleGroup({ className, ...props }) {
@@ -1095,8 +1111,8 @@ function BubbleContent({
     "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
     className
   );
-  if (asChild && React3.isValidElement(children)) {
-    return React3.cloneElement(children, {
+  if (asChild && React4.isValidElement(children)) {
+    return React4.cloneElement(children, {
       "data-slot": "bubble-content",
       className: cn(cls, children.props.className),
       ...props
@@ -1259,11 +1275,11 @@ function ChartContainer({
 // src/ui/carousel.tsx
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
 var import_lucide_react4 = require("lucide-react");
-var React4 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var CarouselContext = React4.createContext(null);
+var CarouselContext = React5.createContext(null);
 function useCarousel() {
-  const context = React4.useContext(CarouselContext);
+  const context = React5.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -1282,16 +1298,16 @@ function Carousel({
     { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
-  const [canScrollNext, setCanScrollNext] = React4.useState(false);
-  const onSelect = React4.useCallback((carouselApi) => {
+  const [canScrollPrev, setCanScrollPrev] = React5.useState(false);
+  const [canScrollNext, setCanScrollNext] = React5.useState(false);
+  const onSelect = React5.useCallback((carouselApi) => {
     if (!carouselApi) return;
     setCanScrollPrev(carouselApi.canScrollPrev());
     setCanScrollNext(carouselApi.canScrollNext());
   }, []);
-  const scrollPrev = React4.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React4.useCallback(() => api?.scrollNext(), [api]);
-  const handleKeyDown = React4.useCallback(
+  const scrollPrev = React5.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React5.useCallback(() => api?.scrollNext(), [api]);
+  const handleKeyDown = React5.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -1303,10 +1319,10 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (api && setApi) setApi(api);
   }, [api, setApi]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2775,7 +2791,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-closed:fill-mode-forwards",
         className
       ),
       ...props
@@ -2795,7 +2811,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:fill-mode-forwards sm:max-w-lg",
           className
         ),
         ...props,
@@ -3053,7 +3069,7 @@ function InputGroupInput({
 // src/ui/input-otp.tsx
 var import_input_otp = require("input-otp");
 var import_lucide_react15 = require("lucide-react");
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function InputOTP({
   className,
@@ -3088,7 +3104,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React5.useContext(import_input_otp.OTPInputContext);
+  const inputOTPContext = React6.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
@@ -3658,7 +3674,7 @@ function Separator({
 }
 
 // src/ui/sidebar.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_class_variance_authority8 = require("class-variance-authority");
 var import_lucide_react18 = require("lucide-react");
 
@@ -3705,9 +3721,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React6.createContext(null);
+var SidebarContext = React7.createContext(null);
 function useSidebar() {
-  const context = React6.useContext(SidebarContext);
+  const context = React7.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -3723,10 +3739,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React6.useState(false);
-  const [_open, _setOpen] = React6.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React7.useState(false);
+  const [_open, _setOpen] = React7.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React6.useCallback(
+  const setOpen = React7.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -3738,10 +3754,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React6.useCallback(() => {
+  const toggleSidebar = React7.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -3752,7 +3768,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React6.useMemo(
+  const contextValue = React7.useMemo(
     () => ({
       state,
       open,
@@ -4015,10 +4031,10 @@ function SidebarGroup({ className, ...props }) {
   );
 }
 function renderAsChild(children, dataSlot, className, rest) {
-  if (!React6.isValidElement(children)) {
+  if (!React7.isValidElement(children)) {
     return null;
   }
-  return React6.cloneElement(children, {
+  return React7.cloneElement(children, {
     "data-slot": dataSlot,
     className: cn(
       className,
@@ -4242,7 +4258,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React6.useMemo(() => {
+  const width = React7.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
@@ -4695,9 +4711,9 @@ function Toggle({
 // src/ui/toggle-group.tsx
 var import_toggle2 = require("@base-ui/react/toggle");
 var import_toggle_group = require("@base-ui/react/toggle-group");
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var ToggleGroupContext = React7.createContext({
+var ToggleGroupContext = React8.createContext({
   size: "default",
   variant: "default"
 });
@@ -4730,7 +4746,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React7.useContext(ToggleGroupContext);
+  const context = React8.useContext(ToggleGroupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_toggle2.Toggle,
     {

package/dist/ui/index.d.cts

@@ -153,7 +153,13 @@ declare function Badge({ className, variant, ...props }: React.ComponentProps<'s
 declare function Breadcrumb({ ...props }: React.ComponentProps<'nav'>): React.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
-declare function BreadcrumbLink({ className, ...props }: React.ComponentProps<'a'>): React.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: React.ComponentProps<'a'> & {
+    /**
+     * 以宿主元素替换默认 `<a>`（Base UI render 习惯用法，等价 Radix asChild）——
+     * 如 Next.js `<Link>` / react-router `<Link>`；class 合并、其余 props 透传。
+     */
+    render?: React.ReactElement;
+}): React.JSX.Element;
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;

package/dist/ui/index.d.ts

@@ -153,7 +153,13 @@ declare function Badge({ className, variant, ...props }: React.ComponentProps<'s
 declare function Breadcrumb({ ...props }: React.ComponentProps<'nav'>): React.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
-declare function BreadcrumbLink({ className, ...props }: React.ComponentProps<'a'>): React.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: React.ComponentProps<'a'> & {
+    /**
+     * 以宿主元素替换默认 `<a>`（Base UI render 习惯用法，等价 Radix asChild）——
+     * 如 Next.js `<Link>` / react-router `<Link>`；class 合并、其余 props 透传。
+     */
+    render?: React.ReactElement;
+}): React.JSX.Element;
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;

package/dist/ui/index.js

@@ -160,7 +160,7 @@ import {
   toggleVariants,
   typographyVariants,
   useCarousel
-} from "../chunk-VT5XP4U4.js";
+} from "../chunk-NVORKHWX.js";
 import {
   Dialog,
   DialogClose,
@@ -182,7 +182,7 @@ import {
   DrawerPortal,
   DrawerTitle,
   DrawerTrigger
-} from "../chunk-F42SGQNW.js";
+} from "../chunk-XUHJ5YSG.js";
 import {
   Accordion,
   AccordionContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/ui",
-  "version": "1.9.0",
+  "version": "1.11.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.9.0",
-    "@pactor-app/permission": "1.9.0",
-    "@pactor-app/router": "1.9.0",
-    "@pactor-app/runtime": "1.9.0"
+    "@pactor-app/core": "1.11.0",
+    "@pactor-app/permission": "1.11.0",
+    "@pactor-app/router": "1.11.0",
+    "@pactor-app/runtime": "1.11.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/styles.css

@@ -967,9 +967,15 @@
     margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .gap-y-0\.5 {
     row-gap: calc(var(--spacing) * 0.5);
   }
+  .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
   .self-end {
     align-self: flex-end;
   }
@@ -2755,6 +2761,10 @@
     --tw-exit-opacity: calc(0/100);
     --tw-exit-opacity: 0;
   }
+  .data-closed\:fill-mode-forwards:where([data-closed]:not([data-closed='false'])) {
+    animation-fill-mode: forwards;
+    --tw-animation-fill-mode: forwards;
+  }
   .data-closed\:zoom-out-95:where([data-closed]:not([data-closed='false'])) {
     --tw-exit-scale: calc(95*1%);
     --tw-exit-scale: .95;