@bearmenu/ui 0.8.9 → 0.8.11

package/dist/components/top-cross-link.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+type TopCrossLinkProps = {
+    /**
+     * `row` (default) — the way OUT of the ranking, full width under the list.
+     * `panel` — the way IN, stacked, for a narrow column beside a browse list.
+     */
+    variant?: "row" | "panel";
+    /** e.g. "RANKED". `panel` only; drawn over the title with `icon` inline. */
+    kicker?: string;
+    title: string;
+    description: string;
+    /**
+     * The link's text. Prefer the destination's own headline over a generic
+     * "see more": the reader lands on a page whose `<h1>` is the string they
+     * tapped, and it is the anchor text the destination actually wants.
+     */
+    cta: string;
+    href: string;
+    /** Finished CSS gradient for the ground. `panel` only. */
+    gradient?: string;
+    /** Names the DESTINATION. Defaults to `LayoutList` on `row`, `Trophy` on `panel`. */
+    icon?: React.ReactNode;
+    /** The title's element. `b` by default on `row`, `h2` on `panel`. */
+    as?: "h2" | "h3" | "b";
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopCrossLink({ variant, kicker, title, description, cta, href, gradient, icon, as, linkComponent: LinkComponent, className, }: TopCrossLinkProps): react_jsx_runtime.JSX.Element;
+
+export { TopCrossLink, type TopCrossLinkProps };

package/dist/components/top-cross-link.js

@@ -0,0 +1,101 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ArrowRight, Trophy, LayoutList } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var CTA = cn(
+  "rounded-xl bg-accent font-bold text-accent-foreground",
+  "transition-opacity duration-150 hover:opacity-90",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  "motion-reduce:transition-none"
+);
+function TopCrossLink({
+  variant = "row",
+  kicker,
+  title,
+  description,
+  cta,
+  href,
+  gradient,
+  icon,
+  as,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const isPanel = variant === "panel";
+  const Heading = as != null ? as : isPanel ? "h2" : "b";
+  const glyph = icon != null ? icon : isPanel ? /* @__PURE__ */ jsx(Trophy, {}) : /* @__PURE__ */ jsx(LayoutList, {});
+  if (!isPanel) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-3 rounded-[18px] border border-border bg-card p-4",
+          "lg:flex-row lg:items-center lg:gap-5 lg:p-5",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground [&>svg]:h-5 [&>svg]:w-5", children: glyph }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Heading, { className: "block text-[15px] font-bold tracking-[-0.01em]", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[13px] leading-relaxed text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href,
+              className: cn(
+                CTA,
+                "inline-flex min-h-11 shrink-0 items-center justify-center gap-2 px-5 py-2.5 text-sm"
+              ),
+              children: [
+                cta,
+                /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 shrink-0", "aria-hidden": true })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-[18px] border border-border bg-card shadow-[var(--shadow-card)]",
+        className
+      ),
+      children: [
+        gradient && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0", style: { backgroundImage: gradient } }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] p-4 lg:p-5", children: [
+          kicker && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[10.5px] font-extrabold uppercase tracking-[0.13em] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "[&>svg]:h-3 [&>svg]:w-3 [&>svg]:shrink-0", children: glyph }),
+            kicker
+          ] }),
+          /* @__PURE__ */ jsx(Heading, { className: "mt-2 block font-serif text-[20px] font-bold leading-[1.12] tracking-[-0.02em] text-foreground lg:text-[21px]", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[13px] leading-relaxed text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href,
+              className: cn(
+                CTA,
+                "mt-4 flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-[13.5px] leading-snug"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: cta }),
+                /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 shrink-0", "aria-hidden": true })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { TopCrossLink };

package/dist/components/top-ranking-entry.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuItemLabels } from './menu-item.js';
+import { MenuItemPreview, MenuLinkComponent } from './menu-types.js';
+import { TopRankEntry } from './top-types.js';
+import 'react';
+import './place-types.js';
+
+type TopRankingEntryLabels = {
+    /** Heading over the menu rows when the venue's own group is unknown. */
+    signature: string;
+    /** Accessible name for the dish link. */
+    openDish: (name: string) => string;
+    /** Passed through to the production `<MenuItem>`. */
+    item: MenuItemLabels;
+    /**
+     * Opens an item's drawer. The DS owns no routing, so the caller composes it.
+     *
+     * Takes the ITEM, not its slug: a menu row is a dish or a drink and the two
+     * resolve through different endpoints, so the caller has to see `kind` to
+     * build the right link. `undefined` leaves the row inert, which is the
+     * text-only must-try mention with no live menu row behind it.
+     */
+    itemHref: (item: MenuItemPreview) => string | undefined;
+};
+type TopRankingEntryProps = {
+    entry: TopRankEntry;
+    labels: TopRankingEntryLabels;
+    formatPrice: (amount: number) => string;
+    formatCount?: (value: number) => string;
+    /** The category's hue, for the menu rows' colour mark. */
+    markGradient?: string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopRankingEntry({ entry, labels, formatPrice, formatCount, markGradient, linkComponent: LinkComponent, className, }: TopRankingEntryProps): react_jsx_runtime.JSX.Element;
+/**
+ * The entry's own loading state, at the entry's footprint.
+ *
+ * The cover keeps its 3:2 on the phone and its 4:5 at 300px wide on desktop, so
+ * the article does not jump when the photographs land — the one reflow a long,
+ * scrolled page cannot afford. (This said "4:3 … 300×225" for a while after the
+ * cover changed underneath it, which is the failure mode a skeleton in the same
+ * file as its component is supposed to prevent.)
+ */
+declare function TopRankingEntrySkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/** A run of entries — the ranking's loading state. */
+declare function TopRankingListSkeleton({ rows }: {
+    rows?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { TopRankingEntry, type TopRankingEntryLabels, type TopRankingEntryProps, TopRankingEntrySkeleton, TopRankingListSkeleton };

package/dist/components/top-ranking-entry.js

@@ -0,0 +1,217 @@
+import { MenuItem } from '../chunk-UDTG3RSE.js';
+import '../chunk-6TEEY5YA.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import '../chunk-2CXU5WZO.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { MapPin, Star, MessageSquareQuote } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var ENTRY_COVER_SCRIM = "bg-[linear-gradient(180deg,oklch(0.16_0.012_55_/_0)_0px,oklch(0.16_0.012_55_/_0.06)_16px,oklch(0.16_0.012_55_/_0.3)_32px,oklch(0.16_0.012_55_/_0.72)_48px,oklch(0.16_0.012_55_/_0.95)_100%)]";
+function TopRankingEntry({
+  entry,
+  labels,
+  formatPrice,
+  formatCount,
+  markGradient,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  var _a, _b, _c;
+  const initial = ((_b = (_a = entry.name.match(new RegExp("\\p{L}", "u"))) == null ? void 0 : _a[0]) != null ? _b : "").toLocaleUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      id: entry.slug,
+      className: cn("grid grid-cols-1 gap-0 py-6 lg:flex lg:flex-row lg:gap-7", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: entry.href,
+            className: "col-start-1 row-start-1 block shrink-0 overflow-hidden rounded-xl transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:opacity-90 motion-reduce:transition-none lg:sticky lg:top-4 lg:w-[300px] lg:self-start",
+            children: /* @__PURE__ */ jsx("span", { className: "relative block aspect-[3/2] w-full bg-[oklch(0.21_0.012_55)] lg:aspect-[4/5] lg:bg-[repeating-linear-gradient(135deg,oklch(0.82_0.014_55)_0_10px,oklch(0.87_0.01_58)_10px_20px)]", children: entry.coverUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: entry.coverUrl,
+                  alt: "",
+                  loading: "lazy",
+                  decoding: "async",
+                  className: "h-full w-full object-cover"
+                }
+              )
+            ) : (
+              /* Never a grey box: the warm ground with the venue's initial, the
+                 rule `MenuFamilyBlock` states. Phone only — desktop keeps its
+                 stripes. The stripes are a LIGHT surface in both themes, so at
+                 this size they would be a pale rectangle under white type.
+                 The ground stays on the parent span, so a 404 on `coverUrl`
+                 degrades to the same surface for free. */
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-0 flex items-center justify-center lg:hidden",
+                  children: /* @__PURE__ */ jsx("span", { className: "font-serif text-[64px] font-semibold leading-none text-white/25", children: initial })
+                }
+              )
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "contents lg:block lg:min-w-0 lg:flex-1", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                /* `relative z-[1]`: without it this block's background is a
+                   non-positioned box's background, which paints in an earlier phase
+                   than the cover's replaced `<img>` — so the scrim went UNDER the
+                   photograph and the white type landed on bare image. Positioning
+                   it lifts the whole block, background included, above the image.
+                   Harmless at `lg`, where the two no longer overlap. */
+                "pointer-events-none relative z-[1] col-start-1 row-start-1 flex flex-wrap items-end gap-x-3 gap-y-0 self-end",
+                "rounded-b-xl px-3.5 pb-3.5 pt-12 [text-shadow:0_1px_2px_oklch(0.16_0.012_55_/_0.45)]",
+                ENTRY_COVER_SCRIM,
+                "lg:pointer-events-auto lg:flex-nowrap lg:items-start lg:gap-3 lg:rounded-none lg:bg-none lg:p-0 lg:[text-shadow:none]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "basis-full text-[11px] font-bold leading-none tabular-nums text-white/70 lg:basis-auto lg:font-serif lg:text-[28px] lg:font-semibold lg:text-muted-foreground",
+                    children: entry.rank
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 text-lg font-bold leading-tight tracking-[-0.015em] text-white lg:line-clamp-none lg:text-foreground", children: /* @__PURE__ */ jsx(
+                    LinkComponent,
+                    {
+                      href: entry.href,
+                      className: "pointer-events-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white lg:focus-visible:ring-ring lg:hover:text-accent",
+                      children: entry.name
+                    }
+                  ) }),
+                  entry.district && /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex items-center gap-1 text-[12.5px] text-white/80 lg:text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+                    entry.district
+                  ] })
+                ] }),
+                entry.gradeLabel ? /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5 rounded-full bg-white/95 px-2.5 py-1 backdrop-blur-[2px] lg:gap-2 lg:rounded-lg lg:bg-accent-subtle lg:px-2.5 lg:py-1.5 lg:backdrop-blur-none", children: [
+                  /* @__PURE__ */ jsx("b", { className: "text-[15px] font-extrabold tabular-nums text-[oklch(0.21_0.012_55)] lg:text-accent", children: entry.gradeLabel }),
+                  entry.tierLabel && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-[oklch(0.21_0.012_55)]/70 lg:text-muted-foreground", children: entry.tierLabel })
+                ] }) : entry.rating !== void 0 && /* The star fallback inverts the same way as the grade — a white
+                   pill, deliberately quieter than a grade, because a third-party
+                   rating is weaker evidence and should look it. Filled, since an
+                   outlined star at this size disappears over photography. */
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-white/95 px-2.5 py-1 text-[13px] font-semibold tabular-nums text-[oklch(0.21_0.012_55)] backdrop-blur-[2px] lg:bg-transparent lg:px-0 lg:py-0 lg:text-foreground lg:backdrop-blur-none", children: [
+                  /* @__PURE__ */ jsx(
+                    Star,
+                    {
+                      className: "h-3.5 w-3.5 shrink-0 fill-[oklch(0.21_0.012_55)] lg:fill-none",
+                      "aria-hidden": true
+                    }
+                  ),
+                  entry.rating
+                ] })
+              ]
+            }
+          ),
+          entry.editorial && /* The article's row gap is 0 on the phone now that the identity block
+             lives inside the photograph, so the paragraph owns the space under
+             it and gives it back at `lg`. */
+          /* @__PURE__ */ jsx("p", { className: "mt-4 font-serif text-[17px] italic leading-[1.65] text-muted-foreground [text-wrap:pretty] lg:mt-3", children: entry.editorial }),
+          entry.menuItems && entry.menuItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "block pb-1.5 text-[15px] font-bold tracking-[-0.01em]", children: (_c = entry.menuGroupLabel) != null ? _c : labels.signature }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            entry.menuItems.map((item) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                item,
+                labels: labels.item,
+                formatPrice,
+                formatCount,
+                markGradient,
+                href: labels.itemHref(item),
+                linkLabel: labels.openDish(item.name),
+                linkComponent: LinkComponent
+              },
+              item.id
+            ))
+          ] }),
+          entry.evidence && /* @__PURE__ */ jsxs("figure", { className: "mt-4 border-l-[3px] border-border pl-4", children: [
+            entry.evidence.quote && /* @__PURE__ */ jsx("blockquote", { className: "text-[13.5px] leading-relaxed text-muted-foreground [text-wrap:pretty]", children: `\u201C${entry.evidence.quote}\u201D` }),
+            /* @__PURE__ */ jsxs(
+              "figcaption",
+              {
+                className: cn(
+                  "flex items-center gap-1.5 text-[11.5px] text-muted-foreground",
+                  entry.evidence.quote && "mt-1.5"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(MessageSquareQuote, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": true }),
+                  entry.evidence.count && /* @__PURE__ */ jsx("b", { className: "font-bold tabular-nums text-foreground", children: entry.evidence.count }),
+                  entry.evidence.sourceLabel
+                ]
+              }
+            ),
+            entry.evidence.extraQuotes && entry.evidence.extraQuotes.length > 0 && /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
+              /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-[11.5px] font-semibold text-accent hover:underline", children: entry.evidence.extraLabel }),
+              /* @__PURE__ */ jsx("ul", { className: "mt-2 flex flex-col gap-2", children: entry.evidence.extraQuotes.map((quote) => /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: "text-[13px] leading-relaxed text-muted-foreground [text-wrap:pretty]",
+                  children: `\u201C${quote}\u201D`
+                },
+                quote
+              )) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TopRankingEntrySkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-0 py-6 lg:flex-row lg:gap-7", className),
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[3/2] w-full shrink-0 rounded-xl lg:aspect-[4/5] lg:w-[300px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-start gap-3 lg:flex", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-6" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-[220px]" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[100px]" })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-[110px] rounded-lg" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-2 lg:mt-3", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[92%]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[64%]" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-[62px] w-full rounded-lg" })
+        ] })
+      ]
+    }
+  );
+}
+function TopRankingListSkeleton({ rows = 6 }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
+    index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(TopRankingEntrySkeleton, {})
+  ] }, index)) });
+}
+
+export { TopRankingEntry, TopRankingEntrySkeleton, TopRankingListSkeleton };

