@warmio/ui 1.1.0 → 1.3.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.3.0` with the exact
+`@warmio/design@1.5.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,10 +19,13 @@ deployment permission to publish packages.
 @source '../node_modules/@warmio/ui/dist';
 ```
 
-The `1.1.0` public surface contains the Warm badge, logo, Button, Text and `StackedDisplay`,
-DropdownMenu, Sheet, and complete responsive Sidebar family including `SidebarBrand` and
-`SidebarAccountTrigger`. Styling is sealed: use documented semantic presentations and layout
-wrappers, never `className` or `style` overrides. DropdownMenu interaction feedback requires the
-exact public peer `cuelume@0.1.0`.
+The `1.3.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.5.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-BG6USQSY.js

@@ -0,0 +1,81 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/product-header.tsx
+import { Fragment, memo } from "react";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function getTitleSegments(pageTitle, productName) {
+  return pageTitle?.split(">").reduce((segments, rawSegment) => {
+    const segment = rawSegment.trim();
+    if (!segment || segments.length === 0 && segment === productName) return segments;
+    segments.push(segment);
+    return segments;
+  }, []);
+}
+function ProductHeaderBreadcrumb({
+  pageTitle,
+  productName = "Warm"
+}) {
+  const titleSegments = getTitleSegments(pageTitle, productName);
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: productName }),
+    titleSegments?.map((segment, index) => {
+      const isLast = index === titleSegments.length - 1;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-foreground" }),
+        isLast ? /* @__PURE__ */ jsx("h1", { "aria-current": "page", children: segment }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: segment })
+      ] }, `${segment}-${index}`);
+    })
+  ] });
+}
+var ProductHeader = memo(function ProductHeader2({
+  actions,
+  actionsTargetRef,
+  desktopShell = false,
+  leading,
+  pageTitle,
+  productName,
+  titleTargetRef,
+  visibility = "desktop"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-20 h-[var(--header-height)] shrink-0 items-center border-b border-border bg-sidebar",
+        visibility === "always" ? "flex" : visibility === "container" ? "hidden @3xl/main:flex" : "hidden md:flex",
+        desktopShell && "select-none bg-sidebar/95 supports-[backdrop-filter]:bg-sidebar/85 supports-[backdrop-filter]:backdrop-blur"
+      ),
+      "data-tauri-drag-region": desktopShell ? "deep" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: titleTargetRef,
+            className: "flex min-w-0 items-center gap-2 px-4 [&_h1]:text-sm [&_h1]:text-foreground [&:has(>[data-page-chrome-content])>[data-page-chrome-fallback]]:hidden",
+            children: [
+              leading,
+              /* @__PURE__ */ jsx("div", { "data-page-chrome-fallback": true, className: "contents", children: /* @__PURE__ */ jsx(ProductHeaderBreadcrumb, { pageTitle, productName }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: actionsTargetRef,
+            className: "ml-auto flex items-center gap-2 px-4 [&:has(>[data-page-chrome-content])>[data-page-chrome-fallback]]:hidden",
+            children: actions ? /* @__PURE__ */ jsx("div", { "data-page-chrome-fallback": true, className: "contents", children: actions }) : null
+          }
+        )
+      ]
+    }
+  );
+});
+ProductHeader.displayName = "ProductHeader";
+
+export {
+  ProductHeaderBreadcrumb,
+  ProductHeader
+};

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

@@ -8,17 +8,25 @@ 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]",
   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",
   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",
   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",
   overline: "span",
   micro: "span",
   microStrong: "span",
@@ -33,7 +41,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",
@@ -46,7 +57,9 @@ function Text({
   tone = "default",
   align,
   numeric = false,
+  mono = false,
   truncate = false,
+  animateNumber = false,
   className: _className,
   style: _style,
   ...props
@@ -54,11 +67,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"
     )
   });

package/dist/chunks/{chunk-ZEDHNFX6.js → chunk-DHZWXYDX.js}

@@ -6,7 +6,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunk-OWDC2VC6.js";
+} from "./chunk-YTDMREDR.js";
 
 // ../ui/src/warmio/sheet.tsx
 import { jsx } from "react/jsx-runtime";
@@ -41,22 +41,16 @@ function SheetContent2({
     }
   );
 }
