@bearmenu/ui 0.8.37 → 0.8.39

package/src/components/drawer.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./drawer";
+
+function Harness(props: { modal?: boolean; autoFocus?: boolean }) {
+  return (
+    <>
+      <button type="button">Behind</button>
+      <Drawer open onOpenChange={() => {}} {...props}>
+        <DrawerContent>
+          <DrawerTitle>Pick a range</DrawerTitle>
+          <DrawerDescription>Reports</DrawerDescription>
+          <button type="button">Inside</button>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+describe("Drawer", () => {
+  it("moves focus into the sheet on open", async () => {
+    render(<Harness />);
+    const dialog = screen.getByRole("dialog");
+    await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+  });
+
+  it("keeps Tab inside a modal sheet", async () => {
+    render(<Harness />);
+    const dialog = screen.getByRole("dialog");
+    await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+    for (let i = 0; i < 4; i += 1) {
+      await userEvent.tab();
+      expect(dialog.contains(document.activeElement)).toBe(true);
+    }
+  });
+
+  it("marks a modal sheet aria-modal", () => {
+    render(<Harness />);
+    expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+  });
+
+  it("does not claim aria-modal when the sheet is not modal", () => {
+    render(<Harness modal={false} />);
+    expect(screen.getByRole("dialog")).not.toHaveAttribute("aria-modal");
+  });
+
+  it("leaves focus where it was with autoFocus={false}", async () => {
+    render(<Harness autoFocus={false} />);
+    const dialog = screen.getByRole("dialog");
+    // Give an open auto-focus the frame it would have taken.
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    expect(dialog.contains(document.activeElement)).toBe(false);
+  });
+});

package/src/components/drawer.tsx

@@ -6,21 +6,40 @@ import { cn } from "../lib/utils";
 
 type DrawerDirection = "top" | "bottom" | "left" | "right";
 
-const DrawerDirectionContext = React.createContext<DrawerDirection>("bottom");
+type DrawerContextValue = { direction: DrawerDirection; modal: boolean };
 
+const DrawerContext = React.createContext<DrawerContextValue>({
+  direction: "bottom",
+  modal: true,
+});
+
+/**
+ * `autoFocus` defaults to `true` here, where vaul defaults it to `false`.
+ * vaul's default cancels Radix's open auto-focus, so focus never enters the
+ * sheet, Radix's FocusScope never engages, and Tab walks the page behind a
+ * modal drawer. A caller that must not move focus on open passes
+ * `autoFocus={false}`.
+ */
 const Drawer = ({
   shouldScaleBackground = false,
   direction = "bottom",
+  modal = true,
+  autoFocus = true,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerDirectionContext.Provider value={direction}>
-    <DrawerPrimitive.Root
-      shouldScaleBackground={shouldScaleBackground}
-      direction={direction}
-      {...props}
-    />
-  </DrawerDirectionContext.Provider>
-);
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
+  const context = React.useMemo(() => ({ direction, modal }), [direction, modal]);
+  return (
+    <DrawerContext.Provider value={context}>
+      <DrawerPrimitive.Root
+        shouldScaleBackground={shouldScaleBackground}
+        direction={direction}
+        modal={modal}
+        autoFocus={autoFocus}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  );
+};
 Drawer.displayName = "Drawer";
 
 const DrawerTrigger = DrawerPrimitive.Trigger;
@@ -55,7 +74,7 @@ const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
 >(({ className, variant = "flush", showHandle, overlayClassName, children, ...props }, ref) => {
-  const direction = React.useContext(DrawerDirectionContext);
+  const { direction, modal } = React.useContext(DrawerContext);
   const isVertical = direction === "top" || direction === "bottom";
   const handleEnabled = showHandle ?? (direction === "bottom");
 
@@ -74,6 +93,9 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitive.Content
         ref={ref}
         data-slot="drawer-content"
+        // Radix hides the page from assistive tech but never says so on the
+        // dialog itself; `aria-modal` is what tells a screen reader to stay in.
+        aria-modal={modal ? true : undefined}
         className={cn(
           "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
           positionClasses,

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

@@ -49,6 +49,20 @@ export const Error: Story = {
   ),
 };
 
+/** The booking pages' whole-body failure (reports/02-p4, calendar/02-c2). */
+export const ErrorCard: Story = {
+  render: () => (
+    <div className="bg-background p-4">
+      <ErrorEmptyState
+        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: () => {} }}
+      />
+    </div>
+  ),
+};
+
 export const Small: Story = {
   args: {
     title: "No data",

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

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EmptyState, ErrorEmptyState, SearchEmptyState } from "./empty-state";
+
+const retry = { label: "Try again", onClick: () => {} };
+
+describe("EmptyState", () => {
+  it("draws a retry on an error as an outline button", () => {
+    render(<ErrorEmptyState title="Couldn't load this report" description="On our side." action={retry} />);
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+  });
+
+  it("draws a clear-filters on a search as an outline button", () => {
+    render(<SearchEmptyState title="No results" description="Try another name." action={retry} />);
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+  });
+
+  it("keeps the plain empty state's create action filled", () => {
+    render(<EmptyState title="No items yet" description="Add the first one." action={{ label: "Add item", onClick: () => {} }} />);
+    expect(screen.getByRole("button", { name: "Add item" })).toHaveClass("bg-primary");
+  });
+
+  it("lets the caller choose the action style", () => {
+    render(<EmptyState title="Nothing" description="Here." action={retry} actionVariant="outline" />);
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+  });
+
+  it("calls the action", async () => {
+    const onClick = vi.fn();
+    render(<ErrorEmptyState title="Failed" description="Retry." action={{ label: "Try again", onClick }} />);
+    await userEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("does not paint an error's title and body red", () => {
+    render(<ErrorEmptyState title="Failed" description="On our side." />);
+    expect(screen.getByRole("heading", { name: "Failed" }).className).not.toMatch(/destructive/);
+    expect(screen.getByText("On our side.").className).not.toMatch(/destructive/);
+  });
+
+  it("sets the icon in a tile, whatever the icon", () => {
+    render(<EmptyState title="Empty" description="" icon={<svg data-testid="glyph" className="h-10 w-10" />} />);
+    const tile = document.querySelector('[data-slot="empty-state-icon"]');
+    expect(tile).toContainElement(screen.getByTestId("glyph"));
+    expect(tile).toHaveClass("size-16", "sm:size-18", "[&_svg]:size-7");
+  });
+
+  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", () => {
+    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");
+  });
+});

package/src/components/empty-state.tsx

@@ -11,6 +11,8 @@ type EmptyStateAction = {
   onClick: () => void;
 };
 
+type EmptyStateVariant = "default" | "search" | "error";
+
 interface EmptyStateProps {
   title: string;
   description: string;
@@ -18,8 +20,21 @@ interface EmptyStateProps {
   illustration?: React.ReactNode;
   action?: EmptyStateAction;
   secondaryAction?: EmptyStateAction;
-  variant?: "default" | "search" | "error";
+  /**
+   * The primary action's style. Defaults by variant: `outline` for `error`
+   * (try again) and `search` (clear filters) — a recovery step, not the page's
+   * main call to action — and a filled `default` for the plain empty state,
+   * where the action is usually "create the first one".
+   */
+  actionVariant?: "default" | "outline";
+  variant?: EmptyStateVariant;
   size?: "sm" | "md" | "lg";
+  /**
+   * `card` draws the booking pages' whole-body state card (reports/02-p4,
+   * calendar/02-c2): a 16px-radius card surface with the resting card shadow.
+   * `none` (the default) leaves the surface to the container it sits in.
+   */
+  surface?: "none" | "card";
   className?: string;
 }
 
@@ -29,6 +44,29 @@ const sizeStyles = {
   lg: "py-16 px-8",
 } as const;
 
+const DEFAULT_ACTION_VARIANT: Record<EmptyStateVariant, "default" | "outline"> = {
+  default: "default",
+  search: "outline",
+  error: "outline",
+};
+
+const DEFAULT_ICON: Record<EmptyStateVariant, React.ReactNode> = {
+  default: <FileX className="text-muted-foreground" aria-hidden />,
+  search: <Search className="text-muted-foreground" aria-hidden />,
+  error: <AlertCircle className="text-destructive" aria-hidden />,
+};
+
+/**
+ * EmptyState — an icon tile, a title, one line of body and an optional action,
+ * spaced as the booking frames draw them (reports/02-p4, calendar/02-c2): a
+ * 64px tile (72px from `sm`) with a 28px glyph, 16px to the title, 12px from
+ * title to body, 16px from body to the action. The action is full-width on a
+ * phone and hugs its label from `sm`.
+ *
+ * The error variant says "error" with its glyph and its tile's wash, not by
+ * painting the title and body red: red body copy is both harder to read and
+ * louder than a load failure the user can retry.
+ */
 const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
   (
     {
@@ -38,26 +76,15 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
       illustration,
       action,
       secondaryAction,
+      actionVariant,
       variant = "default",
       size = "md",
+      surface = "none",
       className,
       ...props
     },
     ref
   ) => {
-    const getDefaultIcon = () => {
-      switch (variant) {
-        case "search":
-          return <Search className="h-12 w-12 text-muted-foreground/50" />;
-        case "error":
-          return <AlertCircle className="h-12 w-12 text-destructive/50" />;
-        default:
-          return <FileX className="h-12 w-12 text-muted-foreground/50" />;
-      }
-    };
-
-    const textColor = variant === "error" ? "destructive" : "muted";
-
     return (
       <div
         ref={ref}
@@ -65,6 +92,8 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
         className={cn(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
+          surface === "card" &&
+            "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
           className
         )}
         {...props}
@@ -72,21 +101,37 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
         {illustration ? (
           <div className="mb-6">{illustration}</div>
         ) : (
-          <div className="mb-4">{icon || getDefaultIcon()}</div>
+          <span
+            data-slot="empty-state-icon"
+            className={cn(
+              // The glyph size is the tile's, whatever size the caller's icon
+              // node asked for — a 40px icon in a 64px tile has no margin.
+              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-2xl border border-border shadow-sm sm:size-18 [&_svg]:size-7",
+              variant === "error" ? "bg-destructive/5" : "bg-card"
+            )}
+          >
+            {icon ?? DEFAULT_ICON[variant]}
+          </span>
         )}
 
-        <Text as="h3" weight="semibold" color={textColor} className="text-lg mb-2">
+        <Text as="h3" weight="semibold" className="text-lg">
           {title}
         </Text>
 
-        <Text as="p" color={textColor} className="text-sm max-w-md mb-6">
-          {description}
-        </Text>
+        {description ? (
+          <Text as="p" color="muted" className="mt-3 max-w-md text-sm">
+            {description}
+          </Text>
+        ) : null}
 
         {(action || secondaryAction) && (
-          <div className="flex items-center gap-3">
+          <div className="mt-4 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
             {action && (
-              <Button onClick={action.onClick} variant="default" className="glass-hover">
+              <Button
+                onClick={action.onClick}
+                variant={actionVariant ?? DEFAULT_ACTION_VARIANT[variant]}
+                className="glass-hover"
+              >
                 {action.label}
               </Button>
             )}

package/src/components/floor-tokens.stories.tsx

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+/**
+ * Tokens / Floor — the floor plan's `--floor-*` palette (5a "Jewel",
+ * contrast-corrected). Every status fill gradient, its chair-ring colour and
+ * its foreground, in light and dark side by side. The dark column is a `.dark`
+ * scope, so keep the toolbar on Light to compare the two.
+ */
+
+type Status = {
+  key: string;
+  label: string;
+  time?: string;
+  /** Token stem, e.g. `booked` → `--floor-booked-from`. */
+  stem: string;
+  /** The status overlay on the chair ring; statuses without one show the neutral track only. */
+  seat?: string;
+  foreground: string;
+  halo?: string;
+  ring?: { color: string; dashed: boolean };
+};
+
+const STATUSES: Status[] = [
+  { key: "free", label: "T1", time: "Free", stem: "free", foreground: "--floor-free-foreground" },
+  { key: "booked", label: "T2", time: "19:30", stem: "booked", seat: "--floor-booked-seat", foreground: "--floor-booked-foreground" },
+  { key: "seated", label: "T3", time: "45m", stem: "seated", seat: "--floor-seated-seat", foreground: "--floor-seated-foreground" },
+  { key: "over", label: "T4", time: "+12m", stem: "over", seat: "--floor-over-seat", foreground: "--floor-over-foreground", halo: "--floor-over-halo" },
+  { key: "late", label: "T5", time: "Late 8m", stem: "late", seat: "--floor-late-seat", foreground: "--floor-late-foreground", halo: "--floor-late-halo" },
+  { key: "blocked", label: "T6", time: "Held", stem: "blocked", seat: "--floor-blocked-seat", foreground: "--floor-blocked-foreground" },
+  { key: "out-of-service", label: "T7", time: "Out", stem: "out-of-service", foreground: "--floor-out-of-service-foreground" },
+  { key: "offline", label: "T8", time: "Offline", stem: "offline", seat: "--floor-offline-seat", foreground: "--floor-offline-foreground" },
+  { key: "offer", label: "T9", time: "Offer", stem: "free", foreground: "--floor-free-foreground", ring: { color: "--floor-offer", dashed: true } },
+  { key: "selected", label: "T10", time: "19:30", stem: "booked", seat: "--floor-booked-seat", foreground: "--floor-booked-foreground", ring: { color: "--floor-selected", dashed: false } },
+];
+
+const SINGLES = [
+  "--floor-seat",
+  "--floor-muted-foreground",
+  "--floor-on-fill-foreground",
+  "--floor-late-halo",
+  "--floor-over-halo",
+  "--floor-busy",
+  "--floor-error",
+  "--floor-error-foreground",
+  "--floor-offer",
+  "--floor-selected",
+  "--floor-room",
+  "--floor-wall",
+  "--floor-fixture",
+  "--floor-shadow",
+];
+
+/** Short side 60: the geometry in the token notes is in units of it. */
+const S = 60;
+const W = 96;
+const RX = 0.1 * S;
+const OFFSET = 0.0867 * S;
+const HALO = 0.1756 * S;
+
+function Table({ status, theme }: { status: Status; theme: string }) {
+  const id = `floor-${status.key}-${theme}`;
+  const pad = 14;
+  const ring = { x: pad - OFFSET, y: pad - OFFSET, w: W + 2 * OFFSET, h: S + 2 * OFFSET };
+  return (
+    <svg
+      width={W + 2 * pad}
+      height={S + 2 * pad}
+      viewBox={`0 0 ${W + 2 * pad} ${S + 2 * pad}`}
+      role="img"
+      aria-label={`${status.key} table`}
+    >
+      <defs>
+        <linearGradient id={id} x1="0" x2="1" y1="0" y2="0">
+          <stop offset="0" style={{ stopColor: `var(--floor-${status.stem}-from)` }} />
+          <stop offset="1" style={{ stopColor: `var(--floor-${status.stem}-to)` }} />
+        </linearGradient>
+        <filter id={`${id}-shadow`} x="-30%" y="-30%" width="160%" height="180%">
+          <feDropShadow dx="0" dy={0.047 * S} stdDeviation={0.053 * S} floodColor="var(--floor-shadow)" floodOpacity="0.16" />
+        </filter>
+      </defs>
+      {status.halo ? (
+        <rect
+          x={pad - HALO}
+          y={pad - HALO}
+          width={W + 2 * HALO}
+          height={S + 2 * HALO}
+          rx={RX + HALO}
+          fill="none"
+          strokeWidth={0.037 * S}
+          style={{ stroke: `var(${status.halo})` }}
+        />
+      ) : null}
+      <rect
+        x={ring.x}
+        y={ring.y}
+        width={ring.w}
+        height={ring.h}
+        rx={RX + OFFSET}
+        fill="none"
+        strokeWidth={0.0667 * S}
+        strokeLinecap="round"
+        style={{ stroke: "var(--floor-seat)" }}
+      />
+      {status.seat ? (
+        <rect
+          x={ring.x}
+          y={ring.y}
+          width={ring.w}
+          height={ring.h}
+          rx={RX + OFFSET}
+          fill="none"
+          pathLength={100}
+          strokeDasharray="60 40"
+          strokeWidth={0.0667 * S}
+          strokeLinecap="round"
+          style={{ stroke: `var(${status.seat})` }}
+        />
+      ) : null}
+      {status.ring ? (
+        <rect
+          x={pad - HALO}
+          y={pad - HALO}
+          width={W + 2 * HALO}
+          height={S + 2 * HALO}
+          rx={RX + HALO}
+          fill="none"
+          strokeWidth={0.037 * S}
+          strokeDasharray={status.ring.dashed ? "4 3" : undefined}
+          style={{ stroke: `var(${status.ring.color})` }}
+        />
+      ) : null}
+      <rect x={pad} y={pad} width={W} height={S} rx={RX} fill={`url(#${id})`} filter={`url(#${id}-shadow)`} />
+      <text
+        x={pad + W / 2}
+        y={pad + S / 2 - 2}
+        textAnchor="middle"
+        fontSize={0.2067 * S}
+        fontWeight={700}
+        style={{ fill: `var(${status.foreground})` }}
+      >
+        {status.label}
+      </text>
+      {status.time ? (
+        <text
+          x={pad + W / 2}
+          y={pad + S / 2 + 0.1333 * S + 2}
+          textAnchor="middle"
+          fontSize={Math.max(12, 0.1333 * S)}
+          fontWeight={600}
+          style={{ fill: `var(${status.foreground})`, fontVariantNumeric: "tabular-nums" }}
+        >
+          {status.time}
+        </text>
+      ) : null}
+    </svg>
+  );
+}
+
+function Chip({ token }: { token: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className="size-5 shrink-0 rounded-md border border-border"
+        style={{ background: `var(${token})` }}
+      />
+      <code className="text-2xs text-muted-foreground">{token}</code>
+    </div>
+  );
+}
+
+function Panel({ theme }: { theme: "light" | "dark" }) {
+  return (
+    <section
+      className={`${theme === "dark" ? "dark" : ""} flex flex-col gap-6 rounded-2xl p-6 text-foreground`}
+      style={{ background: "var(--floor-room)" }}
+    >
+      <h2 className="text-lg font-semibold">{theme === "dark" ? "Dark" : "Light"}</h2>
+      <div className="flex flex-col gap-4">
+        {STATUSES.map((status) => (
+          <div key={status.key} className="flex items-center gap-4">
+            <Table status={status} theme={theme} />
+            <div className="flex flex-col gap-1">
+              <span className="text-sm font-semibold">{status.key}</span>
+              {status.ring ? (
+                <Chip token={status.ring.color} />
+              ) : (
+                <>
+                  <Chip token={`--floor-${status.stem}-from`} />
+                  <Chip token={`--floor-${status.stem}-to`} />
+                  {status.seat ? <Chip token={status.seat} /> : null}
+                  <Chip token={status.foreground} />
+                  {status.halo ? <Chip token={status.halo} /> : null}
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-2 gap-2 border-t border-border pt-4">
+        {SINGLES.map((token) => (
+          <Chip key={token} token={token} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const meta = {
+  title: "Tokens/Floor",
+  parameters: { layout: "padded" },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BothThemes: Story = {
+  render: () => (
+    <div className="grid gap-6 md:grid-cols-2">
+      <Panel theme="light" />
+      <Panel theme="dark" />
+    </div>
+  ),
+};

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

@@ -60,7 +60,7 @@ const meta: Meta<typeof PanZoomViewport> = {
     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`.",
+          "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 (44px each, on a raised card inset 12px; Fit keeps the plan clear of them). `fitAlign=\"top\"` pins a short plan to the top. 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`.",
       },
     },
   },
@@ -104,6 +104,26 @@ export const PhoneAtTheFloor: Story = {
   ),
 };
 
+/**
+ * floor/07-f0 phone, pinned to the top: `fitAlign="top"` holds a plan shorter
+ * than the viewport under the top padding instead of centring it. The controls
+ * float 12px in on a raised card, 44px per button, and the fit keeps clear of them.
+ */
+export const PhonePinnedTop: Story = {
+  render: () => (
+    <PanZoomViewport
+      contentWidth={1200}
+      contentHeight={800}
+      minScale={0.25}
+      fitAlign="top"
+      labels={labels}
+      className="h-[640px] 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: () => {