@bearmenu/ui 0.8.51 → 0.8.53

package/dist/chunk-GIJGVFGC.js

@@ -0,0 +1,177 @@
+import { FilterOptionChip } from './chunk-RKNPPYRU.js';
+import { Separator } from './chunk-NWZGSLPU.js';
+import { Button } from './chunk-GHKTVHQG.js';
+import { Text } from './chunk-ZLMRVBD7.js';
+import { Badge } from './chunk-RYPPN2GZ.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { useId, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function FilterOptionGroup({
+  title,
+  options,
+  value,
+  onValueChange,
+  selection = "multiple",
+  name,
+  defaultOpen = false,
+  collapsible = true,
+  visibleLimit = 6,
+  showAllLabel,
+  showLessLabel,
+  children,
+  footer,
+  clearLabel,
+  onClear,
+  summaryValues = value,
+  className,
+  divider = true,
+  disabled
+}) {
+  const id = useId();
+  const [isOpen, setOpen] = useState(defaultOpen);
+  const open = !collapsible || isOpen;
+  const [expanded, setExpanded] = useState([]);
+  const selected = options.filter(
+    (option) => summaryValues.includes(option.value)
+  );
+  const sections = [];
+  for (const option of options) {
+    const last = sections[sections.length - 1];
+    if (!last || last.label !== option.section)
+      sections.push({ label: option.section, options: [option] });
+    else last.options.push(option);
+  }
+  const heading = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          id: `${id}-title`,
+          className: "block",
+          variant: "body-sm",
+          weight: "semibold",
+          children: title
+        }
+      ),
+      !open && selected.length > 0 && /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          variant: "caption",
+          color: "muted",
+          className: "mt-1 block leading-relaxed [overflow-wrap:anywhere]",
+          children: selected.map((option) => option.label).join(" \xB7 ")
+        }
+      )
+    ] }),
+    selected.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "tabular-nums", children: selected.length }),
+    collapsible && /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        "aria-hidden": true,
+        className: cn(
+          "size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+          open && "rotate-180"
+        )
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        collapsible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((previous) => !previous),
+            "aria-expanded": open,
+            "aria-controls": id,
+            className: "flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-lg py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex min-h-11 min-w-0 flex-1 items-center gap-3 py-2", children: heading }),
+        onClear && clearLabel && summaryValues.length > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            className: "min-h-11 shrink-0 px-2 text-xs",
+            onClick: onClear,
+            children: clearLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { id, hidden: !open, children: [
+        children,
+        sections.map((section, index) => {
+          var _a;
+          const sectionId = `${id}-section-${index}`;
+          const key = (_a = section.label) != null ? _a : "";
+          const isExpanded = expanded.includes(key);
+          const limit = showAllLabel ? visibleLimit : Infinity;
+          const visible = isExpanded ? section.options : section.options.filter(
+            (option, i) => i < limit || value.includes(option.value)
+          );
+          return /* @__PURE__ */ jsxs("div", { children: [
+            section.label && /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "h4",
+                id: sectionId,
+                variant: "caption",
+                weight: "semibold",
+                color: "muted",
+                className: "mt-3 mb-1",
+                children: section.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "fieldset",
+              {
+                "aria-labelledby": `${id}-title${section.label ? ` ${sectionId}` : ""}`,
+                disabled,
+                className: "m-0 flex min-w-0 flex-wrap gap-2 border-0 px-0 pt-2 pb-3",
+                children: visible.map((option) => /* @__PURE__ */ jsx(
+                  FilterOptionChip,
+                  {
+                    label: option.label,
+                    count: option.count,
+                    icon: option.icon,
+                    type: selection === "single" ? "radio" : "checkbox",
+                    name: selection === "single" ? name != null ? name : id : void 0,
+                    value: option.value,
+                    checked: value.includes(option.value),
+                    onChange: (event) => onValueChange(
+                      selection === "single" ? [option.value] : event.target.checked ? [...value, option.value] : value.filter((item) => item !== option.value)
+                    )
+                  },
+                  option.value
+                ))
+              }
+            ),
+            section.options.length > limit && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "link",
+                "aria-expanded": isExpanded,
+                onClick: () => setExpanded(
+                  (previous) => isExpanded ? previous.filter((item) => item !== key) : [...previous, key]
+                ),
+                className: "mb-1 min-h-11 px-0",
+                children: isExpanded ? showLessLabel : typeof showAllLabel === "function" ? showAllLabel(section.options.length) : showAllLabel
+              }
+            )
+          ] }, key);
+        }),
+        footer
+      ] })
+    ] }),
+    divider && /* @__PURE__ */ jsx(Separator, {})
+  ] });
+}
+
+export { FilterOptionGroup };

