@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/segmented-nav.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CalendarClock, LayoutGrid, List, SlidersHorizontal } from "lucide-react";
+import { SegmentedNav } from "./segmented-nav";
+
+const meta = {
+  title: "Components/SegmentedNav",
+  component: SegmentedNav,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A segmented control whose segments are links to separate routes. Use `<Tabs>` for in-page panels and `<ToggleGroup>` for button semantics — this one renders a nav landmark and marks the active segment with `aria-current=\"page\"`.",
+      },
+    },
+  },
+} satisfies Meta<typeof SegmentedNav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ICON = "h-4 w-4";
+
+const eventsItems = [
+  { id: "hub", href: "/events", label: "Hub", icon: <LayoutGrid className={ICON} aria-hidden /> },
+  {
+    id: "schedule",
+    href: "/events/schedule",
+    label: "Timeline",
+    icon: <CalendarClock className={ICON} aria-hidden />,
+  },
+  { id: "list", href: "/events/list", label: "List", icon: <List className={ICON} aria-hidden /> },
+];
+
+/** The events surface's three routes — the control this was built for. */
+export const Events: Story = {
+  args: {
+    items: eventsItems,
+    activeId: "schedule",
+    label: "Events views",
+  },
+};
+
+/** Segments stretch to fill the row below `lg`, matching the source design's mobile toggle. */
+export const Mobile: Story = {
+  args: {
+    items: eventsItems,
+    activeId: "hub",
+    label: "Events views",
+  },
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+  render: (args) => (
+    <div className="w-[358px]">
+      <SegmentedNav {...args} />
+    </div>
+  ),
+};
+
+/**
+ * BESIDE OTHER CONTROLS — the case that used to fail silently.
+ *
+ * As a flex child the nav sized to its content, so the segments' `flex-1`
+ * distributed only the width of three labels and the rest of the row went to
+ * whatever sat next to it. The `w-full` below `lg` is what makes the segments
+ * actually own the row here.
+ */
+export const InAControlRow: Story = {
+  args: {
+    items: eventsItems,
+    activeId: "schedule",
+    label: "Events views",
+  },
+  render: (args) => (
+    <div className="w-[390px] rounded-xl border border-border p-2">
+      <div className="flex items-center gap-2">
+        <SegmentedNav {...args} />
+        <button
+          type="button"
+          aria-label="Filters"
+          className="ml-auto flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-border"
+        >
+          <SlidersHorizontal className="h-4 w-4" aria-hidden />
+        </button>
+      </div>
+    </div>
+  ),
+};
+
+/** Labels alone, no icons. */
+export const WithoutIcons: Story = {
+  args: {
+    items: [
+      { id: "all", href: "/all", label: "All" },
+      { id: "free", href: "/free", label: "Free" },
+      { id: "paid", href: "/paid", label: "Paid" },
+    ],
+    activeId: "free",
+    label: "Entry filter",
+  },
+};
+
+/**
+ * In a Next app, pass `next/link` as `linkComponent` for client-side navigation
+ * and prefetch. The default is a plain `<a>` so the component stays usable in
+ * a non-Next app.
+ */
+export const WithCustomLinkComponent: Story = {
+  args: {
+    items: eventsItems,
+    activeId: "list",
+    label: "Events views",
+    linkComponent: ({ href, children, ...props }) => (
+      <a href={href} data-router="custom" {...props}>
+        {children}
+      </a>
+    ),
+  },
+};

