@bearmenu/ui 0.8.7 → 0.8.9

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.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SnapRail } from "./snap-rail";
+
+const meta: Meta<typeof SnapRail> = {
+  title: "Primitives/SnapRail",
+  component: SnapRail,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-surface-2 p-3">
+        <div className="rounded-[18px] bg-card px-3.5 py-4">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A swipe-driven rail with mandatory snap points. Direct children become the snap targets and take the rail's item width; `bleed` lets the rail run under its host's padding while still snapping to the host's content edge.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SnapRail>;
+
+function Poster({ label }: { label: string }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="aspect-[4/3] rounded-xl bg-muted" />
+      <div className="text-[13.5px] font-bold">{label}</div>
+    </div>
+  );
+}
+
+const cards = ["Psihotrop Live", "Jazz in the Yard", "Quiz Night", "Techno Basement", "Vinyl Hour"];
+
+/** 46% items: two cards in view and a third peeking. The category-deck width. */
+export const Small: Story = {
+  args: {
+    itemWidth: "sm",
+    bleed: "card",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};
+
+/** 60% items: one card and a strong peek. The featured-rail width. */
+export const Medium: Story = {
+  args: {
+    itemWidth: "md",
+    bleed: "card",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};
+
+/** 80% items: one card at a time with a sliver of the next. */
+export const Large: Story = {
+  args: {
+    itemWidth: "lg",
+    bleed: "card",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};
+
+/**
+ * Without `bleed` the first card snaps flush to the host's padding edge and
+ * the rail's clip sits inside the card's rounded corner. Kept to show the
+ * difference; every hub card wants `bleed="card"`.
+ */
+export const NoBleed: Story = {
+  args: {
+    itemWidth: "sm",
+    bleed: "none",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};

package/src/components/snap-rail.test.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { SnapRail } from "./snap-rail";
+
+describe("SnapRail", () => {
+  it("applies the item width and bleed variants to the rail", () => {
+    const { container } = render(
+      <SnapRail itemWidth="md" bleed="card" data-testid="rail">
+        <div>a</div>
+        <div>b</div>
+      </SnapRail>
+    );
+    const rail = container.firstElementChild as HTMLElement;
+    expect(rail.className).toContain("snap-mandatory");
+    expect(rail.className).toContain("[&>*]:w-[60%]");
+    expect(rail.className).toContain("scroll-px-3.5");
+  });
+});

package/src/components/snap-rail.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * SnapRail — a horizontal, finger-driven rail with mandatory snap points, the
+ * way a native app lays out a row of cards. Not `DriftRail`: that one moves on
+ * its own and is for ambience; this one waits to be swiped and is for content
+ * the reader is expected to reach.
+ *
+ * Every direct child becomes a snap target and takes the rail's item width, so
+ * callers pass bare cards — no wrapper, no per-item width. Widths are
+ * percentages of the rail, so the peek of the next card is what tells the
+ * reader there is more; there is no scrollbar and no edge fade.
+ *
+ * `bleed` cancels the host's horizontal padding and restores it as scroll
+ * padding, so the first card lines up with the host's content edge and the
+ * rail still snaps to that same edge after a swipe. Without it, the rail
+ * snaps flush to the host's rounded corner and loads looking pre-scrolled.
+ * `card` is the 14px inset of a hub card; `page` is the 16px page gutter.
+ */
+const snapRailVariants = cva(
+  cn(
+    "flex snap-x snap-mandatory overflow-x-auto pb-0.5 scrollbar-hide",
+    "[&>*]:shrink-0 [&>*]:snap-start"
+  ),
+  {
+    variants: {
+      itemWidth: {
+        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",
+        default: "gap-3",
+      },
+      bleed: {
+        none: "",
+        card: "-mx-3.5 px-3.5 scroll-px-3.5",
+        page: "-mx-4 px-4 scroll-px-4",
+      },
+    },
+    defaultVariants: {
+      itemWidth: "sm",
+      gap: "default",
+      bleed: "none",
+    },
+  }
+);
+
+export type SnapRailProps = React.HTMLAttributes<HTMLDivElement> &
+  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, 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>
+  );
+}