@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/range-dial/range-dial.tsx

@@ -0,0 +1,428 @@
+"use client";
+
+// Ported from bencho Range dial (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import {
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A 24-hour dial with two thumbs: the window is the clockwise arc from the
+ * start thumb to the end thumb, and it may wrap past midnight. A ring of ticks
+ * shows the window (long and dark inside, short and faint outside), and the
+ * duration sits in the middle.
+ *
+ * The source was pointer-only. Here each thumb is a focusable role="slider"
+ * (arrows step by `snap`, Page Up/Down by an hour, Home/End jump to midnight
+ * and the last step of the day, all wrapping round the clock), and a polite
+ * live region announces the new duration once something has changed.
+ *
+ * The dial is a clock, not reading order: it keeps `direction: ltr` and
+ * clockwise stays clockwise in right-to-left layouts, and so do the arrow keys
+ * (up/right always add time, as on any circular slider).
+ *
+ * There is no gesture velocity to carry, so no `motion`: the thumbs follow the
+ * pointer directly and ticks draw in with a hoisted keyframe whose duration and
+ * stagger run through --motion-scale.
+ */
+
+const PREFIX = "dowel-range-dial";
+const DAY = 1440;
+
+const STYLES = `
+@keyframes ${PREFIX}-fill{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
+.${PREFIX} [data-slot=range-dial-tick][data-entering]{stroke-dasharray:1;animation:${PREFIX}-fill calc(260ms * var(--motion-scale, 1)) cubic-bezier(.22,1,.36,1) calc(var(--d, 0) * 16ms * var(--motion-scale, 1)) both}
+`;
+
+export type RangeDialValue = [start: number, end: number];
+
+export interface RangeDialProps extends Omit<
+  ComponentPropsWithRef<"div">,
+  "defaultValue" | "onChange" | "children"
+> {
+  /** `[start, end]` in minutes after midnight, 0–1439. The window runs clockwise. */
+  value?: RangeDialValue;
+  /** Uncontrolled start value. Defaults to 23:00 → 06:30 (7h30m). */
+  defaultValue?: RangeDialValue;
+  /** Called on every change: while dragging and per key press. */
+  onValueChange?: (value: RangeDialValue) => void;
+  /** Called when an interaction ends: pointer released or key press. */
+  onValueCommit?: (value: RangeDialValue) => void;
+  /** Step in minutes for the pointer and the arrow keys. */
+  snap?: 5 | 15 | 30;
+  /** Number of ticks round the dial, 24–96 (the source's slider stepped by 8). */
+  density?: number;
+  /** Tick ring radius in viewBox units, 44–68. Scales the whole dial geometry. */
+  reach?: number;
+  /** Accessible names of the two thumbs. */
+  thumbLabels?: [start: string, end: string];
+  /** Locale for the default time format. */
+  locale?: string;
+  /** Formats a time (minutes after midnight) for `aria-valuetext`. */
+  formatTime?: (minutes: number) => string;
+  /** Formats a duration in minutes for the live announcement. */
+  formatDuration?: (minutes: number) => string;
+  disabled?: boolean;
+}
+
+const clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);
+const wrap = (minutes: number) => ((Math.round(minutes) % DAY) + DAY) % DAY;
+const gap = (a: number, b: number) => {
+  const d = Math.abs(a - b) % DAY;
+  return Math.min(d, DAY - d);
+};
+
+function spokenDuration(minutes: number): string {
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  const parts: string[] = [];
+  if (hours > 0) parts.push(`${String(hours)} ${hours === 1 ? "hour" : "hours"}`);
+  if (rest > 0 || hours === 0)
+    parts.push(`${String(rest)} ${rest === 1 ? "minute" : "minutes"}`);
+  return parts.join(" ");
+}
+
+/** Position on the dial, as percentages of its box, for an angle in minutes. */
+function polar(minutes: number, radius: number): { left: string; top: string } {
+  const angle = (minutes / DAY) * 2 * Math.PI;
+  const r = radius / 2; // viewBox units (of 200) to percent
+  return {
+    left: `${(50 + r * Math.sin(angle)).toFixed(3)}%`,
+    top: `${(50 - r * Math.cos(angle)).toFixed(3)}%`,
+  };
+}
+
+interface Trail {
+  key: string;
+  /** Ticks drawing in, with their stagger rank along the arc. */
+  entering: Map<number, number>;
+}
+
+/** A 24-hour circular two-thumb range, such as a sleep window. */
+export function RangeDial({
+  className,
+  style,
+  value: valueProp,
+  defaultValue = [23 * 60, 6 * 60 + 30],
+  onValueChange,
+  onValueCommit,
+  snap = 15,
+  density = 48,
+  reach = 56,
+  thumbLabels = ["Start time", "End time"],
+  locale,
+  formatTime,
+  formatDuration = spokenDuration,
+  disabled = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  ...props
+}: RangeDialProps) {
+  const [uncontrolled, setUncontrolled] = useState<RangeDialValue>(() => [
+    wrap(defaultValue[0]),
+    wrap(defaultValue[1]),
+  ]);
+  const controlled = valueProp !== undefined;
+  const value: RangeDialValue = controlled
+    ? [wrap(valueProp[0]), wrap(valueProp[1])]
+    : uncontrolled;
+  const [start, end] = value;
+  const duration = wrap(end - start);
+
+  const [announcement, setAnnouncement] = useState("");
+  const [dragging, setDragging] = useState<0 | 1 | null>(null);
+  const latest = useRef(value);
+  const thumbs = useRef<(HTMLSpanElement | null)[]>([]);
+  const filterId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+
+  const timeFormat = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC" }),
+    [locale],
+  );
+  const timeText = (minutes: number) =>
+    formatTime ? formatTime(minutes) : timeFormat.format(new Date(minutes * 60_000));
+
+  /* Ticks -------------------------------------------------------------- */
+  const count = clamp(Math.round(density), 24, 96);
+  const ring = clamp(reach, 44, 68);
+  const onList = Array.from({ length: count }, (_, index) => index)
+    .map((index) => ({ index, offset: wrap((index * DAY) / count - start) }))
+    .filter((tick) => tick.offset <= duration)
+    .sort((a, b) => a.offset - b.offset)
+    .map((tick) => tick.index);
+  const onKey = onList.join(",");
+
+  // Ticks that have just joined the window draw in, one after another along
+  // the arc. Derived from the previous render's set (React's "adjust state
+  // while rendering" pattern), so a tick already on never replays.
+  const [trail, setTrail] = useState<Trail>(() => ({
+    key: onKey,
+    entering: new Map(onList.map((index, rank) => [index, rank])),
+  }));
+  let entering = trail.entering;
+  if (trail.key !== onKey) {
+    const before = new Set(trail.key ? trail.key.split(",").map(Number) : []);
+    const next = new Map<number, number>();
+    let rank = 0;
+    for (const index of onList) {
+      if (!before.has(index)) next.set(index, rank++);
+      else if (trail.entering.has(index)) next.set(index, trail.entering.get(index) ?? 0);
+    }
+    entering = next;
+    setTrail({ key: onKey, entering: next });
+  }
+  const onSet = new Set(onList);
+
+  /* Changes ------------------------------------------------------------ */
+  function setThumb(thumb: 0 | 1, minutes: number): RangeDialValue {
+    const current = latest.current;
+    const next: RangeDialValue =
+      thumb === 0 ? [wrap(minutes), current[1]] : [current[0], wrap(minutes)];
+    latest.current = next;
+    if (next[0] === current[0] && next[1] === current[1]) return next;
+    if (!controlled) setUncontrolled(next);
+    setAnnouncement(formatDuration(wrap(next[1] - next[0])));
+    onValueChange?.(next);
+    return next;
+  }
+
+  function fromPointer(event: PointerEvent<HTMLDivElement>): number | null {
+    const rect = event.currentTarget.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return null;
+    const dx = event.clientX - (rect.left + rect.width / 2);
+    const dy = event.clientY - (rect.top + rect.height / 2);
+    const turn = (Math.atan2(dx, -dy) / (2 * Math.PI) + 1) % 1;
+    return wrap(Math.round((turn * DAY) / snap) * snap);
+  }
+
+  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
+    onPointerDown?.(event);
+    if (disabled || event.button !== 0 || event.defaultPrevented) return;
+    const minutes = fromPointer(event);
+    if (minutes === null) return;
+    event.preventDefault();
+    const thumb: 0 | 1 = gap(minutes, start) <= gap(minutes, end) ? 0 : 1;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    latest.current = value;
+    setDragging(thumb);
+    setThumb(thumb, minutes);
+    thumbs.current[thumb]?.focus({ preventScroll: true });
+  }
+
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
+    onPointerMove?.(event);
+    if (dragging === null) return;
+    const minutes = fromPointer(event);
+    if (minutes !== null) setThumb(dragging, minutes);
+  }
+
+  function handlePointerEnd(event: PointerEvent<HTMLDivElement>) {
+    if (event.type === "pointerup") onPointerUp?.(event);
+    else onPointerCancel?.(event);
+    if (dragging === null) return;
+    setDragging(null);
+    onValueCommit?.(latest.current);
+  }
+
+  function handleKeyDown(thumb: 0 | 1, event: KeyboardEvent<HTMLSpanElement>) {
+    if (disabled) return;
+    const current = value[thumb];
+    let next: number;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = Math.floor(current / snap) * snap + snap;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = Math.ceil(current / snap) * snap - snap;
+        break;
+      case "PageUp":
+        next = current + 60;
+        break;
+      case "PageDown":
+        next = current - 60;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = DAY - snap;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    latest.current = value;
+    const committed = setThumb(thumb, next);
+    if (committed[thumb] !== current) onValueCommit?.(committed);
+  }
+
+  /* Render ------------------------------------------------------------- */
+  const orbit = ring + 10.67; // the knobs ride just outside the short ticks
+  const hours = Math.floor(duration / 60);
+  const mins = String(duration % 60).padStart(2, "0");
+
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? "Time range")}
+      aria-labelledby={ariaLabelledBy}
+      aria-disabled={disabled || undefined}
+      data-slot="range-dial"
+      data-dragging={dragging === null ? undefined : ""}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        PREFIX,
+        "relative aspect-square w-72 touch-none text-foreground select-none",
+        disabled
+          ? "cursor-not-allowed opacity-55"
+          : "cursor-grab data-dragging:cursor-grabbing",
+        className,
+      )}
+      style={{ containerType: "inline-size", direction: "ltr", ...style }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerEnd}
+      onPointerCancel={handlePointerEnd}
+      {...props}
+    >
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <svg
+        viewBox="0 0 200 200"
+        aria-hidden="true"
+        data-slot="range-dial-ticks"
+        className="absolute inset-0 size-full"
+      >
+        {Array.from({ length: count }, (_, index) => {
+          const angle = (index / count) * 2 * Math.PI;
+          const on = onSet.has(index);
+          const outer = on ? ring + 19 : ring + 9;
+          const rank = entering.get(index);
+          return (
+            <line
+              key={index}
+              data-slot="range-dial-tick"
+              data-on={on ? "" : undefined}
+              data-entering={on && rank !== undefined ? "" : undefined}
+              x1={100 + ring * Math.sin(angle)}
+              y1={100 - ring * Math.cos(angle)}
+              x2={100 + outer * Math.sin(angle)}
+              y2={100 - outer * Math.cos(angle)}
+              pathLength={1}
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              opacity={on ? 0.9 : 0.24}
+              style={{ "--d": rank ?? 0 } as CSSProperties}
+            />
+          );
+        })}
+      </svg>
+
+      <svg width="0" height="0" aria-hidden="true" className="absolute">
+        <defs>
+          <filter id={filterId}>
+            <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
+            <feColorMatrix
+              in="blur"
+              mode="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17"
+              result="goo"
+            />
+            <feComposite in="SourceGraphic" in2="goo" operator="over" />
+          </filter>
+        </defs>
+      </svg>
+      <div
+        aria-hidden="true"
+        data-slot="range-dial-knobs"
+        className="pointer-events-none absolute inset-0"
+        style={{
+          filter: `url(#${filterId}) drop-shadow(0 2px 8px var(--shadow-color)) drop-shadow(0 1px 3px var(--shadow-color))`,
+        }}
+      >
+        {value.map((minutes, thumb) => (
+          <span
+            key={thumb}
+            data-slot="range-dial-knob"
+            className="absolute flex size-[6.94cqi] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-card"
+            style={polar(minutes, orbit)}
+          >
+            {thumb === 0 ? (
+              <span
+                data-slot="range-dial-pip"
+                className="size-1/4 rounded-full bg-foreground/50"
+              />
+            ) : null}
+          </span>
+        ))}
+      </div>
+
+      {value.map((minutes, thumb) => (
+        <span
+          key={thumb}
+          ref={(node) => {
+            thumbs.current[thumb] = node;
+          }}
+          role="slider"
+          tabIndex={disabled ? -1 : 0}
+          aria-label={thumbLabels[thumb]}
+          aria-valuemin={0}
+          aria-valuemax={DAY - 1}
+          aria-valuenow={minutes}
+          aria-valuetext={timeText(minutes)}
+          aria-disabled={disabled || undefined}
+          data-slot="range-dial-thumb"
+          data-thumb={thumb === 0 ? "start" : "end"}
+          className={cn(
+            "absolute size-[9cqi] -translate-x-1/2 -translate-y-1/2 rounded-full",
+            focusRing,
+          )}
+          style={polar(minutes, orbit)}
+          onKeyDown={(event) => {
+            handleKeyDown(thumb as 0 | 1, event);
+          }}
+        />
+      ))}
+
+      <div
+        data-slot="range-dial-readout"
+        className="pointer-events-none absolute inset-0 flex items-center justify-center font-medium tracking-[-0.045em] tabular-nums"
+        style={{ fontSize: "11.8cqi" }}
+      >
+        <span aria-hidden="true">
+          {hours}
+          <span className="ms-[0.09em] me-[0.18em] text-[0.7em] opacity-42">h</span>
+          {mins}
+          <span className="ms-[0.09em] text-[0.7em] opacity-42">m</span>
+        </span>
+        <span className="sr-only">{formatDuration(duration)}</span>
+      </div>
+      <span
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+        data-slot="range-dial-status"
+      >
+        {announcement}
+      </span>
+    </div>
+  );
+}

