@bearmenu/ui 0.8.7 → 0.8.9

package/dist/components/drift-rail.js

@@ -1,3 +1,3 @@
-export { DriftRail } from '../chunk-GPH6L4DX.js';
+export { DriftRail } from '../chunk-AHL45DD2.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

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

@@ -61,6 +61,14 @@ type EventCardProps = {
     liveStatus?: string;
     /** Hide the day/time line — the timeline supplies its own hour heading. */
     hideWhen?: boolean;
+    /**
+     * Already over — dims the poster, mutes the title and shows the `endedLabel`
+     * chip. Never row-level opacity, which composites the text below AA. Same
+     * contract as `EventCompactRow`.
+     */
+    isEnded?: boolean;
+    /** Chip text for an ended event, e.g. "Ended". Required to render the chip. */
+    endedLabel?: string;
     /** 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. */

package/dist/components/event-card.js

@@ -1,6 +1,6 @@
 import { TagGroup } from '../chunk-6XMYEZVR.js';
-import { Tag } from '../chunk-ZDAHKI3A.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';
@@ -25,6 +25,8 @@ var EventCard = memo(function EventCard2({
   tags,
   liveStatus,
   hideWhen,
+  isEnded,
+  endedLabel,
   dayLabel,
   showPrice,
   href,
@@ -36,6 +38,7 @@ var EventCard = memo(function EventCard2({
 }) {
   var _a;
   const [imgError, setImgError] = useState(false);
+  const showEnded = isEnded && !!endedLabel;
   const time = hideWhen ? "" : formatters.time(event.starts_at);
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
@@ -46,6 +49,7 @@ var EventCard = memo(function EventCard2({
       {
         className: cn(
           "relative overflow-hidden rounded-xl bg-muted",
+          isEnded && "opacity-45",
           posterAspect === "3/4" ? "aspect-[3/4]" : posterAspect === "4/5" ? "aspect-[4/5]" : "aspect-[4/3]"
         ),
         children: [
@@ -66,10 +70,19 @@ var EventCard = memo(function EventCard2({
           ) : 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
-            ] })
+            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 }) })
         ]
@@ -80,7 +93,8 @@ var EventCard = memo(function EventCard2({
       {
         className: cn(
           "mt-2.5 leading-[1.35]",
-          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold"
+          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold",
+          isEnded && "text-muted-foreground"
         ),
         children: event.title
       }
@@ -104,7 +118,8 @@ var EventCard = memo(function EventCard2({
     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
-    ] })
+    ] }),
+    showEnded && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "default", className: "font-extrabold", children: endedLabel }) })
   ] });
   const rootClasses = cn(
     "flex min-w-0 flex-col text-left",
@@ -123,7 +138,15 @@ var EventCard = memo(function EventCard2({
     );
   }
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: rootClasses,
+        onClick: (e) => onClick(event, e),
+        children: body
+      }
+    );
   }
   return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
 });
@@ -133,32 +156,39 @@ function EventCardSkeleton({
   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" })
-    ] })
-  ] });
+  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

@@ -14,10 +14,25 @@ import { EventPreview, EventCardLabels, EventFormatters } from './event-types.js
  *
  * 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.
