@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/range-dial/range-dial.js

@@ -0,0 +1,308 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+//#region src/components/range-dial/range-dial.tsx
+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}
+`;
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+const wrap = (minutes) => (Math.round(minutes) % DAY + DAY) % DAY;
+const gap = (a, b) => {
+	const d = Math.abs(a - b) % DAY;
+	return Math.min(d, DAY - d);
+};
+function spokenDuration(minutes) {
+	const hours = Math.floor(minutes / 60);
+	const rest = minutes % 60;
+	const parts = [];
+	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, radius) {
+	const angle = minutes / DAY * 2 * Math.PI;
+	const r = radius / 2;
+	return {
+		left: `${(50 + r * Math.sin(angle)).toFixed(3)}%`,
+		top: `${(50 - r * Math.cos(angle)).toFixed(3)}%`
+	};
+}
+/** A 24-hour circular two-thumb range, such as a sleep window. */
+function RangeDial({ className, style, value: valueProp, defaultValue = [1380, 390], 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 }) {
+	const [uncontrolled, setUncontrolled] = useState(() => [wrap(defaultValue[0]), wrap(defaultValue[1])]);
+	const controlled = valueProp !== void 0;
+	const value = 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(null);
+	const latest = useRef(value);
+	const thumbs = useRef([]);
+	const filterId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+	const timeFormat = useMemo(() => new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		minute: "2-digit",
+		timeZone: "UTC"
+	}), [locale]);
+	const timeText = (minutes) => formatTime ? formatTime(minutes) : timeFormat.format(/* @__PURE__ */ new Date(minutes * 6e4));
+	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(",");
+	const [trail, setTrail] = useState(() => ({
+		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 = /* @__PURE__ */ new Map();
+		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);
+	function setThumb(thumb, minutes) {
+		const current = latest.current;
+		const next = 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) {
+		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) {
+		onPointerDown?.(event);
+		if (disabled || event.button !== 0 || event.defaultPrevented) return;
+		const minutes = fromPointer(event);
+		if (minutes === null) return;
+		event.preventDefault();
+		const thumb = 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) {
+		onPointerMove?.(event);
+		if (dragging === null) return;
+		const minutes = fromPointer(event);
+		if (minutes !== null) setThumb(dragging, minutes);
+	}
+	function handlePointerEnd(event) {
+		if (event.type === "pointerup") onPointerUp?.(event);
+		else onPointerCancel?.(event);
+		if (dragging === null) return;
+		setDragging(null);
+		onValueCommit?.(latest.current);
+	}
+	function handleKeyDown(thumb, event) {
+		if (disabled) return;
+		const current = value[thumb];
+		let next;
+		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);
+	}
+	const orbit = ring + 10.67;
+	const hours = Math.floor(duration / 60);
+	const mins = String(duration % 60).padStart(2, "0");
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabelledBy ? ariaLabel : ariaLabel ?? "Time range",
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "range-dial",
+		"data-dragging": dragging === null ? void 0 : "",
+		"data-disabled": disabled ? "" : void 0,
+		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,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 200 200",
+				"aria-hidden": "true",
+				"data-slot": "range-dial-ticks",
+				className: "absolute inset-0 size-full",
+				children: 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 /* @__PURE__ */ jsx("line", {
+						"data-slot": "range-dial-tick",
+						"data-on": on ? "" : void 0,
+						"data-entering": on && rank !== void 0 ? "" : void 0,
+						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 ? .9 : .24,
+						style: { "--d": rank ?? 0 }
+					}, index);
+				})
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				width: "0",
+				height: "0",
+				"aria-hidden": "true",
+				className: "absolute",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: "4",
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("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"
+						}),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							in2: "goo",
+							operator: "over"
+						})
+					]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("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))` },
+				children: value.map((minutes, thumb) => /* @__PURE__ */ jsx("span", {
+					"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),
+					children: thumb === 0 ? /* @__PURE__ */ jsx("span", {
+						"data-slot": "range-dial-pip",
+						className: "size-1/4 rounded-full bg-foreground/50"
+					}) : null
+				}, thumb))
+			}),
+			value.map((minutes, thumb) => /* @__PURE__ */ jsx("span", {
+				ref: (node) => {
+					thumbs.current[thumb] = node;
+				},
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": thumbLabels[thumb],
+				"aria-valuemin": 0,
+				"aria-valuemax": 1439,
+				"aria-valuenow": minutes,
+				"aria-valuetext": timeText(minutes),
+				"aria-disabled": disabled || void 0,
+				"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, event);
+				}
+			}, thumb)),
+			/* @__PURE__ */ jsxs("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" },
+				children: [/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					children: [
+						hours,
+						/* @__PURE__ */ jsx("span", {
+							className: "ms-[0.09em] me-[0.18em] text-[0.7em] opacity-42",
+							children: "h"
+						}),
+						mins,
+						/* @__PURE__ */ jsx("span", {
+							className: "ms-[0.09em] text-[0.7em] opacity-42",
+							children: "m"
+						})
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: formatDuration(duration)
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				"data-slot": "range-dial-status",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { RangeDial };
+
+//# sourceMappingURL=range-dial.js.map

package/dist/components/range-dial/range-dial.js.map

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

package/dist/components/reorder-list/index.d.ts

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

package/dist/components/reorder-list/index.js

@@ -0,0 +1,2 @@
+import { ReorderList, leanFor, reorderListVariants, reorderSpring } from "./reorder-list.js";
+export { ReorderList, leanFor, reorderListVariants, reorderSpring };

package/dist/components/reorder-list/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/reorder-list/meta.ts
+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."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/reorder-list/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/reorder-list/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"reorder-list\",\n  title: \"Reorder List\",\n  description:\n    \"A short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [\"avatar\"],\n  files: [\"reorder-list.tsx\"],\n  a11y:\n    \"A real list (ol, role=list, named by aria-label) whose rows are buttons named by their label and described by \" +\n    \"the keyboard instructions. Space or Enter picks a row up (aria-pressed), ArrowUp/ArrowDown or Home/End move \" +\n    \"it, Space or Enter drops it and Escape (or leaving the row) cancels and restores the original order; without \" +\n    \"a grab the arrows move focus between rows. Focus stays on the moved row. A polite, visually hidden status \" +\n    \"region announces each grab, move, drop and cancel (messages overridable for i18n), including drops made by \" +\n    \"pointer. The goo layer of pill backgrounds is aria-hidden and separate from the text, and avatars are \" +\n    \"decorative. Under reduced motion nothing deforms and rows jump to their slots.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,QAAQ;CACnD,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAOJ,CAAC"}

package/dist/components/reorder-list/reorder-list.d.ts

@@ -0,0 +1,79 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/reorder-list/reorder-list.d.ts
+/** Spring for rows settling. `give` 0 is stiff and exact, 100 soft and bouncy. */
+declare function reorderSpring(give: number): {
+  type: "spring";
+  stiffness: number;
+  damping: number;
+  restDelta: number;
+};
+/**
+ * How the held pill deforms at a velocity (px/s). `lean` is 0–100; at the
+ * default 18 a brisk drag gives about scaleX 0.8, scaleY 1.1, skewY 1.4°.
+ */
+declare function leanFor(velocity: number, lean: number): {
+  scaleX: number;
+  scaleY: number;
+  skewY: number;
+};
+interface ReorderListItem {
+  id: string;
+  /** The row's name. Announced, and names its button. */
+  label: string;
+  /** Avatar image URL. Decorative: the label already names the row. */
+  avatar?: string;
+  /** Shown when there is no image, or it fails to load. */
+  initials?: string;
+  /** CSS colour behind the avatar, e.g. `var(--color-primary)`. */
+  accent?: string;
+  /** Shows a presence dot (success token) and adds "online" to the name. */
+  online?: boolean;
+}
+interface ReorderListAnnouncementDetails {
+  item: ReorderListItem;
+  /** 1-based. */
+  position: number;
+  total: number;
+}
+interface ReorderListAnnouncements {
+  grabbed: (details: ReorderListAnnouncementDetails) => string;
+  moved: (details: ReorderListAnnouncementDetails) => string;
+  dropped: (details: ReorderListAnnouncementDetails) => string;
+  cancelled: (details: ReorderListAnnouncementDetails) => string;
+}
+declare const reorderListVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ReorderListProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "children">, VariantProps<typeof reorderListVariants> {
+  items: ReorderListItem[];
+  /** Order as item ids (controlled). */
+  value?: string[];
+  /** Initial order (uncontrolled). Defaults to the order of `items`. */
+  defaultValue?: string[];
+  /** Called with the new order after a drop that changed it. */
+  onValueChange?: (value: string[]) => void;
+  /** Replaces the avatar and label inside a row. The label still names the button. */
+  renderItem?: (item: ReorderListItem, state: {
+    grabbed: boolean;
+    index: number;
+  }) => ReactNode;
+  /** Pill corner radius, 0–22 px. */
+  corner?: number;
+  /** Spring softness for rows settling, 0–100. */
+  give?: number;
+  /** How much the held pill skews and squashes with velocity, 0–100. */
+  lean?: number;
+  /** 1px inset hairline on each pill. */
+  stroke?: boolean;
+  disabled?: boolean;
+  /** Overrides for the live-region messages (i18n). */
+  announcements?: Partial<ReorderListAnnouncements>;
+  /** Describes the keyboard operation; referenced by every row's button. */
+  instructions?: string;
+}
+/** A list you reorder by dragging liquid pills, or with Space and the arrow keys. */
+declare function ReorderList({ className, items, value, defaultValue, onValueChange, renderItem, corner, give, lean, fill, stroke, disabled, announcements, instructions, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ReorderListProps): import("react").JSX.Element;
+//#endregion
+export { ReorderList, ReorderListAnnouncementDetails, ReorderListAnnouncements, ReorderListItem, ReorderListProps, leanFor, reorderListVariants, reorderSpring };
+//# sourceMappingURL=reorder-list.d.ts.map

package/dist/components/reorder-list/reorder-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorder-list.d.ts","names":[],"sources":["../../../src/components/reorder-list/reorder-list.tsx"],"mappings":";;;;iBAqFgB,cAAc;;;;;;;;;;iBAcd,QAAQ,kBAAkB;;;;;UAUzB;EACf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;UAGe;EACf,MAAM;;EAEN;EACA;;UAGe;EACf,UAAU,SAAS;EACnB,QAAQ,SAAS;EACjB,UAAU,SAAS;EACnB,YAAY,SAAS;;cAejB,sBAAmB;;6CASvB;UAEe,yBAEb,KAAK,4DACL,oBAAoB;EACtB,OAAO;;EAEP;;EAEA;;EAEA,iBAAiB;;EAEjB,cAAc,MAAM,iBAAiB;IAAS;IAAkB;QAAoB;;EAEpF;;EAEA;;EAEA;;EAEA;EACA;;EAEA,gBAAgB,QAAQ;;EAExB;;;iBA+Bc,cACd,WACA,OACA,OACA,cACA,eACA,YACA,QACA,MACA,MACA,MACA,QACA,UACA,eACA,cACA,qBACc,8BACK,mBAChB,SACF,mCAAgB,IAAA"}