@mastra/playground-ui 22.0.1 → 22.1.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @mastra/playground-ui
 
+## 22.1.0-alpha.0
+
+### Minor Changes
+
+- Search input can now be collapsed into a compact icon button with tooltip and auto-focuses when expanded ([#15130](https://github.com/mastra-ai/mastra/pull/15130))
+
+- Added DataKeysAndValues component — a compound component for displaying key-value pairs in a grid layout with support for single or two-column modes and section headers ([#15126](https://github.com/mastra-ai/mastra/pull/15126))
+
+- Added DateTimeRangePicker component — a date range selector with preset options (last 24h, 7d, 30d, etc.) and a custom range mode with dual calendar and time pickers ([#15128](https://github.com/mastra-ai/mastra/pull/15128))
+
+- Added DataCodeSection component — a read-only code viewer with JSON syntax highlighting, search, multiline toggle, and an expandable fullscreen dialog ([#15125](https://github.com/mastra-ai/mastra/pull/15125))
+
+- Added DataPanel compound component — a container for detail panels with header, navigation, close button, loading, and empty states ([#15127](https://github.com/mastra-ai/mastra/pull/15127))
+
+### Patch Changes
+
+- Updated dependencies [[`153e864`](https://github.com/mastra-ai/mastra/commit/153e86476b425db7cd0dc8490050096e92964a38), [`153e864`](https://github.com/mastra-ai/mastra/commit/153e86476b425db7cd0dc8490050096e92964a38), [`b0190af`](https://github.com/mastra-ai/mastra/commit/b0190af9179181aa051fa62162dc0dc686999ffe)]:
+  - @mastra/core@1.23.1-alpha.0
+  - @mastra/ai-sdk@1.3.3-alpha.0
+  - @mastra/client-js@1.13.2-alpha.0
+  - @mastra/react@0.2.24-alpha.0
+
 ## 22.0.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -35798,8 +35798,31 @@ function SearchFieldBlock({
   onChange,
   onReset,
   className,
-  size
+  size,
+  isMinimized,
+  onMinimizedChange
 }) {
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isMinimized === false) {
+      inputRef.current?.focus();
+    }
+  }, [isMinimized]);
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: size || "sm",
+          "aria-label": label || "Search",
+          disabled,
+          onClick: () => onMinimizedChange?.(false),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: label || "Search" })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Layout, { layout, className, children: [
     layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Column, { children: [
@@ -35808,6 +35831,7 @@ function SearchFieldBlock({
         /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
+            ref: inputRef,
             name,
             disabled,
             value,
@@ -35815,10 +35839,10 @@ function SearchFieldBlock({
             onChange,
             size,
             className: cn(
-              size === "sm" && "pl-8",
-              size === "md" && "pl-9",
-              (!size || size === "default") && "pl-10",
-              size === "lg" && "pl-11"
+              size === "sm" && "pl-8 pr-8",
+              size === "md" && "pl-9 pr-9",
+              (!size || size === "default") && "pl-10 pr-10",
+              size === "lg" && "pl-11 pr-11"
             )
           }
         ),
@@ -35835,19 +35859,22 @@ function SearchFieldBlock({
             )
           }
         ),
-        onReset && value && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        onReset && (value || isMinimized === false) && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
           {
-            type: "button",
-            onClick: onReset,
-            className: cn(
-              "absolute top-1/2 right-2 -translate-y-1/2 p-1 rounded",
-              transitions.all,
-              "hover:bg-surface4",
-              "[&>svg]:transition-colors [&>svg]:duration-normal",
-              "[&:hover>svg]:text-neutral5"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "text-neutral3 w-4 h-4" })
+            variant: "ghost",
+            size: size || "default",
+            "aria-label": "Clear search",
+            onClick: () => {
+              if (value) {
+                onReset();
+              }
+              if (isMinimized === false) {
+                onMinimizedChange?.(true);
+              }
+            },
+            className: "absolute top-1/2 right-0 -translate-y-1/2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
           }
         )
       ] }),