@bearmenu/ui 0.8.37 → 0.8.39

package/dist/{chunk-XLHMF6F5.js → chunk-NF5UMLSL.js}

@@ -4,20 +4,30 @@ import * as React from 'react';
 import { Drawer as Drawer$1 } from 'vaul';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var DrawerDirectionContext = React.createContext("bottom");
+var DrawerContext = React.createContext({
+  direction: "bottom",
+  modal: true
+});
 var Drawer = (_a) => {
   var _b = _a, {
     shouldScaleBackground = false,
-    direction = "bottom"
+    direction = "bottom",
+    modal = true,
+    autoFocus = true
   } = _b, props = __objRest(_b, [
     "shouldScaleBackground",
-    "direction"
+    "direction",
+    "modal",
+    "autoFocus"
   ]);
-  return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx(
+  const context = React.useMemo(() => ({ direction, modal }), [direction, modal]);
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
     Drawer$1.Root,
     __spreadValues({
       shouldScaleBackground,
-      direction
+      direction,
+      modal,
+      autoFocus
     }, props)
   ) });
 };
@@ -39,7 +49,7 @@ var DrawerOverlay = React.forwardRef((_a, ref) => {
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
 var DrawerContent = React.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "flush", showHandle, overlayClassName, children } = _b, props = __objRest(_b, ["className", "variant", "showHandle", "overlayClassName", "children"]);
-  const direction = React.useContext(DrawerDirectionContext);
+  const { direction, modal } = React.useContext(DrawerContext);
   const isVertical = direction === "top" || direction === "bottom";
   const handleEnabled = showHandle != null ? showHandle : direction === "bottom";
   const positionClasses = direction === "bottom" ? "inset-x-0 bottom-0 flex-col rounded-t-2xl border-t [padding-bottom:max(env(safe-area-inset-bottom),0px)]" : direction === "top" ? "inset-x-0 top-0 flex-col rounded-b-2xl border-b [padding-top:max(env(safe-area-inset-top),0px)]" : direction === "left" ? "inset-y-0 left-0 h-full w-3/4 max-w-sm flex-col rounded-r-2xl border-r [padding-left:max(env(safe-area-inset-left),0px)]" : "inset-y-0 right-0 h-full w-3/4 max-w-sm flex-col rounded-l-2xl border-l [padding-right:max(env(safe-area-inset-right),0px)]";
@@ -50,6 +60,7 @@ var DrawerContent = React.forwardRef((_a, ref) => {
       __spreadProps(__spreadValues({
         ref,
         "data-slot": "drawer-content",
+        "aria-modal": modal ? true : void 0,
         className: cn(
           "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
           positionClasses,

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "default" | "secondary" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "link" | "secondary" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
+    size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/command.d.ts

@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/drawer.d.ts

@@ -4,8 +4,15 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+/**
+ * `autoFocus` defaults to `true` here, where vaul defaults it to `false`.
+ * vaul's default cancels Radix's open auto-focus, so focus never enters the
+ * sheet, Radix's FocusScope never engages, and Tab walks the page behind a
+ * modal drawer. A caller that must not move focus on open passes
+ * `autoFocus={false}`.
+ */
 declare const Drawer: {
-    ({ shouldScaleBackground, direction, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+    ({ shouldScaleBackground, direction, modal, autoFocus, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/drawer.js

@@ -1,3 +1,3 @@
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-XLHMF6F5.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-NF5UMLSL.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/empty-state.d.ts

@@ -4,6 +4,7 @@ type EmptyStateAction = {
     label: string;
     onClick: () => void;
 };
+type EmptyStateVariant = "default" | "search" | "error";
 interface EmptyStateProps {
     title: string;
     description: string;
@@ -11,10 +12,34 @@ interface EmptyStateProps {
     illustration?: React.ReactNode;
     action?: EmptyStateAction;
     secondaryAction?: EmptyStateAction;
-    variant?: "default" | "search" | "error";
+    /**
+     * The primary action's style. Defaults by variant: `outline` for `error`
+     * (try again) and `search` (clear filters) — a recovery step, not the page's
+     * main call to action — and a filled `default` for the plain empty state,
+     * where the action is usually "create the first one".
+     */
+    actionVariant?: "default" | "outline";
+    variant?: EmptyStateVariant;
     size?: "sm" | "md" | "lg";
+    /**
+     * `card` draws the booking pages' whole-body state card (reports/02-p4,
+     * calendar/02-c2): a 16px-radius card surface with the resting card shadow.
+     * `none` (the default) leaves the surface to the container it sits in.
+     */
+    surface?: "none" | "card";
     className?: string;
 }
+/**
+ * EmptyState — an icon tile, a title, one line of body and an optional action,
+ * spaced as the booking frames draw them (reports/02-p4, calendar/02-c2): a
+ * 64px tile (72px from `sm`) with a 28px glyph, 16px to the title, 12px from
+ * title to body, 16px from body to the action. The action is full-width on a
+ * phone and hugs its label from `sm`.
+ *
+ * The error variant says "error" with its glyph and its tile's wash, not by
+ * painting the title and body red: red body copy is both harder to read and
+ * louder than a load failure the user can retry.
+ */
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 declare const SearchEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;
 declare const ErrorEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/empty-state.js

@@ -5,7 +5,7 @@ import { Text } from '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
-import { FileX, AlertCircle, Search } from 'lucide-react';
+import { AlertCircle, Search, FileX } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var sizeStyles = {
@@ -13,6 +13,16 @@ var sizeStyles = {
   md: "py-12 px-6",
   lg: "py-16 px-8"
 };
+var DEFAULT_ACTION_VARIANT = {
+  default: "default",
+  search: "outline",
+  error: "outline"
+};
+var DEFAULT_ICON = {
+  default: /* @__PURE__ */ jsx(FileX, { className: "text-muted-foreground", "aria-hidden": true }),
+  search: /* @__PURE__ */ jsx(Search, { className: "text-muted-foreground", "aria-hidden": true }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive", "aria-hidden": true })
+};
 var EmptyState = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -22,8 +32,10 @@ var EmptyState = React.forwardRef(
       illustration,
       action,
       secondaryAction,
+      actionVariant,
       variant = "default",
       size = "md",
+      surface = "none",
       className
     } = _b, props = __objRest(_b, [
       "title",
@@ -32,21 +44,12 @@ var EmptyState = React.forwardRef(
       "illustration",
       "action",
       "secondaryAction",
+      "actionVariant",
       "variant",
       "size",
+      "surface",
       "className"
     ]);
-    const getDefaultIcon = () => {
-      switch (variant) {
-        case "search":
-          return /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 text-muted-foreground/50" });
-        case "error":
-          return /* @__PURE__ */ jsx(AlertCircle, { className: "h-12 w-12 text-destructive/50" });
-        default:
-          return /* @__PURE__ */ jsx(FileX, { className: "h-12 w-12 text-muted-foreground/50" });
-      }
-    };
-    const textColor = variant === "error" ? "destructive" : "muted";
     return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -55,15 +58,36 @@ var EmptyState = React.forwardRef(
         className: cn(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
+          surface === "card" && "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
           className
         )
       }, props), {
         children: [
-          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: icon || getDefaultIcon() }),
-          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", color: textColor, className: "text-lg mb-2", children: title }),
-          /* @__PURE__ */ jsx(Text, { as: "p", color: textColor, className: "text-sm max-w-md mb-6", children: description }),
-          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            action && /* @__PURE__ */ jsx(Button, { onClick: action.onClick, variant: "default", className: "glass-hover", children: action.label }),
+          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "empty-state-icon",
+              className: cn(
+                // The glyph size is the tile's, whatever size the caller's icon
+                // node asked for — a 40px icon in a 64px tile has no margin.
+                "mb-4 flex size-16 shrink-0 items-center justify-center rounded-2xl border border-border shadow-sm sm:size-18 [&_svg]:size-7",
+                variant === "error" ? "bg-destructive/5" : "bg-card"
+              ),
+              children: icon != null ? icon : DEFAULT_ICON[variant]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: "text-lg", children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { as: "p", color: "muted", className: "mt-3 max-w-md text-sm", children: description }) : null,
+          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center", children: [
+            action && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: action.onClick,
+                variant: actionVariant != null ? actionVariant : DEFAULT_ACTION_VARIANT[variant],
+                className: "glass-hover",
+                children: action.label
+              }
+            ),
             secondaryAction && /* @__PURE__ */ jsx(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: secondaryAction.label })
           ] })
         ]

package/dist/components/pan-zoom-viewport.d.ts

@@ -23,7 +23,9 @@ import * as React from 'react';
  * - Keyboard, with the viewport focused: arrows pan (Shift for four times the
  *   step); `+` / `-` zoom and `0` fits, from anywhere inside it. Tabbing onto
  *   a table that sits off screen pans it into view.
- * - The + / − / Fit controls, bottom right.
+ * - The + / − / Fit controls: a raised card 12px in from the bottom-right
+ *   corner, 44 × 44 per button. Fit and the pan bounds keep the content clear
+ *   of them.
  *
  * The min-scale floor: `Fit` never shrinks below `minScale`. On a phone the
  * plan would otherwise fit at a size no finger can hit, so below the floor it
@@ -96,8 +98,18 @@ type PanZoomViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children
     zoomStep?: number;
     /** One arrow press, in viewport px. Default 48. */
     panStep?: number;
-    /** The air Fit leaves around the content, and how far past it a pan may go. Default 24. */
+    /**
+     * The air Fit leaves around the content, and how far past it a pan may go.
+     * Default 24. With `controls` on, the side the control stack would cover
+     * (right or bottom, whichever costs the fit less) is widened to clear it.
+     */
     fitPadding?: number;
+    /**
+     * Where fitted content sits vertically when it is shorter than the
+     * viewport: `center` (default), or `top` — pinned under the top padding,
+     * as a phone shows a plan.
+     */
+    fitAlign?: "center" | "top";
     /** Render the + / − / Fit controls. Default true. */
     controls?: boolean;
     /** Called with every transform — gestures included, so keep it cheap. */
@@ -122,8 +134,18 @@ declare const PanZoomViewport: React.ForwardRefExoticComponent<Omit<React.HTMLAt
     zoomStep?: number;
     /** One arrow press, in viewport px. Default 48. */
     panStep?: number;
-    /** The air Fit leaves around the content, and how far past it a pan may go. Default 24. */
+    /**
+     * The air Fit leaves around the content, and how far past it a pan may go.
+     * Default 24. With `controls` on, the side the control stack would cover
+     * (right or bottom, whichever costs the fit less) is widened to clear it.
+     */
     fitPadding?: number;
+    /**
+     * Where fitted content sits vertically when it is shorter than the
+     * viewport: `center` (default), or `top` — pinned under the top padding,
+     * as a phone shows a plan.
+     */
+    fitAlign?: "center" | "top";
     /** Render the + / − / Fit controls. Default true. */
     controls?: boolean;
     /** Called with every transform — gestures included, so keep it cheap. */

package/dist/components/pan-zoom-viewport.js

@@ -12,12 +12,21 @@ var DRAG_THRESHOLD = 4;
 var MAX_WHEEL_ZOOM_DELTA = 25;
 var WHEEL_ZOOM_SPEED = 0.01;
 var EPSILON = 1e-3;
+var CONTROLS_RESERVE_X = 12 + 44 + 8;
+var CONTROLS_RESERVE_Y = 12 + 130 + 8;
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
-function clampAxis(offset, content, viewport, pad) {
-  if (content + pad * 2 <= viewport) return (viewport - content) / 2;
-  return clamp(offset, viewport - content - pad, pad);
+function clampAxis(offset, content, viewport, start, end, align) {
+  const room = viewport - start - end;
+  if (content <= room) return align === "start" ? start : start + (room - content) / 2;
+  return clamp(offset, viewport - content - end, start);
+}
+function fitScale(viewport, insets, contentWidth, contentHeight) {
+  return Math.min(
+    (viewport.width - insets.left - insets.right) / contentWidth,
+    (viewport.height - insets.top - insets.bottom) / contentHeight
+  );
 }
 function distance(a, b) {
   return Math.hypot(a.x - b.x, a.y - b.y);
@@ -40,6 +49,7 @@ var PanZoomViewport = React.forwardRef(
       zoomStep = 1.25,
       panStep = 48,
       fitPadding = 24,
+      fitAlign = "center",
       controls = true,
       onTransformChange,
       apiRef,
@@ -55,6 +65,7 @@ var PanZoomViewport = React.forwardRef(
       "zoomStep",
       "panStep",
       "fitPadding",
+      "fitAlign",
       "controls",
       "onTransformChange",
       "apiRef",
@@ -79,26 +90,37 @@ var PanZoomViewport = React.forwardRef(
       onTransformChangeRef.current = onTransformChange;
       zoomLevelRef.current = labels.zoomLevel;
     });
+    const insets = React.useMemo(() => {
+      const base = { top: fitPadding, right: fitPadding, bottom: fitPadding, left: fitPadding };
+      if (!controls || !viewport) return base;
+      const right = __spreadProps(__spreadValues({}, base), { right: Math.max(fitPadding, CONTROLS_RESERVE_X) });
+      const bottom = __spreadProps(__spreadValues({}, base), { bottom: Math.max(fitPadding, CONTROLS_RESERVE_Y) });
+      return fitScale(viewport, bottom, contentWidth, contentHeight) > fitScale(viewport, right, contentWidth, contentHeight) ? bottom : right;
+    }, [controls, viewport, fitPadding, contentWidth, contentHeight]);
     const clampTransform = React.useCallback(
       (next) => {
         if (!viewport || viewport.width <= 0 || viewport.height <= 0) return next;
         const scale = clamp(next.scale, minScale, maxScale);
         return {
           scale,
-          x: clampAxis(next.x, contentWidth * scale, viewport.width, fitPadding),
-          y: clampAxis(next.y, contentHeight * scale, viewport.height, fitPadding)
+          x: clampAxis(next.x, contentWidth * scale, viewport.width, insets.left, insets.right, "center"),
+          y: clampAxis(
+            next.y,
+            contentHeight * scale,
+            viewport.height,
+            insets.top,
+            insets.bottom,
+            fitAlign === "top" ? "start" : "center"
+          )
         };
       },
-      [viewport, minScale, maxScale, contentWidth, contentHeight, fitPadding]
+      [viewport, minScale, maxScale, contentWidth, contentHeight, insets, fitAlign]
     );
     const fitted = React.useCallback(() => {
       if (!viewport || viewport.width <= 0 || viewport.height <= 0) return null;
-      const scale = Math.min(
-        (viewport.width - fitPadding * 2) / contentWidth,
-        (viewport.height - fitPadding * 2) / contentHeight
-      );
-      return clampTransform({ scale, x: fitPadding, y: fitPadding });
-    }, [viewport, fitPadding, contentWidth, contentHeight, clampTransform]);
+      const scale = fitScale(viewport, insets, contentWidth, contentHeight);
+      return clampTransform({ scale, x: insets.left, y: insets.top });
+    }, [viewport, insets, contentWidth, contentHeight, clampTransform]);
     const commit = React.useCallback(
       (next, options) => {
         var _a2;
@@ -382,13 +404,13 @@ var PanZoomViewport = React.forwardRef(
       if (pressing.current || event.target === event.currentTarget) return;
       const bounds = event.currentTarget.getBoundingClientRect();
       const rect = event.target.getBoundingClientRect();
-      const margin = fitPadding;
       let dx = 0;
       let dy = 0;
-      if (rect.left < bounds.left + margin) dx = bounds.left + margin - rect.left;
-      else if (rect.right > bounds.right - margin) dx = bounds.right - margin - rect.right;
-      if (rect.top < bounds.top + margin) dy = bounds.top + margin - rect.top;
-      else if (rect.bottom > bounds.bottom - margin) dy = bounds.bottom - margin - rect.bottom;
+      if (rect.left < bounds.left + insets.left) dx = bounds.left + insets.left - rect.left;
+      else if (rect.right > bounds.right - insets.right) dx = bounds.right - insets.right - rect.right;
+      if (rect.top < bounds.top + insets.top) dy = bounds.top + insets.top - rect.top;
+      else if (rect.bottom > bounds.bottom - insets.bottom)
+        dy = bounds.bottom - insets.bottom - rect.bottom;
       if (dx !== 0 || dy !== 0) panBy(dx, dy);
     };
     const scaledWidth = contentWidth * transform.scale;
@@ -479,14 +501,14 @@ var PanZoomViewport = React.forwardRef(
               orientation: "vertical",
               "aria-label": labels.controls,
               "data-slot": "pan-zoom-viewport-controls",
-              className: "absolute bottom-3 right-3 rounded-xl bg-card shadow-sm",
+              className: "absolute bottom-3 right-3 rounded-xl bg-card shadow-[var(--shadow-card)]",
               children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
                     type: "button",
                     variant: "outline",
-                    size: "icon-sm",
+                    size: "icon",
                     "aria-label": labels.zoomIn,
                     disabled: atMax,
                     onClick: zoomIn,
@@ -498,7 +520,7 @@ var PanZoomViewport = React.forwardRef(
                   {
                     type: "button",
                     variant: "outline",
-                    size: "icon-sm",
+                    size: "icon",
                     "aria-label": labels.zoomOut,
                     disabled: atMin,
                     onClick: zoomOut,
@@ -510,7 +532,7 @@ var PanZoomViewport = React.forwardRef(
                   {
                     type: "button",
                     variant: "outline",
-                    size: "icon-sm",
+                    size: "icon",
                     className: "text-xs font-semibold",
                     onClick: fit,
                     children: labels.fit

package/dist/components/responsive-overlay.js

@@ -1,6 +1,6 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
 import { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
-import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-XLHMF6F5.js';
+import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-NF5UMLSL.js';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-IQIJCMG2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
@@ -59,15 +59,14 @@ var ResponsiveOverlay = React.forwardRef(
   }, ref) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container = isWide ? desktop : "drawer";
-    const titleId = React.useId();
-    const subtitleId = React.useId();
     useFocusReturn(open);
+    const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
     const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx(Title, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
-        subtitle ? /* @__PURE__ */ jsx(Description, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx(Title, { className: "text-[19px] font-bold leading-tight", children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
       ] }),
       /* @__PURE__ */ jsxs(
         "button",
@@ -102,17 +101,16 @@ var ResponsiveOverlay = React.forwardRef(
     if (container === "sheet") {
       return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
         SheetContent,
-        __spreadProps(__spreadValues({
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
           ref,
           side: "right",
           attachment: "inset",
           hideClose: true,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          "aria-labelledby": titleId,
-          "aria-describedby": subtitle ? subtitleId : void 0,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+        }, describedBy), {
           "data-slot": "responsive-overlay-sheet",
           "data-modal": modal ? "true" : "false"
-        }, modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
+        }), modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
           className: cn(
             "flex w-[420px] max-w-[calc(100vw-1.5rem)] flex-col gap-0 bg-card p-0",
             className
@@ -128,13 +126,12 @@ var ResponsiveOverlay = React.forwardRef(
     if (container === "dialog") {
       return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
         DialogContent,
-        {
+        __spreadProps(__spreadValues({
           ref,
           size,
           showCloseButton: false,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          "aria-labelledby": titleId,
-          "aria-describedby": subtitle ? subtitleId : void 0,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+        }, describedBy), {
           className: cn(
             // The dialog's own `grid gap-4 p-6` would put air between the
             // header, the body and the band the frames draw flush.
@@ -146,23 +143,22 @@ var ResponsiveOverlay = React.forwardRef(
             body,
             foot
           ]
-        }
+        })
       ) });
     }
     return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
       DrawerContent,
-      {
+      __spreadProps(__spreadValues({
         ref,
-        overlayClassName: "bg-scrim-overlay",
-        "aria-labelledby": titleId,
-        "aria-describedby": subtitle ? subtitleId : void 0,
+        overlayClassName: "bg-scrim-overlay"
+      }, describedBy), {
         className: cn("flex max-h-[85vh] flex-col p-0", className),
         children: [
           header,
           body,
           foot
         ]
-      }
+      })
     ) });
   }
 );

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.37",
+  "version": "0.8.39",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {