@bearmenu/ui 0.8.8 → 0.8.9

package/src/components/signature-chip.tsx

@@ -0,0 +1,77 @@
+import { Badge } from "./badge";
+import { cn } from "../lib/utils";
+
+/**
+ * "Signature" / "Mentioned" — the marker for a menu item the review digest
+ * backs, shared by `<MenuItem>` and the dish/drink cards so the same claim
+ * never renders two different ways.
+ *
+ * When `onEvidence` is supplied the chip becomes a button that opens the
+ * reviews behind it, and takes a dashed outline to read as interactive. That is
+ * the whole differentiator: every competitor badges items ("Nou", "NEW"), none
+ * can show you why. Without evidence it degrades to a plain label rather than
+ * offering a tap that would reveal nothing.
+ *
+ * `stopPropagation` matters on every host: the row is a `role="button"` and the
+ * cards carry a stretched crawlable `<a>` overlay, so an un-stopped click would
+ * also open the item drawer. On the cards it must additionally out-rank that
+ * overlay's `z-[1]`, hence `relative z-[2]` from the caller.
+ *
+ * `surface="image"` is for card covers, where the chip sits over the photo
+ * rather than in the caption block. The accent-on-canvas palette has no
+ * contrast guarantee over an arbitrary photo, so it swaps to the same frosted
+ * fill the place badge uses there and keeps the dashed edge — which is what
+ * says "there is evidence behind this" — in the inverted colour.
+ *
+ * The label is passed in: the DS owns no translation keys.
+ */
+
+export type SignatureChipProps = {
+  /** Already translated. `strong` → "Signature", `weak` → "Mentioned". */
+  label: string;
+  onEvidence?: () => void;
+  /** `image` = over a card cover; `canvas` = in a caption or row. */
+  surface?: "canvas" | "image";
+  className?: string;
+};
+
+export function SignatureChip({
+  label,
+  onEvidence,
+  surface = "canvas",
+  className,
+}: SignatureChipProps) {
+  const shared = "h-4 shrink-0 px-1.5 text-[10px] font-medium uppercase tracking-wider";
+  const onImage = surface === "image";
+
+  if (!onEvidence) {
+    return (
+      <Badge variant={onImage ? "overlay" : "secondary"} className={cn(shared, className)}>
+        {label}
+      </Badge>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onEvidence();
+      }}
+      className={cn(
+        shared,
+        "inline-flex items-center rounded-full border border-dashed",
+        onImage
+          ? "border-background/70 bg-foreground/70 text-background backdrop-blur-sm hover:bg-foreground/85"
+          : "border-accent/40 text-accent hover:bg-accent/10",
+        "focus-visible:outline-none focus-visible:ring-2",
+        onImage ? "focus-visible:ring-background/70" : "focus-visible:ring-accent/40",
+        className
+      )}
+    >
+      {label}
+    </button>
+  );
+}

package/src/components/signature-line-list.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockHubLabels, mockVenues } from "./menu-mocks";
+import { SignatureLineList } from "./signature-line-list";
+
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+const formatPrice = (amount: number) => String(amount);
+
+const labels = itemLabels;
+
+const metaLabels = {
+  "the-copper-yard": "pub · Centru",
+  "salt-and-stone": "italian · Centru",
+  "the-quiet-hours": "coffee · Centru",
+  "green-room-canteen": "vegetarian · Mărăști",
+};
+
+const hues = {
+  "the-copper-yard": "oklch(0.52 0.15 25)",
+  "salt-and-stone": "oklch(0.62 0.14 55)",
+  "the-quiet-hours": "oklch(0.58 0.09 70)",
+};
+
+
+const meta: Meta<typeof SignatureLineList> = {
+  title: "Menu/SignatureLineList",
+  component: SignatureLineList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[980px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Family, venue, dish, price and reputation on one line — the densest surface on the hub, and the one that most nearly justifies the whole catalogue. Two targets per row on purpose: the venue line goes to the venue, the item row goes to that item across every kitchen that makes it. Collapsing them into one tap loses the comparison that makes the item worth showing. They are separate anchors rather than a button nested in a link, which would be invalid.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SignatureLineList>;
+
+export const Default: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    labels,
+    formatPrice,
+    metaLabels,
+    hues,
+  },
+};
+
+/** The last venue has no signature — the row is a venue line and nothing else. */
+export const MixedEvidence: Story = {
+  args: { venues: mockVenues, labels, formatPrice, metaLabels, hues },
+};
+
+/** Below `lg` the row stacks: venue line, then the full item row underneath. */
+export const Mobile: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    labels,
+    formatPrice,
+    metaLabels,
+    hues,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/signature-line-list.tsx

@@ -0,0 +1,136 @@
+import { ChevronRight, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * SignatureLineList — family, venue, dish, price and reputation on one line.
+ *
+ * The densest surface on the hub, and the one that most nearly justifies the
+ * whole catalogue: every row ties a kitchen to the single thing its reviewers
+ * keep naming, with the price and the count that back it.
+ *
+ * ## Two targets per row, deliberately
+ *
+ * The venue line goes to the venue; the item row goes to the item across every
+ * kitchen that makes it. Those are genuinely different destinations, and
+ * collapsing them into one tap loses the comparison that makes the item worth
+ * showing. They are separate anchors rather than one anchor with a nested
+ * button, which would be invalid markup.
+ *
+ * Below `lg` the row stacks: venue line first, then the full `<MenuItem>`
+ * underneath. The desktop layout puts them side by side. Same markup, one
+ * breakpoint — no second component.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type SignatureLineListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: SignatureLineListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type SignatureLineListProps = {
+  venues: MenuVenuePreview[];
+  /** Passed through to each `<MenuItem>`. */
+  labels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  /** Composed meta line per venue, keyed by place slug, e.g. "romanian · Centru". */
+  metaLabels?: Record<string, string>;
+  /** The row's category mark per venue, keyed by place slug. */
+  hues?: Record<string, string>;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function SignatureLineList({
+  venues,
+  labels,
+  formatPrice,
+  formatCount,
+  metaLabels,
+  hues,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: SignatureLineListProps) {
+  return (
+    <ul className={cn("flex flex-col", className)}>
+      {venues.map((venue, index) => {
+        const { place, signature } = venue;
+
+        return (
+          <li
+            key={place.slug}
+            className="grid gap-x-4 py-3.5 lg:grid-cols-[minmax(0,260px)_minmax(0,1fr)] lg:items-center"
+          >
+            {/* The DS rule between rows, spanning both grid columns. */}
+            {index > 0 && <Separator className="mb-3.5 lg:col-span-2" />}
+            <LinkComponent
+              href={venue.href}
+              className="flex items-center gap-3 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <span className="relative h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-16 lg:w-16">
+                {place.thumbnail_url && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={place.thumbnail_url}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    loading="lazy"
+                  />
+                )}
+                {place.open_now && (
+                  <i
+                    aria-hidden
+                    className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+                  />
+                )}
+              </span>
+
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-[15px] font-bold tracking-[-0.01em]">
+                  {place.name}
+                </span>
+                <span className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+                  {place.rating && (
+                    <>
+                      <Star className="h-[11px] w-[11px]" aria-hidden />
+                      <span className="tabular-nums">{place.rating.rating}</span>
+                    </>
+                  )}
+                  {metaLabels?.[place.slug] && (
+                    <span className="truncate">{metaLabels[place.slug]}</span>
+                  )}
+                </span>
+              </span>
+
+              <ChevronRight
+                className="h-4 w-4 shrink-0 text-muted-foreground lg:hidden"
+                aria-hidden
+              />
+            </LinkComponent>
+
+            {signature && (
+              <MenuItem
+                item={signature.item}
+                labels={labels}
+                formatPrice={formatPrice}
+                formatCount={formatCount}
+                markGradient={hues?.[place.slug]}
+                subtitle={signature.why}
+                showSignatureBadge={signature.isSignature}
+                href={signature.href}
+                linkComponent={LinkComponent}
+                className="min-w-0"
+              />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/snap-rail.tsx

@@ -32,6 +32,8 @@ const snapRailVariants = cva(
         sm: "[&>*]:w-[46%]",
         md: "[&>*]:w-[60%]",
         lg: "[&>*]:w-[80%]",
+        /** One card per view — pair with `dots` so the reader knows there is more. */
+        full: "[&>*]:w-full",
       },
       gap: {
         sm: "gap-2",
@@ -52,16 +54,95 @@ const snapRailVariants = cva(
 );
 
 export type SnapRailProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof snapRailVariants>;
+  VariantProps<typeof snapRailVariants> & {
+    /**
+     * Page dots under the rail, one per child, the current one filled. For
+     * `itemWidth="full"`, where no next card peeks in to say there is more.
+     * Decorative: the rail itself is the control, and every card is reachable
+     * by scrolling, so the dots are `aria-hidden`.
+     */
+    dots?: boolean;
+    /** Classes for the dots row, e.g. `lg:hidden` where the rail becomes a grid. */
+    dotsClassName?: string;
+  };
 
 export const SnapRail = React.forwardRef<HTMLDivElement, SnapRailProps>(
-  ({ className, itemWidth, gap, bleed, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="snap-rail"
-      className={cn(snapRailVariants({ itemWidth, gap, bleed }), className)}
-      {...props}
-    />
-  )
+  ({ className, itemWidth, gap, bleed, dots, dotsClassName, children, ...props }, ref) => {
+    const railRef = React.useRef<HTMLDivElement | null>(null);
+    const [active, setActive] = React.useState(0);
+    const count = React.Children.count(children);
+
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        railRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+
+    // The child whose left edge is nearest the rail's scroll-padding edge is
+    // the current page. Read on scroll, rAF-throttled; passive so it never
+    // blocks the swipe it watches.
+    React.useEffect(() => {
+      if (!dots) return;
+      const rail = railRef.current;
+      if (!rail) return;
+      let frame = 0;
+      const sync = () => {
+        frame = 0;
+        const origin = rail.scrollLeft + parseFloat(getComputedStyle(rail).scrollPaddingLeft || "0");
+        let best = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        Array.from(rail.children).forEach((child, index) => {
+          const distance = Math.abs((child as HTMLElement).offsetLeft - origin);
+          if (distance < bestDistance) {
+            bestDistance = distance;
+            best = index;
+          }
+        });
+        setActive(best);
+      };
+      const onScroll = () => {
+        if (!frame) frame = requestAnimationFrame(sync);
+      };
+      sync();
+      rail.addEventListener("scroll", onScroll, { passive: true });
+      return () => {
+        if (frame) cancelAnimationFrame(frame);
+        rail.removeEventListener("scroll", onScroll);
+      };
+    }, [dots, count]);
+
+    const rail = (
+      <div
+        ref={setRefs}
+        data-slot="snap-rail"
+        className={cn(snapRailVariants({ itemWidth, gap, bleed }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+
+    if (!dots) return rail;
+
+    return (
+      <div className="flex flex-col gap-3">
+        {rail}
+        <div aria-hidden className={cn("flex justify-center gap-1.5", dotsClassName)}>
+          {Array.from({ length: count }, (_, index) => (
+            <span
+              key={index}
+              className={cn(
+                "h-1.5 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none",
+                index === active ? "w-4 bg-foreground" : "w-1.5 bg-foreground/25"
+              )}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
 );
 SnapRail.displayName = "SnapRail";

package/src/components/stat-banner.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowRight } from "lucide-react";
+import { Button } from "./button";
+import { StatBanner } from "./stat-banner";
+
+const meta: Meta<typeof StatBanner> = {
+  title: "Menu/StatBanner",
+  component: StatBanner,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[520px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One claim about the catalogue, carried by a single number. These sit between the modules that list things and give the page somewhere to STATE what it knows rather than only showing it. Two side by side is the usual arrangement, which is a caller's grid rather than a `StatBannerPair` component — pairing is layout, and a consumer wanting one, three, or a different order should not have to fight a wrapper. Pass `scale` only when all three values come from the same real measurement.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StatBanner>;
+
+export const Dark: Story = {
+  args: {
+    tone: "dark",
+    kicker: "ONE DISH, A DOZEN NAMES",
+    headline: "“Margherita” appears on eighty-seven menus and never twice the same way.",
+    body: "We match them anyway, so the price comparison is real.",
+    watermark: "12",
+    action: (
+      <Button size="sm" variant="secondary">
+        How concepts work
+      </Button>
+    ),
+  },
+};
+
+export const Warm: Story = {
+  args: {
+    tone: "warm",
+    kicker: "THE REVIEW CENSUS",
+    figure: "100",
+    figureUnit: "%",
+    body: "Every one of the 45,140 items carries a mention count read from the reviews. The typical dish is named twelve times; the most-named, sixty-eight.",
+    scale: ["1", "12", "68"],
+    action: (
+      <Button size="sm" variant="ghost">
+        How the census works
+        <ArrowRight className="h-3.5 w-3.5" />
+      </Button>
+    ),
+  },
+};
+
+/** The pair, as the hub arranges it — a caller's grid, not a component. */
+export const AsAPair: Story = {
+  render: () => (
+    <div className="grid gap-5 lg:grid-cols-2">
+      <StatBanner
+        tone="dark"
+        kicker="ONE DISH, A DOZEN NAMES"
+        headline="Eighty-seven menus, a dozen names."
+        watermark="12"
+      />
+      <StatBanner
+        tone="warm"
+        kicker="THE REVIEW CENSUS"
+        figure="100"
+        figureUnit="%"
+        body="A mention count on every item in the catalogue."
+        scale={["1", "12", "68"]}
+      />
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No scale — because nothing counted the distribution. */
+export const WithoutScale: Story = {
+  args: {
+    tone: "warm",
+    kicker: "THE WIDEST SPREAD WE FOUND",
+    figure: "4.99",
+    figureUnit: "— 30 lei",
+    body: "The same espresso, across the ninety-eight bars and cafés that pour one.",
+  },
+};

package/src/components/stat-banner.tsx

@@ -0,0 +1,117 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * StatBanner — one claim about the catalogue, carried by a single number.
+ *
+ * These sit between the modules that list things and give the page somewhere to
+ * state what it knows rather than only showing it. Two side by side is the
+ * usual arrangement, which is a caller's grid rather than a `StatBannerPair`
+ * component — pairing is layout, and a consumer wanting one, or three, or a
+ * different order should not have to fight a wrapper for it.
+ *
+ * `scale` draws the distribution the figure sits in — low, the figure, high.
+ * Pass it only when all three are real numbers from the same measurement; a
+ * scale invented around a figure is worse than no scale, because it implies a
+ * spread nobody counted.
+ *
+ * Server-safe.
+ */
+
+const bannerVariants = cva(
+  "relative flex flex-col gap-2 overflow-hidden rounded-[18px] p-5",
+  {
+    variants: {
+      tone: {
+        /** Dark ground, for the claim that needs the most weight. */
+        dark: "bg-[oklch(0.21_0.012_55)] text-white",
+        /** Tinted ground, for the supporting figure beside it. */
+        warm: "bg-accent-subtle text-foreground",
+      },
+    },
+    defaultVariants: { tone: "dark" },
+  }
+);
+
+export type StatBannerProps = VariantProps<typeof bannerVariants> & {
+  /** Small caps kicker, e.g. "THE REVIEW CENSUS". */
+  kicker?: string;
+  /**
+   * The headline claim. On the dark tone this is the whole point; on the warm
+   * one it usually sits under `figure`.
+   */
+  headline?: string;
+  body?: string;
+  /** The number itself, pre-formatted, e.g. "100". */
+  figure?: string;
+  /** Unit set small beside the figure, e.g. "%" or "lei". */
+  figureUnit?: string;
+  /** Oversized watermark numeral behind the content. */
+  watermark?: string;
+  /** Low, middle and high of the distribution. All three, or none. */
+  scale?: [string, string, string];
+  /** The action — pass a rendered link or button. */
+  action?: React.ReactNode;
+  className?: string;
+};
+
+export function StatBanner({
+  tone,
+  kicker,
+  headline,
+  body,
+  figure,
+  figureUnit,
+  watermark,
+  scale,
+  action,
+  className,
+}: StatBannerProps) {
+  return (
+    <div className={cn(bannerVariants({ tone }), className)}>
+      {watermark && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute -bottom-8 right-2 select-none font-serif text-[150px] font-bold leading-none opacity-[0.08]"
+        >
+          {watermark}
+        </span>
+      )}
+
+      <div className="relative z-[1] flex flex-1 flex-col gap-2">
+        {kicker && (
+          <span className="text-[10px] font-bold tracking-[0.11em] opacity-80">{kicker}</span>
+        )}
+
+        {figure && (
+          <div className="text-[40px] font-extrabold leading-none tracking-[-0.03em] tabular-nums">
+            {figure}
+            {figureUnit && (
+              <span className="ml-1 text-lg font-extrabold">{figureUnit}</span>
+            )}
+          </div>
+        )}
+
+        {headline && (
+          <h3 className="font-serif text-xl font-semibold leading-[1.2] tracking-[-0.02em] lg:text-2xl">
+            {headline}
+          </h3>
+        )}
+
+        {body && <p className="text-[13px] leading-[1.5] opacity-85">{body}</p>}
+
+        {scale && (
+          <div className="mt-1 flex items-center gap-2 text-[11px] tabular-nums opacity-70">
+            <span>{scale[0]}</span>
+            <span aria-hidden className="h-px flex-1 bg-current opacity-30" />
+            <span>{scale[1]}</span>
+            <span aria-hidden className="h-px flex-1 bg-current opacity-30" />
+            <span>{scale[2]}</span>
+          </div>
+        )}
+
+        {action && <div className="mt-auto flex items-center pt-3">{action}</div>}
+      </div>
+    </div>
+  );
+}

package/src/components/venue-busyness-strip.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockPlaces } from "./menu-mocks";
+import { VenueBusynessStrip } from "./venue-busyness-strip";
+
+const busyness = mockPlaces[0].busyness!;
+
+const meta: Meta<typeof VenueBusynessStrip> = {
+  title: "Menu/VenueBusynessStrip",
+  component: VenueBusynessStrip,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[560px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "When a venue actually fills up, as a bar per hour. The API serves one score per hour of the venue's OWN trading day, so the strip has no fixed length — a bakery closing at three and a club open until four draw different numbers of bars, and padding either to 24 would put empty columns under hours the venue is shut. The rush is derived relative to that venue's own peak, because a fixed score threshold would mark every hour at a busy venue and none at a quiet one.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueBusynessStrip>;
+
+export const Default: Story = {
+  args: {
+    busyness,
+    caption: "Usually not busy until 18:00 — the rush is seven to eight.",
+  },
+};
+
+/** No caption: the bars alone, for a tight row. */
+export const BarsOnly: Story = { args: { busyness } };
+
+/** A short trading day draws a short strip rather than padding to 24. */
+export const ShortDay: Story = {
+  args: {
+    busyness: [
+      { hour: 8, score: 40 },
+      { hour: 9, score: 72 },
+      { hour: 10, score: 88 },
+      { hour: 11, score: 60 },
+      { hour: 12, score: 34 },
+    ],
+    caption: "Busiest first thing — quiet by noon.",
+  },
+};
+
+/** A flat day: `peakRatio` still finds the top of it, because it is relative. */
+export const Flat: Story = {
+  args: {
+    busyness: Array.from({ length: 10 }, (_, index) => ({ hour: 12 + index, score: 30 })),
+    caption: "Steady all day.",
+  },
+};
+
+/** All zeros — no reading. The strip renders nothing rather than a flat line. */
+export const NoReading: Story = {
+  args: { busyness: Array.from({ length: 8 }, (_, index) => ({ hour: index, score: 0 })) },
+};