@bearmenu/ui 0.8.8 → 0.8.10

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

@@ -0,0 +1,189 @@
+import { cn } from "../lib/utils";
+import type { MenuIntentFigure, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+/**
+ * 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.
+ */
+
+export 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;
+};
+
+export function MenuIntentHero({
+  title,
+  kicker,
+  kickerIcon,
+  description,
+  figures,
+  gradient,
+  icon,
+  linkComponent = DefaultLink,
+  className,
+}: MenuIntentHeroProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex overflow-hidden rounded-[18px] text-white lg:min-h-[210px]",
+        !gradient && "bg-foreground",
+        className
+      )}
+    >
+      {gradient && (
+        <span aria-hidden className="absolute inset-0" style={{ backgroundImage: gradient }} />
+      )}
+
+      {icon && (
+        <span
+          aria-hidden
+          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]"
+        >
+          {icon}
+        </span>
+      )}
+
+      <div className="relative z-[1] flex w-full flex-col gap-2.5 p-5 lg:gap-[11px] lg:px-[26px] lg:py-6">
+        {kicker && (
+          <span className="flex items-center gap-1.5 text-[10.5px] font-extrabold uppercase tracking-[0.13em] opacity-[0.82]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h1 className="font-serif text-[29px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[40px]">
+          {title}
+        </h1>
+
+        {description && (
+          <p className="line-clamp-3 max-w-[520px] text-[13.5px] leading-[1.55] opacity-85 lg:line-clamp-none lg:text-sm">
+            {description}
+          </p>
+        )}
+
+        {figures && figures.length > 0 && (
+          <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">
+            {figures.map((figure) => (
+              <Figure key={figure.key} figure={figure} linkComponent={linkComponent} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A figure is a control only when it does something.
+ *
+ * The alternative — every figure a button, the inert ones disabled — offers
+ * four controls and refuses one of them for a reason the reader cannot see.
+ *
+ * A LINK when it carries an `href`, a button only when the caller is holding
+ * the state in memory. The link is the better shape wherever the state is in
+ * the URL: it renders on the server, it is middle-clickable, and `?open=now` is
+ * a state we want a crawler to follow.
+ */
+function Figure({
+  figure,
+  linkComponent: LinkComponent,
+}: {
+  figure: MenuIntentFigure;
+  linkComponent: MenuLinkComponent;
+}) {
+  const body = (
+    <>
+      <span className="block text-xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-2xl">
+        {figure.value}
+      </span>
+      <span className="mt-1 block text-[11px] leading-tight opacity-[0.72]">{figure.label}</span>
+    </>
+  );
+
+  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 (
+      <LinkComponent
+        href={figure.href}
+        aria-current={figure.active ? "page" : undefined}
+        className={interactive}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (!figure.onSelect) return <span className="block min-w-0">{body}</span>;
+
+  return (
+    <button
+      type="button"
+      onClick={figure.onSelect}
+      aria-pressed={figure.active}
+      className={interactive}
+    >
+      {body}
+    </button>
+  );
+}

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Beef, Coffee, Leaf, MapPin, Pizza, UtensilsCrossed } from "lucide-react";
+import { MenuIntentTiles } from "./menu-intent-tiles";
+import { mockIntentTiles } from "./menu-mocks";
+
+const icons = [Pizza, Beef, Coffee, UtensilsCrossed, Leaf, MapPin];
+const tiles = mockIntentTiles.map((tile, index) => {
+  const Icon = icons[index];
+  return { ...tile, icon: <Icon /> };
+});
+
+const meta: Meta<typeof MenuIntentTiles> = {
+  title: "Menu/MenuIntentTiles",
+  component: MenuIntentTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The sentence people arrive with, as six coloured tiles. An intent is a family plus a constraint — Italian *tonight*, burgers, coffee — and 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 linking nowhere. Roughly thirty-two of thirty-eight cuisines have a page, so that is the normal case, not the edge one.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIntentTiles>;
+
+export const Default: Story = { args: { tiles } };
+
+/** Two-up on a phone, six-up from `lg`. */
+export const Mobile: Story = {
+  args: { tiles },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Without icons the tiles still read — the watermark is recognition, not information. */
+export const WithoutIcons: Story = { args: { tiles: mockIntentTiles } };
+
+/** Fewer tiles than a full row: the grid does not stretch them. */
+export const Partial: Story = { args: { tiles: tiles.slice(0, 3) } };

package/src/components/menu-intent-tiles.tsx

@@ -0,0 +1,76 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import type { MenuIntentTile, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * 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. */
+export type MenuIntentTilesLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuIntentTilesLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuIntentTilesProps = {
+  tiles: MenuIntentTile[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuIntentTiles({
+  tiles,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuIntentTilesProps) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-3 lg:grid-cols-6 lg:gap-3.5",
+        className
+      )}
+    >
+      {tiles.map((tile) => (
+        <LinkComponent
+          key={tile.slug}
+          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 } : undefined}
+        >
+          {tile.icon && (
+            <span
+              aria-hidden
+              className="pointer-events-none absolute -bottom-2.5 -right-1.5 z-0 opacity-[0.22] [&>svg]:h-[62px] [&>svg]:w-[62px]"
+            >
+              {tile.icon}
+            </span>
+          )}
+
+          <span className="relative z-[1] flex h-full flex-col">
+            <span className="text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em]">
+              {tile.label}
+            </span>
+            {tile.caption && (
+              <span className="mt-[3px] text-[11.5px] leading-[1.35]">{tile.caption}</span>
+            )}
+            <ChevronRight className="mt-auto h-4 w-4 opacity-85" aria-hidden />
+          </span>
+        </LinkComponent>
+      ))}
+    </div>
+  );
+}