@bearmenu/ui 0.8.40 → 0.8.41

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/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/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/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';
@@ -70,7 +70,9 @@ 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-[20px] border border-border shadow-sm sm:size-18 sm:rounded-[22px] [&_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]

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.40",
+  "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/empty-state.test.tsx

@@ -47,6 +47,14 @@ 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();

package/src/components/empty-state.tsx

@@ -118,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-[20px] border border-border shadow-sm sm:size-18 sm:rounded-[22px] [&_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"
             )}
           >

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)}
         >