@bearmenu/ui 0.8.3 → 0.8.6

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

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

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType } from 'react';
+
+/**
+ * EventDaySeparator — the day divider in the list view (as opposed to
+ * `<EventDayHeader>`, the timeline's oversized day-number header — the two
+ * live on different surfaces with different densities, not a size variant of
+ * one component).
+ *
+ * Both `label` and `count` are caller-composed strings, same reasoning as
+ * `<EventDayHeader>`'s `meta`: "Today · Thursday 3 September" / "15 events"
+ * don't decompose into parts without baking in English clause order.
+ *
+ * Renders the label as a real heading (`as`, default `h2`) so a list of these
+ * gives the page a document outline instead of being purely decorative rules.
+ *
+ * NOTE ON WEIGHT: this heading is deliberately SMALLER and lighter than the
+ * row titles beneath it. The boundary is already the strongest structural
+ * event on the page — a rule to the right edge, 24px of air above it, a muted
+ * count beside it — so it needs no ink on top of that. And the day is chrome
+ * on a scan surface where the events are the content: when the chrome is the
+ * heaviest thing on screen, the eye lands on the same repeated word every
+ * eight rows and nothing in the actual inventory ever wins. If the boundary
+ * ever needs to read louder, the levers are the rule and the air (move the
+ * `<Separator>` above the label), not the weight.
+ */
+type EventDaySeparatorProps = {
+    label: string;
+    count?: string;
+    size?: "sm" | "default";
+    /** Heading level for `label`. Defaults to `h2`. */
+    as?: ElementType;
+    className?: string;
+};
+declare function EventDaySeparator({ label, count, size, as: Tag, className, }: EventDaySeparatorProps): react_jsx_runtime.JSX.Element;
+type EventDaySeparatorSkeletonProps = {
+    /** Matches `EventDaySeparatorProps["size"]`. */
+    size?: "sm" | "default";
+    /** Shows the count placeholder — omit for label-only separators. */
+    showCount?: boolean;
+    className?: string;
+};
+/** Mirrors `<EventDaySeparator>`'s geometry exactly so nothing shifts when data lands. */
+declare function EventDaySeparatorSkeleton({ size, showCount, className, }: EventDaySeparatorSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventDaySeparator, type EventDaySeparatorProps, EventDaySeparatorSkeleton, type EventDaySeparatorSkeletonProps };

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

@@ -0,0 +1,50 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function EventDaySeparator({
+  label,
+  count,
+  size = "default",
+  as: Tag = "h2",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-[11px]",
+        size === "sm" ? "pt-[18px] pb-1" : "pt-6 pb-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Tag, { className: cn("font-semibold", size === "sm" ? "text-[13px]" : "text-sm"), children: label }),
+        count && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", size === "sm" ? "text-[11.5px]" : "text-xs"), children: count }),
+        /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
+      ]
+    }
+  );
+}
+function EventDaySeparatorSkeleton({
+  size = "default",
+  showCount = true,
+  className
+}) {
+  const isSm = size === "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("flex items-center gap-[11px]", isSm ? "pt-[18px] pb-1" : "pt-6 pb-2", className),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: cn(isSm ? "h-3" : "h-3.5", "w-40") }),
+        showCount && /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }),
+        /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
+      ]
+    }
+  );
+}
+
+export { EventDaySeparator, EventDaySeparatorSkeleton };

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

