@bearmenu/ui 0.8.39 → 0.8.41

package/dist/{chunk-FVSKGCK3.js → chunk-DZHKUUYV.js}

@@ -36,7 +36,16 @@ var cardVariants = cva(
         // several-hundred-pixel slab that translates under the cursor is a
         // wobble rather than a lift. A panel that size delegates interaction to
         // its children.
-        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]"
+        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
+        // The booking frames' settings/report SECTION card (Settings Rules U0,
+        // Reports P0): a smaller, page-content-scale radius than every other
+        // variant's `rounded-3xl` — 14px on a phone, 16px from `sm` — carried
+        // entirely by `--shadow-card` with no border at all. Not a bigger
+        // `elevated`: that variant is fixed at 24px and keeps its hairline in
+        // both themes on purpose (see its note); this one is for the specific
+        // page-section shape the booking design draws, not a general
+        // border-dropping replacement for `elevated`.
+        section: "rounded-[14px] bg-card shadow-[var(--shadow-card)] sm:rounded-[16px]"
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -68,6 +77,11 @@ var cardVariants = cva(
         variant: "elevated",
         interactive: true,
         class: "hover:shadow-[var(--shadow-card-hover)]"
+      },
+      {
+        variant: "section",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]"
       }
     ],
     defaultVariants: {

package/dist/{chunk-5SGKGFMN.js → chunk-K6ACNU2L.js}

@@ -70,7 +70,12 @@ var buttonVariants = cva(
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
         sm: "h-9 rounded-lg px-4",
-        default: "h-11 px-6 py-2",
+        /**
+         * The booking frames' 44px controls (Reports/02-p4 "Try again" and its
+         * report-range trigger, Calendar/08-r0 "New reservation") all draw
+         * 10px, not the base `rounded-xl` (12px) this size otherwise inherits.
+         */
+        default: "h-11 rounded-[10px] px-6 py-2",
         lg: "h-12 rounded-2xl px-8",
         /** The `ink` action's shape. Owns the radius so no variant fights it. */
         pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",

package/dist/components/alert-dialog.js

@@ -1,4 +1,4 @@
-import { buttonVariants } from '../chunk-5SGKGFMN.js';
+import { buttonVariants } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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?: "default" | "secondary" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "secondary" | "default" | "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?: "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;
+    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;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/button.js

@@ -1,4 +1,4 @@
-export { Button, buttonVariants } from '../chunk-5SGKGFMN.js';
+export { Button, buttonVariants } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/calendar.js

@@ -1,4 +1,4 @@
-import { buttonVariants, Button } from '../chunk-5SGKGFMN.js';
+import { buttonVariants, Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card.js

@@ -1,4 +1,4 @@
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-FVSKGCK3.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-DZHKUUYV.js';
 import '../chunk-ZLMRVBD7.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/carousel.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/coach-marks.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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>>, "value" | "onChange" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "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">, "value" | "heading"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
     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">, "value" | "onSelect" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -3,6 +3,12 @@ import * as React from 'react';
 type EmptyStateAction = {
     label: string;
     onClick: () => void;
+    /**
+     * Rendered before the label, sized like the DS button's own icons (the
+     * `Button` base class forces every child `<svg>` to 16px) — "Try again"
+     * carries a refresh glyph, "New reservation" a plus.
+     */
+    icon?: React.ReactNode;
 };
 type EmptyStateVariant = "default" | "search" | "error";
 interface EmptyStateProps {
@@ -23,8 +29,9 @@ interface EmptyStateProps {
     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.
+     * calendar/02-c2): a 14px-radius card surface (16px from `sm`) with the
+     * resting card shadow and no border. `none` (the default) leaves the
+     * surface to the container it sits in.
      */
     surface?: "none" | "card";
     className?: string;
@@ -36,6 +43,11 @@ interface EmptyStateProps {
  * title to body, 16px from body to the action. The action is full-width on a
  * phone and hugs its label from `sm`.
  *
+ * The tile is 20px-radius (22px from `sm`); the title is 16px on a phone,
+ * 18px from `sm`. On `surface="card"` the card itself is 14px-radius (16px
+ * from `sm`), no border, with 20px side padding to the action row — measured
+ * off the frames' DOM (reports/02-p4, calendar/02-c2), not eyeballed.
+ *
  * 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.

package/dist/components/empty-state.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
@@ -58,7 +58,7 @@ 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)]",
+          surface === "card" && "rounded-[14px] bg-card px-5 shadow-[var(--shadow-card)] sm:rounded-[16px]",
           className
         )
       }, props), {
@@ -70,25 +70,33 @@ var EmptyState = React.forwardRef(
               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",
+                // No border: the frames (reports/02-p4, calendar/02-c2) draw the
+                // tile with the shadow alone.
+                "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] shadow-sm sm:size-18 sm:rounded-[22px] [&_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 }),
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: "text-base sm: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(
+            action && /* @__PURE__ */ jsxs(
               Button,
               {
                 onClick: action.onClick,
                 variant: actionVariant != null ? actionVariant : DEFAULT_ACTION_VARIANT[variant],
                 className: "glass-hover",
-                children: action.label
+                children: [
+                  action.icon,
+                  action.label
+                ]
               }
             ),
-            secondaryAction && /* @__PURE__ */ jsx(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: secondaryAction.label })
+            secondaryAction && /* @__PURE__ */ jsxs(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: [
+              secondaryAction.icon,
+              secondaryAction.label
+            ] })
           ] })
         ]
       })

