@bearmenu/ui 0.8.3 → 0.8.6

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

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentType } from 'react';
+
+/**
+ * EventIndexRow — the row of an exhaustive, crawlable event index.
+ *
+ * NOT `<EventListRowWide>`: that row belongs to the list VIEW, and it carries
+ * a price column and a Reserve chip because the list view is where you act.
+ * This row makes no claim to be operable — it is a catalogue entry. Its only
+ * affordances are two real links: the title (stretched over the whole row via
+ * `after:absolute after:inset-0`) and the venue (escaping that overlay with
+ * `relative z-10`, the same nested-link pattern `<EventListRowWide>` uses for
+ * `menuHref`). That venue link is why this could not be a variant of
+ * `<EventCompactRow>` or `<EventListRow>`: both wrap their entire body in one
+ * anchor, so a second link inside would be a nested `<a>` — invalid HTML that
+ * browsers unnest, breaking both links.
+ *
+ * NO `"use client"`, AND THAT IS LOAD-BEARING. This row's surface is a
+ * server-only prerendered page carrying ~50 of them, and every sibling row in
+ * this family is a client component for one reason: `useState` to catch
+ * `<img onError>`. Here the fallback is layered BEHIND the poster instead, so
+ * a failed image reveals the designed gradient with no JS at all. The
+ * consequence to accept: an image that returns 200 but decodes to garbage
+ * shows an empty box rather than the fallback.
+ *
+ * THE DESCRIPTION IS NEVER TRUNCATED IN THE MARKUP — it is clamped with CSS
+ * (`line-clamp`), so the full text stays in the DOM. Callers must pass the
+ * whole string. On this surface that is the entire point: the text is the
+ * page's body copy, and a row that cut it at N characters would be deleting
+ * the thing the section exists to carry.
+ *
+ * ROW RULES: this row draws its own top rule, same as `<EventListRow>` and
+ * `<EventListRowWide>`. Pass `hideRule` on the first row under a heading that
+ * already ends in one (`<EventDaySeparator>` does), or you get two rules a few
+ * pixels apart.
+ */
+type EventIndexRowLinkProps = {
+    href: string;
+    className?: string;
+    children: ReactNode;
+};
+type EventIndexRowProps = {
+    /** Rendered inside `as` and allowed to WRAP — a document-outline heading is never truncated. */
+    title: string;
+    /** Heading level for `title`. Defaults to `h3`, one below the group headings. */
+    as?: "h2" | "h3" | "h4";
+    href: string;
+    /** Leading emphasised fact on the meta line — caller-composed date + time, e.g. "26 iulie, 20:00–23:00". */
+    when: string;
+    venue?: string;
+    /** Makes the venue a real second link. Omit for a venue with no place page. */
+    venueHref?: string;
+    /** Plain text, never a chip: "intrare liberă" / "bilet 40 lei". */
+    fee?: string;
+    /** Display labels. `EventPreview.tags` is taxonomy coordinates the DS cannot translate, so the caller resolves and caps them. */
+    tags?: string[];
+    /** FULL text. Clamped to 3 lines (mobile) / 2 (md+) in CSS only. */
+    description?: string;
+    posterUrl?: string;
+    fallback?: ReactNode;
+    /** Suppresses the top rule. Use on the first row under a heading that draws its own. */
+    hideRule?: boolean;
+    linkComponent?: ComponentType<EventIndexRowLinkProps>;
+    className?: string;
+};
+declare function EventIndexRow({ title, as: Heading, href, when, venue, venueHref, fee, tags, description, posterUrl, fallback, hideRule, linkComponent: LinkComponent, className, }: EventIndexRowProps): react_jsx_runtime.JSX.Element;
+
+export { EventIndexRow, type EventIndexRowLinkProps, type EventIndexRowProps };

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