package/dist/chunk-H4ORZT2D.js

@@ -0,0 +1,14 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function PosterOverlayFrame({
+  overlay,
+  children
+}) {
+  if (!overlay) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-[1]", "aria-hidden": "true", children: overlay })
+  ] });
+}
+
+export { PosterOverlayFrame };

package/dist/chunk-RKNPPYRU.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
+import { useId } from 'react';
+import { Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FilterOptionChip(_a) {
+  var _b = _a, {
+    label,
+    type = "checkbox",
+    count,
+    icon,
+    className,
+    id,
+    disabled
+  } = _b, input = __objRest(_b, [
+    "label",
+    "type",
+    "count",
+    "icon",
+    "className",
+    "id",
+    "disabled"
+  ]);
+  var _a2;
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn(
+        "relative inline-flex max-w-full min-w-0",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, input), {
+            id: inputId,
+            type,
+            disabled,
+            "aria-label": (_a2 = input["aria-label"]) != null ? _a2 : label,
+            className: "peer sr-only"
+          })
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "flex min-h-11 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-2xl border border-border bg-background px-3 py-2 text-sm text-foreground",
+              "transition-colors hover:bg-muted motion-reduce:transition-none",
+              "peer-checked:border-primary peer-checked:bg-primary/10 peer-checked:shadow-[inset_0_0_0_1px_var(--primary)] peer-checked:text-primary",
+              "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring",
+              "peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed",
+              "[&_.filter-check]:hidden peer-checked:[&_.filter-check]:block peer-checked:[&_.filter-icon]:hidden"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  "aria-hidden": true,
+                  className: "filter-check size-4 shrink-0",
+                  strokeWidth: 2.5
+                }
+              ),
+              icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "filter-icon shrink-0 [&>svg]:size-4", children: icon }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: label }),
+              count != null && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "shrink-0 text-xs tabular-nums text-muted-foreground",
+                  children: count
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FilterOptionChip };

package/dist/{chunk-S5GDARLW.js → chunk-WY2FP76J.js}