@@ -0,0 +1,80 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { EventPreview, EventFormatters } from './event-types.js';
+
+/**
+ * EventDetailPanel — the BODY of the event detail sheet.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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).
+ */
+type EventDetailPanelLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+type EventDetailVenue = {
+    name: string;
+    /** Address plus opening line, composed by the caller. */
+    meta?: string;
+    ratingLabel?: string;
+    thumbnailUrl?: string;
+    href?: string;
+};
+type EventDetailPanelLabels = {
+    free: string;
+    liveNow: string;
+    /** Section heading above the venue card. */
+    venueHeading: string;
+    /** Section heading above the description. */
+    aboutHeading: string;
+};
+type EventDetailPanelProps = {
+    event: EventPreview;
+    labels: EventDetailPanelLabels;
+    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.
+     */
+    dateLine: string;
+    venue?: EventDetailVenue;
+    /** Category chips beside the live/price chips. */
+    tags?: string[];
+    isLive?: boolean;
+    /** Close 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. */
+    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. */
+    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;
+type EventDetailPanelSkeletonProps = {
+    /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+    size?: "compact" | "default";
+    /** Close and share controls, positioned over the poster — same slot as the real component. */
+    headerActions?: React.ReactNode;
+    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;
+
+export { EventDetailPanel, type EventDetailPanelLabels, type EventDetailPanelLinkProps, type EventDetailPanelProps, EventDetailPanelSkeleton, type EventDetailPanelSkeletonProps, type EventDetailVenue };

package/dist/components/event-detail-panel.js

@@ -0,0 +1,251 @@
+import { Separator } from '../chunk-WSRWFA6K.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 { Star, ChevronRight, Calendar, Radio } from 'lucide-react';
+import { jsxs, 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 CHIP = "inline-flex items-center gap-1 rounded-full border border-border px-2.5 text-xs";
+function EventDetailPanel({
+  event,
+  labels,
+  formatters,
+  dateLine,
+  venue,
+  tags,
+  isLive,
+  headerActions,
+  footer,
+  externalLink,
+  size = "default",
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {})
+}) {
+  const compact = size === "compact";
+  const fee = resolveEventEntryFee(event);
+  const venueCard = venue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[13px] border border-border p-2.5", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "shrink-0 overflow-hidden rounded-[10px] bg-muted",
+          compact ? "h-12 w-12" : "h-[52px] w-[52px]"
+        ),
+        children: venue.thumbnailUrl && // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: venue.thumbnailUrl,
+            alt: "",
+            className: "h-full w-full object-cover",
+            loading: "lazy",
+            decoding: "async"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("font-bold", compact ? "text-[13.5px]" : "text-sm"), children: venue.name }),
+      venue.meta && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", compact ? "text-[11.5px]" : "text-xs"), children: venue.meta }),
+      venue.ratingLabel && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs font-bold", children: [
+        /* @__PURE__ */ jsx(Star, { className: "h-3 w-3", "aria-hidden": true }),
+        venue.ratingLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col overflow-hidden bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/5] shrink-0 overflow-hidden bg-muted", children: [
+        event.poster_url ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: event.poster_url,
+              alt: event.title,
+              className: "h-full w-full object-cover",
+              loading: "eager",
+              decoding: "async"
+            }
+          )
+        ) : fallback,
+        headerActions
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-3.5",
+            compact ? "px-4 pt-4" : "px-[22px] pt-5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "font-extrabold leading-[1.25] tracking-[-0.02em]",
+                  compact ? "text-xl" : "text-[21px]"
+                ),
+                children: event.title
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-1.5 text-muted-foreground",
+                  compact ? "text-[12.5px]" : "text-[13px]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Calendar, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4", "aria-hidden": true }),
+                  dateLine
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+              isLive && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    CHIP,
+                    "h-7 border-success/30 bg-success/10 font-semibold text-success"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3", "aria-hidden": true }),
+                    labels.liveNow
+                  ]
+                }
+              ),
+              tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx("span", { className: cn(CHIP, "h-7"), children: tag }, tag)),
+              fee.kind === "free" && /* @__PURE__ */ jsx("span", { className: cn(CHIP, "h-7 border-success/40 font-semibold text-success"), children: labels.free }),
+              fee.kind === "paid" && /* @__PURE__ */ jsx("span", { className: cn(CHIP, "h-7"), children: formatters.price(fee.amountRon) })
+            ] }),
+            venue && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "pb-2 text-[13px] font-extrabold", children: labels.venueHeading }),
+              venue.href ? /* @__PURE__ */ jsx(LinkComponent, { href: venue.href, className: "block", children: venueCard }) : venueCard
+            ] }),
+            event.description && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "pb-1.5 text-[13px] font-extrabold", children: labels.aboutHeading }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "leading-[1.6] text-muted-foreground",
+                    compact ? "text-[13px]" : "text-[13.5px]"
+                  ),
+                  children: event.description
+                }
+              )
+            ] }),
+            externalLink,
+            /* @__PURE__ */ jsx("div", { className: "h-2", "aria-hidden": true })
+          ]
+        }
+      )
+    ] }),
+    footer && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
+          compact ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]" : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+          footer
+        ]
+      }
+    )
+  ] });
+}
+function EventDetailPanelSkeleton({
+  size = "default",
+  headerActions,
+  className
+}) {
+  const compact = size === "compact";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("flex h-full flex-col overflow-hidden bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] shrink-0 overflow-hidden bg-muted", children: headerActions }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-3.5",
+                compact ? "px-4 pt-4" : "px-[22px] pt-5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: cn("w-3/4", compact ? "h-5" : "h-[21px]") }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: cn("shrink-0 rounded-full", compact ? "h-3.5 w-3.5" : "h-4 w-4") }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: cn("w-48", compact ? "h-[12.5px]" : "h-[13px]") })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-20 rounded-full" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-16 rounded-full" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "mb-2 h-[13px] w-28" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[13px] border border-border p-2.5", children: [
+                    /* @__PURE__ */ jsx(
+                      Skeleton,
+                      {
+                        className: cn(
+                          "shrink-0 rounded-[10px]",
+                          compact ? "h-12 w-12" : "h-[52px] w-[52px]"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx(Skeleton, { className: cn("w-1/2", compact ? "h-[13.5px]" : "h-3.5") }),
+                      /* @__PURE__ */ jsx(Skeleton, { className: cn("mt-1 w-3/4", compact ? "h-[11.5px]" : "h-3") })
+                    ] }),
+                    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 shrink-0 rounded-full" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "mb-1.5 h-[13px] w-32" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                    /* @__PURE__ */ jsx(Skeleton, { className: cn("w-full", compact ? "h-[13px]" : "h-[13.5px]") }),
+                    /* @__PURE__ */ jsx(Skeleton, { className: cn("w-full", compact ? "h-[13px]" : "h-[13.5px]") }),
+                    /* @__PURE__ */ jsx(Skeleton, { className: cn("w-2/3", compact ? "h-[13px]" : "h-[13.5px]") })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "h-2", "aria-hidden": true })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
+              compact ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]" : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] flex-1 rounded-xl" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] w-24 rounded-xl" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { EventDetailPanel, EventDetailPanelSkeleton };

