@bearmenu/ui 0.8.4 → 0.8.7

package/dist/components/event-card.d.ts

@@ -0,0 +1,97 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { EventPreview, EventCardLabels, EventFormatters } from './event-types.js';
+
+/**
+ * EventCard — the poster card every events surface reuses.
+ *
+ * RENDERS AN ANCHOR WHENEVER `href` IS GIVEN, and that is not incidental. The
+ * consumer app's events hub was measured serving 2,751 words and 50 links in
+ * its raw HTML but only 12 links — none of them to an event — in the rendered
+ * DOM, because the hydrated cards were `<button onClick>` rather than links.
+ * Pass `href` AND `onClick`: the anchor is real for crawlers, middle-click and
+ * "open in new tab", while `onClick` opens the detail sheet (call
+ * `preventDefault()` there). Falls back to a `<button>` when only `onClick` is
+ * given, and a plain `<div>` when neither is.
+ *
+ * Like `place-card.tsx`, this takes a DS-owned view model, injected labels and
+ * injected formatters — no app schema, no app hooks, no i18n, and a plain
+ * `<img>` so it works outside Next.
+ */
+type EventCardLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type EventCardProps = {
+    event: EventPreview;
+    labels: EventCardLabels;
+    formatters: EventFormatters;
+    /**
+     * Poster ratio. `4/3` is the house shape shared with the dish/drink/place
+     * cards — the default, and what every card sitting in a column should use.
+     * `3/4` is the hub's original portrait deck/rail/tape ratio. `4/5` matches
+     * the Instagram source most real posters ship at (1080x1350) and is used by
+     * the hub's editorial poster surfaces (`CategoryDeck`, `PosterTape`,
+     * `Coverflow`) — it crops less than `3/4` and is not the same as it.
+     */
+    posterAspect?: "4/3" | "3/4" | "4/5";
+    /** Larger title — the featured/highlight slot. Never a clamp: the title wraps in full either way. */
+    emphasis?: boolean;
+    /** Top-left overlay pill (the design's "Busy" hype marker). Include its icon. */
+    badge?: React.ReactNode;
+    /** Bottom-left overlay pill naming the category. Include its icon. */
+    tagLabel?: React.ReactNode;
+    /**
+     * Caller-supplied display labels, rendered as small chips in the text area
+     * beneath the venue/meta line. `EventPreview.tags` is taxonomy coordinates
+     * (`slug`/`axis_slug`), not display text, so the DS cannot render them
+     * itself. Distinct from `tagLabel`: that is a single overlay pill on the
+     * poster (the design's category affordance for posters); this is an
+     * in-body list for the rest of an event's tags. Cap the count at the call
+     * site — this card does not.
+     */
+    tags?: string[];
+    /**
+     * The live line, fully composed by the caller (e.g. "Live now · ends around
+     * 23:00"). Composed outside the DS deliberately: the clause order differs by
+     * locale, and "is this live" depends on the app's clock, not the DS's.
+     */
+    liveStatus?: string;
+    /** Hide the day/time line — the timeline supplies its own hour heading. */
+    hideWhen?: boolean;
+    /** Overrides the day label when the card appears outside its own day section. */
+    dayLabel?: string;
+    /** Append the entry fee to the meta line. Off by default, matching the design's base card. */
+    showPrice?: boolean;
+    href?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<EventCardLinkProps>;
+    onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    /** Forwarded to the poster's `loading` attribute (`"eager"` when true). */
+    priority?: boolean;
+    /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+    fallback?: React.ReactNode;
+};
+declare const EventCard: React$1.NamedExoticComponent<EventCardProps>;
+type EventCardSkeletonProps = {
+    /** Matches `EventCardProps["posterAspect"]` — keep the poster box the same shape. */
+    posterAspect?: "4/3" | "3/4" | "4/5";
+    /** Matches `EventCardProps["emphasis"]` — the featured slot's taller title. */
+    emphasis?: boolean;
+    /** Matches `EventCardProps["hideWhen"]` — drops the day/time line placeholder too. */
+    hideWhen?: boolean;
+    className?: string;
+};
+/**
+ * Mirrors `<EventCard>`'s geometry so nothing shifts when data lands — with
+ * one honest caveat since the title stopped being clamped: the placeholder
+ * reserves two lines (three under `emphasis`), and a real title longer than
+ * that will grow the card past the skeleton it replaces. Reserving more would
+ * only move the shift to the far commoner short-title case.
+ */
+declare function EventCardSkeleton({ posterAspect, emphasis, hideWhen, className, }: EventCardSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventCard, type EventCardLinkProps, type EventCardProps, EventCardSkeleton, type EventCardSkeletonProps };