@@ -16,6 +16,7 @@ function ruleFromLg(items) {
 function TimelineHour({
   time,
   role = "hour",
+  tone = "default",
   isLive,
   liveLabel,
   countLabel,
@@ -28,6 +29,7 @@ function TimelineHour({
   const isHero = role === "hero";
   const isContinuation = role === "continuation";
   const isUnscheduled = role === "unscheduled";
+  const isLiveGroup = isUnscheduled && tone === "live";
   const hasStation = !isUnscheduled;
   const isCards = layout === "cards";
   const items = React.Children.toArray(children);
@@ -36,10 +38,12 @@ function TimelineHour({
     "section",
     {
       "data-timeline-hour": role,
+      "data-tone": isLiveGroup ? "live" : void 0,
       className: cn(
         "relative flex flex-col pt-2.5",
         // The phone gutter: the puck's column plus the 12px gap `HourBand` had.
-        hasStation && "pl-[70px] lg:pl-0",
+        // A live group keeps it so its cards align with the hours' cards.
+        (hasStation || isLiveGroup) && "pl-[70px] lg:pl-0",
         "lg:pt-[22px]",
         isHero ? cn(
           // The lane. Placed by the grid, not by source order; `self-start`
@@ -88,12 +92,31 @@ function TimelineHour({
             className: cn(
               "items-center gap-2.5",
               isUnscheduled ? "flex h-4" : "hidden lg:flex lg:h-4",
-              isHero && "lg:hidden"
+              isHero && "lg:hidden",
+              // The heading spans the gutter; only the cards sit inset.
+              isLiveGroup && "-ml-[70px] lg:ml-0"
             ),
             children: [
-              isUnscheduled && /* @__PURE__ */ jsx("span", { className: "font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs", children: time }),
-              /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
-              countLabel && /* @__PURE__ */ jsx("span", { className: "text-[10.5px] text-muted-foreground/70 lg:text-[11px]", children: countLabel })
+              isLiveGroup ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs font-semibold text-success", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "size-1.5 shrink-0 animate-pulse rounded-full bg-success motion-reduce:animate-none"
+                  }
+                ),
+                time
+              ] }) : isUnscheduled && /* @__PURE__ */ jsx("span", { className: "font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs", children: time }),
+              /* @__PURE__ */ jsx(Separator, { className: cn("flex-1", isLiveGroup && "bg-success/30") }),
+              countLabel && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    isLiveGroup ? "text-xs text-muted-foreground" : "text-[10.5px] text-muted-foreground/70 lg:text-[11px]"
+                  ),
+                  children: countLabel
+                }
+              )
             ]
           }
         ),

package/dist/components/category-deck.d.ts

@@ -38,9 +38,14 @@ type CategoryDeckProps = {
     /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
     linkComponent?: React.ComponentType<CategoryDeckLinkProps>;
     onClick?: (mouseEvent: React.MouseEvent) => void;
+    /**
+     * Decoration laid over the fan's box, unclipped (it may cross the box's
+     * edge), above the cards. Absolutely positioned, `aria-hidden`, no layout.
+     */
+    overlay?: React.ReactNode;
     className?: string;
 };
-declare function CategoryDeck({ name, meta, posters, href, linkComponent: LinkComponent, onClick, className, }: CategoryDeckProps): react_jsx_runtime.JSX.Element;
+declare function CategoryDeck({ name, meta, posters, href, linkComponent: LinkComponent, onClick, overlay, className, }: CategoryDeckProps): react_jsx_runtime.JSX.Element;
 type CategoryDeckSkeletonProps = {
     className?: string;
 };

package/dist/components/category-deck.js

@@ -39,6 +39,7 @@ function CategoryDeck({
   href,
   linkComponent: LinkComponent = DefaultLink,
   onClick,
+  overlay,
   className
 }) {
   const slots = Array.from(
@@ -49,41 +50,44 @@ function CategoryDeck({
     }
   );
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "relative h-[150px] sm:h-[186px]", "aria-hidden": true, children: slots.map((poster, index) => {
-      var _a;
-      const transform = DECK_CARD_TRANSFORMS[index];
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "absolute left-1/2 top-0 aspect-[4/5] w-24 overflow-hidden rounded-[10px] bg-muted",
-            // Keyed to --foreground so the shadow is ink in light mode; in
-            // dark mode that same 18% is a light halo, so it drops to 7%.
-            "shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_18%,transparent)]",
-            "dark:shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_7%,transparent)]",
-            "sm:w-[120px]",
-            transform.rest,
-            transform.spread,
-            transform.z,
-            DECK_TRANSITION
-          ),
-          children: poster.content ? poster.content : poster.src ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: poster.src,
-                alt: (_a = poster.alt) != null ? _a : "",
-                loading: "lazy",
-                decoding: "async",
-                className: "h-full w-full object-cover"
-              }
-            )
-          ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
-        },
-        index
-      );
-    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-[150px] sm:h-[186px]", "aria-hidden": true, children: [
+      slots.map((poster, index) => {
+        var _a;
+        const transform = DECK_CARD_TRANSFORMS[index];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute left-1/2 top-0 aspect-[4/5] w-24 overflow-hidden rounded-[10px] bg-muted",
+              // Keyed to --foreground so the shadow is ink in light mode; in
+              // dark mode that same 18% is a light halo, so it drops to 7%.
+              "shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_18%,transparent)]",
+              "dark:shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_7%,transparent)]",
+              "sm:w-[120px]",
+              transform.rest,
+              transform.spread,
+              transform.z,
+              DECK_TRANSITION
+            ),
+            children: poster.content ? poster.content : poster.src ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: poster.src,
+                  alt: (_a = poster.alt) != null ? _a : "",
+                  loading: "lazy",
+                  decoding: "async",
+                  className: "h-full w-full object-cover"
+                }
+              )
+            ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
+          },
+          index
+        );
+      }),
+      overlay && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 z-[3] block", "aria-hidden": true, children: overlay })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[9px] pt-3.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("div", { className: "truncate text-[14.5px] font-extrabold tracking-[-0.015em] sm:text-base", children: name }),

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

