@bearmenu/ui 0.8.9 → 0.8.10

package/dist/components/menu-filter-chips.js

@@ -0,0 +1,122 @@
+import { ScrollFade } from '../chunk-2XCZJWTV.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { X } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function MenuFilterChips({
+  chips,
+  onToggle,
+  unitLabel,
+  onMore,
+  moreLabel,
+  moreIcon,
+  onMorePointerDown,
+  formatCount = String,
+  ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center gap-2", className), children: [
+    unitLabel && /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 pr-0.5 text-[11px] font-extrabold uppercase tracking-[0.1em] text-muted-foreground lg:inline", children: unitLabel }),
+    /* @__PURE__ */ jsx(
+      ScrollFade,
+      {
+        orientation: "horizontal",
+        size: "sm",
+        className: "min-w-0 flex-1",
+        scrollClassName: "scrollbar-hide",
+        children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": ariaLabel, children: chips.map((chip) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            chip,
+            onToggle: () => onToggle(chip.key),
+            formatCount
+          },
+          chip.key
+        )) })
+      }
+    ),
+    onMore && /* @__PURE__ */ jsxs(Fragment, { children: [
+      moreIcon && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onMore,
+          onPointerDown: onMorePointerDown,
+          "aria-label": moreLabel,
+          "aria-haspopup": "dialog",
+          className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden",
+          children: moreIcon
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onMore,
+          className: cn(
+            "shrink-0 rounded-md pl-2 text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+            moreIcon && "hidden lg:inline"
+          ),
+          children: moreLabel
+        }
+      )
+    ] })
+  ] });
+}
+function Chip({
+  chip,
+  onToggle,
+  formatCount
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-pressed": chip.active,
+      className: cn(
+        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        chip.active ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]" : "border-border bg-card text-foreground hover:border-accent/40",
+        // Dimmed, never disabled — pressing it is how the reader finds out
+        // which active filter is in the way.
+        chip.empty && "opacity-45"
+      ),
+      children: [
+        chip.icon,
+        chip.label,
+        chip.count !== void 0 && /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", chip.active ? "text-accent" : "text-muted-foreground"), children: formatCount(chip.count) }),
+        chip.active && /* @__PURE__ */ jsx(X, { className: "h-3 w-3 shrink-0", "aria-hidden": true })
+      ]
+    }
+  );
+}
+function MenuFilterSummary({
+  summary,
+  clearLabel,
+  onClear,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2.5 pt-3.5", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground [&_b]:font-bold [&_b]:text-foreground", children: summary }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        className: "ml-auto shrink-0 rounded-md text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        children: clearLabel
+      }
+    )
+  ] });
+}
+var CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
+function MenuFilterChipsSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 overflow-hidden", className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[92px] shrink-0" }),
+    CHIP_WIDTHS.map((width, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-9 shrink-0 rounded-full", style: { width } }, index))
+  ] });
+}
+
+export { MenuFilterChips, MenuFilterChipsSkeleton, MenuFilterSummary };

