@bearmenu/ui 0.8.35 → 0.8.37

package/src/components/banner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Info, TriangleAlert } from "lucide-react";
+import { CircleAlert, Info, TriangleAlert } from "lucide-react";
 import { cn } from "../lib/utils";
 
 /**
@@ -21,6 +21,14 @@ import { cn } from "../lib/utils";
  * - `warning`: a 16% amber wash with the design's amber ink — darker than
  *   the solid `--warning`, which falls short of AA on its own wash at this
  *   size; dark mode uses the lifted token.
+ * - `destructive`: something did not load or did not happen — "The queue
+ *   didn't load", "Walk-ins didn't load" (today/04-d3, floor/02-s2,
+ *   reports/03-p9). A red wash with `--destructive-ink`, and the one tone
+ *   with a hairline: the booking frames draw it, because a failure has to
+ *   read as a boundary on a page already full of soft grounds.
+ *
+ * `action` takes the trailing control — the frames' "Retry". It sits on the
+ * right edge, centred on the text, and never wraps under it.
  */
 const bannerVariants = cva(
   "flex gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -30,6 +38,7 @@ const bannerVariants = cva(
         info: "bg-surface-2 text-ink-secondary",
         warning:
           "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning",
+        destructive: "border border-destructive/25 bg-destructive/10 text-destructive-ink",
       },
     },
     defaultVariants: { tone: "info" },
@@ -45,22 +54,37 @@ export type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
     icon?: React.ReactNode;
     /** The bold first line — "19:30 just went". */
     title?: React.ReactNode;
+    /**
+     * A trailing control — "Retry". Pass a real button (a `Button
+     * variant="link"` reads as the frames draw it); the banner only places it.
+     * A banner that announces a failure the user did not just cause is
+     * usually worth `role="status"` from the caller.
+     */
+    action?: React.ReactNode;
   };
 
 /** Each tone's own glyph, so a caller never has to remember which. */
 const TONE_ICON = {
   info: <Info aria-hidden />,
   warning: <TriangleAlert aria-hidden />,
+  destructive: <CircleAlert aria-hidden />,
 } as const;
 
-function Banner({ tone, icon, title, className, children, ...props }: BannerProps) {
+function Banner({ tone, icon, title, action, className, children, ...props }: BannerProps) {
   return (
     <div data-slot="banner" className={cn(bannerVariants({ tone }), className)} {...props}>
       {icon === undefined ? TONE_ICON[tone ?? "info"] : icon}
-      <div className="min-w-0">
+      <div className="min-w-0 flex-1">
         {title ? <b className="mb-[3px] block text-[13px] font-bold">{title}</b> : null}
-        <div className={cn(tone === "warning" && title ? "opacity-90" : undefined)}>{children}</div>
+        <div className={cn((tone === "warning" || tone === "destructive") && title ? "opacity-90" : undefined)}>
+          {children}
+        </div>
       </div>
+      {action ? (
+        <div data-slot="banner-action" className="shrink-0 self-center">
+          {action}
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/components/calendar.tsx

@@ -238,7 +238,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square h-(--cell-size) w-(--cell-size) size-auto min-w-0 flex-col items-center justify-center gap-1 rounded-md p-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground flex aspect-square h-(--cell-size) w-(--cell-size) size-auto min-w-0 flex-col items-center justify-center gap-1 rounded-md p-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

package/src/components/combobox.tsx

@@ -124,7 +124,7 @@ function Combobox({
             e.stopPropagation();
             onValueChange(undefined);
           }}
-          className="absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+          className="absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
         >
           <X className="size-3.5" />
         </button>

package/src/components/command.test.tsx

@@ -88,4 +88,14 @@ describe("Command", () => {
     await user.keyboard("{ArrowDown}{Enter}");
     expect(onSelect).toHaveBeenCalledWith("banana");
   });
+
+  it("highlights the selected row with the subtle well, not the accent fill", () => {
+    render(<CommandSample />);
+    const row = screen.getByRole("option", { name: "Apple" });
+    expect(row).toHaveClass(
+      "data-[selected=true]:bg-accent-subtle",
+      "data-[selected=true]:text-foreground"
+    );
+    expect(row).not.toHaveClass("data-[selected=true]:bg-accent");
+  });
 });

package/src/components/command.tsx

@@ -138,7 +138,7 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors",
-      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+      "data-[selected=true]:bg-accent-subtle data-[selected=true]:text-foreground",
       "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     )}

package/src/components/dialog.tsx

@@ -79,7 +79,7 @@ const DialogContent = React.forwardRef<
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close className="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent">
+          <DialogPrimitive.Close className="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground opacity-70 transition-opacity hover:bg-accent-subtle hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none">
             <X className="size-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>

package/src/components/dropdown-menu.test.tsx

@@ -177,4 +177,35 @@ describe("DropdownMenu", () => {
     expect(screen.getByText("Group")).toBeInTheDocument();
     expect(document.querySelector("[data-slot=dropdown-menu-separator]")).not.toBeNull();
   });
+
+  // A highlighted row is a tinted well with ink type; terracotta is kept for
+  // the checked indicators. A solid-accent row read as a second primary.
+  it("highlights rows with the subtle well and marks checked items in the accent", async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>One</DropdownMenuItem>
+          <DropdownMenuCheckboxItem checked>Two</DropdownMenuCheckboxItem>
+          <DropdownMenuRadioGroup value="a">
+            <DropdownMenuRadioItem value="a">Three</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+    await user.click(screen.getByText("Open"));
+    const rows = [
+      screen.getByRole("menuitem", { name: "One" }),
+      screen.getByRole("menuitemcheckbox", { name: "Two" }),
+      screen.getByRole("menuitemradio", { name: "Three" }),
+    ];
+    for (const row of rows) {
+      expect(row).toHaveClass("focus:bg-accent-subtle", "focus:text-foreground");
+      expect(row).not.toHaveClass("focus:bg-accent");
+      expect(row).not.toHaveClass("focus:text-accent-foreground");
+    }
+    expect(rows[1]?.querySelector("svg")).toHaveClass("text-accent");
+    expect(rows[2]?.querySelector("svg")).toHaveClass("text-accent");
+  });
 });

