@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/poster-wall.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * PosterWall — the hub's full-bleed masthead: a dark tiled photo grid behind a
+ * sweeping light and a veil, with the caller's content laid over it.
+ *
+ * The wall is deliberately dark and un-themed (fixed dark tokens, not
+ * `background`/`foreground`) in both light and dark mode — it's a photo
+ * backdrop, the same reasoning `EventCard`'s black overlay pills use over a
+ * poster image, not a themed surface.
+ *
+ * `children` is a slot: PosterWall only owns the tiles/light/veil chrome and
+ * the container's size, alignment and padding for the given `variant`. All
+ * overlay typography belongs to the caller.
+ *
+ * The sweep is a genuine `@keyframes` animation (not Framer Motion) because
+ * its exact timing is part of the design spec and it needs to keep running
+ * indefinitely at zero React cost — the keyframes are scoped to this file via
+ * a `<style>` tag since editing the DS's global stylesheet is out of scope
+ * for this component.
+ */
+
+const POSTER_WALL_DESKTOP_TILE_COUNT = 48;
+const POSTER_WALL_COMPACT_TILE_COUNT = 36;
+const POSTER_WALL_SWEEP_KEYFRAMES_ID = "ds-poster-wall-sweep-keyframes";
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = () => setReduced(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  return reduced;
+}
+
+function useInViewport<T extends Element>(): [React.RefObject<T | null>, boolean] {
+  const ref = React.useRef<T | null>(null);
+  const [inView, setInView] = React.useState(true);
+
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      threshold: 0,
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return [ref, inView];
+}
+
+export type PosterWallTile = {
+  src?: string;
+};
+
+export type PosterWallProps = {
+  /** Background tiles. Desktop renders 48, `compact` renders 36 — shorter arrays are padded with placeholders. */
+  tiles?: PosterWallTile[];
+  /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
+  variant?: "default" | "compact";
+  /** The overlay content — fully caller-composed. */
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export function PosterWall({ tiles, variant = "default", children, className }: PosterWallProps) {
+  const isCompact = variant === "compact";
+  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const slots = Array.from({ length: tileCount }, (_, index): PosterWallTile => tiles?.[index] ?? {});
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [wallRef, inView] = useInViewport<HTMLDivElement>();
+  const isSweepPaused = prefersReducedMotion || !inView;
+
+  return (
+    <div
+      ref={wallRef}
+      className={cn(
+        "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
+        isCompact ? "h-[330px]" : "h-[420px]",
+        className
+      )}
+    >
+      <style>{`
+        @keyframes ${POSTER_WALL_SWEEP_KEYFRAMES_ID} {
+          0% { transform: translateX(-30%); }
+          100% { transform: translateX(30%); }
+        }
+      `}</style>
+
+      <div
+        className={cn(
+          "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+          isCompact ? "grid-cols-6" : "grid-cols-12"
+        )}
+        aria-hidden
+      >
+        {slots.map((tile, index) =>
+          tile.src ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              key={index}
+              src={tile.src}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div
+              key={index}
+              className="h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]"
+            />
+          )
+        )}
+      </div>
+
+      {/* Reduced motion and off-screen both resolve to "paused" via JS, not a
+          `motion-reduce:` class — the animation properties are inline styles
+          (so `animation-duration` can stay a plain string), and an inline
+          style always outranks a class on the same property. */}
+      <div
+        className="absolute -inset-[20%]"
+        style={{
+          background:
+            "radial-gradient(circle at 30% 50%, oklch(1 0 0 / 0.34) 0%, transparent 42%)",
+          animationName: POSTER_WALL_SWEEP_KEYFRAMES_ID,
+          animationDuration: "18s",
+          animationTimingFunction: "linear",
+          animationIterationCount: "infinite",
+          animationPlayState: isSweepPaused ? "paused" : "running",
+        }}
+        aria-hidden
+      />
+
+      <div
+        className="absolute inset-0"
+        style={{
+          background: isCompact
+            ? "linear-gradient(to top, oklch(0.2 0.01 60 / 0.93) 0%, oklch(0.2 0.01 60 / 0.7) 55%, oklch(0.2 0.01 60 / 0.35) 100%)"
+            : "linear-gradient(90deg, oklch(0.2 0.01 60 / 0.88) 0%, oklch(0.2 0.01 60 / 0.55) 55%, oklch(0.2 0.01 60 / 0.2) 100%)",
+        }}
+        aria-hidden
+      />
+
+      <div
+        className={cn(
+          "relative flex h-full min-w-0 flex-col text-white",
+          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type PosterWallSkeletonProps = {
+  /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
+  variant?: "default" | "compact";
+  className?: string;
+};
+
+/** The tile grid at rest — the sweeping light never renders in the loading state. */
+export function PosterWallSkeleton({ variant = "default", className }: PosterWallSkeletonProps) {
+  const isCompact = variant === "compact";
+  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
+        isCompact ? "h-[330px]" : "h-[420px]",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+          isCompact ? "grid-cols-6" : "grid-cols-12"
+        )}
+      >
+        {Array.from({ length: tileCount }, (_, index) => (
+          <Skeleton key={index} className="h-full w-full rounded-none bg-white/10" />
+        ))}
+      </div>
+
+      <div
+        className="absolute inset-0"
+        style={{
+          background: isCompact
+            ? "linear-gradient(to top, oklch(0.2 0.01 60 / 0.93) 0%, oklch(0.2 0.01 60 / 0.7) 55%, oklch(0.2 0.01 60 / 0.35) 100%)"
+            : "linear-gradient(90deg, oklch(0.2 0.01 60 / 0.88) 0%, oklch(0.2 0.01 60 / 0.55) 55%, oklch(0.2 0.01 60 / 0.2) 100%)",
+        }}
+      />
+
+      <div
+        className={cn(
+          "relative flex h-full min-w-0 flex-col",
+          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+        )}
+      >
+        <Skeleton className={cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52")} />
+        <Skeleton className={cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")} />
+      </div>
+    </div>
+  );
+}

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/rating.stories.tsx

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

package/src/components/searchable-select.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
 } satisfies Meta<typeof SearchableSelect>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SearchableSelect>;
 
 const frameworks = [
   { value: "next", label: "Next.js", description: "The React Framework" },

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>
+  );
+}