@bearmenu/ui 0.8.9 → 0.8.11

package/dist/components/menu-family-card.js

@@ -1,6 +1,5 @@
-import { MenuItem } from '../chunk-TH6W2PWG.js';
-import '../chunk-Q6QH52LJ.js';
-import '../chunk-UKBNQO6Q.js';
+import { HueChip } from '../chunk-CLLY6XB3.js';
+import { PhotoGround, PHOTO_GROUND } from '../chunk-5RWTOT5Y.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { Wallet } from 'lucide-react';
@@ -11,107 +10,64 @@ function DefaultLink(_a) {
   return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
 }
 var MOSAIC_CELLS = 4;
+var GROUND = PHOTO_GROUND;
+var INK = "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.78)_0%,oklch(0.16_0.012_55_/_0.5)_34%,oklch(0.16_0.012_55_/_0.86)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 function MenuFamilyCard({
   family,
   labels,
-  itemLabels,
-  formatPrice,
-  formatCount,
   href,
   hue,
+  gradient,
   priceBandLabel,
   linkComponent: LinkComponent = DefaultLink,
   className
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const photos = (_a = family.venue_photo_urls) != null ? _a : [];
-  const groups = ((_b = family.chips) != null ? _b : []).map((chip) => chip.label);
+  const tiles = photos.length ? Array.from({ length: MOSAIC_CELLS }, (_, cell) => photos[cell % photos.length]) : [void 0];
   return /* @__PURE__ */ jsxs(
-    "div",
+    LinkComponent,
     {
+      href,
       className: cn(
-        "flex h-full flex-col overflow-hidden rounded-[14px] border border-border bg-card",
+        "group dark relative isolate flex min-h-[280px] flex-col justify-between overflow-hidden rounded-[14px] border border-border p-3.5",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white",
+        GROUND,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs(
-          LinkComponent,
+        /* @__PURE__ */ jsx(
+          PhotoGround,
           {
-            href,
-            className: "relative block overflow-hidden bg-[oklch(0.21_0.012_55)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-            children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0 grid grid-cols-2 grid-rows-2 gap-px", children: Array.from(
-                { length: MOSAIC_CELLS },
-                (_, cell) => photos.length ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: photos[cell % photos.length],
-                      alt: "",
-                      loading: "lazy",
-                      decoding: "async",
-                      className: "h-full w-full object-cover"
-                    },
-                    cell
-                  )
-                ) : /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
-                  },
-                  cell
-                )
-              ) }),
-              hue && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: "absolute inset-0 opacity-90 mix-blend-color",
-                  style: { backgroundColor: hue }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: "absolute inset-0 bg-[linear-gradient(180deg,oklch(0.16_0.012_55_/_0.9)_0%,oklch(0.16_0.012_55_/_0.62)_45%,oklch(0.16_0.012_55_/_0.94)_100%)]"
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "relative flex min-h-[260px] flex-col justify-between p-3.5 text-white", children: [
-                /* @__PURE__ */ jsxs("span", { className: "block", children: [
-                  /* @__PURE__ */ jsx("b", { className: "block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums", children: family.venue_count }),
-                  /* @__PURE__ */ jsx("span", { className: "mt-1 block text-[9.5px] font-bold tracking-[0.12em] opacity-80", children: labels.venueUnit })
-                ] }),
-                /* @__PURE__ */ jsxs("span", { className: "block", children: [
-                  /* @__PURE__ */ jsx("span", { className: "block text-[17px] font-bold tracking-[-0.01em]", children: family.name }),
-                  groups.length > 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-[11.5px] opacity-75", children: groups.join(" \xB7 ") }),
-                  priceBandLabel && /* @__PURE__ */ jsxs("span", { className: "mt-2 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[11px] backdrop-blur-[2px]", children: [
-                    /* @__PURE__ */ jsx(Wallet, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-                    /* @__PURE__ */ jsx("span", { className: "opacity-80", children: labels.priceBand }),
-                    /* @__PURE__ */ jsx("b", { className: "font-semibold tabular-nums", children: priceBandLabel })
-                  ] })
-                ] })
-              ] })
-            ]
+            className: "-z-30",
+            photos: tiles,
+            initials: family.name.charAt(0),
+            mosaicClassName: photos.length ? "grid-cols-2 grid-rows-2" : "grid-cols-1",
+            gradient
           }
         ),
