@bearmenu/ui 0.8.41 → 0.8.43

package/src/components/responsive-overlay.tsx

@@ -32,8 +32,12 @@ const CONTAINER_DESCRIPTION = {
  * The opener is tracked while the overlay is CLOSED rather than captured when
  * it opens: by the time an effect could run on the opening render, the dialog
  * has already mounted and pulled focus into itself.
+ *
+ * `returnFocus={false}` disables the `requestAnimationFrame` refocus below,
+ * but tracking keeps running regardless — cheap, and it means flipping the
+ * prop back on mid-lifecycle has an opener ready immediately.
  */
-function useFocusReturn(open: boolean) {
+function useFocusReturn(open: boolean, returnFocus: boolean) {
   const openerRef = React.useRef<HTMLElement | null>(null);
   const wasOpen = React.useRef(false);
 
@@ -48,7 +52,7 @@ function useFocusReturn(open: boolean) {
       const opener = openerRef.current;
       // The overlay is still unmounting on this tick, and it takes focus with
       // it; restoring on the next frame lands after that.
-      if (opener && opener.isConnected) {
+      if (returnFocus && opener && opener.isConnected) {
         requestAnimationFrame(() => opener.focus());
       }
     }
@@ -62,7 +66,7 @@ function useFocusReturn(open: boolean) {
     }
     document.addEventListener("focusin", track);
     return () => document.removeEventListener("focusin", track);
-  }, [open]);
+  }, [open, returnFocus]);
 }
 
 export type ResponsiveOverlayProps = {
@@ -124,6 +128,29 @@ export type ResponsiveOverlayProps = {
    * keeps today's default in every mode (dialog, sheet, drawer).
    */
   initialFocusRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * Whether closing the overlay returns focus to whatever had it before the
+   * overlay opened. Two things do that today: Radix's `onCloseAutoFocus` —
+   * the FocusScope's own auto-focus-on-unmount, refocusing the element that
+   * was active before the overlay trapped focus — and this component's own
+   * `useFocusReturn`, which refocuses that same element a frame later so it
+   * survives the overlay's own unmount. `true` (the default) keeps today's
+   * behaviour in every mode (dialog, sheet, drawer): the opener gets focus
+   * back.
+   *
+   * Pass `false` when closing hands focus to another surface that takes it
+   * itself — a pick-mode bar docking over the header, say. Both paths are
+   * disabled and focus stays wherever the consumer puts it (typically inside
+   * the same `onOpenChange(false)` handler that closes the overlay).
+   */
+  returnFocus?: boolean;
+  /**
+   * A fixed height for the phone drawer instead of sizing to its content —
+   * `DrawerContent`'s `snapHeight` (the frames' ~640px table sheet). Applies
+   * only when the narrow drawer is showing; the desktop dialog/sheet are
+   * unaffected. Omit to keep today's content-sized drawer.
+   */
+  drawerHeight?: number | string;
 };
 
 /**
@@ -171,12 +198,14 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       className,
       bodyClassName,
       initialFocusRef,
+      returnFocus = true,
+      drawerHeight,
     },
     ref
   ) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
-    useFocusReturn(open);
+    useFocusReturn(open, returnFocus);
 
     // Radix (and vaul, underneath the drawer) call this before moving focus
     // themselves; preventing the default there is what stops the first-
@@ -190,6 +219,19 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       [initialFocusRef]
     );
 
+    // Radix's FocusScope calls this on unmount before it runs its own default
+    // action — refocusing whatever was active before the scope trapped focus,
+    // i.e. the opener. Vaul forwards it straight through to the same Radix
+    // primitive underneath the drawer, so one handler covers all three modes.
+    // Leaving it a no-op when `returnFocus` is true reproduces today's
+    // behaviour exactly: the prop was never passed before this change.
+    const handleCloseAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (!returnFocus) event.preventDefault();
+      },
+      [returnFocus]
+    );
+
     // 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
@@ -201,10 +243,19 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
 
+    // The phone drawer draws a tighter gutter and a smaller title than the
+    // desktop dialog/sheet — measured off the booking frames' table sheet
+    // (floor/14-w1): 16px, not 20; 22px, not 19. Scoped to `drawer` only, so
+    // the desktop containers (already frames-checked elsewhere) don't move.
+    const isDrawer = container === "drawer";
+
     const header = (
-      <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
+      <div
+        data-slot="responsive-overlay-header"
+        className={cn("flex items-start gap-3", isDrawer ? "px-4 pt-4" : "px-5 pt-5")}
+      >
         <div className="min-w-0 flex-1">
-          <Title className="text-[19px] font-bold leading-tight">
+          <Title className={cn("font-bold leading-tight", isDrawer ? "text-[22px]" : "text-[19px]")}>
             {title}
           </Title>
           {subtitle ? (
@@ -232,7 +283,11 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     const body = (
       <div
         data-slot="responsive-overlay-body"
-        className={cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName)}
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto py-4",
+          isDrawer ? "px-4" : "px-5",
+          bodyClassName
+        )}
       >
         {children}
       </div>
@@ -257,6 +312,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             hideClose
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
             onOpenAutoFocus={handleOpenAutoFocus}
+            onCloseAutoFocus={handleCloseAutoFocus}
             {...describedBy}
             data-slot="responsive-overlay-sheet"
             data-modal={modal ? "true" : "false"}
@@ -289,6 +345,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             showCloseButton={false}
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
             onOpenAutoFocus={handleOpenAutoFocus}
+            onCloseAutoFocus={handleCloseAutoFocus}
             {...describedBy}
             className={cn(
               // The dialog's own `grid gap-4 p-6` would put air between the
@@ -311,6 +368,8 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
           ref={ref}
           overlayClassName="bg-scrim-overlay"
           onOpenAutoFocus={handleOpenAutoFocus}
+          onCloseAutoFocus={handleCloseAutoFocus}
+          {...(drawerHeight !== undefined ? { snapHeight: drawerHeight } : {})}
           {...describedBy}
           className={cn("flex max-h-[85vh] flex-col p-0", className)}
         >

package/src/components/toggle-group.stories.tsx

@@ -95,6 +95,23 @@ export const Segmented: Story = {
   ),
 };
 
+/**
+ * Text-label cells — the calendar toolbar's Timeline/List, the reservation
+ * sheet's booked-by source, the rules confirmation mode. Each cell is a full
+ * 44px hit target (the accessibility floor); the raised card it draws stays
+ * the frames' 36px, centred inside.
+ */
+export const SegmentedLabels: Story = {
+  render: () => (
+    <div className="w-[220px]">
+      <ToggleGroup type="single" variant="segmented" defaultValue="list" aria-label="View">
+        <ToggleGroupItem value="timeline">Timeline</ToggleGroupItem>
+        <ToggleGroupItem value="list">List</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};
+
 /** Choice chips that wrap: the booking flow's seating preference (B2). */
 export const Chips: Story = {
   render: () => (

package/src/components/toggle-group.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+describe("ToggleGroup segmented variant", () => {
+  it("gives each cell a 44px hit target with a smaller pill drawn inside it", () => {
+    render(
+      <ToggleGroup type="single" variant="segmented" value="timeline" aria-label="View">
+        <ToggleGroupItem value="timeline">Timeline</ToggleGroupItem>
+        <ToggleGroupItem value="list">List</ToggleGroupItem>
+      </ToggleGroup>
+    );
+    const timeline = screen.getByRole("radio", { name: "Timeline" });
+    expect(timeline).toHaveClass("h-11");
+    const pill = timeline.querySelector('[class*="group-data-[state=on]/segment:bg-card"]');
+    expect(pill).not.toBeNull();
+    expect(pill).toHaveClass("h-9", "w-full");
+    expect(pill).toContainElement(screen.getByText("Timeline"));
+  });
+
+  it("keeps the group's own capsule padding-free — the cell fills its full height", () => {
+    render(
+      <ToggleGroup type="single" variant="segmented" value="light" aria-label="Theme">
+        <ToggleGroupItem value="light">Light</ToggleGroupItem>
+        <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
+      </ToggleGroup>
+    );
+    const group = document.querySelector('[data-slot="toggle-group"]');
+    expect(group).not.toHaveClass("data-[variant=segmented]:p-0.5");
+    expect(group).toHaveClass("data-[variant=segmented]:gap-0.5");
+  });
+
+  it("toggling selection moves the on-state to the newly active cell only", async () => {
+    const user = userEvent.setup();
+    function Harness() {
+      return (
+        <ToggleGroup type="single" defaultValue="timeline" variant="segmented" aria-label="View">
+          <ToggleGroupItem value="timeline">Timeline</ToggleGroupItem>
+          <ToggleGroupItem value="list">List</ToggleGroupItem>
+        </ToggleGroup>
+      );
+    }
+    render(<Harness />);
+    const timeline = screen.getByRole("radio", { name: "Timeline" });
+    const list = screen.getByRole("radio", { name: "List" });
+    expect(timeline).toHaveAttribute("data-state", "on");
+    expect(list).toHaveAttribute("data-state", "off");
+    await user.click(list);
+    expect(list).toHaveAttribute("data-state", "on");
+    expect(timeline).toHaveAttribute("data-state", "off");
+  });
+
+  it("does not wrap a non-segmented cell's children in a pill", () => {
+    render(
+      <ToggleGroup type="single" variant="chip" value="a" aria-label="Choice">
+        <ToggleGroupItem value="a">No preference</ToggleGroupItem>
+      </ToggleGroup>
+    );
+    const item = screen.getByRole("radio", { name: "No preference" });
+    expect(item.querySelector('[class*="group-data-[state=on]/segment"]')).toBeNull();
+    expect(item.firstChild?.textContent).toBe("No preference");
+  });
+});

package/src/components/toggle-group.tsx

@@ -5,7 +5,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
-import { toggleVariants } from "./toggle";
+import { SegmentedToggleContent, toggleVariants } from "./toggle";
 
 const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
   size: "default",
@@ -27,8 +27,12 @@ function ToggleGroup({
       className={cn(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
         // The segmented control's capsule: muted ground, the on cell a raised
-        // card inside it (see `toggleVariants.segmented`). 44px tall.
-        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
+        // card inside it (see `toggleVariants.segmented`). No padding here —
+        // each cell is the full 44px capsule height (the hit target), and
+        // draws its own smaller 36px card centred inside
+        // (`SegmentedToggleContent`), so the capsule stays the 44px the
+        // booking frames draw it at.
+        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted",
         // Chips wrap onto as many rows as they need, 7px apart.
         "data-[variant=chip]:flex-wrap data-[variant=chip]:gap-[7px] data-[variant=chip]:rounded-none",
         // The tab bar spans its container: a muted capsule, 4px inset.
@@ -66,7 +70,7 @@ function ToggleGroupItem({
         }),
         "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         resolved === "segmented"
-          ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]"
+          ? "rounded-full"
           : // Tabs and chips size themselves (`toggleVariants`' compounds);
             // the item's own rounding must not square them off.
             resolved === "tab"
@@ -79,7 +83,11 @@ function ToggleGroupItem({
       )}
       {...props}
     >
-      {children}
+      {resolved === "segmented" ? (
+        <SegmentedToggleContent>{children}</SegmentedToggleContent>
+      ) : (
+        children
+      )}
     </ToggleGroupPrimitive.Item>
   );
 }

package/src/components/toggle.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
 
-import { toggleVariants } from "./toggle";
+import { Toggle, toggleVariants } from "./toggle";
 
 describe("toggleVariants", () => {
   // White on a half-strength terracotta measured 2.2:1. Hover steps the
@@ -16,4 +17,52 @@ describe("toggleVariants", () => {
       expect(classes).toContain("data-[state=on]:text-accent-foreground");
     }
   });
+
+  // The 44px floor: the cell's own box is the hit target, not just the card
+  // it draws. `size` must never shrink it back below 44 — that is exactly the
+  // merge order chip/tab already guard against. `toggleVariants` alone is
+  // pre-merge (real callers run it through `cn`/twMerge), so render it.
+  it("holds the segmented cell at the 44px hit-target floor for every size", () => {
+    for (const size of ["sm", "default", "lg"] as const) {
+      render(
+        <Toggle variant="segmented" size={size} aria-label={`toggle-${size}`}>
+          X
+        </Toggle>
+      );
+      expect(screen.getByRole("button", { name: `toggle-${size}` })).toHaveClass("h-11");
+    }
+  });
+
+  // The cell itself no longer paints the card or the shadow — that moved to
+  // `SegmentedToggleContent`'s inner pill, so the outer 44px box stays
+  // invisible and only the pill it wraps is 36px and shows the "on" state.
+  it("leaves the segmented cell unpainted; the base accent fill is neutralised", () => {
+    const classes = toggleVariants({ variant: "segmented" });
+    expect(classes).not.toContain("data-[state=on]:bg-card");
+    expect(classes).not.toContain("shadow-[var(--shadow-card)]");
+    expect(classes).toContain("data-[state=on]:bg-transparent");
+  });
+});
+
+describe("Toggle", () => {
+  it("wraps a segmented toggle's content in the 36px pill", () => {
+    render(
+      <Toggle variant="segmented" aria-label="Light">
+        Light
+      </Toggle>
+    );
+    const button = screen.getByRole("button", { name: "Light" });
+    expect(button).toHaveClass("h-11", "group/segment");
+    const pill = button.querySelector('[class*="group-data-[state=on]/segment:bg-card"]');
+    expect(pill).not.toBeNull();
+    expect(pill).toHaveClass("h-9");
+    expect(pill).toContainElement(screen.getByText("Light"));
+  });
+
+  it("renders other variants' children directly, with no inner pill", () => {
+    render(<Toggle aria-label="Bold">B</Toggle>);
+    const button = screen.getByRole("button", { name: "Bold" });
+    expect(button.querySelector('[class*="group-data-[state=on]/segment"]')).toBeNull();
+    expect(button.firstChild?.textContent).toBe("B");
+  });
 });

package/src/components/toggle.tsx

@@ -22,12 +22,18 @@ const toggleVariants = cva(
           "border border-border bg-transparent hover:bg-accent-subtle hover:text-foreground data-[state=on]:border-primary",
         /**
          * One cell of a segmented control: a raised card on the group's
-         * muted capsule when on, quiet type when off. The group
+         * muted capsule when on, quiet type when off. This class owns only
+         * the cell's layout and text colour — the button itself is the full
+         * 44px hit target the accessibility floor asks for. The raised card
+         * it draws is smaller (36px, measured off the booking frames'
+         * calendar toolbar and the closures scope control), so
+         * `SegmentedToggleContent` below carries the paint in an inner span,
+         * the same split `MenuPickRow` uses for its add disc. The group
          * (`ToggleGroup variant="segmented"`) supplies the capsule; the cell
          * never fills with the accent, which would read as a primary button.
          */
         segmented:
-          "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]",
+          "group/segment relative rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground",
         /**
          * A choice among a few named options that sit in a wrapping row —
          * the booking flow's seating preference ("No preference", "Terrace",
@@ -58,6 +64,10 @@ const toggleVariants = cva(
     compoundVariants: [
       { variant: "chip", class: "h-auto min-w-0 px-[13px]" },
       { variant: "tab", class: "h-auto min-w-0 px-3" },
+      // The segmented cell's hit target is fixed at the 44px floor
+      // regardless of `size` — restated here for the same reason as chip and
+      // tab above, so the size variants' `h-*` never wins the merge.
+      { variant: "segmented", class: "h-11 px-0" },
     ],
     defaultVariants: {
       variant: "default",
@@ -66,10 +76,25 @@ const toggleVariants = cva(
   }
 );
 
+/**
+ * The segmented variant's drawn pill — 36px tall, centred in the cell's 44px
+ * hit box. Painted here, on `group-data-[state=on]/segment:`, so the outer
+ * button (`toggleVariants({variant: "segmented"})`) can stay unpainted and
+ * full height. Shared by `Toggle` and `ToggleGroupItem`.
+ */
+function SegmentedToggleContent({ children }: { children?: React.ReactNode }) {
+  return (
+    <span className="flex h-9 w-full items-center justify-center gap-2 rounded-full text-inherit transition-[background-color,box-shadow] group-data-[state=on]/segment:bg-card group-data-[state=on]/segment:shadow-[var(--shadow-card)]">
+      {children}
+    </span>
+  );
+}
+
 function Toggle({
   className,
   variant,
   size,
+  children,
   ...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
   return (
@@ -77,8 +102,14 @@ function Toggle({
       data-slot="toggle"
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
-    />
+    >
+      {variant === "segmented" ? (
+        <SegmentedToggleContent>{children}</SegmentedToggleContent>
+      ) : (
+        children
+      )}
+    </TogglePrimitive.Root>
   );
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, SegmentedToggleContent };

package/src/globals.css

@@ -364,7 +364,13 @@ h6 {
   --floor-error: oklch(0.56 0.2 27);
   --floor-error-foreground: oklch(0.99 0 0);
   --floor-offer: var(--primary);
-  --floor-selected: oklch(0.25 0.05 35);
+  /* L raised from 0.25 (== --primary, the offer ring's colour) to 0.35: the
+     dark hairline read as a heavy black frame around a selected table. Same
+     chroma/hue, so it stays legibly the same family, just lighter — still
+     11.2:1 on --floor-room and 11.5:1 on --card (floor 3:1), and a clear
+     lightness step (ΔL 0.10) from --floor-offer/--primary at this hue so the
+     two rings stay distinct. */
+  --floor-selected: oklch(0.35 0.05 35);
   --floor-room: oklch(0.99 0.005 75);
   --floor-wall: oklch(0.33 0.02 45);
   --floor-fixture: oklch(0.62 0.018 50);