@warmio/ui 1.2.0 → 1.4.0

package/README.md

@@ -1,8 +1,8 @@
 # `@warmio/ui`
 
-Portable React components shared by Warm products. Install this package with the exact
-`@warmio/design@1.0.0` CSS contract, import `@warmio/design/globals.css` once, and add the package's
-compiled files to Tailwind's source detection:
+Portable React components shared by Warm products. Install `@warmio/ui@1.4.0` with the exact
+`@warmio/design@1.6.0` CSS/primitive contract, import `@warmio/design/globals.css` once, and add
+the package's compiled files to Tailwind's source detection:
 
 ## Why these files are separate
 
@@ -19,11 +19,13 @@ deployment permission to publish packages.
 @source '../node_modules/@warmio/ui/dist';
 ```
 
-The `1.2.0` public surface contains the Warm badge, logo, Button, Text and `StackedDisplay`,
-DropdownMenu, Sheet, the complete responsive Sidebar family, and the `ProductHeader` composition.
-`ProductHeader` owns the responsive frame, breadcrumb/title semantics, leading slot, action slot,
-and optional portal targets used by Warm product shells. Styling is sealed: use documented semantic
-properties and layout wrappers, never `className` or `style` overrides. DropdownMenu interaction
-feedback requires the exact public peer `cuelume@0.1.0`.
+The `1.4.0` public UI surface contains the Warm badge, Text and `StackedDisplay`, DropdownMenu,
+Sheet, the complete responsive Sidebar family, and the `ProductHeader` composition. `Button`,
+`ButtonLink`, `Logo`, and `WarmLogoIcon` are directly owned by `@warmio/design@1.6.0` and are
+re-exported through UI where applicable. `ProductHeader` owns the responsive frame,
+breadcrumb/title semantics, leading slot, action slot, and optional portal targets used by Warm
+product shells. Styling is sealed: use documented semantic properties and layout wrappers, never
+`className` or `style` overrides. DropdownMenu interaction feedback requires the exact public peer
+`cuelume@0.1.0`.
 
 The published artifact is standalone and never imports private `warm-app` workspace packages.

package/dist/button.js

@@ -1,9 +1,7 @@
 import {
   Button,
   ButtonLink
-} from "./chunks/chunk-KCEDMF2I.js";
-import "./chunks/chunk-T2TXMN3G.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-GKEYV2XW.js";
 export {
   Button,
   ButtonLink

package/dist/chunks/{chunk-D25QMXJR.js → chunk-4RQCHKAW.js}

@@ -6,23 +6,35 @@ import {
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var textClassNameByVariant = {
-  display: "block text-[1.35rem] font-normal leading-snug tracking-normal [font-family:var(--font-display)] @3xl/main:text-[1.875rem]",
+  display: "block text-3xl font-normal leading-snug tracking-normal [font-family:var(--font-display)]",
   displayCompact: "block text-xl font-normal leading-snug tracking-normal [font-family:var(--font-display)] @3xl/main:text-2xl",
+  displayHero: "block text-3xl font-bold leading-tight tracking-normal text-foreground sm:text-4xl lg:text-5xl",
+  metricValue: "block text-2xl",
+  metricValueLead: "block text-3xl",
+  metricDisplay: "block text-5xl font-bold leading-none tracking-tight",
+  metricDisplayCompact: "block text-4xl font-bold leading-none tracking-tight",
   overline: "block font-mono text-xs font-bold uppercase tracking-[0.18em]",
-  micro: "text-[10px] font-normal leading-tight",
-  microStrong: "text-[10px] font-bold leading-tight",
+  micro: "text-xs font-normal leading-snug",
+  microStrong: "text-xs font-bold leading-snug",
   body: "text-sm",
+  lede: "text-[1.35rem] leading-snug",
   caption: "text-xs",
   helper: "text-xs",
-  sectionTitle: "text-sm font-bold leading-6"
+  sectionTitle: "text-base font-bold leading-normal"
 };
 var defaultTextElementByVariant = {
   display: "span",
   displayCompact: "span",
+  displayHero: "h1",
+  metricValue: "span",
+  metricValueLead: "span",
+  metricDisplay: "span",
+  metricDisplayCompact: "span",
   overline: "span",
   micro: "span",
   microStrong: "span",
   body: "p",
+  lede: "p",
   caption: "span",
   helper: "small",
   sectionTitle: "h3"
@@ -33,7 +45,10 @@ var textClassNameByTone = {
   foreground: "text-foreground",
   primary: "text-primary",
   success: "text-success",
-  warning: "text-warning"
+  warning: "text-warning",
+  financeCash: "text-finance-cash",
+  financeDebt: "text-finance-debt",
+  financeInvestment: "text-finance-investment"
 };
 var textClassNameByAlign = {
   start: "text-left",
@@ -42,11 +57,13 @@ var textClassNameByAlign = {
 };
 function Text({
   as,
-  variant = "micro",
+  variant = "caption",
   tone = "default",
   align,
   numeric = false,
+  mono = false,
   truncate = false,
+  animateNumber = false,
   className: _className,
   style: _style,
   ...props
@@ -54,11 +71,14 @@ function Text({
   const Component = as ?? defaultTextElementByVariant[variant];
   return React.createElement(Component, {
     ...props,
+    "data-animate-number": animateNumber || void 0,
     className: cn(
       textClassNameByVariant[variant],
+      variant === "sectionTitle" && Component === "h2" && "text-lg leading-snug",
       textClassNameByTone[tone],
       align && textClassNameByAlign[align],
       numeric && "tabular-nums",
+      mono && "font-mono",
       truncate && "truncate"
     )
   });
@@ -70,8 +90,8 @@ function StackedDisplay({
   presentation = "dashboard",
   secondLine
 }) {
-  const firstLineClassName = presentation === "welcome" ? "block text-muted-foreground font-editorial" : "block text-foreground";
-  const secondLineClassName = presentation === "welcome" ? "block text-foreground" : "block text-muted-foreground font-editorial";
+  const firstLineClassName = presentation === "welcome" ? "block text-muted-foreground" : "block text-foreground";
+  const secondLineClassName = presentation === "welcome" ? "block text-foreground" : "block text-muted-foreground";
   return /* @__PURE__ */ jsxs(Text, { as: "span", variant: "displayCompact", align, children: [
     /* @__PURE__ */ jsx("span", { className: firstLineClassName, children: firstLine }),
     /* @__PURE__ */ jsx("span", { className: secondLineClassName, children: secondLine })

package/dist/chunks/{chunk-UB25BRXT.js → chunk-FW2EHGRK.js}

@@ -1,10 +1,11 @@
 import {
+  Button,
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle
-} from "./chunk-OWDC2VC6.js";
+} from "./chunk-YTDMREDR.js";
 import {
   cn
 } from "./chunk-VIB7OX7D.js";
@@ -76,25 +77,36 @@ function TooltipContent({
   className,
   side = "top",
   align = "center",
-  sideOffset = 0,
+  alignOffset = 0,
+  sideOffset = 4,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(
-    TooltipPrimitive.Popup,
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Positioner,
     {
-      "data-slot": "tooltip-content",
-      className: cn(
-        "z-[var(--z-popover)] inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-[calc(var(--z-popover)+1)] **:data-[slot=kbd]:rounded-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__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" })
-      ]
+      side,
+      align,
+      alignOffset,
+      sideOffset,
+      className: "isolate z-[var(--z-popover)]",
+      children: /* @__PURE__ */ jsxs(
+        TooltipPrimitive.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-[var(--z-popover)] inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-lg bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-[calc(var(--z-popover)+1)] **:data-[slot=kbd]:rounded-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-[calc(var(--z-popover)+1)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-lg bg-popover fill-popover data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 
 // ../ui/src/components/sidebar.tsx
@@ -102,6 +114,11 @@ import { MenuIcon, PanelLeftIcon } from "lucide-react";
 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;
+function readSidebarCookie(cookie) {
+  const match = cookie.match(/(?:^|; )sidebar_state=(true|false)(?:;|$)/);
+  if (!match) return null;
+  return match[1] === "true";
+}
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
 var TABLET_ICON_SIDEBAR_QUERY = "(min-width: 768px) and (max-width: 1279px)";
 var getServerForceIconSidebarSnapshot = () => false;
@@ -113,24 +130,21 @@ 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) {
-  return React4.useSyncExternalStore(
-    React4.useCallback(
-      (onStoreChange) => {
-        if (!forceIconAtTablet) return () => {
-        };
-        const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
-        mql.addEventListener("change", onStoreChange);
-        return () => mql.removeEventListener("change", onStoreChange);
-      },
-      [forceIconAtTablet]
-    ),
-    React4.useCallback(() => {
-      if (!forceIconAtTablet) return false;
-      return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
-    }, [forceIconAtTablet]),
+  const isTablet = React4.useSyncExternalStore(
+    subscribeToForceIconSidebar,
+    getForceIconSidebarSnapshot,
     getServerForceIconSidebarSnapshot
   );
+  return forceIconAtTablet && isTablet;
 }
 function SidebarProvider({
   defaultOpen = true,
@@ -146,17 +160,24 @@ function SidebarProvider({
   const isMobile = useIsMobile();
   const forceIcon = useForceIconSidebar(forceIconAtTablet);
   const [openMobile, setOpenMobile] = React4.useState(false);
+  const [sidebarMotionEnabled, setSidebarMotionEnabled] = React4.useState(false);
   const [_open, _setOpen] = React4.useReducer(
     (_, nextOpen) => nextOpen,
     defaultOpen
   );
+  const cookieHydratedRef = React4.useRef(false);
+  const hydrateSidebarCookie = (node) => {
+    if (!node || cookieHydratedRef.current) return;
+    cookieHydratedRef.current = true;
+    const stored = readSidebarCookie(document.cookie);
+    if (stored !== null) _setOpen(stored);
+  };
   const open = openProp ?? _open;
   const setOpen = React4.useCallback(
-    (value) => {
+    (openState) => {
       if (!allowUserCollapse) {
         return;
       }
-      const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
         setOpenProp(openState);
       } else {
@@ -164,15 +185,30 @@ function SidebarProvider({
       }
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [allowUserCollapse, setOpenProp, open]
+    [allowUserCollapse, setOpenProp]
   );
   const toggleSidebar = React4.useCallback(() => {
     if (!allowUserCollapse) {
       return;
     }
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [allowUserCollapse, isMobile, setOpen, setOpenMobile]);
+    setSidebarMotionEnabled(true);
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen(!open);
+  }, [allowUserCollapse, isMobile, open, setOpen]);
   const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
+  const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
+  const contextValue = React4.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+      sidebarMotionEnabled
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, sidebarMotionEnabled]
+  );
   React4.useEffect(() => {
     if (!allowUserCollapse) {
       return;
@@ -186,22 +222,10 @@ function SidebarProvider({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [allowUserCollapse]);
-  const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
-  const contextValue = React4.useMemo(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  );
   return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
     "div",
     {
+      ref: hydrateSidebarCookie,
       "data-slot": "sidebar-wrapper",
       style,
       className: cn(
@@ -222,7 +246,9 @@ function Sidebar({
   dir,
   ...props
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile, sidebarMotionEnabled } = useSidebar();
+  const sidebarWidthMotionClassName = sidebarMotionEnabled ? "transition-[width] duration-300 ease-linear motion-reduce:transition-none" : null;
+  const sidebarPositionMotionClassName = sidebarMotionEnabled ? "transition-[left,right,width] duration-300 ease-linear motion-reduce:transition-none" : null;
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx2(
       "div",
@@ -272,7 +298,8 @@ function Sidebar({
           {
             "data-slot": "sidebar-gap",
             className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "relative w-(--sidebar-width) bg-transparent",
+              sidebarWidthMotionClassName,
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
               variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
@@ -285,7 +312,8 @@ function Sidebar({
             "data-slot": "sidebar-container",
             "data-side": side,
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear 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",
+              "fixed inset-y-0 z-10 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",
+              sidebarPositionMotionClassName,
               // Adjust the padding for floating and inset variants.
               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",
               className
@@ -306,13 +334,35 @@ function Sidebar({
     }
   );
 }
+function SidebarTrigger({ 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),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        isMobile ? /* @__PURE__ */ jsx2(MenuIcon, {}) : /* @__PURE__ */ jsx2(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
 function SidebarInset({ className, ...props }) {
   return /* @__PURE__ */ jsx2(
     "main",
     {
       "data-slot": "sidebar-inset",
       className: cn(
-        "relative flex w-full flex-1 flex-col bg-background 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",
+        "relative flex min-h-0 w-full flex-1 flex-col bg-background 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
@@ -381,7 +431,7 @@ function SidebarGroupLabel({
       "data-slot": "sidebar-group-label",
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-lg px-2 text-xs font-bold text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-lg px-2 text-xs font-bold 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
       ),
       ...props
@@ -400,14 +450,10 @@ function SidebarGroupContent({ className, ...props }) {
   );
 }
 var sidebarMenuSpacingClassName = {
-  default: "gap-1",
+  default: "gap-2",
   roomy: "gap-2"
 };
-function SidebarMenu({
-  className,
-  spacing = "default",
-  ...props
-}) {
+function SidebarMenu({ className, spacing = "default", ...props }) {
   return /* @__PURE__ */ jsx2(
     "ul",
     {
@@ -434,7 +480,7 @@ function SidebarMenuItem({ 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 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",
+  "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-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:bg-sidebar-accent data-active:font-bold data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
@@ -506,7 +552,7 @@ 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-1 text-xs font-bold 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",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-lg px-2 text-xs font-bold 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
       ),
       ...props
@@ -526,15 +572,15 @@ function SidebarBrand({ actions, collapsed, expanded }) {
     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
+    actions ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2 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__ */ jsx3("div", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-sidebar-primary text-xs font-bold 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", { className: "truncate text-sm font-bold", children: label }),
-      /* @__PURE__ */ jsx3("div", { className: "truncate text-xs text-sidebar-foreground/60", children: email })
+      /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-bold", title: label, children: label }),
+      /* @__PURE__ */ jsx3("div", { className: "truncate text-xs text-sidebar-foreground/60", title: email, children: email })
     ] }),
     /* @__PURE__ */ jsx3(ChevronUp, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
   ] });
@@ -549,7 +595,7 @@ function SidebarProvider2({
   style: _style,
   ...props
 }) {
-  const presentationClassName = presentation === "mockup" ? "min-h-0" : presentation === "preview" ? "min-h-full" : void 0;
+  const presentationClassName = presentation === "mockup" ? "min-h-0 [--sidebar-width:16rem]" : presentation === "preview" ? "min-h-full" : void 0;
   return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, className: presentationClassName });
 }
 function Sidebar2({
@@ -589,7 +635,7 @@ function SidebarContent2({
   style: _style,
   ...props
 }) {
-  const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-1 py-3" : void 0;
+  const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-2 py-4" : void 0;
   return /* @__PURE__ */ jsx4(SidebarContent, { ...props, className });
 }
 function SidebarFooter2({
@@ -608,7 +654,7 @@ function SidebarGroup2({
   style: _style,
   ...props
 }) {
-  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;
+  const className = presentation === "navigation" || presentation === "navigation-primary" ? `${collapsed ? "items-center " : ""}${presentation === "navigation-primary" ? "px-2 pt-4 pb-2" : "px-2 py-2"}` : presentation === "mockup" ? "py-2" : void 0;
   return /* @__PURE__ */ jsx4(SidebarGroup, { ...props, className });
 }
 function SidebarGroupContent2({
@@ -647,8 +693,8 @@ var SidebarMenuButton2 = React6.forwardRef(
         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",
+          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-sidebar-foreground",
           (disabled || presentation === "disabled") && "text-muted-foreground/60"
         )
       }
@@ -666,10 +712,20 @@ function SidebarMenuBadge2({
     SidebarMenuBadge,
     {
       ...props,
-      className: presentation === "attention" ? "animate-pulse" : void 0
+      className: cn(
+        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-foreground peer-data-active/menu-button:text-sidebar-foreground",
+        presentation === "attention" && "animate-pulse"
+      )
     }
   );
 }
+function SidebarTrigger2({
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(SidebarTrigger, { ...props });
+}
 
 export {
   useSidebar,
@@ -687,5 +743,6 @@ export {
   SidebarMenu2 as SidebarMenu,
   SidebarMenuItem2 as SidebarMenuItem,
   SidebarMenuButton2 as SidebarMenuButton,
-  SidebarMenuBadge2 as SidebarMenuBadge
+  SidebarMenuBadge2 as SidebarMenuBadge,
+  SidebarTrigger2 as SidebarTrigger
 };

package/dist/chunks/chunk-GKEYV2XW.js

@@ -0,0 +1,10 @@
+// ../ui/src/warmio/button.tsx
+import {
+  Button,
+  ButtonLink
+} from "@warmio/design/button";
+
+export {
+  Button,
+  ButtonLink
+};