@bearmenu/ui 0.8.11 → 0.8.12

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

@@ -52,7 +52,7 @@ type MenuIntentHeroProps = {
      * Finished CSS gradient for the ground, e.g. `linear-gradient(140deg, …)`.
      *
      * A gradient rather than a token name, for the same reason `<MenuField>` and
-     * `<MenuIntentTiles>` take one: the hue tables are app-owned, and a component
+     * `<MenuFamilyTiles>` take one: the hue tables are app-owned, and a component
      * referencing `var(--h-pizza)` renders an unstyled panel in any consumer that
      * does not define it. Missing, the panel falls back to the foreground colour
      * — visibly unstyled rather than white text on white.

package/dist/components/menu-mocks.d.ts

@@ -1,4 +1,4 @@
-import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuIntentTile, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
+import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFamilyTile, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
 import { PlacePreview } from './place-types.js';
 import 'react';
 
@@ -36,7 +36,14 @@ declare const mockConcept: MenuConceptPreview;
 declare const mockFamily: MenuFamilyPreview;
 /** The drinks counterpart, and the reason `chip.count` is optional. */
 declare const mockDrinkFamily: MenuFamilyPreview;
-declare const mockIntentTiles: MenuIntentTile[];
+/**
+ * The hub's seven cuisines, in the registry's order. The photograph is a
+ * venue's, never a plate's; the last one ships without, so the story shows
+ * the initial fallback beside six real tiles.
+ */
+declare const mockFamilyTiles: MenuFamilyTile[];
+/** The closing tile: stone, so it reads as the index and not as an eighth cuisine. */
+declare const mockFamilyTilesAll: MenuFamilyTile;
 /** Formatters the stories pass. Real callers inject locale-aware ones. */
 declare const mockFormatters: {
     price: (value: number) => string;
@@ -87,4 +94,4 @@ declare const mockFamilyBlock: MenuFamilyBlockPreview;
 declare const mockBareFamilyBlock: MenuFamilyBlockPreview;
 declare const mockQa: QaItem[];
 
-export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockIntentTiles, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockPlaces, mockQa, mockVenues };
+export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFamilyTiles, mockFamilyTilesAll, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockPlaces, mockQa, mockVenues };

package/dist/components/menu-mocks.js

@@ -330,15 +330,27 @@ var mockDrinkFamily = {
   price_median: 28,
   venue_photo_urls: []
 };
-var intentGradient = (hue) => `linear-gradient(150deg, oklch(0.52 0.14 ${hue}), oklch(0.43 0.13 ${hue - 4}))`;
-var mockIntentTiles = [
-  { slug: "italian", label: "Italian tonight", caption: "247 kitchens", href: "/top/italian?open=now", gradient: intentGradient(40) },
-  { slug: "burgeri", label: "Burgers", caption: "229 kitchens", href: "/top/burgeri", gradient: intentGradient(25) },
-  { slug: "restaurante", label: "Open right now", caption: "by the hour", href: "/top/restaurante?open=now", gradient: intentGradient(60) },
-  { slug: "brunch", label: "Brunch", caption: "314 kitchens", href: "/top/brunch", gradient: intentGradient(75) },
-  { slug: "vegan", label: "Vegan", caption: "108 kitchens", href: "/top/vegan", gradient: intentGradient(148) },
-  { slug: "centru", label: "In Centru", caption: "by neighbourhood", href: "/top/centru", gradient: intentGradient(300) }
+var familyGradient = (hue) => `linear-gradient(150deg, oklch(0.52 0.14 ${hue}), oklch(0.43 0.13 ${hue - 4}))`;
+var familyPhoto = (hue) => "data:image/svg+xml;utf8," + encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 28% 60%)"/><stop offset="1" stop-color="hsl(${hue} 22% 26%)"/></linearGradient></defs><rect width="320" height="320" fill="url(#g)"/><circle cx="100" cy="110" r="56" fill="hsl(${hue} 40% 82%)" opacity=".55"/><rect x="170" y="190" width="120" height="90" fill="hsl(${hue} 15% 18%)" opacity=".7"/></svg>`
+);
+var mockFamilyTiles = [
+  { slug: "italian", label: "Italian", countLabel: "66", href: "/menu/cuisines/italian", gradient: familyGradient(38), photoUrl: familyPhoto(30) },
+  { slug: "romanian", label: "Romanian", countLabel: "64", href: "/menu/cuisines/romanian", gradient: familyGradient(25), photoUrl: familyPhoto(10) },
+  { slug: "breakfast-brunch", label: "Breakfast & brunch", countLabel: "64", href: "/menu/cuisines/breakfast-brunch", gradient: familyGradient(82), photoUrl: familyPhoto(45) },
+  { slug: "vegetarian", label: "Vegetarian", countLabel: "64", href: "/menu/cuisines/vegetarian", gradient: familyGradient(148), photoUrl: familyPhoto(120) },
+  { slug: "pizza", label: "Pizza", countLabel: "63", href: "/menu/cuisines/pizza", gradient: familyGradient(58), photoUrl: familyPhoto(20) },
+  { slug: "vegan", label: "Vegan", countLabel: "38", href: "/menu/cuisines/vegan", gradient: familyGradient(135), photoUrl: familyPhoto(100) },
+  { slug: "bakery", label: "Bakeries & patisseries", countLabel: "65", href: "/menu/cuisines/bakery", gradient: familyGradient(72) }
 ];
