@bearmenu/ui 0.8.11 → 0.8.13

package/src/components/weekday-theme-banner.tsx

@@ -1,3 +1,4 @@
+import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils";
 
 /**
@@ -32,8 +33,15 @@ function DefaultLink({ href, ...props }: WeekdayThemeBannerLinkProps) {
 export type WeekdayThemeDay = {
   /** Short code, e.g. "THU". Already localised. */
   code: string;
-  /** Theme name, e.g. "Burger Thursday". */
+  /** Theme name, e.g. "Burger Thursday in Cluj". */
   name: string;
+  /**
+   * The phone's title, e.g. "Burger Thursday" — one line where `name` takes
+   * two, so the photograph behind it stays a photograph. A separate string,
+   * never `name` with a clause stripped: word order is the locale's. Falls
+   * back to `name`.
+   */
+  shortHeadline?: string;
   /** Short form for the rail, e.g. "Burger". Falls back to `name`. */
   shortName?: string;
   /** Items under the theme. Omit where there is no count to show. */
@@ -51,10 +59,21 @@ export type WeekdayThemeBannerProps = {
   body?: string;
   /** Heading over the week rail, e.g. "THE WEEK". */
   weekLabel?: string;
-  /** The primary action — pass a rendered button or link. */
+  /**
+   * The primary action — pass a rendered button or link. From `lg` up only
+   * when `compactAction` is also given: on a phone the banner is a row, and a
+   * row does not carry a labelled button.
+   */
   action?: React.ReactNode;
   /** Note beside the action, e.g. "Bruno picks nine, ranked on mentions". */
   actionNote?: string;
+  /**
+   * The phone's action: the whole banner becomes the target and a chevron on
+   * the right is the signal — a disclosure row, not a call to action, so the
+   * banner stays as tall as its title. `label` names the target for a screen
+   * reader. Hidden from `lg`, where `action` takes over.
+   */
+  compactAction?: { label: string; onClick: () => void };
   /** Destination per day index. Renders the rail as links. */
   dayHref?: (day: WeekdayThemeDay, index: number) => string;
   /** Selects a day in place. Renders the rail as buttons. */
@@ -82,6 +101,7 @@ export function WeekdayThemeBanner({
   weekLabel,
   action,
   actionNote,
+  compactAction,
   dayHref,
   onDayChange,
   imageUrl,
@@ -94,7 +114,9 @@ export function WeekdayThemeBanner({
   return (
     <div
       className={cn(
-        "relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white lg:grid-cols-[1fr_auto]",
+        // A plate needs a ~2.8:1 window to read on a phone; the text alone
+        // would give it ~85px.
+        "group relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white max-lg:min-h-[128px] lg:grid-cols-[1fr_auto]",
         className
       )}
     >
@@ -108,17 +130,19 @@ export function WeekdayThemeBanner({
             className="absolute inset-0 h-full w-full object-cover"
           />
           {/*
-            The scrim covers the WHOLE banner, not just the text side.
-            It used to fade to near-transparent on the right, which looked
-            better in isolation and made the week rail — seven lines of 12px
-            type — sit directly on whatever the plate happened to be. A photo
-            you can half-read under is worth less than seven labels you can
-            read. Still a gradient rather than a flat wash, so the image keeps
-            some depth on the right.
+            Two scrims. From `lg` it covers the WHOLE banner, not just the
+            text side: it used to fade to near-transparent on the right, which
+            looked better in isolation and made the week rail — seven lines of
+            12px type — sit directly on whatever the plate happened to be.
+
+            On a phone there is no rail, the title is one line in the left
+            64%, and the plates are composed centre-right — so the ramp is
+            dense under the text and clears to 0.2 by the right edge, and the
+            part of the photograph that carries it is the part that shows.
           */}
           <div
             aria-hidden
-            className="absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
+            className="absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.85)_0%,oklch(0.18_0.03_45_/_0.45)_48%,oklch(0.18_0.03_45_/_0.2)_100%)] lg:bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
           />
         </>
       )}
@@ -132,22 +156,75 @@ export function WeekdayThemeBanner({
         </span>
       )}
 
-      <div className="relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6">
+      {/* The phone's target: the whole banner, the chevron as the signal.
+          Above the rail's ground and the scrim, below nothing — the week rail
+          is `lg` only, so there is no other control to cover on a phone. */}
+      {compactAction && (
+        <button
+          type="button"
+          aria-label={compactAction.label}
+          onClick={compactAction.onClick}
+          className="absolute inset-0 z-[2] rounded-[18px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70 lg:hidden"
+        >
+          <span
+            aria-hidden
+            // The scrim's own ink rather than glass: the chevron sits where
+            // the scrim has cleared to 0.2, and white glass on a bright plate
+            // would vanish. Chrome on a photograph, the `overlay` rule.
+            className="absolute right-4 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-[oklch(0.18_0.03_45_/_0.55)] text-white transition-colors [@media(pointer:coarse)]:group-active:bg-[oklch(0.18_0.03_45_/_0.75)]"
+          >
+            <ChevronRight className="h-5 w-5" />
+          </span>
+        </button>
+      )}
+
+      <div
+        className={cn(
+          "relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6",
+          // On a phone the text keeps to the left 64% — the photograph gets
+          // the rest, and the chevron sits in it — and centres in the row.
+          imageUrl && "max-lg:max-w-[64%] max-lg:justify-center max-lg:gap-1.5",
+          // Without a photograph the text may run wide; keep it off the
+          // chevron. With one, the 36% beside the column already holds it.
+          compactAction && !imageUrl && "max-lg:pr-16"
+        )}
+      >
+        {/* A plain line on the phone, the pill from `lg`: one less box on
+            the photograph. */}
         {kicker && (
-          <span className="inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[10.5px] font-bold tracking-[0.09em]">
+          <span className="inline-flex w-max items-center gap-1.5 text-[10.5px] font-bold tracking-[0.09em] text-white/75 lg:rounded-full lg:bg-white/15 lg:px-2.5 lg:py-1 lg:text-white">
             {kickerIcon}
             {kicker}
           </span>
         )}
 
-        <h3 className="font-serif text-[24px] font-semibold tracking-[-0.02em] lg:text-[36px]">
-          {active.name}
+        {/* The phone's title is the short one — one line expected, two
+            allowed, never cut. Both render; the breakpoint picks. */}
+        <h3 className="font-serif text-[22px] font-semibold leading-[1.15] tracking-[-0.02em] lg:text-[36px] lg:leading-tight">
+          {active.shortHeadline ? (
+            <>
+              <span className="line-clamp-2 lg:hidden">{active.shortHeadline}</span>
+              <span className="hidden lg:block">{active.name}</span>
+            </>
+          ) : (
+            active.name
+          )}
         </h3>
 
-        {body && <p className="max-w-[520px] text-[13.5px] leading-[1.5] opacity-90">{body}</p>}
+        {body && (
+          <p className="hidden max-w-[520px] text-[13.5px] leading-[1.5] opacity-90 lg:block">
+            {body}
+          </p>
+        )}
 
         {(action || actionNote) && (
-          <div className="mt-1 flex flex-wrap items-center gap-3">
+          <div
+            className={cn(
+              "mt-1 flex flex-wrap items-center gap-3",
+              // With a compact action the phone has its chevron instead.
+              compactAction && "hidden lg:flex"
+            )}
+          >
             {action}
             {actionNote && <span className="text-xs opacity-75">{actionNote}</span>}
           </div>

package/dist/components/menu-intent-tiles.d.ts

@@ -1,31 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MenuIntentTile, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import 'react';
-import './place-types.js';
-
-/**
- * MenuIntentTiles — the sentence people arrive with, as six coloured tiles.
- *
- * An intent is a family plus a constraint: Italian *tonight*, burgers, coffee.
- * Each tile is a destination, so `href` is required on the view model — a
- * category page that does not exist is filtered out by the caller rather than
- * rendered as a tile that links nowhere. Roughly thirty-two of thirty-eight
- * cuisines have a page, so that case is normal, not exceptional.
- *
- * The icon is a watermark bleeding off the bottom-right corner at low opacity,
- * not a badge: it gives the tile a silhouette to be recognised by in a rail
- * without competing with the label. It is `aria-hidden` — the label already
- * says what the tile is.
- *
- * Server-safe.
- */
-/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
-type MenuIntentTilesLinkProps = MenuLinkProps;
-type MenuIntentTilesProps = {
-    tiles: MenuIntentTile[];
-    linkComponent?: MenuLinkComponent;
-    className?: string;
-};
-declare function MenuIntentTiles({ tiles, linkComponent: LinkComponent, className, }: MenuIntentTilesProps): react_jsx_runtime.JSX.Element;
-
-export { MenuIntentTiles, type MenuIntentTilesLinkProps, type MenuIntentTilesProps };

package/dist/components/menu-intent-tiles.js

@@ -1,50 +0,0 @@
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { ChevronRight } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function DefaultLink(_a) {
-  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
-  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
-}
-function MenuIntentTiles({
-  tiles,
-  linkComponent: LinkComponent = DefaultLink,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "grid grid-cols-2 gap-3 lg:grid-cols-6 lg:gap-3.5",
-        className
-      ),
-      children: tiles.map((tile) => /* @__PURE__ */ jsxs(
-        LinkComponent,
-        {
-          href: tile.href,
-          className: "relative flex min-h-[110px] flex-col overflow-hidden rounded-2xl bg-muted p-3.5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 lg:min-h-[124px] lg:px-3.5 lg:pb-3.5 lg:pt-[15px]",
-          style: tile.gradient ? { backgroundImage: tile.gradient } : void 0,
-          children: [
-            tile.icon && /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute -bottom-2.5 -right-1.5 z-0 opacity-[0.22] [&>svg]:h-[62px] [&>svg]:w-[62px]",
-                children: tile.icon
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "relative z-[1] flex h-full flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em]", children: tile.label }),
-              tile.caption && /* @__PURE__ */ jsx("span", { className: "mt-[3px] text-[11.5px] leading-[1.35]", children: tile.caption }),
-              /* @__PURE__ */ jsx(ChevronRight, { className: "mt-auto h-4 w-4 opacity-85", "aria-hidden": true })
-            ] })
-          ]
-        },
-        tile.slug
-      ))
-    }
-  );
-}
-
-export { MenuIntentTiles };

package/src/components/menu-intent-tiles.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Beef, Coffee, Leaf, MapPin, Pizza, UtensilsCrossed } from "lucide-react";
-import { MenuIntentTiles } from "./menu-intent-tiles";
-import { mockIntentTiles } from "./menu-mocks";
-
-const icons = [Pizza, Beef, Coffee, UtensilsCrossed, Leaf, MapPin];
-const tiles = mockIntentTiles.map((tile, index) => {
-  const Icon = icons[index];
-  return { ...tile, icon: <Icon /> };
-});
-
-const meta: Meta<typeof MenuIntentTiles> = {
-  title: "Menu/MenuIntentTiles",
-  component: MenuIntentTiles,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[1100px] bg-background p-4">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The sentence people arrive with, as six coloured tiles. An intent is a family plus a constraint — Italian *tonight*, burgers, coffee — and each tile is a destination, so `href` is required on the view model: a category page that does not exist is filtered out by the caller rather than rendered as a tile linking nowhere. Roughly thirty-two of thirty-eight cuisines have a page, so that is the normal case, not the edge one.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof MenuIntentTiles>;
-
-export const Default: Story = { args: { tiles } };
-
-/** Two-up on a phone, six-up from `lg`. */
-export const Mobile: Story = {
-  args: { tiles },
-  decorators: [
-    (Story) => (
-      <div className="w-[390px] bg-background p-3">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-/** Without icons the tiles still read — the watermark is recognition, not information. */
-export const WithoutIcons: Story = { args: { tiles: mockIntentTiles } };
-
-/** Fewer tiles than a full row: the grid does not stretch them. */
-export const Partial: Story = { args: { tiles: tiles.slice(0, 3) } };

package/src/components/menu-intent-tiles.tsx

@@ -1,76 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { cn } from "../lib/utils";
-import type { MenuIntentTile, MenuLinkProps, MenuLinkComponent } from "./menu-types";
-
-/**
- * MenuIntentTiles — the sentence people arrive with, as six coloured tiles.
- *
- * An intent is a family plus a constraint: Italian *tonight*, burgers, coffee.
- * Each tile is a destination, so `href` is required on the view model — a
- * category page that does not exist is filtered out by the caller rather than
- * rendered as a tile that links nowhere. Roughly thirty-two of thirty-eight
- * cuisines have a page, so that case is normal, not exceptional.
- *
- * The icon is a watermark bleeding off the bottom-right corner at low opacity,
- * not a badge: it gives the tile a silhouette to be recognised by in a rail
- * without competing with the label. It is `aria-hidden` — the label already
- * says what the tile is.
- *
- * Server-safe.
- */
-
-/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
-export type MenuIntentTilesLinkProps = MenuLinkProps;
-
-function DefaultLink({ href, ...props }: MenuIntentTilesLinkProps) {
-  return <a href={href} {...props} />;
-}
-
-export type MenuIntentTilesProps = {
-  tiles: MenuIntentTile[];
-  linkComponent?: MenuLinkComponent;
-  className?: string;
-};
-
-export function MenuIntentTiles({
-  tiles,
-  linkComponent: LinkComponent = DefaultLink,
-  className,
-}: MenuIntentTilesProps) {
-  return (
-    <div
-      className={cn(
-        "grid grid-cols-2 gap-3 lg:grid-cols-6 lg:gap-3.5",
-        className
-      )}
-    >
-      {tiles.map((tile) => (
-        <LinkComponent
-          key={tile.slug}
-          href={tile.href}
-          className="relative flex min-h-[110px] flex-col overflow-hidden rounded-2xl bg-muted p-3.5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 lg:min-h-[124px] lg:px-3.5 lg:pb-3.5 lg:pt-[15px]"
-          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
-        >
-          {tile.icon && (
-            <span
-              aria-hidden
-              className="pointer-events-none absolute -bottom-2.5 -right-1.5 z-0 opacity-[0.22] [&>svg]:h-[62px] [&>svg]:w-[62px]"
-            >
-              {tile.icon}
-            </span>
-          )}
-
-          <span className="relative z-[1] flex h-full flex-col">
-            <span className="text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em]">
-              {tile.label}
-            </span>
-            {tile.caption && (
-              <span className="mt-[3px] text-[11.5px] leading-[1.35]">{tile.caption}</span>
-            )}
-            <ChevronRight className="mt-auto h-4 w-4 opacity-85" aria-hidden />
-          </span>
-        </LinkComponent>
-      ))}
-    </div>
-  );
-}