@warmio/ui 1.3.0 → 1.5.2

package/LICENSES/fluid-functionalism.txt

@@ -0,0 +1,24 @@
+Fluid Functionalism
+https://github.com/mickadesign/fluid-functionalism
+
+MIT License
+
+Copyright (c) 2026 Micka Touillaud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,7 +1,7 @@
 # `@warmio/ui`
 
-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
+Portable React components shared by Warm products. The next package version is `@warmio/ui@1.5.2`
+with the exact `@warmio/design@1.10.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,13 +19,17 @@ deployment permission to publish packages.
 @source '../node_modules/@warmio/ui/dist';
 ```
 
-The `1.3.0` public UI surface contains the Warm badge, Text and `StackedDisplay`, DropdownMenu,
+The `1.5.2` public UI surface keeps 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
+`ButtonLink`, `Logo`, and `WarmLogoIcon` are directly owned by `@warmio/design@1.10.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`.
+`cuelume@0.1.0`. Fluid-derived menu, sidebar, and sheet interactions require `motion@^12.42.2`.
+
+The closed props and Warm styling remain unchanged. Motion respects live reduced-motion
+preferences. Adapted Fluid source is covered by `LICENSES/fluid-functionalism.txt`.
+These versions require publication before independently deployed consumers can install them.
 
 The published artifact is standalone and never imports private `warm-app` workspace packages.

package/dist/badge.js

