@bearmenu/ui 0.8.9 → 0.8.10

package/dist/components/photo-ground.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * PhotoGround — venue photography as the ground of a card.
+ *
+ * Three cards are built on photographs rather than on panels: the hub's family
+ * card, the cuisines index's family block and the concept card. Each had grown
+ * its own copy of the same stack — a dark ground, a grid of `<img>`s with an
+ * initial for the missing ones, a hue layer, an overlay — and the one rule that
+ * matters for all of them (the tint has to be `mix-blend-color`, the ground
+ * has to be a fixed literal) was written three times. This is the stack, once.
+ *
+ * ## What it owns and what it leaves to the card
+ *
+ * It owns the photographs and their colour: the ground, the tiles, the fallback
+ * initial, the family's hue and an optional uniform dark overlay. It does NOT
+ * own the glass — the scrims and frosted bands that carry a card's type run in
+ * a different direction on every card (down the family block's phone, across
+ * its desktop, in from both ends of the concept card) and are the card's own.
+ *
+ * ## Two layouts
+ *
+ * `mosaic` tiles every photograph into a grid the caller shapes; `stack` shows
+ * ONE of them, `active`, and cross-fades to the next — a card whose ground
+ * follows a swipe. Same slots, same fallback, same tint either way.
+ *
+ * ## Why the ground is a literal, and why the tint is `color`
+ *
+ * The ground is the backdrop a blend or blur samples before a lazy image lands
+ * and the tile an empty slot shows, so it must not change with the theme —
+ * photography is not themed, and a card that flashed paper-white behind its
+ * photographs in light mode was wrong in exactly the mode most people use.
+ * `mix-blend-mode: color` takes hue and chroma from the tint layer and
+ * luminance from the photograph, so the room keeps its structure and the
+ * family keeps its colour; a plain overlay would have muddied both.
+ */
+/** The ground under the photography. Fixed, and deliberately not a token. */
+declare const PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
+type PhotoGroundProps = {
+    /** One per slot. An absent one draws the slot's initial on the ground. */
+    photos: (string | undefined)[];
+    /** The fallback glyph per slot — a venue's first letter. One is reused for all. */
+    initials: string | string[];
+    /** `mosaic` tiles every slot; `stack` shows `active` and cross-fades. */
+    mode?: "mosaic" | "stack";
+    /** `stack` only: which slot is showing. */
+    active?: number;
+    /** `mosaic` only: the grid template, e.g. `"grid-cols-2 grid-rows-2 lg:grid-cols-3"`. */
+    mosaicClassName?: string;
+    /** `mosaic` only: slots from this index on are desktop-only tiles. */
+    phoneTiles?: number;
+    /** Finished CSS gradient — the family's colour, laid over the photographs. */
+    gradient?: string;
+    /** A uniform dark overlay on every photograph. */
+    overlay?: boolean;
+    /** Extra classes on the overlay, e.g. a hover that lifts it. */
+    overlayClassName?: string;
+    /** How eagerly the first photograph loads. `stack` grounds are above the fold. */
+    loading?: "lazy" | "eager";
+    className?: string;
+};
+declare function PhotoGround({ photos, initials, mode, active, mosaicClassName, phoneTiles, gradient, overlay, overlayClassName, loading, className, }: PhotoGroundProps): react_jsx_runtime.JSX.Element;
+
+export { PHOTO_GROUND, PhotoGround, type PhotoGroundProps };

package/dist/components/photo-ground.js

@@ -0,0 +1,3 @@
+export { PHOTO_GROUND, PhotoGround } from '../chunk-5RWTOT5Y.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/place-about-tab.js

@@ -1,7 +1,7 @@
-export { PlaceAboutTab } from '../chunk-XWMRABZW.js';
+export { PlaceAboutTab } from '../chunk-HSIYYA2E.js';
 import '../chunk-VG3PND3D.js';
-import '../chunk-WSRWFA6K.js';
 import '../chunk-ZDAHKI3A.js';
