@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/folding-frame/folding-frame.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/folding-frame/folding-frame.d.ts
+declare const foldingFrameVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface FoldingFrameProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof foldingFrameVariants> {
+  /** Image URL of the photo. */
+  src: string;
+  /** Describes the photo. It names the frame's role="img". */
+  alt: string;
+  /** How open the frame is, 0 (shut) to 100 (flat open). */
+  value?: number;
+  /** Uncontrolled starting openness. Defaults to 0: shut. */
+  defaultValue?: number;
+  /** Called on every change: while dragging, per key press and on a release snap. */
+  onValueChange?: (value: number) => void;
+  /** Called when an interaction ends: pointer released or key press. */
+  onValueCommit?: (value: number) => void;
+  /** Settle fully open or shut when the pointer is released. */
+  snap?: boolean;
+  /** Strength of the liquid hinge refraction (blur and warp), 0–100. */
+  liquid?: number;
+  /** Perspective, tilt and shadow strength, 0–100. */
+  depth?: number;
+  /** Spine width and panel separation in px, 0–18. */
+  thickness?: number;
+  /** Corner radius in px, 0–24. */
+  corner?: number;
+  /** Accessible name of the slider. */
+  label?: string;
+  disabled?: boolean;
+}
+/** A photo folded shut like a book, opened by dragging across it or from the keyboard. */
+declare function FoldingFrame({ className, style, fill, src, alt, value: valueProp, defaultValue, onValueChange, onValueCommit, snap, liquid, depth, thickness, corner, label, disabled, dir: dirProp, ...props }: FoldingFrameProps): import("react").JSX.Element;
+//#endregion
+export { FoldingFrame, FoldingFrameProps, foldingFrameVariants };
+//# sourceMappingURL=folding-frame.d.ts.map

package/dist/components/folding-frame/folding-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"folding-frame.d.ts","names":[],"sources":["../../../src/components/folding-frame/folding-frame.tsx"],"mappings":";;;cA8CM,uBAAoB;;6CAazB;UAEgB,0BAEb,KAAK,yEACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;;EAEA,iBAAiB;;EAEjB,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;EACA;;;iBAuBc,eACd,WACA,OACA,MACA,KACA,KACA,OAAO,WACP,cACA,eACA,eACA,MACA,QACA,OACA,WACA,QACA,OACA,UACA,KAAK,YACF,SACF,oCAAiB,IAAA"}

package/dist/components/folding-frame/folding-frame.js

