@mastra/playground-ui 25.0.0 → 25.1.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @mastra/playground-ui
 
+## 25.1.0-alpha.0
+
+### Minor Changes
+
+- Removed the deprecated `Notification` component. Use `Notice` for inline persistent context (errors, empty states) and `toast` (from `@mastra/playground-ui`'s sonner wrapper) for transient feedback (success messages, confirmations). ([#16033](https://github.com/mastra-ai/mastra/pull/16033))
+
+  ```tsx
+  // Before
+  <Notification isVisible={true} type="error">Failed to load.</Notification>
+
+  // After — inline persistent context
+  <Notice variant="destructive">Failed to load.</Notice>
+
+  // Before
+  <Notification isVisible={true}>Saved successfully!</Notification>
+
+  // After — transient feedback
+  toast.info('Saved successfully');
+  ```
+
+- Removed the `CombinedButtons` component. Use `ButtonsGroup` with `spacing="close"` for the same segmented-style cluster of toggle buttons. ([#16035](https://github.com/mastra-ai/mastra/pull/16035))
+
+  ```tsx
+  // Before
+  <CombinedButtons>
+    <Button>Agent</Button>
+    <Button>Model</Button>
+  </CombinedButtons>
+
+  // After
+  <ButtonsGroup spacing="close">
+    <Button>Agent</Button>
+    <Button>Model</Button>
+  </ButtonsGroup>
+  ```
+
+### Patch Changes
+
+- Added support for icon-and-description layout in `Notice` by making `title` optional. When omitted, the notice renders as a single row with icon and description, useful for inline contextual messages. ([#16033](https://github.com/mastra-ai/mastra/pull/16033))
+
+  ```tsx
+  // Before — title required
+  <Notice variant="info" title="Heads up">Some message.</Notice>
+
+  // After — title optional, single-row layout
+  <Notice variant="info">Some message.</Notice>
+  ```
+
+- Updated dependencies [[`6dcd65f`](https://github.com/mastra-ai/mastra/commit/6dcd65f2a34069e6dc43ba35f1d11119b9b40bef), [`1c2dda8`](https://github.com/mastra-ai/mastra/commit/1c2dda805fbfccc0abf55d4cb20cc34402dc3f0c)]:
+  - @mastra/core@1.31.1-alpha.0
+  - @mastra/client-js@1.16.1-alpha.0
+  - @mastra/react@0.2.34-alpha.0
+
 ## 25.0.0
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -8693,21 +8693,6 @@ function Sections({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-12", className), children });
 }
 
-const CombinedButtons = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "flex items-center text-ui-sm border border-border1 rounded-lg overflow-hidden",
-        "[&>button]:border-0 [&>button:not(:first-child)]:border-l [&>button:not(:first-child)]:border-border1",
-        "[&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg",
-        className
-      ),
-      children
-    }
-  );
-};
-
 function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
@@ -10147,82 +10132,6 @@ const MainSidebar = Object.assign(MainSidebarRoot, {
   Trigger: MainSidebarTrigger
 });
 
-function Notification({
-  children,
-  className,
-  isVisible,
-  autoDismiss = true,
-  dismissTime = 5e3,
-  dismissible = true,
-  type = "info"
-}) {
-  const [localIsVisible, setLocalIsVisible] = React.useState(isVisible);
-  const [isAnimatingOut, setIsAnimatingOut] = React.useState(false);
-  React.useEffect(() => {
-    if (dismissible && autoDismiss && isVisible) {
-      const timer = setTimeout(() => {
-        handleDismiss();
-      }, dismissTime);
-      return () => clearTimeout(timer);
-    }
-  }, [autoDismiss, isVisible, dismissTime, dismissible]);
-  React.useEffect(() => {
-    if (isVisible) {
-      setIsAnimatingOut(false);
-      setLocalIsVisible(true);
-    }
-  }, [isVisible]);
-  const handleDismiss = () => {
-    setIsAnimatingOut(true);
-    setTimeout(() => {
-      setLocalIsVisible(false);
-      setIsAnimatingOut(false);
-    }, 200);
-  };
-  if (!localIsVisible) return null;
-  const typeStyles = {
-    info: "bg-surface4 border-border1",
-    error: "bg-accent2Darker border-accent2/20",
-    success: "bg-accent1Darker border-accent1/30",
-    warning: "bg-accent6Darker border-accent6/30"
-  };
-  const iconStyles = {
-    info: "text-accent5",
-    error: "text-accent2",
-    success: "text-accent1",
-    warning: "text-accent6"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "grid grid-cols-[auto_1fr_auto] gap-3 rounded-xl border py-2.5 px-3.5 text-ui-md text-neutral4 items-start",
-        "shadow-card",
-        transitions.all,
-        isAnimatingOut ? "animate-out fade-out-0 slide-out-to-right-2 duration-200" : "animate-in fade-in-0 slide-in-from-right-2 duration-300",
-        typeStyles[type],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 mt-0.5", iconStyles[type]), children: type === "error" || type === "warning" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 items-start min-w-0", children }),
-        dismissible && /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            variant: "ghost",
-            className: cn("h-6 w-6 p-0 shrink-0", transitions.colors, "hover:bg-surface5"),
-            onClick: handleDismiss,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
 function PageHeaderDescription({ children, isLoading }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -11484,6 +11393,25 @@ const variantConfig = {
 };
 function NoticeRoot({ variant, title, icon, action, children, className }) {
   const { icon: defaultIcon, classes } = variantConfig[variant];
+  const resolvedIcon = icon ?? defaultIcon;
+  if (!title) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative @container flex items-start gap-2 rounded-2xl border p-3 [&>svg]:size-4",
+          "animate-in fade-in-0 slide-in-from-top-2 duration-200",
+          classes,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 shrink-0 [&>svg]:size-4", children: resolvedIcon }),
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-ui-md leading-ui-md", children }),
+          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start ml-auto", children: action })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -11495,7 +11423,7 @@ function NoticeRoot({ variant, title, icon, action, children, className }) {
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-4 items-center gap-2 [&>svg]:size-4", children: [
-          icon ?? defaultIcon,
+          resolvedIcon,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm font-medium uppercase tracking-wide leading-none", children: title })
         ] }),
         action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 hidden @md:block", children: action }),
@@ -19248,7 +19176,6 @@ exports.CollapsiblePanel = CollapsiblePanel;
 exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.Column = Column;
 exports.Columns = Columns;
-exports.CombinedButtons = CombinedButtons;
 exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
@@ -19403,7 +19330,6 @@ exports.NetlifyIcon = NetlifyIcon;
 exports.NoDataPageLayout = NoDataPageLayout;
 exports.NoLogsInfo = NoLogsInfo;
 exports.Notice = Notice;
-exports.Notification = Notification;
 exports.OPERATORS = OPERATORS;
 exports.OPERATOR_LABELS = OPERATOR_LABELS;
 exports.OpenAIIcon = OpenAIIcon;