@bearmenu/ui 0.8.6 → 0.8.8

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SnapRail } from "./snap-rail";
+
+const meta: Meta<typeof SnapRail> = {
+  title: "Primitives/SnapRail",
+  component: SnapRail,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-surface-2 p-3">
+        <div className="rounded-[18px] bg-card px-3.5 py-4">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A swipe-driven rail with mandatory snap points. Direct children become the snap targets and take the rail's item width; `bleed` lets the rail run under its host's padding while still snapping to the host's content edge.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SnapRail>;
+
+function Poster({ label }: { label: string }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="aspect-[4/3] rounded-xl bg-muted" />
+      <div className="text-[13.5px] font-bold">{label}</div>
+    </div>
+  );
+}
+
+const cards = ["Psihotrop Live", "Jazz in the Yard", "Quiz Night", "Techno Basement", "Vinyl Hour"];
+
+/** 46% items: two cards in view and a third peeking. The category-deck width. */
+export const Small: Story = {
+  args: {
+    itemWidth: "sm",
+    bleed: "card",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};
+
+/** 60% items: one card and a strong peek. The featured-rail width. */
+export const Medium: Story = {
+  args: {
+    itemWidth: "md",
+    bleed: "card",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};
+
+/** 80% items: one card at a time with a sliver of the next. */
+export const Large: Story = {
+  args: {
+    itemWidth: "lg",
+    bleed: "card",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};
+
+/**
+ * Without `bleed` the first card snaps flush to the host's padding edge and
+ * the rail's clip sits inside the card's rounded corner. Kept to show the
+ * difference; every hub card wants `bleed="card"`.
+ */
+export const NoBleed: Story = {
+  args: {
+    itemWidth: "sm",
+    bleed: "none",
+    children: cards.map((c) => <Poster key={c} label={c} />),
+  },
+};

package/src/components/snap-rail.test.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { SnapRail } from "./snap-rail";
+
+describe("SnapRail", () => {
+  it("applies the item width and bleed variants to the rail", () => {
+    const { container } = render(
+      <SnapRail itemWidth="md" bleed="card" data-testid="rail">
+        <div>a</div>
+        <div>b</div>
+      </SnapRail>
+    );
+    const rail = container.firstElementChild as HTMLElement;
+    expect(rail.className).toContain("snap-mandatory");
+    expect(rail.className).toContain("[&>*]:w-[60%]");
+    expect(rail.className).toContain("scroll-px-3.5");
+  });
+});

package/src/components/snap-rail.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * SnapRail — a horizontal, finger-driven rail with mandatory snap points, the
+ * way a native app lays out a row of cards. Not `DriftRail`: that one moves on
+ * its own and is for ambience; this one waits to be swiped and is for content
+ * the reader is expected to reach.
+ *
+ * Every direct child becomes a snap target and takes the rail's item width, so
+ * callers pass bare cards — no wrapper, no per-item width. Widths are
+ * percentages of the rail, so the peek of the next card is what tells the
+ * reader there is more; there is no scrollbar and no edge fade.
+ *
+ * `bleed` cancels the host's horizontal padding and restores it as scroll
+ * padding, so the first card lines up with the host's content edge and the
+ * rail still snaps to that same edge after a swipe. Without it, the rail
+ * snaps flush to the host's rounded corner and loads looking pre-scrolled.
+ * `card` is the 14px inset of a hub card; `page` is the 16px page gutter.
+ */
+const snapRailVariants = cva(
+  cn(
+    "flex snap-x snap-mandatory overflow-x-auto pb-0.5 scrollbar-hide",
+    "[&>*]:shrink-0 [&>*]:snap-start"
+  ),
+  {
+    variants: {
+      itemWidth: {
+        sm: "[&>*]:w-[46%]",
+        md: "[&>*]:w-[60%]",
+        lg: "[&>*]:w-[80%]",
+      },
+      gap: {
+        sm: "gap-2",
+        default: "gap-3",
+      },
+      bleed: {
+        none: "",
+        card: "-mx-3.5 px-3.5 scroll-px-3.5",
+        page: "-mx-4 px-4 scroll-px-4",
+      },
+    },
+    defaultVariants: {
+      itemWidth: "sm",
+      gap: "default",
+      bleed: "none",
+    },
+  }
+);
+
+export type SnapRailProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof snapRailVariants>;
+
+export const SnapRail = React.forwardRef<HTMLDivElement, SnapRailProps>(
+  ({ className, itemWidth, gap, bleed, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="snap-rail"
+      className={cn(snapRailVariants({ itemWidth, gap, bleed }), className)}
+      {...props}
+    />
+  )
+);
+SnapRail.displayName = "SnapRail";

package/src/components/timeline-band.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { Radio } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
@@ -45,14 +46,23 @@ import { Skeleton } from "./skeleton";
  */
 
 /**
- * Ring pulse on the live puck — inherited from the deleted `TimelinePlayhead`,
+ * Ring pulse on the live puck — inherited from an earlier `TimelinePlayhead`,
  * which carried this surface's only motion. Kept at its 2.4s `ease-in-out` and
- * its reduced-motion kill switch, but BOX-SHADOW ONLY: the playhead's
- * `transform: scale` would make the hairline visibly breathe here, because
- * unlike the playhead this puck sits ON the rail.
+ * its reduced-motion kill switch, but BOX-SHADOW ONLY: a `transform: scale`
+ * would make the hairline visibly breathe here, because this puck sits ON the
+ * rail. (Today's `timeline-playhead.tsx` is static and sits between bands.)
  */
 const LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
 
+/**
+ * The mobile axis gutter, shared by `HourBand` and `TimelinePlayhead` so the
+ * hour chips and the current-time label sit in one column. 58px is the width
+ * of a five-glyph 24-hour label ("20:00") in the chip's mono type plus its
+ * padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
+ * reasons the events surfaces format 24-hour everywhere.
+ */
+export const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+
 export type TimelineHourPuckProps = {
   /** The hour, already formatted and localised — or an em dash for a quiet day. */
   time: string;
@@ -60,6 +70,16 @@ export type TimelineHourPuckProps = {
   isLive?: boolean;
   /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
   liveLabel?: string;
+  /**
+   * `station` (default): the bordered puck that sits ON the hairline, for the
+   * desktop spine. `chip`: a filled, fixed-width lozenge with the hairline
+   * starting BELOW it, for the mobile gutter — an app's time label, not a
+   * station on a rail. In `chip` the live label is visually hidden: the tinted
+   * chip plus a small on-air glyph are the visible signal (the glyph so the
+   * state never rests on colour alone once the pulse is reduced away) and the
+   * label stays for screen readers only.
+   */
+  variant?: "station" | "chip";
   className?: string;
 };
 
@@ -78,7 +98,15 @@ export type TimelineHourPuckProps = {
  * centre this puck with `-translate-y-1/2`, and a two-item column would centre
  * the STACK, lifting the puck off the line it exists to sit on.
  */
-export function TimelineHourPuck({ time, isLive, liveLabel, className }: TimelineHourPuckProps) {
+export function TimelineHourPuck({
+  time,
+  isLive,
+  liveLabel,
+  variant = "station",
+  className,
+}: TimelineHourPuckProps) {
+  const isChip = variant === "chip";
+
   return (
     <span className={cn("relative flex justify-center", className)}>
       {isLive && (
@@ -97,20 +125,32 @@ export function TimelineHourPuck({ time, isLive, liveLabel, className }: Timelin
       )}
       <span
         className={cn(
-          "whitespace-nowrap rounded-[7px] border bg-background px-[7px] py-[3px]",
-          "font-mono text-[12.5px] font-medium tabular-nums",
-          isLive
-            ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS)
-            : "border-border text-foreground"
+          "whitespace-nowrap font-mono tabular-nums",
+          isChip
+            ? cn(
+                "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] px-1 text-[12px] font-medium",
+                isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
+              )
+            : cn(
+                "rounded-[7px] border bg-background px-[7px] py-[3px] text-[12.5px] font-medium",
+                isLive
+                  ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS)
+                  : "border-border text-foreground"
+              )
         )}
       >
+        {isChip && isLive && <Radio className="h-2.5 w-2.5 shrink-0" aria-hidden />}
         {time}
       </span>
       {isLive && !!liveLabel && (
         <span
           className={cn(
-            "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
-            "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+            isChip
+              ? "sr-only"
+              : cn(
+                  "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
+                  "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+                )
           )}
         >
           {liveLabel}

package/src/components/timeline-playhead.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimelinePlayhead } from "./timeline-playhead";
+
+const meta: Meta<typeof TimelinePlayhead> = {
+  title: "Events/TimelinePlayhead",
+  component: TimelinePlayhead,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background px-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The current-time mark on the mobile timeline. Rendered between hour bands where the wall clock falls; its time label shares the gutter with `HourBand` so it aligns under the hour chips.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimelinePlayhead>;
+
+export const Default: Story = {
+  args: { time: "21:38", label: "NOW" },
+};

package/src/components/timeline-playhead.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TimelinePlayhead } from "./timeline-playhead";
+
+describe("TimelinePlayhead", () => {
+  it("prints the time and the label, both as given", () => {
+    render(<TimelinePlayhead time="21:38" label="NOW" />);
+    expect(screen.getByText("21:38")).toBeInTheDocument();
+    expect(screen.getByText("NOW")).toBeInTheDocument();
+  });
+});

package/src/components/timeline-playhead.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { TIMELINE_MOBILE_GUTTER_CLASS } from "./timeline-band";
+
+/**
+ * TimelinePlayhead — the "you are here" mark on the mobile timeline: the
+ * current time in the axis gutter, a dashed rule across the content column,
+ * and a filled NOW pill at the far edge.
+ *
+ * It sits BETWEEN hour bands, at the point where the wall clock falls, so the
+ * reader can see at a glance which hours are behind them and which are ahead.
+ * The live hour band's tinted chip says "this hour is running"; the playhead
+ * says exactly how far into it we are. Both are needed: a band spans an hour
+ * and the hour is mostly not "now".
+ *
+ * The time label shares the gutter width with `HourBand` so it lines up under
+ * the hour chips. Both strings arrive formatted — the DS holds no clock.
+ */
+export type TimelinePlayheadProps = {
+  /** The current time, already formatted — "21:38". */
+  time: string;
+  /** The pill text, e.g. "NOW". */
+  label: string;
+  className?: string;
+};
+
+export function TimelinePlayhead({ time, label, className }: TimelinePlayheadProps) {
+  return (
+    <div className={cn("flex items-center gap-2.5 pt-3", className)}>
+      <span
+        className={cn(
+          TIMELINE_MOBILE_GUTTER_CLASS,
+          "shrink-0 text-center font-mono text-[11px] font-bold tabular-nums text-success"
+        )}
+      >
+        {time}
+      </span>
+      <span aria-hidden className="h-0 flex-1 border-t-[1.5px] border-dashed border-success/50" />
+      <span className="rounded-full bg-success px-2 py-0.5 text-[9.5px] font-extrabold tracking-[0.1em] text-success-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}

package/src/components/weekend-panel.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { WeekendPanel } from "./weekend-panel";
+
+const labels = { pause: "Pause", play: "Play" };
+
+function renderPanel() {
+  return render(
+    <WeekendPanel dayLabel="Saturday" countLabel="4 events" actionLabel="See all" labels={labels}>
+      <a href="/a">A</a>
+      <a href="/b">B</a>
+      <a href="/c">C</a>
+      <a href="/d">D</a>
+    </WeekendPanel>
+  );
+}
+
+const track = () => screen.getByText("A").parentElement!.parentElement as HTMLElement;
+
+describe("WeekendPanel", () => {
+  it("has no autoplay control below the desktop breakpoint", () => {
+    renderPanel();
+    expect(screen.queryByRole("button", { name: "Pause" })).not.toBeInTheDocument();
+  });
+
+  it("starts on the first page and turns on a leftward drag", () => {
+    renderPanel();
+    expect(track().style.transform).toContain("calc(0 *");
+
+    const stage = track().parentElement as HTMLElement;
+    fireEvent.pointerDown(stage, { clientX: 200, pointerId: 1, button: 0 });
+    fireEvent.pointerMove(stage, { clientX: 150, pointerId: 1 });
+    fireEvent.pointerMove(stage, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerUp(stage, { clientX: 100, pointerId: 1 });
+    expect(track().style.transform).toContain("calc(-1 *");
+  });
+
+  it("turns to the page of a card that receives focus", () => {
+    renderPanel();
+    fireEvent.focus(screen.getByText("D"));
+    expect(track().style.transform).toContain("calc(-1 *");
+  });
+});