+import '../chunk-WSRWFA6K.js';
 import '../chunk-7BWTYWM3.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/place-details-mobile.js

@@ -1,7 +1,7 @@
-import { PlaceAboutTab } from '../chunk-XWMRABZW.js';
+import { PlaceAboutTab } from '../chunk-HSIYYA2E.js';
 import '../chunk-VG3PND3D.js';
-import '../chunk-WSRWFA6K.js';
 import '../chunk-ZDAHKI3A.js';
+import '../chunk-WSRWFA6K.js';
 import { Text } from '../chunk-7BWTYWM3.js';
 import { Badge } from '../chunk-UKBNQO6Q.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/place-types.d.ts

@@ -49,7 +49,7 @@ type PlacePreview = {
     }>;
     /**
      * The review distillation. Drives every menu-hub surface that speaks for a
-     * venue — `<VenueSpotlight>`, `<RankedVenueList>`, `<SignatureLineList>` —
+     * venue — `<KitchenDossier>`, `<MenuKitchenList>`, `<OpenNowList>` —
      * because the signature dish, the pull-quotes and the graded dimensions all
      * live here rather than on the menu itself.
      */
@@ -168,7 +168,7 @@ type PlaceReviewsDigest = {
     tagline?: CitedText;
     verdict?: CitedText;
     caveat?: CitedText;
-    /** 1–3 standout positives. The pull-quotes on `<VenueSpotlight>`. */
+    /** 1–3 standout positives. The pull-quotes on `<KitchenDossier>`. */
     highlights?: CitedText[];
     must_try?: PlaceMustTry[];
     /** Vibe codes (cozy, quiet, family_friendly, …). Localised by the caller. */

package/dist/components/qa-block.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { QaItem } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * QaBlock — questions answered from the numbers, as static prose.
+ *
+ * ## Never an accordion
+ *
+ * This block exists to be crawled as much as read: it is the visible half of
+ * the page's `FAQPage` markup, and the rule is that structured data must mirror
+ * content the reader can actually see. Collapsing it hides every answer from
+ * the crawler's first paint and buys nothing — three short answers are cheaper
+ * to scroll past than to expand.
+ *
+ * The caller renders the JSON-LD from the SAME array it passes here, so the
+ * markup and the visible answers cannot drift.
+ *
+ * ## Three across, then one
+ *
+ * Answers are two or three lines each, so a single column wastes the desktop
+ * measure and a two-column grid leaves an orphan. On the phone it is one
+ * column, in order.
+ */
+type QaBlockProps = {
+    items: QaItem[];
+    /** Section heading, e.g. "Questions people ask". Omit where the page supplies one. */
+    heading?: string;
+    /** Heading level for the questions. Defaults to `h3`, under a page's `h2`. */
+    questionAs?: "h3" | "h4";
+    className?: string;
+};
+declare function QaBlock({ items, heading, questionAs: Question, className }: QaBlockProps): react_jsx_runtime.JSX.Element;
+
+export { QaBlock, type QaBlockProps };

package/dist/components/qa-block.js

@@ -0,0 +1,24 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function QaBlock({ items, heading, questionAs: Question = "h3", className }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn(className), children: [
+    heading && /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold leading-tight tracking-[-0.01em]", children: heading }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-1 gap-[18px] lg:grid-cols-3 lg:gap-[26px]",
+          heading && "mt-3.5"
+        ),
+        children: items.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Question, { className: "text-sm font-bold leading-[1.35] tracking-[-0.01em] lg:text-[15px]", children: item.question }),
+          /* @__PURE__ */ jsx("p", { className: "mt-[7px] text-[13px] leading-[1.65] text-muted-foreground [text-wrap:pretty] lg:text-[13.5px]", children: item.answer })
+        ] }, item.question))
+      }
+    )
+  ] });
+}
+
+export { QaBlock };

package/dist/components/scroll-fade.js

