@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/menu-hub-hero.tsx

@@ -0,0 +1,187 @@
+import { cn } from "../lib/utils";
+
+/**
+ * MenuHubHero — the claim that opens a menu hub, proven by live figures.
+ *
+ * A statement rather than a count ("Nobody should have to walk in blind"),
+ * over a dark ground, with the catalogue's real numbers under it and one proof
+ * line that demonstrates what the catalogue can do that a single menu cannot.
+ *
+ * ## Why the ground is a texture and not a photograph
+ *
+ * Menu-item photography is AI-generated and never shown, and one venue
+ * photograph behind a claim about every venue in the city argues the wrong
+ * thing. The tile grid reads as "many menus" without being any of them.
+ * Callers that DO have a real, licensed image for the slot can pass
+ * `backgroundUrl` — venue photography, never a plate.
+ *
+ * ## Figures
+ *
+ * `figures` is a list, not four fixed slots: the drinks tab has different ones
+ * and the count changes when a number turns out to have nothing behind it.
+ * Every value is a pre-formatted string because thousands separators are
+ * locale-dependent and the DS owns no locale.
+ *
+ * Server-safe.
+ */
+
+export type MenuHubHeroFigure = {
+  /** Pre-formatted, e.g. "19,062". */
+  value: string;
+  label: string;
+};
+
+export type MenuHubHeroProps = {
+  /** Small caps line above the headline, e.g. "397 MENUS IN CLUJ-NAPOCA, READ IN FULL". */
+  kicker?: string;
+  /** Icon for the kicker, resolved by the caller. */
+  kickerIcon?: React.ReactNode;
+  headline: string;
+  body?: string;
+  figures?: MenuHubHeroFigure[];
+  /**
+   * The proof line — one demonstrated fact, e.g. "A margherita: 87 kitchens
+   * make one, 10 to 120 lei". Composed by the caller; clause order is
+   * locale-dependent.
+   */
+  proof?: React.ReactNode;
+  proofIcon?: React.ReactNode;
+  /** The action beside the proof line. Pass a rendered link or button. */
+  action?: React.ReactNode;
+  /** Real, licensed photograph for the ground. Venue imagery only — see above. */
+  backgroundUrl?: string;
+  /**
+   * Tiles for the mosaic ground — generic, cinematic, licensed stills, served
+   * from the consumer's own origin.
+   *
+   * A mosaic rather than one photograph because the hero's claim is about EVERY
+   * kitchen in the city: a single image makes it about one of them. Given fewer
+   * tiles than cells the list repeats, so a caller can ship six and still fill
+   * a 1440px hero.
+   */
+  tileUrls?: string[];
+  className?: string;
+};
+
+/** Enough cells to fill the widest hero without the grid reading as a pattern. */
+const TEXTURE_CELLS = 28;
+
+export function MenuHubHero({
+  kicker,
+  kickerIcon,
+  headline,
+  body,
+  figures,
+  proof,
+  proofIcon,
+  action,
+  backgroundUrl,
+  tileUrls,
+  className,
+}: MenuHubHeroProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[260px] overflow-hidden rounded-[20px] bg-[oklch(0.21_0.012_55)] lg:min-h-[440px]",
+        className
+      )}
+    >
+      {backgroundUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={backgroundUrl}
+          alt=""
+          aria-hidden
+          className="absolute inset-0 h-full w-full object-cover opacity-[0.42]"
+        />
+      ) : (
+        <div
+          aria-hidden
+          className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7"
+        >
+          {Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
+            const url = tileUrls?.length ? tileUrls[cell % tileUrls.length] : undefined;
+
+            return url ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={url}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div
+                key={cell}
+                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]"
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {/*
+        Heavier over a photo mosaic than it was over flat texture: twelve
+        cinematic stills at full strength turn a claim into a collage and the
+        headline stops being the loudest thing on the banner. This keeps the
+        depth and gives the type its contrast back.
+      */}
+      <div
+        aria-hidden
+        className={cn(
+          "absolute inset-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%)]"
+        )}
+      />
+
+      <div className="relative z-[1] flex w-full flex-col justify-center gap-3 p-5 text-white lg:gap-4 lg:px-12 lg:py-11">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-[7px] rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h1 className="max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]">
+          {headline}
+        </h1>
+
+        {body && (
+          <p className="hidden max-w-[540px] text-sm leading-[1.6] opacity-[0.84] lg:block lg:text-[15.5px]">
+            {body}
+          </p>
+        )}
+
+        {figures && figures.length > 0 && (
+          // Two by two on the phone: four figures in one row wrapped to three and an orphan.
+          <div className="grid grid-cols-2 gap-x-6 gap-y-3 pt-3 lg:flex lg:flex-wrap lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
+            {figures.map((figure) => (
+              <div key={figure.label}>
+                <div className="text-2xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-[32px]">
+                  {figure.value}
+                </div>
+                <div className="mt-[5px] text-xs opacity-[0.72]">{figure.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(proof || action) && (
+          <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
+            {proof && (
+              <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]">
+                {proofIcon}
+                {proof}
+              </span>
+            )}
+            {action}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/menu-index-header.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UtensilsCrossed, Wine } from "lucide-react";
+import { MenuIndexHeader, MenuJumpStrip } from "./menu-index-header";
+import { SegmentedNav } from "./segmented-nav";
+import { mockIndexEntries } from "./menu-mocks";
+
+const scopeSwitch = (
+  <SegmentedNav
+    label="Menu scope"
+    activeId="food"
+    items={[
+      { id: "food", href: "/menu/cuisines", label: "Food", icon: <UtensilsCrossed className="h-4 w-4" /> },
+      { id: "drinks", href: "/menu/drinks/families", label: "Drinks", icon: <Wine className="h-4 w-4" /> },
+    ]}
+  />
+);
+
+const meta: Meta<typeof MenuIndexHeader> = {
+  title: "Menu/MenuIndexHeader",
+  component: MenuIndexHeader,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "MENU · CLUJ-NAPOCA",
+    title: "Browse by cuisine",
+    count: "38 cuisines",
+    subtitle: "Kitchens, the plates that define them, and what they cost.",
+    scopeSwitch,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's own section title, opened up — so the page reads as that section rather than as somewhere new, which is what the *All 38 cuisines* link promised. The scope switch is a slot, not a prop set: the two scopes are two ROUTES, so the caller passes a `SegmentedNav` with real hrefs and the DS stays out of routing.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIndexHeader>;
+
+export const Default: Story = {};
+
+export const Drinks: Story = {
+  args: {
+    title: "Where to go out",
+    count: "5 kinds of night",
+    subtitle: "Bars, the glass that defines them, and what it costs.",
+  },
+};
+
+/** The strip lists only the families drawn in full — otherwise it is the index, twice. */
+export const JumpStrip: StoryObj<typeof MenuJumpStrip> = {
+  render: () => <MenuJumpStrip entries={mockIndexEntries.slice(0, 8)} ariaLabel="Jump to a cuisine" />,
+};
+
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/menu-index-header.tsx

@@ -0,0 +1,125 @@
+import { cn } from "../lib/utils";
+import { ScrollFade } from "./scroll-fade";
+import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuIndexHeader — the head of a browse index.
+ *
+ * The hub's own section title, opened up: the page reads as that section rather
+ * than as a new place, which is the whole promise of the "All 38 cuisines" link
+ * that got the reader here.
+ *
+ * The scope switch is a slot rather than a prop set, because the two scopes are
+ * two ROUTES — the caller passes a `<SegmentedNav>` with real hrefs and the DS
+ * stays out of routing.
+ */
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export 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;
+};
+
+export function MenuIndexHeader({
+  eyebrow,
+  title,
+  count,
+  subtitle,
+  scopeSwitch,
+  className,
+}: MenuIndexHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-8", className)}>
+      <div className="min-w-0 flex-1">
+        {eyebrow && (
+          <p className="text-[11px] font-bold uppercase tracking-[0.1em] text-muted-foreground">
+            {eyebrow}
+          </p>
+        )}
+        <h1 className="mt-1.5 text-[30px] font-black leading-[1.05] tracking-[-0.035em] lg:text-[40px]">
+          {title}
+          {count && (
+            <span className="ml-2.5 align-middle text-base font-semibold text-muted-foreground lg:text-lg">
+              {count}
+            </span>
+          )}
+        </h1>
+        {subtitle && (
+          <p className="mt-2 max-w-[60ch] text-sm text-muted-foreground">{subtitle}</p>
+        )}
+      </div>
+
+      {/* Sticky under the header on the phone: the list below is several screens
+          and a reader who wants the other scope should not have to scroll back
+          up to a control they can see from anywhere else on the page. */}
+      {scopeSwitch && (
+        <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">
+          {scopeSwitch}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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.
+ */
+export type MenuJumpStripProps = {
+  entries: MenuIndexEntry[];
+  formatCount?: (value: number) => string;
+  ariaLabel?: string;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuJumpStrip({
+  entries,
+  formatCount = String,
+  ariaLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuJumpStripProps) {
+  return (
+    <ScrollFade
+      orientation="horizontal"
+      size="sm"
+      className={className}
+      scrollClassName="scrollbar-hide"
+    >
+      <nav aria-label={ariaLabel} className="flex items-center gap-2">
+        {entries.map((entry) => (
+          <LinkComponent
+            key={entry.slug}
+            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"
+          >
+            <span
+              aria-hidden
+              className={cn("h-2.5 w-2.5 shrink-0 rounded-[3px]", !entry.gradient && "bg-border")}
+              style={entry.gradient ? { backgroundImage: entry.gradient } : undefined}
+            />
+            {entry.name}
+            <span className="tabular-nums text-muted-foreground">{formatCount(entry.count)}</span>
+          </LinkComponent>
+        ))}
+      </nav>
+    </ScrollFade>
+  );
+}

package/src/components/menu-index-list.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuIndexList } from "./menu-index-list";
+import { mockIndexEntries } from "./menu-mocks";
+
+const meta: Meta<typeof MenuIndexList> = {
+  title: "Menu/MenuIndexList",
+  component: MenuIndexList,
+  tags: ["autodocs"],
+  args: {
+    entries: mockIndexEntries,
+    title: `All ${mockIndexEntries.length} cuisines`,
+    subtitle: "Ordered by kitchens — every one has its own page",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The complete set, four across — and the reason the page below it can be progressive. This block carries a crawlable link to **every** destination the city has, so the richer blocks underneath are free to load ten at a time behind a *show more* without hiding anything a crawler needs. Get that backwards and the page silently stops linking to the twenty-eight it is supposed to index. Note the counts overlap: cuisines are non-exclusive tags (Cluj's thirty-eight sum to 3,182 against 767 places), so this is a ranked list of ways in, never a breakdown.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIndexList>;
+
+export const Default: Story = {};
+
+/** The long tail, which is where a layout tuned on the head of the list breaks. */
+export const Tail: Story = {
+  args: { entries: mockIndexEntries.slice(-8), title: "The tail" },
+};
+
+/** Two columns, not one: thirty-eight rows in one column is four screens. */
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/menu-index-list.tsx

@@ -0,0 +1,149 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * 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. */
+export type MenuIndexListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuIndexListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export 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;
+};
+
+export function MenuIndexList({
+  entries,
+  title,
+  subtitle,
+  formatCount = String,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuIndexListProps) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-border bg-card px-3.5 py-4 lg:px-5 lg:py-5",
+        className
+      )}
+    >
+      <div className="pb-2">
+        <h2 className="text-[15px] font-bold tracking-[-0.01em]">{title}</h2>
+        {subtitle && (
+          <p className="mt-0.5 text-[12.5px] text-muted-foreground">{subtitle}</p>
+        )}
+      </div>
+
+      {/*
+        Two columns on a phone, four from `lg`. One column at 390px turns
+        thirty-eight rows into four screens of scrolling for a list whose whole
+        job is to be scanned; two halves that, and the row still holds a name of
+        realistic length beside its count.
+      */}
+      <ul className="grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
+        {entries.map((entry) => (
+          <li key={entry.slug}>
+            {/* The DS `Separator`, above every row including the first.
+                It was `border-t … first:border-t-0 lg:first:border-t`, which
+                only exempted the very FIRST entry — so in the two-column phone
+                layout the top-left row had no rule and the top-right one, its
+                own neighbour, did. Ruling every row is both uniform and simpler
+                than restoring the exception per breakpoint. */}
+            <Separator />
+            <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"
+            >
+              <span
+                aria-hidden
+                className={cn(
+                  "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+                  !entry.gradient && "bg-border"
+                )}
+                style={entry.gradient ? { backgroundImage: entry.gradient } : undefined}
+              />
+              <span className="min-w-0 flex-1 truncate text-[13.5px]">{entry.name}</span>
+              <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
+                {formatCount(entry.count)}
+              </span>
+              <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
+              />
+            </LinkComponent>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/** Two columns on a phone, four from `lg` — the grid the list itself renders. */
+export function MenuIndexListSkeleton({
+  rows = 24,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-border bg-card px-3.5 py-4 lg:px-5 lg:py-5",
+        className
+      )}
+      aria-hidden
+    >
+      <Skeleton className="h-[15px] w-[140px]" />
+      <Skeleton className="mt-1.5 h-3 w-[240px]" />
+      <ul className="mt-2 grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
+        {Array.from({ length: rows }, (_, index) => (
+          <li key={index}>
+            <Separator />
+            <div className="flex items-center gap-2.5 py-2.5">
+              <Skeleton className="h-2.5 w-2.5 rounded-[3px]" />
+              <Skeleton className="h-3.5 flex-1" />
+              <Skeleton className="h-3 w-6" />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/components/menu-intent-hero.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Clock, Pizza } from "lucide-react";
+import { MenuIntentHero } from "./menu-intent-hero";
+import { mockGradients, mockIntentFigures } from "./menu-mocks";
+
+const meta: Meta<typeof MenuIntentHero> = {
+  title: "Menu/MenuIntentHero",
+  component: MenuIntentHero,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The head of an intent page. Every number in it is real and every one of them is a control — tapping a figure applies it as a filter rather than scrolling somewhere, so the hero is also the first filter. A figure with no `onSelect` renders as a plain fact, which is normally the total, since filtering to *all of them* is not a state. Distinct from `MenuHubHero`: that one introduces a city's whole menu and carries a search field; this one introduces a single intent.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIntentHero>;
+
+const base = {
+  title: "Italian tonight",
+  kicker: "TONIGHT · OPEN NOW OR LATER",
+  kickerIcon: <Clock className="h-3 w-3" />,
+  description:
+    "Two hundred and forty-seven kitchens in Cluj-Napoca cook Italian. Fifty-eight are still serving, four past midnight. Ranked by how often the reviews name their dishes.",
+  figures: mockIntentFigures,
+  gradient: mockGradients.pasta,
+  icon: <Pizza />,
+};
+
+export const Default: Story = { args: base };
+
+/** No constraint: the kicker states the kind instead, and the figures still filter. */
+export const Bare: Story = {
+  args: { ...base, title: "Italian", kicker: "CUISINE", kickerIcon: undefined },
+};
+
+/**
+ * Four across at 390px, and the paragraph stays.
+ *
+ * The board hid it under 640px. It is clamped here instead — it is the page's
+ * only prose and what the description meta is built from, so `display: none` on
+ * the one indexed sentence costs more than the three lines it saves.
+ */
+export const Mobile: Story = {
+  args: base,
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No gradient — visibly unstyled rather than white text on white. */
+export const NoGradient: Story = { args: { ...base, gradient: undefined, icon: undefined } };