@bearmenu/ui 0.8.7 → 0.8.9

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