-        family.signature && /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col px-2 pb-2 pt-3", children: [
-          /* @__PURE__ */ jsx("span", { className: "px-2 text-[9.5px] font-bold uppercase tracking-[0.09em] text-muted-foreground", children: labels.mostNamed }),
-          /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              className: "min-h-0",
-              item: family.signature.item,
-              labels: itemLabels,
-              formatPrice,
-              formatCount,
-              markGradient: hue,
-              subtitle: family.signature.why,
-              href: (_c = family.signature.href) != null ? _c : href,
-              linkComponent: LinkComponent
-            }
-          )
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 -z-10", INK) }),
+        /* @__PURE__ */ jsxs("span", { className: "block text-white", children: [
+          /* @__PURE__ */ jsx("b", { className: "block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums", children: family.venue_count }),
+          /* @__PURE__ */ jsx("span", { className: "mt-1 block text-[9.5px] font-bold uppercase tracking-[0.12em] opacity-80", children: labels.venueUnit })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "block", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-balance font-serif text-[24px] font-semibold leading-tight tracking-[-0.02em] text-white", children: family.name }),
+          (priceBandLabel || ((_c = (_b = family.chips) == null ? void 0 : _b.length) != null ? _c : 0) > 0) && /* @__PURE__ */ jsxs("span", { className: "mt-2.5 flex flex-wrap items-center gap-1.5", children: [
+            priceBandLabel && /* No hue: a fact about money, not about the family. In the dark
+               scope `HueChip`'s `--muted` fallback is the dark pill. */
+            /* @__PURE__ */ jsx(
+              HueChip,
+              {
+                className: "font-bold tabular-nums",
+                "aria-label": `${labels.priceBand}: ${priceBandLabel}`,
+                icon: /* @__PURE__ */ jsx(Wallet, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+                children: priceBandLabel
+              }
+            ),
+            (_d = family.chips) == null ? void 0 : _d.map((chip) => /* @__PURE__ */ jsx(HueChip, { hue, children: chip.label }, chip.slug))
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors group-hover:bg-white/25 motion-reduce:transition-none", children: labels.browse })
         ] })
       ]
     }

package/dist/components/menu-field.js

@@ -1,3 +1,93 @@
-export { MenuField } from '../chunk-YS6BHKZO.js';
-import '../chunk-FEK5XGZW.js';
+import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
+import { jsx } from 'react/jsx-runtime';
+
+var GHOST_ROWS = 13;
+var GHOST_CENTRE = (GHOST_ROWS - 1) / 2;
+var ALPHA_PEAK = 0.44;
+var ALPHA_EDGE = 0;
+var FALLOFF_EXPONENT = 3.4;
+var GHOST_LINE_CHARS = 56;
+function hashString(input) {
+  let hash = 5381;
+  for (let i = 0; i < input.length; i++) hash = hash * 33 ^ input.charCodeAt(i);
+  return Math.abs(hash);
+}
+function MenuField({
+  name,
+  gradient,
+  seedKey,
+  variant = "repeat",
+  className
+}) {
+  if (variant === "display") {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const longestWord = Math.max(1, ...words.map((word) => word.length));
+    const lineCount = Math.max(1, words.length);
+    const byWidth = (96 / (longestWord * 0.62)).toFixed(1);
+    const byHeight = (90 / (lineCount * 0.9)).toFixed(1);
+    const fontSize = `clamp(9cqw, min(19cqw, ${byWidth}cqw, ${byHeight}cqh), 19cqw)`;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("relative isolate overflow-hidden", className),
+        style: { backgroundImage: gradient, containerType: "size" },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 flex select-none items-center justify-center p-[4cqw] text-center font-black uppercase leading-[0.9] tracking-[-0.03em] text-white/[0.26]",
+            style: { fontSize },
+            children: name
+          }
+        )
+      }
+    );
+  }
+  const unit = `${name} \xB7 `;
+  const repeats = Math.max(2, Math.ceil(GHOST_LINE_CHARS / Math.max(unit.length, 1)));
+  const ghostLine = unit.repeat(repeats);
+  const seed = hashString(seedKey != null ? seedKey : name);
+  const rows = Array.from({ length: GHOST_ROWS }, (_, row) => {
+    const distance = Math.abs(row - GHOST_CENTRE) / GHOST_CENTRE;
+    const alpha = ALPHA_EDGE + (ALPHA_PEAK - ALPHA_EDGE) * Math.pow(1 - distance, FALLOFF_EXPONENT);
+    return { row, alpha, offset: (seed >> row % 12) % 90 - 45 };
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative isolate overflow-hidden", className),
+      style: { backgroundImage: gradient },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute left-1/2 top-1/2 flex h-[180%] w-[180%] -translate-x-1/2 -translate-y-1/2 -rotate-[11deg] select-none flex-col justify-center",
+          children: rows.map(({ row, alpha, offset }) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block whitespace-nowrap text-center text-[15px] font-bold leading-[1.45] tracking-[-0.01em]",
+              style: {
+                color: `oklch(1 0 0 / ${alpha.toFixed(3)})`,
+                // Emboss, both edges scaled by this row's alpha: a dark edge below
+                // cuts the letterform into the field, a light edge above lifts its
+                // top. The dark edge is kept well under the fill — at parity it
+                // ringed every glyph and dragged the type back toward grey, which
+                // is the opposite of what the fill is doing.
+                textShadow: [
+                  `0 1px 1px oklch(0 0 0 / ${(alpha * 0.4).toFixed(3)})`,
+                  `0 -1px 0 oklch(1 0 0 / ${(alpha * 0.4).toFixed(3)})`
+                ].join(", "),
+                transform: `translateX(${offset}px)`
+              },
+              children: ghostLine
+            },
+            row
+          ))
+        }
+      )
+    }
+  );
+}
+
+export { MenuField };