@@ -1,121 +1,3 @@
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
-import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var fromMap = {
-  background: "from-background",
-  card: "from-card",
-  muted: "from-muted"
-};
-var sizeMap = {
-  vertical: { sm: "h-6", md: "h-12", lg: "h-20" },
-  horizontal: { sm: "w-8", md: "w-16", lg: "w-28" }
-};
-var ScrollFade = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      orientation = "vertical",
-      fadeColor = "background",
-      size = "md",
-      className,
-      scrollClassName,
-      children
-    } = _b, props = __objRest(_b, [
-      "orientation",
-      "fadeColor",
-      "size",
-      "className",
-      "scrollClassName",
-      "children"
-    ]);
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current);
-    const [atStart, setAtStart] = React.useState(true);
-    const [atEnd, setAtEnd] = React.useState(true);
-    const update = React.useCallback(() => {
-      const el = innerRef.current;
-      if (!el) return;
-      if (orientation === "vertical") {
-        const overflow = el.scrollHeight - el.clientHeight;
-        setAtStart(el.scrollTop <= 1);
-        setAtEnd(overflow <= 1 || el.scrollTop >= overflow - 1);
-      } else {
-        const overflow = el.scrollWidth - el.clientWidth;
-        setAtStart(el.scrollLeft <= 1);
-        setAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 1);
-      }
-    }, [orientation]);
-    React.useEffect(() => {
-      const el = innerRef.current;
-      if (!el) return;
-      update();
-      el.addEventListener("scroll", update, { passive: true });
-      const ro = new ResizeObserver(update);
-      ro.observe(el);
-      return () => {
-        el.removeEventListener("scroll", update);
-        ro.disconnect();
-      };
-    }, [update]);
-    const fromClass = fromMap[fadeColor];
-    const fadeSize = sizeMap[orientation][size];
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "relative isolate flex",
-          orientation === "vertical" ? "flex-col" : "flex-row",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            __spreadProps(__spreadValues({
-              ref: innerRef,
-              className: cn(
-                "min-h-0 min-w-0 flex-1",
-                orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto",
-                scrollClassName
-              )
-            }, props), {
-              children
-            })
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": true,
-              className: cn(
-                "pointer-events-none absolute z-10 transition-opacity duration-300",
-                // `from-30%` adds a solid plateau before the gradient starts
-                // fading — without it the gradient is a pure linear ramp and only
-                // the very top pixel reads as solid, leaving the cut edge visible.
-                // -4px inset pulls the fade past the container edge so the very
-                // edge of clipped content is covered by the solid plateau.
-                orientation === "vertical" ? `inset-x-0 -top-1 ${fadeSize} bg-gradient-to-b from-30%` : `inset-y-0 -left-1 ${fadeSize} bg-gradient-to-r from-30%`,
-                fromClass,
-                atStart ? "opacity-0" : "opacity-100"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": true,
-              className: cn(
-                "pointer-events-none absolute z-10 transition-opacity duration-300",
-                orientation === "vertical" ? `inset-x-0 -bottom-1 ${fadeSize} bg-gradient-to-t from-30%` : `inset-y-0 -right-1 ${fadeSize} bg-gradient-to-l from-30%`,
-                fromClass,
-                atEnd ? "opacity-0" : "opacity-100"
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-ScrollFade.displayName = "ScrollFade";
-
-export { ScrollFade };
+export { ScrollFade } from '../chunk-2XCZJWTV.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/snap-rail.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
@@ -34,6 +35,12 @@ type SnapRailProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof
     dots?: boolean;
     /** Classes for the dots row, e.g. `lg:hidden` where the rail becomes a grid. */
     dotsClassName?: string;
+    /**
+     * Reports the current page whenever it changes — for a caller that wants
+     * to react to the swipe beyond the dots, e.g. a backdrop that follows the
+     * active card. Tracking runs whenever this or `dots` is set.
+     */
+    onActiveChange?: (index: number) => void;
 };
 declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
@@ -49,6 +56,22 @@ declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     dots?: boolean;
     /** Classes for the dots row, e.g. `lg:hidden` where the rail becomes a grid. */
     dotsClassName?: string;
+    /**
+     * Reports the current page whenever it changes — for a caller that wants
+     * to react to the swipe beyond the dots, e.g. a backdrop that follows the
+     * active card. Tracking runs whenever this or `dots` is set.
+     */
+    onActiveChange?: (index: number) => void;
 } & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The page dots on their own, for a caller that tracks the rail through
