@bearmenu/ui 0.8.17 → 0.8.18

package/src/components/hour-band.tsx

@@ -1,146 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
-import { Skeleton } from "./skeleton";
-import {
-  TIMELINE_MOBILE_GUTTER_CLASS,
-  TimelineHourPuck,
-} from "./timeline-band";
-
-/**
- * HourBand — one hour on the timeline's axis, with that hour's events beside it.
- *
- * The mobile timeline is an app list, not a page: a 58px gutter carrying a
- * filled hour chip with a hairline dropping from beneath it, and the hour's
- * rows to the right, separated by hairlines of their own. The rows carry no
- * timestamp — this band IS the timestamp, which is why `EventCard` has
- * `hideWhen` and `EventCompactRow` has `hideTime`.
- *
- * The chip is the shared `TimelineHourPuck` in its `chip` variant, so the
- * desktop spine's station and this gutter's label are one object with two
- * looks rather than two objects that drift. The hairline starts BELOW the chip
- * rather than running behind it: a chip is a label at the top of its hour, a
- * station is a tick on a continuous rail, and the two read differently.
- *
- * `isLive` tints the chip and the hairline with `--success`; the live label is
- * kept for screen readers (the chip variant hides it visually). The playhead —
- * the exact current time — is a separate `TimelinePlayhead` rendered between
- * bands by the caller, because an hour spans sixty minutes and "now" is one of
- * them.
- *
- * ROWS ARE SEPARATED HERE, NOT IN THE ROW. `EventCompactRow` deliberately
- * draws no divider (its container does — see its docblock), so this band wraps
- * each child and rules between them. The wrapper, not the child, carries the
- * rule, so the row's own negative-margin hover wash is untouched. Children are
- * read with `Children.toArray`, which drops `null`/`false` so a conditional
- * first row never inherits a rule meant for a second; pass rows as siblings,
- * not inside a fragment — a fragment is one child and gets one wrapper.
- */
-
-export type HourBandProps = {
-  /** The hour, already formatted and localised — "20:00". */
-  time: string;
-  /** Marks this as the hour currently in progress. */
-  isLive?: boolean;
-  /** Screen-reader text for the live hour, e.g. "Now on". Required to render it. */
-  liveLabel?: string;
-  /** The hour's events. Each direct child is one row or card. */
-  children: React.ReactNode;
-  /**
-   * `rows` (default): compact rows, ruled between with a Separator. `cards`:
-   * poster cards, stacked with a 16px gap and no rules — a card is its own
-   * frame, and a hairline between two posters reads as a third object.
-   */
-  layout?: "rows" | "cards";
-  className?: string;
-};
-
-export function HourBand({
-  time,
-  isLive,
-  liveLabel,
-  children,
-  layout = "rows",
-  className,
-}: HourBandProps) {
-  const isCards = layout === "cards";
-  return (
-    <div className={cn("flex gap-3 pt-2.5", className)}>
-      <div className={cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS)}>
-        <TimelineHourPuck
-          time={time}
-          isLive={isLive}
-          liveLabel={liveLabel}
-          variant="chip"
-        />
-        <Separator
-          orientation="vertical"
-          className={cn(
-            "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2",
-            isLive && "bg-success/30",
-          )}
-        />
-      </div>
-
-      <div
-        className={cn("flex min-w-0 flex-1 flex-col", isCards && "gap-4 pb-2")}
-      >
-        {React.Children.toArray(children).map((child, index) => (
-          <div key={index}>
-            {!isCards && index > 0 && <Separator />}
-            {child}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export type HourBandSkeletonProps = {
-  /** Rows to reserve space for. */
-  cardCount?: number;
-  className?: string;
-};
-
-/**
- * The mobile timeline's loading state, mirroring `HourBand` exactly — same
- * gutter, same hairline, same row rhythm — so nothing jumps when data lands.
- *
- * The chip is blocked out at its real size rather than omitted: it is a fixed
- * 58x24 lozenge, so a grey one reads as "a time goes here" without inventing
- * a time. Row footprints mirror `EventCompactRowSkeleton`.
- */
-export function HourBandSkeleton({
-  cardCount = 2,
-  className,
-}: HourBandSkeletonProps) {
-  return (
-    <div className={cn("flex gap-3 pt-2.5", className)} aria-hidden="true">
-      <div className={cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS)}>
-        <Skeleton className="h-6 w-[58px] rounded-[7px]" />
-        <Separator
-          orientation="vertical"
-          className="absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2"
-        />
-      </div>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        {Array.from({ length: cardCount }).map((_, index) => (
-          <div key={index}>
-            {index > 0 && <Separator />}
-            <div className="flex gap-3 py-[11px]">
-              <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[10px]" />
-              <div className="min-w-0 flex-1">
-                <Skeleton className="h-[14px] w-3/4" />
-                <Skeleton className="mt-1.5 h-[11.5px] w-1/2" />
-                <Skeleton className="mt-2 h-[22px] w-16 rounded-full" />
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -1,100 +0,0 @@
-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

@@ -1,124 +0,0 @@
-"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/timeline-band.stories.tsx

@@ -1,206 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ChevronDown, TimerOff } from "lucide-react";
-import { TimelineBand, TimelineBandSkeleton } from "./timeline-band";
-import { HourGroup } from "./hour-group";
-import { EventCompactRow } from "./event-compact-row";
-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 TimelineBand> = {
-  title: "Events/TimelineBand",
-  component: TimelineBand,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[1180px] bg-background">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The desktop timeline's three-column row — lane, spine, content — and the desktop counterpart of `<HourBand>`. The band draws the geometry and the hairline only: every hour on the axis is a puck emitted by its own `<HourGroup spine>`, so an hour appears exactly once and always on the spine. Pass an em dash as a group's `time` for a quiet day, so it still reads as a point on the axis rather than a gap in it.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TimelineBand>;
-
-/**
- * THE FULL COMPOSITION, as the source design builds it. Density falls off left
- * to right and top to bottom: one feature poster in the lane, then a grid of
- * cards for the band's own hour, then compact rows for each later hour.
- *
- * EVERY hour is a station: each `HourGroup` carries `spine`, so 20:00, 21:00
- * and 22:00 all sit on the rail in the same grammar, each centred on its own
- * heading rule. The opening group passes `hideTime` implicitly via `spine` and
- * holds cards rather than rows — that is what the density ladder is, not a
- * difference in how the hour is drawn.
- */
-export const FullBand: Story = {
-  args: {
-    lane: (
-      <div className="flex flex-col gap-5 pt-3.5">
-        <EventCard
-          event={event("f", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
-          labels={labels}
-          formatters={formatters}
-          emphasis
-          hideWhen
-          tagLabel="Live music"
-        />
-        <button
-          type="button"
-          className="inline-flex h-9 w-max items-center gap-1.5 rounded-full border border-border bg-card px-4 text-[13px] font-semibold"
-        >
-          <TimerOff className="h-3.5 w-3.5" aria-hidden />7 earlier events, 14:00 — 19:00
-          <ChevronDown className="h-3.5 w-3.5" aria-hidden />
-        </button>
-      </div>
-    ),
-    children: (
-      <>
-        {/* The opening hour: its own station, holding cards rather than rows. */}
-        <HourGroup spine time="20:00 — 20:30" countLabel="4 events">
-        <div className="grid grid-cols-3 gap-5 pt-3.5">
-          <EventCard
-            event={event("c1", "Quiz Night", "Flying Circus")}
-            labels={labels}
-            formatters={formatters}
-            hideWhen
-          />
-          <EventCard
-            event={event("c2", "Beer Battle", "Irish Music Pub", 0)}
-            labels={labels}
-            formatters={formatters}
-            hideWhen
-          />
-          <EventCard
-            event={event("c3", "COJO", "MATTER", 40)}
-            labels={labels}
-            formatters={formatters}
-            hideWhen
-          />
-        </div>
-        </HourGroup>
-
-        {/* Later hours thin out into rows — same station, denser content. */}
-        <HourGroup spine time="21:00" countLabel="2 events">
-          <EventCompactRow
-            event={event("r1", "Karaoke Night", "VIBE OffSeason")}
-            labels={labels}
-            formatters={formatters}
-          />
-          <EventCompactRow
-            event={event("r2", "Urban Sounds at Caro", "Caro", 0)}
-            labels={labels}
-            formatters={formatters}
-          />
-        </HourGroup>
-
-        <HourGroup spine time="22:00 — 23:00" countLabel="2 events">
-          <EventCompactRow
-            event={event("r3", "Schoolotheque Afterparty", "Flying Circus", 25)}
-            labels={labels}
-            formatters={formatters}
-          />
-          <EventCompactRow
-            event={event("r4", "Összerázó Party Vol. I", "After Eight", 30)}
-            labels={labels}
-            formatters={formatters}
-          />
-        </HourGroup>
-      </>
-    ),
-  },
-};
-
-/** A minimal band — one poster, one group of rows. */
-export const Default: Story = {
-  args: {
-    lane: (
-      <EventCard
-        event={event("1", "Karaoke Night", "VIBE OffSeason")}
-        labels={labels}
-        formatters={formatters}
-        posterAspect="4/3"
-        hideWhen
-      />
-    ),
-    children: (
-      <HourGroup spine time="21:00" countLabel="3 events">
-        <EventCompactRow
-          event={event("2", "Urban Sounds at Caro", "Caro", 0)}
-          labels={labels}
-          formatters={formatters}
-        />
-        <EventCompactRow
-          event={event("3", "Quiz Night", "Flying Circus")}
-          labels={labels}
-          formatters={formatters}
-        />
-      </HourGroup>
-    ),
-  },
-};
-
-/** The live hour: green-bordered puck, a slow ring pulse, and a NOW ON label
- *  beneath it. This is the ONLY live marker on the surface — there is no
- *  separate playhead printing a second, different time beside it. */
-export const Live: Story = {
-  args: {
-    lane: (
-      <EventCard
-        event={event("4", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
-        labels={labels}
-        formatters={formatters}
-        posterAspect="4/3"
-        hideWhen
-        liveStatus="Live now · ends around 23:00"
-      />
-    ),
-    children: (
-      <HourGroup spine isLive liveLabel="NOW ON" time="20:00" countLabel="1 event">
-        <EventCompactRow
-          event={event("5", "Charity Concert & Afterparty", "Flying Circus", 30)}
-          labels={labels}
-          formatters={formatters}
-        />
-      </HourGroup>
-    ),
-  },
-};
-
-/** A quiet hour: an em dash on the axis, no lane content. */
-export const EmptyHour: Story = {
-  args: {
-    lane: null,
-    children: <HourGroup spine time="—" countLabel="0 events" note="Nothing listed yet." />,
-  },
-};
-
-/** Holds the lane/spine/content geometry so nothing jumps when data lands. */
-export const Skeleton: Story = {
-  render: () => <TimelineBandSkeleton />,
-};