@@ -0,0 +1,84 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { TagGroup } from '../chunk-6XMYEZVR.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+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 EventIndexRow({
+  title,
+  as: Heading = "h3",
+  href,
+  when,
+  venue,
+  venueHref,
+  fee,
+  tags,
+  description,
+  posterUrl,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
+  hideRule,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const dot = /* @__PURE__ */ jsx("span", { className: "px-1 text-border", "aria-hidden": true, children: "\xB7" });
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted md:w-[104px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: fallback }),
+        posterUrl && // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: posterUrl,
+            alt: "",
+            loading: "lazy",
+            decoding: "async",
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "text-[15px] font-bold leading-snug tracking-[-0.01em] text-foreground md:text-[16.5px]", children: /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href,
+            className: "rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            children: title
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[12px] leading-5 text-muted-foreground md:text-[12.5px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-foreground", children: when }),
+          venue && /* @__PURE__ */ jsxs(Fragment, { children: [
+            dot,
+            venueHref ? /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: venueHref,
+                className: "relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                children: venue
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground/85", children: venue })
+          ] }),
+          fee && /* @__PURE__ */ jsxs(Fragment, { children: [
+            dot,
+            fee
+          ] })
+        ] }),
+        tags && tags.length > 0 && // `outline`, not the default: default `Tag` is `bg-muted`, and this
+        // row's surface is a `bg-muted/50` band — a 0.019-L delta in light
+        // mode, which is invisible. `outline` reads on both.
+        /* @__PURE__ */ jsx(TagGroup, { className: "mt-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "outline", children: tag }, tag)) }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-3 max-w-[620px] text-[13px] leading-[1.6] text-muted-foreground md:line-clamp-2 md:text-[13.5px] md:leading-[1.55]", children: description })
+      ] })
+    ] })
+  ] });
+}
+
+export { EventIndexRow };

package/dist/components/event-list-row-wide.d.ts

