@bearmenu/ui 0.8.4 → 0.8.6

package/dist/components/facet-group.js

@@ -0,0 +1,222 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { useId, useState } from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ROW_SIZE = {
+  comfortable: "-mx-2 min-h-11 rounded-lg px-2",
+  compact: "-mx-2 rounded-lg px-2 py-1"
+};
+var ROW_GAP = {
+  comfortable: "gap-[9px]",
+  compact: "gap-[2px]"
+};
+function FacetGroup(_a) {
+  var _b = _a, {
+    title,
+    icon: Icon,
+    options,
+    selection = "multiple",
+    name,
+    size = "comfortable",
+    collapsible = false,
+    defaultOpen = true,
+    onToggle,
+    moreLabel,
+    onMore,
+    className
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "icon",
+    "options",
+    "selection",
+    "name",
+    "size",
+    "collapsible",
+    "defaultOpen",
+    "onToggle",
+    "moreLabel",
+    "onMore",
+    "className"
+  ]);
+  const isSingle = selection === "single";
+  const regionId = useId();
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const open = collapsible ? isOpen : true;
+  const setOpen = setIsOpen;
+  const fallbackName = useId();
+  const groupName = name != null ? name : fallbackName;
+  return (
+    // NO SEPARATOR OF ITS OWN. This drew `<Separator className="absolute
+    // inset-x-0 top-0" />`, which looked like a rule above each group and was
+    // not: a `<legend>` is laid out in the fieldset's border box, so the
+    // padding box — and therefore `top-0` — begins BELOW it. The rule landed
+    // between a group's own label and its own options, cutting each group in
+    // half rather than dividing one from the next, and the first group got one
+    // above nothing.
+    //
+    // A divider between siblings belongs to whatever owns the order, and that
+    // is the caller — it alone knows which group is first and which groups
+    // rendered at all. So the caller interleaves `<Separator />` between
+    // groups; this component draws none.
+    /* @__PURE__ */ jsxs("fieldset", __spreadProps(__spreadValues({ className: cn("m-0 border-0 p-0 py-3", className) }, rest), { children: [
+      /* @__PURE__ */ jsx(
+        "legend",
+        {
+          className: cn(
+            "block w-full p-0 text-[11.5px] font-extrabold tracking-[0.1em] text-muted-foreground uppercase",
+            collapsible ? "mb-0" : "mb-[11px]"
+          ),
+          children: collapsible ? (
+            // The legend becomes the toggle. It stays inside `<legend>` so the
+            // fieldset keeps its accessible name and screen readers still
+            // announce the group per option; `aria-expanded` and the region id
+            // carry the disclosure on top of that rather than replacing it.
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setOpen((previous) => !previous),
+                "aria-expanded": open,
+                "aria-controls": regionId,
+                className: cn(
+                  "-mx-2 flex w-[calc(100%+1rem)] cursor-pointer items-center gap-1.5 rounded-lg px-2 py-1.5 text-left uppercase",
+                  "transition-[margin,background-color] duration-200 ease-out hover:bg-foreground/5 motion-reduce:transition-none",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  // The 11px exists to separate this label from ITS OPTIONS, so a
+                  // collapsed group must not keep it: with the panel at zero
+                  // height it becomes dead space below the label, and the group
+                  // reads as `12px | label | 23px` between the caller's dividers.
+                  // That 11px asymmetry is why an evenly-spaced stack of collapsed
+                  // groups looked like the rules were mis-centred — they were
+                  // centred, the labels were not. Transitioned alongside the panel
+                  // so the two move as one gesture rather than the margin snapping.
+                  open ? "mb-[11px]" : "mb-0"
+                ),
+                children: [
+                  Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-3.5 shrink-0", strokeWidth: 2.25 }),
+                  title,
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "ml-auto size-3.5 shrink-0 transition-transform duration-150 motion-reduce:transition-none",
+                        open ? "rotate-180" : "rotate-0"
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-3.5 shrink-0", strokeWidth: 2.25 }),
+            title
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+            open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: regionId,
+              inert: !open,
+              "aria-hidden": !open || void 0,
+              className: cn("flex flex-col", ROW_GAP[size]),
+              children: options.map((option) => {
+                const checked = !!option.checked;
+                return /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: cn(
+                      "flex cursor-pointer items-center gap-[9px] text-[13.5px] select-none",
+                      "transition-colors duration-150 hover:bg-muted/60 motion-reduce:transition-none",
+                      ROW_SIZE[size]
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: isSingle ? "radio" : "checkbox",
+                          name: isSingle ? groupName : void 0,
+                          className: "peer sr-only",
+                          checked,
+                          onChange: (event) => onToggle == null ? void 0 : onToggle(option.id, event.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "flex h-4 w-4 shrink-0 items-center justify-center border-[1.5px] transition-colors duration-150 motion-reduce:transition-none",
+                            isSingle ? "rounded-full" : "rounded-[5px]",
+                            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+                            checked ? "border-primary bg-primary" : "border-border bg-background"
+                          ),
+                          children: checked && (isSingle ? /* @__PURE__ */ jsx("span", { className: "size-[7px] rounded-full bg-primary-foreground" }) : /* @__PURE__ */ jsx(Check, { className: "h-[11px] w-[11px] text-primary-foreground", strokeWidth: 3 }))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          title: option.label,
+                          className: cn(
+                            "min-w-0 truncate",
+                            checked ? "font-bold text-primary" : "font-normal text-foreground"
+                          ),
+                          children: option.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 font-mono text-[11.5px] tabular-nums text-muted-foreground", children: option.count })
+                    ]
+                  },
+                  option.id
+                );
+              })
+            }
+          ) })
+        }
+      ),
+      moreLabel && open && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onMore,
+          className: "cursor-pointer pt-[11px] text-[12.5px] font-bold text-primary transition-colors duration-150 hover:text-primary/80 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
+          children: moreLabel
+        }
+      )
+    ] }))
+  );
+}
+function FacetGroupSkeleton({
+  optionCount = 4,
+  showMore,
+  size = "comfortable",
+  className
+}) {
+  return (
+    // Matches the live group: no rule of its own, `py-3`, and the row gap keyed
+    // to the same density — or the panel shifts on load by the difference.
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("py-3", className), children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "mb-[11px] h-3 w-20" }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", ROW_GAP[size]), children: Array.from({ length: optionCount }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-[9px]", ROW_SIZE[size]), children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-[5px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-5" })
+      ] }, index)) }),
+      showMore && /* @__PURE__ */ jsx(Skeleton, { className: "mt-[11px] h-3 w-16" })
+    ] })
+  );
+}
+
+export { FacetGroup, FacetGroupSkeleton };

