@pactor-app/ui 0.1.0 → 1.1.0

package/dist/{chunk-OH3U6PCM.js → chunk-BZSRLTQQ.js}

@@ -1,15 +1,18 @@
 import {
+  Button,
   Dialog,
   DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle
-} from "./chunk-QDTVOJ5P.js";
-import {
-  Button
-} from "./chunk-QWZ23QLS.js";
+  DialogTitle,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle
+} from "./chunk-F3H23KYG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -164,7 +167,7 @@ function registerInteractionActions(actions, manager, ui) {
       );
     }
     const params = action.params ?? {};
-    const type = params["type"];
+    const type = params["messageType"] ?? params["type"];
     const text = params["text"];
     if (type === "success" || type === "error" || type === "warning") {
       message[type](text);
@@ -182,6 +185,7 @@ function isRecord(value) {
 }
 
 // src/interaction/provider.tsx
+import { useI18n } from "@pactor-app/runtime";
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -198,6 +202,7 @@ function ShadcnInteractionProvider({
 }) {
   const [confirmState, setConfirmState] = useState(null);
   const [toasts, setToasts] = useState([]);
+  const { t } = useI18n();
   const { modal, message } = useMemo(() => {
     const pushToast = (type, content) => {
       const id = Date.now() + Math.random();
@@ -261,8 +266,8 @@ function ShadcnInteractionProvider({
                 )
               ] }),
               /* @__PURE__ */ jsxs(DialogFooter, { children: [
-                /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: handleCancel, children: "\u53D6\u6D88" }),
-                /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleOk, children: "\u786E\u5B9A" })
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: handleCancel, children: t("pactor.alertDialog.cancel") }),
+                /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleOk, children: t("pactor.alertDialog.confirm") })
               ] })
             ] })
           }
@@ -299,6 +304,7 @@ import { XIcon } from "lucide-react";
 import {
   createPageRuntime,
   PageRuntimeView,
+  useI18n as useI18n2,
   useRenderer
 } from "@pactor-app/runtime";
 import { useEffect as useEffect2, useState as useState2, useSyncExternalStore } from "react";
@@ -343,6 +349,7 @@ function OverlayEntryView({
   renderer,
   resolvePage
 }) {
+  const { t } = useI18n2();
   const handleCancel = () => manager.close(entry.id);
   let body = null;
   if (entry.content) {
@@ -390,7 +397,7 @@ function OverlayEntryView({
                     {
                       type: "button",
                       "data-slot": "overlay-modal-close",
-                      "aria-label": "\u5173\u95ED",
+                      "aria-label": t("pactor.overlay.close"),
                       className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
                       children: /* @__PURE__ */ jsx2(XIcon, { className: "size-4" })
                     }
@@ -410,64 +417,51 @@ function ShadcnDrawerView({
   onCancel,
   children
 }) {
-  useEffect2(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onCancel();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onCancel]);
+  const { t } = useI18n2();
   const panelStyle = entry.width === void 0 ? void 0 : { width: toCssWidth(entry.width) };
-  return /* @__PURE__ */ jsxs2("div", { "data-slot": "drawer-root", children: [
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-slot": "drawer-mask",
-        "data-testid": "drawer-mask",
-        className: "fixed inset-0 z-50 bg-black/50",
-        onClick: onCancel
-      }
-    ),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        "data-slot": "drawer-panel",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": entry.title,
-        style: panelStyle,
-        className: "fixed inset-y-0 right-0 z-50 flex w-96 max-w-full flex-col border-l border-border bg-background shadow-lg",
-        children: [
-          /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              "data-slot": "drawer-header",
-              className: "flex items-center justify-between border-b border-border px-6 py-4",
-              children: [
-                /* @__PURE__ */ jsx2("span", { className: "text-lg font-semibold", children: entry.title ?? "" }),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    "data-slot": "drawer-close",
-                    "aria-label": "\u5173\u95ED",
-                    className: "cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
-                    onClick: onCancel,
-                    children: /* @__PURE__ */ jsx2(XIcon, { className: "size-4" })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx2("div", { "data-slot": "drawer-body", className: "flex-1 overflow-auto p-6", children })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx2(
+    Drawer,
+    {
+      direction: "right",
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) {
+          onCancel();
+        }
+      },
+      children: /* @__PURE__ */ jsxs2(
+        DrawerContent,
+        {
+          "data-slot": "drawer-panel",
+          className: cn(entry.width !== void 0 && "sm:max-w-none"),
+          style: panelStyle,
+          children: [
+            /* @__PURE__ */ jsxs2(
+              DrawerHeader,
+              {
+                "data-slot": "drawer-header",
+                className: "flex flex-row items-center justify-between border-b border-border px-6 py-4",
+                children: [
+                  /* @__PURE__ */ jsx2(DrawerTitle, { className: "text-lg", children: entry.title ?? "" }),
+                  /* @__PURE__ */ jsx2(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      "data-slot": "drawer-close",
+                      "aria-label": t("pactor.overlay.close"),
+                      className: "cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
+                      children: /* @__PURE__ */ jsx2(XIcon, { className: "size-4" })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { "data-slot": "drawer-body", className: "flex-1 overflow-auto p-6", children })
+          ]
+        }
+      )
+    }
+  );
 }
 function PageOverlayBody({
   entry,

package/dist/chunk-F3H23KYG.js

@@ -0,0 +1,330 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 gap-1.5 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-6",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  children,
+  ...props
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      ButtonPrimitive,
+      {
+        "data-slot": "button",
+        className: cn(buttonVariants({ variant, size, className })),
+        render: children,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/ui/dialog.tsx
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DialogPrimitive.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx2(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Popup,
+      {
+        "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-background p-6 shadow-lg 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",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              render: /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx2(XIcon, {}),
+                /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DrawerPrimitive.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn("fixed inset-0 z-50 bg-black/50", className),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx3(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs2(
+      DrawerPrimitive.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col border-border bg-background",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx3("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DrawerPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DrawerPrimitive.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export {
+  buttonVariants,
+  Button,
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription
+};

package/dist/{chunk-SNFDI77B.js → chunk-GL7IO22L.js}

@@ -81,18 +81,100 @@ function AccordionContent({
   );
 }
 
+// src/ui/card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+
 // src/ui/popover.tsx
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -102,7 +184,7 @@ function PopoverContent({
   anchor,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
     PopoverPrimitive.Positioner,
     {
       align,
@@ -110,7 +192,7 @@ function PopoverContent({
       sideOffset,
       anchor,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         PopoverPrimitive.Popup,
         {
           "data-slot": "popover-content",
@@ -130,6 +212,13 @@ export {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
   Popover,
   PopoverTrigger,
   PopoverContent