@mastra/playground-ui 5.1.16-alpha.0 → 5.1.16-alpha.1

package/dist/index.es.js

@@ -6034,7 +6034,8 @@ const PlaygroundTabs = ({
   children,
   defaultTab,
   value,
-  onValueChange
+  onValueChange,
+  className
 }) => {
   const [internalTab, setInternalTab] = useState(defaultTab);
   const isControlled = value !== void 0 && onValueChange !== void 0;
@@ -6047,10 +6048,10 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: "h-full", children });
+  return /* @__PURE__ */ jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
 };
-const TabList = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx(TabsList, { className: "border-b-sm border-border1 flex min-w-full shrink-0", children }) });
+const TabList = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
 };
 const Tab = ({ children, value, onClick }) => {
   return /* @__PURE__ */ jsx(
@@ -7844,7 +7845,7 @@ const AgentMetadataPrompt = ({ prompt }) => {
 };
 
 const EntityHeader = ({ icon, title, isLoading, children }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "p-5 w-full overflow-x-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-icon6 flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
       isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
@@ -12429,7 +12430,7 @@ function DynamicForm({
     },
     defaultValues: isNotZodObject ? defaultValues ? { "​": defaultValues } : void 0 : defaultValues,
     formProps: {
-      className: ""
+      className
     },
     uiComponents: {
       SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsx(Button, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
@@ -12708,33 +12709,50 @@ const WorkflowInputData = ({
 }) => {
   const [type, setType] = useState("form");
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(RadioGroupItem, { value: "form", id: "form" }),
-        /* @__PURE__ */ jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(RadioGroupItem, { value: "json", id: "json" }),
-        /* @__PURE__ */ jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
-      ] })
-    ] }) }),
-    type === "form" ? /* @__PURE__ */ jsx(
-      DynamicForm,
+    /* @__PURE__ */ jsx(
+      RadioGroup,
       {
-        schema,
-        defaultValues,
-        isSubmitLoading,
-        submitButtonLabel,
-        onSubmit
+        disabled: isSubmitLoading,
+        value: type,
+        onValueChange: (value) => setType(value),
+        className: "pb-4",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "form", id: "form" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "json", id: "json" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
+          ] })
+        ] })
       }
-    ) : /* @__PURE__ */ jsx(
-      JSONInput,
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        schema,
-        defaultValues,
-        isSubmitLoading,
-        submitButtonLabel,
-        onSubmit
+        className: cn({
+          "opacity-50 pointer-events-none": isSubmitLoading
+        }),
+        children: type === "form" ? /* @__PURE__ */ jsx(
+          DynamicForm,
+          {
+            schema,
+            defaultValues,
+            isSubmitLoading,
+            submitButtonLabel,
+            onSubmit
+          }
+        ) : /* @__PURE__ */ jsx(
+          JSONInput,
+          {
+            schema,
+            defaultValues,
+            isSubmitLoading,
+            submitButtonLabel,
+            onSubmit
+          }
+        )
       }
     )
   ] });