+ * `onActiveChange` and wants the dots somewhere other than directly under it —
+ * inside a foot band, say. Decorative, as on the rail: the rail is the control.
+ */
+declare function SnapRailDots({ count, active, className, }: {
+    count: number;
+    active: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { SnapRail, type SnapRailProps };
+export { SnapRail, SnapRailDots, type SnapRailProps };

package/dist/components/snap-rail.js

@@ -1,109 +1,3 @@
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var 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"
-    }
-  }
-);
-var SnapRail = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, itemWidth, gap, bleed, dots, dotsClassName, children } = _b, props = __objRest(_b, ["className", "itemWidth", "gap", "bleed", "dots", "dotsClassName", "children"]);
-    const railRef = React.useRef(null);
-    const [active, setActive] = React.useState(0);
-    const count = React.Children.count(children);
-    const setRefs = React.useCallback(
-      (node) => {
-        railRef.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
-      [ref]
-    );
-    React.useEffect(() => {
-      if (!dots) return;
-      const rail2 = railRef.current;
-      if (!rail2) return;
-      let frame = 0;
-      const sync = () => {
-        frame = 0;
-        const origin = rail2.scrollLeft + parseFloat(getComputedStyle(rail2).scrollPaddingLeft || "0");
-        let best = 0;
-        let bestDistance = Number.POSITIVE_INFINITY;
-        Array.from(rail2.children).forEach((child, index) => {
-          const distance = Math.abs(child.offsetLeft - origin);
-          if (distance < bestDistance) {
-            bestDistance = distance;
-            best = index;
-          }
-        });
-        setActive(best);
-      };
-      const onScroll = () => {
-        if (!frame) frame = requestAnimationFrame(sync);
-      };
-      sync();
-      rail2.addEventListener("scroll", onScroll, { passive: true });
-      return () => {
-        if (frame) cancelAnimationFrame(frame);
-        rail2.removeEventListener("scroll", onScroll);
-      };
-    }, [dots, count]);
-    const rail = /* @__PURE__ */ jsx(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: setRefs,
-        "data-slot": "snap-rail",
-        className: cn(snapRailVariants({ itemWidth, gap, bleed }), className)
-      }, props), {
-        children
-      })
-    );
-    if (!dots) return rail;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-      rail,
-      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("flex justify-center gap-1.5", dotsClassName), children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          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"
-          )
-        },
-        index
-      )) })
-    ] });
-  }
-);
-SnapRail.displayName = "SnapRail";
-
-export { SnapRail };
+export { SnapRail, SnapRailDots } from '../chunk-DTXNDLSE.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/story.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type StoryProviderProps = {
+    /** How many parts the story has. */
+    count: number;
+    /** How long each part shows. */
+    durationMs?: number;
+    /** Accessible name of the tap-to-advance, e.g. "Next". */
+    nextLabel: string;
+    className?: string;
+    children: React.ReactNode;
+};
+declare function StoryProvider({ count, durationMs, nextLabel, className, children, }: StoryProviderProps): react_jsx_runtime.JSX.Element;
+type StorySegmentsProps = {
+    /**
+     * Accessible name per segment, one per part, e.g. `["Part 1 of 3", …]`.
+     * Strings rather than a function: a server component renders this and a
+     * function cannot cross into a client one.
+     */
+    labels: string[];
+    className?: string;
+};
+/** The segments: one per part, the active one filling on the timer. */
+declare function StorySegments({ labels, className }: StorySegmentsProps): react_jsx_runtime.JSX.Element | null;
+type StoryPanelProps = {
+    /** The parts, in order. Rendered by the caller; shown one at a time. */
+    parts: React.ReactNode[];
+    className?: string;
+};
+/** The panel: every part in one cell, the active one visible. */
+declare function StoryPanel({ parts, className }: StoryPanelProps): react_jsx_runtime.JSX.Element;
+
+export { StoryPanel, type StoryPanelProps, StoryProvider, type StoryProviderProps, StorySegments, type StorySegmentsProps };

