@mastra/playground-ui 32.0.2 → 33.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @mastra/playground-ui
 
+## 33.0.0-alpha.0
+
+### Minor Changes
+
+- Added native switch thumb icons so checked and unchecked states can show their own icon without custom overlay code. ([#17569](https://github.com/mastra-ai/mastra/pull/17569))
+
+### Patch Changes
+
+- Fixed input focus borders so hovering no longer overrides the focused state. ([#17570](https://github.com/mastra-ai/mastra/pull/17570))
+
+- Updated dependencies [[`d468acb`](https://github.com/mastra-ai/mastra/commit/d468acb07aec1bb19a2cb0ada8042b05b46746b2), [`e9be4e7`](https://github.com/mastra-ai/mastra/commit/e9be4e747ec3d8b65548bff92f9377db06105376), [`95482bf`](https://github.com/mastra-ai/mastra/commit/95482bf8a5c2b38022d4e2fee8ee07488c5f6262), [`d53cfc2`](https://github.com/mastra-ai/mastra/commit/d53cfc2c7f8d78343a4aa84ec4e129ba25f3325e), [`65799d4`](https://github.com/mastra-ai/mastra/commit/65799d4d549e5ebb9c848fbe3f51ac090f64becf), [`c268c89`](https://github.com/mastra-ai/mastra/commit/c268c89f4c63a93ee474d3cffdf3ea60bf00d4f2), [`d468acb`](https://github.com/mastra-ai/mastra/commit/d468acb07aec1bb19a2cb0ada8042b05b46746b2), [`0c72f03`](https://github.com/mastra-ai/mastra/commit/0c72f032abb13254df5a7856d64be2f207b8006d), [`3b45ea9`](https://github.com/mastra-ai/mastra/commit/3b45ea95015557a6cb9d70dc5252af54ab1b78ac), [`f084be1`](https://github.com/mastra-ai/mastra/commit/f084be1fcbe33ad7480913e44d6130c421c0976f), [`65d3320`](https://github.com/mastra-ai/mastra/commit/65d3320bade087db166caff07eb461c008590ee8), [`44d2c09`](https://github.com/mastra-ai/mastra/commit/44d2c0989186b7294d624bc6dd17722bdb2dcf72), [`b3e9781`](https://github.com/mastra-ai/mastra/commit/b3e9781a93a18e8e492849040016ddf239c00d9c)]:
+  - @mastra/core@1.42.0-alpha.0
+  - @mastra/client-js@1.24.0-alpha.0
+  - @mastra/react@0.5.3-alpha.0
+
 ## 32.0.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3647,9 +3647,10 @@ const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden
 const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
 const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
 const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
 const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
-const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong hover:border-border2 outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
-const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
 const TEXT_MODE_ADORNMENTS = cn(
@@ -9990,49 +9991,101 @@ function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loadin
   );
 }
 
-const Switch = React__namespace.forwardRef(({ className, asChild, children, ...props }, ref) => {
-  const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : { render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }), nativeButton: true };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    _switch.Switch.Root,
-    {
-      ref,
-      "data-slot": "switch",
-      className: cn(
-        "peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center overflow-hidden rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden",
-        "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
-        "hover:bg-neutral6/[0.18]",
-        "active:bg-neutral6/[0.22]",
-        "focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
-        "data-[checked]:bg-neutral6/[0.92]",
-        "data-[checked]:hover:bg-neutral6",
-        "data-[checked]:active:bg-neutral5",
-        "data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]",
-        "data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]",
-        className
-      ),
-      ...renderProps,
-      ...props,
-      children: [
-        asChild ? void 0 : children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          _switch.Switch.Thumb,
-          {
-            "data-slot": "switch-thumb",
-            className: cn(
-              "switch-thumb-motion pointer-events-none block h-4 w-5 rounded-full bg-neutral6",
-              "transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none",
-              "group-active/switch:w-6 group-data-[disabled]/switch:w-5",
-              "data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0",
-              "group-active/switch:data-[checked]:translate-x-2",
-              "data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80"
-            )
-          }
-        )
-      ]
-    }
-  );
-});
+const Switch = React__namespace.forwardRef(
+  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {
+    const shouldRenderStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
+    const shouldRenderIcon = icon !== void 0 || shouldRenderStateIcons;
+    const singleIcon = shouldRenderStateIcons ? void 0 : icon;
+    const onIcon = checkedIcon ?? icon;
+    const offIcon = uncheckedIcon ?? icon;
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : { render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }), nativeButton: true };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      _switch.Switch.Root,
+      {
+        ref,
+        "data-slot": "switch",
+        className: cn(
+          "peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center overflow-hidden rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden",
+          "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
+          "hover:bg-neutral6/[0.18]",
+          "active:bg-neutral6/[0.22]",
+          "focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+          "data-[checked]:bg-neutral6/[0.92]",
+          "data-[checked]:hover:bg-neutral6",
+          "data-[checked]:active:bg-neutral5",
+          "data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]",
+          "data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: [
+          asChild ? void 0 : children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            _switch.Switch.Thumb,
+            {
+              "data-slot": "switch-thumb",
+              className: cn(
+                "switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6",
+                "transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none",
+                "group-active/switch:w-6 group-data-[disabled]/switch:w-5",
+                "data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0",
+                "group-active/switch:data-[checked]:translate-x-2",
+                "data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80"
+              ),
+              children: shouldRenderIcon ? /* @__PURE__ */ jsxRuntime.jsx(SwitchThumbIcon, { checkedIcon: onIcon, icon: singleIcon, uncheckedIcon: offIcon }) : null
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 Switch.displayName = "Switch";
+function SwitchThumbIcon({
+  checkedIcon,
+  icon,
+  uncheckedIcon
+}) {
+  const iconClassName = cn(
+    "absolute inset-0 flex items-center justify-center text-surface1",
+    "transition-[color,opacity] duration-normal ease-out-custom motion-reduce:transition-none",
+    "[&_svg]:size-2.5 [&_svg]:stroke-[2.5]"
+  );
+  if (icon !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        className: cn(iconClassName, "group-data-[checked]/switch:text-neutral6"),
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    uncheckedIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        "data-switch-icon": "unchecked",
+        className: cn(iconClassName, "opacity-100 group-data-[checked]/switch:opacity-0"),
+        children: uncheckedIcon
+      }
+    ) : null,
+    checkedIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        "data-switch-icon": "checked",
+        className: cn(iconClassName, "text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100"),
+        children: checkedIcon
+      }
+    ) : null
+  ] });
+}
 
 const DEFAULT_OPTIONS = [
   { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, {}) },
@@ -14591,11 +14644,12 @@ function DefaultErrorFallback({
   );
 }
 
-function ErrorState({ title, message }) {
+function ErrorState({ title, message, action }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[30vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-center py-10 px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, { className: "h-8 w-8 text-red-900" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-neutral4 text-ui-md", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-neutral2 text-ui-md max-w-md", children: message })
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-neutral2 text-ui-md max-w-md", children: message }),
+    action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4 flex items-center justify-center", children: action })
   ] }) });
 }
 
@@ -22934,6 +22988,7 @@ exports.highlight = highlight;
 exports.hoverEffects = hoverEffects;
 exports.inputFocusBorderVisible = inputFocusBorderVisible;
 exports.inputFocusBorderWithin = inputFocusBorderWithin;
+exports.inputHoverBorderVisible = inputHoverBorderVisible;
 exports.inputHoverBorderWithin = inputHoverBorderWithin;
 exports.inputOutlineAndFocusStyle = inputOutlineAndFocusStyle;
 exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;