@@ -57,6 +57,13 @@ type EventCardProps = {
     badge?: React.ReactNode;
     /** Bottom-left overlay pill naming the category. Include its icon. */
     tagLabel?: React.ReactNode;
+    /**
+     * Decorative overlay inside the poster box (which is `relative` and clips),
+     * for a caller's absolutely positioned ornament. Rendered after the pills,
+     * hidden on the compact row's 64px poster. Must be `aria-hidden` and
+     * pointer-transparent; it never takes layout.
+     */
+    posterOverlay?: React.ReactNode;
     /**
      * Caller-supplied display labels, rendered as small chips in the text area
      * beneath the venue/meta line. `EventPreview.tags` is taxonomy coordinates

package/dist/components/event-card.js

@@ -23,6 +23,7 @@ var EventCard = memo(function EventCard2({
   density = "card",
   badge,
   tagLabel,
+  posterOverlay,
   tags,
   liveStatus,
   hideWhen,
@@ -106,6 +107,14 @@ var EventCard = memo(function EventCard2({
               ),
               children: /* @__PURE__ */ jsx("span", { className: cn(PILL_BASE, "bg-black/55 text-white"), children: tagLabel })
             }
+          ),
+          posterOverlay && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("pointer-events-none absolute inset-0", isRowLg && "lg:hidden"),
+              "aria-hidden": "true",
+              children: posterOverlay
+            }
           )
         ]
       }

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

