@bearmenu/ui 0.8.8 → 0.8.9

package/dist/components/concept-compare.js

@@ -0,0 +1,162 @@
+import { MenuItem } from '../chunk-TH6W2PWG.js';
+import '../chunk-Q6QH52LJ.js';
+import { MenuField } from '../chunk-YS6BHKZO.js';
+import '../chunk-UKBNQO6Q.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Star, MessageSquare } 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 ConceptCompare({
+  concept,
+  labels,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  gradient,
+  imageUrl,
+  figures,
+  hrefs,
+  footnote,
+  actions,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  var _a;
+  const rows = (_a = concept.rows) != null ? _a : [];
+  const cheapest = rows.reduce(
+    (lowest, row) => lowest === void 0 || row.price < lowest ? row.price : lowest,
+    void 0
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-[18px] border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:gap-6 lg:p-5", children: [
+      imageUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: "",
+            className: "aspect-[16/9] w-full shrink-0 rounded-xl object-cover lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
+        MenuField,
+        {
+          name: concept.title,
+          gradient,
+          seedKey: concept.slug,
+          className: "aspect-[16/9] w-full shrink-0 rounded-xl lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[9.5px] font-bold uppercase tracking-[0.12em] text-muted-foreground", children: labels.kind }),
+        /* @__PURE__ */ jsx("h3", { className: "mt-1 font-serif text-2xl font-semibold tracking-[-0.02em] lg:text-[30px]", children: concept.title })
+      ] }),
+      figures && figures.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 gap-6 lg:gap-8", children: figures.map((figure) => /* @__PURE__ */ jsxs("div", { className: "text-left lg:text-right", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xl font-extrabold leading-none tracking-[-0.03em] tabular-nums lg:text-2xl", children: figure.value }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10.5px] text-muted-foreground", children: figure.label })
+      ] }, figure.label)) })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "border-t border-border lg:hidden", children: rows.map((row) => /* @__PURE__ */ jsx("li", { className: "border-b border-border last:border-b-0", children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        item: {
+          id: row.place_slug,
+          slug: row.place_slug,
+          // The kitchen's OWN wording leads the row — that IS the point
+          // of the module.
+          name: row.alias,
+          kind: concept.kind,
+          mentions: row.mentions,
+          sizes_and_prices: [{ size: 0, price: row.price }]
+        },
+        labels: itemLabels,
+        formatPrice,
+        formatCount,
+        venueName: row.place_name,
+        href: hrefs == null ? void 0 : hrefs[row.place_slug],
+        linkComponent: LinkComponent,
+        className: cn(row.price === cheapest && "bg-accent-subtle/40")
+      }
+    ) }, row.place_slug)) }),
+    /* @__PURE__ */ jsx("ol", { className: "hidden border-t border-border lg:block", children: rows.map((row, index) => {
+      const isCheapest = row.price === cheapest;
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-center text-xs font-bold tabular-nums text-muted-foreground", children: index + 1 }),
+        /* @__PURE__ */ jsxs("span", { className: "relative h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]", children: [
+          row.place_thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: row.place_thumbnail_url,
+              alt: "",
+              loading: "lazy",
+              className: "h-full w-full object-cover"
+            }
+          ),
+          row.open_now && /* @__PURE__ */ jsx(
+            "i",
+            {
+              "aria-hidden": true,
+              className: "absolute right-0.5 top-0.5 h-[6px] w-[6px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 w-[200px] shrink-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-bold tracking-[-0.01em]", children: row.place_name }),
+          /* @__PURE__ */ jsxs("span", { className: "mt-px flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+            row.rating != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Star, { className: "h-2.5 w-2.5", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: row.rating })
+            ] }),
+            row.place_area && /* @__PURE__ */ jsx("span", { className: "truncate", children: row.place_area })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-[9.5px] font-bold uppercase tracking-[0.1em] text-muted-foreground", children: labels.alias }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate font-serif text-[13px] italic", children: row.alias })
+        ] }),
+        row.mentions != null && row.mentions > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[11px] tabular-nums text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "h-[11px] w-[11px]", "aria-hidden": true }),
+          row.mentions
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "w-[92px] shrink-0 text-right", children: [
+          /* @__PURE__ */ jsx(
+            "b",
+            {
+              className: cn(
+                "block text-sm font-extrabold tabular-nums",
+                isCheapest && "text-[var(--free,currentColor)]"
+              ),
+              children: formatPrice(row.price)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "block text-[10px] text-muted-foreground", children: isCheapest && labels.cheapest ? labels.cheapest : labels.perPortion })
+        ] })
+      ] });
+      const rowClasses = "flex items-center gap-4 px-5 py-3";
+      return /* @__PURE__ */ jsx("li", { className: "border-b border-border last:border-b-0", children: (hrefs == null ? void 0 : hrefs[row.place_slug]) ? /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: hrefs[row.place_slug],
+          className: cn(
+            rowClasses,
+            "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          ),
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: rowClasses, children: content }) }, row.place_slug);
+    }) }),
+    (footnote || actions) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 p-4", children: [
+      footnote && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-muted-foreground", children: footnote }),
+      actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+    ] })
+  ] });
+}
+
+export { ConceptCompare };