package/dist/components/event-card.js

@@ -0,0 +1,164 @@
+import { TagGroup } from '../chunk-6XMYEZVR.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 { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { memo, useState } from 'react';
+import { Gift, MapPin, Radio } 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 PILL_BASE = "inline-flex items-center gap-1 h-6 max-w-[70%] px-2 rounded-full text-[11px] font-semibold";
+var EventCard = memo(function EventCard2({
+  event,
+  labels,
+  formatters,
+  posterAspect = "4/3",
+  emphasis,
+  badge,
+  tagLabel,
+  tags,
+  liveStatus,
+  hideWhen,
+  dayLabel,
+  showPrice,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {})
+}) {
+  var _a;
+  const [imgError, setImgError] = useState(false);
+  const time = hideWhen ? "" : formatters.time(event.starts_at);
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = (_a = event.place_name) != null ? _a : event.location;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative overflow-hidden rounded-xl bg-muted",
+          posterAspect === "3/4" ? "aspect-[3/4]" : posterAspect === "4/5" ? "aspect-[4/5]" : "aspect-[4/3]"
+        ),
+        children: [
+          showPoster ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: event.poster_url,
+                alt: event.title,
+                title: event.title,
+                loading: priority ? "eager" : "lazy",
+                decoding: "async",
+                className: "h-full w-full object-cover",
+                onError: () => setImgError(true)
+              }
+            )
+          ) : fallback,
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-2 top-2 flex items-start justify-between gap-2", children: [
+            badge ? /* @__PURE__ */ jsx("span", { className: cn(PILL_BASE, "bg-black/55 text-white"), children: badge }) : /* @__PURE__ */ jsx("span", {}),
+            fee.kind === "free" && /* @__PURE__ */ jsxs("span", { className: cn(PILL_BASE, "bg-success font-bold text-success-foreground"), children: [
+              /* @__PURE__ */ jsx(Gift, { className: "h-3 w-3", "aria-hidden": true }),
+              labels.free
+            ] })
+          ] }),
+          tagLabel && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 bottom-2 flex gap-1", children: /* @__PURE__ */ jsx("span", { className: cn(PILL_BASE, "bg-black/55 text-white"), children: tagLabel }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: cn(
+          "mt-2.5 leading-[1.35]",
+          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold"
+        ),
+        children: event.title
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-xs font-medium text-foreground/85", children: [
+      /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
+    ] }),
+    !hideWhen && /* @__PURE__ */ jsxs("div", { className: "mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: dayLabel != null ? dayLabel : formatters.day(event.starts_at) }),
+      time && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-border", "aria-hidden": true, children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: time })
+      ] }),
+      showPrice && fee.kind === "paid" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-border", "aria-hidden": true, children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: formatters.price(fee.amountRon) })
+      ] })
+    ] }),
+    tags && tags.length > 0 && /* @__PURE__ */ jsx(TagGroup, { className: "mt-1.5", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", children: tag }, tag)) }),
+    liveStatus && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5 text-xs font-bold text-success", children: [
+      /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+      liveStatus
+    ] })
+  ] });
+  const rootClasses = cn(
+    "flex min-w-0 flex-col text-left",
+    (href || onClick) && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        className: rootClasses,
+        onClick: onClick ? (mouseEvent) => onClick(event, mouseEvent) : void 0,
+        children: body
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+});
+function EventCardSkeleton({
+  posterAspect = "4/3",
+  emphasis,
+  hideWhen,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("flex min-w-0 flex-col text-left", className), children: [
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: cn(
+          posterAspect === "3/4" ? "aspect-[3/4]" : posterAspect === "4/5" ? "aspect-[4/5]" : "aspect-[4/3]"
+        )
+      }
+    ),
+    emphasis ? /* @__PURE__ */ jsxs("div", { className: "mt-2.5 space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/2" })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "mt-2.5 space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/3" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+    ] }),
+    !hideWhen && /* @__PURE__ */ jsxs("div", { className: "mt-[3px] flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" })
+    ] })
+  ] });
+}
+
+export { EventCard, EventCardSkeleton };

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

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { EventPreview, EventCardLabels, EventFormatters } from './event-types.js';
+
+/**
+ * EventCompactRow — the dense row used inside `<HourGroup>` once the night
+ * thins out and a run of poster cards would spend more space than it earns.
+ *
+ * NOT `<EventListRow>`: that one carries a date badge and a trailing CTA for
+ * the list view. This row has neither — the timeline's `<HourGroup>` already
+ * names the hour, and every row here means "open me", same as the poster
+ * card. `hideTime` drops the leading time from the sub line too, for the
+ * common case where the surrounding heading already names it to the minute.
+ *
+ * THIS ROW DOES NOT DRAW DIVIDERS; ITS CONTAINER DOES. `<HourGroup>` already
+ * draws the rule under the hour heading, so a row-level top separator here
+ * doubled it directly beneath every hour. `<EventListRow>` and
+ * `<EventListRowWide>` are different: they stack in a plain list with no
+ * other rule around them, so their own top separator is the only one there —
+ * do not carry this rule over to them.
+ *
+ * Same contract as the rest: DS-owned view model, injected labels/formatters,
+ * plain `<img>`, anchor whenever `href` is given.
+ */
+type EventCompactRowLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type EventCompactRowProps = {
+    event: EventPreview;
+    labels: EventCardLabels;
+    formatters: EventFormatters;
+    /** Drops the leading time from the sub line. An empty `formatters.time`
+     *  result (hour unknown) drops it the same way, without the prop. */
+    hideTime?: boolean;
+    /**
+     * Replaces the default "time · venue" sub-line entirely. For surfaces where
+     * the venue is already named above every row (the hub's venue block) and
+     * 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
+     * intent.
+     */
+    subtitle?: string;
+    /** Caller-supplied display labels — `EventPreview.tags` is taxonomy
+     *  coordinates (`slug`/`axis_slug`), not display text, so the DS cannot
+     *  render them itself. Rendered as small chips below the sub-line; wrap
+     *  rather than truncate, so a chip's own text is never cut mid-word. Cap
+     *  the count at the call site — this row does not. */
+    tags?: string[];
+    size?: "sm" | "default";
+    href?: string;
+    linkComponent?: React.ComponentType<EventCompactRowLinkProps>;
+    onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    /** Forwarded to the poster's `loading` attribute (`"eager"` when true). */
+    priority?: boolean;
+    /** Rendered in place of the poster when it is absent or fails to load. Defaults to `<EventPosterFallback />`. */
+    fallback?: React.ReactNode;
+};
+declare const EventCompactRow: React$1.NamedExoticComponent<EventCompactRowProps>;
+type EventCompactRowSkeletonProps = {
+    /** Matches `EventCompactRowProps["size"]` — keep the poster and title sizes in step. */
+    size?: "sm" | "default";
+    className?: string;
+};
+/** Mirrors `<EventCompactRow>`'s geometry exactly so nothing shifts when data lands. */
+declare function EventCompactRowSkeleton({ size, className }: EventCompactRowSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventCompactRow, type EventCompactRowLinkProps, type EventCompactRowProps, EventCompactRowSkeleton, type EventCompactRowSkeletonProps };

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