package/dist/components/top-ranking-hero.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent } from './menu-types.js';
+import { TopExit } from './top-types.js';
+import 'react';
+import './place-types.js';
+
+type TopRankingHeroProps = {
+    /** e.g. "RANKED · CUISINE". */
+    kicker?: string;
+    title: string;
+    /** One paragraph: the size of the pool, and what the order means. */
+    lede?: string;
+    /** e.g. "Updated 6 September 2026". */
+    updatedLabel?: string;
+    /** e.g. "247 kitchens considered · 4,318 reviews read". */
+    metaLabel?: string;
+    exits?: TopExit[];
+    /** Finished CSS gradient for the ground. */
+    gradient?: string;
+    /** Watermark behind the text — the category's icon, resolved by the caller. */
+    icon?: React.ReactNode;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopRankingHero({ kicker, title, lede, updatedLabel, metaLabel, exits, gradient, icon, linkComponent: LinkComponent, className, }: TopRankingHeroProps): react_jsx_runtime.JSX.Element;
+/**
+ * TopMethodNote — how the ranking was computed, in one block.
+ *
+ * Under the hero rather than at the foot: a reader deciding whether to trust a
+ * list decides it before reading the list, not after.
+ */
+/**
+ * The note's surface, exported so a caller can put the same look on a TRIGGER.
+ *
+ * On `/top` the banner opens the grade explainer, and that explainer owns its
+ * own `<button>` (Radix clones it, so it cannot be handed a ready-made
+ * element). The caller therefore needs the surface without the element — hence
+ * a class string rather than a second component. `cn` at the call site lets the
+ * button's own `inline-flex` lose to the `flex` here.
+ */
+declare const topMethodNoteSurface = "flex w-full items-start gap-3 rounded-[14px] bg-muted p-4 text-left";
+type TopMethodNoteProps = {
+    /** The heading fragment, e.g. "How this is ranked." Rendered bold, inline. */
+    heading: string;
+    children: React.ReactNode;
+    /** Rendered after the prose — a chevron where the note is a disclosure trigger. */
+    affordance?: React.ReactNode;
+    className?: string;
+};
+/**
+ * The note's CONTENT, with no element of its own.
+ *
+ * Every tag here is phrasing content — spans, not paragraphs — because this
+ * renders inside a `<button>` when the note is a trigger, and a `<p>` inside a
+ * button is invalid. Keeping one definition of the content means the static
+ * note and the interactive one cannot drift apart.
+ */
+declare function TopMethodNoteBody({ heading, children, affordance, }: Omit<TopMethodNoteProps, "className">): react_jsx_runtime.JSX.Element;
+declare function TopMethodNote({ heading, children, affordance, className }: TopMethodNoteProps): react_jsx_runtime.JSX.Element;
+
+export { TopMethodNote, TopMethodNoteBody, type TopMethodNoteProps, TopRankingHero, type TopRankingHeroProps, topMethodNoteSurface };

package/dist/components/top-ranking-hero.js

@@ -0,0 +1,99 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Trophy, CalendarCheck, LayoutList, ArrowRight, Info } from 'lucide-react';
+import { jsxs, jsx, 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 TopRankingHero({
+  kicker,
+  title,
+  lede,
+  updatedLabel,
+  metaLabel,
+  exits,
+  gradient,
+  icon,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-[18px] px-5 py-6 lg:px-8 lg:py-8",
+        !gradient && "bg-muted",
+        className
+      ),
+      children: [
+        gradient && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0", style: { backgroundImage: gradient } }),
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute -right-6 -top-6 opacity-[0.14] [&>svg]:h-[150px] [&>svg]:w-[150px] lg:[&>svg]:h-[190px] lg:[&>svg]:w-[190px]",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1]", children: [
+          kicker && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-background/70 px-3 py-1 text-[11px] font-extrabold uppercase tracking-[0.09em] backdrop-blur-[2px]", children: [
+            /* @__PURE__ */ jsx(Trophy, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+            kicker
+          ] }),
+          /* @__PURE__ */ jsx("h1", { className: "mt-3 max-w-[22ch] font-serif text-[30px] font-bold leading-[1.08] tracking-[-0.025em] lg:text-[44px]", children: title }),
+          lede && /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-[62ch] text-[14.5px] leading-relaxed opacity-85", children: lede }),
+          (updatedLabel || metaLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[12.5px]", children: [
+            updatedLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold", children: [
+              /* @__PURE__ */ jsx(CalendarCheck, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+              updatedLabel
+            ] }),
+            updatedLabel && metaLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-1 w-1 rounded-full bg-current opacity-40" }),
+            metaLabel && /* @__PURE__ */ jsx("span", { className: "opacity-75", children: metaLabel })
+          ] }),
+          exits && exits.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-5 hidden flex-col gap-2 sm:flex-row lg:flex", children: exits.map((exit, index) => {
+            var _a;
+            return /* @__PURE__ */ jsxs(
+              LinkComponent,
+              {
+                href: exit.href,
+                className: cn(
+                  "inline-flex h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none",
+                  index === 0 ? "bg-background text-foreground hover:bg-background/90" : "border border-current/25 hover:bg-background/25"
+                ),
+                children: [
+                  (_a = exit.icon) != null ? _a : /* @__PURE__ */ jsx(LayoutList, { className: "h-4 w-4 shrink-0", "aria-hidden": true }),
+                  exit.label,
+                  /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true })
+                ]
+              },
+              exit.href
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+var topMethodNoteSurface = "flex w-full items-start gap-3 rounded-[14px] bg-muted p-4 text-left";
+function TopMethodNoteBody({
+  heading,
+  children,
+  affordance
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("span", { className: "block text-[13px] leading-relaxed text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("b", { className: "font-bold text-foreground", children: heading }),
+      " ",
+      children
+    ] }),
+    affordance
+  ] });
+}
+function TopMethodNote({ heading, children, affordance, className }) {
+  return /* @__PURE__ */ jsx("aside", { className: cn(topMethodNoteSurface, className), children: /* @__PURE__ */ jsx(TopMethodNoteBody, { heading, affordance, children }) });
+}
+
+export { TopMethodNote, TopMethodNoteBody, TopRankingHero, topMethodNoteSurface };

