@bearmenu/ui 0.8.4 → 0.8.7

package/dist/components/coverflow.d.ts

@@ -0,0 +1,123 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Coverflow — the busiest-events browser: a 3D perspective lane with a large
+ * lead poster flanked by up to three shrinking, desaturating posters on each
+ * side. The lane itself drifts a few pixels back and forth
+ * (`prefers-reduced-motion` stops this outright; an `IntersectionObserver`
+ * pauses it off-screen).
+ *
+ * IT IS A RING, NOT A LANE. A card's slot comes from `ringOffset` — the
+ * SIGNED SHORTEST WAY ROUND the list, not the raw `index - activeIndex`. With
+ * seven items and `activeIndex` at 0, item 6 renders at offset −1 (just left
+ * of the lead) rather than +6, so both flanks are full at every index instead
+ * of the stage emptying out at the two ends, and prev/next keep going past
+ * either end. `goTo` already reported a wrapped index; the visuals now agree
+ * with it.
+ *
+ * IDENTITY IS THE ANIMATION: a card renders keyed by `item.id`, and its
+ * appearance (position, rotation, scale, depth filter) is a pure function of
+ * that offset. Advancing `activeIndex` shifts every offset by one, and
+ * because the DOM node stays put the browser tweens it from its old slot to
+ * its new one instead of popping straight there.
+ *
+ * THE WRAP MUST NOT TWEEN. Exactly one card per step crosses the ring's seam
+ * — with seven items it goes from offset −3 to +3 — and animating that would
+ * drag a poster right across the face of the coverflow. The mechanism chosen:
+ * `Coverflow` keeps the previous and current active index in one piece of
+ * state (`step`), so a render can tell, per card, whether its offset moved by
+ * the same amount the active index did. A card that did not (the only way
+ * that happens is crossing the seam) renders WITHOUT its transition classes
+ * for that one commit, so the transform applies instantly; the next commit
+ * restores them and it tweens normally from its new slot. Two alternatives
+ * were rejected: re-keying the card to force a remount throws away the
+ * decoded `<img>` and flashes the poster, and an effect-based "clear the
+ * transition after paint" lands a frame too late — the slide has already
+ * started. The seam sits at the deepest tier, which is also the lowest
+ * `z-index`, so the teleport happens behind the stack and off-stage.
+ *
+ * ONLY THE VISIBLE TIERS ARE MOUNTED. Every item now resolves to some ring
+ * offset, so the component renders only `|offset| <= 3` and drops the rest
+ * entirely — a fifty-item list paints seven posters, not fifty. Cards enter
+ * and leave at tier 3, parked well outside the stage's horizontal clip, so the
+ * mount/unmount is never seen. The stage clips on the x axis ONLY; see the
+ * note on the container element for why the y axis must stay visible.
+ *
+ * DEGENERATE LENGTHS: with one item there is no ring, so the arrows are not
+ * rendered at all rather than shown inert — see the note below on controls
+ * that look operable and do nothing. With two items the shortest path ties at
+ * `n / 2`; `ringOffset` resolves the tie to the POSITIVE side, so the other
+ * card is always on the right flank instead of flipping between them.
+ *
+ * `prefers-reduced-motion` already removes the position transition outright
+ * (`motion-reduce:transition-none`), so under it every step is a jump and the
+ * wrap is not a special case — it cannot read as a flash because nothing else
+ * is animating either.
+ *
+ * ACCESSIBILITY: every item carries a `title`, so every card is a real,
+ * focusable control (the injected link when it carries an `href`, otherwise a
+ * `<button>`) named after the event it depicts — a keyboard or screen-reader
+ * user can jump straight to any visible card the way a mouse user clicks one
+ * directly, not just step with `prevLabel`/`nextLabel`. Selecting one calls
+ * `onActiveIndexChange` with its index. Cards beyond the visible tiers are
+ * not rendered at all, so a screen-reader/keyboard user never lands on an
+ * invisible control — there is nothing there to land on. The depth
+ * styling (scale/grayscale/opacity) stays purely decorative, applied to an
+ * inner media element rather than the focusable wrapper — `filter` creates a
+ * new stacking context that would otherwise dim a `box-shadow`-based focus
+ * ring along with the poster. The active item's title/meta stays
+ * `aria-live="polite"` so a screen-reader user is told what changed after any
+ * kind of jump.
+ */
+type CoverflowItem = {
+    /** Stable identity — this is what makes the position change animate rather than pop. */
+    id: string;
+    title: string;
+    /** Caller-composed, e.g. "Fri 4 · 90 going". */
+    meta: string;
+    posterUrl?: string;
+    href?: string;
+    /**
+     * Top-left overlay slot, rendered exactly as given — bring your own pill,
+     * icon and colour. Deliberately unstyled: a wrapper here would cap every
+     * caller at one look, and the first real consumer needed a colour-ramped
+     * badge the old black pill could not express.
+     */
+    badge?: React.ReactNode;
+    isFree?: boolean;
+};
+type CoverflowLinkProps = {
+    href: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    "aria-label"?: string;
+    "aria-hidden"?: boolean;
+    tabIndex?: number;
+};
+type CoverflowProps = {
+    items: CoverflowItem[];
+    activeIndex: number;
+    onActiveIndexChange?: (index: number) => void;
+    /**
+     * Optional centred caption under the stage, e.g. a pluralized item count
+     * ("7 events"). Omit it when `positionLabel` already says everything there
+     * is to say — passing a position string here as well renders it twice, with
+     * a separator dot between the two identical halves.
+     */
+    caption?: string;
+    /** Required to render the free pill on an item — no label, no pill. */
+    freeLabel: string;
+    /** Accessible name for the previous-item control. */
+    prevLabel: string;
+    /** Accessible name for the next-item control. */
+    nextLabel: string;
+    /** e.g. "3 of 7" — caller-composed, locale-dependent. Shown next to `caption`. */
+    positionLabel?: string;
+    linkComponent?: React.ComponentType<CoverflowLinkProps>;
+    className?: string;
+};
+declare function Coverflow({ items, activeIndex, onActiveIndexChange, caption, freeLabel, prevLabel, nextLabel, positionLabel, linkComponent: LinkComponent, className, }: CoverflowProps): react_jsx_runtime.JSX.Element | null;
+
+export { Coverflow, type CoverflowItem, type CoverflowLinkProps, type CoverflowProps };

