@mastra/playground-ui 65.0.0-alpha.11 → 65.0.0-alpha.13

package/dist/components/Sidebar.es.js

@@ -3,16 +3,18 @@ import { c as cn } from '../cn-CQUhN5Jx.js';
 import React__default, { forwardRef, useRef, useEffect, useCallback, useId, Fragment as Fragment$1, useState } from 'react';
 import { T as Txt } from '../Txt-BtIGLRk1.js';
 import { surfaceStateLayerStyle, surfaceGroupStateLayerStyle, overlaySurfaceStyle, frameSurfaceStyle } from '../primitives/raised-surface.es.js';
+import { B as Badge } from '../Badge-CHGARUEW.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { PanelLeftIcon, ChevronRightIcon, ArrowLeftIcon, MenuIcon, MoreHorizontalIcon, Settings2Icon } from 'lucide-react';
-import { K as Kbd } from '../kbd-7Xx2pm9f.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DrsXZDAj.js';
-import { focusRing, controlStateColorTransition } from '../primitives/transitions.es.js';
-import { quietTextHoverInGroup, quietTextHover } from '../primitives/typography.es.js';
+import { PanelLeftIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, MenuIcon, MoreHorizontalIcon, Settings2Icon } from 'lucide-react';
+import { K as Kbd } from '../kbd-CYtMrOov.js';
+import { B as Button } from '../Button-D8a5EWJ5.js';
 import { S as ScrollArea, a as ScrollAreaViewport } from '../scroll-area-MaMqo4l8.js';
 import { c as cva } from '../index-CHS9F_Eo.js';
 import { controlHeight } from '../primitives/control-size.es.js';
+import { focusRing, controlStateColorTransition } from '../primitives/transitions.es.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DrsXZDAj.js';
 import { textStyle } from '../primitives/text.es.js';
+import { quietTextHover, quietTextHoverInGroup } from '../primitives/typography.es.js';
 import { D as Drawer, d as DrawerContent, c as DrawerClose, o as DrawerTitle, e as DrawerDescription } from '../drawer-mj-G7-Tu.js';
 import { ResizeHandleIndicator } from '../primitives/resize-handle-indicator.es.js';
 import { z } from 'zod/v4';
@@ -228,6 +230,17 @@ const SidebarMeter = forwardRef(function SidebarMeter2({
   );
 });
 