package/dist/components/menu-filter-chips.d.ts

@@ -0,0 +1,86 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuFilterChip } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuFilterChips — the intent page's filter row.
+ *
+ * ## One unit, one list that moves
+ *
+ * Every chip counts KITCHENS, whatever facet is behind it. A dietary chip reads
+ * "has a vegetarian dish" and counts venues; a dish-group chip reads "has a
+ * pizza" and counts venues. The earlier version mixed venue counts and dish
+ * counts in one row and became unreadable — you could not tell what a number
+ * was counting without reading the label that produced it. The unit is stated
+ * once, at the head of the row (`unitLabel`, e.g. "KITCHENS · 247"), and never
+ * again.
+ *
+ * ## A zero-count chip is dimmed, not disabled
+ *
+ * `empty` chips stay tappable. Pressing one swaps it in and drops whichever
+ * active filter conflicts with it, and the caller says which in a line beneath.
+ * Disabling it would refuse the reader the thing they asked for and give no
+ * reason; this way the row answers the question by being pressed. Facets the
+ * API says are unavailable for this intent are not passed in at all — not
+ * drawn, rather than drawn dead.
+ *
+ * ## The row scrolls; the escape hatch does not
+ *
+ * One line in every state. Chips scroll horizontally under a `<ScrollFade>`,
+ * and "More filters" is pinned opposite the unit label rather than wrapping,
+ * so the way out of a full row is always in the same place.
+ *
+ * Interactive: the consumer marks its own module `"use client"`.
+ */
+type MenuFilterChipsProps = {
+    chips: MenuFilterChip[];
+    onToggle: (key: string) => void;
+    /** The unit and the current total, composed by the caller, e.g. "KITCHENS · 247". */
+    unitLabel?: string;
+    /** Opens the full filter sheet. Omit for a row where every facet is a chip. */
+    onMore?: () => void;
+    moreLabel?: string;
+    /**
+     * A glyph for the phone's icon-only "more filters" button.
+     *
+     * The label is the widest fixed element in the row — "More filters" is ~80px
+     * of a 358px viewport, and it is the one thing that never scrolls, so it eats
+     * the chips' runway on every phone. Given an icon, the button collapses to a
+     * square below `lg` and keeps `moreLabel` as its accessible name.
+     *
+     * A node rather than a name because the app owns its iconography, and this
+     * one is animated on press — the DS neither knows the glyph nor drives it.
+     */
+    moreIcon?: React.ReactNode;
+    /** Press handler for the icon button, e.g. to replay the glyph's animation. */
+    onMorePointerDown?: () => void;
+    /** Locale-aware integer formatter for the counts. Defaults to `String`. */
+    formatCount?: (value: number) => string;
+    /** Accessible name for the row. */
+    ariaLabel?: string;
+    className?: string;
+};
+declare function MenuFilterChips({ chips, onToggle, unitLabel, onMore, moreLabel, moreIcon, onMorePointerDown, formatCount, ariaLabel, className, }: MenuFilterChipsProps): react_jsx_runtime.JSX.Element;
+/**
+ * MenuFilterSummary — what the active filters did, and the way out.
+ *
+ * Sits under the row whenever anything is on. The sentence is composed by the
+ * caller because it is a real sentence in two languages ("Three filters · 34 of
+ * 247 kitchens are mid-range, have a vegetarian Italian dish, and are open
+ * now") and assembling it from fragments here would produce translated
+ * word-salad in one of them.
+ */
+type MenuFilterSummaryProps = {
+    /** The composed sentence. */
+    summary: React.ReactNode;
+    clearLabel: string;
+    onClear: () => void;
+    className?: string;
+};
+declare function MenuFilterSummary({ summary, clearLabel, onClear, className, }: MenuFilterSummaryProps): react_jsx_runtime.JSX.Element;
+declare function MenuFilterChipsSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { MenuFilterChips, type MenuFilterChipsProps, MenuFilterChipsSkeleton, MenuFilterSummary, type MenuFilterSummaryProps };

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-hub-hero.js

