@bearmenu/ui 0.8.4 → 0.8.7

package/src/components/quiet-stretch.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QuietStretch, type QuietStretchDay } from "./quiet-stretch";
+
+const days: QuietStretchDay[] = [
+  { id: "mon", dayLabel: "Mon 7", count: 0 },
+  { id: "tue", dayLabel: "Tue 8", count: 0 },
+  { id: "wed", dayLabel: "Wed 9", count: 2 },
+  { id: "thu", dayLabel: "Thu 10", count: 0 },
+];
+
+const meta: Meta<typeof QuietStretch> = {
+  title: "Events/QuietStretch",
+  component: QuietStretch,
+  tags: ["autodocs"],
+  args: {
+    label: "QUIET STRETCH",
+    days,
+    emptyLabel: "nothing yet",
+    actionLabel: "Expand",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[640px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The collapsed run of quiet days on the timeline, summarising a run of near-empty days into one row. Responsive rather than a separate mobile component: past `sm` the label/days/action sit on one row, below it they stack.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof QuietStretch>;
+
+export const Default: Story = {
+  args: { onAction: () => {} },
+};
+
+/** No link or handler — the action renders as static text, not a control. */
+export const NonInteractive: Story = {};
+
+export const AsLink: Story = {
+  args: { href: "#quiet-stretch" },
+};
+
+/** Narrow viewport — label, days and action stack, days wrap at a tighter gap. */
+export const Narrow: Story = {
+  args: { onAction: () => {} },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/quiet-stretch.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * QuietStretch — the collapsed run of quiet days on the timeline, summarising
+ * a run of near-empty days into one row so the reader doesn't scroll past
+ * dozens of "nothing on" headers to reach the next thing worth seeing.
+ *
+ * Responsive rather than a separate mobile component: past `sm` the label,
+ * days and action sit on one row; below it they stack, and the days list
+ * wraps at a tighter gap (14px vs. the desktop 22px).
+ *
+ * The action renders as a link whenever `href` is given, a button when only
+ * `onAction` is — same anchor rule as the rest of the events surface.
+ */
+
+export type QuietStretchLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: QuietStretchLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type QuietStretchDay = {
+  id: string;
+  /** Already formatted and localised, e.g. "Mon 7". */
+  dayLabel: string;
+  count: number;
+};
+
+export type QuietStretchProps = {
+  /** e.g. "QUIET STRETCH". */
+  label: string;
+  days: QuietStretchDay[];
+  /** Shown in place of a zero count, e.g. "nothing yet". */
+  emptyLabel: string;
+  /** e.g. "Expand". */
+  actionLabel: string;
+  href?: string;
+  linkComponent?: React.ComponentType<QuietStretchLinkProps>;
+  onAction?: (mouseEvent: React.MouseEvent) => void;
+  className?: string;
+};
+
+export function QuietStretch({
+  label,
+  days,
+  emptyLabel,
+  actionLabel,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onAction,
+  className,
+}: QuietStretchProps) {
+  const isInteractive = !!href || !!onAction;
+
+  const actionClasses = cn(
+    "inline-flex items-center gap-1 whitespace-nowrap rounded-sm text-[13px] font-bold text-primary sm:ml-auto",
+    isInteractive &&
+      cn(
+        "-m-1 cursor-pointer p-1",
+        "transition-colors duration-150 hover:text-primary/80 motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      )
+  );
+
+  const action = (
+    <>
+      {actionLabel}
+      <ChevronDown className="h-3.5 w-3.5" aria-hidden />
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        "my-2 flex flex-col gap-3 rounded-xl bg-muted px-[22px] py-5",
+        "sm:flex-row sm:items-center sm:gap-4",
+        className
+      )}
+    >
+      <span className="whitespace-nowrap text-xs font-extrabold tracking-widest text-muted-foreground">
+        {label}
+      </span>
+
+      <div className="flex flex-wrap gap-3.5 text-[13px] sm:gap-[22px]">
+        {days.map((day) => (
+          <span key={day.id} className="whitespace-nowrap">
+            <span className="font-bold">{day.dayLabel}</span>{" "}
+            <span className="text-muted-foreground">{day.count > 0 ? day.count : emptyLabel}</span>
+          </span>
+        ))}
+      </div>
+
+      {href ? (
+        <LinkComponent href={href} className={actionClasses} onClick={onAction}>
+          {action}
+        </LinkComponent>
+      ) : onAction ? (
+        <button type="button" className={actionClasses} onClick={onAction}>
+          {action}
+        </button>
+      ) : (
+        <span className={actionClasses}>{action}</span>
+      )}
+    </div>
+  );
+}

package/src/components/section-header.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SectionHeader, SectionHeaderSkeleton } from "./section-header";
+
+// 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 SectionHeader> = {
+  title: "Events/SectionHeader",
+  component: SectionHeader,
+  tags: ["autodocs"],
+  args: { title: "Tonight" },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SectionHeader>;
+
+export const Default: Story = {};
+
+export const WithCount: Story = {
+  args: { count: 12 },
+};
+
+export const WithAction: Story = {
+  args: { count: 12, action: "See all", actionHref: "/events" },
+};
+
+export const WithSubtitle: Story = {
+  args: {
+    title: "This weekend",
+    subtitle: "Curated by the team, updated every Friday.",
+    action: "See all",
+    actionHref: "/events/weekend",
+  },
+};
+
+/** `onAction` renders a button instead of a link — used inside a sheet/drawer. */
+export const ButtonAction: Story = {
+  args: { action: "Reset", onAction: () => {} },
+};
+
+export const AsH1: Story = {
+  args: { as: "h1", title: "All events" },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <SectionHeaderSkeleton />,
+};
+
+/** Reserves space for count, action and subtitle — the richest header shape. */
+export const LoadingFull: Story = {
+  render: () => <SectionHeaderSkeleton showCount showAction showSubtitle />,
+};
+
+/** Loading above loaded, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <SectionHeaderSkeleton showCount showAction />
+      <SectionHeader title="Tonight" count={12} action="See all" actionHref="/events" />
+    </div>
+  ),
+};

package/src/components/section-header.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * SectionHeader — the title row every rail, list and hub section opens with:
+ * title (+ optional count), an optional trailing action, and an optional
+ * subtitle line beneath.
+ *
+ * Renders a link when `actionHref` is given, a button when only `onAction`
+ * is, and no action at all otherwise — same href/onClick contract as
+ * `EventCard`. No app schema, no i18n, no app hooks.
+ */
+
+export type SectionHeaderLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: SectionHeaderLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type SectionHeaderProps = {
+  title: string;
+  /** Renders inline after the title in muted text, e.g. "12". */
+  count?: number;
+  /** Sub-text below the title row. */
+  subtitle?: string;
+  /** Trailing action label, e.g. "See all". */
+  action?: string;
+  actionHref?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<SectionHeaderLinkProps>;
+  onAction?: (mouseEvent: React.MouseEvent) => void;
+  /**
+   * Heading level for `title`, or `"p"` / `"div"` for a section opener that
+   * should NOT enter the document outline — e.g. an index whose own group
+   * headings are the page's semantic `h2`s, where a generic opener above them
+   * would dilute the headings that matter. Defaults to `"h2"`.
+   */
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+  className?: string;
+};
+
+const ACTION_CLASSES = cn(
+  "inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[14px] text-muted-foreground",
+  "transition-colors duration-150 hover:text-foreground motion-reduce:transition-none",
+  "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+);
+
+export function SectionHeader({
+  title,
+  count,
+  subtitle,
+  action,
+  actionHref,
+  linkComponent: LinkComponent = DefaultLink,
+  onAction,
+  as: Heading = "h2",
+  className,
+}: SectionHeaderProps) {
+  const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
+
+  return (
+    <div className={cn("flex flex-col mb-3.5", className)}>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-baseline">
+          <Heading className="truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]">
+            {title}
+          </Heading>
+          {count !== undefined && (
+            <span className="ml-0.5 shrink-0 text-[12px] text-muted-foreground">{count}</span>
+          )}
+        </div>
+
+        {action &&
+          (actionHref ? (
+            <LinkComponent href={actionHref} className={ACTION_CLASSES} onClick={onAction}>
+              {action}
+              {actionIcon}
+            </LinkComponent>
+          ) : onAction ? (
+            <button type="button" className={ACTION_CLASSES} onClick={onAction}>
+              {action}
+              {actionIcon}
+            </button>
+          ) : null)}
+      </div>
+
+      {subtitle && (
+        <p className="mt-0.5 text-[13px] text-muted-foreground md:text-[14px]">{subtitle}</p>
+      )}
+    </div>
+  );
+}
+
+export type SectionHeaderSkeletonProps = {
+  /** Shows the inline count placeholder, matching `SectionHeaderProps["count"]`. */
+  showCount?: boolean;
+  /** Shows the trailing action placeholder, matching `SectionHeaderProps["action"]`. */
+  showAction?: boolean;
+  /** Shows the subtitle placeholder, matching `SectionHeaderProps["subtitle"]`. */
+  showSubtitle?: boolean;
+  className?: string;
+};
+
+/** Mirrors `<SectionHeader>`'s geometry exactly so nothing shifts when data lands. */
+export function SectionHeaderSkeleton({
+  showCount,
+  showAction,
+  showSubtitle,
+  className,
+}: SectionHeaderSkeletonProps) {
+  return (
+    <div aria-hidden="true" className={cn("flex flex-col mb-3.5", className)}>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-baseline gap-1">
+          <Skeleton className="h-[17px] w-32 md:h-[18px]" />
+          {showCount && <Skeleton className="h-3 w-4" />}
+        </div>
+
+        {showAction && <Skeleton className="h-3.5 w-16" />}
+      </div>
+
+      {showSubtitle && <Skeleton className="mt-0.5 h-[13px] w-48 md:h-3.5" />}
+    </div>
+  );
+}

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/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/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",
       },