@mastra/playground-ui 65.0.0-alpha.8 → 65.0.0

package/dist/components/Sidebar.cjs.js

@@ -7,21 +7,23 @@ const utils_cn = require('../cn-DlOJCxrS.cjs');
 const React = require('react');
 const Txt = require('../Txt-CIS2G5Jx.cjs');
 const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
+const Badge = require('../Badge-63UxysBA.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 const lucideReact = require('lucide-react');
-const kbd = require('../kbd-Xgv5HKEi.cjs');
-const tooltip = require('../tooltip-BppwIf6Y.cjs');
-const primitives_transitions = require('../primitives/transitions.cjs.js');
-const primitives_typography = require('../primitives/typography.cjs.js');
+const kbd = require('../kbd-B2zbS_A6.cjs');
+const Button = require('../Button-C4I05uT4.cjs');
 const scrollArea = require('../scroll-area-CAY0DNQj.cjs');
 const index = require('../index-BM43yKX5.cjs');
 const primitives_controlSize = require('../primitives/control-size.cjs.js');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
+const tooltip = require('../tooltip-BppwIf6Y.cjs');
 const primitives_text = require('../primitives/text.cjs.js');
+const primitives_typography = require('../primitives/typography.cjs.js');
 const drawer = require('../drawer-DdTU-nBR.cjs');
 const primitives_resizeHandleIndicator = require('../primitives/resize-handle-indicator.cjs.js');
 const v4 = require('zod/v4');
 const dialog = require('../dialog-SSeOqRnH.cjs');
-const select = require('../select-A3AFKLd9.cjs');
+const select = require('../select-BqHt-fOI.cjs');
 const contextMenu = require('../context-menu-jNuzE86D.cjs');
 const dropdownMenu = require('../dropdown-menu-CsynT1aD.cjs');
 const hooks_useLocalStorageState = require('../hooks/use-local-storage-state.cjs.js');
@@ -232,6 +234,17 @@ const SidebarMeter = React.forwardRef(function SidebarMeter2({
   );
 });
 
+function SidebarBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Badge.Badge,
+    {
+      size: "sm",
+      className: utils_cn.cn("text-muted-foreground [--inset-highlight:transparent] [--inset-rim:transparent]", className),
+      ...props
+    }
+  );
+}
+
 function SidebarBrand({ logo, title, className, ...props }) {
   const { state } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "sidebar-brand", className: utils_cn.cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
@@ -249,7 +262,7 @@ const SidebarCommandHeader = React.forwardRef(function SidebarCommandHeader2({ c
       "data-slot": "sidebar-command-header",
       "data-state": state,
       className: utils_cn.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",
@@ -261,45 +274,36 @@ const SidebarCommandHeader = React.forwardRef(function SidebarCommandHeader2({ c
   );
 });
 
+function SidebarButtonHint({ label, shortcut }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+    label,
+    shortcut ? /* @__PURE__ */ jsxRuntime.jsx(kbd.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__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      tooltip.TooltipTrigger,
-      {
-        render: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Toggle sidebar",
-            "aria-expanded": !isCollapsed,
-            ...props,
-            onClick: (event) => {
-              onClick?.(event);
-              if (!event.defaultPrevented) toggleSidebar();
-            },
-            className: utils_cn.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",
-              primitives_transitions.focusRing,
-              "[&_svg]:size-4 [&_svg]:text-muted-foreground [&:hover_svg]:text-foreground",
-              className
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {})
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-      "Toggle Sidebar",
-      /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", className: "bg-muted text-muted-foreground", children: "[" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": "Toggle sidebar",
+      "aria-expanded": !isCollapsed,
+      tooltip: /* @__PURE__ */ jsxRuntime.jsx(SidebarButtonHint, { label: "Toggle Sidebar", shortcut: "[" }),
+      tooltipPosition: "bottom",
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggleSidebar();
+      },
+      className: utils_cn.cn("shrink-0", !isCollapsed && "ml-auto", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {})
+    }
+  );
 }
 
 const hold = "animate-[sidebar-hold_var(--resize-dur)] motion-reduce:animate-none";
@@ -312,7 +316,7 @@ function SidebarHeader({ className, children, collapsedLogo, actions, ...props }
     {
       "data-slot": "sidebar-header",
       className: utils_cn.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)]",
@@ -349,27 +353,20 @@ function SidebarHeader({ className, children, collapsedLogo, actions, ...props }
 }
 
 const SidebarSearchTrigger = React.forwardRef(
-  function SidebarSearchTrigger2({ className, children, shortcut, type = "button", ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+  function SidebarSearchTrigger2({ label = "Search", shortcut, children, "aria-label": ariaLabel, type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
       {
         ref,
         "data-slot": "sidebar-search-trigger",
         type,
-        className: utils_cn.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",
-          primitives_typography.quietTextHover,
-          primitives_transitions.controlStateColorTransition,
-          primitives_transitions.focusRing,
-          "[&_svg]:size-4 [&_svg]:shrink-0",
-          shortcut && "w-auto px-2",
-          className
-        ),
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": ariaLabel ?? label,
+        tooltip: /* @__PURE__ */ jsxRuntime.jsx(SidebarButtonHint, { label, shortcut }),
+        tooltipPosition: "bottom",
         ...props,
-        children: [
-          children,
-          shortcut ? /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", className: utils_cn.cn("bg-surface-overlay-soft active:scale-100", primitives_typography.quietTextHoverInGroup), children: shortcut }) : null
-        ]
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {})
       }
     );
   }
@@ -1224,9 +1221,14 @@ function SidebarPanel({ children, className, mobileMode = "drawer" }) {
     "div",
     {
       className: utils_cn.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"
       ),
@@ -1616,6 +1618,7 @@ function SidebarSections({
 }
 
 const Sidebar = Object.assign(SidebarRoot, {
+  Badge: SidebarBadge,
   Brand: SidebarBrand,
   CommandHeader: SidebarCommandHeader,
   Footer: SidebarFooter,
@@ -1649,6 +1652,7 @@ function getIsLinkActive(link, pathname, siblings = []) {
 }
 
 exports.Sidebar = Sidebar;
+exports.SidebarBadge = SidebarBadge;
 exports.SidebarBrand = SidebarBrand;
 exports.SidebarCommandHeader = SidebarCommandHeader;
 exports.SidebarFooter = SidebarFooter;