package/dist/components/event-detail-panel.js

@@ -2,7 +2,7 @@ import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/event-list-row-wide.js

@@ -3,7 +3,7 @@ import { Tag } from '../chunk-MWB7S54O.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-5SGKGFMN.js';
+import { buttonVariants } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/link-button.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/menu-family-block.js

@@ -3,7 +3,7 @@ import { HueChip } from '../chunk-6VOWT4YR.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-SWD6CJ35.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-5SGKGFMN.js';
+import { buttonVariants } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/menu-index-list.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/multi-select-combobox.js

@@ -2,7 +2,7 @@ import { Checkbox } from '../chunk-L3CDXVEP.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { Badge } from '../chunk-FQAIYKAS.js';

package/dist/components/pagination.js

@@ -1,4 +1,4 @@
-import { buttonVariants } from '../chunk-5SGKGFMN.js';
+import { buttonVariants } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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

@@ -1,5 +1,5 @@
 import { ButtonGroup } from '../chunk-EGU6EG73.js';
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/responsive-overlay.d.ts

@@ -53,6 +53,17 @@ type ResponsiveOverlayProps = {
     className?: string;
     /** Classes for the scrolling body. */
     bodyClassName?: string;
+    /**
+     * Focus this element on open instead of Radix's default — the first
+     * tabbable in DOM order, which in every mode here is the header's round
+     * Close button, since the header renders before the body. That is the
+     * right target for most overlays, but a confirm-style body (a primary
+     * action, a field that should be pre-filled) wants focus lower down.
+     * Passing a ref calls `event.preventDefault()` on Radix's
+     * `onOpenAutoFocus` and focuses this element instead; omitting the prop
+     * keeps today's default in every mode (dialog, sheet, drawer).
+     */
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
 };
 /**
  * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a

package/dist/components/responsive-overlay.js

@@ -55,11 +55,20 @@ var ResponsiveOverlay = React.forwardRef(
     modal = true,
     wideFrom = "md",
     className,
-    bodyClassName
+    bodyClassName,
+    initialFocusRef
   }, ref) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container = isWide ? desktop : "drawer";
     useFocusReturn(open);
+    const handleOpenAutoFocus = React.useCallback(
+      (event) => {
+        if (!(initialFocusRef == null ? void 0 : initialFocusRef.current)) return;
+        event.preventDefault();
+        initialFocusRef.current.focus();
+      },
+      [initialFocusRef]
+    );
     const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
@@ -106,7 +115,8 @@ var ResponsiveOverlay = React.forwardRef(
           side: "right",
           attachment: "inset",
           hideClose: true,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          onOpenAutoFocus: handleOpenAutoFocus
         }, describedBy), {
           "data-slot": "responsive-overlay-sheet",
           "data-modal": modal ? "true" : "false"
@@ -130,7 +140,8 @@ var ResponsiveOverlay = React.forwardRef(
           ref,
           size,
           showCloseButton: false,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          onOpenAutoFocus: handleOpenAutoFocus
         }, describedBy), {
           className: cn(
             // The dialog's own `grid gap-4 p-6` would put air between the
@@ -150,7 +161,8 @@ var ResponsiveOverlay = React.forwardRef(
       DrawerContent,
       __spreadProps(__spreadValues({
         ref,
-        overlayClassName: "bg-scrim-overlay"
+        overlayClassName: "bg-scrim-overlay",
+        onOpenAutoFocus: handleOpenAutoFocus
       }, describedBy), {
         className: cn("flex max-h-[85vh] flex-col p-0", className),
         children: [

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "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?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "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?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "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?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "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?: "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;
+    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;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/venue-events-block.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Card } from '../chunk-FVSKGCK3.js';
+import { Card } from '../chunk-DZHKUUYV.js';
 import '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/package.json

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

package/src/components/button.test.tsx

@@ -158,6 +158,16 @@ describe("Button component", () => {
     expect(screen.getByRole("button").className).toContain("h-9");
   });
 
+  // The booking frames' 44px controls (Reports/02-p4 "Try again" + its report-
+  // range trigger, Calendar/08-r0 "New reservation") draw a 10px radius, not
+  // the base `rounded-xl` (12px) this size otherwise inherits.
+  it("draws the default size at a 10px radius, not the base rounded-xl", () => {
+    render(<Button>x</Button>);
+    const classes = screen.getByRole("button").className;
+    expect(classes).toContain("rounded-[10px]");
+    expect(classes).not.toMatch(/(^|\s)rounded-xl(\s|$)/);
+  });
+
   it("applies fullWidth class when fullWidth is true", () => {
     render(<Button fullWidth>x</Button>);
     expect(screen.getByRole("button").className).toContain("w-full");

package/src/components/button.tsx

@@ -75,7 +75,12 @@ const buttonVariants = cva(
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
         sm: "h-9 rounded-lg px-4",
-        default: "h-11 px-6 py-2",
+        /**
+         * The booking frames' 44px controls (Reports/02-p4 "Try again" and its
+         * report-range trigger, Calendar/08-r0 "New reservation") all draw
+         * 10px, not the base `rounded-xl` (12px) this size otherwise inherits.
+         */
+        default: "h-11 rounded-[10px] px-6 py-2",
         lg: "h-12 rounded-2xl px-8",
         /** The `ink` action's shape. Owns the radius so no variant fights it. */
         pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",

