@assure-one/design-system 1.21.0 → 1.22.0

package/dist/index.d.ts

@@ -3757,6 +3757,25 @@ interface SidebarProps extends React$1.HTMLAttributes<HTMLElement> {
      *     descendant atoms restyle via `group-data-[variant=floating]`.
      */
     variant?: "classic" | "floating";
+    /**
+     * Whether hovering the collapsed rail transiently expands it.
+     *
+     * `true` (default) is the legacy behavior: hovering the column widens
+     * it to an overlay after a short delay. Set `false` for a sidebar with
+     * exactly two states — collapsed and open — switched only by
+     * <SidebarTrigger> or Mod+\. Collapsed rows then explain themselves via
+     * a tooltip on icon hover instead of by widening the column.
+     *
+     * Peek is an accelerator when the sidebar is the only chrome. It stops
+     * being one next to a second fixed column (a product rail), where an
+     * incidental mouse pass on the way to the rail expands the sidebar and
+     * shoves the canvas sideways — motion the user did not ask for, from a
+     * gesture they did not intend.
+     *
+     * Only meaningful alongside `collapsible`; with `collapsible={false}`
+     * there is no rail to peek out of.
+     */
+    peek?: boolean;
 }
 declare const Sidebar: React$1.ForwardRefExoticComponent<SidebarProps & React$1.RefAttributes<HTMLElement>>;
 interface SidebarTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/index.js

@@ -13799,11 +13799,23 @@ function SidebarProvider({
 SidebarProvider.displayName = "SidebarProvider";
 var PEEK_ENTER_DELAY_MS = 100;
 var PEEK_LEAVE_DELAY_MS = 200;
-var Sidebar = React39.forwardRef(function Sidebar2({ className, collapsible = false, variant = "classic", onMouseEnter, onMouseLeave, style, ...props }, ref) {
+var SidebarLabelsHiddenContext = React39.createContext(false);
+var SidebarPeekEnabledContext = React39.createContext(true);
+var Sidebar = React39.forwardRef(function Sidebar2({
+  className,
+  collapsible = false,
+  variant = "classic",
+  peek: peekEnabled = true,
+  onMouseEnter,
+  onMouseLeave,
+  style,
+  children,
+  ...props
+}, ref) {
   const isFloating = variant === "floating";
   const ctx = React39.useContext(SidebarContext);
   const state = collapsible && ctx ? ctx.state : "expanded";
-  const peekLockCount = collapsible && ctx ? ctx.peekLockCount : 0;
+  const peekLockCount = collapsible && ctx && peekEnabled ? ctx.peekLockCount : 0;
   const [peek, setPeek] = React39.useState(false);
   const enterTimer = React39.useRef(null);
   const leaveTimer = React39.useRef(null);
@@ -13826,6 +13838,7 @@ var Sidebar = React39.forwardRef(function Sidebar2({ className, collapsible = fa
   }, [state, clearTimers]);
   const handleEnter = (e) => {
     onMouseEnter?.(e);
+    if (!peekEnabled) return;
     if (!collapsible || state !== "rail") return;
     if (leaveTimer.current != null) {
       window.clearTimeout(leaveTimer.current);
@@ -13836,6 +13849,7 @@ var Sidebar = React39.forwardRef(function Sidebar2({ className, collapsible = fa
   };
   const handleLeave = (e) => {
     onMouseLeave?.(e);
+    if (!peekEnabled) return;
     if (!collapsible) return;
     if (enterTimer.current != null) {
       window.clearTimeout(enterTimer.current);
@@ -13893,7 +13907,8 @@ var Sidebar = React39.forwardRef(function Sidebar2({ className, collapsible = fa
           // labels rightward rather than shifting the icons leftward.
           className
         ),
-        ...props
+        ...props,
+        children: /* @__PURE__ */ jsx(SidebarPeekEnabledContext.Provider, { value: peekEnabled, children: /* @__PURE__ */ jsx(SidebarLabelsHiddenContext.Provider, { value: labelsHidden, children: collapsible && !peekEnabled ? /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children }) : children }) })
       }
     )
   );
@@ -14130,7 +14145,11 @@ var SidebarLink = React39.forwardRef(
   function SidebarLink2({ href, icon, active = false, asChild, className, children, "aria-label": ariaLabel, ...props }, ref) {
     const Comp = asChild ? Slot : "a";
     const accessibleLabel = ariaLabel ?? (asChild ? void 0 : getTextContent(children) || void 0);
-    return /* @__PURE__ */ jsx(
+    const labelsHidden = React39.useContext(SidebarLabelsHiddenContext);
+    const peekEnabled = React39.useContext(SidebarPeekEnabledContext);
+    const tooltipLabel = ariaLabel ?? (getTextContent(children) || void 0);
+    const showTooltip = labelsHidden && !peekEnabled && Boolean(tooltipLabel);
+    const link = /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
@@ -14194,6 +14213,11 @@ var SidebarLink = React39.forwardRef(
         ] })
       }
     );
+    if (!showTooltip) return link;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: link }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: tooltipLabel })
+    ] });
   }
 );
 SidebarLink.displayName = "SidebarLink";