+var mockFamilyTilesAll = {
+  slug: "all",
+  label: "All 38 cuisines",
+  countLabel: "The full index",
+  href: "/menu/cuisines",
+  gradient: "linear-gradient(150deg, oklch(0.50 0.03 70), oklch(0.40 0.028 64))",
+  photoUrl: familyPhoto(60)
+};
 var mockFormatters = {
   price: (value) => `${value} lei`,
   number: (value) => value.toLocaleString("en-US"),
@@ -501,4 +513,4 @@ var mockQa = [
   }
 ];
 
-export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockIntentTiles, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockPlaces, mockQa, mockVenues };
+export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFamilyTiles, mockFamilyTilesAll, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockPlaces, mockQa, mockVenues };

package/dist/components/menu-types.d.ts

@@ -126,6 +126,20 @@ type MenuConceptRow = {
     featured?: boolean;
     /** Portion, already formatted with its unit, e.g. "260g". */
     portion_label?: string;
+    /**
+     * What this room WON — "CHEAPEST", "MOST NAMED", "HIGHEST GRADE",
+     * "DEAREST" — already localised. A card whose rooms are four winners rather
+     * than four ranks sets one per room; without it the card falls back to
+     * "cheapest, then #2, #3, #4".
+     */
+    badge?: string;
+    /** Which figure the badge is about; that figure is emphasised. */
+    lead?: 'price' | 'mentions' | 'grade';
+    /**
+     * The venue's BearMenu grade, pre-formatted ("9.2"). Takes the star's
+     * place beside the kitchen's name; `rating` (Google's) shows only without it.
+     */
+    grade?: string;
 };
 /**
  * A browsable grouping of venues — a cuisine on the dishes tab, a drink family
@@ -190,17 +204,21 @@ type MenuVenueSignature = {
     isSignature?: boolean;
 };
 /**
- * An intent tile — a family plus a constraint, resolving to a category page.
+ * A family tile — a cuisine on the dishes tab, a going-out family on the
+ * drinks tab — as the hub's doorway grid draws it: a hue, a name, a venue
+ * count and one venue's photograph.
  *
- * Only about thirty-two of the thirty-eight cuisines have a page, so `href` is
- * required: a tile that cannot resolve to a real destination is not rendered
- * rather than linking nowhere.
+ * `href` is required: a tile that cannot resolve to a real destination is not
+ * rendered rather than linking nowhere.
  */