@@ -1,6 +1,6 @@
 import {
   Badge
-} from "./chunks/chunk-ICC7GQXS.js";
+} from "./chunks/chunk-3AVFUXCV.js";
 import "./chunks/chunk-VIB7OX7D.js";
 export {
   Badge

package/dist/button.js

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

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

@@ -1,3 +1,9 @@
+import {
+  FluidMenuHighlights
+} from "./chunk-F74Y4WRX.js";
+import {
+  FluidOverlay
+} from "./chunk-JXSJTIX7.js";
 import {
   cn
 } from "./chunk-VIB7OX7D.js";
@@ -6,76 +12,6 @@ import {
 import * as React from "react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { CheckIcon } from "lucide-react";
-
-// ../ui/src/lib/interaction-feedback.ts
-import { play, setEnabled } from "cuelume";
-
-// ../ui/src/lib/haptic.ts
-var supportsHaptic = globalThis.window?.matchMedia?.("(pointer: coarse)").matches ?? false;
-function getWarmCapacitor(win) {
-  return win?.Capacitor;
-}
-function isIosCapacitorApp(win = globalThis.window) {
-  const capacitor = getWarmCapacitor(win);
-  return capacitor?.getPlatform?.() === "ios" && capacitor?.isNativePlatform?.() === true;
-}
-function hasVibrate(nav) {
-  return "vibrate" in nav && typeof nav.vibrate === "function";
-}
-function triggerIosCapacitorHaptic() {
-  const haptics = getWarmCapacitor(globalThis.window)?.Plugins?.Haptics;
-  void haptics?.impact?.({ style: "LIGHT" }).catch(() => {
-  });
-}
-function haptic(pattern = 50) {
-  try {
-    if (isIosCapacitorApp()) {
-      triggerIosCapacitorHaptic();
-      return;
-    }
-    if (!supportsHaptic) return;
-    if (hasVibrate(navigator)) {
-      navigator.vibrate(pattern);
-      return;
-    }
-    const label = document.createElement("label");
-    label.ariaHidden = "true";
-    label.style.display = "none";
-    const input = document.createElement("input");
-    input.type = "checkbox";
-    input.setAttribute("switch", "");
-    label.appendChild(input);
-    try {
-      document.head.appendChild(label);
-      label.click();
-    } finally {
-      document.head.removeChild(label);
-    }
-  } catch {
-  }
-}
-
-// ../ui/src/lib/interaction-feedback.ts
-var soundByIntent = {
-  press: "press",
-  selection: "tick",
-  toggle: "toggle"
-};
-var soundsEnabled = false;
-setEnabled(false);
-function triggerInteractionFeedback(intent, options = {}) {
-  if (options.haptic) {
-    haptic();
-  }
-  if (!soundsEnabled) return;
-  if (globalThis.document?.hidden) return;
-  try {
-    play(soundByIntent[intent]);
-  } catch {
-  }
-}
-
-// ../ui/src/warmio/dropdown-menu.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function DropdownMenu(props) {
   return /* @__PURE__ */ jsx(MenuPrimitive.Root, { ...props });
@@ -122,20 +58,23 @@ function DropdownMenuContent({
       side,
       sideOffset,
       className: "isolate z-50 outline-none",
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         MenuPrimitive.Popup,
         {
           ref,
           "data-slot": "dropdown-menu-content",
+          "data-fluid-menu": "menu",
+          render: (popupProps, state) => /* @__PURE__ */ jsx(FluidOverlay, { props: popupProps, state, motion: "menu", tier: "fast" }),
           className: cn(
-            "z-[var(--z-popover)] max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-2 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none",
+            "relative isolate z-[var(--z-popover)] max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-2 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-closed:overflow-hidden [&_[data-fluid-menu-item]:is(:focus,[data-highlighted],[data-popup-open],[data-open],[aria-checked=true])]:bg-transparent!",
             dropdownMenuContentSizeClasses[size],
-            dropdownMenuContentSpacingClasses[spacing],
-            "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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none"
+            dropdownMenuContentSpacingClasses[spacing]
           ),
           ...props,
-          children
+          children: [
+            children,
+            /* @__PURE__ */ jsx(FluidMenuHighlights, { kind: "menu" })
+          ]
         }
       )
     }
@@ -164,7 +103,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-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",
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 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 +125,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-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",
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 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
     }
@@ -203,7 +142,6 @@ function DropdownMenuCheckboxItem({
   ...props
 }) {
   const handleCheckedChange = (nextChecked, eventDetails) => {
-    triggerInteractionFeedback("toggle");
     onCheckedChange?.(nextChecked, eventDetails);
   };
   return /* @__PURE__ */ jsxs(
@@ -212,7 +150,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-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",
+      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 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,
@@ -237,7 +175,6 @@ function DropdownMenuRadioGroup({
   ...props
 }) {
   const handleValueChange = (value, eventDetails) => {
-    triggerInteractionFeedback("selection");
     onValueChange?.(value, eventDetails);
   };
   return /* @__PURE__ */ jsx(
@@ -253,7 +190,6 @@ function DropdownMenuRadioItem({
   children,
   inset,
   className: _className,
-  presentation,
   ref,
   style: _style,
   ...props
@@ -265,8 +201,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-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"
+        "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 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"
       ),
       ...props,
       children: [
@@ -296,7 +231,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-4",
+      className: "px-2 py-2 data-inset:pl-4",
       ...props
     }
   );

package/dist/chunks/{chunk-ICC7GQXS.js → chunk-3AVFUXCV.js}

@@ -6,7 +6,7 @@ import {
 import { jsx } from "react/jsx-runtime";
 var badgeToneClassNameByTone = {
   default: "border-border bg-muted text-foreground",
-  info: "border-info/20 bg-info/10 text-info",
+  info: "border-info-border bg-info-bg-subtle text-info-text",
   success: "border-success-border bg-success/10 text-success",
   warning: "border-warning-border bg-warning/10 text-warning",
   destructive: "border-destructive/20 bg-destructive/10 text-destructive"
@@ -19,12 +19,12 @@ var solidBadgeToneClassNameByTone = {
   destructive: "border-destructive bg-destructive text-destructive-foreground"
 };
 var badgeSizeClassNameBySize = {
-  sm: "h-5 px-2 py-2 text-xs",
-  default: "h-6 px-2 py-2 text-xs"
+  sm: "h-5 px-2 py-0",
+  default: "h-6 px-2 py-0"
 };
 var badgeCircleClassNameBySize = {
-  sm: "size-5 px-0 py-0 text-xs leading-none",
-  default: "size-6 px-0 py-0 text-xs leading-none"
+  sm: "size-5 px-0 py-0",
+  default: "size-6 px-0 py-0"
 };
 function Badge({
   tone,
@@ -49,14 +49,16 @@ function Badge({
       "data-shape": shape,
       "data-surface": surface,
       "data-placement": placement,
+      "data-size": size,
       id,
       "aria-label": ariaLabel,
       className: cn(
-        "inline-flex w-fit max-w-full items-center justify-center gap-2 overflow-hidden rounded-full border font-bold whitespace-nowrap transition-colors",
+        "inline-flex w-fit max-w-full items-center justify-center gap-2 overflow-hidden rounded-full border whitespace-nowrap transition-colors",
         emphasis === "solid" ? solidBadgeToneClassNameByTone[resolvedTone] : badgeToneClassNameByTone[resolvedTone],
         badgeSizeClassNameBySize[size],
         shape === "circle" && badgeCircleClassNameBySize[size],
         surface === "floating" && "border-background ring-2 ring-background",
+        placement === "inline" && "align-middle",
         placement === "top-end" && "pointer-events-none absolute -right-2 -top-2 z-10",
         width === "metric" && "w-12",
         width === "compact" && "min-w-6",

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

@@ -6,7 +6,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunk-YTDMREDR.js";
+} from "./chunk-A2NLFM6R.js";
 
 // ../ui/src/warmio/sheet.tsx
 import { jsx } from "react/jsx-runtime";
@@ -29,17 +29,10 @@ function SheetContent2({
   width = "default",
   ...props
 }) {
-  const navigationClassName = presentation === "navigation" ? `w-[var(--sidebar-width-mobile)] gap-0 overflow-hidden border-border bg-sidebar p-0 text-foreground duration-200 ease-in-out data-open:fade-in-100 data-closed:fade-out-100${responsive === "mobileOnly" ? " md:hidden" : ""}` : void 0;
-  const widthClassName = width === "full" ? "w-full data-[side=left]:sm:max-w-none data-[side=right]:sm:max-w-none" : width === "wide" ? "w-full data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg" : void 0;
-  const contentClassName = presentation === "scroll" ? `overflow-y-auto${widthClassName ? ` ${widthClassName}` : ""}` : navigationClassName ?? widthClassName;
-  return /* @__PURE__ */ jsx(
-    SheetContent,
-    {
-      ...props,
-      className: contentClassName,
-      overlayClassName: presentation === "navigation" ? "duration-200 ease-in-out" : void 0
-    }
-  );
+  const navigationClassName = presentation === "navigation" ? `max-lg:w-auto lg:w-[var(--sidebar-width-mobile)] gap-0 overflow-hidden border-border bg-sidebar p-0 text-foreground${responsive === "mobileOnly" ? " md:hidden" : ""}` : void 0;
+  const widthClassName = width === "full" ? "w-full data-[side=left]:sm:max-w-none data-[side=right]:sm:max-w-none data-[side=responsive]:lg:max-w-none" : width === "wide" ? "w-full data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg data-[side=responsive]:lg:max-w-lg" : void 0;
+  const contentClassName = presentation === "scroll" ? widthClassName : navigationClassName ?? widthClassName;
+  return /* @__PURE__ */ jsx(SheetContent, { ...props, className: contentClassName });
 }
 function SheetFooter2({ className: _className, style: _style, ...props }) {
   return /* @__PURE__ */ jsx(SheetFooter, { ...props });
@@ -63,7 +56,8 @@ function SheetTitle2({
     SheetTitle,
     {
       ...props,
-      className: presentation === "navigation" ? "min-w-0 truncate text-left text-base font-bold text-foreground" : void 0
+      "data-presentation": presentation,
+      className: presentation === "navigation" ? "min-w-0 truncate text-left text-foreground" : void 0
     }
   );
 }

package/dist/chunks/{chunk-YTDMREDR.js → chunk-A2NLFM6R.js}

@@ -1,3 +1,6 @@
+import {
+  FluidOverlay
+} from "./chunk-JXSJTIX7.js";
 import {
   cn
 } from "./chunk-VIB7OX7D.js";
@@ -21,20 +24,20 @@ var buttonVariants = cva(
     variants: {
       variant: {
         default: "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)] hover:bg-[image:var(--button-primary-gradient-hover)] active:bg-[var(--button-primary-active)]",
-        outline: "bg-background shadow-[var(--button-outline-shadow)] hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-[var(--warm-surface-raised-dark,var(--input))] dark:[--button-outline-shadow:inset_0_1px_0_rgb(255_255_255_/_0.1)] dark:hover:bg-[var(--warm-surface-raised-hover-dark,var(--muted))]",
+        outline: "bg-background shadow-[var(--button-outline-shadow)] hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-[var(--warm-surface-raised-dark,var(--input))] dark:hover:bg-[var(--warm-surface-raised-hover-dark,var(--muted))]",
         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"
+        link: "decoration-current hover:underline"
       },
       size: {
         default: "h-9 gap-2 rounded-full px-4 in-data-[slot=button-group]:rounded-full has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         xs: "h-6 gap-2 rounded-full px-2 text-xs in-data-[slot=button-group]:rounded-full has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-2 rounded-full px-2 in-data-[slot=button-group]:rounded-full has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         md: "h-9 gap-2 rounded-full px-4 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-11 gap-2 rounded-full px-4 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        xl: "h-12 gap-2 rounded-full px-4 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        jumbo: "h-14 gap-2 rounded-full px-4 text-lg font-bold has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 [&_svg:not([class*='size-'])]:size-5",
+        lg: "h-11 gap-2 rounded-full px-4 text-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        xl: "h-12 gap-2 rounded-full px-4 text-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        jumbo: "h-14 gap-2 rounded-full px-4 text-sm font-medium has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 [&_svg:not([class*='size-'])]:size-5",
         option: "h-auto min-h-16 items-start justify-start gap-2 whitespace-normal rounded-full px-4 py-4 text-sm",
         icon: "size-9",
         "icon-round": "size-9 rounded-full",
@@ -81,6 +84,7 @@ function Button({
 // ../ui/src/components/sheet.tsx
 import { XIcon } from "lucide-react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SheetCloseSlotContext = React2.createContext(null);
 function Sheet(props) {
   return /* @__PURE__ */ jsx2(SheetPrimitive.Root, { ...props });
 }
@@ -101,68 +105,90 @@ function SheetOverlay({ className, ...props }) {
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "fixed inset-0 z-[var(--z-overlay-backdrop)] duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-[var(--z-overlay-backdrop)]",
         MODAL_BACKDROP_CLASS_NAME,
         className
       ),
-      ...props
+      ...props,
+      render: (props2, state) => /* @__PURE__ */ jsx2(FluidOverlay, { props: props2, state, motion: "backdrop", tier: "moderate" })
     }
   );
 }
 function SheetContent({
   className,
   children,
-  side = "right",
+  side = "responsive",
   showCloseButton = true,
   overlayClassName,
+  render,
   ...props
 }) {
+  const closeButton = showCloseButton ? /* @__PURE__ */ jsxs(
+    SheetPrimitive.Close,
+    {
+      "data-slot": "sheet-close",
+      render: /* @__PURE__ */ jsx2(Button, { variant: "ghost", className: "border border-border", size: "icon-sm" }),
+      children: [
+        /* @__PURE__ */ jsx2(XIcon, {}),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx2(SheetOverlay, { className: overlayClassName }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx2(
       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=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=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=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=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",
+          "fixed z-[calc(var(--z-overlay-backdrop)+1)] flex min-h-0 flex-col gap-0 rounded-xl border border-border bg-popover bg-clip-padding text-popover-foreground shadow-lg data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-[side=responsive]:lg:w-3/4 data-[side=responsive]:lg:max-w-sm",
           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" })
-              ]
-            }
-          )
-        ]
+        render: (props2, state) => /* @__PURE__ */ jsx2(
+          FluidOverlay,
+          {
+            props: props2,
+            state,
+            render,
+            motion: "sheet",
+            side,
+            tier: "moderate"
+          }
+        ),
+        children: /* @__PURE__ */ jsx2(SheetCloseSlotContext.Provider, { value: closeButton, children })
       }
     )
   ] });
 }
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-2 p-4", className), ...props });
+function SheetHeader({ className, children, ...props }) {
+  const closeButton = React2.useContext(SheetCloseSlotContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn(
+        "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-2 p-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        closeButton
+      ]
+    }
+  );
 }
 function SheetFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      className: cn(
+        "mt-auto flex w-full flex-row flex-wrap items-center justify-end gap-2 border-t border-border p-4 [&>:first-child]:me-auto [&>:only-child]:me-0",
+        className
+      ),
       ...props
     }
   );
@@ -172,7 +198,7 @@ function SheetTitle({ className, ...props }) {
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
-      className: cn("font-heading font-bold text-foreground", className),
+      className: cn("text-foreground", className),
       ...props
     }
   );
@@ -182,7 +208,7 @@ function SheetDescription({ className, ...props }) {
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("text-muted-foreground", className),
       ...props
     }
   );