package/dist/components/featured-rail-item.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * FeaturedRailItem — the card inside the featured rail (a `<DriftRail>` or a
+ * plain scroll snap row). Narrower than `<EventCard>`'s 4:3 base card and
+ * built for a single overlay pill rather than the badge-plus-fee pair, so it
+ * stays legible at 150–196px wide.
+ *
+ * The only motion here is the interactive hover/press lift shared by every DS
+ * card (see `card.tsx`) — the source design's continuous drift animation
+ * belongs to the rail this card sits inside, not the card itself.
+ */
+type FeaturedRailItemLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type FeaturedRailItemProps = {
+    title: string;
+    venue: string;
+    /** Caller-composed day/time line, e.g. "Sat 5 · 20:00". */
+    note: string;
+    /** Top-left overlay pill. Include its icon. */
+    tagLabel?: React.ReactNode;
+    posterUrl?: string;
+    href?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<FeaturedRailItemLinkProps>;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+    fallback?: ReactNode;
+};
+declare function FeaturedRailItem({ title, venue, note, tagLabel, posterUrl, href, linkComponent: LinkComponent, onClick, className, fallback, }: FeaturedRailItemProps): react_jsx_runtime.JSX.Element;
+type FeaturedRailItemSkeletonProps = {
+    className?: string;
+};
+declare function FeaturedRailItemSkeleton({ className }: FeaturedRailItemSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { FeaturedRailItem, type FeaturedRailItemLinkProps, type FeaturedRailItemProps, FeaturedRailItemSkeleton, type FeaturedRailItemSkeletonProps };

package/dist/components/featured-rail-item.js

@@ -0,0 +1,88 @@
+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 { useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function FeaturedRailItem({
+  title,
+  venue,
+  note,
+  tagLabel,
+  posterUrl,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {})
+}) {
+  const [imgError, setImgError] = useState(false);
+  const showPoster = !!posterUrl && !imgError;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-xl bg-muted", children: [
+      showPoster ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: posterUrl,
+            alt: title,
+            title,
+            loading: "lazy",
+            decoding: "async",
+            className: "h-full w-full object-cover",
+            onError: () => setImgError(true)
+          }
+        )
+      ) : fallback,
+      tagLabel && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 top-2 flex items-start", children: /* @__PURE__ */ jsx("span", { className: "inline-flex h-6 max-w-full items-center gap-1 rounded-full bg-black/55 px-2 text-[11px] font-semibold text-white", children: tagLabel }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-0.5 pt-2.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[13.5px] font-bold leading-[1.3]", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: venue }),
+      /* @__PURE__ */ jsx("div", { className: "mt-[3px] truncate text-[11.5px] font-bold text-primary", children: note })
+    ] })
+  ] });
+  const isInteractive = !!(href || onClick);
+  const rootClasses = cn(
+    "flex w-[150px] shrink-0 flex-col text-left sm:w-[196px]",
+    isInteractive && cn(
+      "cursor-pointer rounded-xl transition-transform duration-200",
+      "hover:-translate-y-0.5 active:scale-[0.99]",
+      "motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    ),
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href, className: rootClasses, onClick, children: body });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+}
+function FeaturedRailItemSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("flex w-[150px] shrink-0 flex-col sm:w-[196px]", className),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-xl" }),
+        /* @__PURE__ */ jsxs("div", { className: "px-0.5 pt-2.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[13.5px] w-4/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-3/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-[11.5px] w-2/5" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { FeaturedRailItem, FeaturedRailItemSkeleton };

package/dist/components/hour-band.d.ts

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * HourBand — one hour on the timeline's axis, with that hour's events beside it.
+ *
+ * The design's mobile timeline is deliberately plain: a 52px gutter carrying a
+ * hairline and an hour puck, and full-width cards to its right. Nothing else.
+ * The cards inside carry no timestamp of their own — this band IS the
+ * timestamp, which is why `EventCard` has `hideWhen`.
+ *
+ * The puck is the shared `TimelineHourPuck`, sitting ON the line with a
+ * background fill punching through it so the hairline reads as continuous
+ * behind the label. It used to be a second, hand-rolled copy of the desktop
+ * band's puck, and the two had drifted apart — this one borderless and
+ * `rounded-md px-1.5`, the desktop one bordered and `rounded-[7px] px-[7px]`.
+ * Sharing the object changes this gutter's pixels: the mobile puck now carries
+ * a border, which is what makes it read as clipped onto the rail rather than
+ * text floating over it, and matches the station on the desktop spine.
+ *
+ * `isLive` turns the puck green-bordered and reveals the NOW label beneath it,
+ * which is why live bands need extra top padding on the content column — the
+ * label occupies space the cards would otherwise start in.
+ *
+ * ── Why the gap is 24px and not 12px ──────────────────────────────────────
+ * THE PUCK IS WIDER THAN THE GUTTER IT SITS IN, and the gap is what absorbs
+ * the difference. A 12-hour locale renders "09:00 AM" — 8 monospace glyphs at
+ * 12.5px (~60px) plus `px-[7px]` twice and a border twice, so ~76px of puck
+ * centred on a 52px gutter, overflowing ~12px on each side. At the original
+ * `gap-3` that right-hand overflow exactly consumed the gap and the puck's
+ * edge landed ON the content column, which read as the hairline colliding
+ * with the rows beside it.
+ *
+ * 24px leaves ~12px of real clearance at the widest label. Do not tighten it
+ * back without re-deriving against a 12-hour locale: a 24-hour one ("09:00")
+ * is ~30px narrower and hides the problem completely.
+ */
+type HourBandProps = {
+    /** The hour, already formatted and localised — "20:00". */
+    time: string;
+    /** Marks this as the hour currently in progress. */
+    isLive?: boolean;
+    /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+    liveLabel?: string;
+    /** The hour's events. */
+    children: React.ReactNode;
+    className?: string;
+};
+declare function HourBand({ time, isLive, liveLabel, children, className }: HourBandProps): react_jsx_runtime.JSX.Element;
+type HourBandSkeletonProps = {
+    /** Cards to reserve space for. The design's loading frame shows two. */
+    cardCount?: number;
+    className?: string;
+};
+/**
+ * The mobile timeline's loading state, mirroring `HourBand` exactly — same 52px
+ * gutter, same hairline, same content gap — so nothing jumps when data lands.
+ *
+ * The puck is omitted rather than blocked out: the hour is not known until the
+ * data arrives, and a grey lozenge on the axis reads as a real, unreadable
+ * timestamp. The hairline alone still says "this is a time axis".
+ *
+ * Card footprints come from the design's own loading frame: a 220px poster with
+ * an 16px title bar and a 12px meta bar, then a 170px poster with a 15px title.
+ */
+declare function HourBandSkeleton({ cardCount, className }: HourBandSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { HourBand, type HourBandProps, HourBandSkeleton, type HourBandSkeletonProps };

package/dist/components/hour-band.js

@@ -0,0 +1,53 @@
+import { TimelineHourPuck } from '../chunk-637L7XQ3.js';
+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 HourBand({ time, isLive, liveLabel, children, className }) {
+  const showLiveLabel = isLive && !!liveLabel;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-6 pt-[18px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex w-[52px] shrink-0 justify-center", children: [
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }),
+      /* @__PURE__ */ jsx(
+        TimelineHourPuck,
+        {
+          time,
+          isLive,
+          liveLabel,
+          className: "absolute left-1/2 top-0 w-0"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-col gap-5 pb-2",
+          showLiveLabel ? "pt-[34px]" : "pt-1"
+        ),
+        children
+      }
+    )
+  ] });
+}
+function HourBandSkeleton({ cardCount = 2, className }) {
+  const cards = [
+    { poster: 220, title: "80%", meta: "50%" },
+    { poster: 170, title: "70%", meta: null }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-6 pt-[18px]", className), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative flex w-[52px] shrink-0 justify-center", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-5 pb-2 pt-1", children: Array.from({ length: cardCount }).map((_, index) => {
+      const card = cards[index % cards.length];
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "w-full", style: { height: card.poster } }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4", style: { width: card.title } }),
+        card.meta && /* @__PURE__ */ jsx(Skeleton, { className: "h-3", style: { width: card.meta } })
+      ] }, index);
+    }) })
+  ] });
+}
+
+export { HourBand, HourBandSkeleton };

