@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/dots-loader/dots-loader.js

@@ -0,0 +1,412 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/dots-loader/dots-loader.tsx
+const PREFIX = "dowel-dots-loader";
+/** A delay or duration in seconds, scaled for reduced motion. */
+function scaled(seconds) {
+	return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;
+}
+const STYLES = `
+.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}
+.${PREFIX} [data-part]{display:block;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}
+.${PREFIX} [data-part=static]{animation:none}
+.${PREFIX} [data-part=ring]{background:transparent;border:0.125em solid currentColor}
+.${PREFIX} [data-part=spin]{position:absolute;inset:0;background:transparent;border-radius:0}
+.${PREFIX} [data-part=spin]>span{position:absolute;top:0;left:50%;border-radius:9999px;background:currentColor;transform:translateX(-50%)}
+.${PREFIX} [data-part=fill]{position:absolute;inset:0;background:transparent;border-radius:0;animation:none}
+@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}
+@keyframes ${PREFIX}-blink{0%,100%{opacity:0}50%{opacity:1}}
+@keyframes ${PREFIX}-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1em)}}
+@keyframes ${PREFIX}-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.25em)}}
+@keyframes ${PREFIX}-wave{0%,100%{transform:translateY(.5em)}50%{transform:translateY(-.5em)}}
+@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0) scaleY(.8)}50%{transform:translateY(-2.5em) scaleY(1.1)}}
+@keyframes ${PREFIX}-swing-a{0%,100%{transform:translateX(-2em)}50%{transform:translateX(2em)}}
+@keyframes ${PREFIX}-swing-b{0%,100%{transform:translateX(2em)}50%{transform:translateX(-2em)}}
+@keyframes ${PREFIX}-swap-a{0%,100%{transform:translateX(0)}50%{transform:translateX(4em)}}
+@keyframes ${PREFIX}-swap-b{0%,100%{transform:translateX(0)}50%{transform:translateX(-4em)}}
+@keyframes ${PREFIX}-magnet-a{0%,100%{transform:translateX(0)}50%{transform:translateX(.5em)}}
+@keyframes ${PREFIX}-magnet-b{0%,100%{transform:translateX(0)}50%{transform:translateX(-.5em)}}
+@keyframes ${PREFIX}-shrink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.3}}
+@keyframes ${PREFIX}-squeeze{0%,100%{transform:scale(1)}50%{transform:scale(.4)}}
+@keyframes ${PREFIX}-swell{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.5);opacity:1}}
+@keyframes ${PREFIX}-soft{0%,100%{transform:scale(.5);opacity:.3}50%{transform:scale(1);opacity:1}}
+@keyframes ${PREFIX}-glow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.5);opacity:.8}}
+@keyframes ${PREFIX}-emit{from{transform:scale(0);opacity:var(--from,.8)}to{transform:scale(1);opacity:0}}
+@keyframes ${PREFIX}-ripple{from{transform:scale(.3);opacity:.8}to{transform:scale(1.6);opacity:0}}
+@keyframes ${PREFIX}-breathe{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(var(--x),var(--y)) scale(1.75)}}
+@keyframes ${PREFIX}-shift{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(2.25em)}50%{transform:translateX(4.5em)}}
+@keyframes ${PREFIX}-drop{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(3em) scale(.8,1.2)}}
+@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-morph{0%{gap:.5em;transform:rotate(0)}50%{gap:0}100%{gap:.5em;transform:rotate(180deg)}}
+`;
+/** A dot, with its keyframe, duration and delay. */
+function dot(key, size, animation, duration = 0, delay = 0, extra = {}, part = "dot") {
+	const style = {
+		width: size,
+		height: size,
+		...extra
+	};
+	if (animation) {
+		style.animationName = `${PREFIX}-${animation}`;
+		style["--dur"] = scaled(duration);
+		style["--delay"] = scaled(delay);
+	}
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": animation ? part : "static",
+		style
+	}, key);
+}
+function row(count, size, animation, duration, stagger) {
+	return Array.from({ length: count }, (_, index) => dot(index, size, animation, duration, index * stagger));
+}
+/** The goo filter: blurs the dots together, then snaps the alpha back to an edge. */
+function goo(id, blur, matrix) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "0",
+		height: "0",
+		"aria-hidden": "true",
+		style: { position: "absolute" },
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+			id,
+			children: [
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: blur,
+					result: "blur"
+				}),
+				/* @__PURE__ */ jsx("feColorMatrix", {
+					in: "blur",
+					mode: "matrix",
+					values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${matrix}`,
+					result: "goo"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					in: "SourceGraphic",
+					in2: "goo",
+					operator: "atop"
+				})
+			]
+		}) })
+	});
+}
+/** A dot riding the edge of a rotating layer. */
+function orbiter(key, size, duration, delay, opacity = 1) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "spin",
+		style: {
+			animationName: `${PREFIX}-spin`,
+			["--dur"]: scaled(duration),
+			["--delay"]: scaled(delay)
+		},
+		children: /* @__PURE__ */ jsx("span", { style: {
+			width: size,
+			height: size,
+			opacity
+		} })
+	}, key);
+}
+const ROW = { gap: "0.75em" };
+const VARIANTS = {
+	pulse: {
+		root: ROW,
+		render: () => row(3, "1.25em", "fade", 1.4, .2)
+	},
+	bounce: {
+		root: ROW,
+		render: () => row(3, "1.25em", "bounce", .6, .1)
+	},
+	liquid: {
+		root: {
+			height: "4em",
+			width: "8em"
+		},
+		render: (id) => /* @__PURE__ */ jsxs(Fragment, { children: [goo(id, 4, "18 -7"), /* @__PURE__ */ jsxs("span", {
+			"data-part": "fill",
+			style: { filter: `url(#${id})` },
+			children: [dot("a", "3em", "swing-a", 2, 0, {
+				position: "absolute",
+				top: "0.5em",
+				left: "2.5em"
+			}), dot("b", "3em", "swing-b", 2, 0, {
+				position: "absolute",
+				top: "0.5em",
+				left: "2.5em"
+			})]
+		})] })
+	},
+	fade: {
+		root: { gap: "0.5em" },
+		render: () => Array.from({ length: 4 }, (_, index) => dot(index, "1em", "blink", 1.5, index * .2, { animationTimingFunction: "linear" }))
+	},
+	swapping: {
+		root: { gap: "2.5em" },
+		render: () => [dot("a", "1.5em", "swap-a", 1.5), dot("b", "1.5em", "swap-b", 1.5)]
+	},
+	bouncing: {
+		root: {
+			height: "3.5em",
+			alignItems: "flex-end",
+			gap: "0.5em"
+		},
+		render: () => row(3, "1.25em", "hop", .8, .1)
+	},
+	bobbing: {
+		root: ROW,
+		render: () => row(3, "1.25em", "bob", 1.2, .15)
+	},
+	beacon: {
+		root: {
+			width: "3em",
+			height: "3em"
+		},
+		render: () => [dot("ring", "3em", "emit", 1.5, 0, {
+			position: "absolute",
+			animationTimingFunction: "ease-out"
+		}), dot("core", "1em", null)]
+	},
+	wave: {
+		root: { gap: "0.5em" },
+		render: () => row(5, "1em", "wave", 1, .15)
+	},
+	grid: {
+		root: {
+			display: "grid",
+			gridTemplateColumns: "repeat(3, auto)",
+			gap: "0.75em"
+		},
+		render: () => Array.from({ length: 9 }, (_, index) => dot(index, "1.25em", "shrink", 1.5, (index % 3 + Math.floor(index / 3)) * .2))
+	},
+	pulsating: {
+		root: ROW,
+		render: () => row(3, "1.25em", "swell", 1.2, .2)
+	},
+	triple: {
+		root: {
+			width: "5em",
+			height: "5em"
+		},
+		render: () => /* @__PURE__ */ jsx("span", {
+			"data-part": "spin",
+			style: {
+				animationName: `${PREFIX}-spin`,
+				animationTimingFunction: "linear",
+				["--dur"]: scaled(2)
+			},
+			children: [
+				0,
+				120,
+				240
+			].map((angle) => /* @__PURE__ */ jsx("span", { style: {
+				width: "1em",
+				height: "1em",
+				transformOrigin: "50% 2.5em",
+				transform: `translateX(-50%) rotate(${String(angle)}deg)`
+			} }, angle))
+		})
+	},
+	ripple: {
+		root: {
+			width: "6em",
+			height: "6em"
+		},
+		render: () => [dot("core", "1.25em", null), ...[
+			0,
+			1,
+			2
+		].map((index) => dot(index, "4em", "ripple", 2.2, index * .7, {
+			position: "absolute",
+			animationTimingFunction: "ease-out"
+		}, "ring"))]
+	},
+	glow: {
+		root: {
+			width: "4em",
+			height: "4em"
+		},
+		render: () => [dot("halo", "2.5em", "glow", 2, 0, {
+			position: "absolute",
+			filter: "blur(0.375em)"
+		}), dot("core", "1.25em", null)]
+	},
+	breathe: {
+		root: {
+			width: "5em",
+			height: "5em"
+		},
+		render: () => [
+			0,
+			60,
+			120,
+			180,
+			240,
+			300
+		].map((angle, index) => {
+			const radians = angle * Math.PI / 180;
+			return dot(angle, "1.75em", "breathe", 3.6, 0, {
+				position: "absolute",
+				opacity: index % 2 === 0 ? .4 : .28,
+				["--x"]: `${(Math.cos(radians) * 1.375).toFixed(3)}em`,
+				["--y"]: `${(Math.sin(radians) * 1.375).toFixed(3)}em`
+			});
+		})
+	},
+	soft: {
+		root: { gap: "0.5em" },
+		render: () => row(3, "1.25em", "soft", 1.2, .15)
+	},
+	shift: {
+		root: { gap: "1em" },
+		render: () => [dot("mover", "1.25em", "shift", 2, 0, {
+			position: "absolute",
+			left: 0
+		}), ...[
+			0,
+			1,
+			2
+		].map((index) => dot(index, "1.25em", null, 0, 0, { opacity: .25 }))]
+	},
+	matrix: {
+		root: {
+			display: "grid",
+			gridTemplateColumns: "repeat(3, auto)",
+			gap: "0.5em"
+		},
+		render: () => Array.from({ length: 9 }, (_, index) => dot(index, "1em", "squeeze", 1.5, (Math.floor(index / 3) + index % 3) * .15))
+	},
+	orbit: {
+		root: {
+			width: "3em",
+			height: "3em"
+		},
+		render: () => [dot("core", "1em", null, 0, 0, { opacity: .3 }), /* @__PURE__ */ jsx("span", {
+			"data-part": "fill",
+			children: orbiter(0, "0.75em", 2, 0)
+		}, "orbit")]
+	},
+	magnetic: {
+		root: {
+			height: "3em",
+			width: "5em"
+		},
+		render: (id) => /* @__PURE__ */ jsxs(Fragment, { children: [goo(id, 2, "15 -7"), /* @__PURE__ */ jsxs("span", {
+			"data-part": "fill",
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				filter: `url(#${id})`
+			},
+			children: [dot("a", "1.5em", "magnet-a", 1.5), dot("b", "1.5em", "magnet-b", 1.5)]
+		})] })
+	},
+	drop: {
+		root: {
+			height: "5em",
+			width: "3em",
+			flexDirection: "column",
+			justifyContent: "flex-start"
+		},
+		render: () => [dot("drop", "1.25em", "drop", 1, 0, { animationTimingFunction: "cubic-bezier(0.55, 0, 1, 0.45)" }), dot("floor", "0.25em", null, 0, 0, {
+			width: "2em",
+			position: "absolute",
+			bottom: 0,
+			opacity: .3
+		})]
+	},
+	"morph-ring": {
+		root: {},
+		render: () => /* @__PURE__ */ jsx("span", {
+			"data-part": "grid",
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(2, auto)",
+				borderRadius: 0,
+				background: "transparent",
+				animationName: `${PREFIX}-morph`,
+				["--dur"]: scaled(2)
+			},
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((index) => dot(index, "1em", null))
+		})
+	},
+	sonar: {
+		root: {
+			width: "3em",
+			height: "3em"
+		},
+		render: () => [...[0, .5].map((delay) => dot(delay, "3em", "emit", 1.5, delay, {
+			position: "absolute",
+			animationTimingFunction: "ease-out",
+			["--from"]: "0.35"
+		})), dot("core", "1em", null)]
+	},
+	trailing: {
+		root: {
+			width: "3em",
+			height: "3em"
+		},
+		render: () => [
+			0,
+			1,
+			2,
+			3,
+			4
+		].map((index) => orbiter(index, "1em", 1.5, index * .1, 1 - index * .2))
+	},
+	thinking: {
+		root: { gap: "0.5em" },
+		render: () => Array.from({ length: 3 }, (_, index) => dot(index, "0.75em", "fade", 1.2, index * .2, { animationTimingFunction: "cubic-bezier(0.645, 0.045, 0.355, 1)" }))
+	}
+};
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+const dotsLoaderVariantNames = Object.keys(VARIANTS);
+const dotsLoaderVariants = cva("", {
+	variants: { size: {
+		sm: "text-[0.25rem]",
+		md: "text-[0.375rem]",
+		lg: "text-[0.5rem]",
+		xl: "text-[0.625rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** An indeterminate loading indicator made of dots, in 25 motions. */
+function DotsLoader({ className, size, variant = "pulse", label, style, ...props }) {
+	const filterId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+	const spec = VARIANTS[variant];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "dots-loader",
+			"data-variant": variant,
+			"data-motion": "indicator",
+			className: cn(PREFIX, dotsLoaderVariants({ size }), className),
+			style: {
+				...spec.root,
+				...style
+			},
+			...props,
+			children: spec.render(filterId)
+		}),
+		label ? /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: label
+		}) : null
+	] });
+}
+//#endregion
+export { DotsLoader, dotsLoaderVariantNames, dotsLoaderVariants };
+
+//# sourceMappingURL=dots-loader.js.map

