@bearmenu/ui 0.8.3 → 0.8.6

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

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+/**
+ * ConceptCard — the recurring-series cover card (e.g. a weekly party
+ * concept), a wide 2:1 image with a bottom scrim carrying a kind pill,
+ * a composed date/venue/count line and the title.
+ *
+ * Same contract as `EventCard`: DS-owned props, plain `<img>`, anchor
+ * whenever `href` is given. Absent `coverUrl` falls back to a flat
+ * `bg-muted` block, same treatment `EventCard` gives a missing poster.
+ */
+type ConceptCardLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type ConceptCardProps = {
+    title: string;
+    /**
+     * The whole date/venue/count line, composed by the caller, e.g. "Every
+     * Saturday · Flying Circus · 4 dates" — clause order is locale-dependent.
+     */
+    meta: string;
+    /** Label plus its icon, e.g. `<><PartyPopper .../> Party</>`. */
+    kind: React.ReactNode;
+    coverUrl?: string;
+    href?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<ConceptCardLinkProps>;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    /** Forwarded to the cover's `loading` attribute (`"eager"` when true). */
+    priority?: boolean;
+};
+declare const ConceptCard: React$1.NamedExoticComponent<ConceptCardProps>;
+type ConceptCardSkeletonProps = {
+    className?: string;
+};
+declare function ConceptCardSkeleton({ className }: ConceptCardSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { ConceptCard, type ConceptCardLinkProps, type ConceptCardProps, ConceptCardSkeleton, type ConceptCardSkeletonProps };

package/dist/components/concept-card.js

@@ -0,0 +1,81 @@
+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 { Calendar } from 'lucide-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));
+}
+var ConceptCard = memo(function ConceptCard2({
+  title,
+  meta,
+  kind,
+  coverUrl,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority
+}) {
+  const [imgError, setImgError] = useState(false);
+  const showCover = !!coverUrl && !imgError;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted", children: showCover && // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: coverUrl,
+        alt: title,
+        title,
+        loading: priority ? "eager" : "lazy",
+        decoding: "async",
+        className: "h-full w-full object-cover",
+        onError: () => setImgError(true)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 z-[1] h-[60%] bg-gradient-to-t from-black/90 via-black/60 to-transparent" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 z-[2] inline-flex items-center gap-1 rounded-md bg-black/50 px-2 py-1 text-[11px] font-semibold text-white", children: kind }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-[2] mt-auto flex w-full flex-col gap-0.5 p-2.5 text-white", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[11px] font-medium text-white/85", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: meta })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "line-clamp-1 text-[14px] font-semibold leading-[1.25]", children: title })
+    ] })
+  ] });
+  const rootClasses = cn(
+    "relative flex aspect-[2/1] flex-col overflow-hidden rounded-xl text-left",
+    (href || onClick) && "cursor-pointer 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 ConceptCardSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("relative flex aspect-[2/1] flex-col overflow-hidden rounded-xl", className),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0 rounded-none" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 z-[1] h-[60%] bg-gradient-to-t from-black/90 via-black/60 to-transparent" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "absolute left-2 top-2 z-[2] h-[26px] w-16 rounded-md bg-white/20" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[2] mt-auto flex w-full flex-col gap-1 p-2.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[11px] w-24 bg-white/15" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-2/3 bg-white/20" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ConceptCard, ConceptCardSkeleton };

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/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

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 };