@@ -3,6 +3,7 @@ import '../chunk-3GWWZKX7.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var TEXTURE_CELLS = 28;
+var PHONE_CELLS = 6;
 function MenuHubHero({
   kicker,
   kickerIcon,
@@ -39,9 +40,10 @@ function MenuHubHero({
           "div",
           {
             "aria-hidden": true,
-            className: "absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7",
+            className: "absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-7",
             children: Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
               const url = (tileUrls == null ? void 0 : tileUrls.length) ? tileUrls[cell % tileUrls.length] : void 0;
+              const phone = cell < PHONE_CELLS ? void 0 : "hidden lg:block";
               return url ? (
                 // eslint-disable-next-line @next/next/no-img-element
                 /* @__PURE__ */ jsx(
@@ -51,14 +53,17 @@ function MenuHubHero({
                     alt: "",
                     loading: "lazy",
                     decoding: "async",
-                    className: "h-full w-full object-cover"
+                    className: cn("h-full w-full object-cover", phone)
                   },
                   cell
                 )
               ) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]"
+                  className: cn(
+                    "bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]",
+                    phone
+                  )
                 },
                 cell
               );
@@ -71,7 +76,7 @@ function MenuHubHero({
             "aria-hidden": true,
             className: cn(
               "absolute inset-0",
-              (tileUrls == null ? void 0 : tileUrls.length) || backgroundUrl ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.88)_52%,oklch(0.16_0.012_55_/_0.72)_100%)]" : "bg-[linear-gradient(100deg,oklch(0.18_0.012_55_/_0.95)_0%,oklch(0.18_0.012_55_/_0.72)_52%,oklch(0.18_0.012_55_/_0.3)_100%)]"
+              (tileUrls == null ? void 0 : tileUrls.length) || backgroundUrl ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.86)_52%,oklch(0.16_0.012_55_/_0.6)_100%)]" : "bg-[linear-gradient(100deg,oklch(0.18_0.012_55_/_0.95)_0%,oklch(0.18_0.012_55_/_0.72)_52%,oklch(0.18_0.012_55_/_0.3)_100%)]"
             )
           }
         ),
@@ -88,7 +93,7 @@ function MenuHubHero({
             /* @__PURE__ */ jsx("div", { className: "mt-[5px] text-xs opacity-[0.72]", children: figure.label })
           ] }, figure.label)) }),
           (proof || action) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-wrap items-center gap-3 pt-5", children: [
-            proof && /* @__PURE__ */ jsxs("span", { className: "inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/10 px-4 py-2 text-[13px] backdrop-blur-[6px]", children: [
+            proof && /* @__PURE__ */ jsxs("span", { className: "inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]", children: [
               proofIcon,
               proof
             ] }),