@mastra/playground-ui 68.0.0-alpha.1 → 68.0.0-alpha.2

package/dist/components/Sidebar.es.js

@@ -3,7 +3,7 @@ import { t as cva } from "../dist-BhWtUEhi.js";
 import { frameSurfaceStyle, overlaySurfaceStyle, surfaceGroupStateLayerStyle, surfaceStateLayerStyle } from "../primitives/raised-surface.es.js";
 import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-HzcLyGtV.js";
 import { controlHeight } from "../primitives/control-size.es.js";
-import { controlStateColorTransition, focusRing } from "../primitives/transitions.es.js";
+import { focusRing } from "../primitives/transitions.es.js";
 import { t as Button } from "../Button-CLXTbAY8.js";
 import { quietTextHover, quietTextHoverInGroup } from "../primitives/typography.es.js";
 import { n as ScrollAreaViewport, t as ScrollArea } from "../scroll-area-C226l0v0.js";
@@ -199,7 +199,7 @@ var SidebarMeter = forwardRef(function SidebarMeter({ label, value, status, tone
 		"data-slot": "sidebar-meter",
 		"data-tone": tone,
 		"data-state": state,
-		className: cn("relative isolate flex flex-col justify-center overflow-hidden rounded-lg border border-border bg-background px-3", href && "state-layer", className),
+		className: cn("relative isolate flex flex-col justify-center overflow-hidden rounded-lg border border-border bg-background px-3", href && cn("state-layer", "before:transition-none"), className),
 		style: { height: CARD_HEIGHT },
 		...props,
 		children: [
@@ -339,10 +339,10 @@ function SidebarHeader({ className, children, collapsedLogo, actions, ...props }
 		children: [collapsed && collapsedLogo ? /* @__PURE__ */ jsxs("div", {
 			className: "group/collapsed-logo relative ml-0.5 grid size-9 shrink-0 place-items-center",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: cn(hold, "grid place-items-center transition-opacity duration-normal [--sidebar-hold-opacity:1] group-focus-within/collapsed-logo:opacity-0 group-hover/sidebar:opacity-0 motion-reduce:transition-none"),
+				className: cn(hold, "grid place-items-center [--sidebar-hold-opacity:1] group-focus-within/collapsed-logo:opacity-0 group-hover/sidebar:opacity-0"),
 				children: collapsedLogo
 			}), isMobile ? null : /* @__PURE__ */ jsx("div", {
-				className: cn(hold, "absolute inset-0 grid place-items-center opacity-0 transition-opacity duration-normal [--sidebar-hold-opacity:0] group-hover/sidebar:opacity-100 focus-within:opacity-100 motion-reduce:transition-none"),
+				className: cn(hold, "absolute inset-0 grid place-items-center opacity-0 [--sidebar-hold-opacity:0] group-hover/sidebar:opacity-100 focus-within:opacity-100"),
 				children: /* @__PURE__ */ jsx(SidebarTrigger, {})
 			})]
 		}) : children, actions]
@@ -408,7 +408,7 @@ function SidebarNavHeader({ children, icon, action, className, state: stateProp,
 				className: cn("max-w-full min-w-0 flex-1 truncate text-column", icon ? "pl-2" : "pl-3", toneClassName),
 				children: href ? /* @__PURE__ */ jsx(Link, {
 					href,
-					className: cn("block min-w-0 truncate transition-colors duration-normal", {
+					className: cn("block min-w-0 truncate", {
 						"hover:text-foreground": !isActive,
 						"text-foreground": isActive
 					}),
@@ -468,11 +468,11 @@ var nestedExpandedItemClasses = (level) => {
 	if (level === 2) return `gap-2 py-1 pr-3 pl-10 ${controlHeight.md}`;
 	return `gap-2 py-1 pr-3 pl-12 ${controlHeight.md}`;
 };
-var idleSurface = cn("rounded-lg text-muted-foreground hover:text-foreground", surfaceStateLayerStyle);
+var idleSurface = cn("rounded-lg text-muted-foreground transition-none before:transition-none hover:text-foreground", surfaceStateLayerStyle);
 var activeSurface = "bg-fill text-foreground";
 var featuredSurface = cn("my-2 border border-transparent bg-brand-green text-black hover:text-black hover:brightness-95");
 var navRowSurfaceClasses = ({ isActive, isFeatured }) => cn(idleSurface, isActive && activeSurface, isFeatured && featuredSurface);
-var navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => cn(navItemVariants({ size }), "w-full justify-start", controlStateColorTransition, "[&_svg]:size-4 [&_svg]:shrink-0", focusRing, !isCollapsed && nestedExpandedItemClasses(level), isCollapsed && "gap-0 px-[13.5px] py-0");
+var navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => cn(navItemVariants({ size }), "w-full justify-start", "[&_svg]:size-4 [&_svg]:shrink-0", focusRing, !isCollapsed && nestedExpandedItemClasses(level), isCollapsed && "gap-0 px-[13.5px] py-0");
 var navItemClasses = ({ isActive, isCollapsed, isFeatured, level, size } = {}) => cn(navItemLayoutClasses({
 	isCollapsed,
 	level,
@@ -622,7 +622,7 @@ function SidebarNavShowMore({ foldedCount, expanded, onExpandedChange, state: st
 		className: cn(textStyle({
 			variant: "caption",
 			tone: "muted"
-		}), "self-start rounded-md pl-3 text-left hover:text-foreground", controlStateColorTransition, focusRing, className),
+		}), "self-start rounded-md pl-3 text-left hover:text-foreground", focusRing, className),
 		...props,
 		children: expanded ? "Show less" : `Show ${foldedCount} more`
 	});
@@ -1174,7 +1174,7 @@ function SidebarPanel({ children, className, mobileMode = "drawer" }) {
 			onClick,
 			onKeyDown,
 			className: cn("group absolute top-0 -right-1 z-10 h-full w-2 cursor-col-resize touch-none", "flex items-center justify-center", "focus-visible:outline-hidden"),
-			children: /* @__PURE__ */ jsx(ResizeHandleIndicator, { className: cn("via-foreground/30 group-hover:opacity-100", "group-focus-visible:via-border-focus group-focus-visible:opacity-100", "in-data-[sidebar-gesture=active]:via-foreground/45 in-data-[sidebar-gesture=active]:opacity-100") })
+			children: /* @__PURE__ */ jsx(ResizeHandleIndicator, { className: cn("via-foreground/30 transition-none group-hover:opacity-100", "group-focus-visible:via-border-focus group-focus-visible:opacity-100", "in-data-[sidebar-gesture=active]:via-foreground/45 in-data-[sidebar-gesture=active]:opacity-100") })
 		})]
 	});
 }