-type MenuIntentTile = {
+type MenuFamilyTile = {
     slug: string;
     label: string;
-    /** Supporting line, e.g. "247 kitchens". Already formatted by the caller. */
-    caption?: string;
+    /**
+     * The venue count, already formatted by the caller — "64", "1,204" — because
+     * thousands separators are locale-dependent and the DS owns no locale.
+     */
+    countLabel?: string;
     href: string;
     /**
      * Finished CSS gradient for the tile's ground, e.g.
@@ -213,8 +231,8 @@ type MenuIntentTile = {
      * — visible and obviously unstyled, rather than white text on white.
      */
     gradient?: string;
-    /** Icon node, resolved by the caller — the DS does not pick icons for it. */
-    icon?: ReactNode;
+    /** Pre-resolved VENUE photograph. Venue photography is real; item photography is not. */
+    photoUrl?: string;
 };
 /**
  * One figure in the intent hero — a number the reader can tap to filter by.
@@ -333,6 +351,11 @@ type MenuIndexEntry = {
     slug: string;
     name: string;
     count: number;
+    /**
+     * `count`, already formatted ("1,204"). The list is a client component and a
+     * formatter cannot cross into it from a server caller; a string can.
+     */
+    countLabel?: string;
     href: string;
     /** Finished CSS gradient for the mark. Falls back to the border colour. */
     gradient?: string;
@@ -418,4 +441,4 @@ type MenuHubLabels = {
     until: string;
 };
 
-export { type MenuConceptPreview, type MenuConceptRow, type MenuFamilyBlockPreview, type MenuFamilyChip, type MenuFamilyPreview, type MenuFilterChip, type MenuFormatters, type MenuHubLabels, type MenuIndexEntry, type MenuIntentFigure, type MenuIntentTile, type MenuItemPlaceRef, type MenuItemPreview, type MenuKitchenDish, type MenuKitchenPreview, type MenuLinkComponent, type MenuLinkProps, type MenuLoosenOption, MenuSizeAndPrice, type MenuVenuePreview, type MenuVenueSignature, type QaItem };
+export { type MenuConceptPreview, type MenuConceptRow, type MenuFamilyBlockPreview, type MenuFamilyChip, type MenuFamilyPreview, type MenuFamilyTile, type MenuFilterChip, type MenuFormatters, type MenuHubLabels, type MenuIndexEntry, type MenuIntentFigure, type MenuItemPlaceRef, type MenuItemPreview, type MenuKitchenDish, type MenuKitchenPreview, type MenuLinkComponent, type MenuLinkProps, type MenuLoosenOption, MenuSizeAndPrice, type MenuVenuePreview, type MenuVenueSignature, type QaItem };

package/dist/components/multi-select-combobox.js

@@ -2,7 +2,7 @@ import { Popover, PopoverTrigger, PopoverContent } from '../chunk-66MAPLXS.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-XNA2INVQ.js';
 import '../chunk-FRPPIXMY.js';
 import { Checkbox } from '../chunk-D5QHEHXJ.js';
-import { Button } from '../chunk-JS3EINZD.js';
+import { Button } from '../chunk-VAXOQS7W.js';
 import '../chunk-R47NEOSI.js';
 import { Badge } from '../chunk-2CXU5WZO.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/native-select.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const nativeSelectVariants: (props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const NativeSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & VariantProps<(props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLSelectElement>>;
 
 export { NativeSelect, nativeSelectVariants };

package/dist/components/pagination.js

@@ -1,4 +1,4 @@
-import { buttonVariants } from '../chunk-JS3EINZD.js';
+import { buttonVariants } from '../chunk-VAXOQS7W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';

package/dist/components/photo-ground.d.ts

@@ -57,8 +57,14 @@ type PhotoGroundProps = {
     overlayClassName?: string;
     /** How eagerly the first photograph loads. `stack` grounds are above the fold. */
     loading?: "lazy" | "eager";
+    /**
+     * Classes on the fallback initial — its size, when the ground is smaller
+     * than a card. The 64px default fills a card cell; a tile's 88px polaroid
+     * passes `text-[44px]`.
+     */
+    glyphClassName?: string;
     className?: string;
 };
-declare function PhotoGround({ photos, initials, mode, active, mosaicClassName, phoneTiles, gradient, overlay, overlayClassName, loading, className, }: PhotoGroundProps): react_jsx_runtime.JSX.Element;
+declare function PhotoGround({ photos, initials, mode, active, mosaicClassName, phoneTiles, gradient, overlay, overlayClassName, loading, glyphClassName, className, }: PhotoGroundProps): react_jsx_runtime.JSX.Element;
 
 export { PHOTO_GROUND, PhotoGround, type PhotoGroundProps };

package/dist/components/photo-ground.js

@@ -1,3 +1,3 @@
-export { PHOTO_GROUND, PhotoGround } from '../chunk-5RWTOT5Y.js';
+export { PHOTO_GROUND, PhotoGround } from '../chunk-CNJQUHCU.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-66MAPLXS.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-XNA2INVQ.js';
 import '../chunk-FRPPIXMY.js';
-import { Button } from '../chunk-JS3EINZD.js';
+import { Button } from '../chunk-VAXOQS7W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/select.d.ts

@@ -7,7 +7,7 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-JS3EINZD.js';
+import { Button } from '../chunk-VAXOQS7W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/snap-rail.d.ts

@@ -22,7 +22,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 declare const snapRailVariants: (props?: ({
     itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
-    gap?: "sm" | "default" | null | undefined;
+    gap?: "default" | "sm" | null | undefined;
     bleed?: "none" | "page" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SnapRailProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof snapRailVariants> & {
@@ -44,7 +44,7 @@ type SnapRailProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof
 };
 declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
-    gap?: "sm" | "default" | null | undefined;
+    gap?: "default" | "sm" | null | undefined;
     bleed?: "none" | "page" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /**

package/dist/components/spinner.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
-    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "destructive" | "primary" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "destructive" | "primary" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;
     removeLabel?: string;

package/dist/components/text.d.ts

@@ -23,10 +23,10 @@ import { VariantProps } from 'class-variance-authority';
  */
 declare const textVariants: (props?: ({
     variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "default" | "inherit" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
-    leading?: "none" | "tight" | "loose" | "normal" | "snug" | "relaxed" | null | undefined;
-    tracking?: "tight" | "normal" | "wide" | "wider" | null | undefined;
+    leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
+    tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label" | "strong" | "em" | "small" | "li" | "dt" | "dd";

package/dist/components/toggle.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 

package/dist/components/venue-grade-dimensions.js

@@ -1,3 +1,3 @@
-export { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-AKQ57NXY.js';
+export { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-ZQ53AGML.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/weekday-theme-banner.d.ts

@@ -26,8 +26,15 @@ type WeekdayThemeBannerLinkProps = {
 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. */
@@ -44,10 +51,24 @@ 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. */
@@ -65,6 +86,6 @@ type WeekdayThemeBannerProps = {
     linkComponent?: React.ComponentType<WeekdayThemeBannerLinkProps>;
     className?: string;
 };
-declare function WeekdayThemeBanner({ days, activeDay, kicker, kickerIcon, body, weekLabel, action, actionNote, dayHref, onDayChange, imageUrl, linkComponent: LinkComponent, className, }: WeekdayThemeBannerProps): react_jsx_runtime.JSX.Element | null;
+declare function WeekdayThemeBanner({ days, activeDay, kicker, kickerIcon, body, weekLabel, action, actionNote, compactAction, dayHref, onDayChange, imageUrl, linkComponent: LinkComponent, className, }: WeekdayThemeBannerProps): react_jsx_runtime.JSX.Element | null;
 
 export { WeekdayThemeBanner, type WeekdayThemeBannerLinkProps, type WeekdayThemeBannerProps, type WeekdayThemeDay };

package/dist/components/weekday-theme-banner.js

@@ -1,5 +1,6 @@
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -15,6 +16,7 @@ function WeekdayThemeBanner({
   weekLabel,
   action,
   actionNote,
+  compactAction,
   dayHref,
   onDayChange,
   imageUrl,
@@ -27,7 +29,9 @@ function WeekdayThemeBanner({
     "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
       ),
       children: [
@@ -45,7 +49,7 @@ function WeekdayThemeBanner({
             "div",
             {
               "aria-hidden": true,
-              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%)]"
             }
           )
         ] }),
@@ -57,18 +61,62 @@ function WeekdayThemeBanner({
             children: active.code
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6", children: [
-          kicker && /* @__PURE__ */ jsxs("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]", children: [
-            kickerIcon,
-            kicker
-          ] }),
-          /* @__PURE__ */ jsx("h3", { className: "font-serif text-[24px] font-semibold tracking-[-0.02em] lg:text-[36px]", children: active.name }),
-          body && /* @__PURE__ */ jsx("p", { className: "max-w-[520px] text-[13.5px] leading-[1.5] opacity-90", children: body }),
-          (action || actionNote) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-3", children: [
-            action,
-            actionNote && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-75", children: actionNote })
-          ] })
-        ] }),
+        compactAction && /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                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)]",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "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"
+            ),
+            children: [
+              kicker && /* @__PURE__ */ jsxs("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", children: [
+                kickerIcon,
+                kicker
+              ] }),
+              /* @__PURE__ */ jsx("h3", { className: "font-serif text-[22px] font-semibold leading-[1.15] tracking-[-0.02em] lg:text-[36px] lg:leading-tight", children: active.shortHeadline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "line-clamp-2 lg:hidden", children: active.shortHeadline }),
+                /* @__PURE__ */ jsx("span", { className: "hidden lg:block", children: active.name })
+              ] }) : active.name }),
+              body && /* @__PURE__ */ jsx("p", { className: "hidden max-w-[520px] text-[13.5px] leading-[1.5] opacity-90 lg:block", children: body }),
+              (action || actionNote) && /* @__PURE__ */ jsxs(
+                "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"
+                  ),
+                  children: [
+                    action,
+                    actionNote && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-75", children: actionNote })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {

package/package.json

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

package/src/components/button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
-import { Heart, Mail, Plus } from "lucide-react";
+import { ArrowRight, Heart, Mail, Plus } from "lucide-react";
 
 const meta = {
   title: "Components/Button",
@@ -19,11 +19,13 @@ const meta = {
         "glass",
         "brown",
         "antagonist",
+        "overlay",
+        "ink",
       ],
     },
     size: {
       control: "select",
-      options: ["default", "sm", "lg", "icon"],
+      options: ["default", "sm", "lg", "pill", "icon"],
     },
   },
 } satisfies Meta<typeof Button>;