@@ -41,7 +56,7 @@ type EventCompactRowProps = {
      * 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
+     * across the night. Mirrors `menu-item.tsx`'s prop of the same name and
      * intent.
      */
     subtitle?: string;
@@ -51,6 +66,18 @@ 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>;
@@ -68,6 +95,6 @@ type EventCompactRowSkeletonProps = {
     className?: string;
 };
 /** Mirrors `<EventCompactRow>`'s geometry exactly so nothing shifts when data lands. */
-declare function EventCompactRowSkeleton({ size, className }: EventCompactRowSkeletonProps): react_jsx_runtime.JSX.Element;
+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

@@ -1,11 +1,12 @@
 import { TagGroup } from '../chunk-6XMYEZVR.js';
-import { Tag } from '../chunk-ZDAHKI3A.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Tag } from '../chunk-ZDAHKI3A.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 { Radio } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -19,6 +20,10 @@ var EventCompactRow = memo(function EventCompactRow2({
   hideTime,
   subtitle,
   tags,
+  isLive,
+  isEnded,
+  endedLabel,
+  showPrice,
   size = "default",
   href,
   linkComponent: LinkComponent = DefaultLink,
@@ -34,50 +39,107 @@ var EventCompactRow = memo(function EventCompactRow2({
   const showPoster = !!event.poster_url && !imgError;
   const venue = (_a = event.place_name) != null ? _a : event.location;
   const time = formatters.time(event.starts_at);
+  const priceText = fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : void 0;
+  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("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__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[10px] bg-muted",
+          isEnded && "opacity-45"
+        ),
+        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 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.
+          fallback
+        )
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx(
         "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]",
+            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"
           ),
           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)) })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground",
+            isLive || showEnded ? "flex-wrap" : "truncate"
+          ),
+          children: [
+            subtitle ? subtitle : /* @__PURE__ */ jsxs(Fragment, { children: [
+              !hideTime && time && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: time }),
+                separator
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: venue })
+            ] }),
+            isLive && /* @__PURE__ */ jsxs(
+              Tag,
+              {
+                size: "sm",
+                variant: "success",
+                className: "shrink-0 whitespace-nowrap font-extrabold",
+                children: [
+                  /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5", "aria-hidden": true }),
+                  labels.liveNow
+                ]
+              }
+            ),
+            showEnded && /* @__PURE__ */ jsx(
+              Tag,
+              {
+                size: "sm",
+                variant: "default",
+                className: "shrink-0 whitespace-nowrap font-extrabold",
+                children: endedLabel
+              }
+            )
+          ]
+        }
+      ),
+      (tags && tags.length > 0 || showPrice && priceText) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [
+        tags && tags.length > 0 ? /* @__PURE__ */ jsx(TagGroup, { className: "min-w-0 flex-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", children: tag }, tag)) }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        showPrice && priceText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-[13px] tabular-nums",
+              fee.kind === "free" ? "font-semibold text-success" : "font-bold text-foreground"
+            ),
+            children: priceText
+          }
+        )
+      ] })
     ] }),
-    fee.kind === "free" && /* @__PURE__ */ jsx(
+    !showPrice && fee.kind === "free" && /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
@@ -89,7 +151,7 @@ var EventCompactRow = memo(function EventCompactRow2({
     )
   ] });
   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
@@ -106,25 +168,44 @@ var EventCompactRow = memo(function EventCompactRow2({
     );
   }
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+    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 }) {
+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",
+        "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
       ),
       children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[9px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[10px]" }),
         /* @__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" })
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              className: cn(
+                isSm ? "h-[14.5px] lg:h-[13.5px]" : "h-[14px] lg:h-[13px]",
+                "w-3/5"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-[11.5px] w-1/3" })
         ] })
       ]
     }

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

@@ -27,7 +27,9 @@ function EventDayHeader({
       {
         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]"
         ),
         children: dayNumber
       }

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

@@ -25,6 +25,12 @@ import { ElementType } from 'react';
  * `<Separator>` above the label), not the weight.
  */
 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";
@@ -32,7 +38,7 @@ type EventDaySeparatorProps = {
     as?: ElementType;
     className?: string;
 };
-declare function EventDaySeparator({ label, count, size, as: Tag, className, }: EventDaySeparatorProps): react_jsx_runtime.JSX.Element;
+declare function EventDaySeparator({ label, count, size, as: Tag, className, rule, }: EventDaySeparatorProps): react_jsx_runtime.JSX.Element;
 type EventDaySeparatorSkeletonProps = {
     /** Matches `EventDaySeparatorProps["size"]`. */
     size?: "sm" | "default";

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

@@ -9,7 +9,8 @@ function EventDaySeparator({
   count,
   size = "default",
   as: Tag = "h2",
-  className
+  className,
+  rule = "always"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -22,7 +23,7 @@ function EventDaySeparator({
       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" })
+        /* @__PURE__ */ jsx(Separator, { className: cn("flex-1", rule === "lg" && "hidden lg:block") })
       ]
     }
   );