@@ -0,0 +1,298 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/folding-frame/folding-frame.tsx
+/** Cover angle when shut, in degrees. */
+const SHUT = 176;
+const foldingFrameVariants = cva("[container-type:inline-size] relative aspect-[300/214] w-75 touch-pan-y select-none", {
+	variants: { fill: {
+		light: "[--ff-ink:var(--color-foreground)] [--ff-surface:var(--color-card)]",
+		dark: "[--ff-ink:var(--color-background)] [--ff-surface:var(--color-foreground)]"
+	} },
+	defaultVariants: { fill: "light" }
+});
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+function valueText(value) {
+	if (value <= 0) return "Closed";
+	if (value >= 100) return "Open";
+	return `${String(value)}% open`;
+}
+/** Whether this engine renders an SVG filter inside `backdrop-filter`. */
+function supportsLiquid() {
+	if (typeof navigator === "undefined") return false;
+	const brands = navigator.userAgentData?.brands;
+	if (brands) return brands.some((entry) => entry.brand === "Chromium");
+	return /Chrom(e|ium)\//.test(navigator.userAgent);
+}
+const subscribe = () => () => {};
+/** A photo folded shut like a book, opened by dragging across it or from the keyboard. */
+function FoldingFrame({ className, style, fill, src, alt, value: valueProp, defaultValue = 0, onValueChange, onValueCommit, snap = false, liquid = 60, depth = 55, thickness = 9, corner = 14, label = "Unfold", disabled = false, dir: dirProp, ...props }) {
+	const rtl = Direction.useDirection(dirProp) === "rtl";
+	const [uncontrolled, setUncontrolled] = useState(() => Math.round(clamp(defaultValue, 0, 100)));
+	const controlled = valueProp !== void 0;
+	const value = Math.round(clamp(controlled ? valueProp : uncontrolled, 0, 100));
+	const [dragging, setDragging] = useState(false);
+	const latest = useRef(value);
+	const warpId = `ff-warp-${useId().replace(/:/g, "")}`;
+	const liquidMode = useSyncExternalStore(subscribe, () => supportsLiquid() ? "svg" : "fallback", () => "fallback");
+	function setValue(raw) {
+		const next = Math.round(clamp(raw, 0, 100));
+		latest.current = next;
+		if (next === value) return next;
+		if (!controlled) setUncontrolled(next);
+		onValueChange?.(next);
+		return next;
+	}
+	function fromPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		if (rect.width === 0) return null;
+		const along = (event.clientX - rect.left) / rect.width;
+		return 100 * (1 - ((rtl ? 1 - along : along) - .1) / .8);
+	}
+	function handlePointerDown(event) {
+		if (disabled || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		latest.current = value;
+		setDragging(true);
+	}
+	function handlePointerMove(event) {
+		if (!dragging) return;
+		const next = fromPointer(event);
+		if (next !== null) setValue(next);
+	}
+	function handlePointerEnd() {
+		if (!dragging) return;
+		setDragging(false);
+		const settled = snap ? setValue(latest.current >= 50 ? 100 : 0) : latest.current;
+		onValueCommit?.(settled);
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		const forward = rtl ? -5 : 5;
+		const moves = {
+			ArrowRight: forward,
+			ArrowLeft: -forward,
+			ArrowUp: 5,
+			ArrowDown: -5,
+			PageUp: 25,
+			PageDown: -25
+		};
+		let next;
+		if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = 100;
+		else if (event.key in moves) next = value + (moves[event.key] ?? 0);
+		else return;
+		event.preventDefault();
+		const committed = setValue(next);
+		onValueCommit?.(committed);
+	}
+	const closed = 1 - value / 100;
+	const angle = SHUT * closed;
+	const side = rtl ? -1 : 1;
+	const strength = clamp(depth, 0, 100) / 55;
+	const t = clamp(thickness, 0, 18);
+	const r = clamp(corner, 0, 24);
+	const wet = clamp(liquid, 0, 100) / 60;
+	const shade = .4 * Math.min(1, angle / 55, (SHUT - angle) / 76) * Math.min(strength, 1.6);
+	const cast = clamp(.55 * closed * strength, 0, 1);
+	const blur = 6.6 * closed * wet;
+	const sheen = `brightness(${(1 + .26 * closed * Math.min(wet, 1)).toFixed(3)})`;
+	const ease = dragging ? "none" : "transform var(--duration-slow) var(--ease-out-quint), opacity var(--duration-slow) var(--ease-out-quint), width var(--duration-slow) var(--ease-out-quint)";
+	const ink = (percent) => `color-mix(in oklab, var(--ff-ink) ${String(percent)}%, transparent)`;
+	const dark = (percent) => `color-mix(in oklab, var(--color-overlay) ${String(Math.min(100, Math.round(percent * 1.6)))}%, transparent)`;
+	const towardHinge = rtl ? "to left" : "to right";
+	const coverRadius = rtl ? `0 ${String(r)}px ${String(r)}px 0` : `${String(r)}px 0 0 ${String(r)}px`;
+	const restRadius = rtl ? `${String(r)}px 0 0 ${String(r)}px` : `0 ${String(r)}px ${String(r)}px 0`;
+	const coverLeft = rtl ? "50%" : "0";
+	const restLeft = rtl ? "0" : "50%";
+	const half = {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		width: "50%",
+		transformStyle: "preserve-3d"
+	};
+	const face = {
+		position: "absolute",
+		inset: 0,
+		overflow: "hidden",
+		backfaceVisibility: "hidden",
+		background: "var(--ff-surface)"
+	};
+	const photo = (showStart, opacity = 1) => /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			top: 0,
+			left: showStart === !rtl ? "0" : "-100%",
+			width: "200%",
+			height: "100%",
+			maxWidth: "none",
+			objectFit: "cover",
+			opacity
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "folding-frame",
+		"data-state": value >= 100 ? "open" : value <= 0 ? "closed" : "partial",
+		"data-dragging": dragging ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-liquid": liquidMode,
+		dir: dirProp,
+		className: cn(foldingFrameVariants({ fill }), disabled && "opacity-55", className),
+		style,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				width: "0",
+				height: "0",
+				"aria-hidden": "true",
+				className: "absolute",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: warpId,
+					children: [/* @__PURE__ */ jsx("feTurbulence", {
+						type: "fractalNoise",
+						baseFrequency: "0.012 0.06",
+						numOctaves: 2,
+						seed: 3,
+						result: "noise"
+					}), /* @__PURE__ */ jsx("feDisplacementMap", {
+						in: "SourceGraphic",
+						in2: "noise",
+						scale: (18 * wet).toFixed(2),
+						xChannelSelector: "R",
+						yChannelSelector: "G"
+					})]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "img",
+				"aria-label": alt,
+				"data-slot": "folding-frame-stage",
+				className: "absolute inset-0",
+				style: { perspective: `${(300 / Math.max(strength, .3)).toFixed(1)}cqi` },
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-slot": "folding-frame-rig",
+					className: "absolute inset-0",
+					style: {
+						transformStyle: "preserve-3d",
+						transition: ease,
+						transform: `translateX(${(-25 * closed * side).toFixed(3)}%) rotateX(${(-15 * closed * strength).toFixed(3)}deg) rotateY(${(13 * closed * strength * side).toFixed(3)}deg)`
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "folding-frame-spine",
+							className: "absolute inset-y-0",
+							style: {
+								left: "50%",
+								width: t,
+								borderRadius: t / 2,
+								background: `linear-gradient(to right, ${ink(50)}, ${ink(82)}, ${ink(62)})`,
+								transform: `translateX(-50%) translateZ(${String(-t / 2)}px)`
+							}
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "folding-frame-rest",
+							style: {
+								...half,
+								left: restLeft,
+								transform: `translateZ(${String(-t / 2)}px)`
+							},
+							children: /* @__PURE__ */ jsxs("div", {
+								style: {
+									...face,
+									borderRadius: restRadius
+								},
+								children: [photo(false), /* @__PURE__ */ jsx("div", {
+									"data-slot": "folding-frame-cast",
+									className: "absolute inset-0",
+									style: {
+										opacity: cast,
+										transition: ease,
+										background: `linear-gradient(${towardHinge}, ${dark(62)}, ${dark(6)})`
+									}
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": "folding-frame-cover",
+							style: {
+								...half,
+								left: coverLeft,
+								transformOrigin: rtl ? "left center" : "right center",
+								transition: ease,
+								transform: `rotateY(${(angle * side).toFixed(3)}deg) translateZ(${String(-t / 2)}px)`
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									...face,
+									borderRadius: coverRadius
+								},
+								children: [photo(true), /* @__PURE__ */ jsx("div", {
+									"data-slot": "folding-frame-shade",
+									className: "absolute inset-0",
+									style: {
+										opacity: shade,
+										transition: ease,
+										background: `linear-gradient(${towardHinge}, transparent, ${dark(50)})`
+									}
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								"data-slot": "folding-frame-back",
+								style: {
+									...face,
+									borderRadius: coverRadius,
+									transform: "rotateY(180deg)",
+									background: "color-mix(in oklab, var(--ff-surface) 82%, var(--ff-ink))"
+								},
+								children: photo(false, .5)
+							})]
+						}),
+						wet > 0 ? /* @__PURE__ */ jsx("div", {
+							"data-slot": "folding-frame-liquid",
+							className: "pointer-events-none absolute inset-y-0",
+							style: {
+								left: "50%",
+								width: `${(11.67 * closed * wet).toFixed(3)}cqi`,
+								transition: ease,
+								transform: `translateX(-50%) translateZ(${String(t / 2 + 1)}px)`,
+								maskImage: "linear-gradient(to right, transparent, currentColor 30%, currentColor 70%, transparent)",
+								backdropFilter: liquidMode === "svg" ? `blur(${blur.toFixed(2)}px) ${sheen} url(#${warpId})` : `blur(${blur.toFixed(2)}px) ${sheen}`,
+								WebkitBackdropFilter: `blur(${blur.toFixed(2)}px) ${sheen}`
+							}
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": label,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": value,
+				"aria-valuetext": valueText(value),
+				"aria-orientation": "horizontal",
+				"aria-disabled": disabled || void 0,
+				"data-slot": "folding-frame-handle",
+				className: cn("absolute inset-0 z-10", disabled ? "cursor-not-allowed" : "cursor-grab active:cursor-grabbing", focusRing),
+				style: { borderRadius: r },
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerEnd,
+				onPointerCancel: handlePointerEnd
+			})
+		]
+	});
+}
+//#endregion
+export { FoldingFrame, foldingFrameVariants };
+
+//# sourceMappingURL=folding-frame.js.map

package/dist/components/folding-frame/folding-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folding-frame.js","names":[],"sources":["../../../src/components/folding-frame/folding-frame.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Folding frame (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Direction } from \"radix-ui\";\nimport {\n  useId,\n  useRef,\n  useState,\n  useSyncExternalStore,\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 photo folded shut like a book: the start half is turned over onto the end\n * half, the closed card leans back in 3D, and dragging across it opens the\n * cover until the whole photo lies flat and face-on.\n *\n * The source had no keyboard path. Here a transparent role=\"slider\" overlay\n * (\"Unfold\", 0–100 % open) takes the pointer and the keys: arrows ±5 (left and\n * right follow the reading direction), Page Up/Down ±25, Home shut, End open.\n * The photo is exposed once, as role=\"img\" named by `alt`; the halves, spine\n * and shading are aria-hidden inside it.\n *\n * The drag is direct manipulation: the cover angle follows the pointer's\n * position, not its momentum, so there is no spring and no `motion`. Keyboard\n * steps and the optional release `snap` ease with a CSS transition that the\n * global reduced-motion rule makes instant.\n *\n * The liquid hinge band refracts with `backdrop-filter: blur() url(#warp)`,\n * which only Chromium renders. Elsewhere it falls back to the blur alone;\n * `data-liquid` on the root says which (\"svg\" or \"fallback\").\n *\n * In right-to-left layouts the book opens the other way: the cover is the\n * inline-end half and the drag runs left-to-right.\n */\n\n/** Cover angle when shut, in degrees. */\nconst SHUT = 176;\n\nconst foldingFrameVariants = cva(\n  \"[container-type:inline-size] relative aspect-[300/214] w-75 touch-pan-y select-none\",\n  {\n    variants: {\n      fill: {\n        light: \"[--ff-ink:var(--color-foreground)] [--ff-surface:var(--color-card)]\",\n        dark: \"[--ff-ink:var(--color-background)] [--ff-surface:var(--color-foreground)]\",\n      },\n    },\n    defaultVariants: {\n      fill: \"light\",\n    },\n  },\n);\n\nexport interface FoldingFrameProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof foldingFrameVariants> {\n  /** Image URL of the photo. */\n  src: string;\n  /** Describes the photo. It names the frame's role=\"img\". */\n  alt: string;\n  /** How open the frame is, 0 (shut) to 100 (flat open). */\n  value?: number;\n  /** Uncontrolled starting openness. Defaults to 0: shut. */\n  defaultValue?: number;\n  /** Called on every change: while dragging, per key press and on a release snap. */\n  onValueChange?: (value: number) => void;\n  /** Called when an interaction ends: pointer released or key press. */\n  onValueCommit?: (value: number) => void;\n  /** Settle fully open or shut when the pointer is released. */\n  snap?: boolean;\n  /** Strength of the liquid hinge refraction (blur and warp), 0–100. */\n  liquid?: number;\n  /** Perspective, tilt and shadow strength, 0–100. */\n  depth?: number;\n  /** Spine width and panel separation in px, 0–18. */\n  thickness?: number;\n  /** Corner radius in px, 0–24. */\n  corner?: number;\n  /** Accessible name of the slider. */\n  label?: string;\n  disabled?: boolean;\n}\n\nconst clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);\n\nfunction valueText(value: number): string {\n  if (value <= 0) return \"Closed\";\n  if (value >= 100) return \"Open\";\n  return `${String(value)}% open`;\n}\n\ntype UAData = { brands?: { brand: string }[] };\n\n/** Whether this engine renders an SVG filter inside `backdrop-filter`. */\nfunction supportsLiquid(): boolean {\n  if (typeof navigator === \"undefined\") return false;\n  const brands = (navigator as Navigator & { userAgentData?: UAData }).userAgentData?.brands;\n  if (brands) return brands.some((entry) => entry.brand === \"Chromium\");\n  return /Chrom(e|ium)\\//.test(navigator.userAgent);\n}\nconst subscribe = () => () => {};\n\n/** A photo folded shut like a book, opened by dragging across it or from the keyboard. */\nexport function FoldingFrame({\n  className,\n  style,\n  fill,\n  src,\n  alt,\n  value: valueProp,\n  defaultValue = 0,\n  onValueChange,\n  onValueCommit,\n  snap = false,\n  liquid = 60,\n  depth = 55,\n  thickness = 9,\n  corner = 14,\n  label = \"Unfold\",\n  disabled = false,\n  dir: dirProp,\n  ...props\n}: FoldingFrameProps) {\n  const dir = Direction.useDirection(dirProp as \"ltr\" | \"rtl\" | undefined);\n  const rtl = dir === \"rtl\";\n  const [uncontrolled, setUncontrolled] = useState(() =>\n    Math.round(clamp(defaultValue, 0, 100)),\n  );\n  const controlled = valueProp !== undefined;\n  const value = Math.round(clamp(controlled ? valueProp : uncontrolled, 0, 100));\n  const [dragging, setDragging] = useState(false);\n  const latest = useRef(value);\n  const warpId = `ff-warp-${useId().replace(/:/g, \"\")}`;\n  const liquidMode = useSyncExternalStore(\n    subscribe,\n    () => (supportsLiquid() ? \"svg\" : \"fallback\"),\n    () => \"fallback\",\n  );\n\n  function setValue(raw: number): number {\n    const next = Math.round(clamp(raw, 0, 100));\n    latest.current = next;\n    if (next === value) return next;\n    if (!controlled) setUncontrolled(next);\n    onValueChange?.(next);\n    return next;\n  }\n\n  /* Pointer: the cover angle follows x. ~90% across is shut, ≤10% is flat. */\n  function fromPointer(event: PointerEvent<HTMLDivElement>): number | null {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (rect.width === 0) return null;\n    const along = (event.clientX - rect.left) / rect.width;\n    const reach = rtl ? 1 - along : along;\n    return 100 * (1 - (reach - 0.1) / 0.8);\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (disabled || event.button !== 0) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    latest.current = value;\n    setDragging(true);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    if (!dragging) return;\n    const next = fromPointer(event);\n    if (next !== null) setValue(next);\n  }\n\n  function handlePointerEnd() {\n    if (!dragging) return;\n    setDragging(false);\n    const settled = snap ? setValue(latest.current >= 50 ? 100 : 0) : latest.current;\n    onValueCommit?.(settled);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (disabled) return;\n    const forward = rtl ? -5 : 5;\n    const moves: Record<string, number> = {\n      ArrowRight: forward,\n      ArrowLeft: -forward,\n      ArrowUp: 5,\n      ArrowDown: -5,\n      PageUp: 25,\n      PageDown: -25,\n    };\n    let next: number;\n    if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = 100;\n    else if (event.key in moves) next = value + (moves[event.key] ?? 0);\n    else return;\n    event.preventDefault();\n    const committed = setValue(next);\n    onValueCommit?.(committed);\n  }\n\n  /* Geometry ----------------------------------------------------------- */\n  const closed = 1 - value / 100;\n  const angle = SHUT * closed;\n  const side = rtl ? -1 : 1;\n  const strength = clamp(depth, 0, 100) / 55;\n  const t = clamp(thickness, 0, 18);\n  const r = clamp(corner, 0, 24);\n  const wet = clamp(liquid, 0, 100) / 60;\n  // Darkest mid-fold (55°–100°), clear when shut or flat.\n  const shade = 0.4 * Math.min(1, angle / 55, (SHUT - angle) / 76) * Math.min(strength, 1.6);\n  const cast = clamp(0.55 * closed * strength, 0, 1);\n  const blur = 6.6 * closed * wet;\n  const sheen = `brightness(${(1 + 0.26 * closed * Math.min(wet, 1)).toFixed(3)})`;\n  const ease = dragging\n    ? \"none\"\n    : \"transform var(--duration-slow) var(--ease-out-quint), opacity var(--duration-slow) var(--ease-out-quint), width var(--duration-slow) var(--ease-out-quint)\";\n  const ink = (percent: number) =>\n    `color-mix(in oklab, var(--ff-ink) ${String(percent)}%, transparent)`;\n  // Shade on the photo is dark in both themes, so it comes from the overlay\n  // token (a translucent near-black in light and dark). Its own alpha is about\n  // 0.55, so the mix is scaled up to land near the measured opacities.\n  const dark = (percent: number) =>\n    `color-mix(in oklab, var(--color-overlay) ${String(Math.min(100, Math.round(percent * 1.6)))}%, transparent)`;\n  const towardHinge = rtl ? \"to left\" : \"to right\";\n  const coverRadius = rtl\n    ? `0 ${String(r)}px ${String(r)}px 0`\n    : `${String(r)}px 0 0 ${String(r)}px`;\n  const restRadius = rtl\n    ? `${String(r)}px 0 0 ${String(r)}px`\n    : `0 ${String(r)}px ${String(r)}px 0`;\n  const coverLeft = rtl ? \"50%\" : \"0\";\n  const restLeft = rtl ? \"0\" : \"50%\";\n\n  const half: CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    bottom: 0,\n    width: \"50%\",\n    transformStyle: \"preserve-3d\",\n  };\n  const face: CSSProperties = {\n    position: \"absolute\",\n    inset: 0,\n    overflow: \"hidden\",\n    backfaceVisibility: \"hidden\",\n    background: \"var(--ff-surface)\",\n  };\n  // The photo is twice a half's width; each half shows its own side of it.\n  const photo = (showStart: boolean, opacity = 1) => (\n    <img\n      src={src}\n      alt=\"\"\n      draggable={false}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: showStart === !rtl ? \"0\" : \"-100%\",\n        width: \"200%\",\n        height: \"100%\",\n        maxWidth: \"none\",\n        objectFit: \"cover\",\n        opacity,\n      }}\n    />\n  );\n\n  return (\n    <div\n      data-slot=\"folding-frame\"\n      data-state={value >= 100 ? \"open\" : value <= 0 ? \"closed\" : \"partial\"}\n      data-dragging={dragging ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-liquid={liquidMode}\n      dir={dirProp}\n      className={cn(foldingFrameVariants({ fill }), disabled && \"opacity-55\", className)}\n      style={style}\n      {...props}\n    >\n      <svg width=\"0\" height=\"0\" aria-hidden=\"true\" className=\"absolute\">\n        <defs>\n          <filter id={warpId}>\n            <feTurbulence\n              type=\"fractalNoise\"\n              baseFrequency=\"0.012 0.06\"\n              numOctaves={2}\n              seed={3}\n              result=\"noise\"\n            />\n            <feDisplacementMap\n              in=\"SourceGraphic\"\n              in2=\"noise\"\n              scale={(18 * wet).toFixed(2)}\n              xChannelSelector=\"R\"\n              yChannelSelector=\"G\"\n            />\n          </filter>\n        </defs>\n      </svg>\n      <div\n        role=\"img\"\n        aria-label={alt}\n        data-slot=\"folding-frame-stage\"\n        className=\"absolute inset-0\"\n        style={{ perspective: `${(300 / Math.max(strength, 0.3)).toFixed(1)}cqi` }}\n      >\n        <div\n          data-slot=\"folding-frame-rig\"\n          className=\"absolute inset-0\"\n          style={{\n            transformStyle: \"preserve-3d\",\n            transition: ease,\n            transform: `translateX(${(-25 * closed * side).toFixed(3)}%) rotateX(${(-15 * closed * strength).toFixed(3)}deg) rotateY(${(13 * closed * strength * side).toFixed(3)}deg)`,\n          }}\n        >\n          <div\n            data-slot=\"folding-frame-spine\"\n            className=\"absolute inset-y-0\"\n            style={{\n              left: \"50%\",\n              width: t,\n              borderRadius: t / 2,\n              background: `linear-gradient(to right, ${ink(50)}, ${ink(82)}, ${ink(62)})`,\n              transform: `translateX(-50%) translateZ(${String(-t / 2)}px)`,\n            }}\n          />\n          <div\n            data-slot=\"folding-frame-rest\"\n            style={{ ...half, left: restLeft, transform: `translateZ(${String(-t / 2)}px)` }}\n          >\n            <div style={{ ...face, borderRadius: restRadius }}>\n              {photo(false)}\n              <div\n                data-slot=\"folding-frame-cast\"\n                className=\"absolute inset-0\"\n                style={{\n                  opacity: cast,\n                  transition: ease,\n                  background: `linear-gradient(${towardHinge}, ${dark(62)}, ${dark(6)})`,\n                }}\n              />\n            </div>\n          </div>\n          <div\n            data-slot=\"folding-frame-cover\"\n            style={{\n              ...half,\n              left: coverLeft,\n              transformOrigin: rtl ? \"left center\" : \"right center\",\n              transition: ease,\n              transform: `rotateY(${(angle * side).toFixed(3)}deg) translateZ(${String(-t / 2)}px)`,\n            }}\n          >\n            <div style={{ ...face, borderRadius: coverRadius }}>\n              {photo(true)}\n              <div\n                data-slot=\"folding-frame-shade\"\n                className=\"absolute inset-0\"\n                style={{\n                  opacity: shade,\n                  transition: ease,\n                  background: `linear-gradient(${towardHinge}, transparent, ${dark(50)})`,\n                }}\n              />\n            </div>\n            <div\n              data-slot=\"folding-frame-back\"\n              style={{\n                ...face,\n                borderRadius: coverRadius,\n                transform: \"rotateY(180deg)\",\n                background: \"color-mix(in oklab, var(--ff-surface) 82%, var(--ff-ink))\",\n              }}\n            >\n              {photo(false, 0.5)}\n            </div>\n          </div>\n          {wet > 0 ? (\n            <div\n              data-slot=\"folding-frame-liquid\"\n              className=\"pointer-events-none absolute inset-y-0\"\n              style={{\n                left: \"50%\",\n                width: `${(11.67 * closed * wet).toFixed(3)}cqi`,\n                transition: ease,\n                transform: `translateX(-50%) translateZ(${String(t / 2 + 1)}px)`,\n                // The sheen brightens the photo under the band rather than\n                // painting a colour over it, so it reads as light in both\n                // themes; the mask gives it soft edges.\n                maskImage:\n                  \"linear-gradient(to right, transparent, currentColor 30%, currentColor 70%, transparent)\",\n                backdropFilter:\n                  liquidMode === \"svg\"\n                    ? `blur(${blur.toFixed(2)}px) ${sheen} url(#${warpId})`\n                    : `blur(${blur.toFixed(2)}px) ${sheen}`,\n                WebkitBackdropFilter: `blur(${blur.toFixed(2)}px) ${sheen}`,\n              }}\n            />\n          ) : null}\n        </div>\n      </div>\n      <div\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={label}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={value}\n        aria-valuetext={valueText(value)}\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        data-slot=\"folding-frame-handle\"\n        className={cn(\n          \"absolute inset-0 z-10\",\n          disabled ? \"cursor-not-allowed\" : \"cursor-grab active:cursor-grabbing\",\n          focusRing,\n        )}\n        style={{ borderRadius: r }}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerEnd}\n        onPointerCancel={handlePointerEnd}\n      />\n    </div>\n  );\n}\n\nexport { foldingFrameVariants };\n"],"mappings":"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"}