package/src/components/record-diff/record-diff.tsx

@@ -241,19 +241,19 @@ export function RecordDiffTable({
             <tr className="border-b border-border">
               <th
                 scope="col"
-                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+                className="px-3 py-2 text-start text-xs font-medium text-muted-foreground"
               >
                 Field
               </th>
               <th
                 scope="col"
-                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+                className="px-3 py-2 text-start text-xs font-medium text-muted-foreground"
               >
                 Before
               </th>
               <th
                 scope="col"
-                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+                className="px-3 py-2 text-start text-xs font-medium text-muted-foreground"
               >
                 After
               </th>
@@ -271,7 +271,7 @@ export function RecordDiffTable({
                     rather than as a loose cell in a wall of table. */}
                 <th
                   scope="row"
-                  className="px-3 py-2 text-left align-top font-medium whitespace-nowrap"
+                  className="px-3 py-2 text-start align-top font-medium whitespace-nowrap"
                 >
                   {field.label}
                   {/* The change kind must not be carried by row colour alone. */}

package/src/components/reorder-list/index.ts

@@ -0,0 +1,10 @@
+export {
+  leanFor,
+  ReorderList,
+  reorderListVariants,
+  reorderSpring,
+  type ReorderListAnnouncementDetails,
+  type ReorderListAnnouncements,
+  type ReorderListItem,
+  type ReorderListProps,
+} from "./reorder-list";

package/src/components/reorder-list/meta.ts

@@ -0,0 +1,21 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "reorder-list",
+  title: "Reorder List",
+  description:
+    "A short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority", "motion"],
+  registryDependencies: ["avatar"],
+  files: ["reorder-list.tsx"],
+  a11y:
+    "A real list (ol, role=list, named by aria-label) whose rows are buttons named by their label and described by " +
+    "the keyboard instructions. Space or Enter picks a row up (aria-pressed), ArrowUp/ArrowDown or Home/End move " +
+    "it, Space or Enter drops it and Escape (or leaving the row) cancels and restores the original order; without " +
+    "a grab the arrows move focus between rows. Focus stays on the moved row. A polite, visually hidden status " +
+    "region announces each grab, move, drop and cancel (messages overridable for i18n), including drops made by " +
+    "pointer. The goo layer of pill backgrounds is aria-hidden and separate from the text, and avatars are " +
+    "decorative. Under reduced motion nothing deforms and rows jump to their slots.",
+});