@bearmenu/ui 0.8.58 → 0.8.60

package/dist/components/kitchen-dossier.js

@@ -1,5 +1,5 @@
-import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-ZQ53AGML.js';
 import { VenueQuotes } from '../chunk-43RC7MHY.js';
+import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-ZQ53AGML.js';
 import { StoryProvider, StorySegments, StoryPanel } from '../chunk-F6FMZJDG.js';
 import { GlassGround } from '../chunk-ICOU5QHT.js';
 import { Separator } from '../chunk-NWZGSLPU.js';

package/dist/components/place-card.js

@@ -1,6 +1,6 @@
+import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
-import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { GradeAtom } from '../chunk-QOXXIYDG.js';
 import { showsGradeAtom } from '../chunk-TDTLEDX6.js';
 import { Separator } from '../chunk-NWZGSLPU.js';

package/dist/components/time-slot-rail-group.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * TimeSlotRailGroup — one service period ("Lunch", "Dinner") inside a
+ * `TimeSlotRail`. The label sticks to the start edge while the group's chips
+ * scroll under it, so the period stays readable when the rail centres a chip.
+ *
+ * The rail detects groups in the DOM (`data-slot="time-slot-rail-group"`) and
+ * reserves room for the sticky label; there is nothing to wire up.
+ *
+ * Chips stay equal height (`items-stretch`). The accessible name comes from
+ * `label` when it is a string; any other node needs an explicit `aria-label`.
+ */
+type TimeSlotRailGroupBaseProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+type TimeSlotRailGroupProps = TimeSlotRailGroupBaseProps & ({
+    label: string;
+    "aria-label"?: string;
+} | {
+    label: React.ReactNode;
+    "aria-label": string;
+});
+declare function TimeSlotRailGroup({ label, "aria-label": ariaLabel, children, className, }: TimeSlotRailGroupProps): react_jsx_runtime.JSX.Element;
+
+export { TimeSlotRailGroup, type TimeSlotRailGroupProps };

package/dist/components/time-slot-rail-group.js