package/dist/components/folding-frame/index.d.ts

@@ -0,0 +1,2 @@
+import { FoldingFrame, FoldingFrameProps, foldingFrameVariants } from "./folding-frame.js";
+export { FoldingFrame, type FoldingFrameProps, foldingFrameVariants };

package/dist/components/folding-frame/index.js

@@ -0,0 +1,2 @@
+import { FoldingFrame, foldingFrameVariants } from "./folding-frame.js";
+export { FoldingFrame, foldingFrameVariants };

package/dist/components/folding-frame/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/folding-frame/meta.ts
+const meta = defineMeta({
+	name: "folding-frame",
+	title: "Folding Frame",
+	description: "A photo folded shut like a book in 3D — drag across it (or use the keys) to open the cover until it lies flat.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["folding-frame.tsx"],
+	a11y: "The photo is exposed once, as role=\"img\" named by `alt`; halves, spine, shading and the hinge band are presentational inside it. A focusable role=\"slider\" overlay (default name \"Unfold\", 0–100) carries the openness with aria-valuetext \"Closed\", \"40% open\" or \"Open\". Arrows step by 5 (left/right follow the reading direction), Page Up/Down by 25, Home shuts and End opens. The drag follows pointer position rather than momentum and mirrors in right-to-left layouts. Key steps and the optional release snap ease with a CSS transition that is instant under reduced motion. The liquid refraction is Chromium-only; other engines get the blur alone (data-liquid=\"fallback\")."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/folding-frame/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/folding-frame/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"folding-frame\",\n  title: \"Folding Frame\",\n  description:\n    \"A photo folded shut like a book in 3D — drag across it (or use the keys) to open the cover until it lies flat.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"folding-frame.tsx\"],\n  a11y:\n    'The photo is exposed once, as role=\"img\" named by `alt`; halves, spine, shading and the hinge band are ' +\n    'presentational inside it. A focusable role=\"slider\" overlay (default name \"Unfold\", 0–100) carries the ' +\n    'openness with aria-valuetext \"Closed\", \"40% open\" or \"Open\". Arrows step by 5 (left/right follow the ' +\n    \"reading direction), Page Up/Down by 25, Home shuts and End opens. The drag follows pointer position rather \" +\n    \"than momentum and mirrors in right-to-left layouts. Key steps and the optional release snap ease with a CSS \" +\n    \"transition that is instant under reduced motion. The liquid refraction is Chromium-only; other engines get \" +\n    'the blur alone (data-liquid=\"fallback\").',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAOJ,CAAC"}

package/dist/components/form/form.d.ts

@@ -28,7 +28,16 @@ type FormControlProps = ComponentPropsWithRef<typeof Slot.Root>;
  */
 declare function FormControl(props: FormControlProps): import("react").JSX.Element;
 declare function FormDescription({ className, ...props }: ComponentPropsWithRef<"p">): import("react").JSX.Element;
-type FormMessageProps = ComponentPropsWithRef<"p">;
+interface FormMessageProps extends ComponentPropsWithRef<"p"> {
+  /**
+   * Keeps a cleared message on screen long enough to fade and collapse, rather
+   * than removing it at once. The departing copy is `aria-hidden`, carries no
+   * id and is no longer named by the control, so it is never announced or
+   * described. Off by default: with it on, the old text is briefly still in
+   * the DOM, which tests asserting its absence immediately would notice.
+   */
+  animateExit?: boolean;
+}
 /**
  * Renders the field's error.
  *
@@ -37,7 +46,7 @@ type FormMessageProps = ComponentPropsWithRef<"p">;
  * region: a validation message that arrives after the user has moved on should
  * be announced, but should not interrupt what is being read.
  */
-declare function FormMessage({ className, children, ...props }: FormMessageProps): import("react").JSX.Element | null;
+declare function FormMessage({ className, children, animateExit, ...props }: FormMessageProps): import("react").JSX.Element | null;
 //#endregion
 export { Form, FormControl, FormControlProps, FormDescription, FormField, FormFieldProps, FormLabel, FormLabelProps, FormMessage, FormMessageProps, FormProps };
 //# sourceMappingURL=form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","names":[],"sources":["../../../src/components/form/form.tsx"],"mappings":";;;KA4DY,YAAY;;;;;;;;iBASR,OAAO,WAAW,eAAsB,SAAS,4BAAS,IAAA;UAWzD,uBAAuB;;EAEtC;;EAEA,QAAQ;;iBAGM,YAAY,WAAW,MAAM,UAAU,SAAS,iCAAc,IAAA;KAqClE,iBAAiB,6BAA6B,MAAe;iBAEzD,YAAY,cAAc,SAAS,iCAAc,IAAA;KAmBrD,mBAAmB,6BAA6B,KAAK;;;;;;;iBAQjD,YAAY,OAAO,mCAAgB,IAAA;iBAmBnC,kBAAkB,cAAc,SAAS,6CAA0B,IAAA;KAoBvE,mBAAmB;;;;;;;;;iBAUf,cAAc,WAAW,aAAa,SAAS,mCAAgB,IAAA"}
+{"version":3,"file":"form.d.ts","names":[],"sources":["../../../src/components/form/form.tsx"],"mappings":";;;KA8DY,YAAY;;;;;;;;iBASR,OAAO,WAAW,eAAsB,SAAS,4BAAS,IAAA;UAWzD,uBAAuB;;EAEtC;;EAEA,QAAQ;;iBAGM,YAAY,WAAW,MAAM,UAAU,SAAS,iCAAc,IAAA;KAqClE,iBAAiB,6BAA6B,MAAe;iBAEzD,YAAY,cAAc,SAAS,iCAAc,IAAA;KAmBrD,mBAAmB,6BAA6B,KAAK;;;;;;;iBAQjD,YAAY,OAAO,mCAAgB,IAAA;iBAmBnC,kBAAkB,cAAc,SAAS,6CAA0B,IAAA;UAoBlE,yBAAyB;;;;;;;;EAQxC;;;;;;;;;;iBA4Bc,cACd,WACA,UACA,gBACG,SACF,mCAAgB,IAAA"}

package/dist/components/form/form.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/utils.js";
 import { Label, Slot } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 //#region src/components/form/form.tsx
 const FormFieldContext = createContext(null);
@@ -99,6 +99,15 @@ function FormDescription({ className, ...props }) {
 		...props
 	});
 }
