@bearmenu/ui 0.8.4 → 0.8.7

package/dist/components/poster-wall.js

@@ -0,0 +1,183 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var POSTER_WALL_DESKTOP_TILE_COUNT = 48;
+var POSTER_WALL_COMPACT_TILE_COUNT = 36;
+var POSTER_WALL_SWEEP_KEYFRAMES_ID = "ds-poster-wall-sweep-keyframes";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = () => setReduced(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function useInViewport() {
+  const ref = React.useRef(null);
+  const [inView, setInView] = React.useState(true);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      threshold: 0
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, inView];
+}
+function PosterWall({ tiles, variant = "default", children, className }) {
+  const isCompact = variant === "compact";
+  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const slots = Array.from({ length: tileCount }, (_, index) => {
+    var _a;
+    return (_a = tiles == null ? void 0 : tiles[index]) != null ? _a : {};
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [wallRef, inView] = useInViewport();
+  const isSweepPaused = prefersReducedMotion || !inView;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wallRef,
+      className: cn(
+        "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
+        isCompact ? "h-[330px]" : "h-[420px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes ${POSTER_WALL_SWEEP_KEYFRAMES_ID} {
+          0% { transform: translateX(-30%); }
+          100% { transform: translateX(30%); }
+        }
+      ` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+              isCompact ? "grid-cols-6" : "grid-cols-12"
+            ),
+            "aria-hidden": true,
+            children: slots.map(
+              (tile, index) => tile.src ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: tile.src,
+                    alt: "",
+                    loading: "lazy",
+                    decoding: "async",
+                    className: "h-full w-full object-cover"
+                  },
+                  index
+                )
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]"
+                },
+                index
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute -inset-[20%]",
+            style: {
+              background: "radial-gradient(circle at 30% 50%, oklch(1 0 0 / 0.34) 0%, transparent 42%)",
+              animationName: POSTER_WALL_SWEEP_KEYFRAMES_ID,
+              animationDuration: "18s",
+              animationTimingFunction: "linear",
+              animationIterationCount: "infinite",
+              animationPlayState: isSweepPaused ? "paused" : "running"
+            },
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: isCompact ? "linear-gradient(to top, oklch(0.2 0.01 60 / 0.93) 0%, oklch(0.2 0.01 60 / 0.7) 55%, oklch(0.2 0.01 60 / 0.35) 100%)" : "linear-gradient(90deg, oklch(0.2 0.01 60 / 0.88) 0%, oklch(0.2 0.01 60 / 0.55) 55%, oklch(0.2 0.01 60 / 0.2) 100%)"
+            },
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative flex h-full min-w-0 flex-col text-white",
+              isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function PosterWallSkeleton({ variant = "default", className }) {
+  const isCompact = variant === "compact";
+  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
+        isCompact ? "h-[330px]" : "h-[420px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+              isCompact ? "grid-cols-6" : "grid-cols-12"
+            ),
+            children: Array.from({ length: tileCount }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-none bg-white/10" }, index))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: isCompact ? "linear-gradient(to top, oklch(0.2 0.01 60 / 0.93) 0%, oklch(0.2 0.01 60 / 0.7) 55%, oklch(0.2 0.01 60 / 0.35) 100%)" : "linear-gradient(90deg, oklch(0.2 0.01 60 / 0.88) 0%, oklch(0.2 0.01 60 / 0.55) 55%, oklch(0.2 0.01 60 / 0.2) 100%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex h-full min-w-0 flex-col",
+              isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52") }),
+              /* @__PURE__ */ jsx(Skeleton, { className: cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96") })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { PosterWall, PosterWallSkeleton };

package/dist/components/quiet-stretch.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * QuietStretch — the collapsed run of quiet days on the timeline, summarising
+ * a run of near-empty days into one row so the reader doesn't scroll past
+ * dozens of "nothing on" headers to reach the next thing worth seeing.
+ *
+ * Responsive rather than a separate mobile component: past `sm` the label,
+ * days and action sit on one row; below it they stack, and the days list
+ * wraps at a tighter gap (14px vs. the desktop 22px).
+ *
+ * The action renders as a link whenever `href` is given, a button when only
+ * `onAction` is — same anchor rule as the rest of the events surface.
+ */
+type QuietStretchLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type QuietStretchDay = {
+    id: string;
+    /** Already formatted and localised, e.g. "Mon 7". */
+    dayLabel: string;
+    count: number;
+};
+type QuietStretchProps = {
+    /** e.g. "QUIET STRETCH". */
+    label: string;
+    days: QuietStretchDay[];
+    /** Shown in place of a zero count, e.g. "nothing yet". */
+    emptyLabel: string;
+    /** e.g. "Expand". */
+    actionLabel: string;
+    href?: string;
+    linkComponent?: React.ComponentType<QuietStretchLinkProps>;
+    onAction?: (mouseEvent: React.MouseEvent) => void;
+    className?: string;
+};
+declare function QuietStretch({ label, days, emptyLabel, actionLabel, href, linkComponent: LinkComponent, onAction, className, }: QuietStretchProps): react_jsx_runtime.JSX.Element;
+
+export { QuietStretch, type QuietStretchDay, type QuietStretchLinkProps, type QuietStretchProps };

package/dist/components/quiet-stretch.js

@@ -0,0 +1,54 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronDown } from 'lucide-react';
+import { jsxs, jsx, 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 QuietStretch({
+  label,
+  days,
+  emptyLabel,
+  actionLabel,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onAction,
+  className
+}) {
+  const isInteractive = !!href || !!onAction;
+  const actionClasses = cn(
+    "inline-flex items-center gap-1 whitespace-nowrap rounded-sm text-[13px] font-bold text-primary sm:ml-auto",
+    isInteractive && cn(
+      "-m-1 cursor-pointer p-1",
+      "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"
+    )
+  );
+  const action = /* @__PURE__ */ jsxs(Fragment, { children: [
+    actionLabel,
+    /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5", "aria-hidden": true })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "my-2 flex flex-col gap-3 rounded-xl bg-muted px-[22px] py-5",
+        "sm:flex-row sm:items-center sm:gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs font-extrabold tracking-widest text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3.5 text-[13px] sm:gap-[22px]", children: days.map((day) => /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-bold", children: day.dayLabel }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: day.count > 0 ? day.count : emptyLabel })
+        ] }, day.id)) }),
+        href ? /* @__PURE__ */ jsx(LinkComponent, { href, className: actionClasses, onClick: onAction, children: action }) : onAction ? /* @__PURE__ */ jsx("button", { type: "button", className: actionClasses, onClick: onAction, children: action }) : /* @__PURE__ */ jsx("span", { className: actionClasses, children: action })
+      ]
+    }
+  );
+}
+
+export { QuietStretch };

package/dist/components/section-header.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * SectionHeader — the title row every rail, list and hub section opens with:
+ * title (+ optional count), an optional trailing action, and an optional
+ * subtitle line beneath.
+ *
+ * Renders a link when `actionHref` is given, a button when only `onAction`
+ * is, and no action at all otherwise — same href/onClick contract as
+ * `EventCard`. No app schema, no i18n, no app hooks.
+ */
+type SectionHeaderLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type SectionHeaderProps = {
+    title: string;
+    /** Renders inline after the title in muted text, e.g. "12". */
+    count?: number;
+    /** Sub-text below the title row. */
+    subtitle?: string;
+    /** Trailing action label, e.g. "See all". */
+    action?: string;
+    actionHref?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<SectionHeaderLinkProps>;
+    onAction?: (mouseEvent: React.MouseEvent) => void;
+    /**
+     * Heading level for `title`, or `"p"` / `"div"` for a section opener that
+     * should NOT enter the document outline — e.g. an index whose own group
+     * headings are the page's semantic `h2`s, where a generic opener above them
+     * would dilute the headings that matter. Defaults to `"h2"`.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+    className?: string;
+};
+declare function SectionHeader({ title, count, subtitle, action, actionHref, linkComponent: LinkComponent, onAction, as: Heading, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+type SectionHeaderSkeletonProps = {
+    /** Shows the inline count placeholder, matching `SectionHeaderProps["count"]`. */
+    showCount?: boolean;
+    /** Shows the trailing action placeholder, matching `SectionHeaderProps["action"]`. */
+    showAction?: boolean;
+    /** Shows the subtitle placeholder, matching `SectionHeaderProps["subtitle"]`. */
+    showSubtitle?: boolean;
+    className?: string;
+};
+/** Mirrors `<SectionHeader>`'s geometry exactly so nothing shifts when data lands. */
+declare function SectionHeaderSkeleton({ showCount, showAction, showSubtitle, className, }: SectionHeaderSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { SectionHeader, type SectionHeaderLinkProps, type SectionHeaderProps, SectionHeaderSkeleton, type SectionHeaderSkeletonProps };

package/dist/components/section-header.js

@@ -0,0 +1,63 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var ACTION_CLASSES = cn(
+  "inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[14px] text-muted-foreground",
+  "transition-colors duration-150 hover:text-foreground motion-reduce:transition-none",
+  "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+);
+function SectionHeader({
+  title,
+  count,
+  subtitle,
+  action,
+  actionHref,
+  linkComponent: LinkComponent = DefaultLink,
+  onAction,
+  as: Heading = "h2",
+  className
+}) {
+  const actionIcon = /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col mb-3.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]", children: title }),
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-0.5 shrink-0 text-[12px] text-muted-foreground", children: count })
+      ] }),
+      action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: ACTION_CLASSES, onClick: onAction, children: [
+        action,
+        actionIcon
+      ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: ACTION_CLASSES, onClick: onAction, children: [
+        action,
+        actionIcon
+      ] }) : null)
+    ] }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]", children: subtitle })
+  ] });
+}
+function SectionHeaderSkeleton({
+  showCount,
+  showAction,
+  showSubtitle,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("flex flex-col mb-3.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[17px] w-32 md:h-[18px]" }),
+        showCount && /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-4" })
+      ] }),
+      showAction && /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-16" })
+    ] }),
+    showSubtitle && /* @__PURE__ */ jsx(Skeleton, { className: "mt-0.5 h-[13px] w-48 md:h-3.5" })
+  ] });
+}
+
+export { SectionHeader, SectionHeaderSkeleton };

package/dist/components/segmented-nav.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * SegmentedNav — a segmented control whose segments are LINKS, not buttons.
+ *
+ * Use this when the segments are separate routes. For segments that swap
+ * content inside one page, use `<Tabs>` (Radix tab-panel semantics) or
+ * `<ToggleGroup>` (button semantics) instead — a nav landmark with
+ * `aria-current="page"` is only correct when each segment is a destination.
+ *
+ * FRAMEWORK-AGNOSTIC BY DESIGN. This renders a plain `<a>` unless the caller
+ * passes `linkComponent`. It deliberately does NOT import `next/link` the way
+ * `link-button.tsx` does — that import is what quietly makes a component
+ * Next-only, and this one has to work in admin (Vite) too.
+ *
+ * Segments stretch to fill the row on mobile and shrink to their content from
+ * `lg` up, matching the `.mtog` / `.tog` split in the source design.
+ *
+ * The `w-full` below `lg` is what makes that sentence TRUE, and it is not
+ * redundant with the segments' own `flex-1`. `flex-1` only distributes the
+ * width the nav already has; the nav itself sizes to content whenever its
+ * parent is a flex row, so a caller placing this beside other controls got
+ * three segments hugging their labels with dead space alongside — the
+ * component quietly not doing the thing its own docblock claimed. Callers that
+ * genuinely want it to hug on mobile can pass `w-auto` through `className`,
+ * which wins via `cn`'s merge.
+ */
+type SegmentedNavItem = {
+    /** Stable identity, compared against `activeId`. */
+    id: string;
+    href: string;
+    label: string;
+    /** Rendered before the label. Size it at the call site (the design uses 15–16px). */
+    icon?: React.ReactNode;
+};
+/**
+ * The shape `linkComponent` must accept. `next/link` satisfies it structurally,
+ * so callers can pass it directly.
+ */
+type SegmentedNavLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    "aria-current"?: "page";
+    onClick?: () => void;
+};
+type SegmentedNavProps = {
+    items: SegmentedNavItem[];
+    /** `id` of the segment for the current route. */
+    activeId: string;
+    /** Accessible name for the nav landmark. Translated by the caller. */
+    label: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<SegmentedNavLinkProps>;
+    /** Fired with the segment id on click — analytics, haptics. Never navigation. */
+    onSelect?: (id: string) => void;
+    className?: string;
+};
+declare function SegmentedNav({ items, activeId, label, linkComponent: LinkComponent, onSelect, className, }: SegmentedNavProps): react_jsx_runtime.JSX.Element;
+
+export { SegmentedNav, type SegmentedNavItem, type SegmentedNavLinkProps, type SegmentedNavProps };

package/dist/components/segmented-nav.js

@@ -0,0 +1,54 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function SegmentedNav({
+  items,
+  activeId,
+  label,
+  linkComponent: LinkComponent = DefaultLink,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": label,
+      className: cn(
+        "flex w-full items-center gap-0.5 rounded-lg border border-border bg-card p-0.5",
+        "lg:inline-flex lg:w-fit",
+        className
+      ),
+      children: items.map((item) => {
+        const isActive = item.id === activeId;
+        return /* @__PURE__ */ jsxs(
+          LinkComponent,
+          {
+            href: item.href,
+            "aria-current": isActive ? "page" : void 0,
+            onClick: onSelect ? () => onSelect(item.id) : void 0,
+            className: cn(
+              "inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-md px-3",
+              "text-[13px] font-semibold lg:flex-none lg:text-sm",
+              "transition-colors duration-150 motion-reduce:transition-none",
+              "cursor-pointer touch-manipulation select-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+
+export { SegmentedNav };

package/dist/components/skeleton-card.js

@@ -1,4 +1,4 @@
-import { Skeleton } from '../chunk-N2KNBPAQ.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { AspectRatio } from '../chunk-3VMDCCCX.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';

package/dist/components/skeleton.d.ts

@@ -1,6 +1,23 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
+/**
+ * The shimmer stops under `prefers-reduced-motion: reduce`.
+ *
+ * It did not, and this is the one animation in the package that is guaranteed
+ * to be on screen during every slow load, on every surface, in multiples — a
+ * list of twelve skeleton rows is twelve sweeping gradients. A reader who has
+ * asked the OS for less motion is exactly the reader least served by that.
+ *
+ * `motion-reduce:` on the `before:` pseudo-element rather than a media query in
+ * a style block, because the animation is declared as a utility class here and
+ * a class beats a class predictably; the components that animate via an inline
+ * `animation-play-state` need the media-query form instead, and say so.
+ *
+ * The skeleton still reads as a skeleton without the sweep — it keeps its muted
+ * fill and its geometry, which is what actually communicates "content is coming
+ * and it will be this shape".
+ */
 declare function Skeleton({ className, ...props }: React__default.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 
 export { Skeleton };

package/dist/components/skeleton.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-N2KNBPAQ.js';
+export { Skeleton } from '../chunk-QXHMPJ35.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/tag-group.js

@@ -1,26 +1,3 @@
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
-import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var TagGroup = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, label, srLabel = true, children } = _b, props = __objRest(_b, ["className", "label", "srLabel", "children"]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      ref,
-      role: "group",
-      "aria-label": label,
-      "data-slot": "tag-group",
-      className: cn("flex flex-wrap items-center gap-1.5", className)
-    }, props), {
-      children: [
-        label && !srLabel && /* @__PURE__ */ jsx("span", { className: "mr-1 text-xs font-semibold text-muted-foreground", children: label }),
-        children
-      ]
-    })
-  );
-});
-TagGroup.displayName = "TagGroup";
-
-export { TagGroup };
+export { TagGroup } from '../chunk-6XMYEZVR.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/tag.js

@@ -1,3 +1,3 @@
-export { Tag, tagVariants } from '../chunk-VBA45GLP.js';
+export { Tag, tagVariants } from '../chunk-ZDAHKI3A.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

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

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type TimelineHourPuckProps = {
+    /** The hour, already formatted and localised — or an em dash for a quiet day. */
+    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;
+    className?: string;
+};
+/**
+ * The station on the timeline's axis — ONE object, positioned by its host:
+ * `HourGroup` centres it on its own heading rule out in the desktop spine,
+ * `HourBand` pins it to the top of the mobile gutter.
+ *
+ * Extracted because it was hand-rolled twice and the copies had already
+ * drifted — this one bordered and `rounded-[7px] px-[7px]`, `hour-band.tsx`'s
+ * borderless and `rounded-md px-1.5`. The `bg-background` fill punches through
+ * the hairline so the rail reads as continuous behind the label rather than
+ * butting into it.
+ *
+ * The live label is absolutely positioned rather than a flex sibling: hosts
+ * centre this puck with `-translate-y-1/2`, and a two-item column would centre
+ * the STACK, lifting the puck off the line it exists to sit on.
+ */
+declare function TimelineHourPuck({ time, isLive, liveLabel, className }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
+type TimelineBandProps = {
+    /** The lane column — usually a poster card, or empty for a quiet hour. */
+    lane: React.ReactNode;
+    /** The content column, normally one `<HourGroup spine>` per hour. */
+    children: React.ReactNode;
+    className?: string;
+};
+declare function TimelineBand({ lane, children, className }: TimelineBandProps): react_jsx_runtime.JSX.Element;
+type TimelineBandSkeletonProps = {
+    className?: string;
+};
+/**
+ * Holds the lane/spine/content geometry so nothing jumps when data lands.
+ * The spine renders its hairline with no puck — there's no hour to show yet.
+ */
+declare function TimelineBandSkeleton({ className }: TimelineBandSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { TimelineBand, type TimelineBandProps, TimelineBandSkeleton, type TimelineBandSkeletonProps, TimelineHourPuck, type TimelineHourPuckProps };

package/dist/components/timeline-band.js

@@ -0,0 +1,5 @@
+export { TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-637L7XQ3.js';
+import '../chunk-WSRWFA6K.js';
+import '../chunk-QXHMPJ35.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';