@@ -0,0 +1,33 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimeSlotRailGroup({
+  label,
+  "aria-label": ariaLabel,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "time-slot-rail-group",
+      role: "group",
+      "aria-label": ariaLabel != null ? ariaLabel : typeof label === "string" ? label : void 0,
+      className: cn("flex shrink-0 items-stretch gap-2", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "sticky left-0 z-10 max-w-20 self-center truncate bg-background pr-2 text-xs font-medium text-muted-foreground",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { TimeSlotRailGroup };

package/dist/components/time-slot-rail.js

@@ -9,6 +9,7 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var CHIP = '[data-slot="time-slot"]';
+var GROUPS_FADE = "has-[[data-slot=time-slot-rail-group]]:[&>div:nth-child(2)]:left-20";
 function chipsOf(scroller) {
   return Array.from(scroller.querySelectorAll(CHIP)).filter((chip) => !chip.disabled);
 }
@@ -131,8 +132,8 @@ function TimeSlotRail({
         "aria-label": ariaLabel,
         onKeyDown,
         onFocus,
-        className,
-        scrollClassName: "flex snap-x snap-proximity scroll-px-10 gap-1.5 px-1.5 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_[data-slot=time-slot]]:shrink-0",
+        className: cn(GROUPS_FADE, className),
+        scrollClassName: "flex snap-x snap-proximity scroll-px-10 has-[[data-slot=time-slot-rail-group]]:scroll-ps-20 gap-2 px-1.5 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_[data-slot=time-slot]]:shrink-0",
         children
       }
     ),

package/package.json

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

package/src/components/time-slot-rail-group.test.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TimeSlot } from "./time-slot";
+import { TimeSlotRail } from "./time-slot-rail";
+import { TimeSlotRailGroup } from "./time-slot-rail-group";
+
+const LUNCH = ["12:00", "12:30"];
+const DINNER = ["19:00", "19:30"];
+
+function Chips({ times, selected, onSelect }: { times: string[]; selected: string; onSelect: (t: string) => void }) {
+  return (
+    <>
+      {times.map((time) => (
+        <TimeSlot
+          key={time}
+          size="touch"
+          time={time}
+          fit="fits"
+          meta="R1"
+          selected={selected === time}
+          onSelect={() => onSelect(time)}
+        />
+      ))}
+    </>
+  );
+}
+
+function GroupedRail() {
+  const [selected, setSelected] = React.useState("19:00");
+  return (
+    <TimeSlotRail aria-label="Start time">
+      <TimeSlotRailGroup label="Lunch">
+        <Chips times={LUNCH} selected={selected} onSelect={setSelected} />
+      </TimeSlotRailGroup>
+      <TimeSlotRailGroup label="Dinner">
+        <Chips times={DINNER} selected={selected} onSelect={setSelected} />
+      </TimeSlotRailGroup>
+    </TimeSlotRail>
+  );
+}
+
+function PlainRail() {
+  const [selected, setSelected] = React.useState("19:00");
+  return (
+    <TimeSlotRail aria-label="Start time">
+      <Chips times={[...LUNCH, ...DINNER]} selected={selected} onSelect={setSelected} />
+    </TimeSlotRail>
+  );
+}
+
+const chip = (time: string) => screen.getByRole("button", { name: new RegExp(time) });
+
+afterEach(() => {
+  Reflect.deleteProperty(HTMLElement.prototype, "scrollTo");
+});
+
+describe("TimeSlotRailGroup", () => {
+  it("is a group named by its string label, and shows the label", () => {
+    render(<GroupedRail />);
+    expect(screen.getByRole("group", { name: "Lunch" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Dinner" })).toBeInTheDocument();
+    expect(screen.getByText("Lunch")).toBeVisible();
+  });
+
+  it("takes an explicit aria-label for a non-string label", () => {
+    render(
+      <TimeSlotRail aria-label="Start time">
+        <TimeSlotRailGroup label={<em>Brunch</em>} aria-label="Brunch service">
+          <Chips times={LUNCH} selected="" onSelect={() => {}} />
+        </TimeSlotRailGroup>
+      </TimeSlotRail>,
+    );
+    expect(screen.getByRole("group", { name: "Brunch service" })).toBeInTheDocument();
+  });
+
+  it("keeps each chip inside its own group", () => {
+    render(<GroupedRail />);
+    const lunch = screen.getByRole("group", { name: "Lunch" });
+    const dinner = screen.getByRole("group", { name: "Dinner" });
+    expect(within(lunch).getAllByRole("button")).toHaveLength(2);
+    expect(within(lunch).getByRole("button", { name: /12:30/ })).toBeInTheDocument();
+    expect(within(lunch).queryByRole("button", { name: /19:00/ })).toBeNull();
+    expect(within(dinner).getByRole("button", { name: /19:30/ })).toBeInTheDocument();
+  });
+
+  it("still centres the selected chip, and keyboard moves across groups", async () => {
+    const user = userEvent.setup();
+    const scrollTo = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollTo", { configurable: true, value: scrollTo });
+    render(<GroupedRail />);
+    expect(scrollTo).toHaveBeenCalledTimes(1);
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: "auto" }));
+    await user.click(chip("12:30"));
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: "smooth" }));
+    await user.keyboard("{ArrowRight}");
+    expect(chip("19:00")).toHaveFocus();
+  });
+
+  it("reserves room for the sticky label only when groups are present", () => {
+    const { unmount } = render(<GroupedRail />);
+    const scroller = screen.getByRole("group", { name: "Start time" });
+    expect(scroller.className).toContain("has-[[data-slot=time-slot-rail-group]]:scroll-ps-20");
+    expect(scroller.parentElement?.className).toContain("has-[[data-slot=time-slot-rail-group]]:[&>div:nth-child(2)]:left-20");
+    expect(screen.getByText("Lunch")).toHaveClass("sticky", "left-0", "bg-background");
+    unmount();
+
+    render(<PlainRail />);
+    expect(document.querySelector('[data-slot="time-slot-rail-group"]')).toBeNull();
+    expect(screen.getAllByRole("group")).toHaveLength(1);
+    expect(chip("19:00")).toHaveAttribute("aria-pressed", "true");
+  });
+});

package/src/components/time-slot-rail-group.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * TimeSlotRailGroup — one service period ("Lunch", "Dinner") inside a
+ * `TimeSlotRail`. The label sticks to the start edge while the group's chips
+ * scroll under it, so the period stays readable when the rail centres a chip.
+ *
+ * The rail detects groups in the DOM (`data-slot="time-slot-rail-group"`) and
+ * reserves room for the sticky label; there is nothing to wire up.
+ *
+ * Chips stay equal height (`items-stretch`). The accessible name comes from
+ * `label` when it is a string; any other node needs an explicit `aria-label`.
+ */
+
+type TimeSlotRailGroupBaseProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export type TimeSlotRailGroupProps = TimeSlotRailGroupBaseProps &
+  (
+    | { label: string; "aria-label"?: string }
+    | { label: React.ReactNode; "aria-label": string }
+  );
+
+export function TimeSlotRailGroup({
+  label,
+  "aria-label": ariaLabel,
+  children,
+  className,
+}: TimeSlotRailGroupProps) {
+  return (
+    <div
+      data-slot="time-slot-rail-group"
+      role="group"
+      aria-label={ariaLabel ?? (typeof label === "string" ? label : undefined)}
+      className={cn("flex shrink-0 items-stretch gap-2", className)}
+    >
+      <span
+        aria-hidden
+        className="sticky left-0 z-10 max-w-20 self-center truncate bg-background pr-2 text-xs font-medium text-muted-foreground"
+      >
+        {label}
+      </span>
+      {children}
+    </div>
+  );
+}