package/dist/components/coverflow.js

@@ -0,0 +1,300 @@
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { useId, useRef, useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight, Gift } 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));
+}
+var COVERFLOW_MAX_VISIBLE_TIER = 3;
+var COVERFLOW_TIER_ROTATE_DEG = [0, 20, 30, 38];
+var COVERFLOW_TIER_SCALE = [1, 0.92, 0.82, 0.72];
+var COVERFLOW_TIER_GRAYSCALE = [0, 0, 0.35, 0.5];
+var COVERFLOW_TIER_OPACITY = [1, 0.88, 0.7, 0.5];
+var COVERFLOW_CARD_WIDTH_CLASS = "w-[149px] sm:w-[210px]";
+var COVERFLOW_CARD_TRANSFORM_TRANSITION_CLASS = "transition-[transform,box-shadow] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none motion-reduce:duration-0";
+var COVERFLOW_MEDIA_FILTER_TRANSITION_CLASS = "transition-[filter,opacity] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none motion-reduce:duration-0";
+var COVERFLOW_CARD_FOCUS_CLASS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+var COVERFLOW_SIDE_SHADOW_CLASS = "shadow-[0_11px_27px_oklch(0.3_0.02_60/0.22)]";
+var COVERFLOW_LEAD_SHADOW_CLASS = "shadow-[0_24px_56px_oklch(0.28_0.03_45/0.32)]";
+var COVERFLOW_PILL_CLASS = "inline-flex h-6 max-w-[85%] items-center gap-1 rounded-full px-2 text-[11px] font-semibold";
+var COVERFLOW_DRIFT_DURATION_SECONDS = 26;
+var COVERFLOW_DRIFT_PIXELS = 40;
+var COVERFLOW_LEAD_Z_INDEX = 6;
+var COVERFLOW_ARROW_CLASS = "absolute top-1/2 z-20 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
+function wrapIndex(index, length) {
+  return (index % length + length) % length;
+}
+function ringOffset(delta, length) {
+  const raw = wrapIndex(delta, length);
+  return raw > length / 2 ? raw - length : raw;
+}
+function CoverflowCard({
+  item,
+  index,
+  offset,
+  suppressTransition,
+  freeLabel,
+  onActivate,
+  linkComponent: LinkComponent
+}) {
+  var _a;
+  const isLead = offset === 0;
+  const magnitude = Math.abs(offset);
+  const tier = Math.min(magnitude, COVERFLOW_MAX_VISIBLE_TIER);
+  const sign = Math.sign(offset);
+  const wrapperStyle = {
+    // The lead sits at `--cf-scale-lead`, which is now 1 — see the width class.
+    // Side tiers multiply their depth ratio by `--cf-tier-base`, the side/lead
+    // width ratio, because the shared box is the LEAD's size: without it every
+    // side card would render at nearly lead width. It is a CSS var rather than
+    // a constant here because the ratio differs per breakpoint, and calc()
+    // cannot divide two lengths to derive it live.
+    transform: isLead ? "translate(-50%, -50%) scale(var(--cf-scale-lead))" : `translate(-50%, -50%) translateX(calc(${sign} * var(--cf-x${tier}))) rotateY(${-sign * COVERFLOW_TIER_ROTATE_DEG[tier]}deg) scale(calc(var(--cf-tier-base) * ${COVERFLOW_TIER_SCALE[tier]}))`,
+    zIndex: Math.max(COVERFLOW_LEAD_Z_INDEX - magnitude, 0)
+  };
+  const mediaStyle = {
+    opacity: COVERFLOW_TIER_OPACITY[tier],
+    filter: COVERFLOW_TIER_GRAYSCALE[tier] > 0 ? `grayscale(${COVERFLOW_TIER_GRAYSCALE[tier] * 100}%)` : "none"
+  };
+  const media = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative aspect-[4/5] overflow-hidden rounded-[10px] bg-muted",
+        !suppressTransition && COVERFLOW_MEDIA_FILTER_TRANSITION_CLASS
+      ),
+      style: mediaStyle,
+      children: [
+        item.posterUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.posterUrl,
+              alt: "",
+              loading: isLead ? "eager" : "lazy",
+              decoding: "async",
+              className: "h-full w-full object-cover"
+            }
+          )
+        ) : /* @__PURE__ */ jsx(EventPosterFallback, {}),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-2 top-2 flex items-start justify-between gap-2", children: [
+          (_a = item.badge) != null ? _a : /* @__PURE__ */ jsx("span", {}),
+          item.isFree && freeLabel && /* @__PURE__ */ jsxs("span", { className: cn(COVERFLOW_PILL_CLASS, "bg-success font-bold text-success-foreground"), children: [
+            /* @__PURE__ */ jsx(Gift, { className: "h-3 w-3", "aria-hidden": true }),
+            freeLabel
+          ] })
+        ] })
+      ]
+    }
+  );
+  const wrapperClassName = cn(
+    "absolute left-1/2 top-1/2 block bg-transparent p-0 text-left",
+    COVERFLOW_CARD_WIDTH_CLASS,
+    isLead ? "cursor-default" : "cursor-pointer",
+    isLead ? COVERFLOW_LEAD_SHADOW_CLASS : COVERFLOW_SIDE_SHADOW_CLASS,
+    "rounded-[10px]",
+    !suppressTransition && COVERFLOW_CARD_TRANSFORM_TRANSITION_CLASS,
+    COVERFLOW_CARD_FOCUS_CLASS
+  );
+  const handleActivate = isLead ? void 0 : () => onActivate(index);
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href: item.href,
+        className: wrapperClassName,
+        style: wrapperStyle,
+        "aria-label": item.title,
+        onClick: handleActivate,
+        children: media
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: wrapperClassName,
+      style: wrapperStyle,
+      "aria-label": item.title,
+      onClick: handleActivate,
+      children: media
+    }
+  );
+}
+function Coverflow({
+  items,
+  activeIndex,
+  onActiveIndexChange,
+  caption,
+  freeLabel,
+  prevLabel,
+  nextLabel,
+  positionLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const scopeClass = `coverflow-${scopeId}`;
+  const containerRef = useRef(null);
+  const length = items.length;
+  const active = length > 0 ? wrapIndex(activeIndex, length) : 0;
+  const [step, setStep] = useState({ from: active, to: active, length });
+  if (step.to !== active || step.length !== length) {
+    setStep(
+      step.length === length ? { from: step.to, to: active, length } : { from: active, to: active, length }
+    );
+  }
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return void 0;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
+      },
+      { threshold: 0 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  if (length === 0) return null;
+  const activeItem = items[active];
+  const goTo = (index) => onActiveIndexChange == null ? void 0 : onActiveIndexChange(wrapIndex(index, length));
+  const activeDelta = ringOffset(step.to - step.from, length);
+  const visibleCards = items.map((item, index) => {
+    const offset = ringOffset(index - active, length);
+    const suppressTransition = offset !== ringOffset(index - step.from, length) - activeDelta;
+    return { item, index, offset, suppressTransition };
+  }).filter(({ offset }) => Math.abs(offset) <= COVERFLOW_MAX_VISIBLE_TIER);
+  const hasRing = length > 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn(scopeClass, "w-full", className), children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .${scopeClass} {
+          /*
+           * Every card shares one DOM box (COVERFLOW_CARD_WIDTH_CLASS above),
+           * and that box is now the LEAD's width. These are the visual
+           * footprints the JS transform math targets.
+           *
+           * --cf-scale-lead is therefore 1: the lead paints at its own size and
+           * is never resampled upward, which is what fixed it reading soft.
+           * --cf-tier-base is --cf-side-w / --cf-lead-w, the factor every side
+           * tier multiplies its depth ratio by; it must be kept in sync by hand
+           * if either width changes, because calc() cannot divide two lengths.
+           *   77 / 149 = 0.5168      120 / 210 = 0.5714
+           *
+           * Both footprints are 20% down from where they started (186/96 and
+           * 262/150): the lead was large enough that a poster meant for a feed
+           * thumbnail was being asked to carry a hero, and it showed.
+           */
+          --cf-lead-w: 149px;
+          --cf-side-w: 77px;
+          --cf-gap: 21px;
+          --cf-scale-lead: 1;
+          --cf-tier-base: 0.5168;
+          --cf-x1: calc(var(--cf-lead-w) / 2 + var(--cf-gap) + var(--cf-side-w) / 2);
+          --cf-x2: calc(var(--cf-x1) + var(--cf-side-w) + var(--cf-gap));
+          --cf-x3: calc(var(--cf-x2) + var(--cf-side-w) + var(--cf-gap));
+        }
+        @media (min-width: 640px) {
+          .${scopeClass} {
+            --cf-lead-w: 210px;
+            --cf-side-w: 120px;
+            --cf-gap: 26px;
+            --cf-tier-base: 0.5714;
+          }
+        }
+        .${scopeClass} .coverflow-lane {
+          animation: ${scopeClass}-drift ${COVERFLOW_DRIFT_DURATION_SECONDS}s ease-in-out infinite alternate;
+        }
+        .${scopeClass}[data-offscreen="true"] .coverflow-lane {
+          animation-play-state: paused;
+        }
+        @keyframes ${scopeClass}-drift {
+          from { transform: translateX(-${COVERFLOW_DRIFT_PIXELS}px); }
+          to { transform: translateX(${COVERFLOW_DRIFT_PIXELS}px); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .${scopeClass} .coverflow-lane {
+            animation: none;
+            transform: none;
+          }
+        }
+      ` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative flex h-[300px] items-center justify-center overflow-x-clip overflow-y-visible [perspective:900px] sm:h-[380px] sm:[perspective:1400px]",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-y-0 left-0 z-10 w-[120px] bg-gradient-to-r from-background to-transparent"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-y-0 right-0 z-10 w-[120px] bg-gradient-to-l from-background to-transparent"
+            }
+          ),
+          hasRing && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": prevLabel,
+                onClick: () => goTo(active - 1),
+                className: cn(COVERFLOW_ARROW_CLASS, "left-2 sm:left-4"),
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": nextLabel,
+                onClick: () => goTo(active + 1),
+                className: cn(COVERFLOW_ARROW_CLASS, "right-2 sm:right-4"),
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5", "aria-hidden": true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "coverflow-lane relative h-full w-full [transform-style:preserve-3d] motion-reduce:[animation:none]", children: visibleCards.map(({ item, index, offset, suppressTransition }) => /* @__PURE__ */ jsx(
+            CoverflowCard,
+            {
+              item,
+              index,
+              offset,
+              suppressTransition,
+              freeLabel,
+              onActivate: goTo,
+              linkComponent: LinkComponent
+            },
+            item.id
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4 text-center", children: [
+      /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-[17px] font-extrabold", children: activeItem.title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-[3px] text-[12.5px] text-muted-foreground", children: activeItem.meta })
+      ] }),
+      (caption || positionLabel) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 text-[12.5px] text-muted-foreground", children: [
+        caption && /* @__PURE__ */ jsx("span", { children: caption }),
+        caption && positionLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+        positionLabel && /* @__PURE__ */ jsx("span", { children: positionLabel })
+      ] })
+    ] })
+  ] });
+}
+
+export { Coverflow };

package/dist/components/day-rail-chip.d.ts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { DayRailChipLabels } from './event-types.js';
+
+/**
+ * DayRailChip — one day in the horizontally scrolling day rail.
+ *
+ * Three states the design distinguishes and that are easy to collapse by
+ * accident:
+ *   - ACTIVE: FILLED — accent ground, accent-foreground label, count and dot.
+ *   - HAS EVENTS: card ground, normal foreground, an accent density dot.
+ *   - EMPTY: muted text, NO dot, an em dash instead of "0". A day with nothing
+ *     on stays in the rail — ten of fourteen days routinely read empty, and
+ *     hiding them makes the rail lie about how far it reaches — but the caller
+ *     decides whether it is interactive, and a rail that NAVIGATES has nothing
+ *     to send an empty day to.
+ *
+ * ── Why active is filled ──────────────────────────────────────────────────
+ * It was an accent border and accent text. Measured against the real tokens
+ * that is a 1px hairline plus a label at 1.16:1 against its inactive
+ * neighbours in light mode — and in dark, where `--primary` (0.66) is DIMMER
+ * than `--foreground` (0.96), the active chip read as the recessed one at
+ * 2.86:1. Survivable while a large pinned day header also announced the day;
+ * not survivable once the rail became the only indicator.
+ *
+ * An eye scanning fourteen near-identical 62px boxes horizontally, in
+ * peripheral vision, while the page moves, resolves AREA and LUMINANCE STEP
+ * long before it resolves the hue of a hairline or the weight of 11.5px type.
+ * The fill presents ~3,100px² at 5.97:1 (light) / 6.09:1 (dark). A tinted
+ * ground would not do it: `bg-accent/10` and `--accent-subtle` both measure
+ * ~1.15:1 against the chip's own card, which is no signal at all.
+ *
+ * `--accent`, deliberately, not `--gradient-primary`: white on that gradient's
+ * top stop is 4.45:1, under AA for text, and the gradient has no `.dark`
+ * override so the chip's ink direction would invert against the rest of the
+ * dark theme. `--accent` also already means "current" here — the bottom nav's
+ * active tab uses it.
+ *
+ * The border stays 1px in BOTH states. Thickening it on active would change
+ * the box model, and these chips sit in an equal-width grid that would reflow
+ * on every scroll-spy tick.
+ *
+ * Renders a link when `href` is given, a button when only `onClick` is, and a
+ * plain div otherwise. The button announces `aria-current`, not
+ * `aria-pressed`: this is the current item in a set of days, not a toggle.
+ */
+type DayRailChipLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    "aria-current"?: "page";
+    onClick?: () => void;
+};
+type DayRailChipProps = {
+    /** Short weekday label, already localised — "Today", "Fri", "Sâm". */
+    label: string;
+    /** Day of month, as displayed. */
+    dayNumber: string;
+    /** Events on this day, after any active filter. */
+    count: number;
+    isActive?: boolean;
+    /** Keeps the bold weight when inactive. */
+    isWeekend?: boolean;
+    labels: DayRailChipLabels;
+    href?: string;
+    linkComponent?: React.ComponentType<DayRailChipLinkProps>;
+    onClick?: () => void;
+    className?: string;
+};
+declare function DayRailChip({ label, dayNumber, count, isActive, isWeekend, labels, href, linkComponent: LinkComponent, onClick, className, }: DayRailChipProps): react_jsx_runtime.JSX.Element;
+type DayRailChipSkeletonProps = {
+    className?: string;
+};
+/**
+ * Mirrors one `<DayRailChip>`'s footprint (62×50, 12px radius — the source
+ * design's own day-rail skeleton geometry, which also happens to match this
+ * chip's rendered size: label + count rows inside `py-2` padding). The caller
+ * repeats it with the rail's own `gap-2` to build the loading rail.
+ */
+declare function DayRailChipSkeleton({ className }: DayRailChipSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { DayRailChip, type DayRailChipLinkProps, type DayRailChipProps, DayRailChipSkeleton, type DayRailChipSkeletonProps };

package/dist/components/day-rail-chip.js

@@ -0,0 +1,105 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function DayRailChip({
+  label,
+  dayNumber,
+  count,
+  isActive,
+  isWeekend,
+  labels,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className
+}) {
+  const hasEvents = count > 0;
+  const rootClasses = cn(
+    "w-[62px] shrink-0 rounded-xl border px-1 py-2 text-center",
+    "transition-colors duration-150 motion-reduce:transition-none",
+    isActive ? "border-accent bg-accent" : "border-border bg-card",
+    (href || onClick) && // `ring-offset-background` is not decoration: Tailwind's default offset
+    // colour is white, which painted a white halo around a focused chip on
+    // the dark rail.
+    "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "text-[11.5px]",
+          isActive || isWeekend ? "font-bold" : "font-semibold",
+          isActive ? "text-accent-foreground" : hasEvents ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          label,
+          " ",
+          dayNumber
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-[3px] flex items-center justify-center gap-1", children: [
+      hasEvents && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-1 w-1 rounded-full",
+            isActive ? "bg-accent-foreground" : "bg-accent"
+          ),
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            // Full opacity on active, never dimmed: `/80` lands at 4.48:1, an
+            // AA fail by 0.02. Hierarchy inside a 50px box comes from the
+            // label's weight and the type-size step, which is enough.
+            "font-mono text-[10.5px] tabular-nums",
+            isActive ? "text-accent-foreground" : "text-muted-foreground"
+          ),
+          children: hasEvents ? count : /* @__PURE__ */ jsx("span", { "aria-label": labels.noEvents, children: "\u2014" })
+        }
+      )
+    ] })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        className: rootClasses,
+        "aria-current": isActive ? "page" : void 0,
+        onClick,
+        children: body
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: rootClasses,
+        "aria-current": isActive ? "true" : void 0,
+        onClick,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+}
+function DayRailChipSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(Skeleton, { "aria-hidden": "true", className: cn("h-[50px] w-[62px] shrink-0", className) });
+}
+
+export { DayRailChip, DayRailChipSkeleton };

package/dist/components/drift-rail.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * DriftRail — an infinite horizontal marquee for logos, tag chips or small
+ * poster tiles. The caller passes one set of children; the component renders
+ * a second, `aria-hidden` copy right after it so a `translateX(-50%)` loop is
+ * seamless. Because the loop depends on the duplicate being pixel-identical
+ * to the first pass, keep `children` a fixed, ordered list — no per-render
+ * randomisation.
+ *
+ * Motion is scoped to this instance via a generated id (no shared stylesheet,
+ * no class collisions between multiple rails on one page) and is paused two
+ * ways, per the source design: an `IntersectionObserver` stops the loop the
+ * moment the rail scrolls off-screen, and `prefers-reduced-motion: reduce`
+ * removes the animation outright rather than merely slowing it.
+ */
+type DriftRailProps = {
+    children: React.ReactNode;
+    /** Runs the loop right-to-left instead of left-to-right. */
+    reverse?: boolean;
+    durationSeconds?: number;
+    /** Pauses the loop while the pointer hovers the rail. */
+    pauseOnHover?: boolean;
+    className?: string;
+};
+declare function DriftRail({ children, reverse, durationSeconds, pauseOnHover, className, }: DriftRailProps): react_jsx_runtime.JSX.Element;
+
+export { DriftRail, type DriftRailProps };

package/dist/components/drift-rail.js

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