package/src/components/card.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: ["glass", "surface"],
+      options: ["glass", "surface", "outline", "muted", "elevated", "elevatedPanel", "section"],
     },
   },
 } satisfies Meta<typeof Card>;
@@ -47,6 +47,25 @@ export const Surface: Story = {
   ),
 };
 
+/**
+ * The booking frames' settings/report section shape (Settings Rules U0,
+ * Reports P0): 14px radius on a phone, 16px from `sm`, shadow only, no
+ * border. Distinct from `elevated`, which is a fixed 24px with a hairline.
+ */
+export const Section: Story = {
+  render: () => (
+    <Card variant="section" className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Booking rules</CardTitle>
+        <CardDescription>How far ahead guests can book, and the slot length.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">Section content goes here.</p>
+      </CardContent>
+    </Card>
+  ),
+};
+
 export const WithForm: Story = {
   render: () => (
     <Card className="w-[350px]">

package/src/components/card.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Card } from "./card";
+
+describe("Card", () => {
+  it("draws the section variant borderless, at the booking frames' radius", () => {
+    render(<Card variant="section">Content</Card>);
+    const card = screen.getByText("Content");
+    expect(card).toHaveClass("rounded-[14px]", "sm:rounded-[16px]", "bg-card");
+    expect(card).not.toHaveClass("border", "border-border");
+  });
+
+  it("keeps elevated's fixed radius and hairline, unaffected by the new variant", () => {
+    render(<Card variant="elevated">Content</Card>);
+    const card = screen.getByText("Content");
+    expect(card).toHaveClass("rounded-3xl", "border", "border-border");
+  });
+
+  it("steps section's shadow up on hover when interactive", () => {
+    render(
+      <Card variant="section" interactive>
+        Content
+      </Card>
+    );
+    expect(screen.getByText("Content")).toHaveClass("hover:shadow-[var(--shadow-card-hover)]");
+  });
+});

package/src/components/card.tsx

@@ -35,6 +35,15 @@ const cardVariants = cva(
         // wobble rather than a lift. A panel that size delegates interaction to
         // its children.
         elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
+        // The booking frames' settings/report SECTION card (Settings Rules U0,
+        // Reports P0): a smaller, page-content-scale radius than every other
+        // variant's `rounded-3xl` — 14px on a phone, 16px from `sm` — carried
+        // entirely by `--shadow-card` with no border at all. Not a bigger
+        // `elevated`: that variant is fixed at 24px and keeps its hairline in
+        // both themes on purpose (see its note); this one is for the specific
+        // page-section shape the booking design draws, not a general
+        // border-dropping replacement for `elevated`.
+        section: "rounded-[14px] bg-card shadow-[var(--shadow-card)] sm:rounded-[16px]",
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -68,6 +77,11 @@ const cardVariants = cva(
         interactive: true,
         class: "hover:shadow-[var(--shadow-card-hover)]",
       },
+      {
+        variant: "section",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]",
+      },
     ],
   defaultVariants: {
     variant: "surface",

package/src/components/empty-state.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { RefreshCw, Plus } from "lucide-react";
 import { EmptyState, SearchEmptyState, ErrorEmptyState } from "./empty-state";
 
 const meta: Meta<typeof EmptyState> = {
@@ -49,7 +50,10 @@ export const Error: Story = {
   ),
 };
 
-/** The booking pages' whole-body failure (reports/02-p4, calendar/02-c2). */
+/**
+ * The booking pages' whole-body failure (reports/02-p4, calendar/02-c2): a
+ * 14px/16px-radius borderless card and the recovery action's refresh glyph.
+ */
 export const ErrorCard: Story = {
   render: () => (
     <div className="bg-background p-4">
@@ -57,7 +61,20 @@ export const ErrorCard: Story = {
         surface="card"
         title="Couldn't load this report"
         description="This is on our side, not an empty week. Try again in a moment."
-        action={{ label: "Try again", onClick: () => {} }}
+        action={{ label: "Try again", onClick: () => {}, icon: <RefreshCw /> }}
+      />
+    </div>
+  ),
+};
+
+/** The calendar day's failure, with the pinned footer's "New reservation" action alongside — both actions carry a leading glyph. */
+export const ActionWithIcon: Story = {
+  render: () => (
+    <div className="bg-background p-4">
+      <EmptyState
+        title="No reservations yet"
+        description="This day is open. Start the first booking."
+        action={{ label: "New reservation", onClick: () => {}, icon: <Plus /> }}
       />
     </div>
   ),

package/src/components/empty-state.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { RefreshCw } from "lucide-react";
 import { EmptyState, ErrorEmptyState, SearchEmptyState } from "./empty-state";
 
 const retry = { label: "Try again", onClick: () => {} };
@@ -46,15 +47,40 @@ describe("EmptyState", () => {
     expect(tile).toHaveClass("size-16", "sm:size-18", "[&_svg]:size-7");
   });
 
+  // reports/02-p4, calendar/02-c2: the tile draws the shadow alone, no border.
+  it("draws the icon tile borderless, with the shadow alone", () => {
+    render(<EmptyState title="Empty" description="" />);
+    const tile = document.querySelector('[data-slot="empty-state-icon"]');
+    expect(tile).toHaveClass("shadow-sm");
+    expect(tile).not.toHaveClass("border", "border-border");
+  });
+
   it("renders no empty paragraph when there is no body", () => {
     render(<EmptyState title="Empty" description="" />);
     expect(screen.getByRole("status").querySelector("p")).toBeNull();
   });
 
-  it("draws the card surface on request only", () => {
+  it("draws the card surface on request only, borderless with the frames' radius", () => {
     const { rerender } = render(<EmptyState title="Empty" description="Nothing." />);
     expect(screen.getByRole("status")).not.toHaveClass("bg-card");
     rerender(<EmptyState title="Empty" description="Nothing." surface="card" />);
-    expect(screen.getByRole("status")).toHaveClass("rounded-2xl", "bg-card", "border");
+    const card = screen.getByRole("status");
+    expect(card).toHaveClass("rounded-[14px]", "sm:rounded-[16px]", "bg-card", "px-5");
+    expect(card).not.toHaveClass("border", "border-border");
+  });
+
+  it("renders the action's icon before its label", () => {
+    render(
+      <ErrorEmptyState
+        title="Couldn't load this report"
+        description="On our side."
+        action={{ label: "Try again", onClick: () => {}, icon: <RefreshCw data-testid="retry-icon" /> }}
+      />
+    );
+    const button = screen.getByRole("button", { name: "Try again" });
+    const icon = screen.getByTestId("retry-icon");
+    expect(button).toContainElement(icon);
+    expect(button.firstElementChild).toBe(icon);
+    expect(button.textContent).toBe("Try again");
   });
 });

package/src/components/empty-state.tsx

@@ -9,6 +9,12 @@ import { Search, AlertCircle, FileX } from "lucide-react";
 type EmptyStateAction = {
   label: string;
   onClick: () => void;
+  /**
+   * Rendered before the label, sized like the DS button's own icons (the
+   * `Button` base class forces every child `<svg>` to 16px) — "Try again"
+   * carries a refresh glyph, "New reservation" a plus.
+   */
+  icon?: React.ReactNode;
 };
 
 type EmptyStateVariant = "default" | "search" | "error";
@@ -31,8 +37,9 @@ interface EmptyStateProps {
   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.
+   * calendar/02-c2): a 14px-radius card surface (16px from `sm`) with the
+   * resting card shadow and no border. `none` (the default) leaves the
+   * surface to the container it sits in.
    */
   surface?: "none" | "card";
   className?: string;
@@ -63,6 +70,11 @@ const DEFAULT_ICON: Record<EmptyStateVariant, React.ReactNode> = {
  * title to body, 16px from body to the action. The action is full-width on a
  * phone and hugs its label from `sm`.
  *
+ * The tile is 20px-radius (22px from `sm`); the title is 16px on a phone,
+ * 18px from `sm`. On `surface="card"` the card itself is 14px-radius (16px
+ * from `sm`), no border, with 20px side padding to the action row — measured
+ * off the frames' DOM (reports/02-p4, calendar/02-c2), not eyeballed.
+ *
  * 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.
@@ -93,7 +105,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
           surface === "card" &&
-            "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
+            "rounded-[14px] bg-card px-5 shadow-[var(--shadow-card)] sm:rounded-[16px]",
           className
         )}
         {...props}
@@ -106,7 +118,9 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
             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",
+              // No border: the frames (reports/02-p4, calendar/02-c2) draw the
+              // tile with the shadow alone.
+              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] shadow-sm sm:size-18 sm:rounded-[22px] [&_svg]:size-7",
               variant === "error" ? "bg-destructive/5" : "bg-card"
             )}
           >