@@ -59,6 +61,27 @@ export const Glass: Story = {
   args: { children: "Glass", variant: "glass" },
 };
 
+/** The labelled action on a photo surface: glass on the ink, icon trailing. */
+export const Ink: Story = {
+  args: {
+    children: (
+      <>
+        Open the menu
+        <ArrowRight aria-hidden />
+      </>
+    ),
+    variant: "ink",
+    size: "pill",
+  },
+  decorators: [
+    (Story) => (
+      <div className="rounded-2xl bg-[oklch(0.21_0.012_55)] p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 export const Brown: Story = {
   args: { children: "Brown", variant: "brown" },
 };

package/src/components/button.tsx

@@ -36,6 +36,16 @@ const buttonVariants = cva(
          */
         overlay:
           "bg-black/50 text-white hover:bg-black/65 focus-visible:ring-white/70",
+        /**
+         * The LABELLED action on a photo surface — "Open the menu", "See all
+         * 46 bars", "How we read menus" — where `overlay` is the unlabelled
+         * chrome. Glass on the ink: translucent white with a hairline, white
+         * type. Same reasoning as `overlay`: not theme-aware, because it
+         * contrasts with the photograph, not the canvas. Pair with `size="pill"`.
+         * Icons trail, never lead: `ArrowRight` when it navigates to a page,
+         * `ChevronRight` when it opens a sheet or drawer.
+         */
+        ink: "border border-white/20 bg-white/[0.16] text-white hover:bg-white/25 focus-visible:ring-white/70 focus-visible:ring-offset-0",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:
@@ -46,6 +56,8 @@ const buttonVariants = cva(
         sm: "h-9 rounded-lg px-4",
         default: "h-11 px-6 py-2",
         lg: "h-12 rounded-2xl px-8",
+        /** The `ink` action's shape. Owns the radius so no variant fights it. */
+        pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",
         icon: "h-11 w-11 rounded-full",
         "icon-xs": "h-8 w-8 rounded-full [&_svg]:size-3.5",
         "icon-sm": "h-9 w-9 rounded-full",

package/src/components/colour-dictionary.stories.tsx

@@ -209,7 +209,7 @@ function ColourDictionaryPage() {
         <section>
           <h2 className="text-[15px] font-extrabold">Where the values live</h2>
           <p className="mt-2 text-[13px] leading-[1.55] text-foreground/85">
-            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>MenuIntentTiles</code>) and takes a finished colour as a prop. The palette lives in the fe app: the eighteen <code>--menu-field-*</code> tokens in <code>app/globals.css</code>, <code>FAMILY_HUES</code> and <code>INTENT_GRADIENTS</code> in <code>hub-gradients.ts</code>, category → family in <code>category-colors.ts</code>. The Storybook mocks carry the same values so post-generator films what the app paints.
+            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>MenuFamilyTiles</code>) and takes a finished colour as a prop. The palette lives in the fe app: the eighteen <code>--menu-field-*</code> tokens in <code>app/globals.css</code>, <code>FAMILY_HUES</code> and <code>INTENT_GRADIENTS</code> in <code>hub-gradients.ts</code>, category → family in <code>category-colors.ts</code>. The Storybook mocks carry the same values so post-generator films what the app paints.
           </p>
         </section>
       </div>