package/src/components/time-slot-rail.stories.tsx

@@ -4,6 +4,7 @@ import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import { TimeSlot, type TimeSlotFit } from "./time-slot";
 import { TimeSlotRail } from "./time-slot-rail";
+import { TimeSlotRailGroup } from "./time-slot-rail-group";
 
 const meta: Meta<typeof TimeSlotRail> = {
   title: "Booking/TimeSlotRail",
@@ -138,11 +139,11 @@ export const Periods: Story = {
     return (
       <Inset>
         <TimeSlotRail aria-label="Start time on Wed 18 Nov" scrollLabels={SCROLL_LABELS}>
-          <div role="group" aria-label="Lunch" className="flex gap-1.5">
+          <div role="group" aria-label="Lunch" className="flex gap-2">
             {chips(lunch)}
           </div>
           <Separator orientation="vertical" className="mx-1 h-8 self-center" />
-          <div role="group" aria-label="Dinner" className="flex gap-1.5">
+          <div role="group" aria-label="Dinner" className="flex gap-2">
             {chips(dinner)}
           </div>
         </TimeSlotRail>
@@ -151,11 +152,39 @@ export const Periods: Story = {
   },
 };
 
+/** Labelled period groups: the label sticks to the start edge while chips scroll under it. */
+export const Groups: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState("20:00");
+    const chips = (slots: Slot[]) =>
+      slots.map((slot) => (
+        <TimeSlot
+          key={slot.time}
+          size="touch"
+          time={slot.time}
+          fit={slot.fit}
+          meta={slot.meta}
+          selected={selected === slot.time}
+          onSelect={() => setSelected(slot.time)}
+          className="w-[84px] shrink-0 snap-center"
+        />
+      ));
+    return (
+      <Inset>
+        <TimeSlotRail aria-label="Start time on Wed 18 Nov" scrollLabels={SCROLL_LABELS}>
+          <TimeSlotRailGroup label="Lunch">{chips(SLOTS.slice(0, 4))}</TimeSlotRailGroup>
+          <TimeSlotRailGroup label="Dinner">{chips(SLOTS.slice(4))}</TimeSlotRailGroup>
+        </TimeSlotRail>
+      </Inset>
+    );
+  },
+};
+
 /** Loading is the caller's: skeletons of the same footprint, so the inset does not jump. */
 export const Loading: Story = {
   render: () => (
     <Inset>
-      <div role="status" className="flex gap-1.5 overflow-hidden">
+      <div role="status" className="flex gap-2 overflow-hidden">
         <span className="sr-only">Checking tables for 12…</span>
         {Array.from({ length: 5 }, (_, i) => (
           <Skeleton key={i} aria-hidden className="h-[52px] w-[84px] shrink-0 rounded-xl" />

package/src/components/time-slot-rail.tsx

@@ -31,6 +31,11 @@ import { ScrollFade } from "./scroll-fade";
 
 const CHIP = '[data-slot="time-slot"]';
 
+// With period groups, the start fade (the 2nd div of ScrollFade) begins after
+// the 80px sticky label instead of covering it. The scroller reserves the same
+// 80px as scroll-padding-start, so a focused chip never lands under the label.
+const GROUPS_FADE = "has-[[data-slot=time-slot-rail-group]]:[&>div:nth-child(2)]:left-20";
+
 export type TimeSlotRailScrollLabels = {
   /** "Earlier times" — the chevron at the start edge. */
   previous: string;
@@ -186,8 +191,8 @@ export function TimeSlotRail({
         aria-label={ariaLabel}
         onKeyDown={onKeyDown}
         onFocus={onFocus}
-        className={className}
-        scrollClassName="flex snap-x snap-proximity scroll-px-10 gap-1.5 px-1.5 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_[data-slot=time-slot]]:shrink-0"
+        className={cn(GROUPS_FADE, className)}
+        scrollClassName="flex snap-x snap-proximity scroll-px-10 has-[[data-slot=time-slot-rail-group]]:scroll-ps-20 gap-2 px-1.5 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_[data-slot=time-slot]]:shrink-0"
       >
         {children}
       </ScrollFade>