package/dist/components/event-card.js

@@ -1,6 +1,6 @@
 import { TagGroup } from '../chunk-6XMYEZVR.js';
-import { Tag } from '../chunk-ZDAHKI3A.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/event-compact-row.d.ts

@@ -56,7 +56,7 @@ type EventCompactRowProps = {
      * repeating it on each one is noise — the caller has something more
      * differentiating to say instead (the event's own description). The
      * timeline keeps the default: there the venue IS what tells rows apart
-     * across the night. Mirrors `menu-item-row.tsx`'s prop of the same name and
+     * across the night. Mirrors `menu-item.tsx`'s prop of the same name and
      * intent.
      */
     subtitle?: string;

package/dist/components/event-compact-row.js

@@ -1,6 +1,6 @@
 import { TagGroup } from '../chunk-6XMYEZVR.js';
-import { Tag } from '../chunk-ZDAHKI3A.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/event-detail-panel.d.ts

@@ -3,41 +3,85 @@ import * as React from 'react';
 import { EventPreview, EventFormatters } from './event-types.js';
 
 /**
- * EventDetailPanel — the BODY of the event detail sheet.
+ * EventDetailPanel — the BODY of the event detail sheet, and the body the
+ * event PAGE is a superset of.
  *
  * Deliberately not a sheet. The design opens this as a side sheet over a dimmed
- * page on desktop and a bottom sheet on mobile, and the DS already ships `Sheet`
- * and `Drawer`; owning sheet mechanics a third time here would fork them. The
- * consuming app mounts this inside whichever container the breakpoint calls for.
+ * page on desktop and a bottom drawer on mobile, and the DS already ships
+ * `Sheet` and `Drawer`; owning sheet mechanics a third time here would fork
+ * them. The consuming app mounts this inside whichever container the
+ * breakpoint calls for, and passes the container's own controls (close, back,
+ * share) as `headerActions`, positioned over the poster by this component.
  *
- * This is the terminal surface for acting on an event, which is why the cards
- * that open it carry no actions of their own — the footer is where booking and
- * directions live.
+ * ONE BODY, TWO HOSTS. The same regions in the same order everywhere: poster,
+ * title, when-line, one chip row, venue, line-up, about, external link, then a
+ * footer of one primary action over a row of ghost actions. The page renders
+ * these regions itself with more room; nothing here is invented twice.
  *
- * Everything is injected: strings via `labels`, times via `formatters`, and the
- * close/share affordances as `headerActions` so the sheet container owns
- * dismissal (bearmenu sheets close by drag handle, not by back navigation).
+ * THE HERO IS CAPPED, NOT A RATIO. 91% of posters are 4:5 flyers, and at 4:5 a
+ * hero took 68% of a side sheet and cut the venue card mid-row before any
+ * scrolling — the one thing this surface exists to answer. So `heroHeight`
+ * caps it: 300px on the 480px side sheet, 318px on the phone drawer, chosen so
+ * the venue card clears the fold even when status, fee, hype and two tags wrap
+ * the chip row onto a second line. It crops more than a 4:3 would, and that is
+ * the trade; the full flyer is one tap away on the page.
+ *
+ * STATUS IS A CHIP, IN THE INFO BLOCK. Cards put pills on the poster because a
+ * card has nowhere else; a detail surface does, and a portrait flyer is busy
+ * artwork already. `live` and the free fee are `--success`; `soon` is the
+ * accent — success is reserved for live and free, and a third meaning on the
+ * same colour would flatten both. `ended` desaturates and dims the POSTER
+ * (never the whole surface, which drops text below AA), mutes the title and
+ * adds an explicit chip; the host replaces the primary action rather than
+ * disabling it.
+ *
+ * Everything is injected: strings via `labels`, times via `formatters`, the
+ * date line and the soon label composed by the caller (clause order is
+ * locale-dependent and "is this live" depends on the app's clock, not the
+ * DS's).
  */
 type EventDetailPanelLinkProps = {
     href: string;
     className?: string;
     children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
 };
+type EventDetailStatus = "upcoming" | "soon" | "live" | "ended";
 type EventDetailVenue = {
     name: string;
-    /** Address plus opening line, composed by the caller. */
-    meta?: string;
+    /** Address line, e.g. "Str. Iuliu Maniu 5". */
+    address?: string;
+    /** e.g. "4.7" — rendered with a star. */
     ratingLabel?: string;
+    /** e.g. "open until 20:00" — appended to the meta row when given. */
+    openLabel?: string;
+    /** Lights the green dot on the thumbnail. */
+    isOpenNow?: boolean;
     thumbnailUrl?: string;
+    /**
+     * The venue's own page. Without it the card is not a link and shows
+     * `labels.venueNoPage` beneath the name — a venue the ingest knows by name
+     * only, which is common and must not read as a broken link.
+     */
     href?: string;
 };
 type EventDetailPanelLabels = {
     free: string;
     liveNow: string;
+    /** The ended chip, e.g. "Ended". */
+    ended: string;
     /** Section heading above the venue card. */
     venueHeading: string;
+    /** Under the venue name when the venue has no page, e.g. "name only — no venue page yet". */
+    venueNoPage: string;
+    /** Section heading above the performers. */
+    lineupHeading: string;
     /** Section heading above the description. */
     aboutHeading: string;
+    /** Italic placeholder when there is no description, e.g. "Event details coming soon." */
+    noDescription: string;
+    readMore: string;
+    readLess: string;
 };
 type EventDetailPanelProps = {
     event: EventPreview;
@@ -45,36 +89,138 @@ type EventDetailPanelProps = {
     formatters: EventFormatters;
     /**
      * The date line, composed by the caller — the design reads
-     * "Saturday, September 5 · Starts at 20:00", whose clause order and
-     * preposition are locale-dependent.
+     * "Tuesday, September 8 · Starts at 17:30", or "· time to be announced" when
+     * the hour is unknown. Clause order and preposition are locale-dependent.
      */
     dateLine: string;
+    /** The start as an ISO string; when given the date line is a `<time dateTime>`. */
+    dateTime?: string;
+    status?: EventDetailStatus;
+    /** The soon chip's text, composed by the caller — "Starts in 2h 10m". Required to render it. */
+    soonLabel?: string;
+    /** The hype tier, rendered as given (the app's own badge) in the chip row. */
+    hype?: React.ReactNode;
     venue?: EventDetailVenue;
-    /** Category chips beside the live/price chips. */
+    /** Activity tags, after status, fee and hype. */
     tags?: string[];
-    isLive?: boolean;
-    /** Close and share controls, positioned over the poster by this component. */
+    /** Performer names, in the order the API gave them. */
+    performers?: string[];
+    /** How many performers to show before the "show all" chip. Default 5. */
+    performersPreview?: number;
+    /** The "show all" chip's text, e.g. "Show all 8 performers". Required to render it. */
+    showAllPerformersLabel?: string;
+    /** Close, back and share controls, positioned over the poster by this component. */
     headerActions?: React.ReactNode;
-    /** Footer actions — the booking CTA and directions. Rendered in a sticky footer. */
+    /** The footer — usually an `EventDetailFooter`. Rendered below the scroll region. */
     footer?: React.ReactNode;
     /** An external link row, e.g. "View on Instagram". */
     externalLink?: React.ReactNode;
-    /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+    /**
+     * Poster height cap in px, or `"aspect"` for the poster's own 4:5. Defaults
+     * to 318 for `compact` (the phone drawer) and 300 otherwise (the side sheet).
+     */
+    heroHeight?: number | "aspect";
+    /** `compact` is the phone drawer: the shorter default hero cap. */
     size?: "compact" | "default";
     linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
     className?: string;
     /** Rendered instead of the poster when it's absent. Defaults to `<EventPosterFallback />`. */
     fallback?: React.ReactNode;
 };
-declare function EventDetailPanel({ event, labels, formatters, dateLine, venue, tags, isLive, headerActions, footer, externalLink, size, linkComponent: LinkComponent, className, fallback, }: EventDetailPanelProps): react_jsx_runtime.JSX.Element;
+declare function EventDetailPanel({ event, labels, formatters, dateLine, dateTime, status, soonLabel, hype, venue, tags, performers, performersPreview, showAllPerformersLabel, headerActions, footer, externalLink, heroHeight, size, linkComponent: LinkComponent, className, fallback, }: EventDetailPanelProps): react_jsx_runtime.JSX.Element;
+type EventDetailFooterProps = {
+    /**
+     * The one primary action — a `Button` (reserve, tickets, directions when
+     * there is no booking, or "see what's on tonight" for an ended event). The
+     * host decides which; this only lays it out.
+     */
+    primary: React.ReactNode;
+    /**
+     * Zero to two ghost actions — `EventDetailGhostAction`s — drawn as one row
+     * above the primary with a hairline between them. Ghosts, not bordered
+     * boxes: three bordered buttons stacked read as three equal choices, and
+     * the reserve action is not one of three.
+     */
+    ghosts?: React.ReactNode[];
+    className?: string;
+};
+/** The sticky footer under the panel's scroll region: one primary over a ghost row. */
+declare function EventDetailFooter({ primary, ghosts, className, }: EventDetailFooterProps): react_jsx_runtime.JSX.Element;
+type EventDetailGhostActionProps = {
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    href?: string;
+    linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    /** `_blank` for an outward link (a maps app). */
+    target?: string;
+    rel?: string;
+    className?: string;
+};
+/** A quiet action in the footer's ghost row. A link when `href` is given, a button otherwise. */
+declare function EventDetailGhostAction({ icon, children, href, linkComponent: LinkComponent, onClick, target, rel, className, }: EventDetailGhostActionProps): react_jsx_runtime.JSX.Element;
+type EventDetailPanelErrorProps = {
+    title: string;
+    description: string;
+    retryLabel: string;
+    onRetry: () => void;
+    /** The way onward, e.g. "See what's on tonight". */
+    secondaryLabel?: string;
+    secondaryHref?: string;
+    onSecondary?: () => void;
+    linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+    /** Close/share controls over the (empty) hero — same slot as the panel. */
+    headerActions?: React.ReactNode;
+    className?: string;
+};
+/**
+ * The panel when the event could not be loaded: an empty gradient hero so the
+ * sheet keeps its shape and its controls, then the message and a way onward —
+ * not only an apology.
+ */
+declare function EventDetailPanelError({ title, description, retryLabel, onRetry, secondaryLabel, secondaryHref, onSecondary, linkComponent: LinkComponent, headerActions, className, }: EventDetailPanelErrorProps): react_jsx_runtime.JSX.Element;
 type EventDetailPanelSkeletonProps = {
-    /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+    /** `compact` is the phone drawer: the shorter default hero cap. */
     size?: "compact" | "default";
-    /** Close and share controls, positioned over the poster — same slot as the real component. */
+    heroHeight?: number | "aspect";
+    /** Close and share controls over the poster — same slot as the real component. */
     headerActions?: React.ReactNode;
+    /**
+     * Announces the skeleton as a busy status region with this text, e.g.
+     * "Loading the event". Without it the skeleton is `aria-hidden` and the host
+     * is expected to announce loading itself.
+     */
+    label?: string;
     className?: string;
 };
-/** Mirrors `<EventDetailPanel>`'s geometry exactly: the hero scrolls away with the body, the footer is sticky. */
-declare function EventDetailPanelSkeleton({ size, headerActions, className, }: EventDetailPanelSkeletonProps): react_jsx_runtime.JSX.Element;
+/** Mirrors `<EventDetailPanel>`'s geometry: capped hero, two title lines, when-line, chips, venue card, line-up, about, ghost row and primary. */
+declare function EventDetailPanelSkeleton({ size, heroHeight, headerActions, label, className, }: EventDetailPanelSkeletonProps): react_jsx_runtime.JSX.Element;
+type EventDetailChipRowProps = Pick<EventDetailPanelProps, "event" | "formatters" | "status" | "soonLabel" | "hype" | "tags"> & {
+    /** Only the chip strings — a page rendering the row alone need not name the section headings. */
+    labels: Pick<EventDetailPanelLabels, "free" | "liveNow" | "ended">;
+    className?: string;
+};
+/**
+ * One wrapping row, all 24px: status, fee, hype, then activity tags. Exported
+ * so the page renders the same row above its title — it is the panel's row,
+ * not a second one.
+ */
+declare function EventDetailChipRow({ event, labels, formatters, status, soonLabel, hype, tags, className, }: EventDetailChipRowProps): react_jsx_runtime.JSX.Element;
+type EventDetailVenueCardProps = {
+    venue: EventDetailVenue;
+    labels: Pick<EventDetailPanelLabels, "venueNoPage">;
+    linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+    /** Thumbnail size in px: 52 in the sheet, 64 on the page. */
+    thumbnailSize?: 52 | 64;
+    /** An inline action beside the chevron — the page's "Open in Maps". */
+    action?: React.ReactNode;
+    className?: string;
+};
+/**
+ * The venue row: cover with an open-now dot, name, address · rating · open
+ * label, a chevron when it links. Without `venue.href` it is not a link and
+ * says so — a venue the ingest knows by name only must not read as broken.
+ */
+declare function EventDetailVenueCard({ venue, labels, linkComponent: LinkComponent, thumbnailSize, action, className, }: EventDetailVenueCardProps): react_jsx_runtime.JSX.Element;
 
-export { EventDetailPanel, type EventDetailPanelLabels, type EventDetailPanelLinkProps, type EventDetailPanelProps, EventDetailPanelSkeleton, type EventDetailPanelSkeletonProps, type EventDetailVenue };
+export { EventDetailChipRow, type EventDetailChipRowProps, EventDetailFooter, type EventDetailFooterProps, EventDetailGhostAction, type EventDetailGhostActionProps, EventDetailPanel, EventDetailPanelError, type EventDetailPanelErrorProps, type EventDetailPanelLabels, type EventDetailPanelLinkProps, type EventDetailPanelProps, EventDetailPanelSkeleton, type EventDetailPanelSkeletonProps, type EventDetailStatus, type EventDetailVenue, EventDetailVenueCard, type EventDetailVenueCardProps };