package/src/components/segmented-nav.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * SegmentedNav — a segmented control whose segments are LINKS, not buttons.
+ *
+ * Use this when the segments are separate routes. For segments that swap
+ * content inside one page, use `<Tabs>` (Radix tab-panel semantics) or
+ * `<ToggleGroup>` (button semantics) instead — a nav landmark with
+ * `aria-current="page"` is only correct when each segment is a destination.
+ *
+ * FRAMEWORK-AGNOSTIC BY DESIGN. This renders a plain `<a>` unless the caller
+ * passes `linkComponent`. It deliberately does NOT import `next/link` the way
+ * `link-button.tsx` does — that import is what quietly makes a component
+ * Next-only, and this one has to work in admin (Vite) too.
+ *
+ * Segments stretch to fill the row on mobile and shrink to their content from
+ * `lg` up, matching the `.mtog` / `.tog` split in the source design.
+ *
+ * The `w-full` below `lg` is what makes that sentence TRUE, and it is not
+ * redundant with the segments' own `flex-1`. `flex-1` only distributes the
+ * width the nav already has; the nav itself sizes to content whenever its
+ * parent is a flex row, so a caller placing this beside other controls got
+ * three segments hugging their labels with dead space alongside — the
+ * component quietly not doing the thing its own docblock claimed. Callers that
+ * genuinely want it to hug on mobile can pass `w-auto` through `className`,
+ * which wins via `cn`'s merge.
+ */
+
+export type SegmentedNavItem = {
+  /** Stable identity, compared against `activeId`. */
+  id: string;
+  href: string;
+  label: string;
+  /** Rendered before the label. Size it at the call site (the design uses 15–16px). */
+  icon?: React.ReactNode;
+};
+
+/**
+ * The shape `linkComponent` must accept. `next/link` satisfies it structurally,
+ * so callers can pass it directly.
+ */
+export type SegmentedNavLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  "aria-current"?: "page";
+  onClick?: () => void;
+};
+
+function DefaultLink({ href, ...props }: SegmentedNavLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type SegmentedNavProps = {
+  items: SegmentedNavItem[];
+  /** `id` of the segment for the current route. */
+  activeId: string;
+  /** Accessible name for the nav landmark. Translated by the caller. */
+  label: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<SegmentedNavLinkProps>;
+  /** Fired with the segment id on click — analytics, haptics. Never navigation. */
+  onSelect?: (id: string) => void;
+  className?: string;
+};
+
+export function SegmentedNav({
+  items,
+  activeId,
+  label,
+  linkComponent: LinkComponent = DefaultLink,
+  onSelect,
+  className,
+}: SegmentedNavProps) {
+  return (
+    <nav
+      aria-label={label}
+      className={cn(
+        "flex w-full items-center gap-0.5 rounded-lg border border-border bg-card p-0.5",
+        "lg:inline-flex lg:w-fit",
+        className
+      )}
+    >
+      {items.map((item) => {
+        const isActive = item.id === activeId;
+        return (
+          <LinkComponent
+            key={item.id}
+            href={item.href}
+            aria-current={isActive ? "page" : undefined}
+            onClick={onSelect ? () => onSelect(item.id) : undefined}
+            className={cn(
+              "inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-md px-3",
+              "text-[13px] font-semibold lg:flex-none lg:text-sm",
+              "transition-colors duration-150 motion-reduce:transition-none",
+              "cursor-pointer touch-manipulation select-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              isActive
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {item.icon}
+            {item.label}
+          </LinkComponent>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/selection-bar.stories.tsx

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

package/src/components/skeleton-card.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { SkeletonCard } from "./skeleton-card";
 
-const meta = {
+const meta: Meta<typeof SkeletonCard> = {
   title: "Components/SkeletonCard",
   component: SkeletonCard,
   tags: ["autodocs"],
-} satisfies Meta<typeof SkeletonCard>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SkeletonCard>;
 
 export const Experience: Story = {
   render: () => <SkeletonCard variant="experience" className="w-[350px]" />,

package/src/components/skeleton.tsx

@@ -1,6 +1,23 @@
 import type React from "react";
 import { cn } from "../lib/utils";
 
+/**
+ * The shimmer stops under `prefers-reduced-motion: reduce`.
+ *
+ * It did not, and this is the one animation in the package that is guaranteed
+ * to be on screen during every slow load, on every surface, in multiples — a
+ * list of twelve skeleton rows is twelve sweeping gradients. A reader who has
+ * asked the OS for less motion is exactly the reader least served by that.
+ *
+ * `motion-reduce:` on the `before:` pseudo-element rather than a media query in
+ * a style block, because the animation is declared as a utility class here and
+ * a class beats a class predictably; the components that animate via an inline
+ * `animation-play-state` need the media-query form instead, and say so.
+ *
+ * The skeleton still reads as a skeleton without the sweep — it keeps its muted
+ * fill and its geometry, which is what actually communicates "content is coming
+ * and it will be this shape".
+ */
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
@@ -8,6 +25,7 @@ function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>)
       className={cn(
         "relative overflow-hidden rounded-xl bg-muted",
         "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-foreground/[0.04] before:to-transparent",
+        "motion-reduce:before:animate-none motion-reduce:before:hidden",
         className
       )}
       {...props}

package/src/components/sliding-panels.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
 } satisfies Meta<typeof SlidingPanels>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SlidingPanels>;
 
 function SlidingPanelsDemo() {
   const [currentPanel, setCurrentPanel] = useState("panel-1");

package/src/components/stepper.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
 } satisfies Meta<typeof Stepper>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Stepper>;
 
 const steps = [
   { id: "account", title: "Account" },

package/src/components/sticky-container.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { StickyContainer } from "./sticky-container";
 
-const meta = {
+const meta: Meta<typeof StickyContainer> = {
   title: "Components/StickyContainer",
   component: StickyContainer,
   tags: ["autodocs"],
-} satisfies Meta<typeof StickyContainer>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof StickyContainer>;
 
 export const Default: Story = {
   render: () => (

package/src/components/tag.tsx

@@ -16,9 +16,19 @@ const tagVariants = cva(
         warning: "border-warning/30 bg-warning/10 text-warning",
         destructive: "border-destructive/30 bg-destructive/10 text-destructive",
         outline: "border-border bg-transparent text-foreground",
+        /**
+         * Decorative metadata — a tag the reader scans past, not one that
+         * labels a state. `outline` at full `text-foreground` is too loud
+         * repeated a dozen times down a list, and `default`'s `bg-muted` fill
+         * is reserved: in the event row family a FILLED chip means live.
+         */
+        quiet: "border-border bg-transparent text-muted-foreground",
       },
       size: {
-        sm: "h-5 px-2 text-[10px]",
+        // 22px/11px, matching the event row family's chip. 10px was the
+        // smallest type in the package and below the floor used everywhere
+        // else; there is no surface that wants it.
+        sm: "h-[22px] px-2 text-[11px]",
         default: "h-6 px-2.5",
         lg: "h-7 px-3 text-sm",
       },

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

@@ -0,0 +1,206 @@
+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 />,
+};