-function SheetFooter2({
-  className: _className,
-  spacing = "default",
-  style: _style,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetFooter, { ...props, className: spacing === "roomy" ? "gap-4 p-6" : void 0 });
+function SheetFooter2({ className: _className, style: _style, ...props }) {
+  return /* @__PURE__ */ jsx(SheetFooter, { ...props });
 }
 function SheetHeader2({
   className: _className,
   presentation,
-  spacing = "default",
   style: _style,
   ...props
 }) {
-  const className = presentation === "navigation" ? "border-b border-border bg-background p-0" : spacing === "roomy" ? "gap-2 p-6" : void 0;
+  const className = presentation === "navigation" ? "border-b border-border bg-background p-0" : void 0;
   return /* @__PURE__ */ jsx(SheetHeader, { ...props, className });
 }
 function SheetTitle2({

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
+};

package/dist/chunks/{chunk-SK7IZUFC.js → chunk-IOUIACNV.js}

@@ -11,11 +11,11 @@ import { CheckIcon } from "lucide-react";
 import { play, setEnabled } from "cuelume";
 
 // ../ui/src/lib/haptic.ts
-var supportsHaptic = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : false;
+var supportsHaptic = globalThis.window?.matchMedia?.("(pointer: coarse)").matches ?? false;
 function getWarmCapacitor(win) {
   return win?.Capacitor;
 }
-function isIosCapacitorApp(win = typeof window === "undefined" ? void 0 : window) {
+function isIosCapacitorApp(win = globalThis.window) {
   const capacitor = getWarmCapacitor(win);
   return capacitor?.getPlatform?.() === "ios" && capacitor?.isNativePlatform?.() === true;
 }
@@ -23,7 +23,7 @@ function hasVibrate(nav) {
   return "vibrate" in nav && typeof nav.vibrate === "function";
 }
 function triggerIosCapacitorHaptic() {
-  const haptics = getWarmCapacitor(typeof window === "undefined" ? void 0 : window)?.Plugins?.Haptics;
+  const haptics = getWarmCapacitor(globalThis.window)?.Plugins?.Haptics;
   void haptics?.impact?.({ style: "LIGHT" }).catch(() => {
   });
 }
@@ -68,7 +68,7 @@ function triggerInteractionFeedback(intent, options = {}) {
     haptic();
   }
   if (!soundsEnabled) return;
-  if (typeof document !== "undefined" && document.hidden) return;
+  if (globalThis.document?.hidden) return;
   try {
     play(soundByIntent[intent]);
   } catch {
@@ -164,7 +164,7 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
       ...props
     }
   );
@@ -186,7 +186,7 @@ function DropdownMenuLinkItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
       render: /* @__PURE__ */ jsx("a", { href, children }),
       ...props
     }
@@ -212,7 +212,7 @@ function DropdownMenuCheckboxItem({
       ref,
       "data-slot": "dropdown-menu-checkbox-item",
       "data-inset": inset,
-      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-6 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       checked,
       onCheckedChange: handleCheckedChange,
       ...props,
@@ -265,7 +265,7 @@ function DropdownMenuRadioItem({
       "data-slot": "dropdown-menu-radio-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-6 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         presentation === "selectMenu" && "min-h-12 text-base"
       ),
       ...props,
@@ -296,7 +296,7 @@ function DropdownMenuLabel({
       ref,
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
-      className: "px-2 py-2 text-xs font-bold text-muted-foreground data-inset:pl-6",
+      className: "px-2 py-2 text-xs font-bold text-muted-foreground data-inset:pl-4",
       ...props
     }
   );

package/dist/chunks/{chunk-PBTUB66J.js → chunk-LHHUTDZR.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() {
+  const match = document.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;
@@ -146,10 +163,16 @@ 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
   );
+  React4.useLayoutEffect(() => {
+    const stored = readSidebarCookie();
+    if (stored === null) return;
+    _setOpen(stored);
+  }, []);
   const open = openProp ?? _open;
   const setOpen = React4.useCallback(
     (value) => {
@@ -170,6 +193,7 @@ function SidebarProvider({
     if (!allowUserCollapse) {
       return;
     }
+    setSidebarMotionEnabled(true);
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [allowUserCollapse, isMobile, setOpen, setOpenMobile]);
   const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
@@ -195,9 +219,10 @@ function SidebarProvider({
       isMobile,
       openMobile,
       setOpenMobile,
-      toggleSidebar
+      toggleSidebar,
+      sidebarMotionEnabled
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, sidebarMotionEnabled]
   );
   return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
     "div",
@@ -222,7 +247,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 +299,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 +313,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,6 +335,28 @@ 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",
@@ -381,7 +432,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 +451,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 +481,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 +553,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 +573,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 +596,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 +636,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({
@@ -598,13 +645,8 @@ function SidebarFooter2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
-    SidebarFooter,
-    {
-      ...props,
-      className: presentation === "product" ? "border-t border-border p-2" : void 0
-    }
-  );
+  const className = presentation === "product" ? "border-t border-border p-2" : presentation === "collapsedUtilities" ? "hidden border-t border-border p-2 group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center" : void 0;
+  return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, className });
 }
 function SidebarGroup2({
   className: _className,
@@ -613,7 +655,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({
@@ -652,8 +694,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"
         )
       }
@@ -671,10 +713,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,
@@ -692,5 +744,6 @@ export {
   SidebarMenu2 as SidebarMenu,
   SidebarMenuItem2 as SidebarMenuItem,
   SidebarMenuButton2 as SidebarMenuButton,
-  SidebarMenuBadge2 as SidebarMenuBadge
+  SidebarMenuBadge2 as SidebarMenuBadge,
+  SidebarTrigger2 as SidebarTrigger
 };