@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/weekend-panel.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { MotionPlayPause } from "./motion-icon-controls";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * WeekendPanel — one day panel in the weekend section: a header row over an
+ * auto-advancing two-up carousel of the day's event cards.
+ *
+ * The carousel assumes exactly two "pages" of two cards (four `children` in
+ * total) — that's what the design's slide keyframes measure against
+ * (`translateX(calc(-100% - gap))` moves the track exactly one page). Pass a
+ * different count and the maths still animate, but the pause points won't
+ * line up with a full page.
+ *
+ * ACCESSIBILITY: satisfies WCAG 2.2.2 (Pause, Stop, Hide) with a visible
+ * pause/play toggle next to the progress dots. Hover/focus/off-screen pausing
+ * remain as convenience behaviour, but the button is the actual mechanism —
+ * it is a latch (`isManuallyPaused`), not a hold, so a touch or low-vision
+ * user can stop the carousel and keep it stopped while they read. Toggling it
+ * flips `animationPlayState` for the track AND both dot keyframes together.
+ * Under `prefers-reduced-motion` the panel already renders a static grid with
+ * nothing animating, so the control would be meaningless and is not rendered.
+ */
+
+const WEEKEND_PANEL_TRACK_GAP_PX = 14;
+const WEEKEND_PANEL_DEFAULT_DURATION_SECONDS = 7;
+const WEEKEND_PANEL_SLIDE_KEYFRAMES_ID = "ds-weekend-panel-slide";
+const WEEKEND_PANEL_DOT_A_KEYFRAMES_ID = "ds-weekend-panel-dot-a";
+const WEEKEND_PANEL_DOT_B_KEYFRAMES_ID = "ds-weekend-panel-dot-b";
+
+function usePrefersReducedMotion(): boolean {
+  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<T extends Element>(): [React.RefObject<T | null>, boolean] {
+  const ref = React.useRef<T | null>(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];
+}
+
+export type WeekendPanelLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: WeekendPanelLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+/** Accessible names for the pause/play toggle, injected so the DS owns no copy. */
+export type WeekendPanelLabels = {
+  /** Name announced while the carousel is running (the button pauses it). */
+  pause: string;
+  /** Name announced while the carousel is paused (the button resumes it). */
+  play: string;
+};
+
+export type WeekendPanelProps = {
+  dayLabel: string;
+  /** Caller-composed, e.g. "23 events". */
+  countLabel: string;
+  actionLabel: string;
+  actionHref?: string;
+  linkComponent?: React.ComponentType<WeekendPanelLinkProps>;
+  onActionClick?: () => void;
+  isHighlighted?: boolean;
+  /** Loop duration for the slide/dots animation. Default 7 — sibling panels typically stagger at 8.5 and 10. */
+  durationSeconds?: number;
+  /**
+   * Accessible names for the pause/play toggle. Required — the control is
+   * only omitted under `prefers-reduced-motion`, where the labels go unused.
+   */
+  labels: WeekendPanelLabels;
+  /** The event cards. The animation is built around exactly four (two pages of two). */
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export function WeekendPanel({
+  dayLabel,
+  countLabel,
+  actionLabel,
+  actionHref,
+  linkComponent: LinkComponent = DefaultLink,
+  onActionClick,
+  isHighlighted,
+  durationSeconds = WEEKEND_PANEL_DEFAULT_DURATION_SECONDS,
+  labels,
+  children,
+  className,
+}: WeekendPanelProps) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [panelRef, inView] = useInViewport<HTMLDivElement>();
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isManuallyPaused, setIsManuallyPaused] = React.useState(false);
+  const [playPauseReplayToken, setPlayPauseReplayToken] = React.useState(0);
+  const isPaused = isManuallyPaused || isHovered || isFocused || !inView;
+
+  const action = (
+    <span className="ml-auto flex items-center gap-0.5 text-[12.5px] text-muted-foreground">
+      {actionLabel}
+      <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+    </span>
+  );
+
+  return (
+    <div
+      ref={panelRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      className={cn(
+        "relative overflow-hidden rounded-2xl border bg-card py-4",
+        isHighlighted ? "border-primary/40" : "border-border",
+        className
+      )}
+    >
+      <style>{`
+        @keyframes ${WEEKEND_PANEL_SLIDE_KEYFRAMES_ID} {
+          0%, 45% { transform: translateX(0); }
+          50%, 95% { transform: translateX(calc(-100% - ${WEEKEND_PANEL_TRACK_GAP_PX}px)); }
+          100% { transform: translateX(0); }
+        }
+        @keyframes ${WEEKEND_PANEL_DOT_A_KEYFRAMES_ID} {
+          0% { background: var(--primary); width: 18px; }
+          45% { background: var(--primary); width: 18px; }
+          50% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+          100% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+        }
+        @keyframes ${WEEKEND_PANEL_DOT_B_KEYFRAMES_ID} {
+          0% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+          50% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+          95% { background: var(--primary); width: 18px; }
+          100% { background: var(--primary); width: 18px; }
+        }
+      `}</style>
+
+      <div className="flex items-baseline gap-[9px] px-4 pb-3">
+        <span
+          className={cn(
+            "text-[15.5px] font-extrabold tracking-[-0.02em] sm:text-[17px]",
+            isHighlighted && "text-primary"
+          )}
+        >
+          {dayLabel}
+        </span>
+        <span
+          className={cn(
+            "font-mono text-xs",
+            isHighlighted ? "text-primary" : "text-muted-foreground"
+          )}
+        >
+          {countLabel}
+        </span>
+
+        {actionHref ? (
+          <LinkComponent href={actionHref} className="ml-auto">
+            {action}
+          </LinkComponent>
+        ) : onActionClick ? (
+          <button
+            type="button"
+            onClick={onActionClick}
+            className="ml-auto cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md"
+          >
+            {action}
+          </button>
+        ) : (
+          action
+        )}
+      </div>
+
+      {prefersReducedMotion ? (
+        <div className="grid grid-cols-2 gap-3.5 px-4">{children}</div>
+      ) : (
+        <div className="overflow-hidden px-4">
+          <div
+            className="flex gap-3.5"
+            style={{
+              animationName: WEEKEND_PANEL_SLIDE_KEYFRAMES_ID,
+              animationDuration: `${durationSeconds}s`,
+              animationTimingFunction: "ease-in-out",
+              animationIterationCount: "infinite",
+              animationPlayState: isPaused ? "paused" : "running",
+            }}
+          >
+            {React.Children.map(children, (child) => (
+              <div className="w-[calc((100%-14px)/2)] flex-none">{child}</div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!prefersReducedMotion && (
+        <div className="mt-3.5 grid grid-cols-[1fr_auto_1fr] items-center px-4">
+          <span aria-hidden />
+
+          <div className="flex items-center justify-center gap-1.5" aria-hidden>
+            <span
+              className="block h-1.5 w-[18px] rounded-full bg-primary"
+              style={{
+                animationName: WEEKEND_PANEL_DOT_A_KEYFRAMES_ID,
+                animationDuration: `${durationSeconds}s`,
+                animationTimingFunction: "ease-in-out",
+                animationIterationCount: "infinite",
+                animationPlayState: isPaused ? "paused" : "running",
+              }}
+            />
+            <span
+              className="block h-1.5 w-1.5 rounded-full bg-muted-foreground/35"
+              style={{
+                animationName: WEEKEND_PANEL_DOT_B_KEYFRAMES_ID,
+                animationDuration: `${durationSeconds}s`,
+                animationTimingFunction: "ease-in-out",
+                animationIterationCount: "infinite",
+                animationPlayState: isPaused ? "paused" : "running",
+              }}
+            />
+          </div>
+
+          <div className="flex justify-end">
+            {/* `MotionPlayPause`, not two swapped lucide glyphs. The triangle
+                folding into two bars IS the state change, so the control shows
+                what it did instead of cutting to a different icon — which is
+                the whole reason that gesture exists in the set.
+
+                `active` drives the HELD state and the bars are the active
+                variant, so it is `!isManuallyPaused`: while the carousel plays,
+                the button offers pause. `replayToken` bumps on pointer down so
+                the gesture answers the touch rather than its consequence.
+
+                `motion-reduce` is handled inside `MotionIcon`; the button keeps
+                its own for the background transition. */}
+            <button
+              type="button"
+              onClick={() => setIsManuallyPaused((current) => !current)}
+              onPointerDown={() => setPlayPauseReplayToken((n) => n + 1)}
+              aria-label={isManuallyPaused ? labels.play : labels.pause}
+              aria-pressed={isManuallyPaused}
+              className="flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none"
+            >
+              <MotionPlayPause
+                active={!isManuallyPaused}
+                replayToken={playPauseReplayToken}
+                className="size-4"
+              />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type WeekendPanelSkeletonProps = {
+  isHighlighted?: boolean;
+  className?: string;
+};
+
+/** The panel at rest: the two visible cards of the two-up carousel, no slide. */
+export function WeekendPanelSkeleton({ isHighlighted, className }: WeekendPanelSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "relative overflow-hidden rounded-2xl border bg-card py-4",
+        isHighlighted ? "border-primary/40" : "border-border",
+        className
+      )}
+    >
+      <div className="flex items-baseline gap-[9px] px-4 pb-3">
+        <Skeleton className="h-[15.5px] w-16 sm:h-[17px]" />
+        <Skeleton className="h-3 w-14" />
+        <Skeleton className="ml-auto h-3 w-14" />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3.5 px-4">
+        {Array.from({ length: 2 }, (_, index) => (
+          <div key={index} className="flex flex-col gap-1.5">
+            <Skeleton className="aspect-[4/3] w-full" />
+            <Skeleton className="h-[13.5px] w-4/5" />
+            <Skeleton className="h-3 w-3/5" />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex items-center justify-center gap-1.5 pt-3.5">
+        <span className="block h-1.5 w-[18px] rounded-full bg-muted" />
+        <span className="block h-1.5 w-1.5 rounded-full bg-muted" />
+      </div>
+    </div>
+  );
+}

package/src/globals.css

@@ -137,6 +137,17 @@ h6 {
     0 2px 4px -1px oklch(0.52 0 0 / 0.07), 0 10px 24px -6px oklch(0.52 0 0 / 0.16);
   --shadow-overlay:
     0 4px 12px -2px oklch(0.52 0 0 / 0.1), 0 16px 48px -12px oklch(0.52 0 0 / 0.2);
+  /* Panel elevation — the same apparent height as --shadow-card under a much
+     larger object. Elevation is a function of area: a 6px penumbra under a
+     700px panel reads as a print bevel, not a lift, so the blur widens and the
+     peak alpha drops and the total ink scales with the object instead of
+     stacking. Deliberately stays BELOW --shadow-card-hover in weight — a
+     RESTING panel that out-shadows a card's hover makes hover stop meaning
+     anything anywhere. And not --shadow-overlay, which is plane 2 (sheets,
+     dialogs); this sits in page flow. Chroma 0, like its neighbours: a 16px
+     blur across a full-width panel is the largest soft area on the page and
+     the least attributable place for a colour cast. */
+  --shadow-panel: 0 1px 2px oklch(0.52 0 0 / 0.04), 0 4px 16px -4px oklch(0.52 0 0 / 0.07);
 
   /* Brown variant — replaces hardcoded #482E1F across button/badge */
   --brown: oklch(0.31 0.05 45);
@@ -205,6 +216,13 @@ h6 {
   --ease-spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
 
+  /* Timeline geometry — shared by `TimelineBand`, which lays the columns out,
+     and `HourGroup`, whose spine puck positions itself against that gutter from
+     inside the content column. Two components deriving the same offset from two
+     hardcoded numbers is how they drift apart. */
+  --timeline-lane: 396px;
+  --timeline-spine: 6rem;
+
   /* Z-index scale */
   --z-base: 0;
   --z-sticky: 100;
@@ -265,6 +283,7 @@ h6 {
   --shadow-card: 0 1px 3px oklch(0 0 0 / 0.2), 0 1px 2px oklch(0 0 0 / 0.15);
   --shadow-card-hover: 0 4px 16px oklch(0 0 0 / 0.3), 0 1px 4px oklch(0 0 0 / 0.2);
   --shadow-overlay: 0 8px 32px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.25);
+  --shadow-panel: 0 1px 3px oklch(0 0 0 / 0.24), 0 8px 24px -8px oklch(0 0 0 / 0.34);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);

package/src/lib/icon-registry.ts

@@ -0,0 +1,139 @@
+/**
+ * The purpose → glyph registry.
+ *
+ * One place recording which glyph means what. Before this existed, ~10 ad-hoc
+ * glyph maps were scattered across the app and the same purpose ended up drawn
+ * two different ways: back as both an arrow and a chevron, "open filters" as
+ * both a funnel and sliders (one surface used both, chosen by which view you
+ * were in), clear and close sharing a bare X.
+ *
+ * Only GENERIC action vocabulary lives here. Product taxonomy — cuisine
+ * shortcuts, facet dimensions, digest categories — stays in the consuming app.
+ *
+ * ## The rules this encodes
+ *
+ * 1. **Arrow leaves, chevron stays.** `ArrowRight` means "you are going to a new
+ *    destination" (see-all links, banner CTAs). `ChevronRight` means "reveal
+ *    more, in place" and is scoped to exactly two jobs: carousel paging and
+ *    row-contained drill-in. Collapsing these is what produced a glyph with
+ *    four meanings.
+ * 2. **Sliders, not a funnel.** A funnel reads as "narrow a list" and collides
+ *    with search and sort iconography at 24px; three sliders read
+ *    unambiguously as "adjust parameters" and carry a badge count cleanly.
+ * 3. **Containment separates clear from close.** A bare `X` leaves a layer. A
+ *    contained `XCircle` resets a value in place without leaving. In a dense
+ *    filter row, bare Xs beside each other cannot say which layer they close.
+ * 4. **Tappable has a container or a colour state; information is muted and
+ *    bare.** This is what disambiguates the overloaded glyphs (`MapPin`,
+ *    `Star`) rather than picking different glyphs for each sense. An
+ *    interactive instance sits in a chip or button and takes an active colour;
+ *    a decorative one is `text-muted-foreground`, `aria-hidden`, outside any
+ *    button, with no hover or active transition.
+ * 5. **Loved and want-to-try are two actions, not one.** `Heart` is
+ *    retrospective ("I have had this and I love it"), `Bookmark` is prospective
+ *    ("I want to try this"). They feed different lists and are mutually
+ *    exclusive per item.
+ */
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpDown,
+  Bookmark,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  Flag,
+  Heart,
+  Info,
+  Navigation,
+  Phone,
+  Plus,
+  RefreshCw,
+  Search,
+  Share2,
+  SlidersHorizontal,
+  Trash2,
+  X,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+export type IconPurpose =
+  // navigation
+  | "back"
+  | "seeAll"
+  | "drillIn"
+  | "carouselPrev"
+  | "carouselNext"
+  | "directions"
+  | "externalLink"
+  // layers and values
+  | "close"
+  | "clear"
+  | "expand"
+  // list controls
+  | "filter"
+  | "sort"
+  | "search"
+  // actions
+  | "share"
+  | "favorite"
+  | "wantToTry"
+  | "confirm"
+  | "add"
+  | "remove"
+  | "refresh"
+  | "call"
+  | "report"
+  | "info";
+
+export const iconFor: Record<IconPurpose, LucideIcon> = {
+  back: ArrowLeft,
+  seeAll: ArrowRight,
+  drillIn: ChevronRight,
+  carouselPrev: ChevronLeft,
+  carouselNext: ChevronRight,
+  directions: Navigation,
+  externalLink: ExternalLink,
+
+  close: X,
+  clear: XCircle,
+  expand: ChevronDown,
+
+  filter: SlidersHorizontal,
+  sort: ArrowUpDown,
+  search: Search,
+
+  share: Share2,
+  favorite: Heart,
+  wantToTry: Bookmark,
+  confirm: Check,
+  add: Plus,
+  remove: Trash2,
+  refresh: RefreshCw,
+  call: Phone,
+  report: Flag,
+  info: Info,
+};
+
+/**
+ * Purposes whose glyph must rotate to show state, and by how much.
+ * `expand` is the disclosure chevron: pointing down at rest, up when open.
+ */
+export const iconRotation: Partial<Record<IconPurpose, number>> = {
+  expand: 180,
+};
+
+/**
+ * Retired glyphs and what replaced them. Kept so a reviewer can tell a
+ * deliberate choice from a regression, and so lint/codemods have a source.
+ */
+export const retiredIcons = {
+  Filter: "filter → SlidersHorizontal",
+  ChevronRightAsSeeAll: "seeAll → ArrowRight",
+  ChevronLeftAsBack: "back → ArrowLeft",
+  XAsClear: "clear → XCircle",
+} as const;

package/src/test/setup.ts

@@ -1,6 +1,10 @@
 import "@testing-library/jest-dom";
 
-global.ResizeObserver = class ResizeObserver {
+// `globalThis`, not `global`: the latter is a Node-only global, and this
+// project's `lib` is dom / dom.iterable / esnext with no `@types/node`, so it
+// did not typecheck. This file already reaches for `window` below — the test
+// environment is jsdom, and `globalThis` is the spelling that is typed in both.
+globalThis.ResizeObserver = class ResizeObserver {
   observe() {}
   unobserve() {}
   disconnect() {}