@@ -0,0 +1,134 @@
+import { TagGroup } from '../chunk-6XMYEZVR.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 { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { memo, useState } from '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 EventCompactRow = memo(function EventCompactRow2({
+  event,
+  labels,
+  formatters,
+  hideTime,
+  subtitle,
+  tags,
+  size = "default",
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {})
+}) {
+  var _a;
+  const [imgError, setImgError] = useState(false);
+  const isSm = size === "sm";
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = (_a = event.place_name) != null ? _a : event.location;
+  const time = formatters.time(event.starts_at);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[9px] 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)
+        }
+      )
+    ) : (
+      // A bare `bg-muted` rectangle was survivable at 34px. At 64x80 beside
+      // real posters it reads as a broken image rather than an absent one —
+      // so this row finally joins every sibling in the family in having a
+      // designed fallback.
+      fallback
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "font-semibold leading-[1.35]",
+            "transition-colors duration-150 motion-reduce:transition-none",
+            isSm ? "text-[13.5px]" : "text-[13px]",
+            (href || onClick) && "group-hover:text-primary"
+          ),
+          children: event.title
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "truncate text-[11.5px] text-muted-foreground", children: subtitle ? subtitle : /* @__PURE__ */ jsxs(Fragment, { children: [
+        !hideTime && time && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: time }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \xB7 " })
+        ] }),
+        venue
+      ] }) }),
+      tags && tags.length > 0 && /* @__PURE__ */ jsx(TagGroup, { className: "mt-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", children: tag }, tag)) })
+    ] }),
+    fee.kind === "free" && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-flex shrink-0 items-center rounded-full border border-success/40 px-2 font-semibold text-success",
+          isSm ? "h-[22px] text-[10.5px]" : "h-6 text-[11px]"
+        ),
+        children: labels.free
+      }
+    )
+  ] });
+  const rootClasses = cn(
+    "group relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+    "transition-colors duration-150 motion-reduce:transition-none",
+    (href || onClick) && "cursor-pointer hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        className: rootClasses,
+        onClick: onClick ? (mouseEvent) => onClick(event, mouseEvent) : void 0,
+        children: body
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+});
+function EventCompactRowSkeleton({ size = "default", className }) {
+  const isSm = size === "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[9px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: cn(isSm ? "h-[13.5px]" : "h-[13px]", "w-2/5") }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-0.5 h-[11.5px] w-1/3" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { EventCompactRow, EventCompactRowSkeleton };

package/dist/components/event-day-header.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * EventDayHeader — the day divider in the timeline: an oversized day number,
+ * the weekday, and a meta line.
+ *
+ * The meta line is ONE caller-composed string. The design's variants
+ * ("September · 15 events · 3 live", "September · nothing listed yet",
+ * "September · 2 of 23 are free") do not decompose into counts, and building
+ * them from parts inside the DS would bake in English clause order.
+ *
+ * A day with nothing on still gets a header — the empty state belongs under it,
+ * not instead of it, so the reader can see the date they are looking at.
+ */
+type EventDayHeaderLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+type EventDayHeaderProps = {
+    /** Day of month as displayed, e.g. "03". */
+    dayNumber: string;
+    /** Weekday name, already localised. */
+    weekday: string;
+    /** Month plus counts, composed by the caller. */
+    meta: string;
+    /**
+     * Trailing slot, right-aligned. The desktop design puts a "See the whole day →"
+     * chip here; mobile has no slot and falls back to the chevron below. Passing an
+     * action REPLACES the chevron rather than sitting beside it — two affordances
+     * for one destination is the duplication this design set out to remove.
+     *
+     * The action is rendered outside the header's own link/button when the header
+     * is itself interactive, so an interactive chip is never nested inside an
+     * anchor (invalid HTML, and it steals the row's click target).
+     */
+    action?: React.ReactNode;
+    /**
+     * Larger desktop scale: 58px day number, 18px weekday, 12.5px meta,
+     * against the mobile 40/15/11.5.
+     */
+    size?: "sm" | "default";
+    href?: string;
+    linkComponent?: React.ComponentType<EventDayHeaderLinkProps>;
+    onClick?: () => void;
+    className?: string;
+};
+declare function EventDayHeader({ dayNumber, weekday, meta, action, size, href, linkComponent: LinkComponent, onClick, className, }: EventDayHeaderProps): react_jsx_runtime.JSX.Element;
+type EventDayHeaderSkeletonProps = {
+    /** Reserves space for the chevron — only render this once you know the header will be tappable. */
+    interactive?: boolean;
+    className?: string;
+};
+/**
+ * Mirrors `<EventDayHeader>`'s geometry. The big day-number block (86×50,
+ * 10px radius) and the weekday/meta column (120×16, 200×12) come from the
+ * source design's own desktop day-header skeleton — the chevron does not: the
+ * design's spec for it (a 170×34 pill pushed right) matches nothing in this
+ * component, whose only trailing affordance is an 18×18 chevron icon, so that
+ * placeholder is sized from the real component instead.
+ */
+declare function EventDayHeaderSkeleton({ interactive, className }: EventDayHeaderSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventDayHeader, type EventDayHeaderLinkProps, type EventDayHeaderProps, EventDayHeaderSkeleton, type EventDayHeaderSkeletonProps };

package/dist/components/event-day-header.js

@@ -0,0 +1,95 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } 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));
+}
+function EventDayHeader({
+  dayNumber,
+  weekday,
+  meta,
+  action,
+  size = "sm",
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className
+}) {
+  const isInteractive = !!href || !!onClick;
+  const large = size === "default";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
+          large ? "text-[58px]" : "text-[40px]"
+        ),
+        children: dayNumber
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: large ? "pb-1" : "pb-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("font-extrabold tracking-[-0.015em]", large ? "text-lg" : "text-[15px]"),
+          children: weekday
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-0.5 text-muted-foreground",
+            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]"
+          ),
+          children: meta
+        }
+      )
+    ] }),
+    !action && isInteractive && /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto mb-1 h-[18px] w-[18px] text-muted-foreground", "aria-hidden": true })
+  ] });
+  const dateClasses = cn(
+    "flex min-w-0 items-end gap-3 text-left",
+    !action && "flex-1",
+    isInteractive && "cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  );
+  const date = href ? /* @__PURE__ */ jsx(LinkComponent, { href, className: dateClasses, children: body }) : onClick ? /* @__PURE__ */ jsx("button", { type: "button", className: dateClasses, onClick, children: body }) : /* @__PURE__ */ jsx("div", { className: dateClasses, children: body });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex w-full items-end gap-3 pb-3 pt-[18px]",
+        large && "gap-[18px] pb-4",
+        className
+      ),
+      children: [
+        date,
+        action && /* @__PURE__ */ jsx("div", { className: "ml-auto mb-1.5 shrink-0", children: action })
+      ]
+    }
+  );
+}
+function EventDayHeaderSkeleton({ interactive, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("relative flex w-full items-end gap-3 pb-3 pt-[18px] text-left", className),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[50px] w-[86px] rounded-[10px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 pb-0.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[120px]" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[200px]" })
+        ] }),
+        interactive && /* @__PURE__ */ jsx(Skeleton, { className: "mb-1 ml-auto h-[18px] w-[18px] shrink-0 rounded-full" })
+      ]
+    }
+  );
+}
+
+export { EventDayHeader, EventDayHeaderSkeleton };