@warmio/ui 1.5.2 → 2.0.0

package/dist/chunks/{chunk-HQTC542T.js → chunk-FKGHMPVW.js}

@@ -1,28 +1,26 @@
+import {
+  Button
+} from "./chunk-L6L3GVGM.js";
 import {
   FluidMenuHighlights
-} from "./chunk-F74Y4WRX.js";
+} from "./chunk-DHV2A22F.js";
 import {
-  Button,
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle
-} from "./chunk-A2NLFM6R.js";
+} from "./chunk-EIEA5RJJ.js";
 import {
   FluidOverlay
-} from "./chunk-JXSJTIX7.js";
-import {
-  cn
-} from "./chunk-VIB7OX7D.js";
+} from "./chunk-K36HD5J5.js";
 
-// ../ui/src/warmio/sidebar.tsx
+// ../ui/src/warmio/sidebar/sidebar.tsx
 import * as React6 from "react";
 
 // ../ui/src/components/sidebar.tsx
 import * as React4 from "react";
 import { flushSync } from "react-dom";
-import { cva } from "class-variance-authority";
 
 // ../ui/src/hooks/use-mobile.ts
 import * as React from "react";
@@ -69,9 +67,14 @@ function RenderSlot({
   });
 }
 
-// ../ui/src/warmio/tooltip.tsx
+// ../ui/src/warmio/tooltip/tooltip.tsx
 import * as React3 from "react";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+// ../ui/src/types/tooltip.types.ts
+var TOOLTIP_EXIT_DURATION_MS = 0;
+
+// ../ui/src/warmio/tooltip/tooltip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tooltip({
   delay: _delay,