package/dist/components/event-hub-hero.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * EventHubHero — the hub's opening block: an eyebrow, a big headline, an
+ * intro line and a stats row on the left; an arbitrary slot (the poster
+ * stack, in the source design) on the right. Stacks on mobile.
+ *
+ * All copy and stat values arrive pre-formatted — the DS holds no `Intl`
+ * locale and does not format numbers.
+ */
+type EventHubHeroStat = {
+    value: string;
+    label: string;
+};
+type EventHubHeroProps = {
+    /** Small caps-style label above the title, e.g. "Updated today". */
+    eyebrow: string;
+    title: string;
+    intro: string;
+    stats: EventHubHeroStat[];
+    /** The right-column slot — the poster stack in the source design. */
+    aside?: React.ReactNode;
+    className?: string;
+};
+declare function EventHubHero({ eyebrow, title, intro, stats, aside, className }: EventHubHeroProps): react_jsx_runtime.JSX.Element;
+type EventHubHeroSkeletonProps = {
+    /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
+    aside?: React.ReactNode;
+    className?: string;
+};
+declare function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { EventHubHero, type EventHubHeroProps, EventHubHeroSkeleton, type EventHubHeroSkeletonProps, type EventHubHeroStat };

package/dist/components/event-hub-hero.js

@@ -0,0 +1,57 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function EventHubHero({ eyebrow, title, intro, stats, aside, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[11.5px] font-extrabold tracking-[0.12em] text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ jsx("h1", { className: "text-[31px] font-black leading-[1.05] tracking-[-0.035em] text-foreground md:text-[42px] md:tracking-[-0.04em]", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-[520px] text-[14px] leading-[1.6] text-muted-foreground md:text-[15px] md:leading-[1.65]", children: intro }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-[22px] pt-1.5 md:gap-[30px]", children: stats.map((stat) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[24px] font-black leading-none tracking-[-0.03em] tabular-nums text-foreground md:text-[30px]", children: stat.value }),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 text-[11px] text-muted-foreground md:mt-[5px] md:text-[12.5px]", children: stat.label })
+          ] }, stat.label)) })
+        ] }),
+        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
+      ]
+    }
+  );
+}
+function EventHubHeroSkeleton({ aside, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[11.5px] w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[31px] w-full max-w-[420px] md:h-[42px]" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex max-w-[520px] flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-full md:h-[15px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-4/5 md:h-[15px]" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-[22px] pt-1.5 md:gap-[30px]", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[24px] w-10 md:h-[30px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-[11px] w-16 md:mt-[5px] md:h-[12.5px]" })
+          ] }, index)) })
+        ] }),
+        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
+      ]
+    }
+  );
+}
+
+export { EventHubHero, EventHubHeroSkeleton };