@@ -114,7 +128,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
           </span>
         )}
 
-        <Text as="h3" weight="semibold" className="text-lg">
+        <Text as="h3" weight="semibold" className="text-base sm:text-lg">
           {title}
         </Text>
 
@@ -132,11 +146,13 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
                 variant={actionVariant ?? DEFAULT_ACTION_VARIANT[variant]}
                 className="glass-hover"
               >
+                {action.icon}
                 {action.label}
               </Button>
             )}
             {secondaryAction && (
               <Button onClick={secondaryAction.onClick} variant="outline" className="glass-hover">
+                {secondaryAction.icon}
                 {secondaryAction.label}
               </Button>
             )}

package/src/components/responsive-overlay.test.tsx

@@ -295,6 +295,51 @@ describe("ResponsiveOverlay", () => {
     });
   });
 
+  describe("initialFocusRef", () => {
+    function WithTarget(props: Partial<React.ComponentProps<typeof ResponsiveOverlay>> = {}) {
+      const targetRef = React.useRef<HTMLButtonElement>(null);
+      return (
+        <ResponsiveOverlay
+          open
+          onOpenChange={() => {}}
+          title="Add an item"
+          closeLabel="Close"
+          initialFocusRef={targetRef}
+          {...props}
+        >
+          <button ref={targetRef} type="button">
+            Confirm
+          </button>
+        </ResponsiveOverlay>
+      );
+    }
+
+    it("dialog: focuses the given element instead of the Close button", async () => {
+      setWidth(true);
+      render(<WithTarget />);
+      await waitFor(() => expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus());
+      expect(screen.getByRole("button", { name: "Close" })).not.toHaveFocus();
+    });
+
+    it("sheet: focuses the given element instead of the Close button", async () => {
+      setWidth(true);
+      render(<WithTarget desktop="sheet" />);
+      await waitFor(() => expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus());
+    });
+
+    it("drawer: focuses the given element instead of the Close button", async () => {
+      setWidth(false);
+      render(<WithTarget />);
+      await waitFor(() => expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus());
+    });
+
+    it("keeps today's default (first tabbable) when the prop is omitted", async () => {
+      setWidth(true);
+      open();
+      await waitFor(() => expect(screen.getByRole("button", { name: "Close" })).toHaveFocus());
+    });
+  });
+
   it("stays out of the DOM while closed", () => {
     render(
       <ResponsiveOverlay open={false} onOpenChange={() => {}} title="Add an item">

package/src/components/responsive-overlay.tsx

@@ -113,6 +113,17 @@ export type ResponsiveOverlayProps = {
   className?: string;
   /** Classes for the scrolling body. */
   bodyClassName?: string;
+  /**
+   * Focus this element on open instead of Radix's default — the first
+   * tabbable in DOM order, which in every mode here is the header's round
+   * Close button, since the header renders before the body. That is the
+   * right target for most overlays, but a confirm-style body (a primary
+   * action, a field that should be pre-filled) wants focus lower down.
+   * Passing a ref calls `event.preventDefault()` on Radix's
+   * `onOpenAutoFocus` and focuses this element instead; omitting the prop
+   * keeps today's default in every mode (dialog, sheet, drawer).
+   */
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
 };
 
 /**
@@ -159,6 +170,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       wideFrom = "md",
       className,
       bodyClassName,
+      initialFocusRef,
     },
     ref
   ) => {
@@ -166,6 +178,18 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
     useFocusReturn(open);
 
+    // Radix (and vaul, underneath the drawer) call this before moving focus
+    // themselves; preventing the default there is what stops the first-
+    // tabbable fallback from ever running.
+    const handleOpenAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (!initialFocusRef?.current) return;
+        event.preventDefault();
+        initialFocusRef.current.focus();
+      },
+      [initialFocusRef]
+    );
+
     // The name and the description are Radix's own: its `Title` and
     // `Description` register ids in the dialog context and `Content` points
     // `aria-labelledby` / `aria-describedby` at them. Passing our own ids
@@ -232,6 +256,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             attachment="inset"
             hideClose
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
+            onOpenAutoFocus={handleOpenAutoFocus}
             {...describedBy}
             data-slot="responsive-overlay-sheet"
             data-modal={modal ? "true" : "false"}
@@ -263,6 +288,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             size={size}
             showCloseButton={false}
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
+            onOpenAutoFocus={handleOpenAutoFocus}
             {...describedBy}
             className={cn(
               // The dialog's own `grid gap-4 p-6` would put air between the
@@ -284,6 +310,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
         <DrawerContent
           ref={ref}
           overlayClassName="bg-scrim-overlay"
+          onOpenAutoFocus={handleOpenAutoFocus}
           {...describedBy}
           className={cn("flex max-h-[85vh] flex-col p-0", className)}
         >