package/dist/components/menu-group-rows.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuGroupRows — what an intent consists of.
+ *
+ * On a cuisine page this is the `dish_groups` facet narrowed by the cuisine
+ * ("Pizza · 120 kitchens · 30–68"); on a going-out page it is the digest tags
+ * and graded strengths ("Cocktails · 63 places"). One component for both,
+ * because both are the same object: a facet value, its venue count, and a range.
+ *
+ * ## The counts are VENUES, and the label has to say so
+ *
+ * There is no endpoint that counts dishes per cuisine — `/dishes` accepts
+ * `cuisine_slugs` and ignores it — so "120" here is a hundred and twenty
+ * kitchens that make a pizza, not a hundred and twenty pizzas. The `meta` line
+ * is composed by the caller precisely so that it can say which, in a language
+ * where the two words differ.
+ *
+ * ## Not `<ConceptCard>`
+ *
+ * That one is a cover-led card for a thing with a date and a venue. This is a
+ * row in a sidebar: a hue bar, a name, a count and a range. Giving it a cover
+ * would mean finding a photograph of "pasta", which is the kind of picture that
+ * makes a page look generated.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+type MenuGroupRowsLinkProps = MenuLinkProps;
+type MenuGroupRow = {
+    slug: string;
+    name: string;
+    /** Venue count line, e.g. "120 kitchens". Pluralised by the caller. */
+    meta: string;
+    /** Price range, already formatted, e.g. "30—68". Omitted where none is known. */
+    rangeLabel?: string;
+    href?: string;
+    /** Finished CSS gradient for the bar. A missing one falls back to the border colour. */
+    gradient?: string;
+};
+type MenuGroupRowsProps = {
+    rows: MenuGroupRow[];
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuGroupRows({ rows, linkComponent: LinkComponent, className, }: MenuGroupRowsProps): react_jsx_runtime.JSX.Element;
+declare function MenuGroupRowsSkeleton({ rows, className, }: {
+    rows?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { type MenuGroupRow, MenuGroupRows, type MenuGroupRowsLinkProps, type MenuGroupRowsProps, MenuGroupRowsSkeleton };

package/dist/components/menu-group-rows.js

@@ -0,0 +1,67 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MenuGroupRows({
+  rows,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col", className), children: rows.map((row) => {
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "h-[34px] w-2 shrink-0 rounded-full",
+            !row.gradient && "bg-border"
+          ),
+          style: row.gradient ? { backgroundImage: row.gradient } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-bold", children: row.name }),
+        /* @__PURE__ */ jsx("span", { className: "mt-px block truncate text-[11.5px] text-muted-foreground", children: row.meta })
+      ] }),
+      row.rangeLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs tabular-nums text-muted-foreground", children: row.rangeLabel }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true })
+    ] });
+    return /* @__PURE__ */ jsx("li", { className: "border-t border-border first:border-t-0", children: row.href ? /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href: row.href,
+        className: "flex items-center gap-3 py-3 transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none",
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-3 py-3", children: body }) }, row.slug);
+  }) });
+}
+function MenuGroupRowsSkeleton({
+  rows = 5,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 border-t border-border py-3 first:border-t-0",
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[34px] w-2 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-[50%]" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[35%]" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[52px]" })
+      ]
+    },
+    index
+  )) });
+}
+
+export { MenuGroupRows, MenuGroupRowsSkeleton };

package/dist/components/menu-index-header.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuIndexEntry, MenuLinkComponent } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+type MenuIndexHeaderProps = {
+    /** Small caps over the title, e.g. "MENU · CLUJ-NAPOCA". */
+    eyebrow?: string;
+    title: string;
+    /** Sits beside the title, e.g. "38 cuisines". Pluralised by the caller. */
+    count?: string;
+    subtitle?: string;
+    /** The Food / Drinks control. A `<SegmentedNav>`, composed by the caller. */
+    scopeSwitch?: React.ReactNode;
+    className?: string;
+};
+declare function MenuIndexHeader({ eyebrow, title, count, subtitle, scopeSwitch, className, }: MenuIndexHeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * MenuJumpStrip — the page's contents, as chips.
+ *
+ * It answers "move between families without going back to the hub", and it
+ * doubles as a table of contents: each chip carries the family's mark and its
+ * count, so the strip says how long the page is before the reader scrolls it.
+ *
+ * Only the families drawn in full belong here. A strip listing every value in
+ * the index below would be the index, twice.
+ */
+type MenuJumpStripProps = {
+    entries: MenuIndexEntry[];
+    formatCount?: (value: number) => string;
+    ariaLabel?: string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuJumpStrip({ entries, formatCount, ariaLabel, linkComponent: LinkComponent, className, }: MenuJumpStripProps): react_jsx_runtime.JSX.Element;
+
+export { MenuIndexHeader, type MenuIndexHeaderProps, MenuJumpStrip, type MenuJumpStripProps };

package/dist/components/menu-index-header.js

@@ -0,0 +1,68 @@
+import { ScrollFade } from '../chunk-2XCZJWTV.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MenuIndexHeader({
+  eyebrow,
+  title,
+  count,
+  subtitle,
+  scopeSwitch,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-8", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "text-[11px] font-bold uppercase tracking-[0.1em] text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsxs("h1", { className: "mt-1.5 text-[30px] font-black leading-[1.05] tracking-[-0.035em] lg:text-[40px]", children: [
+        title,
+        count && /* @__PURE__ */ jsx("span", { className: "ml-2.5 align-middle text-base font-semibold text-muted-foreground lg:text-lg", children: count })
+      ] }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-[60ch] text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    scopeSwitch && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 -mx-[var(--page-gutter)] bg-background px-[var(--page-gutter)] py-2 lg:static lg:mx-0 lg:bg-transparent lg:px-0 lg:py-0", children: scopeSwitch })
+  ] });
+}
+function MenuJumpStrip({
+  entries,
+  formatCount = String,
+  ariaLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollFade,
+    {
+      orientation: "horizontal",
+      size: "sm",
+      className,
+      scrollClassName: "scrollbar-hide",
+      children: /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "flex items-center gap-2", children: entries.map((entry) => /* @__PURE__ */ jsxs(
+        LinkComponent,
+        {
+          href: entry.href,
+          className: "inline-flex h-9 shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-card px-4 text-sm transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn("h-2.5 w-2.5 shrink-0 rounded-[3px]", !entry.gradient && "bg-border"),
+                style: entry.gradient ? { backgroundImage: entry.gradient } : void 0
+              }
+            ),
+            entry.name,
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums text-muted-foreground", children: formatCount(entry.count) })
+          ]
+        },
+        entry.slug
+      )) })
+    }
+  );
+}
+
+export { MenuIndexHeader, MenuJumpStrip };