package/dist/components/story.js

@@ -0,0 +1,3 @@
+export { StoryPanel, StoryProvider, StorySegments } from '../chunk-F6FMZJDG.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/text.d.ts

@@ -22,9 +22,9 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "display" | "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "medium" | "bold" | "normal" | "semibold" | null | undefined;
+    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/top-comparison.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent } from './menu-types.js';
+import { TopComparisonRow } from './top-types.js';
+import 'react';
+import './place-types.js';
+
+type TopComparisonLabels = {
+    venue: string;
+    grade: string;
+    signature: string;
+    price: string;
+    late: string;
+    terrace: string;
+    /** Screen-reader text for a "no" cell — never an empty cell. */
+    no: string;
+    yes: string;
+};
+type TopComparisonProps = {
+    rows: TopComparisonRow[];
+    labels: TopComparisonLabels;
+    /** Accessible name for the table. */
+    caption: string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopComparison({ rows, labels, caption, linkComponent: LinkComponent, className, }: TopComparisonProps): react_jsx_runtime.JSX.Element;
+
+export { TopComparison, type TopComparisonLabels, type TopComparisonProps };

package/dist/components/top-comparison.js

@@ -0,0 +1,76 @@
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Moon, Sun } 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));
+}
+function TopComparison({
+  rows,
+  labels,
+  caption,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden overflow-x-auto lg:block", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-[13px]", children: [
+      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border text-left text-[11px] font-bold uppercase tracking-[0.07em] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 py-2 font-bold", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "#" }) }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.venue }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.grade }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.signature }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.price }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.late }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.terrace })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60", children: [
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 tabular-nums text-muted-foreground", children: String(row.rank).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 font-semibold", children: /* @__PURE__ */ jsx(
+            LinkComponent,
+            {
+              href: row.href,
+              className: "hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: row.name
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 font-bold tabular-nums text-accent", children: (_a = row.gradeLabel) != null ? _a : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 text-muted-foreground", children: (_b = row.signature) != null ? _b : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 tabular-nums", children: (_c = row.priceLabel) != null ? _c : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5", children: /* @__PURE__ */ jsx(Mark, { on: row.late, yes: labels.yes, no: labels.no }) }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5", children: /* @__PURE__ */ jsx(Mark, { on: row.terrace, yes: labels.yes, no: labels.no }) })
+        ] }, row.name);
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("ul", { className: "lg:hidden", children: rows.map((row) => /* @__PURE__ */ jsx("li", { className: "border-t border-border first:border-t-0", children: /* @__PURE__ */ jsxs(
+      LinkComponent,
+      {
+        href: row.href,
+        className: "flex items-center gap-3 py-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0 text-[13px] font-bold tabular-nums text-muted-foreground", children: String(row.rank).padStart(2, "0") }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[13.5px] font-bold", children: row.name }),
+            (row.signature || row.priceLabel) && /* @__PURE__ */ jsx("span", { className: "block truncate text-[11.5px] text-muted-foreground", children: [row.signature, row.priceLabel].filter(Boolean).join(" \xB7 ") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+            row.late && /* @__PURE__ */ jsx(Moon, { className: "h-3.5 w-3.5", "aria-label": labels.late }),
+            row.terrace && /* @__PURE__ */ jsx(Sun, { className: "h-3.5 w-3.5", "aria-label": labels.terrace })
+          ] }),
+          row.gradeLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[13px] font-extrabold tabular-nums text-accent", children: row.gradeLabel })
+        ]
+      }
+    ) }, row.name)) })
+  ] });
+}
+function Mark({ on, yes, no }) {
+  return on ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-[color:var(--free,oklch(0.45_0.13_155))]", children: yes }) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2014" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: no })
+  ] });
+}
+
+export { TopComparison };