package/dist/components/hour-group.d.ts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * HourGroup — an hour heading inside `<TimelineBand>`'s content column: a
+ * time, a rule, and a count, with that hour's rows beneath and an optional
+ * trailing note (e.g. "3 more not shown").
+ *
+ * ── `spine` — the desktop default ────────────────────────────────────────
+ * Inside a `<TimelineBand>`, pass `spine` and the hour renders as a
+ * `TimelineHourPuck` out ON the axis, centred on this heading's own rule,
+ * instead of as inline text at the head of the content column. Every hour of
+ * the day then reads as a station on the same rail, which is the entire point
+ * of the rail; the band itself no longer draws any hour, so there is nothing
+ * left to collide with.
+ *
+ * The offset is `calc(var(--timeline-spine) * -0.5)` — half the gutter, back
+ * from the content column's left edge, which lands on the hairline. Written
+ * with `*-0.5` rather than `/2` because a slash inside a Tailwind arbitrary
+ * value collides with the opacity-modifier parse. The `w-0` wrapper plus the
+ * puck's own `justify-center` is what centres it, so no `-translate-x-1/2` is
+ * needed and the live label centres on the same line for free.
+ *
+ * `spine` implies the inline time is suppressed — no caller should have to
+ * pass `spine hideTime` to avoid printing the hour twice.
+ *
+ * Keep the rule and the count. The rule is the only thing tying a puck to the
+ * rows it labels across the empty gutter; without it the puck reads as a
+ * sticker rather than a station on a track. The count carries information
+ * present nowhere else and terminates the rule so it doesn't dissolve.
+ *
+ * Where a group's rows already carry their own timestamps, `hideTime` drops the
+ * time and keeps the rule and count, so the hour is stated exactly once.
+ *
+ * `size="sm"` is the mobile variant, shrinking the type a half-step and
+ * matching `<HourBand>`'s own top offset (18px) rather than the desktop
+ * default (22px).
+ */
+type HourGroupProps = {
+    /** The hour, already formatted and localised — "20:00". */
+    time: string;
+    /**
+     * Render the hour as a puck out on `<TimelineBand>`'s spine instead of as
+     * inline text. The desktop timeline's default; implies `hideTime`.
+     */
+    spine?: boolean;
+    /** Marks this hour as the one currently in progress. `spine` only. */
+    isLive?: boolean;
+    /** Shown under the puck when live, e.g. "NOW". `spine` only. */
+    liveLabel?: string;
+    /**
+     * Drop the leading time, keeping the rule and count. For groups whose rows
+     * state their own time.
+     */
+    hideTime?: boolean;
+    /** Caller-composed, e.g. "2 events" — mirrors `EventDayHeader`'s `meta`. */
+    countLabel: string;
+    /** Trailing note shown after the rows, e.g. "3 more not shown". */
+    note?: string;
+    /** The hour's rows. */
+    children?: React.ReactNode;
+    size?: "sm" | "default";
+    className?: string;
+};
+declare function HourGroup({ time, spine, isLive, liveLabel, hideTime, countLabel, note, children, size, className, }: HourGroupProps): react_jsx_runtime.JSX.Element;
+
+export { HourGroup, type HourGroupProps };

