@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/day-rail-chip.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DayRailChip, DayRailChipSkeleton } from "./day-rail-chip";
+import type { DayRailChipLabels } from "./event-types";
+
+const labels: DayRailChipLabels = { noEvents: "No events" };
+
+const meta: Meta<typeof DayRailChip> = {
+  title: "Events/DayRailChip",
+  component: DayRailChip,
+  tags: ["autodocs"],
+  args: { labels },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One day in the timeline's day rail. An empty day keeps its place in the rail with an em dash and no density dot — ten of fourteen days routinely read empty, and dropping them would make the rail lie about how far ahead it reaches.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DayRailChip>;
+
+export const Active: Story = {
+  args: { label: "Today", dayNumber: "3", count: 15, isActive: true },
+};
+
+export const HasEvents: Story = {
+  args: { label: "Fri", dayNumber: "4", count: 17 },
+};
+
+/** Weekend days keep the bold weight while inactive, so they stay findable. */
+export const Weekend: Story = {
+  args: { label: "Sat", dayNumber: "5", count: 23, isWeekend: true },
+};
+
+/** No dot, an em dash rather than "0", muted label — but still in the rail. */
+export const Empty: Story = {
+  args: { label: "Fri", dayNumber: "11", count: 0 },
+};
+
+/** The full fortnight, as the rail actually renders it. */
+export const TheRail: Story = {
+  render: () => {
+    const days: Array<[string, string, number, boolean]> = [
+      ["Today", "3", 15, false],
+      ["Fri", "4", 17, true],
+      ["Sat", "5", 23, true],
+      ["Sun", "6", 10, true],
+      ["Mon", "7", 5, false],
+      ["Tue", "8", 3, false],
+      ["Wed", "9", 3, false],
+      ["Thu", "10", 2, false],
+      ["Fri", "11", 0, true],
+      ["Sat", "12", 4, true],
+      ["Sun", "13", 3, true],
+      ["Mon", "14", 0, false],
+    ];
+    return (
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        {days.map(([label, dayNumber, count, isWeekend], i) => (
+          <DayRailChip
+            key={`${label}-${dayNumber}`}
+            label={label}
+            dayNumber={dayNumber}
+            count={count}
+            isWeekend={isWeekend}
+            isActive={i === 0}
+            labels={labels}
+            onClick={() => {}}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+/** Loading state — one chip's footprint (62×50, 12px radius). */
+export const Loading: Story = {
+  render: () => <DayRailChipSkeleton />,
+};
+
+/** The full fortnight, loading — six chips at the rail's own `gap-2` (8px). */
+export const LoadingRail: Story = {
+  render: () => (
+    <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+      {Array.from({ length: 6 }).map((_, index) => (
+        <DayRailChipSkeleton key={index} />
+      ))}
+    </div>
+  ),
+};
+
+/** A loading rail beside the loaded one, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <DayRailChipSkeleton key={index} />
+        ))}
+      </div>
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        <DayRailChip label="Today" dayNumber="3" count={15} isActive labels={labels} onClick={() => {}} />
+        <DayRailChip label="Fri" dayNumber="4" count={17} labels={labels} onClick={() => {}} />
+        <DayRailChip label="Sat" dayNumber="5" count={23} isWeekend labels={labels} onClick={() => {}} />
+        <DayRailChip label="Sun" dayNumber="6" count={10} isWeekend labels={labels} onClick={() => {}} />
+        <DayRailChip label="Mon" dayNumber="7" count={5} labels={labels} onClick={() => {}} />
+        <DayRailChip label="Tue" dayNumber="8" count={3} labels={labels} onClick={() => {}} />
+      </div>
+    </div>
+  ),
+};
+
+/** With a filter applied, counts redraw and most days fall to zero. */
+export const FilteredToFreeEntry: Story = {
+  render: () => {
+    const days: Array<[string, string, number]> = [
+      ["Today", "3", 2],
+      ["Fri", "4", 3],
+      ["Sat", "5", 2],
+      ["Sun", "6", 0],
+      ["Mon", "7", 1],
+      ["Tue", "8", 0],
+      ["Wed", "9", 1],
+      ["Thu", "10", 0],
+    ];
+    return (
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        {days.map(([label, dayNumber, count], i) => (
+          <DayRailChip
+            key={`${label}-${dayNumber}`}
+            label={label}
+            dayNumber={dayNumber}
+            count={count}
+            isActive={i === 2}
+            labels={labels}
+            onClick={() => {}}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/day-rail-chip.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import type { DayRailChipLabels } from "./event-types";
+
+/**
+ * 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.
+ */
+
+export type DayRailChipLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  "aria-current"?: "page";
+  onClick?: () => void;
+};
+
+function DefaultLink({ href, ...props }: DayRailChipLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export 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;
+};
+
+export function DayRailChip({
+  label,
+  dayNumber,
+  count,
+  isActive,
+  isWeekend,
+  labels,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: DayRailChipProps) {
+  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 = (
+    <>
+      <div
+        className={cn(
+          "text-[11.5px]",
+          isActive || isWeekend ? "font-bold" : "font-semibold",
+          isActive
+            ? "text-accent-foreground"
+            : hasEvents
+              ? "text-foreground"
+              // NOT `/70`, which measured 2.96:1 light and 4.17:1 dark — an AA
+              // failure in both. An empty day is inert content, not a disabled
+              // form control, so nothing exempts it. The em dash and the
+              // missing dot already say "empty"; `muted-foreground` against
+              // `foreground` is still an 18.8 → 5.5 step and plainly quieter.
+              : "text-muted-foreground"
+        )}
+      >
+        {label} {dayNumber}
+      </div>
+
+      <div className="mt-[3px] flex items-center justify-center gap-1">
+        {/* Kept on the active chip, not dropped: losing it would shift the
+            count 5px sideways every time the day changes under the scroll spy.
+            Inactive is full `bg-accent`, not `bg-primary/40` — at 40% alpha it
+            measured 2.46:1 / 1.93:1 (invisible at 4px), and in light mode
+            `--primary` is near-black, so the "warm density dot" was grey. */}
+        {hasEvents && (
+          <span
+            className={cn(
+              "h-1 w-1 rounded-full",
+              isActive ? "bg-accent-foreground" : "bg-accent"
+            )}
+            aria-hidden
+          />
+        )}
+        <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"
+          )}
+        >
+          {hasEvents ? count : <span aria-label={labels.noEvents}>—</span>}
+        </span>
+      </div>
+    </>
+  );
+
+  if (href) {
+    return (
+      <LinkComponent
+        href={href}
+        className={rootClasses}
+        aria-current={isActive ? "page" : undefined}
+        onClick={onClick}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={rootClasses}
+        // `aria-current`, not `aria-pressed`. The rail used to FILTER, where a
+        // toggle semantic was right; it now navigates, and this is the current
+        // day in a set of days.
+        aria-current={isActive ? "true" : undefined}
+        onClick={onClick}
+      >
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+}
+
+export 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.
+ */
+export function DayRailChipSkeleton({ className }: DayRailChipSkeletonProps) {
+  return <Skeleton aria-hidden="true" className={cn("h-[50px] w-[62px] shrink-0", className)} />;
+}

package/src/components/drift-rail.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DriftRail } from "./drift-rail";
+import { FeaturedRailItem } from "./featured-rail-item";
+
+const CHIP_LABELS = [
+  "Live music",
+  "Rooftop",
+  "Free entry",
+  "Late night",
+  "DJ set",
+  "Comedy",
+  "Art walk",
+  "Brunch",
+];
+
+function Chip({ label }: { label: string }) {
+  return (
+    <span className="inline-flex h-9 shrink-0 items-center rounded-full border border-border bg-card px-4 text-sm font-medium">
+      {label}
+    </span>
+  );
+}
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof DriftRail> = {
+  title: "Events/DriftRail",
+  component: DriftRail,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An infinite horizontal marquee. Duplicates its children once so a `translateX(-50%)` loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), and stops outright under `prefers-reduced-motion`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DriftRail>;
+
+export const Chips: Story = {
+  render: () => (
+    <div className="max-w-[420px]">
+      <DriftRail>
+        {CHIP_LABELS.map((label) => (
+          <Chip key={label} label={label} />
+        ))}
+      </DriftRail>
+    </div>
+  ),
+};
+
+/** Two rails at once — the design's opposing-direction pair, forward at 42s and reverse at 52s. */
+export const OpposingPair: Story = {
+  render: () => (
+    <div className="max-w-[420px] space-y-4">
+      <DriftRail>
+        {CHIP_LABELS.slice(0, 5).map((label) => (
+          <Chip key={label} label={label} />
+        ))}
+      </DriftRail>
+      <DriftRail reverse durationSeconds={52}>
+        {CHIP_LABELS.slice(3).map((label) => (
+          <Chip key={label} label={label} />
+        ))}
+      </DriftRail>
+    </div>
+  ),
+};
+
+/** Wrapping the featured rail's own card — the rail supplies the motion, the card stays static content. */
+export const WithFeaturedItems: Story = {
+  render: () => (
+    <div className="max-w-[420px]">
+      <DriftRail durationSeconds={30}>
+        {["Warehouse Rave", "Jazz on the Rooftop", "Open Mic Night", "Street Food Market"].map(
+          (title) => (
+            <FeaturedRailItem
+              key={title}
+              title={title}
+              venue="Atelier Café"
+              note="Sat 5 · 20:00"
+            />
+          )
+        )}
+      </DriftRail>
+    </div>
+  ),
+};

package/src/components/drift-rail.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * 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.
+ */
+export 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;
+};
+
+const DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
+
+export function DriftRail({
+  children,
+  reverse = false,
+  durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
+  pauseOnHover = true,
+  className,
+}: DriftRailProps) {
+  const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const scopeClass = `drift-rail-${scopeId}`;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return undefined;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
+      },
+      { threshold: 0 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className={cn(scopeClass, "overflow-hidden py-1.5", className)}>
+      <style>{`
+        .${scopeClass} .drift-rail-run {
+          animation: ${scopeClass}-run ${durationSeconds}s linear infinite;
+          animation-direction: ${reverse ? "reverse" : "normal"};
+        }
+        .${scopeClass}[data-offscreen="true"] .drift-rail-run {
+          animation-play-state: paused;
+        }
+        @keyframes ${scopeClass}-run {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .${scopeClass} .drift-rail-run {
+            animation: none;
+          }
+        }
+        ${pauseOnHover ? `.${scopeClass}:hover .drift-rail-run { animation-play-state: paused; }` : ""}
+      `}</style>
+      <div className="drift-rail-run flex w-max items-stretch gap-3.5 motion-reduce:[animation:none]">
+        {children}
+        <div className="contents" aria-hidden="true">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/empty-state.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { EmptyState, SearchEmptyState, ErrorEmptyState } from "./empty-state";
 
-const meta = {
+const meta: Meta<typeof EmptyState> = {
   title: "Components/EmptyState",
   component: EmptyState,
   tags: ["autodocs"],
@@ -15,10 +15,10 @@ const meta = {
       options: ["sm", "md", "lg"],
     },
   },
-} satisfies Meta<typeof EmptyState>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof EmptyState>;
 
 export const Default: Story = {
   args: {