@bearmenu/ui 0.8.16 → 0.8.18

package/src/components/event-door.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventDoor, EventDoorSkeleton } from "./event-door";
+import { SnapRail } from "./snap-rail";
+
+function photo(label: string, fill: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><rect width="320" height="320" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="22" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+const DOORS = [
+  { name: "Concerts", fill: "#7a5c46" },
+  { name: "Parties", fill: "#4a6a5c" },
+  { name: "Live music", fill: "#6a5c8a" },
+  { name: "Stand-up", fill: "#8a6a4a" },
+  { name: "Theatre", fill: "#4a5a7a" },
+  { name: "Workshops", fill: "#5a7a4a" },
+  { name: "Markets", fill: "#7a4a5a" },
+  { name: "Film", fill: "#4a4a4a" },
+];
+
+const meta: Meta<typeof EventDoor> = {
+  title: "Events/EventDoor",
+  component: EventDoor,
+  tags: ["autodocs"],
+  args: {
+    name: "Concerts",
+    href: "#concerts",
+    imageSrc: photo("stage", "#7a5c46"),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[104px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A category's entry point: a square photograph of the kind of night, a scrim, the name inside the image, no count. The 1:1 shape with the name inside is what says door rather than event. Always an anchor.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventDoor>;
+
+export const Default: Story = {};
+
+/** No image — the poster fallback carries the tile. */
+export const NoImage: Story = {
+  args: { imageSrc: undefined },
+};
+
+/** The hub's door row on a phone: a snap rail of squares, three and a third visible. */
+export const Row: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[375px] px-4" style={{ "--page-gutter": "1rem" } as React.CSSProperties}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <nav aria-label="Browse by kind">
+      <SnapRail itemWidth="xs" gap="sm" bleed="page">
+        {DOORS.map((door) => (
+          <EventDoor
+            key={door.name}
+            name={door.name}
+            href={`#${door.name}`}
+            imageSrc={photo(door.name.toLowerCase(), door.fill)}
+          />
+        ))}
+      </SnapRail>
+    </nav>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => <EventDoorSkeleton />,
+};

package/src/components/event-door.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventDoor — a square tile that is a category's entry point: a photograph of
+ * the KIND of night (a stage, a dance floor, a terrace), a scrim, the name.
+ *
+ * A door and an event row must not look alike. `CategoryDeck` fans four event
+ * posters and prints a count, which reads as "these four events"; a card with
+ * a single event's poster reads as "tap = that event" and changes daily. The
+ * 1:1 shape with the name INSIDE the image is what says "door, not event", and
+ * it carries no count — a count is a claim about scale the hub's figures
+ * already make, and on a door it competes with the name.
+ *
+ * Always an anchor: a door with no destination is not a door, so `href` is
+ * required. The scrim is a gradient over a photograph, which is mode-
+ * independent — the same measured treatment `DoorwayTiles` uses.
+ */
+
+export type EventDoorLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventDoorLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventDoorProps = {
+  /** The category's name — the anchor's accessible name and the tile's label. */
+  name: string;
+  href: string;
+  imageSrc?: string;
+  /** Rendered when `imageSrc` is absent or fails. Defaults to `<EventPosterFallback />`. */
+  fallback?: React.ReactNode;
+  linkComponent?: React.ComponentType<EventDoorLinkProps>;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  className?: string;
+};
+
+export function EventDoor({
+  name,
+  href,
+  imageSrc,
+  fallback = <EventPosterFallback />,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: EventDoorProps) {
+  const [failed, setFailed] = useState(false);
+  const showImage = !!imageSrc && !failed;
+
+  return (
+    <LinkComponent
+      href={href}
+      onClick={onClick}
+      className={cn(
+        "group relative block aspect-square overflow-hidden rounded-xl bg-muted",
+        "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+    >
+      {showImage ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={imageSrc}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none"
+          onError={() => setFailed(true)}
+        />
+      ) : (
+        fallback
+      )}
+      <span
+        aria-hidden
+        className="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black/65 via-black/45 to-transparent"
+      />
+      <span className="absolute inset-x-2 bottom-2 line-clamp-2 text-[12.5px] font-bold leading-[1.2] tracking-[-0.01em] text-white">
+        {name}
+      </span>
+    </LinkComponent>
+  );
+}
+
+export function EventDoorSkeleton({ className }: { className?: string }) {
+  return <Skeleton className={cn("aspect-square w-full rounded-xl", className)} />;
+}

package/src/components/event-hub-hero.tsx

@@ -47,6 +47,12 @@ export type EventHubHeroProps = {
   statsLabel?: string;
   /** The right-column slot — the poster stack in the source design. */
   aside?: React.ReactNode;
+  /**
+   * The text column's last row, under the figures — the hub's tonight state
+   * strip. The figures say scale; this says what is on right now, and it is
+   * the one thing on the first screen a reader can tap into the timeline.
+   */
+  footer?: React.ReactNode;
   className?: string;
 };
 
@@ -57,12 +63,16 @@ export function EventHubHero({
   stats,
   statsLabel,
   aside,
+  footer,
   className,
 }: EventHubHeroProps) {
   return (
     <div
       className={cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 16px between the text column and the aside on a phone: with a
+        // tappable poster stack the aside is content, not decoration, and
+        // gets the within-section rhythm rather than a section gap.
+        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
         className
       )}
     >
@@ -131,6 +141,7 @@ export function EventHubHero({
             );
           })}
         </div>
+        {footer && <div className="order-4 pt-1.5 lg:order-none lg:pt-2">{footer}</div>}
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}
@@ -141,15 +152,17 @@ export function EventHubHero({
 export type EventHubHeroSkeletonProps = {
   /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
   aside?: React.ReactNode;
+  /** Reserves the `footer` row — the tonight strip's 52px. */
+  footer?: boolean;
   className?: string;
 };
 
-export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps) {
+export function EventHubHeroSkeleton({ aside, footer, className }: EventHubHeroSkeletonProps) {
   return (
     <div
       aria-hidden="true"
       className={cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
         className
       )}
     >
@@ -174,6 +187,11 @@ export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonP
             </div>
           ))}
         </div>
+        {footer && (
+          <div className="order-4 pt-1.5 lg:order-none lg:pt-2">
+            <Skeleton className="h-[52px] w-full rounded-[14px]" />
+          </div>
+        )}
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}

package/src/components/event-tonight-strip.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventTonightStrip, EventTonightStripSkeleton } from "./event-tonight-strip";
+
+const meta: Meta<typeof EventTonightStrip> = {
+  title: "Events/EventTonightStrip",
+  component: EventTonightStrip,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[343px] bg-surface-2 p-4 md:w-[520px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's state line under the hero: what is on right now, what is later tonight, and one tap into the timeline. Copy is caller-composed and carries only absolute facts (counts, wall-clock times) so an ISR snapshot can never say something false. Tone `none` renders a non-interactive status line.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventTonightStrip>;
+
+export const Live: Story = {
+  args: {
+    tone: "live",
+    lead: "3 live now",
+    details: ["12 more tonight", "next at 20:00"],
+    actionLabel: "Open tonight in the schedule",
+    href: "#events-day-2026-09-17",
+  },
+};
+
+export const Tonight: Story = {
+  args: {
+    tone: "tonight",
+    lead: "9 tonight",
+    details: ["first at 19:00"],
+    actionLabel: "Open tonight in the schedule",
+    href: "#events-day-2026-09-17",
+  },
+};
+
+export const Quiet: Story = {
+  args: {
+    tone: "quiet",
+    lead: "Nothing on tonight",
+    details: ["next Fri 20:00", "7 events"],
+    actionLabel: "Open Friday in the schedule",
+    href: "#events-day-2026-09-19",
+  },
+};
+
+export const Over: Story = {
+  args: {
+    tone: "quiet",
+    lead: "Tonight's events are over",
+    details: ["next tomorrow 18:00", "4 events"],
+    actionLabel: "Open tomorrow in the schedule",
+    href: "#events-day-2026-09-18",
+  },
+};
+
+export const None: Story = {
+  args: {
+    tone: "none",
+    lead: "Nothing scheduled in the next 14 days",
+    details: ["Check back soon"],
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <EventTonightStripSkeleton />,
+};

package/src/components/event-tonight-strip.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EventTonightStrip } from "./event-tonight-strip";
+import { EventDoor } from "./event-door";
+import { PosterStack } from "./poster-stack";
+
+describe("EventTonightStrip", () => {
+  it("is an anchor with the lead, the details and the action as its name", () => {
+    render(
+      <EventTonightStrip
+        tone="live"
+        lead="3 live now"
+        details={["12 more tonight", "next at 20:00"]}
+        actionLabel="Open tonight in the schedule"
+        href="/events/schedule#events-day-2026-09-17"
+      />
+    );
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "/events/schedule#events-day-2026-09-17");
+    expect(link).toHaveAccessibleName(
+      "3 live now 12 more tonight next at 20:00. Open tonight in the schedule"
+    );
+  });
+
+  it("renders a status line, not a link, when there is nothing to open", () => {
+    render(<EventTonightStrip tone="none" lead="Nothing scheduled" />);
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(screen.getByRole("status")).toHaveTextContent("Nothing scheduled");
+  });
+});
+
+describe("EventDoor", () => {
+  it("is an anchor named by the category, with the image decorative", () => {
+    render(<EventDoor name="Concerts" href="/events/concerts" imageSrc="/stage.webp" />);
+    const link = screen.getByRole("link", { name: "Concerts" });
+    expect(link).toHaveAttribute("href", "/events/concerts");
+    expect(screen.getByRole("presentation", { hidden: true })).toHaveAttribute("alt", "");
+  });
+});
+
+describe("PosterStack", () => {
+  it("makes a captioned poster an anchor named by its caption", () => {
+    // The float's reduced-motion check reads matchMedia, which jsdom lacks.
+    window.matchMedia = () => ({ matches: true }) as MediaQueryList;
+    render(
+      <PosterStack
+        posters={[
+          { src: "/a.jpg", alt: "A poster", caption: "Subcarpați live", href: "/events/e/a" },
+          { src: "/b.jpg", alt: "B poster" },
+        ]}
+      />
+    );
+    const link = screen.getByRole("link", { name: "Subcarpați live" });
+    expect(link).toHaveAttribute("href", "/events/e/a");
+    // The uncaptioned poster stays decorative: no anchor, its own alt.
+    expect(screen.getAllByRole("link")).toHaveLength(1);
+    expect(screen.getByAltText("B poster")).toBeInTheDocument();
+  });
+});

package/src/components/event-tonight-strip.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { ArrowRight, CalendarDays, Clock } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventTonightStrip — the hub's state line: what is on right now, what is
+ * later tonight, and one tap into the timeline.
+ *
+ * The hero's figures say SCALE ("52 events · 14 days"); this says STATE ("3
+ * live now · 12 more tonight · next at 20:00"). It is the one thing on the
+ * hub's first screen a reader can tap into today's programme, so it is a real
+ * anchor whenever there is a day to open — never a sheet trigger.
+ *
+ * Copy is caller-composed and carries only absolute facts: counts and
+ * wall-clock start times. Never a countdown or "in 12 minutes" — the hub is
+ * ISR-cached, and a ten-minute-old snapshot that says "next at 20:00" is at
+ * worst one boundary off, while "in 12 minutes" is simply wrong. The DS keeps
+ * no clock, no Intl and no i18n: the app derives `tone`, `lead` and `details`
+ * from its own clock and re-derives them after hydration.
+ *
+ * The lead stays `text-foreground`, not `--success`: 13px bold success on a
+ * card computes to roughly 4.5:1 in both modes, too close to the floor for
+ * the strip's one claim. The dot and the border carry the colour.
+ */
+
+export type EventTonightStripTone = "live" | "tonight" | "quiet" | "none";
+
+export type EventTonightStripLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventTonightStripLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventTonightStripProps = {
+  tone: EventTonightStripTone;
+  /** The lead segment, bold — "3 live now". */
+  lead: string;
+  /** Trailing segments, muted, joined with " · " — ["12 more tonight", "next at 20:00"]. */
+  details?: string[];
+  /** Screen-reader suffix for the anchor — "Open tonight in the schedule". */
+  actionLabel?: string;
+  /** Absent (tone `none`) renders a non-interactive `role="status"` line. */
+  href?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<EventTonightStripLinkProps>;
+  className?: string;
+};
+
+export function EventTonightStrip({
+  tone,
+  lead,
+  details = [],
+  actionLabel,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: EventTonightStripProps) {
+  const interactive = !!href;
+
+  const mark =
+    tone === "live" ? (
+      <span className="relative flex h-2.5 w-2.5" aria-hidden>
+        <span className="absolute inline-flex h-full w-full rounded-full bg-success/40 motion-live-pulse motion-reduce:animate-none" />
+        <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-success" />
+      </span>
+    ) : tone === "tonight" ? (
+      <Clock className="h-4 w-4 text-muted-foreground" aria-hidden />
+    ) : (
+      <CalendarDays
+        className={cn("h-4 w-4", tone === "none" ? "text-muted-foreground/70" : "text-muted-foreground")}
+        aria-hidden
+      />
+    );
+
+  const body = (
+    <>
+      <span className="flex h-4 w-4 shrink-0 items-center justify-center">{mark}</span>
+      <span className="line-clamp-2 min-w-0 flex-1 text-[13px] leading-[1.3] tabular-nums lg:line-clamp-1 lg:text-sm">
+        <span className="font-bold text-foreground">{lead}</span>
+        {details.map((detail) => (
+          <React.Fragment key={detail}>
+            {/* The glyph is decoration; the spaces around it are real, so the
+                accessible name reads as words, not one run-on string. */}{" "}
+            <span className="text-muted-foreground" aria-hidden>
+              ·
+            </span>{" "}
+            <span className="text-muted-foreground">{detail}</span>
+          </React.Fragment>
+        ))}
+        {interactive && actionLabel && <span className="sr-only">. {actionLabel}</span>}
+      </span>
+      {interactive && (
+        <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+      )}
+    </>
+  );
+
+  const rootClasses = cn(
+    "flex min-h-[52px] w-full items-center gap-2.5 rounded-[14px] border bg-card px-3.5 py-2 text-left",
+    tone === "live" ? "border-success/40" : "border-border",
+    interactive &&
+      cn(
+        "cursor-pointer transition-colors duration-150 hover:bg-accent-subtle active:scale-[0.99] motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      ),
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent href={href} className={rootClasses}>
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  return (
+    <div role="status" className={rootClasses}>
+      {body}
+    </div>
+  );
+}
+
+export function EventTonightStripSkeleton({ className }: { className?: string }) {
+  return <Skeleton className={cn("h-[52px] w-full rounded-[14px]", className)} />;
+}

package/src/components/facet-group.tsx

@@ -118,6 +118,13 @@ export type FacetGroupProps = Omit<
   /** e.g. "Show all". Omit to hide the trailing action. */
   moreLabel?: string;
   onMore?: () => void;
+  /**
+   * Whether the trailing action has already expanded the options it controls
+   * — set it when `onMore` reveals more rows in place (and `moreLabel` reads
+   * "Show fewer"), so the button carries `aria-expanded`. Leave it unset when
+   * the action opens another surface.
+   */
+  moreExpanded?: boolean;
   className?: string;
 };
 
@@ -133,6 +140,7 @@ export function FacetGroup({
   onToggle,
   moreLabel,
   onMore,
+  moreExpanded,
   className,
   ...rest
 }: FacetGroupProps) {
@@ -304,6 +312,7 @@ export function FacetGroup({
         <button
           type="button"
           onClick={onMore}
+          aria-expanded={moreExpanded}
           className="cursor-pointer pt-[11px] text-[12.5px] font-bold text-primary transition-colors duration-150 hover:text-primary/80 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm"
         >
           {moreLabel}

package/src/components/hue-chip.test.tsx

@@ -31,9 +31,12 @@ describe("hueTint", () => {
 });
 
 describe("HueChip", () => {
+  // The label sits in an inner span that ellipsises; the chip is its parent.
+  const chipOf = (text: string) => screen.getByText(text).parentElement!;
+
   it("wears the tint when it has a hue", () => {
     render(<HueChip hue="oklch(0.62 0.14 82)">Sweet Pastry</HueChip>);
-    const chip = screen.getByText("Sweet Pastry");
+    const chip = chipOf("Sweet Pastry");
     expect(chip.getAttribute("style")).toContain("oklab");
     expect(chip.className).not.toContain("bg-muted");
   });
@@ -41,7 +44,7 @@ describe("HueChip", () => {
   it("falls back to the neutral rather than to a colour", () => {
     // A facet with no family behind it must not borrow another family's colour.
     render(<HueChip>Fast Food</HueChip>);
-    const chip = screen.getByText("Fast Food");
+    const chip = chipOf("Fast Food");
     expect(chip.className).toContain("bg-muted");
     expect(chip.getAttribute("style")).toBeNull();
   });
@@ -52,7 +55,7 @@ describe("HueChip", () => {
         <HueChip as="li">Salad</HueChip>
       </ul>
     );
-    expect(screen.getByText("Salad").tagName).toBe("LI");
+    expect(chipOf("Salad").tagName).toBe("LI");
   });
 
   it("takes an accessible name for a chip whose text is a bare figure", () => {

package/src/components/hue-chip.tsx

@@ -86,14 +86,17 @@ export function HueChip({
     <Tag
       aria-label={ariaLabel}
       className={cn(
-        "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[11.5px] text-foreground",
+        // One line, and never wider than its row: a chip that wraps grows past
+        // its 28px and paints over its neighbours; a chip that overflows pushes
+        // the row. The label ellipsises instead.
+        "inline-flex h-7 min-w-0 max-w-full items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 text-[11.5px] text-foreground",
         !hue && "bg-muted",
         className
       )}
       style={hue ? { backgroundColor: hueTint(hue, tone, base) } : undefined}
     >
       {icon}
-      {children}
+      <span className="min-w-0 truncate">{children}</span>
     </Tag>
   );
 }

package/src/components/item.tsx

@@ -20,7 +20,10 @@ const itemVariants = cva(
         lg: "px-5 py-4",
       },
       interactive: {
-        true: "cursor-pointer hover:bg-accent hover:text-accent-foreground active:scale-[0.99]",
+        // The surface tint a hover is, not the brand fill: `bg-accent` here is
+        // the brown, and a row that inverts under the cursor loses its muted
+        // description. Same step the buttons take (`--accent-subtle`).
+        true: "cursor-pointer hover:bg-accent-subtle hover:border-accent/40 active:bg-muted active:scale-[0.99]",
         false: "",
       },
     },

package/src/components/menu-family-block.stories.tsx

@@ -61,6 +61,18 @@ export const Default: Story = {
   args: { family: { ...mockFamilyBlock, photoUrls: PHOTOS } },
 };
 
+/** The phone card at every width — for a desktop rail where the two-column card is too wide to scan. */
+export const Compact: Story = {
+  args: { family: { ...mockFamilyBlock, photoUrls: PHOTOS }, variant: "compact" },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 /**
  * No photographs: the mosaic ground with the family's initial, never a grey box.
  * A missing photograph is not a broken image, and a placeholder makes a real