@warmio/ui 1.0.0 → 1.1.0

package/dist/chunks/{chunk-EJ2CNGRW.js → chunk-PBTUB66J.js}

@@ -1,10 +1,20 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "./chunk-OWDC2VC6.js";
 import {
   cn
 } from "./chunk-VIB7OX7D.js";
 
-// ../ui/src/components/sidebar.tsx
+// ../ui/src/warmio/sidebar.tsx
 import * as React6 from "react";
-import { cva as cva2 } from "class-variance-authority";
+
+// ../ui/src/components/sidebar.tsx
+import * as React4 from "react";
+import { cva } from "class-variance-authority";
 
 // ../ui/src/hooks/use-mobile.ts
 import * as React from "react";
@@ -51,184 +61,16 @@ function RenderSlot({
   });
 }
 
-// ../ui/src/components/button.tsx
-import * as React3 from "react";
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-
-// ../ui/src/components/button.variants.ts
-import { cva } from "class-variance-authority";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-inset aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "border-[color:var(--button-primary-border)] bg-[var(--button-primary-bg)] bg-[image:var(--button-primary-gradient)] text-[color:var(--button-primary-foreground)] shadow-[var(--button-primary-shadow)] hover:bg-[var(--button-primary-hover)] active:bg-[var(--button-primary-active)]",
-        outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "underline-offset-4 decoration-current hover:underline"
-      },
-      size: {
-        default: "h-9 gap-2 rounded-lg px-3 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
-        md: "h-9 gap-2 rounded-lg px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        lg: "h-11 gap-2 rounded-xl px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        xl: "h-12 gap-2 rounded-xl px-6 text-base has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
-        option: "h-auto min-h-16 items-start justify-start gap-2 whitespace-normal rounded-xl px-3 py-3 text-sm",
-        icon: "size-9",
-        "icon-round": "size-9 rounded-full",
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
-        "icon-lg": "size-10",
-        "icon-xl": "size-11 rounded-lg",
-        "input-icon": "h-full w-10 rounded-l-none"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-
-// ../ui/src/components/button.tsx
-import { jsx } from "react/jsx-runtime";
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  render,
-  children,
-  ...props
-}) {
-  const resolvedRender = render ?? (asChild && React3.isValidElement(children) ? children : void 0);
-  return /* @__PURE__ */ jsx(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size }), className),
-      ...props,
-      render: resolvedRender,
-      children: resolvedRender ? void 0 : children
-    }
-  );
-}
-
-// ../ui/src/components/sheet.tsx
-import * as React4 from "react";
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
-import { XIcon } from "lucide-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Sheet(props) {
-  return /* @__PURE__ */ jsx2(SheetPrimitive.Root, { ...props });
-}
-function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsx2(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    SheetPrimitive.Backdrop,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-[var(--z-overlay-backdrop)] bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showCloseButton = true,
-  overlayClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx2(SheetOverlay, { className: overlayClassName }),
-    /* @__PURE__ */ jsxs(
-      SheetPrimitive.Popup,
-      {
-        "data-slot": "sheet-content",
-        "data-side": side,
-        className: cn(
-          "fixed z-[calc(var(--z-overlay-backdrop)+1)] flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:max-h-[calc(100dvh-var(--safe-area-inset-top)-var(--safe-area-inset-bottom))] data-[side=bottom]:overflow-y-auto data-[side=bottom]:border-t data-[side=bottom]:pb-[var(--safe-area-inset-bottom)] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:pt-[var(--safe-area-inset-top)] data-[side=left]:pb-[var(--safe-area-inset-bottom)] data-[side=left]:pl-[var(--safe-area-inset-left)] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:pt-[var(--safe-area-inset-top)] data-[side=right]:pr-[var(--safe-area-inset-right)] data-[side=right]:pb-[var(--safe-area-inset-bottom)] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:max-h-[calc(100dvh-var(--safe-area-inset-top)-var(--safe-area-inset-bottom))] data-[side=top]:overflow-y-auto data-[side=top]:border-b data-[side=top]:pt-[var(--safe-area-inset-top)] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 motion-reduce:animate-none motion-reduce:transition-none",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs(
-            SheetPrimitive.Close,
-            {
-              "data-slot": "sheet-close",
-              render: /* @__PURE__ */ jsx2(
-                Button,
-                {
-                  variant: "ghost",
-                  className: "absolute top-[max(1rem,var(--safe-area-inset-top))] right-[max(1rem,var(--safe-area-inset-right))]",
-                  size: "icon-sm"
-                }
-              ),
-              children: [
-                /* @__PURE__ */ jsx2(XIcon, {}),
-                /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    SheetPrimitive.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("font-heading font-bold text-foreground", className),
-      ...props
-    }
-  );
-}
-function SheetDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    SheetPrimitive.Description,
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
-
 // ../ui/src/components/tooltip.tsx
-import * as React5 from "react";
+import * as React3 from "react";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function Tooltip(props) {
-  return /* @__PURE__ */ jsx3(TooltipPrimitive.Root, { ...props });
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props });
 }
 function TooltipTrigger({ asChild = false, children, render, ...props }) {
-  const resolvedRender = render ?? (asChild && React5.isValidElement(children) ? children : void 0);
-  return /* @__PURE__ */ jsx3(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+  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 });
 }
 function TooltipContent({
   className,
@@ -238,7 +80,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx3(TooltipPrimitive.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Popup,
     {
       "data-slot": "tooltip-content",
@@ -249,7 +91,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx3(TooltipPrimitive.Arrow, { className: "z-[calc(var(--z-popover)+1)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-lg bg-foreground fill-foreground" })
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-[calc(var(--z-popover)+1)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-lg bg-foreground fill-foreground" })
       ]
     }
   ) }) });