package/dist/components/dots-loader/dots-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots-loader.js","names":[],"sources":["../../../src/components/dots-loader/dots-loader.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dots & Pulses\" (MIT, © 2026 Syed Subhan Uddin) and the\n// SmoothUI AI Loader (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useId, type ComponentPropsWithRef, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Every loader family follows the same shape (ADR 0014):\n *\n * - The geometry is in `em`, so `size` scales the whole loader by changing one\n *   font size, and every variant keeps its proportions.\n * - The colour is `currentColor`, so it follows the text it sits in.\n * - Keyframes ship with the component through React's hoisted <style>, and\n *   every duration and delay runs through --motion-scale-indicator: under\n *   reduced motion the loader slows rather than freezing.\n * - `direction: ltr` on the root. A loader's travel is not reading order, and\n *   mirroring a sweep in RTL would make it read as running backwards.\n */\n\nconst PREFIX = \"dowel-dots-loader\";\n\n/** A delay or duration in seconds, scaled for reduced motion. */\nfunction scaled(seconds: number): string {\n  return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;\n}\n\nconst STYLES = `\n.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}\n.${PREFIX} [data-part]{display:block;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}\n.${PREFIX} [data-part=static]{animation:none}\n.${PREFIX} [data-part=ring]{background:transparent;border:0.125em solid currentColor}\n.${PREFIX} [data-part=spin]{position:absolute;inset:0;background:transparent;border-radius:0}\n.${PREFIX} [data-part=spin]>span{position:absolute;top:0;left:50%;border-radius:9999px;background:currentColor;transform:translateX(-50%)}\n.${PREFIX} [data-part=fill]{position:absolute;inset:0;background:transparent;border-radius:0;animation:none}\n@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}\n@keyframes ${PREFIX}-blink{0%,100%{opacity:0}50%{opacity:1}}\n@keyframes ${PREFIX}-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1em)}}\n@keyframes ${PREFIX}-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.25em)}}\n@keyframes ${PREFIX}-wave{0%,100%{transform:translateY(.5em)}50%{transform:translateY(-.5em)}}\n@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0) scaleY(.8)}50%{transform:translateY(-2.5em) scaleY(1.1)}}\n@keyframes ${PREFIX}-swing-a{0%,100%{transform:translateX(-2em)}50%{transform:translateX(2em)}}\n@keyframes ${PREFIX}-swing-b{0%,100%{transform:translateX(2em)}50%{transform:translateX(-2em)}}\n@keyframes ${PREFIX}-swap-a{0%,100%{transform:translateX(0)}50%{transform:translateX(4em)}}\n@keyframes ${PREFIX}-swap-b{0%,100%{transform:translateX(0)}50%{transform:translateX(-4em)}}\n@keyframes ${PREFIX}-magnet-a{0%,100%{transform:translateX(0)}50%{transform:translateX(.5em)}}\n@keyframes ${PREFIX}-magnet-b{0%,100%{transform:translateX(0)}50%{transform:translateX(-.5em)}}\n@keyframes ${PREFIX}-shrink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.3}}\n@keyframes ${PREFIX}-squeeze{0%,100%{transform:scale(1)}50%{transform:scale(.4)}}\n@keyframes ${PREFIX}-swell{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.5);opacity:1}}\n@keyframes ${PREFIX}-soft{0%,100%{transform:scale(.5);opacity:.3}50%{transform:scale(1);opacity:1}}\n@keyframes ${PREFIX}-glow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.5);opacity:.8}}\n@keyframes ${PREFIX}-emit{from{transform:scale(0);opacity:var(--from,.8)}to{transform:scale(1);opacity:0}}\n@keyframes ${PREFIX}-ripple{from{transform:scale(.3);opacity:.8}to{transform:scale(1.6);opacity:0}}\n@keyframes ${PREFIX}-breathe{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(var(--x),var(--y)) scale(1.75)}}\n@keyframes ${PREFIX}-shift{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(2.25em)}50%{transform:translateX(4.5em)}}\n@keyframes ${PREFIX}-drop{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(3em) scale(.8,1.2)}}\n@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-morph{0%{gap:.5em;transform:rotate(0)}50%{gap:0}100%{gap:.5em;transform:rotate(180deg)}}\n`;\n\ntype Variant = {\n  /**\n   * Layout of the root, inline rather than as utilities. The hoisted stylesheet\n   * is unlayered, so it outranks Tailwind's layered utilities whatever their\n   * specificity; inline styles are the one thing that reliably outranks it.\n   */\n  root: CSSProperties;\n  render: (id: string) => ReactNode;\n};\n\n/** A dot, with its keyframe, duration and delay. */\nfunction dot(\n  key: number | string,\n  size: string,\n  animation: string | null,\n  duration = 0,\n  delay = 0,\n  extra: CSSProperties = {},\n  part = \"dot\",\n): ReactNode {\n  const style: CSSProperties & Record<`--${string}`, string> = {\n    width: size,\n    height: size,\n    ...extra,\n  };\n  if (animation) {\n    style.animationName = `${PREFIX}-${animation}`;\n    style[\"--dur\"] = scaled(duration);\n    style[\"--delay\"] = scaled(delay);\n  }\n  return <span key={key} data-part={animation ? part : \"static\"} style={style} />;\n}\n\nfunction row(\n  count: number,\n  size: string,\n  animation: string,\n  duration: number,\n  stagger: number,\n): ReactNode {\n  return Array.from({ length: count }, (_, index) =>\n    dot(index, size, animation, duration, index * stagger),\n  );\n}\n\n/** The goo filter: blurs the dots together, then snaps the alpha back to an edge. */\nfunction goo(id: string, blur: number, matrix: string): ReactNode {\n  return (\n    <svg width=\"0\" height=\"0\" aria-hidden=\"true\" style={{ position: \"absolute\" }}>\n      <defs>\n        <filter id={id}>\n          <feGaussianBlur in=\"SourceGraphic\" stdDeviation={blur} result=\"blur\" />\n          <feColorMatrix\n            in=\"blur\"\n            mode=\"matrix\"\n            values={`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${matrix}`}\n            result=\"goo\"\n          />\n          <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n        </filter>\n      </defs>\n    </svg>\n  );\n}\n\n/** A dot riding the edge of a rotating layer. */\nfunction orbiter(key: number, size: string, duration: number, delay: number, opacity = 1) {\n  return (\n    <span\n      key={key}\n      data-part=\"spin\"\n      style={{\n        animationName: `${PREFIX}-spin`,\n        [\"--dur\" as string]: scaled(duration),\n        [\"--delay\" as string]: scaled(delay),\n      }}\n    >\n      <span style={{ width: size, height: size, opacity }} />\n    </span>\n  );\n}\n\nconst ROW: CSSProperties = { gap: \"0.75em\" };\n\nconst VARIANTS = {\n  pulse: { root: ROW, render: () => row(3, \"1.25em\", \"fade\", 1.4, 0.2) },\n  bounce: { root: ROW, render: () => row(3, \"1.25em\", \"bounce\", 0.6, 0.1) },\n  liquid: {\n    root: { height: \"4em\", width: \"8em\" },\n    render: (id) => (\n      <>\n        {goo(id, 4, \"18 -7\")}\n        <span data-part=\"fill\" style={{ filter: `url(#${id})` }}>\n          {dot(\"a\", \"3em\", \"swing-a\", 2, 0, {\n            position: \"absolute\",\n            top: \"0.5em\",\n            left: \"2.5em\",\n          })}\n          {dot(\"b\", \"3em\", \"swing-b\", 2, 0, {\n            position: \"absolute\",\n            top: \"0.5em\",\n            left: \"2.5em\",\n          })}\n        </span>\n      </>\n    ),\n  },\n  fade: {\n    root: { gap: \"0.5em\" },\n    render: () =>\n      Array.from({ length: 4 }, (_, index) =>\n        dot(index, \"1em\", \"blink\", 1.5, index * 0.2, { animationTimingFunction: \"linear\" }),\n      ),\n  },\n  swapping: {\n    root: { gap: \"2.5em\" },\n    render: () => [dot(\"a\", \"1.5em\", \"swap-a\", 1.5), dot(\"b\", \"1.5em\", \"swap-b\", 1.5)],\n  },\n  bouncing: {\n    root: { height: \"3.5em\", alignItems: \"flex-end\", gap: \"0.5em\" },\n    render: () => row(3, \"1.25em\", \"hop\", 0.8, 0.1),\n  },\n  bobbing: { root: ROW, render: () => row(3, \"1.25em\", \"bob\", 1.2, 0.15) },\n  beacon: {\n    root: { width: \"3em\", height: \"3em\" },\n    render: () => [\n      dot(\"ring\", \"3em\", \"emit\", 1.5, 0, {\n        position: \"absolute\",\n        animationTimingFunction: \"ease-out\",\n      }),\n      dot(\"core\", \"1em\", null),\n    ],\n  },\n  wave: { root: { gap: \"0.5em\" }, render: () => row(5, \"1em\", \"wave\", 1, 0.15) },\n  grid: {\n    root: { display: \"grid\", gridTemplateColumns: \"repeat(3, auto)\", gap: \"0.75em\" },\n    render: () =>\n      Array.from({ length: 9 }, (_, index) =>\n        dot(index, \"1.25em\", \"shrink\", 1.5, ((index % 3) + Math.floor(index / 3)) * 0.2),\n      ),\n  },\n  pulsating: { root: ROW, render: () => row(3, \"1.25em\", \"swell\", 1.2, 0.2) },\n  triple: {\n    root: { width: \"5em\", height: \"5em\" },\n    render: () => (\n      <span\n        data-part=\"spin\"\n        style={{\n          animationName: `${PREFIX}-spin`,\n          animationTimingFunction: \"linear\",\n          [\"--dur\" as string]: scaled(2),\n        }}\n      >\n        {[0, 120, 240].map((angle) => (\n          <span\n            key={angle}\n            style={{\n              width: \"1em\",\n              height: \"1em\",\n              transformOrigin: \"50% 2.5em\",\n              transform: `translateX(-50%) rotate(${String(angle)}deg)`,\n            }}\n          />\n        ))}\n      </span>\n    ),\n  },\n  ripple: {\n    root: { width: \"6em\", height: \"6em\" },\n    render: () => [\n      dot(\"core\", \"1.25em\", null),\n      ...[0, 1, 2].map((index) =>\n        dot(\n          index,\n          \"4em\",\n          \"ripple\",\n          2.2,\n          index * 0.7,\n          { position: \"absolute\", animationTimingFunction: \"ease-out\" },\n          \"ring\",\n        ),\n      ),\n    ],\n  },\n  glow: {\n    root: { width: \"4em\", height: \"4em\" },\n    render: () => [\n      dot(\"halo\", \"2.5em\", \"glow\", 2, 0, { position: \"absolute\", filter: \"blur(0.375em)\" }),\n      dot(\"core\", \"1.25em\", null),\n    ],\n  },\n  breathe: {\n    root: { width: \"5em\", height: \"5em\" },\n    render: () =>\n      [0, 60, 120, 180, 240, 300].map((angle, index) => {\n        const radians = (angle * Math.PI) / 180;\n        return dot(angle, \"1.75em\", \"breathe\", 3.6, 0, {\n          position: \"absolute\",\n          opacity: index % 2 === 0 ? 0.4 : 0.28,\n          [\"--x\" as string]: `${(Math.cos(radians) * 1.375).toFixed(3)}em`,\n          [\"--y\" as string]: `${(Math.sin(radians) * 1.375).toFixed(3)}em`,\n        });\n      }),\n  },\n  soft: { root: { gap: \"0.5em\" }, render: () => row(3, \"1.25em\", \"soft\", 1.2, 0.15) },\n  shift: {\n    root: { gap: \"1em\" },\n    render: () => [\n      dot(\"mover\", \"1.25em\", \"shift\", 2, 0, { position: \"absolute\", left: 0 }),\n      ...[0, 1, 2].map((index) => dot(index, \"1.25em\", null, 0, 0, { opacity: 0.25 })),\n    ],\n  },\n  matrix: {\n    root: { display: \"grid\", gridTemplateColumns: \"repeat(3, auto)\", gap: \"0.5em\" },\n    render: () =>\n      Array.from({ length: 9 }, (_, index) =>\n        dot(index, \"1em\", \"squeeze\", 1.5, (Math.floor(index / 3) + (index % 3)) * 0.15),\n      ),\n  },\n  orbit: {\n    root: { width: \"3em\", height: \"3em\" },\n    render: () => [\n      dot(\"core\", \"1em\", null, 0, 0, { opacity: 0.3 }),\n      <span key=\"orbit\" data-part=\"fill\">\n        {orbiter(0, \"0.75em\", 2, 0)}\n      </span>,\n    ],\n  },\n  magnetic: {\n    root: { height: \"3em\", width: \"5em\" },\n    render: (id) => (\n      <>\n        {goo(id, 2, \"15 -7\")}\n        <span\n          data-part=\"fill\"\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            filter: `url(#${id})`,\n          }}\n        >\n          {dot(\"a\", \"1.5em\", \"magnet-a\", 1.5)}\n          {dot(\"b\", \"1.5em\", \"magnet-b\", 1.5)}\n        </span>\n      </>\n    ),\n  },\n  drop: {\n    root: {\n      height: \"5em\",\n      width: \"3em\",\n      flexDirection: \"column\",\n      justifyContent: \"flex-start\",\n    },\n    render: () => [\n      dot(\"drop\", \"1.25em\", \"drop\", 1, 0, {\n        animationTimingFunction: \"cubic-bezier(0.55, 0, 1, 0.45)\",\n      }),\n      dot(\"floor\", \"0.25em\", null, 0, 0, {\n        width: \"2em\",\n        position: \"absolute\",\n        bottom: 0,\n        opacity: 0.3,\n      }),\n    ],\n  },\n  \"morph-ring\": {\n    root: {},\n    render: () => (\n      <span\n        data-part=\"grid\"\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(2, auto)\",\n          borderRadius: 0,\n          background: \"transparent\",\n          animationName: `${PREFIX}-morph`,\n          [\"--dur\" as string]: scaled(2),\n        }}\n      >\n        {[0, 1, 2, 3].map((index) => dot(index, \"1em\", null))}\n      </span>\n    ),\n  },\n  sonar: {\n    root: { width: \"3em\", height: \"3em\" },\n    render: () => [\n      ...[0, 0.5].map((delay) =>\n        dot(delay, \"3em\", \"emit\", 1.5, delay, {\n          position: \"absolute\",\n          animationTimingFunction: \"ease-out\",\n          [\"--from\" as string]: \"0.35\",\n        }),\n      ),\n      dot(\"core\", \"1em\", null),\n    ],\n  },\n  trailing: {\n    root: { width: \"3em\", height: \"3em\" },\n    render: () =>\n      [0, 1, 2, 3, 4].map((index) => orbiter(index, \"1em\", 1.5, index * 0.1, 1 - index * 0.2)),\n  },\n  thinking: {\n    root: { gap: \"0.5em\" },\n    render: () =>\n      Array.from({ length: 3 }, (_, index) =>\n        dot(index, \"0.75em\", \"fade\", 1.2, index * 0.2, {\n          animationTimingFunction: \"cubic-bezier(0.645, 0.045, 0.355, 1)\",\n        }),\n      ),\n  },\n} satisfies Record<string, Variant>;\n\nexport type DotsLoaderVariant = keyof typeof VARIANTS;\n\n/** Every variant, in catalogue order. Stories and tests iterate this. */\nexport const dotsLoaderVariantNames = Object.keys(VARIANTS) as DotsLoaderVariant[];\n\nconst dotsLoaderVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-[0.25rem]\",\n      md: \"text-[0.375rem]\",\n      lg: \"text-[0.5rem]\",\n      xl: \"text-[0.625rem]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface DotsLoaderProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof dotsLoaderVariants> {\n  /** Which animation to play. */\n  variant?: DotsLoaderVariant;\n  /**\n   * Announced to assistive technology while the loader is visible.\n   *\n   * Omit it when the loader sits inside something that already reports its\n   * busy state — announcing twice is worse than not announcing at all.\n   */\n  label?: string;\n}\n\n/** An indeterminate loading indicator made of dots, in 25 motions. */\nexport function DotsLoader({\n  className,\n  size,\n  variant = \"pulse\",\n  label,\n  style,\n  ...props\n}: DotsLoaderProps) {\n  const filterId = `${PREFIX}-${useId().replace(/:/g, \"\")}`;\n  const spec: Variant = VARIANTS[variant];\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"dots-loader\"\n        data-variant={variant}\n        // Exempt from the reduced-motion blanket: a loader that stops says the\n        // application has hung. It is slowed instead — see ADR 0014.\n        data-motion=\"indicator\"\n        className={cn(PREFIX, dotsLoaderVariants({ size }), className)}\n        style={{ ...spec.root, ...style }}\n        {...props}\n      >\n        {spec.render(filterId)}\n      </span>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { dotsLoaderVariants };\n"],"mappings":"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"}

