@bearmenu/ui 0.8.11 → 0.8.13

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.13",
   "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>

package/src/components/concept-compare.tsx

@@ -79,7 +79,7 @@ export type ConceptCompareFigure = {
 export type ConceptCompareLabels = {
   /** Small caps kicker, e.g. "DISH CONCEPT". */
   kind: string;
-  /** The badge on the lowest-priced room, e.g. "CHEAPEST". */
+  /** The badge on the lowest-priced room, e.g. "CHEAPEST" — the fallback when a row carries no `badge`. */
   cheapest: string;
   /** The badge on every other room, e.g. "#2". Defaults to `#${rank}`. */
   rank?: (rank: number) => string;
@@ -277,7 +277,15 @@ export function ConceptCompare({
         >
           {rooms.map((room, index) => {
             const href = hrefs?.[room.place_slug];
-            const isCheapest = room.price === cheapest;
+            // A winner room says what it won; a ranked room says its rank.
+            // The CHEAPEST badge — and only it — is green with the arrow: it
+            // is the census's signature claim, the one badge a diner scans
+            // for. Gated on the badge, not the price: drink concepts cluster
+            // on price, and a "most named" room at the minimum must not wear
+            // the cheapest's glyph.
+            const badge = room.badge ?? (room.price === cheapest ? labels.cheapest : rankOf(index + 1));
+            const isCheapest = badge === labels.cheapest;
+            const lead = room.lead ?? (isCheapest ? "price" : undefined);
             const roomClass = cn(
               /* Transparent on the phone — the card behind it is the room's
                  photograph — with only its scrim and its line. A photograph of
@@ -312,7 +320,7 @@ export function ConceptCompare({
                   )}
                 >
                   {isCheapest && <ArrowDown className="h-3 w-3 shrink-0" aria-hidden />}
-                  {isCheapest ? labels.cheapest : rankOf(index + 1)}
+                  {badge}
                 </span>
 
                 {/* Name and rating on one line: the pin leads, the name takes
@@ -322,11 +330,25 @@ export function ConceptCompare({
                   <b className="min-w-0 flex-1 truncate text-[15px] font-bold leading-tight">
                     {room.place_name}
                   </b>
-                  {room.rating !== undefined && (
-                    <span className="flex shrink-0 items-center gap-1 text-[12px] text-white/70">
-                      <Star className="h-3 w-3 shrink-0" aria-hidden />
-                      <span className="tabular-nums">{room.rating}</span>
+                  {/* The BearMenu grade, in the grade's amber — the number
+                      the census computed, beside the kitchen it computed it
+                      for. Google's star only for a kitchen with no grade. */}
+                  {room.grade ? (
+                    <span
+                      className={cn(
+                        "shrink-0 text-[14px] font-extrabold leading-none tabular-nums text-[oklch(0.82_0.15_85)]",
+                        lead === "grade" && "text-[16px]"
+                      )}
+                    >
+                      {room.grade}
                     </span>
+                  ) : (
+                    room.rating !== undefined && (
+                      <span className="flex shrink-0 items-center gap-1 text-[12px] text-white/70">
+                        <Star className="h-3 w-3 shrink-0" aria-hidden />
+                        <span className="tabular-nums">{room.rating}</span>
+                      </span>
+                    )
                   )}
                 </span>
                 {room.place_area && (
@@ -343,7 +365,11 @@ export function ConceptCompare({
                     is a 0.32-lightness grey that vanishes on inked photography. */}
                 <Separator className="my-2.5 via-white/20" />
 
-                <span className="flex items-baseline gap-2">
+                {/* The figures: the one the badge is about leads — the badge
+                    says what the room won, the number is the evidence. Green
+                    is the cheapest's alone (a dearest room's price in green
+                    would read as cheap); the other winners lead in full white. */}
+                <span className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                   <b
                     className={cn(
                       "text-[19px] font-bold leading-none tabular-nums tracking-[-0.02em]",
@@ -353,7 +379,12 @@ export function ConceptCompare({
                     {formatPrice(room.price)}
                   </b>
                   {room.mentions !== undefined && room.mentions > 0 && (
-                    <span className="text-[11.5px] text-white/65">
+                    <span
+                      className={cn(
+                        "text-[11.5px]",
+                        lead === "mentions" ? "font-bold text-white" : "text-white/65"
+                      )}
+                    >
                       {labels.mentions(room.mentions)}
                     </span>
                   )}

package/src/components/item.tsx

@@ -52,63 +52,87 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
 );
 Item.displayName = "Item";
 
-const ItemMedia = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-media"
-      className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
-      {...props}
-    />
-  )
+/**
+ * The parts take `asChild` too. An `Item asChild` around a `<button>` makes
+ * the parts the button's children, and a button may hold only phrasing
+ * content — so the parts have to be able to render as `<span>`s there.
+ */
+type ItemPartProps = React.HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+};
+
+const ItemMedia = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-media"
+        className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemMedia.displayName = "ItemMedia";
 
-const ItemContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-content"
-      className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
-      {...props}
-    />
-  )
+const ItemContent = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-content"
+        className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemContent.displayName = "ItemContent";
 
-const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-title"
-      className={cn("truncate text-sm font-semibold text-foreground", className)}
-      {...props}
-    />
-  )
+const ItemTitle = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-title"
+        className={cn("truncate text-sm font-semibold text-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemTitle.displayName = "ItemTitle";
 
-const ItemDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-description"
-      className={cn("truncate text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
+const ItemDescription = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-description"
+        className={cn("truncate text-xs text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemDescription.displayName = "ItemDescription";
 
-const ItemActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-actions"
-      className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
-      {...props}
-    />
-  )
+const ItemActions = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-actions"
+        className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemActions.displayName = "ItemActions";
 

package/src/components/kitchen-dossier.tsx

@@ -72,6 +72,8 @@ export type KitchenDossierLabels = {
   next: string;
   /** Dimension key → translated label. */
   dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+  /** Beside the grade in the title row, e.g. "/10". Omit for the bare numeral. */
+  gradeUnit?: string;
 };
 
 export type KitchenDossierProps = {
@@ -202,25 +204,18 @@ export function KitchenDossier({
         .sort((a, b) => (dimensions[b] ?? 0) - (dimensions[a] ?? 0))
         .slice(0, DIMENSION_LIMIT)
     : [];
-  if (grade && (grade.overall || strongest.length > 0)) {
+  // The overall grade leads the title row now, so the part shows what the
+  // title cannot: the three strongest dimensions. No numeral repeated.
+  if (dimensions && strongest.length > 0) {
     parts.push(
       <Part key="grade" kicker={labels.theGrade}>
-        <div className="flex items-end gap-4">
-          {grade.overall && (
-            <span className="text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums text-[oklch(0.82_0.15_85)]">
-              {grade.overall}
-            </span>
-          )}
-          {dimensions && strongest.length > 0 && (
-            <VenueGradeDimensions
-              className="min-w-0 flex-1"
-              dimensions={dimensions}
-              labels={labels.dimensions}
-              order={strongest}
-              formatScore={formatScore}
-            />
-          )}
-        </div>
+        <VenueGradeDimensions
+          className="min-w-0"
+          dimensions={dimensions}
+          labels={labels.dimensions}
+          order={strongest}
+          formatScore={formatScore}
+        />
       </Part>
     );
   }
@@ -281,16 +276,42 @@ export function KitchenDossier({
                   {place.name}
                 </LinkComponent>
               </h3>
-              {rating !== undefined && (
-                <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
-                  {rating.toFixed(1)}
-                  <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+              {/* The GRADE leads — the number the rail is named for, in the
+                  grade's amber. Google's star used to sit here while the
+                  grade waited in story part three; a card rated by BearMenu
+                  cannot lead with a number BearMenu did not compute. The
+                  star drops to the meta line, and the title row only falls
+                  back to it for a kitchen with no grade. */}
+              {grade?.overall ? (
+                <span className="inline-flex shrink-0 items-baseline gap-1 text-[22px] font-extrabold leading-none tabular-nums text-[oklch(0.82_0.15_85)] lg:text-[26px]">
+                  {grade.overall}
+                  {labels.gradeUnit && (
+                    <span className="text-[11px] font-bold text-white/70">{labels.gradeUnit}</span>
+                  )}
                 </span>
+              ) : (
+                rating !== undefined && (
+                  <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
+                    {rating.toFixed(1)}
+                    <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+                  </span>
+                )
               )}
             </div>
-            {(meta || labels.reviewCount) && (
-              <p className="mt-1 truncate text-[12.5px] text-white/70">
-                {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+            {(meta || labels.reviewCount || (grade?.overall && rating !== undefined)) && (
+              <p className="mt-1 flex min-w-0 items-center gap-1 text-[12.5px] text-white/70">
+                {(meta || labels.reviewCount) && (
+                  <span className="truncate">
+                    {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+                  </span>
+                )}
+                {grade?.overall && rating !== undefined && (
+                  <span className="inline-flex shrink-0 items-center gap-1 tabular-nums">
+                    {(meta || labels.reviewCount) && <span aria-hidden>·</span>}
+                    {rating.toFixed(1)}
+                    <Star className="h-3 w-3" aria-hidden />
+                  </span>
+                )}
               </p>
             )}
           </div>