@mastra/playground-ui 29.0.0-alpha.8 → 29.0.0-alpha.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mastra/playground-ui
 
+## 29.0.0-alpha.9
+
+### Patch Changes
+
+- Moved the `Dialog` component to Base UI. The public API is unchanged — `asChild` on `DialogTrigger` and `DialogClose` still works the same way, and open/close animations behave as before. ([#16821](https://github.com/mastra-ai/mastra/pull/16821))
+
 ## 29.0.0-alpha.8
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -24,7 +24,7 @@ const CheckboxPrimitive = require('@radix-ui/react-checkbox');
 const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
-const DialogPrimitive = require('@radix-ui/react-dialog');
+const dialog = require('@base-ui/react/dialog');
 const SelectPrimitive = require('@radix-ui/react-select');
 const tabs = require('@base-ui/react/tabs');
 const menu = require('@base-ui/react/menu');
@@ -42,6 +42,7 @@ const dateFns = require('date-fns');
 const reactDayPicker = require('react-day-picker');
 const HoverCard = require('@radix-ui/react-hover-card');
 const reactSlot = require('@radix-ui/react-slot');
+const Dialog$1 = require('@radix-ui/react-dialog');
 const dnd = require('@hello-pangea/dnd');
 const merge = require('@codemirror/merge');
 const format = require('date-fns/format');
@@ -77,13 +78,13 @@ const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
-const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
+const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -6481,51 +6482,70 @@ function MultiCombobox({
   ] });
 }
 
-const Dialog = DialogPrimitive__namespace.Root;
-const DialogTrigger = DialogPrimitive__namespace.Trigger;
-const DialogPortal = DialogPrimitive__namespace.Portal;
-const DialogClose = DialogPrimitive__namespace.Close;
+const Dialog = dialog.Dialog.Root;
+const DialogTrigger = React__namespace.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+const DialogPortal = dialog.Dialog.Portal;
+const DialogClose = React__namespace.forwardRef(({ asChild, children, ...props }, ref) => {
+  const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+});
+DialogClose.displayName = "DialogClose";
 const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
+  dialog.Dialog.Backdrop,
   {
     ref,
     className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
     ...props
   }
 ));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+DialogOverlay.displayName = "DialogOverlay";
 const DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
+    dialog.Dialog.Popup,
     {
       ref,
+      "data-slot": "dialog-content",
       className: cn(
         "dialog-content-anim",
         "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%]",
         "w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
         "rounded-xl border border-border1/40 bg-surface2/96 backdrop-blur-md shadow-dialog",
+        "focus-visible:outline-hidden",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog.Close,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+          }
+        )
       ]
     }
   )
 ] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+DialogContent.displayName = "DialogContent";
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
 DialogFooter.displayName = "DialogFooter";
 const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
 DialogBody.displayName = "DialogBody";
-const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("sr-only", className), ...props }));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Description, { ref, className: cn("sr-only", className), ...props })
+);
+DialogDescription.displayName = "DialogDescription";
 
 const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command,
@@ -11178,9 +11198,9 @@ function MainSidebarRoot({ children, className }) {
     [setOpenMobile]
   );
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        DialogPrimitive__namespace.Overlay,
+        Dialog__namespace.Overlay,
         {
           className: cn(
             "fixed inset-0 z-40 bg-overlay backdrop-blur-sm",
@@ -11190,7 +11210,7 @@ function MainSidebarRoot({ children, className }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogPrimitive__namespace.Content,
+        Dialog__namespace.Content,
         {
           className: cn(
             "fixed inset-y-0 left-0 z-50 flex h-full flex-col",
@@ -11202,8 +11222,8 @@ function MainSidebarRoot({ children, className }) {
             className
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: "Navigation" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: "Primary site navigation drawer" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { children: "Navigation" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Description, { children: "Primary site navigation drawer" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: closeOnAnchor, className: "flex flex-col h-full min-h-0 px-4 py-2 overflow-hidden", children })
           ]
         }
@@ -11725,9 +11745,9 @@ function SideDialogRoot({
   className
 }) {
   const isConfirmation = variant === "confirmation";
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
     !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive__namespace.Overlay,
+      Dialog__namespace.Overlay,
       {
         className: cn(
           "bg-overlay backdrop-blur-sm top-0 bottom-0 right-0 left-0 fixed z-50",
@@ -11737,7 +11757,7 @@ function SideDialogRoot({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+      Dialog__namespace.Content,
       {
         className: cn(
           "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2",
@@ -11753,10 +11773,10 @@ function SideDialogRoot({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden__namespace.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: dialogTitle }),
-            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: dialogDescription })
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { children: dialogTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Description, { children: dialogDescription })
           ] }),
-          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: cn(