package/dist/components/top-ranking-legend.d.ts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * TopRankingLegend — the ranking as a place you are inside of, not a table.
+ *
+ * ## What it stopped being
+ *
+ * It was a two-column table: rank, name, grade, with a rule under every row.
+ * Three things were wrong with that, and they compounded.
+ *
+ * The **grade column** was the loudest thing in it and the least useful thing
+ * for navigating — twenty-five near-identical numbers in accent colour,
+ * duplicating a grade shown at full size two inches to the right, and eating
+ * the width that was truncating the names. The one field you navigate by was
+ * the one being cut. It is gone.
+ *
+ * The **dividers** ran full-bleed to the column's right edge, so every rule was
+ * a small arrow pointing at the article and nothing ever visually ended the
+ * aside. Space separates now; contrast is spent on state instead.
+ *
+ * And there was **no active row at all** — twenty-five identical entries in a
+ * component whose entire job is orientation. That is what the observer below
+ * is for.
+ *
+ * ## The rank numeral is the rail
+ *
+ * The reference this is drawn from uses a status ring down the left edge. A
+ * ring is wrong here: it promises completion state we do not track and would
+ * never fill. The rank numeral is already present, already tabular, and is
+ * itself the thing being ranked — a better rail, for free.
+ *
+ * ## Grouped, because twenty-five is not a list you can hold
+ *
+ * By grade band, which is the one honest grouping available: the tiers are
+ * already printed on the entries, so the aside is not inventing a taxonomy. It
+ * also says something true — that the top few are a different class.
+ *
+ * The column will still exceed the viewport at twenty-five, and that is
+ * accepted rather than solved: an internally-scrolling sidebar is a second page,
+ * and grouping plus a live active row makes the overflow navigable.
+ *
+ * ## The phone keeps its chips
+ *
+ * Below `lg` this is a horizontal scroller of the flat list, unchanged. None of
+ * the above applies to a chip row — there is nothing to group, no column to
+ * inset, and the active state is a press away rather than a scroll away.
+ */
+type TopRankingLegendEntry = {
+    rank: number;
+    slug: string;
+    name: string;
+};
+type TopRankingLegendGroup = {
+    key: string;
+    /** Grade band, e.g. "Exceptional". Letterspaced caps — structure, not content. */
+    label: string;
+    entries: TopRankingLegendEntry[];
+};
+type TopRankingLegendProps = {
+    groups: TopRankingLegendGroup[];
+    /** e.g. "The ranking". */
+    heading: string;
+    /** The size and freshness of the thing, e.g. "25 places · updated September 2026". */
+    meta?: string;
+    className?: string;
+};
+declare function TopRankingLegend({ groups, heading, meta, className }: TopRankingLegendProps): react_jsx_runtime.JSX.Element;
+
+export { TopRankingLegend, type TopRankingLegendEntry, type TopRankingLegendGroup, type TopRankingLegendProps };