@@ -87,6 +87,12 @@ type EventCompactRowProps = {
     priority?: boolean;
     /** Rendered in place of the poster when it is absent or fails to load. Defaults to `<EventPosterFallback />`. */
     fallback?: React.ReactNode;
+    /**
+     * Decoration laid over the poster's box, unclipped (it may cross the
+     * poster's edge), above the row. Absolutely positioned, `aria-hidden`,
+     * pointer-transparent; it takes no layout.
+     */
+    posterOverlay?: React.ReactNode;
 };
 declare const EventCompactRow: React$1.NamedExoticComponent<EventCompactRowProps>;
 type EventCompactRowSkeletonProps = {

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

@@ -1,4 +1,5 @@
 import { TagGroup } from '../chunk-PX6RICS5.js';
+import { PosterOverlayFrame } from '../chunk-H4ORZT2D.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Tag } from '../chunk-MWB7S54O.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
@@ -30,7 +31,8 @@ var EventCompactRow = memo(function EventCompactRow2({
   onClick,
   className,
   priority,
-  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {})
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
+  posterOverlay
 }) {
   var _a;
   const [imgError, setImgError] = useState(false);
@@ -43,7 +45,7 @@ var EventCompactRow = memo(function EventCompactRow2({
   const showEnded = isEnded && !!endedLabel;
   const separator = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" });
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PosterOverlayFrame, { overlay: posterOverlay, children: /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
@@ -71,7 +73,7 @@ var EventCompactRow = memo(function EventCompactRow2({
           fallback
         )
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx(
         "div",

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

@@ -25,6 +25,11 @@ type EventHubHeroStat = {
     label: string;
     /** `live` marks the figure that is happening right now. */
     tone?: "default" | "live";
+    /**
+     * Decoration beside the figure, absolutely positioned just past its right
+     * edge: no layout. Decorative and `aria-hidden`.
+     */
+    adornment?: React.ReactNode;
 };
 type EventHubHeroProps = {
     /** Small caps-style label above the title, e.g. "Updated today". */

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

@@ -68,15 +68,26 @@ function EventHubHero({
                       "lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsxs(
                         "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]"
+                            "lg:text-[30px] lg:tracking-[-0.03em]",
+                            stat.adornment && "relative w-fit"
                           ),
-                          children: stat.value
+                          children: [
+                            stat.value,
+                            stat.adornment && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "pointer-events-none absolute left-full top-1/2 ml-1.5 -translate-y-1/2",
+                                "aria-hidden": true,
+                                children: stat.adornment
+                              }
+                            )
+                          ]
                         }
                       ),
                       /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[11px] text-muted-foreground lg:mt-[5px] lg:text-[12.5px]", children: stat.label })

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

@@ -86,6 +86,12 @@ type EventListRowWideProps = {
      * line. Same prop and same reason as `EventIndexRow`.
      */
     hideRule?: boolean;
+    /**
+     * Decoration laid over the thumbnail's box, unclipped (it may cross the
+     * thumbnail's edge). Absolutely positioned, `aria-hidden`,
+     * pointer-transparent; it takes no layout.
+     */
+    posterOverlay?: ReactNode;
 };
 declare const EventListRowWide: React$1.NamedExoticComponent<EventListRowWideProps>;
 type EventListRowWideSkeletonProps = {

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

@@ -1,3 +1,4 @@
+import { PosterOverlayFrame } from '../chunk-H4ORZT2D.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Tag } from '../chunk-MWB7S54O.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
@@ -30,7 +31,8 @@ var EventListRowWide = memo(function EventListRowWide2({
   className,
   priority,
   fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
-  hideRule
+  hideRule,
+  posterOverlay
 }) {
   var _a, _b;
   const [imgError, setImgError] = useState(false);
@@ -69,7 +71,7 @@ var EventListRowWide = memo(function EventListRowWide2({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "aspect-square w-[104px] shrink-0 overflow-hidden rounded-[10px] bg-muted", children: showPoster ? (
+    /* @__PURE__ */ jsx(PosterOverlayFrame, { overlay: posterOverlay, children: /* @__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",
@@ -82,7 +84,7 @@ var EventListRowWide = memo(function EventListRowWide2({
           onError: () => setImgError(true)
         }
       )
-    ) : fallback }),
+    ) : 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(

package/dist/components/event-tonight-strip.d.ts

@@ -40,9 +40,11 @@ type EventTonightStripProps = {
     href?: string;
     /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
     linkComponent?: React.ComponentType<EventTonightStripLinkProps>;
+    /** Replaces the pulsing dot of the `live` tone, in the dot's own slot. Decorative. */
+    liveIndicator?: React.ReactNode;
     className?: string;
 };
-declare function EventTonightStrip({ tone, lead, details, actionLabel, href, linkComponent: LinkComponent, className, }: EventTonightStripProps): react_jsx_runtime.JSX.Element;
+declare function EventTonightStrip({ tone, lead, details, actionLabel, href, linkComponent: LinkComponent, liveIndicator, className, }: EventTonightStripProps): react_jsx_runtime.JSX.Element;
 declare function EventTonightStripSkeleton({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;