@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/tick-progress/tick-progress.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+// Ported from bencho Progress ticks (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  type PointerEvent,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A percentage drawn as a row of waveform ticks, with a big figure above.
+ *
+ * Two modes, because the source's semantics were missing and "is this an
+ * input?" has two honest answers:
+ *
+ * - Display (default): a `progressbar`. Nothing is focusable or interactive.
+ * - `interactive`: a `slider`. Hovering previews a value — the ticks fill to the
+ *   pointer, the tick under it turns green, and the signed difference appears
+ *   beside the figure — and a click commits it. The source never committed;
+ *   the spec recommends it, and a preview that can never be kept is a tease.
+ *   Arrow keys step one tick, PageUp/PageDown five, Home/End jump to the ends.
+ *   Keys commit at once, as the APG slider pattern requires: a slider whose
+ *   aria-valuenow moved without committing would report a value it does not have.
+ */
+
+const tickProgressVariants = cva(
+  "flex w-[21.25rem] max-w-full flex-col rounded-[1.25rem] bg-card p-3 text-card-foreground",
+  {
+    variants: {
+      /** A hairline ring — the source's Stroke switch. */
+      stroke: {
+        true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+        false: "",
+      },
+    },
+    defaultVariants: { stroke: false },
+  },
+);
+
+/** The default waveform: a smooth, deterministic swell between ~35% and ~92%. */
+function waveform(count: number): number[] {
+  return Array.from({ length: count }, (_, index) => {
+    const t = index / Math.max(1, count - 1);
+    const height = 64 + 26 * Math.sin(t * 5.2 + 0.55) + 6 * Math.sin(t * 13);
+    return Math.round(Math.min(92, Math.max(34, height)));
+  });
+}
+
+function clamp(value: number) {
+  return Math.min(100, Math.max(0, value));
+}
+
+export interface TickProgressProps
+  extends
+    Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">,
+    VariantProps<typeof tickProgressVariants> {
+  /** Controlled value, 0–100. */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called when a value is committed (click or key). */
+  onValueChange?: (value: number) => void;
+  /** Number of ticks. The value snaps to them. */
+  ticks?: number;
+  /** Tick heights in percent, one per tick. Defaults to a gentle waveform. */
+  heights?: number[];
+  /** A slider you can hover, click and key through, rather than a progress bar. */
+  interactive?: boolean;
+  /** Hide the big figure. */
+  hideValue?: boolean;
+  disabled?: boolean;
+}
+
+/** A percentage as a row of waveform ticks, with hover-preview and commit when interactive. */
+export function TickProgress({
+  className,
+  stroke,
+  value: valueProp,
+  defaultValue = 0,
+  onValueChange,
+  ticks = 34,
+  heights,
+  interactive = false,
+  hideValue = false,
+  disabled = false,
+  onKeyDown,
+  onPointerMove,
+  onPointerLeave,
+  onClick,
+  ...props
+}: TickProgressProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const committed = clamp(valueProp ?? uncontrolled);
+  const [preview, setPreview] = useState<number | null>(null);
+  const rowRef = useRef<HTMLDivElement | null>(null);
+  const active = interactive && !disabled;
+
+  const count = Math.max(1, Math.round(ticks));
+  const pattern = heights ?? waveform(count);
+  const toValue = (on: number) => Math.round((on / count) * 100);
+  const toTicks = (value: number) => Math.round((value / 100) * count);
+
+  const shown = preview ?? committed;
+  const onCount = toTicks(shown);
+  const delta = preview === null ? 0 : preview - committed;
+
+  function commit(next: number) {
+    const value = clamp(next);
+    if (valueProp === undefined) setUncontrolled(value);
+    if (value !== committed) onValueChange?.(value);
+  }
+
+  /** The tick under the pointer, counted from the inline start. */
+  function tickAt(clientX: number): number | null {
+    const row = rowRef.current;
+    if (!row) return null;
+    const rect = row.getBoundingClientRect();
+    if (rect.width <= 0) return null;
+    const rtl = getComputedStyle(row).direction === "rtl";
+    const fraction = (rtl ? rect.right - clientX : clientX - rect.left) / rect.width;
+    return Math.min(count - 1, Math.max(0, Math.floor(fraction * count)));
+  }
+
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
+    onPointerMove?.(event);
+    if (!active) return;
+    const index = tickAt(event.clientX);
+    if (index !== null) setPreview(toValue(index + 1));
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    onKeyDown?.(event);
+    if (!active || event.defaultPrevented) return;
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const on = toTicks(committed);
+    const steps: Record<string, number> = {
+      ArrowUp: 1,
+      ArrowDown: -1,
+      ArrowRight: rtl ? -1 : 1,
+      ArrowLeft: rtl ? 1 : -1,
+      PageUp: 5,
+      PageDown: -5,
+    };
+    let next: number | null = null;
+    if (event.key in steps)
+      next = toValue(Math.min(count, Math.max(0, on + (steps[event.key] ?? 0))));
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = 100;
+    if (next === null) return;
+    event.preventDefault();
+    setPreview(null);
+    commit(next);
+  }
+
+  return (
+    <div
+      data-slot="tick-progress"
+      data-interactive={interactive || undefined}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={committed}
+      aria-valuetext={`${String(committed)}%`}
+      role={interactive ? "slider" : "progressbar"}
+      tabIndex={interactive ? (disabled ? -1 : 0) : undefined}
+      aria-orientation={interactive ? "horizontal" : undefined}
+      aria-disabled={(interactive && disabled) || undefined}
+      className={cn(
+        tickProgressVariants({ stroke }),
+        interactive && focusRing,
+        disabled && "opacity-55",
+        className,
+      )}
+      onKeyDown={handleKeyDown}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={(event) => {
+        onPointerLeave?.(event);
+        setPreview(null);
+      }}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!active) return;
+        const index = tickAt(event.clientX);
+        if (index === null) return;
+        setPreview(null);
+        commit(toValue(index + 1));
+      }}
+      {...props}
+    >
+      {hideValue ? null : (
+        <div
+          aria-hidden="true"
+          data-slot="tick-progress-head"
+          className="mb-5 flex items-baseline gap-2.5"
+        >
+          <span
+            data-slot="tick-progress-value"
+            className="text-[2.5rem] leading-none font-normal tracking-[-0.035em] tabular-nums"
+          >
+            {shown}
+            <i className="ms-0.5 text-[1.1875rem] not-italic opacity-35">%</i>
+          </span>
+          <span
+            data-slot="tick-progress-delta"
+            data-show={delta !== 0 || undefined}
+            data-up={delta > 0 || undefined}
+            className={cn(
+              "text-xs text-muted-foreground tabular-nums opacity-0 data-[show]:opacity-100 data-[up]:text-success",
+              "transition-opacity duration-[var(--duration-fast)]",
+            )}
+          >
+            {delta > 0 ? `+${String(delta)}` : delta < 0 ? `−${String(-delta)}` : ""}
+          </span>
+        </div>
+      )}
+      <div
+        ref={rowRef}
+        aria-hidden="true"
+        data-slot="tick-progress-ticks"
+        className={cn(
+          "flex h-[5.75rem] touch-pan-y items-end gap-[3px] overflow-hidden rounded-md",
+          active && "cursor-pointer",
+        )}
+      >
+        {Array.from({ length: count }, (_, index) => {
+          const on = index < onCount;
+          const cursor = preview !== null && index === onCount - 1;
+          return (
+            <span
+              key={index}
+              data-slot="tick-progress-tick"
+              data-on={on || undefined}
+              data-cursor={cursor || undefined}
+              className={cn(
+                "min-w-0 flex-1 rounded-[2px] bg-foreground/16",
+                "transition-[background-color,height] duration-[var(--duration-fast),var(--duration-slow)] ease-[var(--ease-out-quint)]",
+                "data-[cursor]:bg-success data-[on]:bg-foreground",
+              )}
+              style={{ height: `${String(pattern[index] ?? 60)}%` }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { tickProgressVariants };

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

@@ -0,0 +1,6 @@
+export {
+  TiltCard,
+  TiltCardLayer,
+  type TiltCardLayerProps,
+  type TiltCardProps,
+} from "./tilt-card";

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

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "tilt-card",
+  title: "Tilt Card",
+  description:
+    "A card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.",
+  category: "display",
+  status: "beta",
+  dependencies: [],
+  registryDependencies: ["card"],
+  files: ["tilt-card.tsx"],
+  a11y:
+    "The tilt is decoration on an ordinary Card: it adds no role, name or tab stop, so a card that acts as a link " +
+    "should contain a real link (the stories stretch one over the card). The glare layer is aria-hidden and ignores the pointer. " +
+    "The card stays flat for touch and coarse pointers and under prefers-reduced-motion. Keyboard focus on the card or " +
+    "anything inside it shows a small static lift instead of a tilt, and a focusable card gets the standard focus ring.",
+});

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

@@ -0,0 +1,256 @@
+"use client";
+
+// Original design (pattern inspired by bencho Tilt card; no code referenced).
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type PointerEvent,
+  type Ref,
+} from "react";
+
+import { Card } from "@/components/card";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * How it moves
+ *
+ * Pointer position is written straight to the element — its transform, and a
+ * handful of custom properties the glare and the layers read — so a pointer
+ * move costs no React render. CSS transitions do all the easing: a short
+ * ease-out while following smooths the steps between pointer events, and an
+ * overshooting ease on leave is the spring back to flat.
+ *
+ * Parallax layers are shifted with the `translate` property rather than
+ * translateZ. A true 3D layer needs `preserve-3d`, which `overflow: hidden`
+ * anywhere in the card silently flattens, and it changes size the moment the
+ * perspective appears. A 2D shift proportional to the tilt reads the same and
+ * cannot be broken by a consumer's class.
+ *
+ * Keyboard focus never tilts — a focused card has no pointer to lean toward —
+ * it lifts, statically, using `translate` so it composes with any tilt a mouse
+ * is applying at the same moment.
+ */
+
+const surface = cn(
+  "group/tilt relative isolate",
+  "transition-[transform,translate,box-shadow]",
+  "duration-[var(--duration-slow),var(--duration-normal),var(--duration-normal)]",
+  "ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint)]",
+  "data-[tilt=follow]:duration-[var(--duration-fast),var(--duration-normal),var(--duration-normal)]",
+  "data-[tilt=follow]:ease-[var(--ease-out-quint)]",
+  "data-[tilt=follow]:shadow-lg",
+  focusRing,
+  "focus-visible:-translate-y-1 focus-visible:shadow-md",
+  "has-focus-visible:-translate-y-1 has-focus-visible:shadow-md",
+);
+
+const glareLayer = cn(
+  "pointer-events-none absolute inset-0 z-10 rounded-[inherit] opacity-0",
+  "transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+  "group-data-[tilt=follow]/tilt:opacity-100",
+);
+
+const glareStyle: CSSProperties = {
+  backgroundImage:
+    "radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%), " +
+    "color-mix(in oklab, var(--color-background) 55%, transparent), transparent 65%)",
+};
+
+const layerDrift = cn(
+  "relative transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]",
+  "group-data-[tilt=follow]/tilt:duration-[var(--duration-fast)] group-data-[tilt=follow]/tilt:ease-[var(--ease-out-quint)]",
+);
+
+/** Whether the tilt may run: never for touch, coarse pointers or reduced motion. */
+function motionAllowed(pointerType: string): boolean {
+  if (pointerType === "touch") return false;
+  if (typeof window.matchMedia !== "function") return true;
+  return !(
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    window.matchMedia("(pointer: coarse)").matches
+  );
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+
+/** Rounds away float noise so the written transform stays short and stable. */
+function round(value: number): number {
+  return Math.round(value * 100) / 100 || 0;
+}
+
+export interface TiltCardProps extends ComponentPropsWithRef<"div"> {
+  /** The largest tilt, in degrees, reached with the pointer at an edge. 0 keeps the card flat. */
+  maxTilt?: number;
+  /** Distance, in pixels, of the viewer from the card. Smaller is more dramatic. */
+  perspective?: number;
+  /** How much the card grows while tilting. 1 keeps its size. */
+  scale?: number;
+  /** A soft highlight that follows the pointer across the surface. */
+  glare?: boolean;
+  /** Keeps the card flat, as if the pointer were elsewhere. */
+  disabled?: boolean;
+}
+
+/**
+ * A card that tilts in 3D toward the pointer and springs back flat when it
+ * leaves.
+ *
+ * Decoration on an ordinary Card: it never moves for touch, coarse pointers or
+ * users who prefer reduced motion. Mark children with `TiltCardLayer` to have
+ * them drift further than the surface, for depth.
+ */
+export function TiltCard({
+  className,
+  maxTilt = 10,
+  perspective = 800,
+  scale = 1.02,
+  glare = true,
+  disabled = false,
+  children,
+  ref,
+  onPointerMove,
+  onPointerLeave,
+  ...props
+}: TiltCardProps) {
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  // The card's box, measured on the first move of a hover, while it is still
+  // flat. A tilted card's bounding box is its projection, so measuring on
+  // every move would have the card chase its own lean.
+  const box = useRef<DOMRect | null>(null);
+  const tilted = useRef(false);
+  const inert = disabled || maxTilt === 0;
+
+  const setRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      cardRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  const flatten = useCallback(() => {
+    box.current = null;
+    const element = cardRef.current;
+    if (!element || !tilted.current) return;
+    tilted.current = false;
+    element.dataset.tilt = "rest";
+    element.style.transform = "";
+    element.style.setProperty("--tilt-px", "0");
+    element.style.setProperty("--tilt-py", "0");
+  }, []);
+
+  const lean = useCallback(
+    (clientX: number, clientY: number, pointerType: string) => {
+      const element = cardRef.current;
+      if (!element || inert || !motionAllowed(pointerType)) {
+        flatten();
+        return;
+      }
+      box.current ??= element.getBoundingClientRect();
+      const { left, top, width, height } = box.current;
+      if (width === 0 || height === 0) return;
+
+      // -1 at the start edge, 1 at the end edge, clamped for pointers that
+      // slip past a rounded corner before `pointerleave` arrives.
+      const x = Math.min(1, Math.max(-1, ((clientX - left) / width) * 2 - 1));
+      const y = Math.min(1, Math.max(-1, ((clientY - top) / height) * 2 - 1));
+
+      // The side under the pointer presses away from the viewer: rotateY
+      // positive sends the right edge back, rotateX negative the bottom edge.
+      tilted.current = true;
+      element.dataset.tilt = "follow";
+      element.style.transform =
+        `perspective(${String(perspective)}px) ` +
+        `rotateX(${String(round(-y * maxTilt))}deg) ` +
+        `rotateY(${String(round(x * maxTilt))}deg) ` +
+        `scale3d(${String(scale)}, ${String(scale)}, 1)`;
+      element.style.setProperty("--tilt-px", String(round(x)));
+      element.style.setProperty("--tilt-py", String(round(y)));
+      element.style.setProperty("--tilt-glare-x", `${String(round(((x + 1) / 2) * 100))}%`);
+      element.style.setProperty("--tilt-glare-y", `${String(round(((y + 1) / 2) * 100))}%`);
+    },
+    [flatten, inert, maxTilt, perspective, scale],
+  );
+
+  // Scrolling moves the card under a still pointer; the cached box is stale.
+  useEffect(() => {
+    const forget = () => {
+      box.current = null;
+    };
+    window.addEventListener("scroll", forget, { passive: true, capture: true });
+    window.addEventListener("resize", forget, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", forget, { capture: true });
+      window.removeEventListener("resize", forget);
+    };
+  }, []);
+
+  // Becoming disabled mid-tilt should not leave the card stranded at an angle.
+  useEffect(() => {
+    if (inert) flatten();
+  }, [inert, flatten]);
+
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
+    onPointerMove?.(event);
+    lean(event.clientX, event.clientY, event.pointerType);
+  }
+
+  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {
+    onPointerLeave?.(event);
+    flatten();
+  }
+
+  return (
+    <Card
+      ref={setRef}
+      data-slot="tilt-card"
+      data-tilt="rest"
+      className={cn(surface, className)}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+      {...props}
+    >
+      {children}
+      {glare ? (
+        <span
+          aria-hidden="true"
+          data-slot="tilt-card-glare"
+          className={glareLayer}
+          style={glareStyle}
+        />
+      ) : null}
+    </Card>
+  );
+}
+
+export interface TiltCardLayerProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * How far, in pixels, the layer drifts toward the pointer at full tilt —
+   * on top of the card's own lean. Larger reads as nearer the viewer; a
+   * negative depth sinks the layer behind the surface.
+   */
+  depth?: number;
+}
+
+/** Content inside a TiltCard that floats at its own depth. */
+export function TiltCardLayer({ className, depth = 12, style, ...props }: TiltCardLayerProps) {
+  const d = String(depth);
+  return (
+    <div
+      data-slot="tilt-card-layer"
+      className={cn(layerDrift, className)}
+      style={{
+        translate: `calc(var(--tilt-px, 0) * ${d}px) calc(var(--tilt-py, 0) * ${d}px)`,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/time-range-picker/time-range-picker.tsx

@@ -324,7 +324,7 @@ export function TimeRangePresets({
     <div
       data-slot="time-range-presets"
       className={cn(
-        "max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-r",
+        "max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-e",
         className,
       )}
       {...props}
@@ -344,7 +344,7 @@ export function TimeRangePresets({
                 close();
               }}
               className={cn(
-                "flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+                "flex w-full items-center rounded-md px-2 py-1.5 text-start text-sm transition-colors",
                 preset.expression === value
                   ? "bg-accent font-medium text-accent-foreground"
                   : "hover:bg-accent hover:text-accent-foreground",
@@ -482,7 +482,7 @@ export function TimeRangeCalendar({
   return (
     <div
       data-slot="time-range-calendar"
-      className={cn("border-t border-border p-1 sm:border-t-0 sm:border-l", className)}
+      className={cn("border-t border-border p-1 sm:border-s sm:border-t-0", className)}
       {...props}
     >
       <Calendar

package/src/components/time-stack/index.ts

@@ -0,0 +1,6 @@
+export {
+  TimeStack,
+  timeStackVariants,
+  type TimeStackItem,
+  type TimeStackProps,
+} from "./time-stack";

package/src/components/time-stack/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "time-stack",
+  title: "Time Stack",
+  description:
+    "Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: [],
+  files: ["time-stack.tsx"],
+  a11y:
+    'The scrubber is a vertical role="slider" whose aria-valuetext names the moment ("1w ago: Forest Trail"). ' +
+    "Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, " +
+    "Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind " +
+    "and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures " +
+    "scrolling while there is a card to step to. Motion stops under reduced motion.",
+});