@bearmenu/ui 0.8.6 → 0.8.8

package/src/components/event-compact-row.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useState } from "react";
+import { Radio } from "lucide-react";
 import { cn } from "../lib/utils";
 import { EventPosterFallback } from "./event-poster-fallback";
 import { Skeleton } from "./skeleton";
@@ -25,10 +26,25 @@ import {
  *
  * 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.
+ * doubled it directly beneath every hour; `<HourBand>` rules between its rows
+ * with a wrapper. `<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.
+ *
+ * STATE LIVES ON THE META LINE. `isLive` adds the on-air chip and `isEnded`
+ * the ended chip beside the time and venue, so a row's state is read in the
+ * same glance as its facts. Ended dims the POSTER and moves the title to
+ * `--muted-foreground` — never row-level opacity, which composites the text
+ * below AA.
+ *
+ * THE PRICE IS ON THE LAST ROW, right-aligned beside the tags, not on the
+ * title line. Two bold things on one line compete — the title and a price
+ * both in 700 read as one shout — and the title is the thing the reader is
+ * scanning for. `showPrice` renders it (free in `--success`, paid in
+ * `--foreground`); without it the row keeps its trailing free pill for the
+ * hub's venue block. This is ONE row for the timeline and the list view:
+ * the list used to have its own, and the reader met two anatomies for the
+ * same object.
  *
  * Same contract as the rest: DS-owned view model, injected labels/formatters,
  * plain `<img>`, anchor whenever `href` is given.
@@ -49,7 +65,8 @@ export type EventCompactRowProps = {
   event: EventPreview;
   labels: EventCardLabels;
   formatters: EventFormatters;
-  /** Drops the leading time from the sub line. */
+  /** 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
@@ -67,6 +84,18 @@ export type EventCompactRowProps = {
    *  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[];
+  /** Currently running — adds the `labels.liveNow` chip to the meta line. */
+  isLive?: boolean;
+  /** Already over — dims the poster, mutes the title, adds the `endedLabel` chip. */
+  isEnded?: boolean;
+  /** Chip text for an ended event, e.g. "Ended". Required to render the chip. */
+  endedLabel?: string;
+  /**
+   * Prints the fee on the meta line — `labels.free` in `--success`, a paid
+   * amount via `formatters.price` — instead of the trailing free pill. An
+   * unknown fee prints nothing, same as every sibling row.
+   */
+  showPrice?: boolean;
   size?: "sm" | "default";
   href?: string;
   linkComponent?: React.ComponentType<EventCompactRowLinkProps>;
@@ -85,6 +114,10 @@ export const EventCompactRow = memo(function EventCompactRow({
   hideTime,
   subtitle,
   tags,
+  isLive,
+  isEnded,
+  endedLabel,
+  showPrice,
   size = "default",
   href,
   linkComponent: LinkComponent = DefaultLink,
@@ -99,10 +132,23 @@ export const EventCompactRow = memo(function EventCompactRow({
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
   const venue = event.place_name ?? event.location;
+  const time = formatters.time(event.starts_at);
+  const priceText =
+    fee.kind === "free"
+      ? labels.free
+      : fee.kind === "paid"
+        ? formatters.price(fee.amountRon)
+        : undefined;
+  const showEnded = isEnded && !!endedLabel;
+  const separator = (
+    <span aria-hidden className="text-border">
+      ·
+    </span>
+  );
 
   const body = (
     <>
-      {/* 64x80 AND PORTRAIT, not a 34px square, and both parts matter.
+      {/* 58px WIDE AND PORTRAIT, not a 34px square, and both parts matter.
           91% of the posters this renders are portrait and ~57% are Instagram's
           4:5 — so a square crop kept the middle band and threw away the top and
           bottom, which on a flyer is exactly where the act, the venue and the
@@ -113,8 +159,22 @@ export const EventCompactRow = memo(function EventCompactRow({
 
           One size for both `sm` and `default`: no consumer passes `sm` today,
           and the failure is identical on a phone, so there is no second number
-          to justify. `size` still drives type scale and pill height. */}
-      <div className="relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[9px] bg-muted">
+          to justify. `size` still drives type scale and pill height.
+
+          Ended dims the poster to ~45%, not the row: the text keeps full ink
+          and moves to the muted tier instead, which stays above AA.
+
+          64px at every width — the phone row briefly went to 58 and it was
+          too small to read a flyer by. Only the type scale and the padding are
+          phone-scoped: a 14px bold title and 11px of vertical padding below
+          `lg`; from `lg` the 13px semibold title and 8px padding the desktop
+          timeline and the hub's venue block already had. */}
+      <div
+        className={cn(
+          "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[10px] bg-muted",
+          isEnded && "opacity-45",
+        )}
+      >
         {showPoster ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
@@ -126,7 +186,7 @@ export const EventCompactRow = memo(function EventCompactRow({
             onError={() => setImgError(true)}
           />
         ) : (
-          // A bare `bg-muted` rectangle was survivable at 34px. At 64x80 beside
+          // A bare `bg-muted` rectangle was survivable at 34px. At 58x72 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.
@@ -144,45 +204,97 @@ export const EventCompactRow = memo(function EventCompactRow({
             fire. */}
         <div
           className={cn(
-            "font-semibold leading-[1.35]",
+            "leading-[1.3]",
             "transition-colors duration-150 motion-reduce:transition-none",
-            isSm ? "text-[13.5px]" : "text-[13px]",
-            (href || onClick) && "group-hover:text-primary"
+            isSm
+              ? "text-[14.5px] lg:text-[13.5px]"
+              : "text-[14px] lg:text-[13px]",
+            isEnded
+              ? "font-semibold text-muted-foreground"
+              : "font-bold text-foreground lg:font-semibold",
+            (href || onClick) && "group-hover:text-primary",
           )}
         >
           {event.title}
         </div>
-        <div className="truncate text-[11.5px] text-muted-foreground">
+        {/* The meta line wraps rather than truncates once it carries chips:
+            a state chip pushed off the end would be the one thing the reader
+            needed. Venue is the only free-text part and it is what may wrap. */}
+        <div
+          className={cn(
+            "mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground",
+            isLive || showEnded ? "flex-wrap" : "truncate",
+          )}
+        >
           {subtitle ? (
             subtitle
           ) : (
             <>
-              {!hideTime && (
+              {!hideTime && time && (
                 <>
-                  <span className="font-mono tabular-nums">{formatters.time(event.starts_at)}</span>
-                  <span aria-hidden> · </span>
+                  <span className="font-mono tabular-nums">{time}</span>
+                  {separator}
                 </>
               )}
-              {venue}
+              <span className="min-w-0 truncate">{venue}</span>
             </>
           )}
+          {isLive && (
+            <Tag
+              size="sm"
+              variant="success"
+              className="shrink-0 whitespace-nowrap font-extrabold"
+            >
+              <Radio className="h-2.5 w-2.5" aria-hidden />
+              {labels.liveNow}
+            </Tag>
+          )}
+          {showEnded && (
+            <Tag
+              size="sm"
+              variant="default"
+              className="shrink-0 whitespace-nowrap font-extrabold"
+            >
+              {endedLabel}
+            </Tag>
+          )}
         </div>
-        {tags && tags.length > 0 && (
-          <TagGroup className="mt-1">
-            {tags.map((tag) => (
-              <Tag key={tag} size="sm">
-                {tag}
-              </Tag>
-            ))}
-          </TagGroup>
+        {/* The last row: tags on the left, the fee on the right. Either half
+            may be absent; the row exists when at least one is there. */}
+        {((tags && tags.length > 0) || (showPrice && priceText)) && (
+          <div className="mt-1.5 flex items-center gap-2">
+            {tags && tags.length > 0 ? (
+              <TagGroup className="min-w-0 flex-1">
+                {tags.map((tag) => (
+                  <Tag key={tag} size="sm" variant="quiet">
+                    {tag}
+                  </Tag>
+                ))}
+              </TagGroup>
+            ) : (
+              <span className="flex-1" />
+            )}
+            {showPrice && priceText && (
+              <span
+                className={cn(
+                  "shrink-0 text-[13px] tabular-nums",
+                  fee.kind === "free"
+                    ? "font-semibold text-success"
+                    : "font-bold text-foreground",
+                )}
+              >
+                {priceText}
+              </span>
+            )}
+          </div>
         )}
       </div>
 
-      {fee.kind === "free" && (
+      {!showPrice && fee.kind === "free" && (
         <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]"
+            isSm ? "h-[22px] text-[10.5px]" : "h-6 text-[11px]",
           )}
         >
           {labels.free}
@@ -191,9 +303,9 @@ export const EventCompactRow = memo(function EventCompactRow({
     </>
   );
 
-  // `items-start`, not `items-center`: an 80px poster is taller than a one-line
-  // title over its sub-line, so centring floated the text in empty space.
-  // `EventListRow` already made this call at its own 72px poster.
+  // `items-start`, not `items-center`: a 72px-tall poster is taller than a
+  // one-line title over its sub-line, so centring floated the text in empty
+  // space. `EventListRow` makes the same call.
   //
   // THE HOVER WASH IS `bg-foreground/5`, AND THE TOKEN CHOICE IS LOAD-BEARING.
   // This row renders on two different planes: the timeline puts it straight on
@@ -209,11 +321,11 @@ export const EventCompactRow = memo(function EventCompactRow({
   // same shape `EventIndexRow` uses. No transform: this is a zero-gap stacked
   // list, so a lift would overlap its neighbours rather than read as elevation.
   const rootClasses = cn(
-    "group relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+    "group relative -mx-2.5 flex w-full items-start gap-3 rounded-lg px-2.5 py-[11px] text-left lg:gap-[11px] lg:py-2",
     "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
+    className,
   );
 
   if (href) {
@@ -221,7 +333,9 @@ export const EventCompactRow = memo(function EventCompactRow({
       <LinkComponent
         href={href}
         className={rootClasses}
-        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+        onClick={
+          onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined
+        }
       >
         {body}
       </LinkComponent>
@@ -230,7 +344,11 @@ export const EventCompactRow = memo(function EventCompactRow({
 
   if (onClick) {
     return (
-      <button type="button" className={rootClasses} onClick={(e) => onClick(event, e)}>
+      <button
+        type="button"
+        className={rootClasses}
+        onClick={(e) => onClick(event, e)}
+      >
         {body}
       </button>
     );
@@ -246,22 +364,30 @@ export type EventCompactRowSkeletonProps = {
 };
 
 /** Mirrors `<EventCompactRow>`'s geometry exactly so nothing shifts when data lands. */
-export function EventCompactRowSkeleton({ size = "default", className }: EventCompactRowSkeletonProps) {
+export function EventCompactRowSkeleton({
+  size = "default",
+  className,
+}: EventCompactRowSkeletonProps) {
   const isSm = size === "sm";
 
   return (
     <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
+        "relative -mx-2.5 flex w-full items-start gap-3 rounded-lg px-2.5 py-[11px] text-left lg:gap-[11px] lg:py-2",
+        className,
       )}
     >
-      <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[9px]" />
+      <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[10px]" />
 
       <div className="min-w-0 flex-1">
-        <Skeleton className={cn(isSm ? "h-[13.5px]" : "h-[13px]", "w-2/5")} />
-        <Skeleton className="mt-0.5 h-[11.5px] w-1/3" />
+        <Skeleton
+          className={cn(
+            isSm ? "h-[14.5px] lg:h-[13.5px]" : "h-[14px] lg:h-[13px]",
+            "w-3/5",
+          )}
+        />
+        <Skeleton className="mt-1 h-[11.5px] w-1/3" />
       </div>
     </div>
   );

package/src/components/event-day-header.tsx

@@ -76,7 +76,9 @@ export function EventDayHeader({
       <div
         className={cn(
           "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
-          large ? "text-[58px]" : "text-[40px]"
+          // `sm` is the phone scale: 30px, the design's app day head. 40px
+          // was a page-scale number that took a third of a 390px row.
+          large ? "text-[58px]" : "text-[30px] leading-[0.86]"
         )}
       >
         {dayNumber}

package/src/components/event-day-separator.tsx

@@ -28,6 +28,12 @@ import { Skeleton } from "./skeleton";
  */
 
 export type EventDaySeparatorProps = {
+  /**
+   * `always` (default) draws the trailing rule at every width. `lg` drops it
+   * below `lg`, where the list is an app sheet whose day heads are bold
+   * labels alone — the rows below rule themselves — and keeps it from `lg`.
+   */
+  rule?: "always" | "lg";
   label: string;
   count?: string;
   size?: "sm" | "default";
@@ -42,6 +48,7 @@ export function EventDaySeparator({
   size = "default",
   as: Tag = "h2",
   className,
+  rule = "always",
 }: EventDaySeparatorProps) {
   return (
     <div
@@ -61,7 +68,7 @@ export function EventDaySeparator({
         </span>
       )}
 
-      <Separator className="flex-1" />
+      <Separator className={cn("flex-1", rule === "lg" && "hidden lg:block")} />
     </div>
   );
 }

package/src/components/event-hub-hero.stories.tsx

@@ -19,6 +19,7 @@ const meta: Meta<typeof EventHubHero> = {
   component: EventHubHero,
   tags: ["autodocs"],
   args: {
+    statsLabel: "Key figures",
     eyebrow: "Updated today",
     title: "Everything happening in Bucharest",
     intro:
@@ -64,3 +65,32 @@ export const NoAside: Story = {
 export const Skeleton: Story = {
   render: () => <EventHubHeroSkeleton aside={<div className="aspect-[3/2] rounded-xl bg-muted" />} />,
 };
+
+/**
+ * Below `lg` the hero is a masthead: headline, one sub-line, and the figures
+ * as a chip rail bleeding to the screen edge. The `live` figure takes the
+ * success border and value. View at 390px.
+ */
+export const Masthead: Story = {
+  args: {
+    statsLabel: "Key figures",
+    eyebrow: "Updated today · next 14 days",
+    title: "Events in Cluj-Napoca",
+    intro:
+      "Everything on across the city for the next two weeks, from tonight's quizzes to the weekend's big rooms.",
+    stats: [
+      { value: "3", label: "on right now", tone: "live" },
+      { value: "76", label: "this fortnight" },
+      { value: "34", label: "venues" },
+      { value: "12", label: "free entry" },
+      { value: "18", label: "past midnight" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-surface-2 px-4 pt-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/event-hub-hero.tsx

@@ -5,9 +5,20 @@ import { cn } from "../lib/utils";
 import { Skeleton } from "./skeleton";
 
 /**
- * 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.
+ * EventHubHero — the hub's opening block. On desktop: an eyebrow, a big
+ * headline, an intro paragraph and a stats row on the left; an arbitrary slot
+ * (the poster stack, in the source design) on the right.
+ *
+ * BELOW `lg` IT IS A MASTHEAD, NOT A HERO. One headline line, the eyebrow
+ * demoted to a sub-line beneath it, no intro, and the figures as a swipeable
+ * rail of chips that bleeds to the screen edge. The first real content lands
+ * roughly 250px sooner than under the web-shaped hero — on a phone the page
+ * should show, not narrate. Same markup at every width; only the classes
+ * change, so the copy is authored once.
+ *
+ * A stat with `tone: "live"` is the one that is happening right now: its
+ * chip takes a `--success` border and value, the same live colour every
+ * events surface uses.
  *
  * All copy and stat values arrive pre-formatted — the DS holds no `Intl`
  * locale and does not format numbers.
@@ -16,6 +27,8 @@ import { Skeleton } from "./skeleton";
 export type EventHubHeroStat = {
   value: string;
   label: string;
+  /** `live` marks the figure that is happening right now. */
+  tone?: "default" | "live";
 };
 
 export type EventHubHeroProps = {
@@ -24,12 +37,28 @@ export type EventHubHeroProps = {
   title: string;
   intro: string;
   stats: EventHubHeroStat[];
+  /**
+   * Accessible name for the stats rail, e.g. "Key figures". When given, the
+   * rail is a named, focusable region so a keyboard can reach chips clipped
+   * by the phone's edge. Optional so existing consumers keep compiling — but
+   * pass it: without a name the rail cannot be focusable, and a phone reader
+   * on a keyboard cannot reach the last figures.
+   */
+  statsLabel?: string;
   /** The right-column slot — the poster stack in the source design. */
   aside?: React.ReactNode;
   className?: string;
 };
 
-export function EventHubHero({ eyebrow, title, intro, stats, aside, className }: EventHubHeroProps) {
+export function EventHubHero({
+  eyebrow,
+  title,
+  intro,
+  stats,
+  statsLabel,
+  aside,
+  className,
+}: EventHubHeroProps) {
   return (
     <div
       className={cn(
@@ -37,30 +66,70 @@ export function EventHubHero({ eyebrow, title, intro, stats, aside, className }:
         className
       )}
     >
-      <div className="flex flex-col gap-4">
-        <p className="text-[11.5px] font-extrabold tracking-[0.12em] text-muted-foreground">
+      <div className="flex flex-col gap-1.5 lg:gap-4">
+        {/* Eyebrow above the title on desktop; the sub-line beneath it on a
+            phone. `order` swaps the position, the classes swap the voice. */}
+        <p
+          className={cn(
+            "order-2 text-[13px] text-muted-foreground",
+            "lg:order-none lg:text-[11.5px] lg:font-extrabold lg:tracking-[0.12em]"
+          )}
+        >
           {eyebrow}
         </p>
 
-        <h1 className="text-[31px] font-black leading-[1.05] tracking-[-0.035em] text-foreground md:text-[42px] md:tracking-[-0.04em]">
+        <h1
+          className={cn(
+            "order-1 text-[26px] font-black leading-[1.1] tracking-[-0.035em] text-foreground",
+            "lg:order-none lg:text-[42px] lg:leading-[1.05] lg:tracking-[-0.04em]"
+          )}
+        >
           {title}
         </h1>
 
-        <p className="max-w-[520px] text-[14px] leading-[1.6] text-muted-foreground md:text-[15px] md:leading-[1.65]">
+        <p className="hidden max-w-[520px] text-[15px] leading-[1.65] text-muted-foreground lg:order-none lg:block">
           {intro}
         </p>
 
-        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
-          {stats.map((stat) => (
-            <div key={stat.label} className="flex flex-col">
-              <span className="text-[24px] font-black leading-none tracking-[-0.03em] tabular-nums text-foreground md:text-[30px]">
-                {stat.value}
-              </span>
-              <span className="mt-1 text-[11px] text-muted-foreground md:mt-[5px] md:text-[12.5px]">
-                {stat.label}
-              </span>
-            </div>
-          ))}
+        {/* Figures. A chip rail below `lg` — `-mx-4 px-4` runs it under the
+            page gutter so the last chip is cut by the screen edge, which is
+            what says "swipe"; inline figures from `lg`. */}
+        <div
+          role={statsLabel ? "region" : undefined}
+          aria-label={statsLabel}
+          tabIndex={statsLabel ? 0 : undefined}
+          className={cn(
+            "order-3 -mx-4 flex gap-2 overflow-x-auto px-4 pt-2 scrollbar-hide",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "lg:order-none lg:mx-0 lg:gap-[30px] lg:overflow-visible lg:px-0 lg:pt-1.5"
+          )}
+        >
+          {stats.map((stat) => {
+            const isLive = stat.tone === "live";
+            return (
+              <div
+                key={stat.label}
+                className={cn(
+                  "flex min-w-[106px] shrink-0 flex-col rounded-[14px] border bg-card px-[13px] py-2.5",
+                  isLive ? "border-success/40" : "border-border",
+                  "lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0"
+                )}
+              >
+                <span
+                  className={cn(
+                    "text-[19px] font-black leading-none tracking-[-0.02em] tabular-nums",
+                    isLive ? "text-success" : "text-foreground",
+                    "lg:text-[30px] lg:tracking-[-0.03em]"
+                  )}
+                >
+                  {stat.value}
+                </span>
+                <span className="mt-0.5 text-[11px] text-muted-foreground lg:mt-[5px] lg:text-[12.5px]">
+                  {stat.label}
+                </span>
+              </div>
+            );
+          })}
         </div>
       </div>
 
@@ -84,21 +153,24 @@ export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonP
         className
       )}
     >
-      <div className="flex flex-col gap-4">
-        <Skeleton className="h-[11.5px] w-28" />
+      <div className="flex flex-col gap-1.5 lg:gap-4">
+        <Skeleton className="order-2 h-[13px] w-40 lg:order-none lg:h-[11.5px] lg:w-28" />
 
-        <Skeleton className="h-[31px] w-full max-w-[420px] md:h-[42px]" />
+        <Skeleton className="order-1 h-[26px] w-full max-w-[420px] lg:order-none lg:h-[42px]" />
 
-        <div className="flex max-w-[520px] flex-col gap-1.5">
-          <Skeleton className="h-[14px] w-full md:h-[15px]" />
-          <Skeleton className="h-[14px] w-4/5 md:h-[15px]" />
+        <div className="hidden max-w-[520px] flex-col gap-1.5 lg:flex">
+          <Skeleton className="h-[15px] w-full" />
+          <Skeleton className="h-[15px] w-4/5" />
         </div>
 
-        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="flex flex-col">
-              <Skeleton className="h-[24px] w-10 md:h-[30px]" />
-              <Skeleton className="mt-1 h-[11px] w-16 md:mt-[5px] md:h-[12.5px]" />
+        <div className="order-3 -mx-4 flex gap-2 overflow-hidden px-4 pt-2 lg:order-none lg:mx-0 lg:gap-[30px] lg:px-0 lg:pt-1.5">
+          {Array.from({ length: 4 }, (_, index) => (
+            <div
+              key={index}
+              className="flex min-w-[106px] shrink-0 flex-col rounded-[14px] border border-border bg-card px-[13px] py-2.5 lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0"
+            >
+              <Skeleton className="h-[19px] w-8 lg:h-[30px] lg:w-10" />
+              <Skeleton className="mt-0.5 h-[11px] w-16 lg:mt-[5px] lg:h-[12.5px]" />
             </div>
           ))}
         </div>

package/src/components/event-list-row.stories.tsx

@@ -157,3 +157,37 @@ export const ADay: Story = {
     </div>
   ),
 };
+
+/**
+ * Inside a dated group the heading names the day, so the row drops its badge
+ * and leads with the poster. This is the list view's shipped shape.
+ */
+export const InDatedGroup: Story = {
+  render: () => (
+    <div className="flex flex-col">
+      <EventListRow
+        event={event("g1", "Hat Design Workshop with Matira Hats", "Del Mars", "2026-09-07T17:00:00", 795)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Workshop"]}
+        hideDate
+        hideRule
+      />
+      <EventListRow
+        event={event("g2", "International Quiz at Yolka", "Yolka", "2026-09-07T19:00:00", 0)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Drinks", "Games"]}
+        isLive
+        hideDate
+      />
+      <EventListRow
+        event={event("g3", "Klausen Quiz by GOtrivia", "Klausen Pubhouse", "2026-09-07T20:00:00", 20)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Drinks", "Games"]}
+        hideDate
+      />
+    </div>
+  ),
+};