@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/switchboard-card/index.ts

@@ -0,0 +1,6 @@
+export {
+  SwitchboardCard,
+  switchboardCardVariants,
+  type SwitchboardCardProps,
+  type SwitchboardLightState,
+} from "./switchboard-card";

package/src/components/switchboard-card/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "switchboard-card",
+  title: "Switchboard Card",
+  description:
+    "A feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["switchboard-card.tsx"],
+  a11y:
+    "The lights are decorative and aria-hidden unless illustrationLabel describes them (a pattern spelling a word), " +
+    'in which case the grid is a single role="img". The heading level is set with headingAs. With href the whole ' +
+    "card is one link, or use asChild to render a router link or a button; the focus ring is shared. The flicker " +
+    "pauses off-screen and in hidden tabs, and under reduced motion it never starts: a still frame is shown instead.",
+});

package/src/components/switchboard-card/switchboard-card.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+// Ported from SmoothUI Switchboard Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type ReactNode,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A feature card whose illustration is a grid of tiny lights: either a fixed
+ * pattern (a word, a logo) lit steadily, or random lights that flicker
+ * off → medium → high → off on a timer.
+ *
+ * The flicker is decoration, so it follows the rules for decoration: it stops
+ * while the card is off-screen or the tab is hidden, and under reduced motion
+ * it never starts — the grid shows one still frame instead. That frame comes
+ * from a seeded generator rather than Math.random, so the server and the
+ * client render the same lights and hydration never disagrees.
+ *
+ * Light colours are the primary token mixed with transparency; unlit lights
+ * are the current text colour, so the inverted variant needs no extra rules.
+ */
+
+export type SwitchboardLightState = "off" | "medium" | "high";
+
+const switchboardCardVariants = cva(
+  cn(
+    "group/switchboard relative flex min-h-72 w-full flex-col overflow-hidden rounded-xl border p-6 text-start",
+    "transition-[border-color,background-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+    focusRing,
+  ),
+  {
+    variants: {
+      /** `inverted` is the source's "next" variant: a foreground gradient with background-coloured text. */
+      variant: {
+        default: "border-border bg-card text-card-foreground hover:border-border-strong",
+        inverted: cn(
+          "border-transparent text-background",
+          "bg-[linear-gradient(110deg,var(--color-foreground),color-mix(in_oklab,var(--color-foreground)_78%,var(--color-background)))]",
+        ),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const LIGHT: Record<SwitchboardLightState, string> = {
+  off: "size-0.5 bg-[color-mix(in_oklab,currentColor_35%,transparent)]",
+  medium: cn(
+    "size-0.5 bg-primary",
+    "shadow-[0_0_2px_1px_color-mix(in_oklab,var(--color-primary)_40%,transparent),0_0_4px_1.5px_color-mix(in_oklab,var(--color-primary)_25%,transparent)]",
+  ),
+  high: cn(
+    "size-[3px] bg-primary",
+    "shadow-[0_0_2px_1px_color-mix(in_oklab,var(--color-primary)_60%,transparent),0_0_4px_1.5px_color-mix(in_oklab,var(--color-primary)_35%,transparent),0_0_6px_2px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]",
+  ),
+};
+
+const NEXT: Record<SwitchboardLightState, SwitchboardLightState> = {
+  off: "medium",
+  medium: "high",
+  high: "off",
+};
+
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+
+function subscribeToMotionPreference(onChange: () => void) {
+  const query = window.matchMedia(REDUCED_MOTION);
+  query.addEventListener("change", onChange);
+  return () => {
+    query.removeEventListener("change", onChange);
+  };
+}
+
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(
+    subscribeToMotionPreference,
+    () => window.matchMedia(REDUCED_MOTION).matches,
+    () => false,
+  );
+}
+
+/** mulberry32: a tiny deterministic generator for the still frame. */
+function seeded(seed: number) {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Indices lit by a flat (row-major) or two-dimensional pattern of 0s and 1s. */
+function litIndices(
+  pattern: number[] | number[][],
+  columns: number,
+  rows: number,
+): Set<number> {
+  const lit = new Set<number>();
+  pattern.forEach((entry, index) => {
+    if (Array.isArray(entry)) {
+      if (index >= rows) return;
+      entry.forEach((cell, column) => {
+        if (cell === 1 && column < columns) lit.add(index * columns + column);
+      });
+    } else if (entry === 1 && index < columns * rows) {
+      lit.add(index);
+    }
+  });
+  return lit;
+}
+
+export interface SwitchboardCardProps
+  extends
+    Omit<ComponentPropsWithRef<"div">, "title">,
+    VariantProps<typeof switchboardCardVariants> {
+  /** The card's heading. */
+  heading: ReactNode;
+  /** Supporting text under the heading. */
+  description?: ReactNode;
+  /** The heading element, so the card fits the page's outline. */
+  headingAs?: "h2" | "h3" | "h4" | "p";
+  /** Lights per row. */
+  columns?: number;
+  /** Rows of lights. */
+  rows?: number;
+  /**
+   * Lights to hold on: a flat row-major array or a `[row][column]` grid, where
+   * 1 is lit. Takes precedence over `randomLights`.
+   */
+  gridPattern?: number[] | number[][];
+  /** Flicker random lights instead of showing a pattern. */
+  randomLights?: boolean;
+  /** Milliseconds between flicker steps. */
+  interval?: number;
+  /** Seed for the still frame shown under reduced motion. */
+  seed?: number;
+  /**
+   * Describes the illustration when it means something (a pattern spelling a
+   * word). Without it the lights are decorative and hidden from assistive technology.
+   */
+  illustrationLabel?: string;
+  /** Makes the whole card a link. */
+  href?: string;
+  /** Renders the child element (a router link, a button) as the card. */
+  asChild?: boolean;
+}
+
+/** A feature card illustrated by a grid of lights — a lit pattern, or random flicker. */
+export function SwitchboardCard({
+  className,
+  heading,
+  description,
+  headingAs: Heading = "h3",
+  columns = 18,
+  rows = 5,
+  gridPattern,
+  randomLights = false,
+  interval = 200,
+  seed = 1,
+  illustrationLabel,
+  href,
+  asChild = false,
+  variant = "default",
+  children,
+  ...props
+}: SwitchboardCardProps) {
+  const total = columns * rows;
+  const flickering = randomLights && !gridPattern;
+  const reduceMotion = usePrefersReducedMotion();
+  const grid = useRef<HTMLDivElement>(null);
+
+  const [flicker, setFlicker] = useState<SwitchboardLightState[]>(() =>
+    Array.from({ length: total }, () => "off"),
+  );
+
+  const lights = useMemo<SwitchboardLightState[]>(() => {
+    if (gridPattern) {
+      const lit = litIndices(gridPattern, columns, rows);
+      return Array.from({ length: total }, (_, index) => (lit.has(index) ? "high" : "off"));
+    }
+    if (flickering && reduceMotion) {
+      const random = seeded(seed);
+      return Array.from({ length: total }, () => (random() < 0.15 ? "high" : "off"));
+    }
+    if (flickering) {
+      return flicker.length === total ? flicker : Array.from({ length: total }, () => "off");
+    }
+    return Array.from({ length: total }, () => "off");
+  }, [gridPattern, columns, rows, total, flickering, reduceMotion, seed, flicker]);
+
+  useEffect(() => {
+    if (!flickering || reduceMotion) return;
+    const element = grid.current;
+    let onScreen = true;
+    const observer =
+      typeof IntersectionObserver === "undefined" || !element
+        ? undefined
+        : new IntersectionObserver(([entry]) => {
+            onScreen = entry?.isIntersecting ?? true;
+          });
+    if (element) observer?.observe(element);
+
+    const timer = setInterval(() => {
+      if (!onScreen || document.hidden) return;
+      setFlicker((previous) => {
+        const next: SwitchboardLightState[] =
+          previous.length === total
+            ? [...previous]
+            : Array.from({ length: total }, () => "off");
+        const steps = Math.max(1, Math.floor(total * 0.2));
+        for (let step = 0; step < steps; step++) {
+          const index = Math.floor(Math.random() * total);
+          next[index] = NEXT[next[index] ?? "off"];
+        }
+        return next;
+      });
+    }, interval);
+
+    return () => {
+      clearInterval(timer);
+      observer?.disconnect();
+    };
+  }, [flickering, reduceMotion, total, interval]);
+
+  // Every root takes a div's attributes; only the ref's element type differs,
+  // which TypeScript cannot reconcile across the union.
+  const Root = (asChild ? Slot.Root : href ? "a" : "div") as "div";
+  const link = asChild || !href ? {} : { href };
+
+  return (
+    <Root
+      data-slot="switchboard-card"
+      data-variant={variant}
+      {...link}
+      className={cn(switchboardCardVariants({ variant }), className)}
+      {...props}
+    >
+      {asChild ? <Slot.Slottable>{children}</Slot.Slottable> : null}
+      <div
+        data-slot="switchboard-card-illustration"
+        role={illustrationLabel ? "img" : undefined}
+        aria-label={illustrationLabel}
+        aria-hidden={illustrationLabel ? undefined : true}
+        className="flex flex-1 items-center"
+      >
+        <div
+          ref={grid}
+          data-slot="switchboard-card-lights"
+          data-animated={flickering && !reduceMotion ? "" : undefined}
+          className="grid h-20 w-full items-center justify-items-center"
+          style={{
+            gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${String(rows)}, minmax(0, 1fr))`,
+          }}
+        >
+          {lights.map((state, index) => (
+            <span
+              // Grid positions are fixed and never reorder, so the index is the identity.
+              key={`light-${String(index)}`}
+              data-slot="switchboard-card-light"
+              data-state={state}
+              className={cn(
+                "block rounded-full transition-[background-color,box-shadow,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+                LIGHT[state],
+              )}
+            />
+          ))}
+        </div>
+      </div>
+      <Heading
+        data-slot="switchboard-card-heading"
+        className={cn(
+          "mt-auto pt-4 text-xl leading-8 font-semibold tracking-tight",
+          variant === "inverted" && "text-2xl",
+        )}
+      >
+        {heading}
+      </Heading>
+      {description != null ? (
+        <p
+          data-slot="switchboard-card-description"
+          className={cn(
+            "mt-1 text-sm leading-relaxed",
+            variant === "inverted"
+              ? "max-w-[80%] text-base opacity-85"
+              : "text-muted-foreground",
+          )}
+        >
+          {description}
+        </p>
+      ) : null}
+      {asChild ? null : children}
+    </Root>
+  );
+}
+
+export { switchboardCardVariants };

package/src/components/tabs/index.ts

@@ -3,6 +3,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  tabsIndicatorVariants,
   tabsListVariants,
   tabsTriggerVariants,
   type TabsContentProps,

package/src/components/tabs/meta.ts

@@ -13,5 +13,7 @@ export const meta = defineMeta({
     "Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, " +
     "and only the active tab is in the tab sequence. Panels are focusable so keyboard users " +
     'reach their content directly. Use activationMode="manual" when showing a panel is ' +
-    "expensive, so arrowing past it does not load it.",
+    "expensive, so arrowing past it does not load it. The optional sliding indicator " +
+    '(indicator="slide") is aria-hidden decoration; selection is still conveyed by ' +
+    "aria-selected, and the slide stops under reduced motion.",
 });

package/src/components/tabs/tabs.tsx

@@ -1,8 +1,16 @@
 "use client";
 
+// Motion from SmoothUI AnimatedTabs (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
 import { cva, type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import type { ComponentPropsWithRef } from "react";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+} from "react";
 
 import { focusRing } from "@/lib/styles";
 import { cn } from "@/lib/utils";
@@ -19,6 +27,24 @@ export const Tabs = TabsPrimitive.Root;
 
 const tabsListVariants = cva("inline-flex items-center", {
   variants: {
+    /**
+     * `slide` draws the active tab's pill (or underline) once, on the list,
+     * and moves it between tabs. Opt-in: it takes over the active trigger's
+     * own background, which would silently discard any active styling a
+     * consumer had put on their triggers.
+     */
+    indicator: {
+      none: "",
+      slide: cn(
+        "relative",
+        // Only once the indicator has measured: before that — first paint,
+        // server render, no JavaScript — the triggers keep their own styling.
+        "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab]]:relative",
+        "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:border-transparent",
+        "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:bg-transparent",
+        "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:shadow-none",
+      ),
+    },
     variant: {
       /** Pill track. Reads as a segmented control. */
       solid: "gap-1 rounded-lg bg-muted p-1",
@@ -28,9 +54,29 @@ const tabsListVariants = cva("inline-flex items-center", {
   },
   defaultVariants: {
     variant: "solid",
+    indicator: "none",
   },
 });
 
+const tabsIndicatorVariants = cva(
+  cn(
+    "pointer-events-none absolute",
+    "transition-[transform,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+    "motion-reduce:transition-none",
+  ),
+  {
+    variants: {
+      variant: {
+        solid: "rounded-md bg-background shadow-xs",
+        underline: "bg-primary",
+      },
+    },
+    defaultVariants: {
+      variant: "solid",
+    },
+  },
+);
+
 const tabsTriggerVariants = cva(
   cn(
     "inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap",
@@ -65,13 +111,107 @@ export interface TabsListProps
     ComponentPropsWithRef<typeof TabsPrimitive.List>,
     VariantProps<typeof tabsListVariants> {}
 
-export function TabsList({ className, variant, ...props }: TabsListProps) {
+export function TabsList({ className, variant, indicator, children, ...props }: TabsListProps) {
+  const slide = indicator === "slide";
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       data-variant={variant ?? "solid"}
-      className={cn(tabsListVariants({ variant }), className)}
+      data-indicator={slide ? "slide" : undefined}
+      className={cn(tabsListVariants({ variant, indicator }), className)}
       {...props}
+    >
+      {slide ? <TabsIndicator variant={variant ?? "solid"} /> : null}
+      {children}
+    </TabsPrimitive.List>
+  );
+}
+
+type Box = Pick<CSSProperties, "width" | "height" | "transform">;
+
+/**
+ * Where the indicator should sit, from the active tab's offset box.
+ *
+ * Offsets are physical and relative to the list, so this is right in both
+ * reading directions and in a vertical list without knowing which it is.
+ */
+function measure(list: HTMLElement, variant: "solid" | "underline"): Box | null {
+  const active = list.querySelector<HTMLElement>('[role="tab"][data-state="active"]');
+  if (!active) return null;
+  let { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = active;
+  if (active.offsetParent !== list) {
+    // A trigger wrapped in its own positioned element (a tooltip anchor, say)
+    // is offset from that wrapper, not the list; fall back to the rects.
+    const from = list.getBoundingClientRect();
+    const to = active.getBoundingClientRect();
+    x = to.left - from.left - list.clientLeft;
+    y = to.top - from.top - list.clientTop;
+    width = to.width;
+    height = to.height;
+  }
+  if (variant === "underline") {
+    // The trigger's own 2px bottom border is where the bar goes.
+    return {
+      width,
+      height: 2,
+      transform: `translate(${String(x)}px, ${String(y + height - 2)}px)`,
+    };
+  }
+  return { width, height, transform: `translate(${String(x)}px, ${String(y)}px)` };
+}
+
+/**
+ * The sliding pill. Decorative — the active tab is announced by
+ * aria-selected — so it is hidden from assistive technology.
+ */
+function TabsIndicator({ variant }: { variant: "solid" | "underline" }) {
+  const [box, setBox] = useState<Box | null>(null);
+  const node = useRef<HTMLSpanElement | null>(null);
+
+  const update = useCallback(() => {
+    const list = node.current?.parentElement;
+    if (!list) return;
+    const next = measure(list, variant);
+    setBox((previous) =>
+      previous?.transform === next?.transform &&
+      previous?.width === next?.width &&
+      previous?.height === next?.height
+        ? previous
+        : next,
+    );
+  }, [variant]);
+
+  useLayoutEffect(() => {
+    const list = node.current?.parentElement;
+    if (!list) return;
+    update();
+    // Selection changes arrive as data-state flips on the triggers; size
+    // changes (fonts loading, labels changing, the list reflowing) do not.
+    const mutations = new MutationObserver(update);
+    mutations.observe(list, {
+      attributes: true,
+      attributeFilter: ["data-state"],
+      subtree: true,
+    });
+    const resizes = new ResizeObserver(update);
+    resizes.observe(list);
+    for (const tab of list.querySelectorAll('[role="tab"]')) resizes.observe(tab);
+    return () => {
+      mutations.disconnect();
+      resizes.disconnect();
+    };
+  }, [update]);
+
+  return (
+    <span
+      ref={node}
+      aria-hidden="true"
+      data-slot="tabs-indicator"
+      data-ready={box ? "" : undefined}
+      className={cn(tabsIndicatorVariants({ variant }), !box && "hidden")}
+      // Anchored to the physical top-left because the offsets it is moved by
+      // are physical too.
+      style={box ? { top: 0, left: 0, ...box } : undefined}
     />
   );
 }
@@ -103,4 +243,4 @@ export function TabsContent({ className, ...props }: TabsContentProps) {
   );
 }
 
-export { tabsListVariants, tabsTriggerVariants };
+export { tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants };

package/src/components/tags-input/meta.ts

@@ -19,5 +19,6 @@ export const meta = defineMeta({
     "refusals all reach a polite live region, because a refusal that looks like nothing happening " +
     "is the failure this component exists to prevent. Remove buttons sit in the natural tab order " +
     "rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every " +
-    "assistive technology already understands.",
+    "assistive technology already understands." +
+    " With animateExit, a removed token lingers only as an aria-hidden, inert copy while it animates out.",
 });