@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/cursor-follow/cursor-follow.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useState, useSyncExternalStore } from "react";
+import { MotionConfig, motion, useMotionValue, useSpring } from "motion/react";
+//#region src/components/cursor-follow/cursor-follow.tsx
+const cursorFollowVariants = cva(cn("flex h-4 max-w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full text-xs font-medium whitespace-nowrap shadow-lg", "transition-[height,max-width,padding,opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-in-out-quint)]", "data-[labelled]:h-10 data-[labelled]:max-w-80 data-[labelled]:scale-110 data-[labelled]:px-4", "data-[state=hidden]:scale-75 data-[state=hidden]:opacity-0"), {
+	variants: { 
+	/** `solid` is the source's filled dot; `invert` and `blur` treat what is behind it. */
+appearance: {
+		solid: "bg-primary text-primary-foreground",
+		invert: "border border-border text-foreground backdrop-invert",
+		blur: "border border-border bg-background/40 text-foreground backdrop-blur-sm"
+	} },
+	defaultVariants: { appearance: "solid" }
+});
+const SPRING = {
+	damping: 40,
+	stiffness: 350
+};
+const REDUCE = "(prefers-reduced-motion: reduce)";
+/** Live reduced-motion preference; false on the server, where nothing moves anyway. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore((notify) => {
+		const query = window.matchMedia(REDUCE);
+		query.addEventListener("change", notify);
+		return () => {
+			query.removeEventListener("change", notify);
+		};
+	}, () => window.matchMedia(REDUCE).matches, () => false);
+}
+/** A container whose pointer is trailed by a springy dot that can show a label. */
+function CursorFollow({ className, followerClassName, appearance, hideCursor = false, children, onPointerEnter, onPointerMove, onPointerLeave, onPointerOver, ...props }) {
+	const reduced = usePrefersReducedMotion();
+	const [visible, setVisible] = useState(false);
+	const [label, setLabel] = useState(null);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const springX = useSpring(x, SPRING);
+	const springY = useSpring(y, SPRING);
+	const tracks = (event) => !reduced && event.pointerType !== "touch";
+	function place(event, jump) {
+		const box = event.currentTarget.getBoundingClientRect();
+		const nextX = event.clientX - box.left;
+		const nextY = event.clientY - box.top;
+		x.set(nextX);
+		y.set(nextY);
+		if (jump) {
+			springX.jump(nextX);
+			springY.jump(nextY);
+		}
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "cursor-follow",
+			className: cn("relative isolate", hideCursor && !reduced && "cursor-none [&_*]:cursor-none", className),
+			onPointerEnter: (event) => {
+				onPointerEnter?.(event);
+				if (!tracks(event)) return;
+				place(event, true);
+				setVisible(true);
+			},
+			onPointerMove: (event) => {
+				onPointerMove?.(event);
+				if (!tracks(event)) return;
+				place(event, !visible);
+				if (!visible) setVisible(true);
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				setVisible(false);
+				setLabel(null);
+			},
+			onPointerOver: (event) => {
+				onPointerOver?.(event);
+				const target = event.target.closest("[data-cursor-text]");
+				setLabel(target?.getAttribute("data-cursor-text") || null);
+			},
+			...props,
+			children: [children, reduced ? null : /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-slot": "cursor-follow-layer",
+				className: "pointer-events-none absolute inset-0 z-10 overflow-hidden",
+				children: [/* @__PURE__ */ jsx(motion.div, {
+					className: "absolute",
+					style: {
+						left: 0,
+						top: 0,
+						x: springX,
+						y: springY
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "cursor-follow-follower",
+						"data-state": visible ? "visible" : "hidden",
+						"data-labelled": label ? "" : void 0,
+						className: cn(cursorFollowVariants({ appearance }), followerClassName),
+						children: label ? /* @__PURE__ */ jsx("span", {
+							className: "animate-[dowel-cursor-follow-in_var(--duration-normal)_var(--ease-out-quint)]",
+							children: label
+						}) : null
+					})
+				}), /* @__PURE__ */ jsx("style", {
+					href: "dowel-cursor-follow",
+					precedence: "dowel",
+					children: "@keyframes dowel-cursor-follow-in{from{opacity:0;filter:blur(8px)}}"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { CursorFollow, cursorFollowVariants };
+
+//# sourceMappingURL=cursor-follow.js.map

package/dist/components/cursor-follow/cursor-follow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-follow.js","names":[],"sources":["../../../src/components/cursor-follow/cursor-follow.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Cursor Follow (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { MotionConfig, motion, useMotionValue, useSpring } from \"motion/react\";\nimport {\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A dot that trails the pointer inside a container, and swells into a label\n * over anything carrying `data-cursor-text`.\n *\n * Following the pointer with physics is one of the three things ADR 0014\n * allows `motion` for: the position is a spring chasing the pointer every\n * frame, which a CSS transition restarted on each move cannot do smoothly.\n * The dot's shape change is plain CSS.\n *\n * It is decoration and nothing else: aria-hidden, pointer-events none, never\n * the only place a label appears (put the same words in alt text or a visible\n * caption). It does not exist for touch — there is no pointer to follow — and\n * it does not render at all under reduced motion. The source hid the system\n * cursor; here that is opt-in, because a custom cursor that lags is harder to\n * aim with, and some people rely on a large system cursor.\n */\n\nconst cursorFollowVariants = cva(\n  cn(\n    \"flex h-4 max-w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full text-xs font-medium whitespace-nowrap shadow-lg\",\n    \"transition-[height,max-width,padding,opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-in-out-quint)]\",\n    \"data-[labelled]:h-10 data-[labelled]:max-w-80 data-[labelled]:scale-110 data-[labelled]:px-4\",\n    \"data-[state=hidden]:scale-75 data-[state=hidden]:opacity-0\",\n  ),\n  {\n    variants: {\n      /** `solid` is the source's filled dot; `invert` and `blur` treat what is behind it. */\n      appearance: {\n        solid: \"bg-primary text-primary-foreground\",\n        invert: \"border border-border text-foreground backdrop-invert\",\n        blur: \"border border-border bg-background/40 text-foreground backdrop-blur-sm\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"solid\",\n    },\n  },\n);\n\nconst SPRING = { damping: 40, stiffness: 350 };\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\n\n/** Live reduced-motion preference; false on the server, where nothing moves anyway. */\nfunction usePrefersReducedMotion(): boolean {\n  return useSyncExternalStore(\n    (notify) => {\n      const query = window.matchMedia(REDUCE);\n      query.addEventListener(\"change\", notify);\n      return () => {\n        query.removeEventListener(\"change\", notify);\n      };\n    },\n    () => window.matchMedia(REDUCE).matches,\n    () => false,\n  );\n}\n\nexport interface CursorFollowProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof cursorFollowVariants> {\n  /** Hides the system cursor inside the container. Off by default. */\n  hideCursor?: boolean;\n  /** Classes for the follower. */\n  followerClassName?: string;\n}\n\n/** A container whose pointer is trailed by a springy dot that can show a label. */\nexport function CursorFollow({\n  className,\n  followerClassName,\n  appearance,\n  hideCursor = false,\n  children,\n  onPointerEnter,\n  onPointerMove,\n  onPointerLeave,\n  onPointerOver,\n  ...props\n}: CursorFollowProps) {\n  const reduced = usePrefersReducedMotion();\n  const [visible, setVisible] = useState(false);\n  const [label, setLabel] = useState<string | null>(null);\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const springX = useSpring(x, SPRING);\n  const springY = useSpring(y, SPRING);\n\n  const tracks = (event: PointerEvent<HTMLDivElement>) =>\n    !reduced && event.pointerType !== \"touch\";\n\n  function place(event: PointerEvent<HTMLDivElement>, jump: boolean) {\n    const box = event.currentTarget.getBoundingClientRect();\n    const nextX = event.clientX - box.left;\n    const nextY = event.clientY - box.top;\n    x.set(nextX);\n    y.set(nextY);\n    // Arriving, the dot appears under the pointer instead of flying in from\n    // wherever it last was.\n    if (jump) {\n      springX.jump(nextX);\n      springY.jump(nextY);\n    }\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        data-slot=\"cursor-follow\"\n        className={cn(\n          \"relative isolate\",\n          hideCursor && !reduced && \"cursor-none [&_*]:cursor-none\",\n          className,\n        )}\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          if (!tracks(event)) return;\n          place(event, true);\n          setVisible(true);\n        }}\n        onPointerMove={(event) => {\n          onPointerMove?.(event);\n          if (!tracks(event)) return;\n          place(event, !visible);\n          if (!visible) setVisible(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setVisible(false);\n          setLabel(null);\n        }}\n        onPointerOver={(event) => {\n          onPointerOver?.(event);\n          const target = (event.target as Element).closest(\"[data-cursor-text]\");\n          setLabel(target?.getAttribute(\"data-cursor-text\") || null);\n        }}\n        {...props}\n      >\n        {children}\n        {reduced ? null : (\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"cursor-follow-layer\"\n            className=\"pointer-events-none absolute inset-0 z-10 overflow-hidden\"\n          >\n            <motion.div\n              className=\"absolute\"\n              style={{ left: 0, top: 0, x: springX, y: springY }}\n            >\n              <div\n                data-slot=\"cursor-follow-follower\"\n                data-state={visible ? \"visible\" : \"hidden\"}\n                data-labelled={label ? \"\" : undefined}\n                className={cn(cursorFollowVariants({ appearance }), followerClassName)}\n              >\n                {label ? (\n                  <span className=\"animate-[dowel-cursor-follow-in_var(--duration-normal)_var(--ease-out-quint)]\">\n                    {label}\n                  </span>\n                ) : null}\n              </div>\n            </motion.div>\n            <style href=\"dowel-cursor-follow\" precedence=\"dowel\">\n              {\"@keyframes dowel-cursor-follow-in{from{opacity:0;filter:blur(8px)}}\"}\n            </style>\n          </div>\n        )}\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport { cursorFollowVariants };\n"],"mappings":"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"}

package/dist/components/cursor-follow/index.d.ts

@@ -0,0 +1,2 @@
+import { CursorFollow, CursorFollowProps, cursorFollowVariants } from "./cursor-follow.js";
+export { CursorFollow, type CursorFollowProps, cursorFollowVariants };

package/dist/components/cursor-follow/index.js

@@ -0,0 +1,2 @@
+import { CursorFollow, cursorFollowVariants } from "./cursor-follow.js";
+export { CursorFollow, cursorFollowVariants };

package/dist/components/cursor-follow/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/cursor-follow/meta.ts
+const meta = defineMeta({
+	name: "cursor-follow",
+	title: "Cursor Follow",
+	description: "A dot that trails the pointer on a spring inside a container and swells into a label over marked elements.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: [],
+	files: ["cursor-follow.tsx"],
+	a11y: "Purely decorative: the follower is aria-hidden and ignores the pointer, and the container adds no role or tab stop (the source's role=\"application\" and tabIndex are dropped). A `data-cursor-text` label is shown only by the follower, so the same words must also be in the element's alt text or visible text. Nothing renders for touch input or under reduced motion. Hiding the system cursor is opt-in (`hideCursor`). The spring is `motion`, wrapped in MotionConfig reducedMotion=\"user\"."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/cursor-follow/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/cursor-follow/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"cursor-follow\",\n  title: \"Cursor Follow\",\n  description:\n    \"A dot that trails the pointer on a spring inside a container and swells into a label over marked elements.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [],\n  files: [\"cursor-follow.tsx\"],\n  a11y:\n    \"Purely decorative: the follower is aria-hidden and ignores the pointer, and the container adds no role \" +\n    'or tab stop (the source\\'s role=\"application\" and tabIndex are dropped). A `data-cursor-text` label is ' +\n    \"shown only by the follower, so the same words must also be in the element's alt text or visible text. \" +\n    \"Nothing renders for touch input or under reduced motion. Hiding the system cursor is opt-in \" +\n    '(`hideCursor`). The spring is `motion`, wrapped in MotionConfig reducedMotion=\"user\".',\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;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAKJ,CAAC"}

package/dist/components/dial/dial.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/dial/dial.d.ts
+declare const dialVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DialProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof dialVariants> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** PageUp/PageDown distance. Defaults to a tenth of the range. */
+  pageStep?: number;
+  /** Tick marks around the dial, ends included. */
+  detents?: number;
+  /** Snap every input to the detents rather than to `step`. */
+  snapToDetents?: boolean;
+  /** Degrees of travel from min to max. */
+  sweep?: number;
+  /** The readout in the middle, and the default value text. */
+  format?: (value: number) => string;
+  /** Extra content under the readout, e.g. a unit or caption. */
+  caption?: ReactNode;
+  disabled?: boolean;
+}
+/** A rotary dial input with detents: drag, wheel or keys. */
+declare function Dial({ className, size, value: valueProp, defaultValue, onValueChange, min, max, step, pageStep, detents, snapToDetents, sweep, format, caption, disabled, onKeyDown, onPointerDown, onPointerMove, onPointerUp, ref, ...props }: DialProps): import("react").JSX.Element;
+//#endregion
+export { Dial, DialProps, dialVariants };
+//# sourceMappingURL=dial.d.ts.map

package/dist/components/dial/dial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.d.ts","names":[],"sources":["../../../src/components/dial/dial.tsx"],"mappings":";;;cAmCM,eAAY;;6CAgBjB;UAegB,kBAEb,KAAK,yEACL,oBAAoB;EACtB;EACA;EACA,iBAAiB;EACjB;EACA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,UAAU;;EAEV,UAAU;EACV;;;iBAIc,OACd,WACA,MACA,OAAO,WACP,cACA,eACA,KACA,KACA,MACA,UACA,SACA,eACA,OACA,QACA,SACA,UACA,WACA,eACA,eACA,aACA,QACG,SACF,4BAAS,IAAA"}

package/dist/components/dial/dial.js

@@ -0,0 +1,195 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/dial/dial.tsx
+const dialVariants = cva(cn("group/dial relative inline-grid shrink-0 touch-none place-items-center rounded-full select-none", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", focusRing), {
+	variants: { size: {
+		sm: "size-28 text-lg",
+		md: "size-40 text-2xl",
+		lg: "size-52 text-3xl"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Wheel distance, in pixels, per step. */
+const WHEEL_STEP = 40;
+function point(angle, radius) {
+	const radians = (angle - 90) * Math.PI / 180;
+	return `${(50 + radius * Math.cos(radians)).toFixed(2)} ${(50 + radius * Math.sin(radians)).toFixed(2)}`;
+}
+function arc(sweep, radius) {
+	const half = sweep / 2;
+	return `M ${point(-half, radius)} A ${String(radius)} ${String(radius)} 0 ${sweep > 180 ? 1 : 0} 1 ${point(half, radius)}`;
+}
+/** A rotary dial input with detents: drag, wheel or keys. */
+function Dial({ className, size, value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, pageStep, detents = 11, snapToDetents = false, sweep = 270, format = (value) => String(value), caption, disabled = false, onKeyDown, onPointerDown, onPointerMove, onPointerUp, ref, ...props }) {
+	const [inner, setInner] = useState(defaultValue ?? min);
+	const range = Math.max(Number.EPSILON, max - min);
+	const value = Math.min(max, Math.max(min, valueProp ?? inner));
+	const fraction = (value - min) / range;
+	const [dragging, setDragging] = useState(false);
+	const rootRef = useRef(null);
+	const wheel = useRef(0);
+	const ticks = Math.max(2, Math.round(detents));
+	const quantum = snapToDetents ? range / (ticks - 1) : step;
+	function snap(raw) {
+		const snapped = min + Math.round((raw - min) / quantum) * quantum;
+		const decimals = (String(quantum).split(".")[1] ?? "").length;
+		return Number(Math.min(max, Math.max(min, snapped)).toFixed(Math.min(10, decimals + 2)));
+	}
+	function commit(raw) {
+		const next = snap(raw);
+		if (next === value) return;
+		if (valueProp === void 0) setInner(next);
+		onValueChange?.(next);
+	}
+	useEffect(() => {
+		const element = rootRef.current;
+		if (!element || disabled) return;
+		function handleWheel(event) {
+			if (document.activeElement !== element) return;
+			event.preventDefault();
+			const delta = event.deltaMode === 0 ? event.deltaY : event.deltaY * WHEEL_STEP;
+			wheel.current -= delta;
+			const steps = Math.trunc(wheel.current / WHEEL_STEP);
+			if (steps === 0) return;
+			wheel.current -= steps * WHEEL_STEP;
+			commit(value + steps * quantum);
+		}
+		element.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			element.removeEventListener("wheel", handleWheel);
+		};
+	});
+	function fromPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		if (rect.width <= 0) return;
+		const dx = event.clientX - (rect.left + rect.width / 2);
+		const dy = event.clientY - (rect.top + rect.height / 2);
+		if (dx === 0 && dy === 0) return;
+		const angle = Math.atan2(dx, -dy) * 180 / Math.PI;
+		commit(min + Math.min(1, Math.max(0, (angle + sweep / 2) / sweep)) * range);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (disabled || event.defaultPrevented) return;
+		const page = pageStep ?? Math.max(quantum, range / 10);
+		const move = {
+			ArrowUp: quantum,
+			ArrowRight: quantum,
+			ArrowDown: -quantum,
+			ArrowLeft: -quantum,
+			PageUp: page,
+			PageDown: -page,
+			Home: min - value,
+			End: max - value
+		}[event.key];
+		if (move === void 0) return;
+		event.preventDefault();
+		commit(value + move);
+	}
+	const rotation = -sweep / 2 + fraction * sweep;
+	const valueText = format(value);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			rootRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		role: "slider",
+		tabIndex: disabled ? -1 : 0,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": value,
+		"aria-valuetext": valueText,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "dial",
+		"data-disabled": disabled || void 0,
+		"data-dragging": dragging || void 0,
+		className: cn(dialVariants({ size }), className),
+		onKeyDown: handleKeyDown,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (disabled || event.button !== 0) return;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			setDragging(true);
+			fromPointer(event);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (dragging) fromPointer(event);
+		},
+		onPointerUp: (event) => {
+			onPointerUp?.(event);
+			setDragging(false);
+		},
+		onPointerCancel: () => {
+			setDragging(false);
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 100 100",
+				"aria-hidden": "true",
+				"data-slot": "dial-scale",
+				className: "absolute inset-0 size-full overflow-visible",
+				children: [
+					Array.from({ length: ticks }, (_, index) => {
+						const at = index / (ticks - 1);
+						const angle = -sweep / 2 + at * sweep;
+						return /* @__PURE__ */ jsx("line", {
+							"data-slot": "dial-detent",
+							"data-on": at <= fraction + 1e-9 || void 0,
+							x1: point(angle, 47).split(" ")[0],
+							y1: point(angle, 47).split(" ")[1],
+							x2: point(angle, 50).split(" ")[0],
+							y2: point(angle, 50).split(" ")[1],
+							strokeWidth: "1.2",
+							strokeLinecap: "round",
+							className: "stroke-muted-foreground/45 transition-[stroke] duration-[var(--duration-fast)] data-[on]:stroke-foreground"
+						}, index);
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: arc(sweep, 42),
+						fill: "none",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						className: "stroke-foreground/12"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: arc(sweep, 42),
+						fill: "none",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						pathLength: 100,
+						strokeDasharray: `${(fraction * 100).toFixed(3)} 100`,
+						"data-slot": "dial-arc",
+						className: cn("stroke-primary transition-[stroke-dasharray] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-data-[dragging]/dial:transition-none")
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-slot": "dial-knob",
+				className: cn("absolute inset-[18%] rounded-full bg-card shadow-[inset_0_0_0_1px_var(--color-border),0_1px_3px_color-mix(in_oklab,var(--color-foreground)_14%,transparent)]", "transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", "group-data-[dragging]/dial:transition-none"),
+				style: { rotate: `${rotation.toFixed(3)}deg` },
+				children: /* @__PURE__ */ jsx("span", { className: "absolute top-[7%] left-1/2 h-[16%] w-[5%] -translate-x-1/2 rounded-full bg-foreground" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-slot": "dial-readout",
+				className: "pointer-events-none relative flex flex-col items-center leading-none font-medium tabular-nums",
+				children: [valueText, caption ? /* @__PURE__ */ jsx("span", {
+					className: "mt-1 text-[0.45em] font-normal text-muted-foreground",
+					children: caption
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { Dial, dialVariants };
+
+//# sourceMappingURL=dial.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dial.js","names":[],"sources":["../../../src/components/dial/dial.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Wheel; no code referenced).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A rotary dial: a knob with a pointer notch inside an arc that fills to the\n * value, ringed by detent ticks.\n *\n * The dial itself is the role=\"slider\" element, so aria-label and the value\n * attributes land where the role is. It turns with the keyboard (arrows by a\n * step, PageUp/PageDown by a page, Home/End), by dragging (the notch points\n * at the pointer — absolute, so there is nothing to \"wind\"), and by the wheel\n * while it has focus (never on mere hover, so it cannot steal page scroll).\n * Every input snaps to `step`, or to the detents with `snapToDetents`.\n *\n * Clockwise is \"more\" in every language, so the dial does not mirror in\n * right-to-left layouts, and the arrow keys are not swapped either.\n *\n * Motion is a CSS transition on the knob's rotation, dropped while dragging\n * so it tracks the pointer 1:1; reduced motion collapses it.\n */\n\nconst dialVariants = cva(\n  cn(\n    \"group/dial relative inline-grid shrink-0 touch-none place-items-center rounded-full select-none\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n    focusRing,\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"size-28 text-lg\",\n        md: \"size-40 text-2xl\",\n        lg: \"size-52 text-3xl\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** Wheel distance, in pixels, per step. */\nconst WHEEL_STEP = 40;\n\nfunction point(angle: number, radius: number): string {\n  const radians = ((angle - 90) * Math.PI) / 180;\n  return `${(50 + radius * Math.cos(radians)).toFixed(2)} ${(50 + radius * Math.sin(radians)).toFixed(2)}`;\n}\n\nfunction arc(sweep: number, radius: number): string {\n  const half = sweep / 2;\n  return `M ${point(-half, radius)} A ${String(radius)} ${String(radius)} 0 ${sweep > 180 ? 1 : 0} 1 ${point(half, radius)}`;\n}\n\nexport interface DialProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof dialVariants> {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** PageUp/PageDown distance. Defaults to a tenth of the range. */\n  pageStep?: number;\n  /** Tick marks around the dial, ends included. */\n  detents?: number;\n  /** Snap every input to the detents rather than to `step`. */\n  snapToDetents?: boolean;\n  /** Degrees of travel from min to max. */\n  sweep?: number;\n  /** The readout in the middle, and the default value text. */\n  format?: (value: number) => string;\n  /** Extra content under the readout, e.g. a unit or caption. */\n  caption?: ReactNode;\n  disabled?: boolean;\n}\n\n/** A rotary dial input with detents: drag, wheel or keys. */\nexport function Dial({\n  className,\n  size,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  pageStep,\n  detents = 11,\n  snapToDetents = false,\n  sweep = 270,\n  format = (value) => String(value),\n  caption,\n  disabled = false,\n  onKeyDown,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  ref,\n  ...props\n}: DialProps) {\n  const [inner, setInner] = useState(defaultValue ?? min);\n  const range = Math.max(Number.EPSILON, max - min);\n  const value = Math.min(max, Math.max(min, valueProp ?? inner));\n  const fraction = (value - min) / range;\n  const [dragging, setDragging] = useState(false);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const wheel = useRef(0);\n  const ticks = Math.max(2, Math.round(detents));\n  const quantum = snapToDetents ? range / (ticks - 1) : step;\n\n  function snap(raw: number): number {\n    const snapped = min + Math.round((raw - min) / quantum) * quantum;\n    const decimals = (String(quantum).split(\".\")[1] ?? \"\").length;\n    return Number(Math.min(max, Math.max(min, snapped)).toFixed(Math.min(10, decimals + 2)));\n  }\n\n  function commit(raw: number) {\n    const next = snap(raw);\n    if (next === value) return;\n    if (valueProp === undefined) setInner(next);\n    onValueChange?.(next);\n  }\n\n  // The wheel needs a non-passive listener to keep the page still, and only\n  // acts while the dial has focus. Re-attached each render so it always sees\n  // the current value; attaching a listener is cheap.\n  useEffect(() => {\n    const element = rootRef.current;\n    if (!element || disabled) return;\n    function handleWheel(event: WheelEvent) {\n      if (document.activeElement !== element) return;\n      event.preventDefault();\n      const delta = event.deltaMode === 0 ? event.deltaY : event.deltaY * WHEEL_STEP;\n      wheel.current -= delta;\n      const steps = Math.trunc(wheel.current / WHEEL_STEP);\n      if (steps === 0) return;\n      wheel.current -= steps * WHEEL_STEP;\n      commit(value + steps * quantum);\n    }\n    element.addEventListener(\"wheel\", handleWheel, { passive: false });\n    return () => {\n      element.removeEventListener(\"wheel\", handleWheel);\n    };\n  });\n\n  function fromPointer(event: PointerEvent<HTMLDivElement>) {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (rect.width <= 0) return;\n    const dx = event.clientX - (rect.left + rect.width / 2);\n    const dy = event.clientY - (rect.top + rect.height / 2);\n    if (dx === 0 && dy === 0) return;\n    // Degrees clockwise from twelve o'clock, in (−180, 180].\n    const angle = (Math.atan2(dx, -dy) * 180) / Math.PI;\n    const turned = Math.min(1, Math.max(0, (angle + sweep / 2) / sweep));\n    commit(min + turned * range);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (disabled || event.defaultPrevented) return;\n    const page = pageStep ?? Math.max(quantum, range / 10);\n    const moves: Record<string, number> = {\n      ArrowUp: quantum,\n      ArrowRight: quantum,\n      ArrowDown: -quantum,\n      ArrowLeft: -quantum,\n      PageUp: page,\n      PageDown: -page,\n      Home: min - value,\n      End: max - value,\n    };\n    const move = moves[event.key];\n    if (move === undefined) return;\n    event.preventDefault();\n    commit(value + move);\n  }\n\n  const rotation = -sweep / 2 + fraction * sweep;\n  const valueText = format(value);\n\n  return (\n    <div\n      ref={(node) => {\n        rootRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      role=\"slider\"\n      tabIndex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled || undefined}\n      data-slot=\"dial\"\n      data-disabled={disabled || undefined}\n      data-dragging={dragging || undefined}\n      className={cn(dialVariants({ size }), className)}\n      onKeyDown={handleKeyDown}\n      onPointerDown={(event) => {\n        onPointerDown?.(event);\n        if (disabled || event.button !== 0) return;\n        event.currentTarget.setPointerCapture(event.pointerId);\n        setDragging(true);\n        fromPointer(event);\n      }}\n      onPointerMove={(event) => {\n        onPointerMove?.(event);\n        if (dragging) fromPointer(event);\n      }}\n      onPointerUp={(event) => {\n        onPointerUp?.(event);\n        setDragging(false);\n      }}\n      onPointerCancel={() => {\n        setDragging(false);\n      }}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        data-slot=\"dial-scale\"\n        className=\"absolute inset-0 size-full overflow-visible\"\n      >\n        {Array.from({ length: ticks }, (_, index) => {\n          const at = index / (ticks - 1);\n          const angle = -sweep / 2 + at * sweep;\n          return (\n            <line\n              key={index}\n              data-slot=\"dial-detent\"\n              data-on={at <= fraction + 1e-9 || undefined}\n              x1={point(angle, 47).split(\" \")[0]}\n              y1={point(angle, 47).split(\" \")[1]}\n              x2={point(angle, 50).split(\" \")[0]}\n              y2={point(angle, 50).split(\" \")[1]}\n              strokeWidth=\"1.2\"\n              strokeLinecap=\"round\"\n              className=\"stroke-muted-foreground/45 transition-[stroke] duration-[var(--duration-fast)] data-[on]:stroke-foreground\"\n            />\n          );\n        })}\n        <path\n          d={arc(sweep, 42)}\n          fill=\"none\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          className=\"stroke-foreground/12\"\n        />\n        <path\n          d={arc(sweep, 42)}\n          fill=\"none\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          pathLength={100}\n          strokeDasharray={`${(fraction * 100).toFixed(3)} 100`}\n          data-slot=\"dial-arc\"\n          className={cn(\n            \"stroke-primary transition-[stroke-dasharray] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"group-data-[dragging]/dial:transition-none\",\n          )}\n        />\n      </svg>\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"dial-knob\"\n        className={cn(\n          \"absolute inset-[18%] rounded-full bg-card shadow-[inset_0_0_0_1px_var(--color-border),0_1px_3px_color-mix(in_oklab,var(--color-foreground)_14%,transparent)]\",\n          \"transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n          \"group-data-[dragging]/dial:transition-none\",\n        )}\n        style={{ rotate: `${rotation.toFixed(3)}deg` }}\n      >\n        <span className=\"absolute top-[7%] left-1/2 h-[16%] w-[5%] -translate-x-1/2 rounded-full bg-foreground\" />\n      </div>\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"dial-readout\"\n        className=\"pointer-events-none relative flex flex-col items-center leading-none font-medium tabular-nums\"\n      >\n        {valueText}\n        {caption ? (\n          <span className=\"mt-1 text-[0.45em] font-normal text-muted-foreground\">\n            {caption}\n          </span>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport { dialVariants };\n"],"mappings":"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"}

package/dist/components/dial/index.d.ts

@@ -0,0 +1,2 @@
+import { Dial, DialProps, dialVariants } from "./dial.js";
+export { Dial, type DialProps, dialVariants };

package/dist/components/dial/index.js

@@ -0,0 +1,2 @@
+import { Dial, dialVariants } from "./dial.js";
+export { Dial, dialVariants };

package/dist/components/dial/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dial/meta.ts
+const meta = defineMeta({
+	name: "dial",
+	title: "Dial",
+	description: "A rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["dial.tsx"],
+	a11y: "The dial is the role=\"slider\" element (name it with aria-label or aria-labelledby), with aria-valuetext from `format`. Arrow keys step, PageUp/PageDown move a page, Home/End go to the ends. Dragging points the notch at the pointer; the wheel turns it only while it has focus, so it never steals page scroll. Clockwise means more in every language, so neither the dial nor its arrow keys mirror in right-to-left layouts. The knob's rotation settles instantly under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dial/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dial/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dial\",\n  title: \"Dial\",\n  description:\n    \"A rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"dial.tsx\"],\n  a11y:\n    'The dial is the role=\"slider\" element (name it with aria-label or aria-labelledby), with aria-valuetext ' +\n    \"from `format`. Arrow keys step, PageUp/PageDown move a page, Home/End go to the ends. Dragging points the \" +\n    \"notch at the pointer; the wheel turns it only while it has focus, so it never steals page scroll. \" +\n    \"Clockwise means more in every language, so neither the dial nor its arrow keys mirror in right-to-left \" +\n    \"layouts. The knob's rotation settles instantly under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,UAAU;CAClB,MACE;AAKJ,CAAC"}

package/dist/components/dialog/dialog.d.ts

@@ -17,8 +17,15 @@ declare function DialogOverlay({ className, ...props }: DialogOverlayProps): imp
 interface DialogContentProps extends ComponentPropsWithRef<typeof Dialog.Content> {
   /** Renders the built-in close button. Turn off to supply your own. */
   showCloseButton?: boolean;
+  /**
+   * How the dialog enters. `default` fades and rises into place. `spring` pops
+   * in with a slight overshoot and then brings its sections — header, body,
+   * footer — in one after another. Both stop under reduced motion, and both
+   * leave the same way.
+   */
+  animation?: "default" | "spring";
 }
-declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, animation, ...props }: DialogContentProps): import("react").JSX.Element;
 declare function DialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 type DialogTitleProps = ComponentPropsWithRef<typeof Dialog.Title>;

package/dist/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog/dialog.tsx"],"mappings":";;;;;;;;;;cAea,0BAAM,GAAA,OAAA;cACN,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;KAEZ,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBAAgB,cAAc,SAAS,qCAAkB,IAAA;UAcxD,2BAA2B,6BACnC,OAAgB;;EAGvB;;iBAGc,gBACd,WACA,UACA,oBACG,SACF,qCAAkB,IAAA;iBAyCL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,eAAe,cAAc,SAAS,+CAA4B,IAAA;KAUtE,mBAAmB,6BAA6B,OAAgB;iBAE5D,cAAc,cAAc,SAAS,mCAAgB,IAAA;KAUzD,yBAAyB,6BAA6B,OAAgB;iBAElE,oBAAoB,cAAc,SAAS,yCAAsB,IAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog/dialog.tsx"],"mappings":";;;;;;;;;;cAgBa,0BAAM,GAAA,OAAA;cACN,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;KAEZ,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBAAgB,cAAc,SAAS,qCAAkB,IAAA;UAkCxD,2BAA2B,6BACnC,OAAgB;;EAGvB;;;;;;;EAOA;;iBAGc,gBACd,WACA,UACA,iBACA,cACG,SACF,qCAAkB,IAAA;iBAuDL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,eAAe,cAAc,SAAS,+CAA4B,IAAA;KAUtE,mBAAmB,6BAA6B,OAAgB;iBAE5D,cAAc,cAAc,SAAS,mCAAgB,IAAA;KAUzD,yBAAyB,6BAA6B,OAAgB;iBAElE,oBAAoB,cAAc,SAAS,yCAAsB,IAAA"}

package/dist/components/dialog/dialog.js

@@ -2,7 +2,7 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Dialog } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dialog/dialog.tsx
 /**
 * A modal window that interrupts the user to gather a response.
@@ -22,10 +22,27 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+const PREFIX = "dowel-dialog";
+/** Each section of a spring dialog arrives 60ms after the one above it. */
+const STAGGER_STEP_MS = 60;
+const SPRING_CHILD = `[data-slot=dialog-content][data-animation=spring][data-state=open]>:not([data-slot=dialog-close])`;
+const STYLES = `
+@keyframes ${PREFIX}-spring-in{from{opacity:0;transform:translateY(.5rem) scale(.95)}}
+@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(8px)}}
+${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}
+${Array.from({ length: 5 }, (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`).join("\n")}
+${SPRING_CHILD}:nth-child(n+${String(7)}){animation-delay:calc(${String(360)}ms * var(--motion-scale))}
+`;
+function DialogContent({ className, children, showCloseButton = true, animation = "default", ...props }) {
+	const spring = animation === "spring";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [spring ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
 		"data-slot": "dialog-content",
-		className: cn("fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2", "grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl", "data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in", className),
+		"data-animation": spring ? "spring" : void 0,
+		className: cn("fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2", "grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl", "data-[state=closed]:animate-dialog-out", spring ? "data-[state=open]:animate-[dowel-dialog-spring-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]" : "data-[state=open]:animate-dialog-in", className),
 		...props,
 		children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, {
 			"data-slot": "dialog-close",
@@ -43,7 +60,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 				})
 			})
 		}) : null]
-	})] });
+	})] })] });
 }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A modal window that interrupts the user to gather a response.\n *\n * Focus is trapped while open, restored to the trigger on close, and the rest\n * of the page is hidden from assistive technology — all handled by the\n * underlying primitive rather than reimplemented here.\n */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps extends ComponentPropsWithRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Renders the built-in close button. Turn off to supply your own. */\n  showCloseButton?: boolean;\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2\",\n          \"grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl\",\n          \"data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            aria-label=\"Close\"\n            className={cn(\n              \"absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n              \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n              \"[&_svg]:size-4\",\n              focusRing,\n            )}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m6 6 12 12M18 6 6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 pe-8 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAaA,WAASC,OAAgB;AACtC,MAAa,gBAAgBA,OAAgB;AAC7C,MAAa,eAAeA,OAAgB;AAC5C,MAAa,cAAcA,OAAgB;AAI3C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qEACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAgB,cAAc,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;CACrB,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4GACA,yFACA,8EACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACA,kBACC,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,wFACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACgB,CAAA,IACrB,IACmB;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Dialog and BasicModal (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A modal window that interrupts the user to gather a response.\n *\n * Focus is trapped while open, restored to the trigger on close, and the rest\n * of the page is hidden from assistive technology — all handled by the\n * underlying primitive rather than reimplemented here.\n */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst PREFIX = \"dowel-dialog\";\n\n/** Each section of a spring dialog arrives 60ms after the one above it. */\nconst STAGGER_STEP_MS = 60;\nconst STAGGERED = 6;\n\nconst SPRING_CHILD = `[data-slot=dialog-content][data-animation=spring][data-state=open]>:not([data-slot=dialog-close])`;\n\nconst STYLES = `\n@keyframes ${PREFIX}-spring-in{from{opacity:0;transform:translateY(.5rem) scale(.95)}}\n@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(8px)}}\n${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}\n${Array.from(\n  { length: STAGGERED - 1 },\n  (_, i) =>\n    `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`,\n).join(\"\\n\")}\n${SPRING_CHILD}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:calc(${String(STAGGERED * STAGGER_STEP_MS)}ms * var(--motion-scale))}\n`;\n\nexport interface DialogContentProps extends ComponentPropsWithRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Renders the built-in close button. Turn off to supply your own. */\n  showCloseButton?: boolean;\n  /**\n   * How the dialog enters. `default` fades and rises into place. `spring` pops\n   * in with a slight overshoot and then brings its sections — header, body,\n   * footer — in one after another. Both stop under reduced motion, and both\n   * leave the same way.\n   */\n  animation?: \"default\" | \"spring\";\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  animation = \"default\",\n  ...props\n}: DialogContentProps) {\n  const spring = animation === \"spring\";\n\n  return (\n    <>\n      {spring ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <DialogPortal>\n        <DialogOverlay />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          data-animation={spring ? \"spring\" : undefined}\n          className={cn(\n            \"fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2\",\n            \"grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl\",\n            \"data-[state=closed]:animate-dialog-out\",\n            // Spelled out because Tailwind reads class names from the source.\n            spring\n              ? \"data-[state=open]:animate-[dowel-dialog-spring-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\"\n              : \"data-[state=open]:animate-dialog-in\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close\n              data-slot=\"dialog-close\"\n              aria-label=\"Close\"\n              className={cn(\n                \"absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n                \"[&_svg]:size-4\",\n                focusRing,\n              )}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"m6 6 12 12M18 6 6 18\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Content>\n      </DialogPortal>\n    </>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 pe-8 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAaA,WAASC,OAAgB;AACtC,MAAa,gBAAgBA,OAAgB;AAC7C,MAAa,eAAeA,OAAgB;AAC5C,MAAa,cAAcA,OAAgB;AAI3C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qEACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,SAAS;;AAGf,MAAM,kBAAkB;AAGxB,MAAM,eAAe;AAErB,MAAM,SAAS;aACF,OAAO;aACP,OAAO;EAClB,aAAa,aAAa,OAAO;EACjC,MAAM,KACN,EAAE,QAAQ,EAAc,IACvB,GAAG,MACF,GAAG,aAAa,aAAa,OAAO,IAAI,CAAC,EAAE,yBAAyB,QAAQ,IAAI,KAAK,eAAe,EAAE,2BAC1G,CAAC,CAAC,KAAK,IAAI,EAAE;EACX,aAAa,eAAe,OAAO,CAAa,EAAE,yBAAyB,OAAO,GAA2B,EAAE;;AAiBjH,SAAgB,cAAc,EAC5B,WACA,UACA,kBAAkB,MAClB,YAAY,WACZ,GAAG,SACkB;CACrB,MAAM,SAAS,cAAc;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,IACL,MACJ,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,kBAAgB,SAAS,WAAW,KAAA;EACpC,WAAW,GACT,4GACA,yFACA,0CAEA,SACI,6GACA,uCACJ,SACF;EACA,GAAI;EAbN,UAAA,CAeG,UACA,kBACC,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,wFACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACgB,CAAA,IACrB,IACmB;CACb,CAAA,CAAA,EAAA,CAAA,CACd,EAAA,CAAA;AAEN;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/dialog/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["dialog.tsx"],
-	a11y: "Focus is trapped while open and restored to the trigger on close; Escape and an overlay click dismiss. Always render a DialogTitle — it names the dialog for screen readers. Use DialogDescription, or aria-describedby, to explain consequential actions."
+	a11y: "Focus is trapped while open and restored to the trigger on close; Escape and an overlay click dismiss. Always render a DialogTitle — it names the dialog for screen readers. Use DialogDescription, or aria-describedby, to explain consequential actions. The optional spring entrance and section stagger stop under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/dialog/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dialog/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dialog\",\n  title: \"Dialog\",\n  description: \"A modal window that interrupts the user to gather a response.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"dialog.tsx\"],\n  a11y:\n    \"Focus is trapped while open and restored to the trigger on close; Escape and an overlay \" +\n    \"click dismiss. Always render a DialogTitle — it names the dialog for screen readers. \" +\n    \"Use DialogDescription, or aria-describedby, to explain consequential actions.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAGJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dialog/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dialog\",\n  title: \"Dialog\",\n  description: \"A modal window that interrupts the user to gather a response.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"dialog.tsx\"],\n  a11y:\n    \"Focus is trapped while open and restored to the trigger on close; Escape and an overlay \" +\n    \"click dismiss. Always render a DialogTitle — it names the dialog for screen readers. \" +\n    \"Use DialogDescription, or aria-describedby, to explain consequential actions. The \" +\n    \"optional spring entrance and section stagger stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAIJ,CAAC"}

package/dist/components/diff-viewer/diff-viewer.d.ts

@@ -30,8 +30,19 @@ interface DiffViewerProps extends Omit<ComponentPropsWithRef<"div">, "children">
   decisions?: Record<string, HunkDecision>;
   onDecision?: (hunkId: string, decision: HunkDecision) => void;
   children?: ReactNode;
+  /**
+   * Entrance for added lines. `wipe` draws each one in along the reading
+   * direction, a line after the other; context and removed lines were already
+   * there and do not move.
+   */
+  entrance?: "none" | "wipe";
+  /**
+   * Collapse a rejected hunk's lines. Its header and controls stay, so the
+   * decision can still be reversed, and the header says the lines are hidden.
+   */
+  collapseRejected?: boolean;
 }
-declare function DiffViewer({ className, hunks, label, view, decisions, onDecision, children, ...props }: DiffViewerProps): import("react").JSX.Element;
+declare function DiffViewer({ className, hunks, label, view, decisions, onDecision, children, entrance, collapseRejected, ...props }: DiffViewerProps): import("react").JSX.Element;
 /** Switches between unified and side-by-side. */
 declare function DiffViewerToolbar({ className, view, onViewChange, ...props }: Omit<ComponentPropsWithRef<"div">, "onChange"> & {
   view: "unified" | "split";