@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/hour-band.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HourBand, HourBandSkeleton } from "./hour-band";
+import { EventCard } from "./event-card";
+import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
+
+const formatters: EventFormatters = {
+  time: () => "20:00",
+  day: () => "Thu, Sep 3",
+  price: (amount) => `${amount} RON`,
+};
+
+const event = (id: string, title: string, place: string, fee?: number): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: "2026-09-03T20:00:00",
+  entry_fee: fee,
+});
+
+const meta: Meta<typeof HourBand> = {
+  title: "Events/HourBand",
+  component: HourBand,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background px-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One hour of the timeline: a 52px gutter with a hairline and an hour puck, and that hour's events beside it. The cards inside carry no timestamp of their own — the band is the timestamp, which is why they are rendered with `hideWhen`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HourBand>;
+
+export const Default: Story = {
+  args: {
+    time: "21:00",
+    children: (
+      <>
+        <EventCard
+          event={event("1", "Karaoke Night", "VIBE OffSeason")}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+        <EventCard
+          event={event("2", "Urban Sounds at Caro", "Caro", 0)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </>
+    ),
+  },
+};
+
+/** The live hour: green-bordered puck, NOW label, and the content column shifted to clear it. */
+export const Live: Story = {
+  args: {
+    time: "20:00",
+    isLive: true,
+    liveLabel: "NOW ON",
+    children: (
+      <EventCard
+        event={event("3", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
+        labels={labels}
+        formatters={formatters}
+        hideWhen
+        liveStatus="Live now · ends around 23:00"
+      />
+    ),
+  },
+};
+
+/** A single event in a quiet hour. */
+export const OneEvent: Story = {
+  args: {
+    time: "19:00",
+    children: (
+      <EventCard
+        event={event("4", "Quiz Night", "Flying Circus")}
+        labels={labels}
+        formatters={formatters}
+        hideWhen
+      />
+    ),
+  },
+};
+
+/** Consecutive bands — the hairline should read as one continuous axis. */
+export const StackedHours: Story = {
+  render: () => (
+    <>
+      <HourBand time="20:00" isLive liveLabel="NOW ON">
+        <EventCard
+          event={event("5", "Psihotrop Live", "Atelier Café", 50)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+          liveStatus="Live now · ends around 23:00"
+        />
+      </HourBand>
+      <HourBand time="21:00">
+        <EventCard
+          event={event("6", "Charity Concert & Afterparty", "Flying Circus", 30)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </HourBand>
+      <HourBand time="22:00">
+        <EventCard
+          event={event("7", "Schoolotheque Afterparty with Machedon", "Flying Circus", 25)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </HourBand>
+    </>
+  ),
+};
+
+/**
+ * Loading. The puck is omitted rather than blocked out — the hour isn't known
+ * until data lands, and a grey lozenge sitting on the axis reads as a real but
+ * unreadable timestamp. The hairline alone still says "time axis".
+ */
+export const Loading: Story = {
+  render: () => <HourBandSkeleton />,
+};
+
+/** Loading beside loaded, so gutter and card geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <HourBandSkeleton cardCount={1} />
+      <HourBand time="21:00">
+        <EventCard
+          event={event("8", "Karaoke Night", "VIBE OffSeason")}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </HourBand>
+    </div>
+  ),
+};

package/src/components/hour-band.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TimelineHourPuck } from "./timeline-band";
+
+/**
+ * HourBand — one hour on the timeline's axis, with that hour's events beside it.
+ *
+ * The design's mobile timeline is deliberately plain: a 52px gutter carrying a
+ * hairline and an hour puck, and full-width cards to its right. Nothing else.
+ * The cards inside carry no timestamp of their own — this band IS the
+ * timestamp, which is why `EventCard` has `hideWhen`.
+ *
+ * The puck is the shared `TimelineHourPuck`, sitting ON the line with a
+ * background fill punching through it so the hairline reads as continuous
+ * behind the label. It used to be a second, hand-rolled copy of the desktop
+ * band's puck, and the two had drifted apart — this one borderless and
+ * `rounded-md px-1.5`, the desktop one bordered and `rounded-[7px] px-[7px]`.
+ * Sharing the object changes this gutter's pixels: the mobile puck now carries
+ * a border, which is what makes it read as clipped onto the rail rather than
+ * text floating over it, and matches the station on the desktop spine.
+ *
+ * `isLive` turns the puck green-bordered and reveals the NOW label beneath it,
+ * which is why live bands need extra top padding on the content column — the
+ * label occupies space the cards would otherwise start in.
+ *
+ * ── Why the gap is 24px and not 12px ──────────────────────────────────────
+ * THE PUCK IS WIDER THAN THE GUTTER IT SITS IN, and the gap is what absorbs
+ * the difference. A 12-hour locale renders "09:00 AM" — 8 monospace glyphs at
+ * 12.5px (~60px) plus `px-[7px]` twice and a border twice, so ~76px of puck
+ * centred on a 52px gutter, overflowing ~12px on each side. At the original
+ * `gap-3` that right-hand overflow exactly consumed the gap and the puck's
+ * edge landed ON the content column, which read as the hairline colliding
+ * with the rows beside it.
+ *
+ * 24px leaves ~12px of real clearance at the widest label. Do not tighten it
+ * back without re-deriving against a 12-hour locale: a 24-hour one ("09:00")
+ * is ~30px narrower and hides the problem completely.
+ */
+
+export type HourBandProps = {
+  /** The hour, already formatted and localised — "20:00". */
+  time: string;
+  /** Marks this as the hour currently in progress. */
+  isLive?: boolean;
+  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+  liveLabel?: string;
+  /** The hour's events. */
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function HourBand({ time, isLive, liveLabel, children, className }: HourBandProps) {
+  const showLiveLabel = isLive && !!liveLabel;
+
+  return (
+    <div className={cn("flex gap-6 pt-[18px]", className)}>
+      <div className="relative flex w-[52px] shrink-0 justify-center">
+        <Separator orientation="vertical" className="h-full" />
+        <TimelineHourPuck
+          time={time}
+          isLive={isLive}
+          liveLabel={liveLabel}
+          className="absolute left-1/2 top-0 w-0"
+        />
+      </div>
+
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 flex-col gap-5 pb-2",
+          showLiveLabel ? "pt-[34px]" : "pt-1"
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type HourBandSkeletonProps = {
+  /** Cards to reserve space for. The design's loading frame shows two. */
+  cardCount?: number;
+  className?: string;
+};
+
+/**
+ * The mobile timeline's loading state, mirroring `HourBand` exactly — same 52px
+ * gutter, same hairline, same content gap — so nothing jumps when data lands.
+ *
+ * The puck is omitted rather than blocked out: the hour is not known until the
+ * data arrives, and a grey lozenge on the axis reads as a real, unreadable
+ * timestamp. The hairline alone still says "this is a time axis".
+ *
+ * Card footprints come from the design's own loading frame: a 220px poster with
+ * an 16px title bar and a 12px meta bar, then a 170px poster with a 15px title.
+ */
+export function HourBandSkeleton({ cardCount = 2, className }: HourBandSkeletonProps) {
+  const cards = [
+    { poster: 220, title: "80%", meta: "50%" },
+    { poster: 170, title: "70%", meta: null },
+  ];
+
+  return (
+    <div className={cn("flex gap-6 pt-[18px]", className)} aria-hidden="true">
+      <div className="relative flex w-[52px] shrink-0 justify-center">
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-5 pb-2 pt-1">
+        {Array.from({ length: cardCount }).map((_, index) => {
+          const card = cards[index % cards.length];
+          return (
+            <div key={index} className="flex flex-col gap-2.5">
+              <Skeleton className="w-full" style={{ height: card.poster }} />
+              <Skeleton className="h-4" style={{ width: card.title }} />
+              {card.meta && <Skeleton className="h-3" style={{ width: card.meta }} />}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/hour-group.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HourGroup } from "./hour-group";
+import { EventCompactRow } from "./event-compact-row";
+import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
+
+const formatters: EventFormatters = {
+  time: (iso) => new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+  day: () => "Thu, Sep 3",
+  price: (amount) => `${amount} RON`,
+};
+
+const event = (id: string, title: string, place: string, startsAt: string, fee?: number): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: startsAt,
+  entry_fee: fee,
+});
+
+const meta: Meta<typeof HourGroup> = {
+  title: "Events/HourGroup",
+  component: HourGroup,
+  tags: ["autodocs"],
+  args: { time: "21:00", countLabel: "3 events" },
+  decorators: [
+    (Story) => (
+      <div className="w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An hour heading inside `<TimelineBand>`'s content column — a time, a rule, and a count — with that hour's rows beneath and an optional trailing note.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HourGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <EventCompactRow
+          event={event("1", "Urban Sounds at Caro", "Caro", "2026-09-03T21:00:00", 0)}
+          labels={labels}
+          formatters={formatters}
+        />
+        <EventCompactRow
+          event={event("2", "Quiz Night", "Flying Circus", "2026-09-03T21:30:00")}
+          labels={labels}
+          formatters={formatters}
+        />
+      </>
+    ),
+  },
+};
+
+/** A trailing note after the rows, e.g. summarising overflow. */
+export const WithNote: Story = {
+  args: {
+    countLabel: "5 events",
+    note: "3 more not shown.",
+    children: (
+      <EventCompactRow
+        event={event("3", "COJO", "MATTER", "2026-09-03T21:00:00", 40)}
+        labels={labels}
+        formatters={formatters}
+      />
+    ),
+  },
+};
+
+/** No rows — a quiet hour still gets its heading. */
+export const Empty: Story = {
+  args: { countLabel: "0 events" },
+};
+
+/** The mobile variant — a half-step smaller, matching `HourBand`'s own top offset. */
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: (
+      <EventCompactRow
+        size="sm"
+        event={event("4", "Quiz Night", "Flying Circus", "2026-09-03T21:00:00")}
+        labels={labels}
+        formatters={formatters}
+      />
+    ),
+  },
+};

package/src/components/hour-group.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { TimelineHourPuck } from "./timeline-band";
+
+/**
+ * HourGroup — an hour heading inside `<TimelineBand>`'s content column: a
+ * time, a rule, and a count, with that hour's rows beneath and an optional
+ * trailing note (e.g. "3 more not shown").
+ *
+ * ── `spine` — the desktop default ────────────────────────────────────────
+ * Inside a `<TimelineBand>`, pass `spine` and the hour renders as a
+ * `TimelineHourPuck` out ON the axis, centred on this heading's own rule,
+ * instead of as inline text at the head of the content column. Every hour of
+ * the day then reads as a station on the same rail, which is the entire point
+ * of the rail; the band itself no longer draws any hour, so there is nothing
+ * left to collide with.
+ *
+ * The offset is `calc(var(--timeline-spine) * -0.5)` — half the gutter, back
+ * from the content column's left edge, which lands on the hairline. Written
+ * with `*-0.5` rather than `/2` because a slash inside a Tailwind arbitrary
+ * value collides with the opacity-modifier parse. The `w-0` wrapper plus the
+ * puck's own `justify-center` is what centres it, so no `-translate-x-1/2` is
+ * needed and the live label centres on the same line for free.
+ *
+ * `spine` implies the inline time is suppressed — no caller should have to
+ * pass `spine hideTime` to avoid printing the hour twice.
+ *
+ * Keep the rule and the count. The rule is the only thing tying a puck to the
+ * rows it labels across the empty gutter; without it the puck reads as a
+ * sticker rather than a station on a track. The count carries information
+ * present nowhere else and terminates the rule so it doesn't dissolve.
+ *
+ * Where a group's rows already carry their own timestamps, `hideTime` drops the
+ * time and keeps the rule and count, so the hour is stated exactly once.
+ *
+ * `size="sm"` is the mobile variant, shrinking the type a half-step and
+ * matching `<HourBand>`'s own top offset (18px) rather than the desktop
+ * default (22px).
+ */
+
+export type HourGroupProps = {
+  /** The hour, already formatted and localised — "20:00". */
+  time: string;
+  /**
+   * Render the hour as a puck out on `<TimelineBand>`'s spine instead of as
+   * inline text. The desktop timeline's default; implies `hideTime`.
+   */
+  spine?: boolean;
+  /** Marks this hour as the one currently in progress. `spine` only. */
+  isLive?: boolean;
+  /** Shown under the puck when live, e.g. "NOW". `spine` only. */
+  liveLabel?: string;
+  /**
+   * Drop the leading time, keeping the rule and count. For groups whose rows
+   * state their own time.
+   */
+  hideTime?: boolean;
+  /** Caller-composed, e.g. "2 events" — mirrors `EventDayHeader`'s `meta`. */
+  countLabel: string;
+  /** Trailing note shown after the rows, e.g. "3 more not shown". */
+  note?: string;
+  /** The hour's rows. */
+  children?: React.ReactNode;
+  size?: "sm" | "default";
+  className?: string;
+};
+
+export function HourGroup({
+  time,
+  spine,
+  isLive,
+  liveLabel,
+  hideTime,
+  countLabel,
+  note,
+  children,
+  size = "default",
+  className,
+}: HourGroupProps) {
+  const isSm = size === "sm";
+
+  return (
+    // The group's top padding lives HERE, not on the heading row, and that is
+    // load-bearing for `spine`: `top-1/2` resolves against the heading row's
+    // PADDING box while `items-center` centres the rule in its CONTENT box, so
+    // with `pt-[22px]` on the row the puck landed 19.25px down and the rule at
+    // 30.25px — 11px apart, the puck visibly riding above the line it is
+    // supposed to sit on. Unpadded, both resolve against the same box and the
+    // puck's centre, the rule and the spine hairline are one line.
+    <div className={cn(isSm ? "pt-[18px]" : "pt-[22px]", className)}>
+      <div className={cn("flex items-center gap-2.5", spine && "relative")}>
+        {spine && (
+          <TimelineHourPuck
+            time={time}
+            isLive={isLive}
+            liveLabel={liveLabel}
+            className="absolute left-[calc(var(--timeline-spine)*-0.5)] top-1/2 w-0 -translate-y-1/2"
+          />
+        )}
+        {!hideTime && !spine && (
+          <span
+            className={cn(
+              "font-mono text-muted-foreground tabular-nums",
+              isSm ? "text-[11.5px]" : "text-xs"
+            )}
+          >
+            {time}
+          </span>
+        )}
+        <Separator className="flex-1" />
+        <span className={cn("text-muted-foreground/70", isSm ? "text-[10.5px]" : "text-[11px]")}>
+          {countLabel}
+        </span>
+      </div>
+
+      {children}
+
+      {note && <p className="pt-[9px] text-[11.5px] text-muted-foreground">{note}</p>}
+    </div>
+  );
+}

package/src/components/icon.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * Icon — the static iconography contract.
+ *
+ *   - `strokeWidth` 1.75, locking the global stroke to a refined-but-robust weight
+ *   - Three canonical sizes:
+ *       "xs" → 12px  inline with small text, filter pills, badge labels
+ *       "sm" → 16px  default: buttons, nav rows, card metadata
+ *       "md" → 20px  nav tabs, dialog headers
+ *
+ * Usage:
+ *   import { Icon } from "@bearmenu/ui/components/icon";
+ *   <Icon icon={Star} size="sm" className="text-primary fill-primary" aria-hidden />
+ *
+ * Raw lucide imports remain acceptable where all three of strokeWidth, sizing
+ * and colouring are intentionally non-standard (an illustrated 48px empty
+ * state, a map marker). In those cases the caller sets `strokeWidth` itself.
+ *
+ * For icons that perform a gesture on interaction, see `motion-icon.tsx`.
+ * Which glyph means what is recorded in `lib/icon-registry.ts`.
+ */
+
+import { type LucideIcon, type LucideProps } from "lucide-react";
+
+import { cn } from "../lib/utils";
+
+const SIZE_CLASSES = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+} as const;
+
+export type IconSize = keyof typeof SIZE_CLASSES;
+
+export type IconProps = Omit<LucideProps, "size"> & {
+  /** The lucide icon component to render. */
+  icon: LucideIcon;
+  /** Canonical size stop. "xs" = 12px | "sm" = 16px (default) | "md" = 20px */
+  size?: IconSize;
+};
+
+export function Icon({
+  icon: LucideIconComponent,
+  size = "sm",
+  strokeWidth = 1.75,
+  className,
+  ...props
+}: IconProps) {
+  return (
+    <LucideIconComponent
+      strokeWidth={strokeWidth}
+      className={cn(SIZE_CLASSES[size], className)}
+      {...props}
+    />
+  );
+}

package/src/components/input-otp.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } satisfies Meta<typeof InputOTP>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof InputOTP>;
 
 export const Default: Story = {
   render: () => (

package/src/components/markdown-renderer.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } satisfies Meta<typeof MarkdownRenderer>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof MarkdownRenderer>;
 
 export const Default: Story = {
   render: () => (

package/src/components/motion-icon-controls.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import * as React from "react";
+
+/**
+ * First-paint correctness.
+ *
+ * `MotionIcon` poses itself with `controls.set()` inside an effect, which runs
+ * AFTER the first paint. Any sub-part whose rest pose is hidden therefore needs
+ * a matching static SVG attribute, or it paints one frame fully visible — a
+ * flash of a drawn check on every unselected row of a selection list, or of a
+ * moon behind a sun.
+ *
+ * The mock renders variants inertly, so what these assertions see is exactly
+ * what the browser paints before framer takes over.
+ */
+vi.mock("framer-motion", () => {
+  const passthrough =
+    (tag: string) =>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ({ variants: _v, style: _s, ...rest }: any) =>
+      React.createElement(tag, rest);
+  return {
+    useAnimationControls: () => ({ set: () => {}, start: () => Promise.resolve() }),
+    motion: {
+      svg: passthrough("svg"),
+      g: passthrough("g"),
+      path: passthrough("path"),
+      circle: passthrough("circle"),
+      rect: passthrough("rect"),
+    },
+  };
+});
+
+import {
+  MotionCheck,
+  MotionEye,
+  MotionCopy,
+  MotionTheme,
+  MotionSearch,
+  MotionPlayPause,
+  MotionHeart,
+  MotionBookmark,
+  MotionStar,
+} from "./motion-icon-controls";
+
+/** Every element that should be invisible until the icon becomes active. */
+const HIDDEN_AT_REST: Array<[string, React.ComponentType<Record<string, never>>, number]> = [
+  ["MotionCheck", MotionCheck, 1],
+  ["MotionEye", MotionEye, 1],
+  ["MotionCopy", MotionCopy, 1],
+  ["MotionTheme", MotionTheme, 1],
+  ["MotionSearch", MotionSearch, 1],
+  ["MotionPlayPause", MotionPlayPause, 2],
+];
+
+describe("first paint, before the pose effect runs", () => {
+  it.each(HIDDEN_AT_REST)(
+    "%s hides its active-only parts with a static attribute",
+    (_name, Icon, expectedHidden) => {
+      const { container } = render(<Icon />);
+      const hidden = container.querySelectorAll('[opacity="0"]');
+      expect(hidden.length).toBe(expectedHidden);
+    }
+  );
+
+  it.each([
+    ["MotionHeart", MotionHeart],
+    ["MotionBookmark", MotionBookmark],
+    ["MotionStar", MotionStar],
+  ] as Array<[string, React.ComponentType<Record<string, never>>]>)(
+    "%s starts unfilled rather than solid",
+    (_name, Icon) => {
+      const { container } = render(<Icon />);
+      expect(container.querySelector('[fill-opacity="0"]')).not.toBeNull();
+    }
+  );
+});