package/src/components/dropdown-menu.tsx

@@ -67,7 +67,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent-subtle focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -89,7 +89,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent-subtle focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -111,7 +111,7 @@ function DropdownMenuCheckboxItem({
           </span>
         ) : (
           <DropdownMenuPrimitive.ItemIndicator>
-            <CheckIcon className="size-4" />
+            <CheckIcon className="size-4 text-accent" />
           </DropdownMenuPrimitive.ItemIndicator>
         )}
       </span>
@@ -135,14 +135,14 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent-subtle focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
+          <CircleIcon className="size-2 fill-current text-accent" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -207,7 +207,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "focus:bg-accent-subtle focus:text-foreground data-[state=open]:bg-accent-subtle data-[state=open]:text-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
         className
       )}
       {...props}

package/src/components/input-group.tsx

@@ -92,7 +92,7 @@ const InputGroupButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAtt
       type={type}
       data-slot="input-group-button"
       className={cn(
-        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
+        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
         className
       )}
       {...props}

package/src/components/multi-select-combobox.tsx

@@ -93,7 +93,13 @@ export function MultiSelectCombobox({
           align="start"
         >
           <Command shouldFilter={shouldFilter}>
-            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            {/* Spread rather than `onValueChange={onSearchChange}`: under a
+                consumer's `exactOptionalPropertyTypes`, passing a possibly
+                `undefined` value to cmdk's optional prop does not typecheck. */}
+            <CommandInput
+              placeholder={searchPlaceholder}
+              {...(onSearchChange ? { onValueChange: onSearchChange } : {})}
+            />
             <CommandList>
               <CommandEmpty>{loading ? "Loading…" : emptyText}</CommandEmpty>
               <CommandGroup>

package/src/components/multi-select-menu.tsx

@@ -81,7 +81,7 @@ export function MultiSelectMenu({
                     onCheckedChange={() => handleToggle(option.value)}
                     className={cn(
                       "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none",
-                      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+                      "data-[highlighted]:bg-accent-subtle data-[highlighted]:text-foreground",
                       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
                     )}
                   >

package/src/components/pan-zoom-viewport.stories.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { PanZoomViewport, type PanZoomViewportHandle } from "./pan-zoom-viewport";
+
+const labels = {
+  viewport: "Floor plan, Inside",
+  instructions: "Arrow keys move the plan. Plus and minus zoom; 0 fits it.",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  controls: "Zoom",
+  zoomLevel: (percent: number) => `${percent}%`,
+};
+
+/** A stand-in plan, painted with tokens only: the real canvas is the app's. */
+const TABLES = [
+  { id: "T1", x: 120, y: 240, w: 90, h: 90, round: true },
+  { id: "T2", x: 270, y: 240, w: 90, h: 90, round: true },
+  { id: "T3", x: 420, y: 240, w: 90, h: 90, round: false },
+  { id: "T4", x: 120, y: 420, w: 120, h: 120, round: false },
+  { id: "T5", x: 300, y: 420, w: 220, h: 90, round: false },
+  { id: "T6", x: 300, y: 600, w: 180, h: 90, round: false },
+  { id: "T7", x: 900, y: 220, w: 180, h: 120, round: false },
+  { id: "T8", x: 700, y: 240, w: 120, h: 120, round: false },
+  { id: "T9", x: 700, y: 420, w: 120, h: 120, round: false },
+  { id: "T12", x: 900, y: 600, w: 180, h: 90, round: false },
+];
+
+function DemoPlan({ onPick }: { onPick?: (id: string) => void }) {
+  return (
+    <div className="relative size-full rounded-sm border border-border bg-[length:24px_24px] bg-[linear-gradient(to_right,var(--line-soft)_1px,transparent_1px),linear-gradient(to_bottom,var(--line-soft)_1px,transparent_1px)]">
+      <div className="absolute left-16 top-16 grid h-20 w-96 place-items-center border border-border text-xs text-muted-foreground">
+        Bar counter
+      </div>
+      {TABLES.map((table) => (
+        <button
+          key={table.id}
+          type="button"
+          onClick={() => onPick?.(table.id)}
+          aria-label={`Table ${table.id}`}
+          className={
+            "absolute grid place-items-center border border-border bg-card text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+            (table.round ? "rounded-full" : "rounded-md")
+          }
+          style={{ left: table.x, top: table.y, width: table.w, height: table.h }}
+        >
+          {table.id}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof PanZoomViewport> = {
+  title: "Booking/PanZoomViewport",
+  component: PanZoomViewport,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A window onto a plan that pans and zooms: drag, pinch, trackpad pinch or ctrl-wheel, arrows / + / − / 0 on the focused viewport, and the + / − / Fit controls. Fit never goes below `minScale`; past the floor the plan anchors top-left and the edges it runs past are shaded. Every string is injected through `labels`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PanZoomViewport>;
+
+/** floor/07-f0 desktop: the plan fits the viewport. Tap a table: the click still lands. */
+export const Desktop: Story = {
+  render: () => {
+    const [picked, setPicked] = React.useState<string | null>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <PanZoomViewport
+          contentWidth={1200}
+          contentHeight={800}
+          labels={labels}
+          className="h-[560px] w-[900px] rounded-xl border border-border bg-background"
+        >
+          <DemoPlan onPick={setPicked} />
+        </PanZoomViewport>
+        <p className="text-sm text-muted-foreground">Picked: {picked ?? "none"}</p>
+      </div>
+    );
+  },
+};
+
+/** floor/07-f0 phone: the fit would be unreadable, so it stops at the floor and pans. */
+export const PhoneAtTheFloor: Story = {
+  render: () => (
+    <PanZoomViewport
+      contentWidth={1200}
+      contentHeight={800}
+      minScale={0.55}
+      labels={labels}
+      className="h-[480px] w-[390px] border-y border-border bg-background"
+    >
+      <DemoPlan />
+    </PanZoomViewport>
+  ),
+};
+
+/** Driving it from outside: a "Show T12" link, a reset. */
+export const Imperative: Story = {
+  render: () => {
+    const api = React.useRef<PanZoomViewportHandle>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => api.current?.centerOn(990, 645)}>
+            Show T12
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => api.current?.fit()}>
+            Reset
+          </Button>
+        </div>
+        <PanZoomViewport
+          apiRef={api}
+          contentWidth={1200}
+          contentHeight={800}
+          minScale={0.8}
+          labels={labels}
+          className="h-[420px] w-[640px] rounded-xl border border-border bg-background"
+        >
+          <DemoPlan />
+        </PanZoomViewport>
+      </div>
+    );
+  },
+};