@bearmenu/ui 0.8.4 → 0.8.6

package/src/components/facet-group.tsx

@@ -0,0 +1,352 @@
+"use client";
+
+import { type ComponentPropsWithoutRef, useId, useState } from "react";
+import { Check, ChevronDown, type LucideIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * FacetGroup — one filter group in the events sidebar or the mobile filter sheet.
+ *
+ * REAL INPUTS, NOT STYLED DIVS: the DS's `<Checkbox>` (`checkbox.tsx`) is
+ * a Radix primitive whose check glyph is fixed at 14px inside a 20px box with
+ * no prop to shrink either — this design's 16px box with an 11px glyph can't
+ * be reached by styling it from the outside, and this file isn't allowed to
+ * edit `checkbox.tsx` itself. So each row is a visually-hidden native
+ * `<input>` — real semantics, real keyboard/Enter/Space/arrow behaviour, a
+ * real accessibility-tree checked state — paired with a decorative box that
+ * carries the visual design. `peer`/`peer-focus-visible` puts a visible focus
+ * ring on the decorative box when the hidden input has focus.
+ *
+ * SELECTION MODE IS PART OF THE CONTRACT: `selection="single"` renders real
+ * radios sharing one `name`, so the browser and the accessibility tree both
+ * know only one value can be live. Rendering checkboxes for a single-valued
+ * facet (the events list's WHEN scope, for one) makes the control lie: ticking
+ * one option silently unticks another, and a screen reader announces N
+ * independent checkboxes one of which is inexplicably always checked.
+ *
+ * The group itself is a `<fieldset>`/`<legend>`, the correct native pairing
+ * for "here is a caption for this set of options" — screen readers announce
+ * the group title once per option instead of the title being lost as a bare
+ * visual label.
+ */
+
+export type FacetOption = {
+  id: string;
+  label: string;
+  count: number;
+  checked?: boolean;
+};
+
+export type FacetGroupSelection = "multiple" | "single";
+
+/**
+ * Row density. `comfortable` is the default because this component also renders
+ * inside the mobile filter sheet, where a row has to clear the 44px WCAG 2.5.5
+ * target floor. `compact` is opt-in, for a dense pointer-driven sidebar.
+ */
+export type FacetGroupSize = "compact" | "comfortable";
+
+/**
+ * Same 16px box, same focus ring, same count column in both densities — only
+ * the row's own box grows.
+ *
+ * BOTH carry the hover treatment. `comfortable` shipped without one on the
+ * reasoning that it is the touch density, but the two are unrelated: the size
+ * exists to meet the 44px target floor, and a pointer can land on a row at any
+ * size. A 44px hit area that does not light up reads as disabled — worse than
+ * the 20px row it replaced, because it looks like a control that is present but
+ * switched off.
+ */
+const ROW_SIZE: Record<FacetGroupSize, string> = {
+  comfortable: "-mx-2 min-h-11 rounded-lg px-2",
+  compact: "-mx-2 rounded-lg px-2 py-1",
+};
+
+/**
+ * Gap BETWEEN rows, per density — not one shared value.
+ *
+ * `comfortable` rows are 44px for the touch floor, so 9px between them is a
+ * reasonable rhythm. `compact` rows are ~26px, and the same 9px made the gap a
+ * third of the row again: a 16px control and a 13.5px label adrift in a pitch
+ * far taller than either, which reads as a list that has lost its grouping.
+ * 2px keeps the rows distinct without spacing them into separate objects.
+ */
+const ROW_GAP: Record<FacetGroupSize, string> = {
+  comfortable: "gap-[9px]",
+  compact: "gap-[2px]",
+};
+
+// `onToggle` is a native DOM handler on every element in React 19's typings —
+// omit it so this component's own `(id, checked)` callback isn't widened into a
+// union with `ToggleEvent`.
+export type FacetGroupProps = Omit<
+  ComponentPropsWithoutRef<"fieldset">,
+  "title" | "children" | "onToggle"
+> & {
+  title: string;
+  /** Decorative glyph in the legend, before the title. The title stays the accessible name. */
+  icon?: LucideIcon;
+  options: FacetOption[];
+  /**
+   * `"multiple"` (default) renders checkboxes. `"single"` renders radios sharing
+   * one `name` — use it for any facet whose model holds exactly one value.
+   */
+  selection?: FacetGroupSelection;
+  /**
+   * The radio group's shared `name` when `selection="single"`. Optional: a
+   * per-instance name is derived from `useId()` when omitted, so radios can
+   * never leak into a neighbouring group. Pass one when the fieldset is
+   * submitted as part of a native form and the name has to be stable.
+   */
+  name?: string;
+  size?: FacetGroupSize;
+  /**
+   * Turns the legend into a disclosure toggle for this group's options.
+   *
+   * Off by default: a sidebar of permanently-open groups is the right default
+   * for a facet panel, because seeing which dimensions exist is most of what
+   * the panel is for. Turn it on where several groups are long enough that
+   * scanning them costs more than opening one — the events list's five, with
+   * venues running to dozens of options.
+   */
+  collapsible?: boolean;
+  /** Only meaningful with `collapsible`. Groups open by default. */
+  defaultOpen?: boolean;
+  /** Fires with `(id, true)` for the newly picked radio under `selection="single"`. */
+  onToggle?: (id: string, checked: boolean) => void;
+  /** e.g. "Show all". Omit to hide the trailing action. */
+  moreLabel?: string;
+  onMore?: () => void;
+  className?: string;
+};
+
+export function FacetGroup({
+  title,
+  icon: Icon,
+  options,
+  selection = "multiple",
+  name,
+  size = "comfortable",
+  collapsible = false,
+  defaultOpen = true,
+  onToggle,
+  moreLabel,
+  onMore,
+  className,
+  ...rest
+}: FacetGroupProps) {
+  const isSingle = selection === "single";
+  const regionId = useId();
+  // A non-collapsible group is permanently open — the state exists but the
+  // toggle that would change it is never rendered.
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const open = collapsible ? isOpen : true;
+  const setOpen = setIsOpen;
+  // Never let an unnamed radio group fall into the page-wide anonymous group.
+  const fallbackName = useId();
+  const groupName = name ?? fallbackName;
+
+  return (
+    // NO SEPARATOR OF ITS OWN. This drew `<Separator className="absolute
+    // inset-x-0 top-0" />`, which looked like a rule above each group and was
+    // not: a `<legend>` is laid out in the fieldset's border box, so the
+    // padding box — and therefore `top-0` — begins BELOW it. The rule landed
+    // between a group's own label and its own options, cutting each group in
+    // half rather than dividing one from the next, and the first group got one
+    // above nothing.
+    //
+    // A divider between siblings belongs to whatever owns the order, and that
+    // is the caller — it alone knows which group is first and which groups
+    // rendered at all. So the caller interleaves `<Separator />` between
+    // groups; this component draws none.
+    <fieldset className={cn("m-0 border-0 p-0 py-3", className)} {...rest}>
+      <legend
+        className={cn(
+          "block w-full p-0 text-[11.5px] font-extrabold tracking-[0.1em] text-muted-foreground uppercase",
+          collapsible ? "mb-0" : "mb-[11px]"
+        )}
+      >
+        {collapsible ? (
+          // The legend becomes the toggle. It stays inside `<legend>` so the
+          // fieldset keeps its accessible name and screen readers still
+          // announce the group per option; `aria-expanded` and the region id
+          // carry the disclosure on top of that rather than replacing it.
+          <button
+            type="button"
+            onClick={() => setOpen((previous) => !previous)}
+            aria-expanded={open}
+            aria-controls={regionId}
+            className={cn(
+              "-mx-2 flex w-[calc(100%+1rem)] cursor-pointer items-center gap-1.5 rounded-lg px-2 py-1.5 text-left uppercase",
+              "transition-[margin,background-color] duration-200 ease-out hover:bg-foreground/5 motion-reduce:transition-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              // The 11px exists to separate this label from ITS OPTIONS, so a
+              // collapsed group must not keep it: with the panel at zero
+              // height it becomes dead space below the label, and the group
+              // reads as `12px | label | 23px` between the caller's dividers.
+              // That 11px asymmetry is why an evenly-spaced stack of collapsed
+              // groups looked like the rules were mis-centred — they were
+              // centred, the labels were not. Transitioned alongside the panel
+              // so the two move as one gesture rather than the margin snapping.
+              open ? "mb-[11px]" : "mb-0"
+            )}
+          >
+            {Icon && <Icon aria-hidden className="size-3.5 shrink-0" strokeWidth={2.25} />}
+            {title}
+            <ChevronDown
+              aria-hidden
+              className={cn(
+                "ml-auto size-3.5 shrink-0 transition-transform duration-150 motion-reduce:transition-none",
+                open ? "rotate-180" : "rotate-0"
+              )}
+            />
+          </button>
+        ) : (
+          <span className="flex items-center gap-1.5">
+            {Icon && <Icon aria-hidden className="size-3.5 shrink-0" strokeWidth={2.25} />}
+            {title}
+          </span>
+        )}
+      </legend>
+
+      {/* COLLAPSE ANIMATES VIA `grid-template-rows`, not `hidden`.
+          `hidden` is a binary — the options vanished on the same frame the
+          chevron began rotating, so the one part of the disclosure that moved
+          was the arrow and the panel it described just blinked out. Height
+          cannot be transitioned to or from `auto`, and this component cannot
+          measure its own content without a layout effect, but a grid track
+          CAN interpolate `0fr` -> `1fr` with the row sized by its content. So
+          the fieldset owns a single-track grid and the inner wrapper clips.
+
+          The inner `overflow-hidden` is what makes it work AND what makes it
+          safe: without it the options would spill out of a zero-height track
+          rather than being cut off by it.
+
+          `inert` + `aria-hidden` when closed, because the panel now stays in
+          the DOM at zero height rather than being removed by `hidden` —
+          without them every collapsed checkbox would still be tabbable and
+          still be announced, which is worse than the instant collapse this
+          replaces. `inert` alone is the correct primitive and takes the
+          subtree out of the a11y tree per spec, but no test environment
+          models that yet, so `aria-hidden` states the same thing in a form
+          the suite can actually assert. They are complementary here rather
+          than redundant: `aria-hidden` on focusable content is only safe
+          BECAUSE `inert` has already made it unfocusable. */}
+      <div
+        className={cn(
+          "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        )}
+      >
+        <div className="overflow-hidden">
+          <div
+            id={regionId}
+            inert={!open}
+            aria-hidden={!open || undefined}
+            className={cn("flex flex-col", ROW_GAP[size])}
+          >
+        {options.map((option) => {
+          const checked = !!option.checked;
+
+          return (
+            <label
+              key={option.id}
+              className={cn(
+                "flex cursor-pointer items-center gap-[9px] text-[13.5px] select-none",
+                "transition-colors duration-150 hover:bg-muted/60 motion-reduce:transition-none",
+                ROW_SIZE[size]
+              )}
+            >
+              <input
+                type={isSingle ? "radio" : "checkbox"}
+                name={isSingle ? groupName : undefined}
+                className="peer sr-only"
+                checked={checked}
+                onChange={(event) => onToggle?.(option.id, event.target.checked)}
+              />
+              <span
+                aria-hidden
+                className={cn(
+                  "flex h-4 w-4 shrink-0 items-center justify-center border-[1.5px] transition-colors duration-150 motion-reduce:transition-none",
+                  isSingle ? "rounded-full" : "rounded-[5px]",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+                  checked ? "border-primary bg-primary" : "border-border bg-background"
+                )}
+              >
+                {checked &&
+                  (isSingle ? (
+                    <span className="size-[7px] rounded-full bg-primary-foreground" />
+                  ) : (
+                    <Check className="h-[11px] w-[11px] text-primary-foreground" strokeWidth={3} />
+                  ))}
+              </span>
+              <span
+                title={option.label}
+                className={cn(
+                  "min-w-0 truncate",
+                  checked ? "font-bold text-primary" : "font-normal text-foreground"
+                )}
+              >
+                {option.label}
+              </span>
+              <span className="ml-auto shrink-0 font-mono text-[11.5px] tabular-nums text-muted-foreground">
+                {option.count}
+              </span>
+            </label>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {moreLabel && open && (
+        <button
+          type="button"
+          onClick={onMore}
+          className="cursor-pointer pt-[11px] text-[12.5px] font-bold text-primary 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 focus-visible:rounded-sm"
+        >
+          {moreLabel}
+        </button>
+      )}
+    </fieldset>
+  );
+}
+
+export type FacetGroupSkeletonProps = {
+  /** How many option rows to draw — match the expected/last-known option count. */
+  optionCount?: number;
+  /** Shows the trailing "more" placeholder, matching `FacetGroupProps["moreLabel"]`. */
+  showMore?: boolean;
+  /** Must match the `<FacetGroup>` it stands in for, or rows shift when data lands. */
+  size?: FacetGroupSize;
+  className?: string;
+};
+
+/** Mirrors `<FacetGroup>`'s geometry exactly so nothing shifts when data lands. */
+export function FacetGroupSkeleton({
+  optionCount = 4,
+  showMore,
+  size = "comfortable",
+  className,
+}: FacetGroupSkeletonProps) {
+  return (
+    // Matches the live group: no rule of its own, `py-3`, and the row gap keyed
+    // to the same density — or the panel shifts on load by the difference.
+    <div aria-hidden="true" className={cn("py-3", className)}>
+      <Skeleton className="mb-[11px] h-3 w-20" />
+
+      <div className={cn("flex flex-col", ROW_GAP[size])}>
+        {Array.from({ length: optionCount }).map((_, index) => (
+          <div key={index} className={cn("flex items-center gap-[9px]", ROW_SIZE[size])}>
+            <Skeleton className="h-4 w-4 rounded-[5px]" />
+            <Skeleton className="h-3.5 w-24" />
+            <Skeleton className="ml-auto h-3 w-5" />
+          </div>
+        ))}
+      </div>
+
+      {showMore && <Skeleton className="mt-[11px] h-3 w-16" />}
+    </div>
+  );
+}

package/src/components/featured-rail-item.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Flame } from "lucide-react";
+import { FeaturedRailItem, FeaturedRailItemSkeleton } from "./featured-rail-item";
+
+// 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 FeaturedRailItem> = {
+  title: "Events/FeaturedRailItem",
+  component: FeaturedRailItem,
+  tags: ["autodocs"],
+  args: {
+    title: "Psihotrop — From the Beginning to Infinity",
+    venue: "Atelier Café",
+    note: "Sat 5 · 20:00",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The card inside the featured rail — 196px on desktop, 150px on mobile. Sits inside `<DriftRail>` in the design, but the motion belongs to the rail, not the card: this component only carries the interactive hover lift shared by every DS card.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FeaturedRailItem>;
+
+export const Default: Story = {};
+
+export const WithTag: Story = {
+  args: {
+    tagLabel: (
+      <>
+        <Flame className="h-3 w-3" aria-hidden />
+        Busiest
+      </>
+    ),
+  },
+};
+
+export const Linked: Story = {
+  args: { href: "/events/psihotrop" },
+};
+
+/**
+ * The title WRAPS to as many lines as it needs — it used to truncate to one,
+ * which is the defect this story now guards against. `venue` and `note` still
+ * truncate: they are secondary lines, and letting every line wrap would leave a
+ * rail of cards with no shared baseline at all.
+ */
+export const LongTitle: Story = {
+  args: {
+    title: "The Longest Possible Event Title, Which Wraps Rather Than Losing Its Second Half",
+    venue: "A Very Long Venue Name Down by the River",
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <FeaturedRailItemSkeleton />,
+};
+
+export const Rail: Story = {
+  render: () => (
+    <div className="flex max-w-[420px] gap-3.5 overflow-x-auto pb-1">
+      {["Warehouse Rave", "Jazz on the Rooftop", "Open Mic Night", "Street Food Market"].map(
+        (title) => (
+          <FeaturedRailItem
+            key={title}
+            title={title}
+            venue="Atelier Café"
+            note="Sat 5 · 20:00"
+            tagLabel={
+              <>
+                <Flame className="h-3 w-3" aria-hidden />
+                Busiest
+              </>
+            }
+            href={`/events/${title.toLowerCase().replace(/\s+/g, "-")}`}
+          />
+        )
+      )}
+    </div>
+  ),
+};

package/src/components/featured-rail-item.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Skeleton } from "./skeleton";
+
+/**
+ * FeaturedRailItem — the card inside the featured rail (a `<DriftRail>` or a
+ * plain scroll snap row). Narrower than `<EventCard>`'s 4:3 base card and
+ * built for a single overlay pill rather than the badge-plus-fee pair, so it
+ * stays legible at 150–196px wide.
+ *
+ * The only motion here is the interactive hover/press lift shared by every DS
+ * card (see `card.tsx`) — the source design's continuous drift animation
+ * belongs to the rail this card sits inside, not the card itself.
+ */
+export type FeaturedRailItemLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: FeaturedRailItemLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type FeaturedRailItemProps = {
+  title: string;
+  venue: string;
+  /** Caller-composed day/time line, e.g. "Sat 5 · 20:00". */
+  note: string;
+  /** Top-left overlay pill. Include its icon. */
+  tagLabel?: React.ReactNode;
+  posterUrl?: string;
+  href?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<FeaturedRailItemLinkProps>;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  className?: string;
+  /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: ReactNode;
+};
+
+export function FeaturedRailItem({
+  title,
+  venue,
+  note,
+  tagLabel,
+  posterUrl,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  fallback = <EventPosterFallback />,
+}: FeaturedRailItemProps) {
+  const [imgError, setImgError] = useState(false);
+  const showPoster = !!posterUrl && !imgError;
+
+  const body = (
+    <>
+      <div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted">
+        {showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={posterUrl}
+            alt={title}
+            title={title}
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          fallback
+        )}
+
+        {tagLabel && (
+          <div className="absolute inset-x-2 top-2 flex items-start">
+            <span className="inline-flex h-6 max-w-full items-center gap-1 rounded-full bg-black/55 px-2 text-[11px] font-semibold text-white">
+              {tagLabel}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div className="px-0.5 pt-2.5">
+        {/* The title wraps in full at this narrow width — it is the one line
+            that has to survive intact. `venue` and `note` keep their
+            `truncate`: they are secondary, and a rail of cards whose every
+            line wraps would have no shared baseline at all. */}
+        <h3 className="text-[13.5px] font-bold leading-[1.3]">{title}</h3>
+        <div className="mt-0.5 truncate text-xs text-muted-foreground">{venue}</div>
+        <div className="mt-[3px] truncate text-[11.5px] font-bold text-primary">{note}</div>
+      </div>
+    </>
+  );
+
+  const isInteractive = !!(href || onClick);
+
+  const rootClasses = cn(
+    "flex w-[150px] shrink-0 flex-col text-left sm:w-[196px]",
+    isInteractive &&
+      cn(
+        "cursor-pointer rounded-xl transition-transform duration-200",
+        "hover:-translate-y-0.5 active:scale-[0.99]",
+        "motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      ),
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent href={href} className={rootClasses} onClick={onClick}>
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" className={rootClasses} onClick={onClick}>
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+}
+
+export type FeaturedRailItemSkeletonProps = {
+  className?: string;
+};
+
+export function FeaturedRailItemSkeleton({ className }: FeaturedRailItemSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("flex w-[150px] shrink-0 flex-col sm:w-[196px]", className)}
+    >
+      <Skeleton className="aspect-[4/3] w-full rounded-xl" />
+
+      <div className="px-0.5 pt-2.5">
+        <Skeleton className="h-[13.5px] w-4/5" />
+        <Skeleton className="mt-1 h-3 w-3/5" />
+        <Skeleton className="mt-1.5 h-[11.5px] w-2/5" />
+      </div>
+    </div>
+  );
+}