@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/open-now-list.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockVenues } from "./menu-mocks";
+import { OpenNowList } from "./open-now-list";
+
+const metaLabels = {
+  "the-copper-yard": "pub · Centru",
+  "salt-and-stone": "restaurant · Centru",
+  "the-quiet-hours": "coffee · Centru",
+};
+
+const summaryLabels = {
+  "the-copper-yard": "Wings, truffle fries, ribs",
+  "salt-and-stone": "Pasta, antipasti, tiramisu",
+  "the-quiet-hours": "Filter, flat white, pastries",
+};
+
+const priceBandLabels = {
+  "the-copper-yard": "19—62 lei",
+  "salt-and-stone": "38—84 lei",
+  "the-quiet-hours": "8—26 lei",
+};
+
+const meta: Meta<typeof OpenNowList> = {
+  title: "Menu/OpenNowList",
+  component: OpenNowList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[620px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Who is still serving, and until when. At half past ten this beats every other sort, which is why it is its own surface rather than a filter chip: the question is not \"what is good\" but \"what is possible\", and every other module answers the first. The closing time arrives pre-formatted because a trading day crossing midnight needs the venue's timezone and the reader's clock. The live dot is never the only signal — the pill carries the same fact in words.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OpenNowList>;
+
+export const Default: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    untilLabel: "until",
+    metaLabels,
+    summaryLabels,
+    priceBandLabels,
+  },
+};
+
+/** Without the summary line — a tighter row for a narrow column. */
+export const Compact: Story = {
+  args: { venues: mockVenues.slice(0, 3), untilLabel: "until", metaLabels, priceBandLabels },
+};
+
+/** A venue past closing has no pill; the row still lists. */
+export const MixedHours: Story = {
+  args: { venues: mockVenues, untilLabel: "until", metaLabels, priceBandLabels },
+};
+
+export const Mobile: Story = {
+  args: { venues: mockVenues.slice(0, 3), untilLabel: "until", metaLabels, summaryLabels },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/open-now-list.tsx

@@ -0,0 +1,127 @@
+import { ChevronRight, Clock } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * OpenNowList — who is still serving, and until when.
+ *
+ * At half past ten this beats every other sort, which is why it is its own
+ * surface rather than a filter chip: the question is not "what is good" but
+ * "what is possible", and every other module on a hub answers the first one.
+ *
+ * The closing time arrives pre-formatted on the view model (`closes_at_label`)
+ * because the venue's own trading day can cross midnight — a bar closing at
+ * 04:00 closes on the following date — and resolving that needs the venue's
+ * timezone and the reader's clock, neither of which the DS has.
+ *
+ * The live dot is never the only signal that a venue is open: the closing pill
+ * carries the same fact in words, so the row reads without colour.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type OpenNowListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: OpenNowListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type OpenNowListProps = {
+  venues: MenuVenuePreview[];
+  /** Prefix on the closing pill, e.g. "until". */
+  untilLabel: string;
+  /** Composed meta line per venue, keyed by place slug, e.g. "pub · Centru". */
+  metaLabels?: Record<string, string>;
+  /** What the kitchen is still sending out, keyed by place slug. */
+  summaryLabels?: Record<string, string>;
+  /** Composed price band per venue, keyed by place slug, e.g. "19—62 lei". */
+  priceBandLabels?: Record<string, string>;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function OpenNowList({
+  venues,
+  untilLabel,
+  metaLabels,
+  summaryLabels,
+  priceBandLabels,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: OpenNowListProps) {
+  return (
+    <ul className={cn("flex flex-col", className)}>
+      {venues.map((venue, index) => {
+        const { place } = venue;
+
+        return (
+          <li key={place.slug}>
+            {index > 0 && <Separator />}
+            <LinkComponent
+              href={venue.href}
+              className="flex flex-wrap items-center gap-x-3 gap-y-1.5 py-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+            >
+              {/* 56px, not 40. At 40 the venue photograph was too small to be
+                  anything — a smudge of colour rather than a room you might
+                  recognise — which is the only reason it is on the row. */}
+              <span className="relative h-14 w-14 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)]">
+                {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"
+                  />
+                )}
+                <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 text-sm font-bold leading-snug tracking-[-0.01em]">
+                  {place.name}
+                </span>
+                {metaLabels?.[place.slug] && (
+                  <span className="mt-px block truncate text-[11.5px] text-muted-foreground">
+                    {metaLabels[place.slug]}
+                  </span>
+                )}
+              </span>
+
+              {summaryLabels?.[place.slug] && (
+                <span className="order-last w-full truncate text-[12.5px] text-muted-foreground lg:order-none lg:w-auto lg:flex-1">
+                  {summaryLabels[place.slug]}
+                </span>
+              )}
+
+              {/* Price over hours on the phone — side by side they squeezed a
+                  three-line venue name; one row again from lg. */}
+              {(venue.closes_at_label || priceBandLabels?.[place.slug]) && (
+                <span className="flex shrink-0 flex-col items-end gap-1 lg:flex-row lg:items-center lg:gap-3">
+                  {priceBandLabels?.[place.slug] && (
+                    <span className="text-[12.5px] tabular-nums text-muted-foreground">
+                      {priceBandLabels[place.slug]}
+                    </span>
+                  )}
+                  {venue.closes_at_label && (
+                    <span className="inline-flex h-6 items-center gap-1 rounded-full bg-[var(--free-subtle,var(--accent-subtle))] px-2.5 text-[11.5px] font-semibold tabular-nums">
+                      <Clock className="h-[11px] w-[11px]" aria-hidden />
+                      {`${untilLabel} ${venue.closes_at_label}`}
+                    </span>
+                  )}
+                </span>
+              )}
+
+              <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+            </LinkComponent>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/photo-ground.tsx

@@ -0,0 +1,147 @@
+import { cn } from "../lib/utils";
+
+/**
+ * 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. */
+export const PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
+
+/** The uniform dark overlay a card may put over every photograph. */
+const OVERLAY = "absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.5)]";
+
+export 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;
+};
+
+export function PhotoGround({
+  photos,
+  initials,
+  mode = "mosaic",
+  active = 0,
+  mosaicClassName,
+  phoneTiles,
+  gradient,
+  overlay,
+  overlayClassName,
+  loading = "lazy",
+  className,
+}: PhotoGroundProps) {
+  const initialOf = (index: number) =>
+    typeof initials === "string" ? initials : (initials[index] ?? initials[0] ?? "");
+  const hasAnyPhoto = photos.some(Boolean);
+
+  const slot = (index: number, extra?: string) => {
+    const src = photos[index];
+    return (
+      <span key={index} className={cn("relative block overflow-hidden", extra)}>
+        {src ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={src}
+            alt=""
+            loading={index === 0 ? loading : "lazy"}
+            decoding="async"
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        ) : (
+          /* Never a grey box: the ground with the venue's initial. A missing
+             photograph is not a broken image, and drawing one as a placeholder
+             makes a real city look unfinished. */
+          <span className="absolute inset-0 flex items-center justify-center">
+            <span className="font-serif text-[64px] font-semibold leading-none text-white/15">
+              {initialOf(index)}
+            </span>
+          </span>
+        )}
+      </span>
+    );
+  };
+
+  return (
+    <span aria-hidden className={cn("absolute inset-0 block", PHOTO_GROUND, className)}>
+      {mode === "mosaic" ? (
+        <span className={cn("absolute inset-0 grid gap-px", mosaicClassName)}>
+          {photos.map((_, index) =>
+            slot(index, phoneTiles !== undefined && index >= phoneTiles ? "hidden lg:block" : undefined)
+          )}
+        </span>
+      ) : (
+        /* Stacked, not swapped, so the change is a cross-fade and not a flash
+           of ground between two images. */
+        photos.map((_, index) =>
+          slot(
+            index,
+            cn(
+              "absolute inset-0 transition-opacity duration-500 motion-reduce:transition-none",
+              index === active ? "opacity-100" : "opacity-0"
+            )
+          )
+        )
+      )}
+
+      {/* The family's colour, one layer over the whole ground. Skipped when
+          there is nothing to colour — a flat tint over the bare ground reads as
+          a mistake rather than as a family. */}
+      {gradient && hasAnyPhoto && (
+        <span
+          className="absolute inset-0 opacity-[0.85] mix-blend-color"
+          style={{ backgroundImage: gradient }}
+        />
+      )}
+
+      {overlay && <span className={cn(OVERLAY, overlayClassName)} />}
+    </span>
+  );
+}

package/src/components/place-types.ts

@@ -31,6 +31,13 @@ export type PlacePreview = {
   landmarks?: Array<{ name: string; distance_meters?: number }>
   areas?: Array<{ name: string }>
   busyness?: Array<{ hour: number; score: number }>
+  /**
+   * The review distillation. Drives every menu-hub surface that speaks for a
+   * venue — `<KitchenDossier>`, `<MenuKitchenList>`, `<OpenNowList>` —
+   * because the signature dish, the pull-quotes and the graded dimensions all
+   * live here rather than on the menu itself.
+   */
+  reviews_digest?: PlaceReviewsDigest
   type?: string
   business_status?: 'operational' | 'closed_temporarily' | 'closed_permanently'
   phone?: string
@@ -60,6 +67,111 @@ export type PlaceSchedule = Record<WeekdayKey, PlaceHourBlock[]>
 export type PlacePriceRange = {
   price_range_low?: number
   price_range_high?: number
+  /** Median price across the place's menu, in the local currency. */
+  median_price?: number
+}
+
+/**
+ * Menu items are priced per size; a single-size item still ships one entry.
+ *
+ * Defined here rather than in `menu-types.ts` because `PlaceMustTry` carries
+ * it, and `menu-types.ts` already imports from this file — keeping the
+ * definition here leaves that import one-directional. `menu-types.ts`
+ * re-exports it, so menu code never reaches into place types for it.
+ */
+export type MenuSizeAndPrice = {
+  /** Grams or millilitres. */
+  size: number
+  price: number
+  discounted_price?: number
+  discount_percentage?: number
+}
+
+/** A digest string with the reviews that back it. `review_ids.length` is the mention count. */
+export type CitedText = { text: string; review_ids?: string[] }
+
+/** A digest enum value with the reviews that back it. The value is a language-neutral code. */
+export type CitedValue = { value: string; review_ids?: string[] }
+
+/**
+ * One dish or drink the reviews single out.
+ *
+ * `mentions` and `score` come from the item census and are only served by the
+ * place DETAIL endpoint — a listing carries the item without them. Surfaces
+ * that need a count from a list fall back to `review_ids.length`, which is
+ * present in both. `strength`, `why` and `review_ids` are absent for census
+ * items the prose digest never mentioned, so none of them can be assumed.
+ */
+export type PlaceMustTry = {
+  name: string
+  why?: string
+  strength?: 'signature' | 'frequent' | 'occasional'
+  /** Deep-link slug. Present only when the item matched a live menu row. */
+  slug?: string
+  sizes_and_prices?: MenuSizeAndPrice[]
+  review_ids?: string[]
+  /** 0–100 census sentiment. Detail endpoint only; 3+ mentions required. */
+  score?: number
+  /** Censused review mentions of this item. Detail endpoint only. */
+  mentions?: number
+}
+
+/**
+ * Per-dimension 0–100 review scores.
+ *
+ * A dimension the reviews never mention is ABSENT, not zero — so a surface
+ * drawing these must render what it is given rather than a fixed row of seven.
+ * Exactly one of `food` / `coffee_quality` / `drinks_quality` is scored per
+ * place: a coffee bar has no food score and a restaurant has no coffee one.
+ */
+export type PlaceGradeDimensions = {
+  food?: number
+  coffee_quality?: number
+  drinks_quality?: number
+  value?: number
+  service?: number
+  cleanliness?: number
+  ambiance?: number
+  portion?: number
+  consistency?: number
+}
+
+export type PlaceGrade = {
+  /** 1.0–10.0. */
+  overall?: number
+  /**
+   * Backend recommendation to show the number at all. When false the caller
+   * should draw a "building confidence" state instead — the DS renders what it
+   * is told, it does not apply the rule.
+   */
+  show_number?: boolean
+  /** Locale-resolved band label, e.g. "Foarte bun". Already translated upstream. */
+  descriptor?: string
+  confidence?: 'low' | 'medium' | 'high'
+  capped?: boolean
+  dimensions?: PlaceGradeDimensions
+}
+
+export type PlaceReviewsDigest = {
+  grade?: PlaceGrade
+  grade_note?: string
+  tagline?: CitedText
+  verdict?: CitedText
+  caveat?: CitedText
+  /** 1–3 standout positives. The pull-quotes on `<KitchenDossier>`. */
+  highlights?: CitedText[]
+  must_try?: PlaceMustTry[]
+  /** Vibe codes (cozy, quiet, family_friendly, …). Localised by the caller. */
+  tags?: CitedValue[]
+  dietary?: CitedValue[]
+  /** small | moderate | generous */
+  portion_size?: CitedValue
+  /** cheap | fair | mid_range | splurge */
+  value?: CitedValue
+  /** quiet | moderate | loud */
+  noise_level?: CitedValue
+  /** Text reviews behind the digest. */
+  review_count?: number
 }
 
 /** Labels passed to `<PlaceCard>`. All translation happens in the caller. */

package/src/components/qa-block.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QaBlock } from "./qa-block";
+import { mockQa } from "./menu-mocks";
+
+const meta: Meta<typeof QaBlock> = {
+  title: "Menu/QaBlock",
+  component: QaBlock,
+  tags: ["autodocs"],
+  args: { items: mockQa, heading: "Questions people ask" },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Questions answered from the numbers, as static prose — **never an accordion**. This block is the visible half of the page's `FAQPage` markup, and structured data must mirror content the reader can actually see; collapsing it hides every answer from the crawler's first paint and buys nothing, since 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.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof QaBlock>;
+
+export const Default: Story = {};
+
+/** Under a page that already supplies its own section heading. */
+export const NoHeading: Story = { args: { heading: undefined } };
+
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/qa-block.tsx

@@ -0,0 +1,60 @@
+import { cn } from "../lib/utils";
+import type { QaItem } from "./menu-types";
+
+/**
+ * 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.
+ */
+
+export 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;
+};
+
+export function QaBlock({ items, heading, questionAs: Question = "h3", className }: QaBlockProps) {
+  return (
+    <section className={cn(className)}>
+      {heading && (
+        <h2 className="text-[15px] font-bold leading-tight tracking-[-0.01em]">{heading}</h2>
+      )}
+
+      <div
+        className={cn(
+          "grid grid-cols-1 gap-[18px] lg:grid-cols-3 lg:gap-[26px]",
+          heading && "mt-3.5"
+        )}
+      >
+        {items.map((item) => (
+          <div key={item.question}>
+            <Question className="text-sm font-bold leading-[1.35] tracking-[-0.01em] lg:text-[15px]">
+              {item.question}
+            </Question>
+            <p className="mt-[7px] text-[13px] leading-[1.65] text-muted-foreground [text-wrap:pretty] lg:text-[13.5px]">
+              {item.answer}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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>
+  );
+}