@@ -257,23 +99,23 @@ function TooltipContent({
 
 // ../ui/src/components/sidebar.tsx
 import { MenuIcon, PanelLeftIcon } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
 var TABLET_ICON_SIDEBAR_QUERY = "(min-width: 768px) and (max-width: 1279px)";
 var getServerForceIconSidebarSnapshot = () => false;
-var SidebarContext = React6.createContext(null);
+var SidebarContext = React4.createContext(null);
 function useSidebar() {
-  const context = React6.use(SidebarContext);
+  const context = React4.use(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
 function useForceIconSidebar(forceIconAtTablet) {
-  return React6.useSyncExternalStore(
-    React6.useCallback(
+  return React4.useSyncExternalStore(
+    React4.useCallback(
       (onStoreChange) => {
         if (!forceIconAtTablet) return () => {
         };
@@ -283,7 +125,7 @@ function useForceIconSidebar(forceIconAtTablet) {
       },
       [forceIconAtTablet]
     ),
-    React6.useCallback(() => {
+    React4.useCallback(() => {
       if (!forceIconAtTablet) return false;
       return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
     }, [forceIconAtTablet]),
@@ -303,13 +145,13 @@ function SidebarProvider({
 }) {
   const isMobile = useIsMobile();
   const forceIcon = useForceIconSidebar(forceIconAtTablet);
-  const [openMobile, setOpenMobile] = React6.useState(false);
-  const [_open, _setOpen] = React6.useReducer(
+  const [openMobile, setOpenMobile] = React4.useState(false);
+  const [_open, _setOpen] = React4.useReducer(
     (_, nextOpen) => nextOpen,
     defaultOpen
   );
   const open = openProp ?? _open;
-  const setOpen = React6.useCallback(
+  const setOpen = React4.useCallback(
     (value) => {
       if (!allowUserCollapse) {
         return;
@@ -324,14 +166,14 @@ function SidebarProvider({
     },
     [allowUserCollapse, setOpenProp, open]
   );
-  const toggleSidebar = React6.useCallback(() => {
+  const toggleSidebar = React4.useCallback(() => {
     if (!allowUserCollapse) {
       return;
     }
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [allowUserCollapse, isMobile, setOpen, setOpenMobile]);
-  const toggleSidebarEvent = React6.useEffectEvent(toggleSidebar);
-  React6.useEffect(() => {
+  const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
+  React4.useEffect(() => {
     if (!allowUserCollapse) {
       return;
     }
@@ -345,7 +187,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [allowUserCollapse]);
   const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
-  const contextValue = React6.useMemo(
+  const contextValue = React4.useMemo(
     () => ({
       state,
       open,
@@ -357,7 +199,7 @@ function SidebarProvider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -382,7 +224,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx2(
       "div",
       {
         "data-slot": "sidebar",
@@ -396,7 +238,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx4(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsx2(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs2(
       SheetContent,
       {
         dir,
@@ -406,16 +248,16 @@ function Sidebar({
         className: "w-[var(--sidebar-width-mobile)] bg-sidebar p-0 text-sidebar-foreground dark:bg-card [&>button]:hidden",
         side,
         children: [
-          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx4(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx4(SheetDescription, { children: "Displays the mobile sidebar." })
+          /* @__PURE__ */ jsxs2(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx2(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx2(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx2("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: "group peer hidden text-sidebar-foreground md:block",
@@ -425,7 +267,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -437,7 +279,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -449,7 +291,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx2(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -465,7 +307,7 @@ function Sidebar({
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -478,7 +320,7 @@ function SidebarInset({ className, ...props }) {
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -489,7 +331,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -500,7 +342,7 @@ function SidebarFooter({ className, ...props }) {
   );
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -514,7 +356,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -530,7 +372,7 @@ function SidebarGroupLabel({
   render,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     RenderSlot,
     {
       defaultTagName: "div",
@@ -547,7 +389,7 @@ function SidebarGroupLabel({
   );
 }
 function SidebarGroupContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -557,19 +399,31 @@ function SidebarGroupContent({ className, ...props }) {
     }
   );
 }
-function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+var sidebarMenuSpacingClassName = {
+  default: "gap-1",
+  roomy: "gap-2"
+};
+function SidebarMenu({
+  className,
+  spacing = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
     "ul",
     {
       "data-slot": "sidebar-menu",
       "data-sidebar": "menu",
-      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      className: cn(
+        "flex w-full min-w-0 flex-col",
+        sidebarMenuSpacingClassName[spacing],
+        className
+      ),
       ...props
     }
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -579,7 +433,7 @@ function SidebarMenuItem({ className, ...props }) {
     }
   );
 }
-var sidebarMenuButtonVariants = cva2(
+var sidebarMenuButtonVariants = cva(
   "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 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:bg-sidebar-accent data-active:font-bold data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
@@ -610,7 +464,7 @@ function SidebarMenuButton({
   ...props
 }) {
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx4(
+  const button = /* @__PURE__ */ jsx2(
     RenderSlot,
     {
       defaultTagName: "button",
@@ -632,9 +486,9 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2(Tooltip, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx2(
       TooltipContent,
       {
         side: "right",
@@ -646,7 +500,7 @@ function SidebarMenuButton({
   ] });
 }
 function SidebarMenuBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sidebar-menu-badge",
@@ -660,16 +514,43 @@ function SidebarMenuBadge({ className, ...props }) {
   );
 }
 
+// ../ui/src/warmio/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: [
+    React5.cloneElement(expanded, {
+      className: "flex shrink-0 items-center text-sidebar-foreground transition-colors hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+    }),
+    React5.cloneElement(collapsed, {
+      className: "hidden size-8 shrink-0 items-center justify-center rounded-lg text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:outline-hidden group-data-[collapsible=icon]:flex"
+    }),
+    actions ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-1 group-data-[collapsible=icon]:hidden", 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", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-sidebar-primary text-xs font-bold text-sidebar-primary-foreground", 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", { className: "truncate text-sm font-bold", children: label }),
+      /* @__PURE__ */ jsx3("div", { className: "truncate text-xs text-sidebar-foreground/60", children: email })
+    ] }),
+    /* @__PURE__ */ jsx3(ChevronUp, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
+  ] });
+});
+SidebarAccountTrigger.displayName = "WarmSidebarAccountTrigger";
+
 // ../ui/src/warmio/sidebar.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function SidebarProvider2({
   className: _className,
   presentation,
   style: _style,
   ...props
 }) {
-  const presentationClassName = presentation === "mockup" ? "min-h-0 [--sidebar-width:16rem]" : presentation === "preview" ? "min-h-full" : void 0;
-  return /* @__PURE__ */ jsx5(SidebarProvider, { ...props, className: presentationClassName });
+  const presentationClassName = presentation === "mockup" ? "min-h-0" : presentation === "preview" ? "min-h-full" : void 0;
+  return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, className: presentationClassName });
 }
 function Sidebar2({
   className: _className,
@@ -677,7 +558,7 @@ function Sidebar2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     Sidebar,
     {
       ...props,
@@ -691,7 +572,7 @@ function SidebarInset2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SidebarInset, { ...props, className: presentation === "product" ? "min-w-0" : void 0 });
+  return /* @__PURE__ */ jsx4(SidebarInset, { ...props, className: presentation === "product" ? "min-w-0" : void 0 });
 }
 function SidebarHeader2({
   className: _className,
@@ -700,7 +581,7 @@ function SidebarHeader2({
   ...props
 }) {
   const className = presentation === "product" ? "h-[var(--header-height)] justify-center border-b border-border p-2" : presentation === "mockup" ? "h-14 justify-center border-b border-border p-2" : void 0;
-  return /* @__PURE__ */ jsx5(SidebarHeader, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarHeader, { ...props, className });
 }
 function SidebarContent2({
   className: _className,
@@ -709,7 +590,7 @@ function SidebarContent2({
   ...props
 }) {
   const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-1 py-3" : void 0;
-  return /* @__PURE__ */ jsx5(SidebarContent, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarContent, { ...props, className });
 }
 function SidebarFooter2({
   className: _className,
@@ -717,7 +598,7 @@ function SidebarFooter2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     SidebarFooter,
     {
       ...props,
@@ -732,15 +613,15 @@ function SidebarGroup2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "navigation" ? `${collapsed ? "items-center " : ""}px-2 py-1` : presentation === "mockup" ? "py-1" : void 0;
-  return /* @__PURE__ */ jsx5(SidebarGroup, { ...props, className });
+  const className = presentation === "navigation" || presentation === "navigation-primary" ? `${collapsed ? "items-center " : ""}${presentation === "navigation-primary" ? "px-2 pt-3 pb-1" : "px-2 py-1"}` : presentation === "mockup" ? "py-1" : void 0;
+  return /* @__PURE__ */ jsx4(SidebarGroup, { ...props, className });
 }
 function SidebarGroupContent2({
   className: _className,
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SidebarGroupContent, { ...props });
+  return /* @__PURE__ */ jsx4(SidebarGroupContent, { ...props });
 }
 function SidebarGroupLabel2({
   className: _className,
@@ -749,34 +630,44 @@ function SidebarGroupLabel2({
   ...props
 }) {
   const className = presentation === "navigation" ? "px-2 tabular-nums text-xs uppercase tracking-wider text-sidebar-foreground/60" : presentation === "mockup" ? "uppercase tracking-wider" : void 0;
-  return /* @__PURE__ */ jsx5(SidebarGroupLabel, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarGroupLabel, { ...props, className });
 }
 function SidebarMenu2({ className: _className, style: _style, ...props }) {
-  return /* @__PURE__ */ jsx5(SidebarMenu, { ...props });
+  return /* @__PURE__ */ jsx4(SidebarMenu, { ...props });
 }
 function SidebarMenuItem2({
   className: _className,
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SidebarMenuItem, { ...props });
-}
-function SidebarMenuButton2({
-  className: _className,
-  presentation,
-  style: _style,
-  ...props
-}) {
-  const className = presentation === "account" ? "h-12" : presentation === "disabled" ? "text-muted-foreground/60" : presentation === "previewCollapsed" ? "mx-auto size-8 gap-0 p-2" : void 0;
-  return /* @__PURE__ */ jsx5(SidebarMenuButton, { ...props, className });
+  return /* @__PURE__ */ jsx4(SidebarMenuItem, { ...props });
 }
+var SidebarMenuButton2 = React6.forwardRef(
+  function SidebarMenuButton3({ className: _className, collapsed = false, disabled, presentation, style: _style, ...props }, ref) {
+    return /* @__PURE__ */ jsx4(
+      SidebarMenuButton,
+      {
+        ...props,
+        disabled,
+        ref,
+        className: cn(
+          (collapsed || presentation === "previewCollapsed") && "mx-auto size-8 gap-0 p-2",
+          presentation === "account" && "h-12",
+          presentation === "navigation" && "[&>span:last-child]:text-sidebar-foreground/50 [&>span:last-child]:transition-colors hover:[&>span:last-child]:text-sidebar-accent-foreground data-active:[&>span:last-child]:text-sidebar-accent-foreground",
+          (disabled || presentation === "disabled") && "text-muted-foreground/60"
+        )
+      }
+    );
+  }
+);
+SidebarMenuButton2.displayName = "WarmSidebarMenuButton";
 function SidebarMenuBadge2({
   className: _className,
   presentation,
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     SidebarMenuBadge,
     {
       ...props,
@@ -787,6 +678,8 @@ function SidebarMenuBadge2({
 
 export {
   useSidebar,
+  SidebarBrand,
+  SidebarAccountTrigger,
   SidebarProvider2 as SidebarProvider,
   Sidebar2 as Sidebar,
   SidebarInset2 as SidebarInset,