@bearmenu/ui 0.8.8 → 0.8.10

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 };

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,50 @@
+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/dist/components/menu-item.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuItemPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import './place-types.js';
+
+/**
+ * MenuItem — THE menu row.
+ *
+ * A venue's page (its menu list, its signature picks, the "pairs well with"
+ * list inside the entity drawer) and the cross-venue surfaces (the city menu,
+ * the hub's "known for" list, the daily editorial buckets) all render this one
+ * component, so an item is visibly the same object wherever it is met.
+ *
+ * Hoisted out of the app, where it had grown a second and a third lookalike
+ * beside it. It carries the app version's design decisions verbatim; only the
+ * couplings changed — the locale, the translation keys and the category-colour
+ * table are injected, because the DS owns none of those.
+ *
+ * ## The left mark
+ *
+ * An 8px rounded tab in the section's CATEGORY colour, flat against the row's
+ * left edge and bulging right. It replaced an earlier monogram chip, and the
+ * trade was deliberate:
+ *
+ *   + The text column widens. At 390px the monogram costs 50px (38 + gap) and
+ *     the tab costs 16px, so the text column goes 308px → 342px: ~11% more room
+ *     for names and descriptions, which means fewer wrapped names and more
+ *     items per screen.
+ *   + The hue answers "which section am I in" rather than "what is this made
+ *     of". Every row in a category draws the same mark, so it survives the
+ *     category header scrolling out of view — which a per-item ingredient hue
+ *     cannot do, since it changes for reasons the reader cannot see.
+ *   − COLOUR-BLINDNESS. The monogram gave a reader who cannot separate the hues
+ *     a LETTER; a rule collapses to the same grey bar for everyone. Both marks
+ *     are `aria-hidden` and neither carries meaning the text lacks, so this is
+ *     not a WCAG 1.4.1 failure — but it is a real loss of scannability for ~8%
+ *     of men, and it has not been bought back yet.
+ *
+ * `markGradient` is passed IN, never derived: inside a menu the colour depends
+ * on the neighbouring sections, which a single row cannot see.
+ *
+ * ## No chevron
+ *
+ * The row is already `role="button"`, so an arrow would only restate that, and
+ * the right edge belongs to the mention count, which the arrow would collide
+ * with.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+type MenuItemLinkProps = MenuLinkProps;
+type MenuItemLabels = {
+    /** Currency unit beside the price, e.g. "RON". */
+    currency: string;
+    /** Fully-worded mention count — the accessible name for the glyph-and-numeral pair. */
+    mentions: (count: number) => string;
+    /** Chip text for a `signature`-strength item. */
+    signature: string;
+    /** Chip text for a `weak` (merely mentioned) item. */
+    mentioned: string;
+};
+type MenuItemProps = {
+    item: MenuItemPreview;
+    labels: MenuItemLabels;
+    /** Locale-aware money formatter. The DS owns no `Intl` locale. */
+    formatPrice: (amount: number) => string;
+    /** Locale-aware integer formatter for the mention count. Defaults to `String`. */
+    formatCount?: (value: number) => string;
+    /**
+     * Opens the item's own sheet. Ignored when `href` is set.
+     *
+     * Neither this nor `href` → an INERT row: same geometry, mark, type and meta
+     * line, but no `role="button"`, no tab stop and no hover or press states.
+     * That is the must-try mention with no menu row behind it — it has nothing to
+     * open, so it renders as content rather than as a control that goes nowhere.
+     */
+    onOpen?: () => void;
+    showSignatureBadge?: boolean;
+    signatureTier?: "strong" | "weak";
+    onSignatureEvidence?: () => void;
+    /** Opens the reviews behind the mention count. */
+    onMentions?: () => void;
+    /** The mark's colour, as a CSS `background-image` value. */
+    markGradient?: string;
+    /**
+     * The venue this item belongs to — an attribution line under the name.
+     *
+     * Set it ONLY on cross-venue surfaces, where ten near-identical burgers come
+     * from ten kitchens and the venue IS the tap decision. A venue's own menu
+     * page must never pass it: the page already said whose menu this is. Passed
+     * in rather than read off `item.place` so the redundant case cannot be the
+     * default.
+     */
+    venueName?: string;
+    /**
+     * Explicit subtitle, in italic, in place of the description. Used where the
+     * reviewer's reason IS the row's content rather than the payoff for tapping.
+     */
+    subtitle?: string;
+    /**
+     * Render the row as a LINK instead of a `role="button"` div — for surfaces
+     * where it navigates rather than opening a sheet, so it stays
+     * middle-clickable and shareable. Implemented as a stretched overlay rather
+     * than by wrapping the row: the mention count is a control in its own right
+     * and a button inside an anchor is invalid.
+     */
+    href?: string;
+    /** Accessible name for the link overlay. Defaults to the item's name. */
+    linkLabel?: string;
+    linkComponent?: MenuLinkComponent;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * The mention count: a filled quote glyph and the numeral, pinned right.
+ *
+ * Deliberately NOT a badge — a chip would add a filled shape to a row that has
+ * none, and would read as a status label the venue was given rather than a
+ * count drawn from the same reviews.
+ */
+declare function MentionSignal({ label, count, onMentions, formatCount, }: {
+    label: string;
+    count: number;
+    onMentions?: () => void;
+    formatCount?: (value: number) => string;
+}): react_jsx_runtime.JSX.Element;
+declare const MenuItem: React.NamedExoticComponent<MenuItemProps>;
+
+export { MentionSignal, MenuItem, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };

package/dist/components/menu-item.js

@@ -0,0 +1,5 @@
+export { MentionSignal, MenuItem } from '../chunk-TH6W2PWG.js';
+import '../chunk-Q6QH52LJ.js';
+import '../chunk-UKBNQO6Q.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

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

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuKitchenPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuKitchenList — the intent page's spine.
+ *
+ * Venues ranked by how often reviews name their dishes, each row carrying the
+ * dish that earned it its place. Not a grid of dishes: a shortlist of rooms you
+ * could walk into.
+ *
+ * ## Two targets, and why this is not `<RankedVenueList>`
+ *
+ * The row goes to the venue. The dish name opens the item drawer — the same
+ * drawer the dish tiles open, listing every kitchen that makes it and for how
+ * much. Those are two different destinations inside one row, and the hub's
+ * `<RankedVenueList>` wraps its ENTIRE row in a single `LinkComponent`, so it
+ * structurally cannot express a second one. That is the reason this exists
+ * rather than a variant flag on that component.
+ *
+ * The mechanism is a stretched overlay, as in `<MenuItem>`: the venue link is
+ * an absolutely-positioned sibling at `z-[1]`, and the dish link sits above it
+ * at `z-[2]`. Nesting one anchor inside another is invalid HTML and breaks
+ * middle-click on both.
+ *
+ * The dish name is underlined so it reads as a target before it is pressed. The
+ * chevron belongs to the venue and stays on the right, away from it — an
+ * unmarked second target inside a row that already navigates is a trap.
+ *
+ * ## The filtered state changes the row's reason for being there
+ *
+ * With a dish or dietary filter on, each row swaps its most-named dish for the
+ * one that actually matched, and the kicker changes with it ("MOST NAMED HERE"
+ * → "WHY IT MATCHES"). A filtered list whose rows still advertise their
+ * most-named dish is claiming the filter matched something it did not.
+ *
+ * ## Header
+ *
+ * Deliberately none. The page composes `<SectionHeader>` above it, the same way
+ * the events hub does, because the heading here carries a count and a "see the
+ * full ranking" link into `/top` that the list knows nothing about.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+type MenuKitchenListLinkProps = MenuLinkProps;
+type MenuKitchenListLabels = {
+    /** Accessible prefix for the row's venue link, e.g. "Open". */
+    openVenue: (name: string) => string;
+    /** Accessible name for the dish link, e.g. "See Truffle Tagliatelle". */
+    openDish: (name: string) => string;
+    /** Accessible name for the open-now dot. */
+    openNow: string;
+    /** Reveals the next page of rows, e.g. "Show 10 more". */
+    showMore?: string;
+};
+type MenuKitchenListProps = {
+    kitchens: MenuKitchenPreview[];
+    labels: MenuKitchenListLabels;
+    /**
+     * Reveals more rows IN PLACE. The intent page pages ten at a time and never
+     * navigates for the eleventh — the list is the page.
+     */
+    onShowMore?: () => void;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuKitchenList({ kitchens, labels, onShowMore, linkComponent, className, }: MenuKitchenListProps): react_jsx_runtime.JSX.Element;
+/**
+ * The list's own loading state, at the row's own footprint.
+ *
+ * It lives HERE, beside the component, and that is the whole point: a skeleton
+ * kept in the consuming app drifts the moment the row's padding or thumbnail
+ * size changes, and the drift is invisible until a page reflows on load. The
+ * measurements below are the same literals the row above uses — change one and
+ * the diff shows you the other.
+ */
+declare function MenuKitchenListSkeleton({ rows, className, }: {
+    rows?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { MenuKitchenList, type MenuKitchenListLabels, type MenuKitchenListLinkProps, type MenuKitchenListProps, MenuKitchenListSkeleton };

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

@@ -0,0 +1,5 @@
+export { MenuKitchenList, MenuKitchenListSkeleton } from '../chunk-24RFI4RQ.js';
+import '../chunk-WSRWFA6K.js';
+import '../chunk-QXHMPJ35.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

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

@@ -0,0 +1,90 @@
+import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuIntentTile, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
+import { PlacePreview } from './place-types.js';
+import 'react';
+
+/**
+ * Fixtures for the menu-hub surfaces — used by their stories, and shipped so
+ * that consumers rendering these components outside an app (post-generator's
+ * Remotion frames, admin previews) do not each rebuild a plausible view model.
+ *
+ * ## Every venue here is invented
+ *
+ * The names, ratings and quotes are fabricated. Real venues must never appear
+ * in marketing or promotional renders — a real kitchen's rating in a promo
+ * frame is a claim about that business, made without its involvement, and it
+ * goes stale the moment the data moves. Anything filmed from these fixtures is
+ * safe to publish; anything filmed from live data is not.
+ *
+ * The SHAPES are real, though: the gaps are the gaps the API actually has, so
+ * a layout that survives these fixtures survives production. `mentions` is
+ * populated everywhere because it is populated everywhere upstream; one venue
+ * has no `must_try`, one has no photograph, and one grade is missing the
+ * dimensions a coffee bar never gets.
+ */
+
+declare const mockGradients: {
+    readonly pasta: "linear-gradient(150deg, oklch(0.555 0.105 80), oklch(0.455 0.10 70))";
+    readonly meat: "linear-gradient(150deg, oklch(0.49 0.13 28), oklch(0.41 0.12 22))";
+    readonly greens: "linear-gradient(150deg, oklch(0.505 0.115 148), oklch(0.415 0.11 142))";
+    readonly sweet: "linear-gradient(150deg, oklch(0.505 0.14 50), oklch(0.405 0.13 42))";
+    readonly cocktail: "linear-gradient(150deg, oklch(0.485 0.095 205), oklch(0.405 0.09 212))";
+};
+declare const mockPlaces: PlacePreview[];
+declare const mockVenues: MenuVenuePreview[];
+declare const mockItems: MenuItemPreview[];
+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[];
+/** Formatters the stories pass. Real callers inject locale-aware ones. */
+declare const mockFormatters: {
+    price: (value: number) => string;
+    number: (value: number) => string;
+    score: (value: number) => string;
+};
+declare const mockHubLabels: {
+    mentions: (count: number) => string;
+    venues: (count: number) => string;
+    seeAll: string;
+    signature: string;
+    openNow: string;
+    until: string;
+};
+/**
+ * The intent page's kitchen rows.
+ *
+ * The gaps are the gaps the API actually has, and they are the reason the row
+ * degrades the way it does: `must_try` entries arrive from a LIST endpoint, so
+ * a third of them carry no `slug` (nothing to open — the dish line goes inert)
+ * and none of them carry `mentions` (only `review_ids.length`, which is absent
+ * for census items — so the count line disappears rather than reading zero).
+ * A layout that survives these survives production.
+ */
+declare const mockKitchens: MenuKitchenPreview[];
+/** The same rows in a filtered state — each answering the filter, not volunteering. */
+declare const mockMatchedKitchens: MenuKitchenPreview[];
+declare const mockIntentFigures: MenuIntentFigure[];
+/**
+ * Note there is no zero-count chip here, and that is not an oversight: the
+ * facets endpoint omits values that would match nothing, so a chip can only
+ * become `empty` client-side, after it was offered and the reader's next filter
+ * emptied it. The `Dead` story constructs that case deliberately.
+ */
+declare const mockFilterChips: MenuFilterChip[];
+declare const mockLoosenOptions: MenuLoosenOption[];
+/**
+ * The long tail is the point of these fixtures.
+ *
+ * Cluj's cuisine facet runs from 457 down to 1, and twenty-two of the
+ * thirty-eight have fewer than twenty places. A layout tested only on the head
+ * of that list looks fine and then ships a page whose last two columns are
+ * single digits.
+ */
+declare const mockIndexEntries: MenuIndexEntry[];
+declare const mockFamilyBlock: MenuFamilyBlockPreview;
+/** No photographs, no venue, no price — the degraded block still reads. */
+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 };