+const MESSAGE_KEYFRAMES = `
+@keyframes dowel-form-message-in{from{opacity:0;transform:translateY(-0.25rem);height:0;overflow:clip}to{overflow:clip}}
+@keyframes dowel-form-message-out{from{overflow:clip}to{opacity:0;transform:translateY(-0.25rem);height:0;overflow:clip}}
+[data-slot="form-message"][data-state]{interpolate-size:allow-keywords}
+[data-slot="form-message"][data-state="open"]{animation:dowel-form-message-in var(--duration-normal) var(--ease-out-quint)}
+[data-slot="form-message"][data-state="closed"]{animation:dowel-form-message-out var(--duration-fast) var(--ease-in-quint) forwards}
+`;
+/** Removes a departing message if its animation never runs (hidden, unstyled). */
+const EXIT_FALLBACK_MS = 1e3;
 /**
 * Renders the field's error.
 *
@@ -107,19 +116,60 @@ function FormDescription({ className, ...props }) {
 * region: a validation message that arrives after the user has moved on should
 * be announced, but should not interrupt what is being read.
 */
-function FormMessage({ className, children, ...props }) {
+function FormMessage({ className, children, animateExit = false, ...props }) {
 	const { messageId, error } = useFormField("FormMessage");
 	const content = children ?? error;
-	if (!content) return null;
-	return /* @__PURE__ */ jsx("p", {
+	const [shown, setShown] = useState(content);
+	const [leaving, setLeaving] = useState(null);
+	if (content !== shown) {
+		setShown(content);
+		setLeaving(!content && animateExit ? shown : null);
+	}
+	useEffect(() => {
+		if (!leaving) return;
+		const timer = setTimeout(() => {
+			setLeaving(null);
+		}, EXIT_FALLBACK_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [leaving]);
+	const listenForExitEnd = useCallback((element) => {
+		if (!element) return;
+		const onEnd = (event) => {
+			if (event.target === element) setLeaving(null);
+		};
+		element.addEventListener("animationend", onEnd);
+		return () => {
+			element.removeEventListener("animationend", onEnd);
+		};
+	}, []);
+	const styles = /* @__PURE__ */ jsx("style", {
+		href: "dowel-form-message",
+		precedence: "dowel",
+		children: MESSAGE_KEYFRAMES
+	});
+	if (!content) {
+		if (!leaving) return null;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [styles, /* @__PURE__ */ jsx("p", {
+			"data-slot": "form-message",
+			"data-state": "closed",
+			"aria-hidden": "true",
+			ref: listenForExitEnd,
+			className: cn("text-xs font-medium text-destructive", className),
+			children: leaving
+		})] });
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [styles, /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-message",
+		"data-state": "open",
 		id: messageId,
 		role: "status",
 		"aria-live": "polite",
 		className: cn("text-xs font-medium text-destructive", className),
 		...props,
 		children: content
-	});
+	})] });
 }
 //#endregion
 export { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage };

package/dist/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":["LabelPrimitive"],"sources":["../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label as LabelPrimitive, Slot } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Accessible wiring for form fields.\n *\n * Deliberately **not** bound to a form library. What is actually hard about a\n * form field is the ARIA plumbing — generating an id, pointing the label at the\n * control, assembling `aria-describedby` from the description and the error,\n * and flipping `aria-invalid` — and that plumbing is identical whether the\n * state comes from `useState`, React Hook Form, Formik or a server action.\n *\n * Binding to one library would make everyone else install it to get the\n * plumbing, and would make the source you own harder to change. Pass `error`\n * from whatever holds your state:\n *\n *   <FormField name=\"email\" error={errors.email?.message}>\n *     <FormLabel>Email</FormLabel>\n *     <FormControl>\n *       <Input {...register(\"email\")} />\n *     </FormControl>\n *     <FormDescription>We will never share it.</FormDescription>\n *     <FormMessage />\n *   </FormField>\n */\n\ninterface FormFieldContextValue {\n  id: string;\n  name: string | undefined;\n  descriptionId: string;\n  messageId: string;\n  error: ReactNode;\n  hasDescription: boolean;\n  registerDescription: (present: boolean) => void;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nfunction useFormField(component: string): FormFieldContextValue {\n  const context = useContext(FormFieldContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <FormField>.`);\n  }\n  return context;\n}\n\nexport type FormProps = ComponentPropsWithRef<\"form\">;\n\n/**\n * A form element.\n *\n * `noValidate` is on by default: when the form renders its own messages, the\n * browser's validation bubbles compete with them, appear in a different visual\n * language, and cannot be styled. Pass `noValidate={false}` to opt back in.\n */\nexport function Form({ className, noValidate = true, ...props }: FormProps) {\n  return (\n    <form\n      data-slot=\"form\"\n      noValidate={noValidate}\n      className={cn(\"grid gap-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FormFieldProps extends ComponentPropsWithRef<\"div\"> {\n  /** Field name, mirrored onto the wrapper for form-library integration. */\n  name?: string;\n  /** Present when the field is invalid. Its content is rendered by FormMessage. */\n  error?: ReactNode;\n}\n\nexport function FormField({ className, name, error, ...props }: FormFieldProps) {\n  const uid = useId();\n  // Description presence is tracked rather than assumed: aria-describedby must\n  // not name an element that was never rendered. axe flags a dangling reference,\n  // and a screen reader announces nothing for it.\n  const [hasDescription, setHasDescription] = useState(false);\n\n  const registerDescription = useCallback((present: boolean) => {\n    setHasDescription(present);\n  }, []);\n\n  const value = useMemo<FormFieldContextValue>(\n    () => ({\n      id: `${uid}-control`,\n      name,\n      descriptionId: `${uid}-description`,\n      messageId: `${uid}-message`,\n      error,\n      hasDescription,\n      registerDescription,\n    }),\n    [uid, name, error, hasDescription, registerDescription],\n  );\n\n  return (\n    <FormFieldContext.Provider value={value}>\n      <div\n        data-slot=\"form-field\"\n        data-name={name}\n        data-invalid={error ? true : undefined}\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormFieldContext.Provider>\n  );\n}\n\nexport type FormLabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root>;\n\nexport function FormLabel({ className, ...props }: FormLabelProps) {\n  const { id, error } = useFormField(\"FormLabel\");\n\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"form-label\"\n      data-invalid={error ? true : undefined}\n      htmlFor={id}\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-55\",\n        error && \"text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type FormControlProps = ComponentPropsWithRef<typeof Slot.Root>;\n\n/**\n * Injects the field's id and ARIA attributes into its single child.\n *\n * Takes the control as a child rather than rendering one, so it works with any\n * input: our Input, a native select, a third-party editor.\n */\nexport function FormControl(props: FormControlProps) {\n  const { id, error, messageId, descriptionId, hasDescription } = useFormField(\"FormControl\");\n\n  const describedBy =\n    [hasDescription ? descriptionId : null, error ? messageId : null]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={id}\n      aria-describedby={describedBy}\n      aria-invalid={error ? true : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function FormDescription({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { descriptionId, registerDescription } = useFormField(\"FormDescription\");\n\n  useEffect(() => {\n    registerDescription(true);\n    return () => {\n      registerDescription(false);\n    };\n  }, [registerDescription]);\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={descriptionId}\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type FormMessageProps = ComponentPropsWithRef<\"p\">;\n\n/**\n * Renders the field's error.\n *\n * Renders nothing when there is no error and no children, so the layout does\n * not reserve space for a message that may never appear. It is a polite live\n * region: a validation message that arrives after the user has moved on should\n * be announced, but should not interrupt what is being read.\n */\nexport function FormMessage({ className, children, ...props }: FormMessageProps) {\n  const { messageId, error } = useFormField(\"FormMessage\");\n  const content = children ?? error;\n\n  if (!content) return null;\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={messageId}\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\"text-xs font-medium text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </p>\n  );\n}\n"],"mappings":";;;;;;AAkDA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAS,aAAa,WAA0C;CAC9D,MAAM,UAAU,WAAW,gBAAgB;CAC3C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,GAAG,UAAU,sCAAsC;CAErE,OAAO;AACT;;;;;;;;AAWA,SAAgB,KAAK,EAAE,WAAW,aAAa,MAAM,GAAG,SAAoB;CAC1E,OACE,oBAAC,QAAD;EACE,aAAU;EACE;EACZ,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AASA,SAAgB,UAAU,EAAE,WAAW,MAAM,OAAO,GAAG,SAAyB;CAC9E,MAAM,MAAM,MAAM;CAIlB,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,sBAAsB,aAAa,YAAqB;EAC5D,kBAAkB,OAAO;CAC3B,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,eACL;EACL,IAAI,GAAG,IAAI;EACX;EACA,eAAe,GAAG,IAAI;EACtB,WAAW,GAAG,IAAI;EAClB;EACA;EACA;CACF,IACA;EAAC;EAAK;EAAM;EAAO;EAAgB;CAAmB,CACxD;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAAkC;EAChC,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,aAAW;GACX,gBAAc,QAAQ,OAAO,KAAA;GAC7B,WAAW,GAAG,cAAc,SAAS;GACrC,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B;AAIA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,MAAM,EAAE,IAAI,UAAU,aAAa,WAAW;CAE9C,OACE,oBAACA,MAAe,MAAhB;EACE,aAAU;EACV,gBAAc,QAAQ,OAAO,KAAA;EAC7B,SAAS;EACT,WAAW,GACT,wEACA,6DACA,SAAS,oBACT,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;AAUA,SAAgB,YAAY,OAAyB;CACnD,MAAM,EAAE,IAAI,OAAO,WAAW,eAAe,mBAAmB,aAAa,aAAa;CAE1F,MAAM,cACJ,CAAC,iBAAiB,gBAAgB,MAAM,QAAQ,YAAY,IAAI,CAAC,CAC9D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,oBAAC,KAAK,MAAN;EACE,aAAU;EACN;EACJ,oBAAkB;EAClB,gBAAc,QAAQ,OAAO,KAAA;EAC7B,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAAqC;CACnF,MAAM,EAAE,eAAe,wBAAwB,aAAa,iBAAiB;CAE7E,gBAAgB;EACd,oBAAoB,IAAI;EACxB,aAAa;GACX,oBAAoB,KAAK;EAC3B;CACF,GAAG,CAAC,mBAAmB,CAAC;CAExB,OACE,oBAAC,KAAD;EACE,aAAU;EACV,IAAI;EACJ,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;;;;;;;;;AAYA,SAAgB,YAAY,EAAE,WAAW,UAAU,GAAG,SAA2B;CAC/E,MAAM,EAAE,WAAW,UAAU,aAAa,aAAa;CACvD,MAAM,UAAU,YAAY;CAE5B,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,KAAD;EACE,aAAU;EACV,IAAI;EACJ,MAAK;EACL,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;EAEH,UAAA;CACA,CAAA;AAEP"}
+{"version":3,"file":"form.js","names":["LabelPrimitive"],"sources":["../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Form (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport { Label as LabelPrimitive, Slot } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Accessible wiring for form fields.\n *\n * Deliberately **not** bound to a form library. What is actually hard about a\n * form field is the ARIA plumbing — generating an id, pointing the label at the\n * control, assembling `aria-describedby` from the description and the error,\n * and flipping `aria-invalid` — and that plumbing is identical whether the\n * state comes from `useState`, React Hook Form, Formik or a server action.\n *\n * Binding to one library would make everyone else install it to get the\n * plumbing, and would make the source you own harder to change. Pass `error`\n * from whatever holds your state:\n *\n *   <FormField name=\"email\" error={errors.email?.message}>\n *     <FormLabel>Email</FormLabel>\n *     <FormControl>\n *       <Input {...register(\"email\")} />\n *     </FormControl>\n *     <FormDescription>We will never share it.</FormDescription>\n *     <FormMessage />\n *   </FormField>\n */\n\ninterface FormFieldContextValue {\n  id: string;\n  name: string | undefined;\n  descriptionId: string;\n  messageId: string;\n  error: ReactNode;\n  hasDescription: boolean;\n  registerDescription: (present: boolean) => void;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nfunction useFormField(component: string): FormFieldContextValue {\n  const context = useContext(FormFieldContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <FormField>.`);\n  }\n  return context;\n}\n\nexport type FormProps = ComponentPropsWithRef<\"form\">;\n\n/**\n * A form element.\n *\n * `noValidate` is on by default: when the form renders its own messages, the\n * browser's validation bubbles compete with them, appear in a different visual\n * language, and cannot be styled. Pass `noValidate={false}` to opt back in.\n */\nexport function Form({ className, noValidate = true, ...props }: FormProps) {\n  return (\n    <form\n      data-slot=\"form\"\n      noValidate={noValidate}\n      className={cn(\"grid gap-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FormFieldProps extends ComponentPropsWithRef<\"div\"> {\n  /** Field name, mirrored onto the wrapper for form-library integration. */\n  name?: string;\n  /** Present when the field is invalid. Its content is rendered by FormMessage. */\n  error?: ReactNode;\n}\n\nexport function FormField({ className, name, error, ...props }: FormFieldProps) {\n  const uid = useId();\n  // Description presence is tracked rather than assumed: aria-describedby must\n  // not name an element that was never rendered. axe flags a dangling reference,\n  // and a screen reader announces nothing for it.\n  const [hasDescription, setHasDescription] = useState(false);\n\n  const registerDescription = useCallback((present: boolean) => {\n    setHasDescription(present);\n  }, []);\n\n  const value = useMemo<FormFieldContextValue>(\n    () => ({\n      id: `${uid}-control`,\n      name,\n      descriptionId: `${uid}-description`,\n      messageId: `${uid}-message`,\n      error,\n      hasDescription,\n      registerDescription,\n    }),\n    [uid, name, error, hasDescription, registerDescription],\n  );\n\n  return (\n    <FormFieldContext.Provider value={value}>\n      <div\n        data-slot=\"form-field\"\n        data-name={name}\n        data-invalid={error ? true : undefined}\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormFieldContext.Provider>\n  );\n}\n\nexport type FormLabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root>;\n\nexport function FormLabel({ className, ...props }: FormLabelProps) {\n  const { id, error } = useFormField(\"FormLabel\");\n\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"form-label\"\n      data-invalid={error ? true : undefined}\n      htmlFor={id}\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-55\",\n        error && \"text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type FormControlProps = ComponentPropsWithRef<typeof Slot.Root>;\n\n/**\n * Injects the field's id and ARIA attributes into its single child.\n *\n * Takes the control as a child rather than rendering one, so it works with any\n * input: our Input, a native select, a third-party editor.\n */\nexport function FormControl(props: FormControlProps) {\n  const { id, error, messageId, descriptionId, hasDescription } = useFormField(\"FormControl\");\n\n  const describedBy =\n    [hasDescription ? descriptionId : null, error ? messageId : null]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={id}\n      aria-describedby={describedBy}\n      aria-invalid={error ? true : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function FormDescription({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { descriptionId, registerDescription } = useFormField(\"FormDescription\");\n\n  useEffect(() => {\n    registerDescription(true);\n    return () => {\n      registerDescription(false);\n    };\n  }, [registerDescription]);\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={descriptionId}\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FormMessageProps extends ComponentPropsWithRef<\"p\"> {\n  /**\n   * Keeps a cleared message on screen long enough to fade and collapse, rather\n   * than removing it at once. The departing copy is `aria-hidden`, carries no\n   * id and is no longer named by the control, so it is never announced or\n   * described. Off by default: with it on, the old text is briefly still in\n   * the DOM, which tests asserting its absence immediately would notice.\n   */\n  animateExit?: boolean;\n}\n\n/*\n * The message grows open and fades in from just above (SmoothUI's Form). The\n * keyframes ship with the component (ADR 0014); height animates to `auto`\n * where the browser supports interpolate-size and simply appears elsewhere.\n * Durations are tokens, so reduced motion collapses them.\n */\nconst MESSAGE_KEYFRAMES = `\n@keyframes dowel-form-message-in{from{opacity:0;transform:translateY(-0.25rem);height:0;overflow:clip}to{overflow:clip}}\n@keyframes dowel-form-message-out{from{overflow:clip}to{opacity:0;transform:translateY(-0.25rem);height:0;overflow:clip}}\n[data-slot=\"form-message\"][data-state]{interpolate-size:allow-keywords}\n[data-slot=\"form-message\"][data-state=\"open\"]{animation:dowel-form-message-in var(--duration-normal) var(--ease-out-quint)}\n[data-slot=\"form-message\"][data-state=\"closed\"]{animation:dowel-form-message-out var(--duration-fast) var(--ease-in-quint) forwards}\n`;\n\n/** Removes a departing message if its animation never runs (hidden, unstyled). */\nconst EXIT_FALLBACK_MS = 1000;\n\n/**\n * Renders the field's error.\n *\n * Renders nothing when there is no error and no children, so the layout does\n * not reserve space for a message that may never appear. It is a polite live\n * region: a validation message that arrives after the user has moved on should\n * be announced, but should not interrupt what is being read.\n */\nexport function FormMessage({\n  className,\n  children,\n  animateExit = false,\n  ...props\n}: FormMessageProps) {\n  const { messageId, error } = useFormField(\"FormMessage\");\n  const content = children ?? error;\n\n  // Derived from the previous render rather than an effect, so the departing\n  // copy is in place on the same commit the live one leaves — no blank frame.\n  const [shown, setShown] = useState<ReactNode>(content);\n  const [leaving, setLeaving] = useState<ReactNode>(null);\n  if (content !== shown) {\n    setShown(content);\n    setLeaving(!content && animateExit ? shown : null);\n  }\n\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => {\n      setLeaving(null);\n    }, EXIT_FALLBACK_MS);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [leaving]);\n\n  // A native listener rather than onAnimationEnd: React resolves that prop to a\n  // vendor-prefixed event name wherever AnimationEvent is missing. React 19\n  // runs the returned cleanup when the element leaves.\n  const listenForExitEnd = useCallback((element: HTMLParagraphElement | null) => {\n    if (!element) return;\n    const onEnd = (event: Event) => {\n      if (event.target === element) setLeaving(null);\n    };\n    element.addEventListener(\"animationend\", onEnd);\n    return () => {\n      element.removeEventListener(\"animationend\", onEnd);\n    };\n  }, []);\n\n  const styles = (\n    <style href=\"dowel-form-message\" precedence=\"dowel\">\n      {MESSAGE_KEYFRAMES}\n    </style>\n  );\n\n  if (!content) {\n    if (!leaving) return null;\n    return (\n      <>\n        {styles}\n        <p\n          data-slot=\"form-message\"\n          data-state=\"closed\"\n          aria-hidden=\"true\"\n          ref={listenForExitEnd}\n          className={cn(\"text-xs font-medium text-destructive\", className)}\n        >\n          {leaving}\n        </p>\n      </>\n    );\n  }\n\n  return (\n    <>\n      {styles}\n      <p\n        data-slot=\"form-message\"\n        data-state=\"open\"\n        id={messageId}\n        role=\"status\"\n        aria-live=\"polite\"\n        className={cn(\"text-xs font-medium text-destructive\", className)}\n        {...props}\n      >\n        {content}\n      </p>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/form/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["form.tsx"],
-	a11y: "FormField generates the id, points the Label at the control, and assembles aria-describedby from whichever of the description and error are actually present — a dangling reference announces nothing and is flagged by axe. aria-invalid follows the error. FormMessage is a polite live region, so a late validation message is announced without interrupting."
+	a11y: "FormField generates the id, points the Label at the control, and assembles aria-describedby from whichever of the description and error are actually present — a dangling reference announces nothing and is flagged by axe. aria-invalid follows the error. FormMessage is a polite live region, so a late validation message is announced without interrupting. With animateExit, a cleared message lingers only as an aria-hidden copy with no id, which the control no longer references."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/form/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"form\",\n  title: \"Form\",\n  description: \"Accessible field wiring that works with any form library, or none.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"form.tsx\"],\n  a11y:\n    \"FormField generates the id, points the Label at the control, and assembles aria-describedby \" +\n    \"from whichever of the description and error are actually present — a dangling reference \" +\n    \"announces nothing and is flagged by axe. aria-invalid follows the error. FormMessage is a \" +\n    \"polite live region, so a late validation message is announced without interrupting.\",\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,UAAU;CAClB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/form/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"form\",\n  title: \"Form\",\n  description: \"Accessible field wiring that works with any form library, or none.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"form.tsx\"],\n  a11y:\n    \"FormField generates the id, points the Label at the control, and assembles aria-describedby \" +\n    \"from whichever of the description and error are actually present — a dangling reference \" +\n    \"announces nothing and is flagged by axe. aria-invalid follows the error. FormMessage is a \" +\n    \"polite live region, so a late validation message is announced without interrupting.\" +\n    \" With animateExit, a cleared message lingers only as an aria-hidden copy with no id, which the control no longer references.\",\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,UAAU;CAClB,MACE;AAKJ,CAAC"}