package/dist/components/dots-loader/index.d.ts

@@ -0,0 +1,2 @@
+import { DotsLoader, DotsLoaderProps, DotsLoaderVariant, dotsLoaderVariantNames, dotsLoaderVariants } from "./dots-loader.js";
+export { DotsLoader, type DotsLoaderProps, type DotsLoaderVariant, dotsLoaderVariantNames, dotsLoaderVariants };

package/dist/components/dots-loader/index.js

@@ -0,0 +1,2 @@
+import { DotsLoader, dotsLoaderVariantNames, dotsLoaderVariants } from "./dots-loader.js";
+export { DotsLoader, dotsLoaderVariantNames, dotsLoaderVariants };

package/dist/components/dots-loader/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dots-loader/meta.ts
+const meta = defineMeta({
+	name: "dots-loader",
+	title: "Dots Loader",
+	description: "Indeterminate loading indicators made of dots — pulse, bounce, ripple, orbit and 21 more motions.",
+	category: "feedback",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["dots-loader.tsx"],
+	a11y: "Renders aria-hidden by default so it does not announce inside controls that already expose a busy state. Pass `label` to announce it standalone via role=\"status\". Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dots-loader/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dots-loader/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dots-loader\",\n  title: \"Dots Loader\",\n  description:\n    \"Indeterminate loading indicators made of dots — pulse, bounce, ripple, orbit and 21 more motions.\",\n  category: \"feedback\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"dots-loader.tsx\"],\n  a11y:\n    \"Renders aria-hidden by default so it does not announce inside controls that already \" +\n    'expose a busy state. Pass `label` to announce it standalone via role=\"status\". ' +\n    \"Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang.\",\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,iBAAiB;CACzB,MACE;AAGJ,CAAC"}

package/dist/components/drag-stepper/drag-stepper.d.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/drag-stepper/drag-stepper.d.ts
+declare const dragStepperVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DragStepperProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof dragStepperVariants> {
+  /** Controlled value. */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called on every change: tap, key, typed entry and each sweep move. */
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Steps moved by Page Up / Page Down (multiplied by `step`). */
+  largeStep?: number;
+  /** Milliseconds a side button must be held to enter sweep mode. */
+  holdDelay?: number;
+  /** Units scrubbed per pixel of horizontal drag in sweep mode. */
+  sensitivity?: number;
+  /** A 1px inset hairline ring around the pill. */
+  stroke?: boolean;
+  disabled?: boolean;
+  /** Submits the value with a form under this name. */
+  name?: string;
+  /** Spoken value (`aria-valuetext`), for units: `(v) => \`${v} guests\``. */
+  formatValue?: (value: number) => string;
+  /** Accessible name of the − button. */
+  decrementLabel?: string;
+  /** Accessible name of the + button. */
+  incrementLabel?: string;
+}
+/** A pill stepper whose side buttons, held, turn into a drag-to-scrub sweep. */
+declare function DragStepper({ className, fill, stroke, value: valueProp, defaultValue, onValueChange, min, max, step, largeStep, holdDelay, sensitivity, disabled, name, formatValue, decrementLabel, incrementLabel, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: DragStepperProps): import("react").JSX.Element;
+//#endregion
+export { DragStepper, DragStepperProps, dragStepperVariants };
+//# sourceMappingURL=drag-stepper.d.ts.map

package/dist/components/drag-stepper/drag-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-stepper.d.ts","names":[],"sources":["../../../src/components/drag-stepper/drag-stepper.tsx"],"mappings":";;;cA+BM,sBAAmB;;6CAkBxB;UAEgB,yBAEb,KAAK,yEACL,oBAAoB;;EAEtB;;EAEA;;EAEA,iBAAiB;EACjB;EACA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;EACA;;EAEA;;EAEA,eAAe;;EAEf;;EAEA;;;iBA+Bc,cACd,WACA,MACA,QACA,OAAO,WACP,cACA,eACA,KACA,KACA,MACA,WACA,WACA,aACA,UACA,MACA,aACA,gBACA,gBACA,KAAK,uBACS,8BACK,oCACC,oBACjB,SACF,mCAAgB,IAAA"}