@@ -0,0 +1,101 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import { EventPreview, EventListRowLabels, EventDateBadgeFormatters } from './event-types.js';
+
+/**
+ * EventListRowWide — the desktop counterpart to `<EventListRow>`.
+ *
+ * Denser than `<EventCard>`, richer than the mobile `<EventListRow>`: desktop
+ * has the width to spare for a description and a dedicated action column, so
+ * this adds both rather than just scaling up the mobile row's type sizes.
+ *
+ * NESTED-LINK PATTERN, not the mobile row's single anchor: the row root is a
+ * plain, non-interactive container. The event TITLE is the primary link and
+ * gets a stretched overlay (`after:absolute after:inset-0`) so the whole row
+ * stays one big click target; "See the menu" (when `menuHref` is supplied) is
+ * a second, real link, `relative` with a higher `z-index` than the overlay so
+ * it wins the click in its own area — nesting it inside the title's anchor
+ * would be invalid HTML, which is why this uses two siblings instead. The
+ * title's `onClick` still fires for the caller (e.g. to `preventDefault()`
+ * into a detail sheet); modifier/middle-clicks still fall through to the
+ * anchor since nothing calls `preventDefault()` here.
+ *
+ * `event-list-row.tsx` (the mobile row) keeps the single-anchor shape and has
+ * no action column at all — the two were reconciled in favour of a real
+ * action here and none there, since a nested inert CTA inside a single-anchor
+ * row is a control that only looks like one. See that file's header.
+ *
+ * WEIGHT: the family tops out at 600, and after that pass the `Button` in this
+ * row's action column is the only 700-class element left in it — correct,
+ * since it is the only real action. Density sets weight, width sets size:
+ * both row titles are 600, and 15px vs 16.5px is what separates them.
+ *
+ * Same contract as the rest of the family: DS-owned view model, injected
+ * labels and formatters, plain `<img>`, anchor whenever `href` is given.
+ */
+type EventListRowWideLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+/**
+ * Extends the mobile row's labels with the strings only the wide row needs —
+ * the action column included, since this is the only row in the family that
+ * has one.
+ */
+type EventListRowWideLabels = EventListRowLabels & {
+    /** Primary row action, e.g. "Reserve". */
+    reserve: string;
+    /** Row action for a sold-out event. */
+    notifyMe: string;
+    /** Secondary link in the action column, e.g. "See the menu". */
+    seeMenu: string;
+};
+type EventListRowWideProps = {
+    event: EventPreview;
+    labels: EventListRowWideLabels;
+    formatters: EventDateBadgeFormatters;
+    /** Currently running — tints the date badge and shows the on-air chip. */
+    isLive?: boolean;
+    /** Sold out or otherwise closed — dims the row and swaps the CTA. */
+    isSoldOut?: boolean;
+    /**
+     * Caller-resolved tag display labels, rendered as chips after the venue.
+     * The DS holds no taxonomy display names, so resolving AND capping them is
+     * the caller's job — three is what the desktop meta line carries. Same
+     * contract as `EventListRowProps.tags`; this replaced a `tagsText` prose
+     * string, which was the only place in the family tags were not chips.
+     */
+    tags?: string[];
+    href?: string;
+    /** Destination for the "See the menu" affordance. Omit to not render it at all. */
+    menuHref?: string;
+    linkComponent?: React.ComponentType<EventListRowWideLinkProps>;
+    onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    priority?: boolean;
+    /** Rendered instead of the thumbnail when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+    fallback?: ReactNode;
+    /**
+     * Drops this row's top rule. Pass it on the FIRST row under a day heading:
+     * the heading already ends the block above it, so the row's own rule lands
+     * immediately beneath it and draws two dividers a few pixels apart. The gap
+     * is the separator there — whitespace does the same job without the second
+     * line. Same prop and same reason as `EventIndexRow`.
+     */
+    hideRule?: boolean;
+};
+declare const EventListRowWide: React$1.NamedExoticComponent<EventListRowWideProps>;
+type EventListRowWideSkeletonProps = {
+    /** Matches `EventListRowWideProps` shape: show the description block by default, drop it for `NoDescription`-style rows. */
+    showDescription?: boolean;
+    /** Matches `EventListRowWideProps["hideRule"]` — drop the top rule on the first row of a day group. */
+    hideRule?: boolean;
+    className?: string;
+};
+/** Mirrors `<EventListRowWide>`'s geometry exactly so nothing shifts when data lands. */
+declare function EventListRowWideSkeleton({ showDescription, hideRule, className, }: EventListRowWideSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventListRowWide, type EventListRowWideLabels, type EventListRowWideLinkProps, type EventListRowWideProps, EventListRowWideSkeleton, type EventListRowWideSkeletonProps };

package/dist/components/event-list-row-wide.js