package/dist/components/menu-index-list.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuIndexList — the complete set, four across.
+ *
+ * ## This block is why the page can afford to be progressive
+ *
+ * It carries a crawlable link to EVERY destination the city has — all
+ * thirty-eight cuisines, not the ten the page draws in full below. That makes
+ * it the page's entire link-equity job, which in turn means the rich blocks
+ * underneath are free to load ten at a time behind a "show more": nothing a
+ * crawler needs is hidden behind that control, because it is all up here.
+ *
+ * Get this backwards — put the whole set behind the disclosure and only ten
+ * links in the markup — and the page silently stops linking to twenty-eight
+ * pages it is supposed to be the index for.
+ *
+ * ## Ordered by count, and the counts overlap
+ *
+ * Cuisines are non-exclusive tags: Cluj's thirty-eight sum to 3,182 against 767
+ * places, because a trattoria is Italian AND pizza AND international. So this
+ * is a ranked list of ways in, never a partition, and no copy near it may total
+ * the numbers or call them a breakdown.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+type MenuIndexListLinkProps = MenuLinkProps;
+type MenuIndexListProps = {
+    entries: MenuIndexEntry[];
+    /** e.g. "All 38 cuisines". Composed and pluralised by the caller. */
+    title: string;
+    /** One line under it, e.g. "Ordered by kitchens — every one has its own page". */
+    subtitle?: string;
+    /** Locale-aware integer formatter. Defaults to `String`. */
+    formatCount?: (value: number) => string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuIndexList({ entries, title, subtitle, formatCount, linkComponent: LinkComponent, className, }: MenuIndexListProps): react_jsx_runtime.JSX.Element;
+/** Two columns on a phone, four from `lg` — the grid the list itself renders. */
+declare function MenuIndexListSkeleton({ rows, className, }: {
+    rows?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { MenuIndexList, type MenuIndexListLinkProps, type MenuIndexListProps, MenuIndexListSkeleton };

package/dist/components/menu-index-list.js

@@ -0,0 +1,96 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MenuIndexList({
+  entries,
+  title,
+  subtitle,
+  formatCount = String,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "rounded-[18px] border border-border bg-card px-3.5 py-4 lg:px-5 lg:py-5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "pb-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold tracking-[-0.01em]", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12.5px] text-muted-foreground", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8", children: entries.map((entry) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href: entry.href,
+              className: "group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: cn(
+                      "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+                      !entry.gradient && "bg-border"
+                    ),
+                    style: entry.gradient ? { backgroundImage: entry.gradient } : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13.5px]", children: entry.name }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[13px] tabular-nums text-muted-foreground", children: formatCount(entry.count) }),
+                /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none",
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            }
+          )
+        ] }, entry.slug)) })
+      ]
+    }
+  );
+}
+function MenuIndexListSkeleton({
+  rows = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "rounded-[18px] border border-border bg-card px-3.5 py-4 lg:px-5 lg:py-5",
+        className
+      ),
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-[140px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-[240px]" }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-2 grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 py-2.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-2.5 rounded-[3px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 flex-1" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-6" })
+          ] })
+        ] }, index)) })
+      ]
+    }
+  );
+}
+
+export { MenuIndexList, MenuIndexListSkeleton };

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

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuIntentFigure, MenuLinkComponent } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuIntentHero — the head of an intent page (`/menu/cuisines/italian`).
+ *
+ * The intent page answers "which kitchens, for this, right now", and the hero's
+ * job is to make the size of the answer legible before the reader touches a
+ * filter: how many kitchens cook this, what they are known for, how many are
+ * serving. Every number in it is real and every one of them is a control.
+ *
+ * ## Distinct from `<MenuHubHero>`
+ *
+ * The hub's hero introduces a city's whole menu and carries a search field.
+ * This one introduces ONE intent and carries figures that filter the list
+ * below it. They share a look — a tinted panel with a watermark — and nothing
+ * else, so they are two components rather than one with a mode.
+ *
+ * ## The figures are the first filter
+ *
+ * "58 open now" is both a fact and the fastest way to act on it, so tapping a
+ * figure applies it as a filter rather than scrolling somewhere. A figure with
+ * no `onSelect` renders as a plain fact: the total is normally one, because
+ * filtering to "all of them" is not a state.
+ *
+ * They stay four across on the phone. The board proved the row legible at
+ * 390px, and a 2×2 costs ~40px of height in the tallest element on the
+ * smallest screen; the labels wrap instead.
+ *
+ * ## The paragraph survives the phone
+ *
+ * The board hides it under 640px. It is kept here and clamped instead: it is
+ * the page's only prose, it is what the description meta is built from, and
+ * `display: none` on the one indexed sentence is a cost the extra three lines
+ * do not justify.
+ */
+type MenuIntentHeroProps = {
+    title: string;
+    /**
+     * Over the title — the active constraint ("TONIGHT · OPEN NOW OR LATER"), or
+     * the intent's kind ("CUISINE") when there is none.
+     */
+    kicker?: string;
+    /** Icon node for the kicker, resolved by the caller. */
+    kickerIcon?: React.ReactNode;
+    /** One paragraph of real numbers. Generated by the caller from the facets. */
+    description?: string;
+    figures?: MenuIntentFigure[];
+    /**
+     * 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
+     * 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.
+     */
+    gradient?: string;
+    /** Watermark behind the text, resolved by the caller. */
+    icon?: React.ReactNode;
+    /** Used for any figure carrying an `href`. Defaults to a plain `<a>`. */
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuIntentHero({ title, kicker, kickerIcon, description, figures, gradient, icon, linkComponent, className, }: MenuIntentHeroProps): react_jsx_runtime.JSX.Element;
+
+export { MenuIntentHero, type MenuIntentHeroProps };

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

@@ -0,0 +1,87 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MenuIntentHero({
+  title,
+  kicker,
+  kickerIcon,
+  description,
+  figures,
+  gradient,
+  icon,
+  linkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex overflow-hidden rounded-[18px] text-white lg:min-h-[210px]",
+        !gradient && "bg-foreground",
+        className
+      ),
+      children: [
+        gradient && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0", style: { backgroundImage: gradient } }),
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute -bottom-7 -right-4 opacity-20 [&>svg]:h-[120px] [&>svg]:w-[120px] lg:[&>svg]:h-[170px] lg:[&>svg]:w-[170px]",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex w-full flex-col gap-2.5 p-5 lg:gap-[11px] lg:px-[26px] lg:py-6", children: [
+          kicker && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[10.5px] font-extrabold uppercase tracking-[0.13em] opacity-[0.82]", children: [
+            kickerIcon,
+            kicker
+          ] }),
+          /* @__PURE__ */ jsx("h1", { className: "font-serif text-[29px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[40px]", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 max-w-[520px] text-[13.5px] leading-[1.55] opacity-85 lg:line-clamp-none lg:text-sm", children: description }),
+          figures && figures.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto grid grid-cols-4 gap-x-4 gap-y-3 pt-3.5 lg:flex lg:gap-[26px] lg:pt-4", children: figures.map((figure) => /* @__PURE__ */ jsx(Figure, { figure, linkComponent }, figure.key)) })
+        ] })
+      ]
+    }
+  );
+}
+function Figure({
+  figure,
+  linkComponent: LinkComponent
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "block text-xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-2xl", children: figure.value }),
+    /* @__PURE__ */ jsx("span", { className: "mt-1 block text-[11px] leading-tight opacity-[0.72]", children: figure.label })
+  ] });
+  const interactive = cn(
+    "block min-w-0 rounded-lg text-left transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 motion-reduce:transition-none",
+    figure.active ? "opacity-100" : "opacity-90"
+  );
+  if (figure.href) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href: figure.href,
+        "aria-current": figure.active ? "page" : void 0,
+        className: interactive,
+        children: body
+      }
+    );
+  }
+  if (!figure.onSelect) return /* @__PURE__ */ jsx("span", { className: "block min-w-0", children: body });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: figure.onSelect,
+      "aria-pressed": figure.active,
+      className: interactive,
+      children: body
+    }
+  );
+}
+
+export { MenuIntentHero };