@@ -79,7 +82,14 @@ function Tooltip({
   followCursor,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props, trackCursorAxis: followCursor ?? "none" });
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Root,
+    {
+      ...props,
+      trackCursorAxis: followCursor ?? "none",
+      disableHoverablePopup: true
+    }
+  );
 }
 function TooltipTrigger({
   asChild = false,
@@ -92,7 +102,16 @@ function TooltipTrigger({
   ...props
 }) {
   const resolvedRender = render ?? (asChild && React3.isValidElement(children) ? children : void 0);
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      render: resolvedRender,
+      ...props,
+      closeDelay: TOOLTIP_EXIT_DURATION_MS,
+      children: resolvedRender ? void 0 : children
+    }
+  );
 }
 function TooltipContent({
   side = "top",
@@ -102,11 +121,10 @@ function TooltipContent({
   children,
   ref,
   render,
+  className: _className,
+  style: _style,
   ...props
 }) {
-  const contentProps = { ...props };
-  Reflect.deleteProperty(contentProps, "className");
-  Reflect.deleteProperty(contentProps, "style");
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Positioner,
     {
@@ -114,18 +132,17 @@ function TooltipContent({
       align,
       alignOffset,
       sideOffset,
-      className: "isolate z-[var(--z-popover)]",
+      "data-slot": "tooltip-positioner",
       children: /* @__PURE__ */ jsxs(
         TooltipPrimitive.Popup,
         {
-          ...contentProps,
+          ...props,
           ref,
           "data-slot": "tooltip-content",
-          className: "pointer-events-none z-[var(--z-popover)] inline-flex w-fit min-w-[140px] max-w-xs origin-(--transform-origin) rounded-lg bg-chart-tooltip-background text-chart-tooltip-foreground **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-[calc(var(--z-popover)+1)] **:data-[slot=kbd]:rounded-lg",
-          render: (props2, state) => /* @__PURE__ */ jsx(
+          render: (popupProps, state) => /* @__PURE__ */ jsx(
             FluidOverlay,
             {
-              props: props2,
+              props: popupProps,
               state,
               render,
               motion: "tooltip",
@@ -134,14 +151,8 @@ function TooltipContent({
             }
           ),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-4 py-2 text-xs", children }),
-            /* @__PURE__ */ jsx(
-              TooltipPrimitive.Arrow,
-              {
-                "data-slot": "tooltip-arrow",
-                className: "h-2 w-4 bg-chart-tooltip-background data-[side=top]:top-full data-[side=top]:-translate-y-px data-[side=top]:[clip-path:polygon(0_0,100%_0,50%_100%)] data-[side=bottom]:bottom-full data-[side=bottom]:translate-y-px data-[side=bottom]:[clip-path:polygon(50%_0,100%_100%,0_100%)] data-[side=left]:left-full data-[side=left]:h-4 data-[side=left]:w-2 data-[side=left]:-translate-x-px data-[side=left]:[clip-path:polygon(0_0,100%_50%,0_100%)] data-[side=right]:right-full data-[side=right]:h-4 data-[side=right]:w-2 data-[side=right]:translate-x-px data-[side=right]:[clip-path:polygon(100%_0,100%_100%,0_50%)] data-[side=inline-start]:left-full data-[side=inline-start]:h-4 data-[side=inline-start]:w-2 data-[side=inline-start]:-translate-x-px data-[side=inline-start]:[clip-path:polygon(0_0,100%_50%,0_100%)] data-[side=inline-end]:right-full data-[side=inline-end]:h-4 data-[side=inline-end]:w-2 data-[side=inline-end]:translate-x-px data-[side=inline-end]:[clip-path:polygon(100%_0,100%_100%,0_50%)]"
-              }
-            )
+            /* @__PURE__ */ jsx("div", { "data-slot": "tooltip-body", children }),
+            /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow" })
           ]
         }
       )
@@ -161,8 +172,6 @@ function readSidebarCookie(cookie) {
 }
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
 var SIDEBAR_HOVER_CLOSE_DELAY_MS = 200;
-var TABLET_ICON_SIDEBAR_QUERY = "(min-width: 768px) and (max-width: 1279px)";
-var getServerForceIconSidebarSnapshot = () => false;
 function isSidebarHoverRetentionTarget(target) {
   if (!(target instanceof Element)) {
     return false;
@@ -181,22 +190,6 @@ function useSidebar() {
   }
   return context;
 }
-function subscribeToForceIconSidebar(onStoreChange) {
-  const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
-  mql.addEventListener("change", onStoreChange);
-  return () => mql.removeEventListener("change", onStoreChange);
-}
-function getForceIconSidebarSnapshot() {
-  return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
-}
-function useForceIconSidebar(forceIconAtTablet) {
-  const isTablet = React4.useSyncExternalStore(
-    subscribeToForceIconSidebar,
-    getForceIconSidebarSnapshot,
-    getServerForceIconSidebarSnapshot
-  );
-  return forceIconAtTablet && isTablet;
-}
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -205,12 +198,12 @@ function SidebarProvider({
   style,
   forceIconAtTablet = false,
   allowUserCollapse = true,
+  allowDesktopCollapse = allowUserCollapse,
   expandOnHover = false,
   children,
   ...props
 }) {
   const isMobile = useIsMobile();
-  const forceIcon = useForceIconSidebar(forceIconAtTablet);
   const [openMobile, setOpenMobile] = React4.useState(false);
   const [hoverExpanded, setHoverExpandedState] = React4.useState(false);
   const [sidebarMotionEnabled, setSidebarMotionEnabled] = React4.useState(expandOnHover);
@@ -224,16 +217,16 @@ function SidebarProvider({
     sidebarWrapperRef.current = node;
   };
   React4.useLayoutEffect(() => {
-    if (expandOnHover || cookieHydratedRef.current) return;
+    if (expandOnHover || !allowDesktopCollapse || cookieHydratedRef.current) return;
     const stored = readSidebarCookie(document.cookie);
     if (stored === null) return;
     cookieHydratedRef.current = true;
     _setOpen(stored);
-  }, [expandOnHover]);
+  }, [allowDesktopCollapse, expandOnHover]);
   const open = openProp ?? _open;
   const setOpen = React4.useCallback(
     (openState) => {
-      if (!allowUserCollapse) {
+      if (!allowDesktopCollapse) {
         return;
       }
       if (setOpenProp) {
@@ -243,7 +236,7 @@ function SidebarProvider({
       }
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [allowUserCollapse, setOpenProp]
+    [allowDesktopCollapse, setOpenProp]
   );
   const setHoverExpanded = React4.useCallback(
     (expanded) => {
@@ -258,20 +251,21 @@ function SidebarProvider({
     if (!allowUserCollapse) {
       return;
     }
-    if (expandOnHover && isMobile === false) {
+    if (isMobile) {
+      setSidebarMotionEnabled(true);
+      return setOpenMobile((open2) => !open2);
+    }
+    if (!allowDesktopCollapse || expandOnHover) {
       return;
     }
     setSidebarMotionEnabled(true);
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen(!open);
-  }, [allowUserCollapse, expandOnHover, isMobile, open, setOpen]);
-  const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
+    return setOpen(!open);
+  }, [allowDesktopCollapse, allowUserCollapse, expandOnHover, isMobile, open, setOpen]);
   let state = open ? "expanded" : "collapsed";
-  if (forceIcon && isMobile === false) {
-    state = "collapsed";
-  }
   if (expandOnHover && isMobile === false) {
     state = hoverExpanded ? "expanded" : "collapsed";
   }
+  const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
   const contextValue = React4.useMemo(
     () => ({
       state,
@@ -283,6 +277,7 @@ function SidebarProvider({
       toggleSidebar,
       sidebarMotionEnabled,
       expandOnHover,
+      forceIconAtTablet,
       setHoverExpanded
     }),
     [
@@ -295,11 +290,12 @@ function SidebarProvider({
       toggleSidebar,
       sidebarMotionEnabled,
       expandOnHover,
+      forceIconAtTablet,
       setHoverExpanded
     ]
   );
   React4.useEffect(() => {
-    if (!allowUserCollapse || expandOnHover) {
+    if (!allowUserCollapse || !allowDesktopCollapse || expandOnHover) {
       return;
     }
     const handleKeyDown = (event) => {
@@ -310,7 +306,7 @@ function SidebarProvider({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [allowUserCollapse, expandOnHover]);
+  }, [allowDesktopCollapse, allowUserCollapse, expandOnHover]);
   return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
     "div",
     {
@@ -318,10 +314,7 @@ function SidebarProvider({
       "data-slot": "sidebar-wrapper",
       "data-force-icon-at-tablet": forceIconAtTablet ? "true" : void 0,
       style,
-      className: cn(
-        "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
-        className
-      ),
+      className,
       ...props,
       children
     }
@@ -445,44 +438,6 @@ function useSidebarHoverExpand({
   }, [expandOnHover, isMobile, setHoverExpanded, state]);
   return { openFromHover, scheduleCloseFromHover };
 }
-function getDesktopSidebarMotionClassNames(sidebarMotionEnabled, expandOnHover) {
-  if (!sidebarMotionEnabled) {
-    return { container: null, gap: null };
-  }
-  if (expandOnHover) {
-    return {
-      container: "transition-[width] duration-300 ease-out motion-reduce:transition-none",
-      gap: null
-    };
-  }
-  return {
-    container: "transition-[left,right,width] duration-300 ease-linear motion-reduce:transition-none",
-    gap: "transition-[width] duration-300 ease-linear motion-reduce:transition-none"
-  };
-}
-function getDesktopSidebarGapClassName(expandOnHover, variant, motionClassName) {
-  if (expandOnHover) {
-    return "relative w-(--sidebar-width-icon) bg-transparent group-data-[side=right]:rotate-180";
-  }
-  const collapsedIconWidthClassName = variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)";
-  return cn(
-    "relative w-(--sidebar-width) bg-transparent",
-    motionClassName,
-    "group-data-[collapsible=offcanvas]:w-0",
-    "group-data-[side=right]:rotate-180",
-    collapsedIconWidthClassName
-  );
-}
-function getDesktopSidebarContainerClassName(expandOnHover, variant, motionClassName, className) {
-  const collapsedIconClassName = variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l";
-  return cn(
-    "fixed inset-y-0 hidden h-svh w-(--sidebar-width) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
-    expandOnHover ? "z-[var(--z-sidebar-overlay)]" : "z-10",
-    motionClassName,
-    collapsedIconClassName,
-    className
-  );
-}
 function Sidebar({
   side = "left",
   variant = "sidebar",
@@ -514,23 +469,8 @@ function Sidebar({
     setHoverExpanded,
     state
   });
-  const desktopMotionClassNames = getDesktopSidebarMotionClassNames(
-    sidebarMotionEnabled,
-    expandOnHover
-  );
   if (resolvedCollapsible === "none") {
-    return /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-slot": "sidebar",
-        className: cn(
-          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar", className, ...props, children });
   }
   if (isMobile) {
     return /* @__PURE__ */ jsx2(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs2(
@@ -539,15 +479,14 @@ function Sidebar({
         dir,
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[var(--sidebar-width-mobile)] bg-sidebar p-0 text-sidebar-foreground dark:bg-card",
         showCloseButton: false,
         side,
         children: [
-          /* @__PURE__ */ jsxs2(SheetHeader, { className: "sr-only", children: [
+          /* @__PURE__ */ jsxs2(SheetHeader, { "data-visually-hidden": "", children: [
             /* @__PURE__ */ jsx2(SheetTitle, { children: "Sidebar" }),
             /* @__PURE__ */ jsx2(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx2("div", { "data-sidebar": "mobile-body", children })
         ]
       }
     ) });
@@ -555,36 +494,21 @@ function Sidebar({
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: "group peer hidden text-sidebar-foreground md:block",
       "data-state": state,
       "data-collapsible": state === "collapsed" ? resolvedCollapsible : "",
       "data-expand-on-hover": expandOnHover ? "true" : void 0,
+      "data-motion": sidebarMotionEnabled ? expandOnHover ? "hover" : "toggle" : void 0,
       "data-variant": variant,
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            "data-slot": "sidebar-gap",
-            className: getDesktopSidebarGapClassName(
-              expandOnHover,
-              variant,
-              desktopMotionClassNames.gap
-            )
-          }
-        ),
+        /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-gap" }),
         /* @__PURE__ */ jsx2(
           "div",
           {
             "data-slot": "sidebar-container",
             "data-side": side,
-            className: getDesktopSidebarContainerClassName(
-              expandOnHover,
-              variant,
-              desktopMotionClassNames.container,
-              className
-            ),
+            className,
             ...props,
             onPointerEnter: (event) => {
               onPointerEnter?.(event);
@@ -613,34 +537,25 @@ function Sidebar({
               }
               scheduleCloseFromHover();
             },
-            children: /* @__PURE__ */ jsx2(
-              "div",
-              {
-                "data-sidebar": "sidebar",
-                "data-slot": "sidebar-inner",
-                className: cn(
-                  "flex size-full flex-col bg-sidebar",
-                  variant === "floating" && "overflow-hidden rounded-[var(--warm-inset-radius,1.5rem)] [corner-shape:squircle] border border-[var(--warm-inset-border)] bg-[var(--warm-inset-frame,var(--card))] [--card-background:var(--warm-inset-frame,var(--card))] [--warm-inset-border:var(--warm-card-default-border-outer,var(--warm-inset-border-base))] [--card-edge-border:var(--warm-card-default-border-outer,var(--border))] shadow-card-edge"
-                ),
-                children
-              }
-            )
+            children: /* @__PURE__ */ jsx2("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", children })
           }
         )
       ]
     }
   );
 }
-function SidebarTrigger({ className, onClick, ...props }) {
+function SidebarTrigger({
+  className: _className,
+  onClick,
+  ...props
+}) {
   const { isMobile, toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs2(
     Button,
     {
       "data-sidebar": "trigger",
-      "data-slot": "sidebar-trigger",
       variant: "ghost",
-      size: "icon-sm",
-      className: cn(className),
+      presentation: "sidebarIcon",
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
@@ -648,70 +563,25 @@ function SidebarTrigger({ className, onClick, ...props }) {
       ...props,
       children: [
         isMobile ? /* @__PURE__ */ jsx2(MenuIcon, {}) : /* @__PURE__ */ jsx2(PanelLeftIcon, {}),
-        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx2("span", { "data-visually-hidden": "", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "main",
-    {
-      "data-slot": "sidebar-inset",
-      className: cn(
-        "relative flex min-h-0 w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      ),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx2("main", { "data-slot": "sidebar-inset", className, ...props });
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "sidebar-header",
-      "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-2", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className, ...props });
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "sidebar-footer",
-      "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-2", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className, ...props });
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "sidebar-content",
-      "data-sidebar": "content",
-      className: cn(
-        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      ),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className, ...props });
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "sidebar-group",
-      "data-sidebar": "group",
-      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className, ...props });
 }
 function SidebarGroupLabel({
   className,
@@ -727,10 +597,7 @@ function SidebarGroupLabel({
       render,
       "data-slot": "sidebar-group-label",
       "data-sidebar": "group-label",
-      className: cn(
-        "flex h-8 shrink-0 items-center rounded-lg px-2 text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:mt-0 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
+      className,
       ...props
     }
   );
@@ -741,93 +608,65 @@ function SidebarGroupContent({ className, ...props }) {
     {
       "data-slot": "sidebar-group-content",
       "data-sidebar": "group-content",
-      className: cn("w-full", className),
+      className,
       ...props
     }
   );
 }
-var sidebarMenuSpacingClassName = {
-  default: "gap-2",
-  roomy: "gap-2",
-  collapsed: "gap-0"
-};
-function SidebarMenu({ className, spacing = "default", children, ...props }) {
+function SidebarMenu({
+  className,
+  fluidHighlights = true,
+  spacing = "default",
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs2(
     "ul",
     {
       "data-slot": "sidebar-menu",
       "data-sidebar": "menu",
-      "data-fluid-menu": "sidebar",
-      className: cn(
-        "relative isolate flex w-full min-w-0 flex-col [&_[data-fluid-menu-item]:is(:hover,:active,:focus-visible,[data-active],[data-open],[data-popup-open])]:bg-transparent!",
-        sidebarMenuSpacingClassName[spacing],
-        className
-      ),
+      "data-fluid-menu": fluidHighlights ? "sidebar" : void 0,
+      "data-spacing": spacing,
+      className,
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx2(FluidMenuHighlights, { kind: "sidebar" })
+        fluidHighlights ? /* @__PURE__ */ jsx2(FluidMenuHighlights, { kind: "sidebar" }) : null
       ]
     }
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "li",
-    {
-      "data-slot": "sidebar-menu-item",
-      "data-sidebar": "menu-item",
-      className: cn("group/menu-item relative", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx2("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className, ...props });
 }
-var sidebarMenuButtonVariants = cva(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left ring-sidebar-ring outline-hidden transition-[width,height,padding,background-color,color,box-shadow] duration-160 ease-out motion-reduce:transition-none group-has-data-[sidebar=menu-action]/menu-item:pr-4 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:rounded-full data-active:bg-[var(--button-primary-bg)] data-active:bg-[image:var(--button-primary-gradient)] data-active:text-[color:var(--button-primary-foreground)] data-active:shadow-[var(--button-primary-shadow)] data-active:hover:bg-[var(--button-primary-hover)] data-active:hover:bg-[image:var(--button-primary-gradient-hover)] data-active:hover:text-[color:var(--button-primary-foreground)] [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:transition-[color,stroke-width] [&_svg]:duration-80 group-hover/menu-item:[&_svg]:stroke-[2] group-focus-within/menu-item:[&_svg]:stroke-[2] [&>span:last-child]:truncate",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
-      },
-      size: {
-        default: "h-8",
-        sm: "h-7",
-        lg: "h-12 group-data-[collapsible=icon]:p-0!"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
 function SidebarMenuButton({
   asChild = false,
   isActive = false,
   variant = "default",
   size = "default",
   tooltip,
+  tooltipOnForceIcon = false,
   className,
   render,
   ...props
 }) {
-  const { isMobile, state } = useSidebar();
+  const { forceIconAtTablet, isMobile, state } = useSidebar();
   const button = /* @__PURE__ */ jsx2(
     RenderSlot,
     {
+      ...props,
       defaultTagName: "button",
       asChild,
       render,
+      className,
       "data-slot": "sidebar-menu-button",
       "data-sidebar": "menu-button",
-      "data-size": size,
-      "data-active": isActive ? "" : void 0,
-      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
-      ...props
+      "data-size": size ?? void 0,
+      "data-variant": variant ?? void 0,
+      "data-active": isActive ? "" : void 0
     }
   );
-  if (!tooltip || state !== "collapsed" || isMobile) {
+  if (!tooltip || isMobile || state !== "collapsed" && !(tooltipOnForceIcon && forceIconAtTablet)) {
     return button;
   }
   const tooltipContent = typeof tooltip === "string" ? { children: tooltip } : tooltip;
@@ -842,75 +681,38 @@ function SidebarMenuBadge({ className, ...props }) {
     {
       "data-slot": "sidebar-menu-badge",
       "data-sidebar": "menu-badge",
-      className: cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-lg px-2 text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
-        className
-      ),
+      className,
       ...props
     }
   );
 }
 
-// ../ui/src/warmio/sidebar-compositions.tsx
+// ../ui/src/warmio/sidebar-compositions/sidebar-compositions.tsx
 import * as React5 from "react";
 import { ChevronUp, UserRound } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SidebarBrand({ actions, collapsed, expanded }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full items-center justify-between gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "relative flex shrink-0 items-center rounded-lg focus-within:ring-2 focus-within:ring-sidebar-ring focus-within:outline-hidden group-data-[collapsible=icon]:size-8", children: [
-      React5.cloneElement(expanded, {
-        className: "flex shrink-0 items-center text-sidebar-foreground transition-colors hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:opacity-0"
-      }),
-      /* @__PURE__ */ jsx3(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "pointer-events-none absolute inset-0 hidden size-8 items-center justify-center rounded-lg text-sidebar-foreground group-data-[collapsible=icon]:flex",
-          inert: true,
-          children: React5.cloneElement(collapsed, {
-            className: "flex size-full items-center justify-center"
-          })
-        }
-      )
+  return /* @__PURE__ */ jsxs3("div", { "data-slot": "sidebar-brand", children: [
+    /* @__PURE__ */ jsxs3("div", { "data-sidebar-brand-mark": "true", children: [
+      expanded,
+      /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", "data-sidebar-brand-collapsed": "true", inert: true, children: collapsed })
     ] }),
-    actions ? /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: "flex items-center gap-2 group-data-[collapsible=icon]:hidden",
-        "data-sidebar-hide-when-collapsed": "true",
-        children: actions
-      }
-    ) : null
+    actions ? /* @__PURE__ */ jsx3("div", { "data-sidebar-hide-when-collapsed": "true", children: actions }) : null
   ] });
 }
 var SidebarAccountTrigger = React5.forwardRef(function SidebarAccountTrigger2({ avatar, className: _className, email, label, style: _style, ...props }, ref) {
   return /* @__PURE__ */ jsxs3(SidebarMenuButton2, { ...props, ref, presentation: "account", children: [
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        "data-slot": "sidebar-account-avatar",
-        className: "grid size-8 shrink-0 place-items-center rounded-lg bg-sidebar-primary text-xs font-medium text-sidebar-primary-foreground group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:rounded-full",
-        children: avatar ?? /* @__PURE__ */ jsx3(UserRound, { className: "size-4", "aria-hidden": "true" })
-      }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1 text-left group-data-[collapsible=icon]:hidden", children: [
-      /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-label", className: "truncate", title: label, children: label }),
-      /* @__PURE__ */ jsx3(
-        "div",
-        {
-          "data-slot": "sidebar-account-email",
-          className: "truncate text-sidebar-foreground/60",
-          title: email,
-          children: email
-        }
-      )
+    /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-avatar", children: avatar ?? /* @__PURE__ */ jsx3(UserRound, { "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxs3("div", { "data-sidebar": "account-details", children: [
+      /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-label", title: label, children: label }),
+      /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-email", title: email, children: email })
     ] }),
-    /* @__PURE__ */ jsx3(ChevronUp, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
+    /* @__PURE__ */ jsx3(ChevronUp, { "data-sidebar-account-chevron": "true" })
   ] });
 });
 SidebarAccountTrigger.displayName = "WarmSidebarAccountTrigger";
 
-// ../ui/src/warmio/sidebar.tsx
+// ../ui/src/warmio/sidebar/sidebar.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 function SidebarProvider2({
   className: _className,
@@ -918,8 +720,7 @@ function SidebarProvider2({
   style: _style,
   ...props
 }) {
-  const presentationClassName = presentation === "mockup" ? "min-h-0 [--sidebar-width:16rem]" : presentation === "preview" ? "min-h-full" : "h-svh min-h-0 overflow-auto";
-  return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, className: presentationClassName });
+  return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, "data-presentation": presentation ?? "shell" });
 }
 function Sidebar2({
   className: _className,
@@ -942,13 +743,7 @@ function SidebarInset2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
-    SidebarInset,
-    {
-      ...props,
-      className: presentation === "product" ? "min-h-0 min-w-0 overflow-auto" : void 0
-    }
-  );
+  return /* @__PURE__ */ jsx4(SidebarInset, { ...props, "data-presentation": presentation });
 }
 function SidebarHeader2({
   className: _className,
@@ -956,8 +751,7 @@ function SidebarHeader2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "product" ? "h-[var(--header-height)] justify-end p-2" : presentation === "mockup" ? "h-14 justify-center border-b border-border p-2" : void 0;
-  return /* @__PURE__ */ jsx4(SidebarHeader, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarHeader, { ...props, "data-presentation": presentation });
 }
 function SidebarContent2({
   className: _className,
@@ -965,8 +759,7 @@ function SidebarContent2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-2 py-4" : void 0;
-  return /* @__PURE__ */ jsx4(SidebarContent, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarContent, { ...props, "data-presentation": presentation });
 }
 function SidebarFooter2({
   className: _className,
@@ -974,8 +767,7 @@ function SidebarFooter2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "product" ? "p-2" : void 0;
-  return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, "data-presentation": presentation });
 }
 function SidebarGroup2({
   className: _className,
@@ -984,8 +776,14 @@ function SidebarGroup2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "navigation" || presentation === "navigation-primary" ? `${collapsed ? "items-center " : ""}px-2 py-2` : presentation === "mockup" ? "py-2" : void 0;
-  return /* @__PURE__ */ jsx4(SidebarGroup, { ...props, className });
+  return /* @__PURE__ */ jsx4(
+    SidebarGroup,
+    {
+      ...props,
+      "data-collapsed": collapsed ? "true" : void 0,
+      "data-presentation": presentation
+    }
+  );
 }
 function SidebarGroupContent2({
   className: _className,
@@ -1000,8 +798,7 @@ function SidebarGroupLabel2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "navigation" ? "px-2 tabular-nums text-sidebar-foreground/60" : void 0;
-  return /* @__PURE__ */ jsx4(SidebarGroupLabel, { ...props, "data-presentation": presentation, className });
+  return /* @__PURE__ */ jsx4(SidebarGroupLabel, { ...props, "data-presentation": presentation });
 }
 function SidebarMenu2({ className: _className, style: _style, ...props }) {
   return /* @__PURE__ */ jsx4(SidebarMenu, { ...props });
@@ -1014,20 +811,28 @@ function SidebarMenuItem2({
   return /* @__PURE__ */ jsx4(SidebarMenuItem, { ...props });
 }
 var SidebarMenuButton2 = React6.forwardRef(
-  function SidebarMenuButton3({ className: _className, collapsed = false, disabled, presentation, style: _style, ...props }, ref) {
+  function SidebarMenuButton3({
+    className: _className,
+    collapsed = false,
+    disabled,
+    isActive = false,
+    presentation,
+    style: _style,
+    ...props
+  }, ref) {
+    const isSidebarIcon = presentation === "sidebarIcon";
     return /* @__PURE__ */ jsx4(
       SidebarMenuButton,
       {
         ...props,
         disabled,
+        isActive,
         ref,
         "data-fluid-menu-disabled": presentation === "disabled" || void 0,
-        className: cn(
-          (collapsed || presentation === "previewCollapsed") && "mx-auto size-8 gap-0 p-2",
-          presentation === "account" && "h-12 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0! group-data-[collapsible=icon]:p-0!",
-          presentation === "navigation" && "text-sidebar-foreground hover:text-sidebar-foreground active:text-sidebar-foreground data-open:hover:text-sidebar-foreground data-active:text-[color:var(--button-primary-foreground)]",
-          (disabled || presentation === "disabled") && "text-muted-foreground/60"
-        )
+        "data-presentation": presentation,
+        "data-collapsed": collapsed || presentation === "previewCollapsed" ? "true" : void 0,
+        "data-muted": disabled || presentation === "disabled" ? "" : void 0,
+        ...isSidebarIcon ? { "data-warm-button": "", "data-variant": "ghost", "data-size": "icon" } : {}
       }
     );
   }
@@ -1039,16 +844,7 @@ function SidebarMenuBadge2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
-    SidebarMenuBadge,
-    {
-      ...props,
-      className: cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-foreground peer-data-active/menu-button:text-[color:var(--button-primary-foreground)]",
-        presentation === "attention" && "animate-pulse"
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx4(SidebarMenuBadge, { ...props, "data-presentation": presentation });
 }
 function SidebarTrigger2({
   className: _className,