@@ -0,0 +1,218 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
+import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { buttonVariants } from '../chunk-H3BV4VAG.js';
+import '../chunk-R47NEOSI.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { memo, useState } from 'react';
+import { Radio, MapPin } from 'lucide-react';
+import { jsxs, Fragment, 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 EventListRowWide = memo(function EventListRowWide2({
+  event,
+  labels,
+  formatters,
+  isLive,
+  isSoldOut,
+  tags,
+  href,
+  menuHref,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
+  hideRule
+}) {
+  var _a, _b;
+  const [imgError, setImgError] = useState(false);
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = (_a = event.place_name) != null ? _a : event.location;
+  const description = (_b = event.description) != null ? _b : event.short_description;
+  const priceText = fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("w-[52px] shrink-0 rounded-[10px] py-[7px] text-center", isLive && "bg-success/10"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-[19px] font-semibold leading-none tracking-[-0.02em] tabular-nums",
+                isLive ? "text-success" : "text-foreground"
+              ),
+              children: formatters.dayNumber(event.starts_at)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-[3px] text-[10.5px] font-semibold tracking-[0.06em]",
+                isLive ? "text-success" : "text-muted-foreground"
+              ),
+              children: formatters.monthShort(event.starts_at)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-[104px] shrink-0 overflow-hidden rounded-[10px] bg-muted", children: showPoster ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: event.poster_url,
+          alt: "",
+          loading: priority ? "eager" : "lazy",
+          decoding: "async",
+          className: "h-full w-full object-cover",
+          onError: () => setImgError(true)
+        }
+      )
+    ) : fallback }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        href ? /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href,
+            className: "rounded-sm text-[16.5px] font-semibold tracking-[-0.01em] after:absolute after:inset-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            onClick: onClick ? (mouseEvent) => onClick(event, mouseEvent) : void 0,
+            children: event.title
+          }
+        ) : onClick ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "relative cursor-pointer rounded-sm bg-transparent p-0 text-left text-[16.5px] font-semibold tracking-[-0.01em] after:absolute after:inset-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            onClick: (mouseEvent) => onClick(event, mouseEvent),
+            children: event.title
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "text-[16.5px] font-semibold tracking-[-0.01em]", children: event.title }),
+        isLive && /* @__PURE__ */ jsxs(Tag, { size: "sm", variant: "success", className: "shrink-0 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5", "aria-hidden": true }),
+          labels.liveNow
+        ] }),
+        isSoldOut && /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", className: "shrink-0 whitespace-nowrap", children: labels.soldOut })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-[5px] flex items-center gap-2 text-[12.5px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-foreground", children: formatters.time(event.starts_at) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
+        ] }),
+        tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", className: "shrink-0 whitespace-nowrap", children: tag }, tag))
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 max-w-[620px] text-[13.5px] leading-[1.55] text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-[150px] shrink-0 flex-col items-end gap-[9px]", children: [
+      priceText && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("text-[15px] font-semibold tabular-nums", fee.kind === "free" && "text-success"),
+          children: priceText
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: buttonVariants({
+            variant: isSoldOut ? "outline" : "default",
+            size: "sm"
+          }),
+          children: isSoldOut ? labels.notifyMe : labels.reserve
+        }
+      ),
+      menuHref && /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: menuHref,
+          className: "relative z-10 cursor-pointer rounded-sm text-xs font-semibold text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          children: labels.seeMenu
+        }
+      )
+    ] })
+  ] });
+  const rootClasses = cn(
+    "relative flex w-full items-start gap-[18px] py-[18px] text-left",
+    // The row is a click target — its title carries an `after:inset-0` overlay
+    // that makes the WHOLE row the link — and it had no hover response at all,
+    // so a pointer user got no confirmation the thing under the cursor was
+    // interactive until they had already clicked it.
+    //
+    // The tint bleeds past the text edges (`-mx-3 px-3`) so the fill reads as
+    // one row rather than a box drawn around the copy, and the row keeps its
+    // full-bleed separator. Sold-out rows are excluded: they are dimmed and
+    // inert, and lighting one up on hover promises an action that is not there.
+    //
+    // TEXT-KEYED, not surface-keyed — the same reasoning as `EventCompactRow`.
+    // This shipped as `bg-muted/50` and the numbers are why it did not stay:
+    // composited, that lands 0.0155 L from `--background` in light mode, which
+    // is the case this row actually renders in, and 0.0075 from `--card` in
+    // dark, which is invisible. `--foreground` at 5% holds 0.038-0.041 L across
+    // all four surface/mode combinations, so the wash is the same strength
+    // wherever the row is dropped and cannot be silently cancelled by the
+    // surface beneath it.
+    !isSoldOut && "-mx-3 rounded-xl px-3 transition-colors duration-150 hover:bg-foreground/5 motion-reduce:transition-none",
+    isSoldOut && "opacity-60",
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+});
+function EventListRowWideSkeleton({
+  showDescription = true,
+  hideRule,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative flex w-full items-start gap-[18px] py-[18px] text-left",
+        className
+      ),
+      children: [
+        !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "w-[52px] shrink-0 rounded-[10px] py-[7px] text-center", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto h-5 w-6" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto mt-[3px] h-[10px] w-7" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-[104px] shrink-0 rounded-[10px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[16.5px] w-3/5" }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-[5px] flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 shrink-0 rounded-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-16 rounded-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-12 rounded-full" })
+          ] }),
+          showDescription && /* @__PURE__ */ jsxs("div", { className: "mt-2 max-w-[620px] space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[13.5px] w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[13.5px] w-2/3" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-[150px] shrink-0 flex-col items-end gap-[9px]", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20 rounded-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { EventListRowWide, EventListRowWideSkeleton };

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

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import { EventPreview, EventListRowLabels, EventDateBadgeFormatters } from './event-types.js';
+
+/**
+ * EventListRow — the dense row used by the list view at phone width.
+ *
+ * Roughly eight events per screen against the poster card's two, which is the
+ * whole reason the list view exists: fourteen days of inventory is punishing to
+ * scan in posters.
+ *
+ * NOTE ON THE ROW ACTION: this row used to carry a trailing "Reserve" CTA that
+ * `<EventCard>` deliberately does not, and an earlier version of this comment
+ * asked for the two surfaces to be reconciled rather than for the CTA to be
+ * quietly dropped. This is that reconciliation, and it lands differently per
+ * width. At phone width the CTA is gone: it was an inert `<span>` inside the
+ * row's own anchor, so it was drawn like a booking control (`text-primary`,
+ * bold) while doing nothing that a tap anywhere else on the row did not
+ * already do. `<EventListRowWide>` keeps a real action column, because desktop
+ * has the width for one and its row root is a container rather than a single
+ * anchor. If a CTA comes back here, it has to be a real one, not a span.
+ *
+ * NOTE ON WEIGHT: nothing in this row is heavier than 600, and only the title
+ * and the date badge reach it. Eight of these stack per screen, and at that
+ * density hierarchy comes from size and ink tier, not from weight — a field of
+ * bold text has no foreground. `Free` is the one exception (600 plus
+ * `text-success`), because it is an inducement rather than an attribute.
+ *
+ * Same contract as the rest: DS-owned view model, injected labels and
+ * formatters, plain `<img>`, anchor whenever `href` is given.
+ */
+type EventListRowLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type EventListRowProps = {
+    event: EventPreview;
+    labels: EventListRowLabels;
+    formatters: EventDateBadgeFormatters;
+    /** Currently running — fills the date badge and shows the on-air chip. */
+    isLive?: boolean;
+    /** Sold out or otherwise closed — dims the row and replaces the fee. */
+    isSoldOut?: boolean;
+    href?: string;
+    linkComponent?: React.ComponentType<EventListRowLinkProps>;
+    onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    priority?: boolean;
+    /**
+     * Caller-resolved tag display labels for the chip line, e.g.
+     * `["Rock", "Terrace"]`. Same contract as `EventCompactRowProps.tags`: the
+     * DS holds no taxonomy display names, so the caller resolves AND caps them
+     * — two is what fits beside the live chip at 375px. Anything that does not
+     * fit is clipped whole rather than counted; see the chip line below.
+     */
+    tags?: string[];
+    /** Rendered instead of the thumbnail when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+    fallback?: ReactNode;
+    /**
+     * Drops this row's top rule. Pass it on the FIRST row under a day heading:
+     * the heading already ends the block above it, so the row's own rule lands
+     * immediately beneath it and draws two dividers a few pixels apart. The gap
+     * is the separator there — whitespace does the same job without the second
+     * line. Same prop and same reason as `EventListRowWide` and `EventIndexRow`.
+     */
+    hideRule?: boolean;
+};
+declare const EventListRow: React$1.NamedExoticComponent<EventListRowProps>;
+type EventListRowSkeletonProps = {
+    /** Matches `EventListRowProps["hideRule"]` — drop the top rule on the first row of a day group. */
+    hideRule?: boolean;
+    /** Reserve the chip line. Matches the real row, where it collapses on events with no live status and no tags. */
+    showTags?: boolean;
+    className?: string;
+};
+/** Mirrors `<EventListRow>`'s geometry exactly so nothing shifts when data lands. */
+declare function EventListRowSkeleton({ hideRule, showTags, className, }: EventListRowSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventListRow, type EventListRowLinkProps, type EventListRowProps, EventListRowSkeleton, type EventListRowSkeletonProps };