+function SidebarBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      size: "sm",
+      className: cn("text-muted-foreground [--inset-highlight:transparent] [--inset-rim:transparent]", className),
+      ...props
+    }
+  );
+}
+
 function SidebarBrand({ logo, title, className, ...props }) {
   const { state } = useSidebar();
   return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-brand", className: cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
@@ -245,7 +258,7 @@ const SidebarCommandHeader = forwardRef(function SidebarCommandHeader2({ classNa
       "data-slot": "sidebar-command-header",
       "data-state": state,
       className: cn(
-        "flex h-header-default shrink-0 items-center gap-1 overflow-hidden",
+        "flex h-header-default shrink-0 items-center gap-0.5 overflow-hidden",
         state === "collapsed" ? "px-3" : "pr-2 pl-3.5",
         state !== "collapsed" && !isMobile && "w-[calc(var(--sidebar-width)-1rem)]",
         state === "collapsed" && "[&_[data-slot=sidebar-search-trigger]]:hidden",
@@ -257,45 +270,36 @@ const SidebarCommandHeader = forwardRef(function SidebarCommandHeader2({ classNa
   );
 });
 
+function SidebarButtonHint({ label, shortcut }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+    label,
+    shortcut ? /* @__PURE__ */ jsx(Kbd, { size: "xs", className: "bg-muted text-muted-foreground", children: shortcut }) : null
+  ] });
+}
+
 function SidebarTrigger({ className, onClick, ...props }) {
   const { desktopState, isMobile, toggleSidebar } = useSidebar();
   const isCollapsed = desktopState === "collapsed";
   if (isMobile) return null;
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(
-      TooltipTrigger,
-      {
-        render: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Toggle sidebar",
-            "aria-expanded": !isCollapsed,
-            ...props,
-            onClick: (event) => {
-              onClick?.(event);
-              if (!event.defaultPrevented) toggleSidebar();
-            },
-            className: cn(
-              "flex items-center justify-center rounded-md text-muted-foreground",
-              "size-7",
-              !isCollapsed && "ml-auto",
-              "hover:bg-fill-subtle hover:text-foreground",
-              "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
-              focusRing,
-              "[&_svg]:size-4 [&_svg]:text-muted-foreground [&:hover_svg]:text-foreground",
-              className
-            ),
-            children: /* @__PURE__ */ jsx(PanelLeftIcon, {})
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-      "Toggle Sidebar",
-      /* @__PURE__ */ jsx(Kbd, { size: "xs", className: "bg-muted text-muted-foreground", children: "[" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": "Toggle sidebar",
+      "aria-expanded": !isCollapsed,
+      tooltip: /* @__PURE__ */ jsx(SidebarButtonHint, { label: "Toggle Sidebar", shortcut: "[" }),
+      tooltipPosition: "bottom",
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggleSidebar();
+      },
+      className: cn("shrink-0", !isCollapsed && "ml-auto", className),
+      children: /* @__PURE__ */ jsx(PanelLeftIcon, {})
+    }
+  );
 }
 
 const hold = "animate-[sidebar-hold_var(--resize-dur)] motion-reduce:animate-none";
@@ -308,7 +312,7 @@ function SidebarHeader({ className, children, collapsedLogo, actions, ...props }
     {
       "data-slot": "sidebar-header",
       className: cn(
-        "flex h-header-default shrink-0 items-center gap-2",
+        "flex h-header-default shrink-0 items-center gap-0.5",
         collapsed ? "px-1" : "pr-2 pl-3.5",
         collapsed && actions && "h-auto flex-col gap-3 py-3",
         !collapsed && !isMobile && "w-[calc(var(--sidebar-width)-1rem)]",
@@ -345,27 +349,20 @@ function SidebarHeader({ className, children, collapsedLogo, actions, ...props }
 }
 
 const SidebarSearchTrigger = forwardRef(
-  function SidebarSearchTrigger2({ className, children, shortcut, type = "button", ...props }, ref) {
-    return /* @__PURE__ */ jsxs(
-      "button",
+  function SidebarSearchTrigger2({ label = "Search", shortcut, children, "aria-label": ariaLabel, type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Button,
       {
         ref,
         "data-slot": "sidebar-search-trigger",
         type,
-        className: cn(
-          "group inline-flex size-control-md shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent hover:bg-fill-subtle",
-          quietTextHover,
-          controlStateColorTransition,
-          focusRing,
-          "[&_svg]:size-4 [&_svg]:shrink-0",
-          shortcut && "w-auto px-2",
-          className
-        ),
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": ariaLabel ?? label,
+        tooltip: /* @__PURE__ */ jsx(SidebarButtonHint, { label, shortcut }),
+        tooltipPosition: "bottom",
         ...props,
-        children: [
-          children,
-          shortcut ? /* @__PURE__ */ jsx(Kbd, { size: "xs", className: cn("bg-surface-overlay-soft active:scale-100", quietTextHoverInGroup), children: shortcut }) : null
-        ]
+        children: children ?? /* @__PURE__ */ jsx(SearchIcon, {})
       }
     );
   }
@@ -1220,9 +1217,14 @@ function SidebarPanel({ children, className, mobileMode = "drawer" }) {
     "div",
     {
       className: cn(
-        "sidebar-layout group/sidebar t-resize relative min-h-0 shrink-0 self-stretch bg-sidebar text-foreground",
+        "sidebar-layout group/sidebar relative min-h-0 shrink-0 self-stretch bg-sidebar text-foreground",
         "w-(--sidebar-width)",
-        "in-data-[sidebar-gesture=active]:transition-none",
+        // Utilities rather than the global `t-resize` class: that one is unlayered CSS, so it would beat
+        // `transition-none` and keep animating the width behind the cursor while dragging
+        // The two `transition-none` are important: an app that runs its own Tailwind after this stylesheet
+        // (Platform) emits `transition-[width]` again later in the cascade, which would otherwise win
+        "transition-[width] duration-(--resize-dur) ease-(--resize-ease) motion-reduce:transition-none!",
+        "in-data-[sidebar-gesture=active]:transition-none!",
         className,
         isHidden && "border-r-0 border-transparent"
       ),
@@ -1612,6 +1614,7 @@ function SidebarSections({
 }
 
 const Sidebar = Object.assign(SidebarRoot, {
+  Badge: SidebarBadge,
   Brand: SidebarBrand,
   CommandHeader: SidebarCommandHeader,
   Footer: SidebarFooter,
@@ -1644,5 +1647,5 @@ function getIsLinkActive(link, pathname, siblings = []) {
   );
 }
 
-export { Sidebar, SidebarBrand, SidebarCommandHeader, SidebarFooter, SidebarFooterMeta, SidebarHeader, SidebarMeter, SidebarMobileTrigger, SidebarNav, SidebarNavHeader, SidebarNavLink, SidebarNavShowMore, SidebarNavStack, SidebarProvider, SidebarRoot, SidebarSearchTrigger, SidebarSections, SidebarTrigger, getIsLinkActive, navItemClasses, useMaybeSidebar, useMaybeSidebarState, useMobileDrawer, useSidebar };
+export { Sidebar, SidebarBadge, SidebarBrand, SidebarCommandHeader, SidebarFooter, SidebarFooterMeta, SidebarHeader, SidebarMeter, SidebarMobileTrigger, SidebarNav, SidebarNavHeader, SidebarNavLink, SidebarNavShowMore, SidebarNavStack, SidebarProvider, SidebarRoot, SidebarSearchTrigger, SidebarSections, SidebarTrigger, getIsLinkActive, navItemClasses, useMaybeSidebar, useMaybeSidebarState, useMobileDrawer, useSidebar };
 //# sourceMappingURL=Sidebar.es.js.map