package/dist/components/hour-group.js

@@ -0,0 +1,59 @@
+import { TimelineHourPuck } from '../chunk-637L7XQ3.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
+import '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function HourGroup({
+  time,
+  spine,
+  isLive,
+  liveLabel,
+  hideTime,
+  countLabel,
+  note,
+  children,
+  size = "default",
+  className
+}) {
+  const isSm = size === "sm";
+  return (
+    // The group's top padding lives HERE, not on the heading row, and that is
+    // load-bearing for `spine`: `top-1/2` resolves against the heading row's
+    // PADDING box while `items-center` centres the rule in its CONTENT box, so
+    // with `pt-[22px]` on the row the puck landed 19.25px down and the rule at
+    // 30.25px — 11px apart, the puck visibly riding above the line it is
+    // supposed to sit on. Unpadded, both resolve against the same box and the
+    // puck's centre, the rule and the spine hairline are one line.
+    /* @__PURE__ */ jsxs("div", { className: cn(isSm ? "pt-[18px]" : "pt-[22px]", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", spine && "relative"), children: [
+        spine && /* @__PURE__ */ jsx(
+          TimelineHourPuck,
+          {
+            time,
+            isLive,
+            liveLabel,
+            className: "absolute left-[calc(var(--timeline-spine)*-0.5)] top-1/2 w-0 -translate-y-1/2"
+          }
+        ),
+        !hideTime && !spine && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "font-mono text-muted-foreground tabular-nums",
+              isSm ? "text-[11.5px]" : "text-xs"
+            ),
+            children: time
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
+        /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground/70", isSm ? "text-[10.5px]" : "text-[11px]"), children: countLabel })
+      ] }),
+      children,
+      note && /* @__PURE__ */ jsx("p", { className: "pt-[9px] text-[11.5px] text-muted-foreground", children: note })
+    ] })
+  );
+}
+
+export { HourGroup };

package/dist/components/item.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const itemVariants: (props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {