@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,597 @@
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ring-loader/ring-loader.tsx
+const PREFIX = "dowel-ring-loader";
+/** A delay or duration in seconds, scaled for reduced motion. */
+function scaled(seconds) {
+	return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;
+}
+/** currentColor at a given strength — the faint track and secondary strokes. */
+function faint(percent) {
+	return `color-mix(in oklab, currentColor ${String(percent)}%, transparent)`;
+}
+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;box-sizing:border-box;flex-shrink:0;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--dur);animation-delay:var(--delay,0s)}
+.${PREFIX} [data-part=static]{animation:none}
+.${PREFIX} [data-part=ring],.${PREFIX} [data-part=track]{background:transparent;border-style:solid;border-color:currentColor}
+.${PREFIX} [data-part=track]{animation:none}
+.${PREFIX} [data-part=layer]{position:absolute;inset:0;background:transparent;border-radius:0}
+.${PREFIX} [data-part=frame]{background:transparent;border-radius:0;animation:none;overflow:visible}
+.${PREFIX} [data-part=svg]{background:transparent;border-radius:0;overflow:visible}
+.${PREFIX} [data-part=stroke]{background:none;border-radius:0}
+@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-spin-reverse{to{transform:rotate(-360deg)}}
+@keyframes ${PREFIX}-half-turn{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
+@keyframes ${PREFIX}-quarter-turn{from{transform:rotate(0deg)}to{transform:rotate(90deg)}}
+@keyframes ${PREFIX}-quarters{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-flip{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-flip-reverse{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}100%{transform:rotate(-360deg)}}
+@keyframes ${PREFIX}-fade-out{from{opacity:1}to{opacity:.2}}
+@keyframes ${PREFIX}-dot-pulse{0%,100%{transform:rotate(var(--angle)) scale(1);opacity:1}50%{transform:rotate(var(--angle)) scale(.5);opacity:.3}}
+@keyframes ${PREFIX}-tumble-a{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(180deg)}}
+@keyframes ${PREFIX}-tumble-b{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(180deg) rotateY(360deg)}}
+@keyframes ${PREFIX}-pinch{0%,100%{scale:1}50%{scale:.82}}
+@keyframes ${PREFIX}-trace{0%{stroke-dashoffset:125}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-125}}
+@keyframes ${PREFIX}-morph{0%,100%{border-radius:10%}50%{border-radius:50%}}
+@keyframes ${PREFIX}-expand{from{transform:scale(.1);opacity:1}to{transform:scale(1.25);opacity:0}}
+@keyframes ${PREFIX}-breathe{0%,100%{transform:scale(.8);border-width:.75em}50%{transform:scale(1.1);border-width:.25em}}
+@keyframes ${PREFIX}-spiral{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
+`;
+const EASE_IN_OUT = "ease-in-out";
+/** The source's `type: "spring", bounce: 0.4`, as an overshooting curve per step. */
+const SPRING = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+/** A part of the loader, with its keyframes, duration and delay. */
+function part(key, kind, style, motion, children) {
+	const css = { ...style };
+	if (motion) {
+		css.animationName = motion.name.split(",").map((name) => `${PREFIX}-${name.trim()}`).join(", ");
+		if (motion.ease) css.animationTimingFunction = motion.ease;
+		css["--dur"] = scaled(motion.duration);
+		css["--delay"] = scaled(motion.delay ?? 0);
+	}
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": motion ? kind : kind === "ring" ? "track" : kind,
+		style: css,
+		children
+	}, key);
+}
+/** A bordered circle; `colors` is the four-side border-color shorthand. */
+function ring(key, size, width, colors, motion, extra = {}) {
+	return part(key, "ring", {
+		width: size,
+		height: size,
+		borderWidth: width,
+		borderColor: colors,
+		...extra
+	}, motion);
+}
+const ABSOLUTE = { position: "absolute" };
+function box(size) {
+	return {
+		width: size,
+		height: size
+	};
+}
+/** Twelve bars around a centre, fading in turn. */
+function blades(width, height, radius) {
+	return Array.from({ length: 12 }, (_, index) => part(index, "bar", {
+		position: "absolute",
+		top: 0,
+		left: `calc(50% - ${width} / 2)`,
+		width,
+		height,
+		transformOrigin: `calc(${width} / 2) ${radius}`,
+		transform: `rotate(${String(index * 30)}deg)`
+	}, {
+		name: "fade-out",
+		duration: 1,
+		delay: index / 12
+	}));
+}
+/** An SVG ring: a faint track and a stroked arc, in a viewBox of `view`. */
+function svg(size, view, circles, motion) {
+	const css = {
+		width: size,
+		height: size
+	};
+	if (motion) {
+		css.animationName = `${PREFIX}-${motion.name}`;
+		css["--dur"] = scaled(motion.duration);
+		css["--delay"] = scaled(motion.delay ?? 0);
+	}
+	return /* @__PURE__ */ jsx("svg", {
+		"data-part": motion ? "svg" : "frame",
+		viewBox: `0 0 ${String(view)} ${String(view)}`,
+		fill: "none",
+		stroke: "currentColor",
+		"aria-hidden": "true",
+		style: css,
+		children: circles
+	});
+}
+/** Keeps the variant names as literal keys while typing each entry as a plain Variant. */
+function defineVariants(variants) {
+	return variants;
+}
+const VARIANTS = defineVariants({
+	classic: {
+		root: box("4em"),
+		render: () => blades("0.5em", "1em", "2em")
+	},
+	sweep: {
+		root: {},
+		render: () => ring(0, "5em", "0.375em", `currentColor ${faint(20)} ${faint(20)} ${faint(20)}`, {
+			name: "spin",
+			duration: 1
+		})
+	},
+	concentric: {
+		root: box("6em"),
+		render: () => [
+			ring(0, "6em", "0.25em", "transparent currentColor currentColor", {
+				name: "spin",
+				duration: 2
+			}, ABSOLUTE),
+			ring(1, "4em", "0.25em", "currentColor currentColor transparent", {
+				name: "spin-reverse",
+				duration: 1.5
+			}, {
+				...ABSOLUTE,
+				opacity: .6
+			}),
+			ring(2, "2em", "0.25em", "currentColor currentColor currentColor transparent", {
+				name: "spin",
+				duration: 1
+			}, {
+				...ABSOLUTE,
+				opacity: .35
+			})
+		]
+	},
+	"dot-ring": {
+		root: box("6em"),
+		render: () => Array.from({ length: 8 }, (_, index) => part(index, "dot", {
+			position: "absolute",
+			top: 0,
+			left: "calc(50% - 0.5em)",
+			width: "1em",
+			height: "1em",
+			transformOrigin: "0.5em 3em",
+			transform: `rotate(${String(index * 45)}deg)`,
+			["--angle"]: `${String(index * 45)}deg`
+		}, {
+			name: "dot-pulse",
+			duration: 1.5,
+			delay: index * .15,
+			ease: EASE_IN_OUT
+		}))
+	},
+	twin: {
+		root: box("6em"),
+		render: () => [ring(0, "auto", "0.25em", "currentColor transparent transparent currentColor", {
+			name: "spin",
+			duration: 1.5
+		}, {
+			position: "absolute",
+			inset: 0
+		}), ring(1, "auto", "0.25em", "transparent currentColor currentColor transparent", {
+			name: "spin-reverse",
+			duration: 1.5
+		}, {
+			position: "absolute",
+			inset: "1em",
+			opacity: .7
+		})]
+	},
+	comet: {
+		root: {
+			...box("5em"),
+			borderRadius: "9999px",
+			border: `0.125em solid ${faint(15)}`
+		},
+		render: () => part(0, "layer", {
+			borderRadius: "9999px",
+			background: `conic-gradient(from 0deg, transparent 0%, ${faint(10)} 60%, currentColor 100%)`,
+			maskImage: "radial-gradient(closest-side, transparent 84%, black 84%)",
+			WebkitMaskImage: "radial-gradient(closest-side, transparent 84%, black 84%)"
+		}, {
+			name: "spin",
+			duration: 1
+		})
+	},
+	swirl: {
+		root: box("5em"),
+		render: () => [ring(0, "auto", "0.3125em", `currentColor ${faint(30)} ${faint(10)} transparent`, {
+			name: "spin",
+			duration: 1.3
+		}, {
+			position: "absolute",
+			inset: 0
+		}), ring(1, "3em", "0.3125em", `${faint(30)} ${faint(10)} currentColor transparent`, {
+			name: "spin-reverse",
+			duration: .9
+		}, ABSOLUTE)]
+	},
+	radar: {
+		root: {
+			...box("6em"),
+			borderRadius: "9999px",
+			border: `0.125em solid ${faint(10)}`,
+			overflow: "hidden"
+		},
+		render: () => [
+			ring("r1", "4em", "0.125em", faint(5), void 0, ABSOLUTE),
+			ring("r2", "2em", "0.125em", faint(5), void 0, ABSOLUTE),
+			part("core", "static", {
+				...ABSOLUTE,
+				...box("0.75em"),
+				opacity: .8
+			}),
+			part("sweep", "layer", { background: `conic-gradient(from 0deg, transparent 50%, ${faint(2)} 65%, ${faint(10)} 85%, ${faint(45)} 100%)` }, {
+				name: "spin",
+				duration: 1.8
+			})
+		]
+	},
+	orbit: {
+		root: box("5em"),
+		render: () => [part("core", "static", {
+			...box("1em"),
+			opacity: .3
+		}), part("track", "layer", {
+			borderRadius: "9999px",
+			border: `0.125em solid ${faint(15)}`
+		}, {
+			name: "spin",
+			duration: 2
+		}, part("dot", "static", {
+			position: "absolute",
+			top: "-0.75em",
+			left: "calc(50% - 0.75em)",
+			...box("1.5em")
+		}))]
+	},
+	"orbit-pair": {
+		root: box("6em"),
+		render: () => [part("core", "static", box("1.5em")), ...["spin", "spin-reverse"].map((name) => part(name, "layer", {}, {
+			name,
+			duration: 2
+		}, part("dot", "static", {
+			position: "absolute",
+			top: 0,
+			left: "calc(50% - 0.5em)",
+			...box("1em"),
+			opacity: .6
+		})))]
+	},
+	intersect: {
+		root: {
+			...box("6em"),
+			perspective: "100em"
+		},
+		render: () => [ring(0, "5em", "0.25em", `currentColor ${faint(30)} ${faint(10)} transparent`, {
+			name: "tumble-a",
+			duration: 2.2
+		}, {
+			...ABSOLUTE,
+			transformStyle: "preserve-3d"
+		}), ring(1, "5em", "0.25em", `${faint(30)} transparent currentColor ${faint(10)}`, {
+			name: "tumble-b",
+			duration: 2.2
+		}, {
+			...ABSOLUTE,
+			transformStyle: "preserve-3d"
+		})]
+	},
+	clock: {
+		root: {
+			...box("5em"),
+			borderRadius: "9999px",
+			border: "0.25em solid currentColor"
+		},
+		render: () => [[
+			"minute",
+			"1.75em",
+			2
+		], [
+			"hour",
+			"1.25em",
+			12
+		]].map(([key, height, duration]) => part(key, "bar", {
+			position: "absolute",
+			bottom: "50%",
+			left: "calc(50% - 0.125em)",
+			width: "0.25em",
+			height,
+			transformOrigin: "50% 100%"
+		}, {
+			name: "spin",
+			duration
+		}))
+	},
+	gears: {
+		root: { alignItems: "flex-start" },
+		render: () => [ring(0, "4em", "0.5em", "currentColor", {
+			name: "spin",
+			duration: 4
+		}, { borderStyle: "dashed" }), ring(1, "3em", "0.375em", "currentColor", {
+			name: "spin-reverse",
+			duration: 3
+		}, {
+			borderStyle: "dashed",
+			marginTop: "1.5em",
+			marginLeft: "-0.5em",
+			opacity: .6
+		})]
+	},
+	cross: {
+		root: box("4em"),
+		render: () => part(0, "layer", {}, {
+			name: "quarters",
+			duration: 2,
+			ease: EASE_IN_OUT
+		}, [part("h", "static", {
+			position: "absolute",
+			top: "calc(50% - 0.375em)",
+			left: 0,
+			width: "100%",
+			height: "0.75em"
+		}), part("v", "static", {
+			position: "absolute",
+			top: 0,
+			left: "calc(50% - 0.375em)",
+			width: "0.75em",
+			height: "100%"
+		})])
+	},
+	line: {
+		root: box("5em"),
+		render: () => [ring("track", "5em", "0.25em", faint(20), void 0, ABSOLUTE), part("bar", "bar", {
+			width: "4em",
+			height: "0.5em"
+		}, {
+			name: "spin",
+			duration: 1.2
+		})]
+	},
+	square: {
+		root: {},
+		render: () => part(0, "ring", {
+			...box("4em"),
+			borderWidth: "0.25em",
+			borderRadius: 0,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}, {
+			name: "quarter-turn",
+			duration: .6,
+			ease: EASE_IN_OUT
+		}, part("core", "static", {
+			...box("1em"),
+			borderRadius: 0
+		}))
+	},
+	"dual-arc": {
+		root: box("4em"),
+		render: () => ring(0, "auto", "0.25em", "currentColor transparent", {
+			name: "spin, pinch",
+			duration: 1.2,
+			ease: `linear, ${EASE_IN_OUT}`
+		}, {
+			position: "absolute",
+			inset: 0
+		})
+	},
+	"fade-arc": {
+		root: {},
+		render: () => svg("4.5em", 50, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "25",
+			cy: "25",
+			r: "20",
+			strokeWidth: "3.5",
+			strokeOpacity: "0.2"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "25",
+			cy: "25",
+			r: "20",
+			strokeWidth: "3.5",
+			strokeDasharray: "80",
+			strokeDashoffset: "28",
+			strokeLinecap: "round"
+		})] }), {
+			name: "spin",
+			duration: 1
+		})
+	},
+	dash: {
+		root: {},
+		render: () => svg("6em", 50, /* @__PURE__ */ jsx("circle", {
+			cx: "25",
+			cy: "25",
+			r: "20",
+			strokeWidth: "3",
+			strokeDasharray: "8 8"
+		}), {
+			name: "spin",
+			duration: 4
+		})
+	},
+	tracer: {
+		root: {},
+		render: () => svg("5em", 50, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "25",
+			cy: "25",
+			r: "20",
+			strokeWidth: "4",
+			strokeOpacity: "0.2"
+		}), /* @__PURE__ */ jsx("circle", {
+			"data-part": "stroke",
+			cx: "25",
+			cy: "25",
+			r: "20",
+			strokeWidth: "4",
+			strokeLinecap: "round",
+			strokeDasharray: "125",
+			style: {
+				animationName: `${PREFIX}-trace`,
+				animationTimingFunction: EASE_IN_OUT,
+				"--dur": scaled(2),
+				"--delay": scaled(0)
+			}
+		})] }))
+	},
+	petals: {
+		root: box("4em"),
+		render: () => blades("0.25em", "0.875em", "2em")
+	},
+	smooth: {
+		root: {},
+		render: () => svg("4.5em", 32, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "16",
+			cy: "16",
+			r: "14",
+			strokeWidth: "3",
+			strokeOpacity: "0.2"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "16",
+			cy: "16",
+			r: "14",
+			strokeWidth: "3",
+			strokeDasharray: "38 80",
+			strokeLinecap: "round"
+		})] }), {
+			name: "spin",
+			duration: 1
+		})
+	},
+	morph: {
+		root: {},
+		render: () => ring(0, "5em", "0.375em", "currentColor", {
+			name: "half-turn, morph",
+			duration: 2,
+			ease: EASE_IN_OUT
+		}, { borderRadius: "10%" })
+	},
+	expand: {
+		root: box("6em"),
+		render: () => [0, 1].map((index) => ring(index, "5em", "0.25em", "currentColor", {
+			name: "expand",
+			duration: 1.6,
+			delay: index * .8,
+			ease: "ease-out"
+		}, {
+			...ABSOLUTE,
+			transform: "scale(0.1)"
+		}))
+	},
+	watch: {
+		root: box("6em"),
+		render: () => [
+			0,
+			1,
+			2
+		].map((index) => ring(index, `${String(5.5 - index * 1.5)}em`, "0.375em", "currentColor transparent transparent", {
+			name: "spin",
+			duration: 1 + index * .5,
+			ease: EASE_IN_OUT
+		}, ABSOLUTE))
+	},
+	gradient: {
+		root: {},
+		render: () => part(0, "dot", {
+			...box("5em"),
+			background: "conic-gradient(from 0deg, transparent, currentColor)",
+			maskImage: "radial-gradient(transparent 55%, black 60%)",
+			WebkitMaskImage: "radial-gradient(transparent 55%, black 60%)"
+		}, {
+			name: "spin",
+			duration: 1.2
+		})
+	},
+	breathe: {
+		root: box("5em"),
+		render: () => ring(0, "5em", "0.5em", "currentColor", {
+			name: "breathe",
+			duration: 3,
+			ease: EASE_IN_OUT
+		})
+	},
+	offset: {
+		root: box("6em"),
+		render: () => [ring(0, "6em", "0.25em", "currentColor transparent", {
+			name: "flip",
+			duration: 2,
+			ease: EASE_IN_OUT
+		}, ABSOLUTE), ring(1, "4em", "0.25em", "transparent currentColor", {
+			name: "flip-reverse",
+			duration: 2,
+			delay: .2,
+			ease: EASE_IN_OUT
+		}, {
+			...ABSOLUTE,
+			opacity: .6
+		})]
+	},
+	spiral: {
+		root: {},
+		render: () => ring(0, "5em", "0.375em", "currentColor", {
+			name: "spiral",
+			duration: 4
+		}, { borderStyle: "dashed" })
+	},
+	haptic: {
+		root: {},
+		render: () => ring(0, "5em", "0.375em", `currentColor ${faint(20)} ${faint(20)} ${faint(20)}`, {
+			name: "quarters",
+			duration: 2,
+			ease: SPRING
+		})
+	}
+});
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+const ringLoaderVariantNames = Object.keys(VARIANTS);
+const ringLoaderVariants = 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 rings and spinners, in 30 motions. */
+function RingLoader({ className, size, variant = "classic", label, style, ...props }) {
+	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": "ring-loader",
+			"data-variant": variant,
+			"data-motion": "indicator",
+			className: cn(PREFIX, ringLoaderVariants({ size }), className),
+			style: {
+				...spec.root,
+				...style
+			},
+			...props,
+			children: spec.render()
+		}),
+		label ? /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: label
+		}) : null
+	] });
+}
+//#endregion
+export { RingLoader, ringLoaderVariantNames, ringLoaderVariants };
+
+//# sourceMappingURL=ring-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ring-loader.js","names":[],"sources":["../../../src/components/ring-loader/ring-loader.tsx"],"sourcesContent":["// Ported from amicro \"Rings & Spinners\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Same shape as the dots loader (ADR 0014): geometry in `em` (source px ÷ 8),\n * colour from `currentColor`, keyframes shipped through React's hoisted\n * <style>, every duration and delay scaled by --motion-scale-indicator, and\n * `direction: ltr` on the root so a clockwise spin stays clockwise in RTL.\n *\n * Renamed from the source: \"iOS Spinner\" → `petals`.\n *\n * Where the source animates two properties with different easing (Dual Arc,\n * Morphing Ring), each property gets its own keyframe and the part lists both\n * names, so each keeps its own timing function.\n */\n\nconst PREFIX = \"dowel-ring-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\n/** currentColor at a given strength — the faint track and secondary strokes. */\nfunction faint(percent: number): string {\n  return `color-mix(in oklab, currentColor ${String(percent)}%, transparent)`;\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;box-sizing:border-box;flex-shrink:0;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--dur);animation-delay:var(--delay,0s)}\n.${PREFIX} [data-part=static]{animation:none}\n.${PREFIX} [data-part=ring],.${PREFIX} [data-part=track]{background:transparent;border-style:solid;border-color:currentColor}\n.${PREFIX} [data-part=track]{animation:none}\n.${PREFIX} [data-part=layer]{position:absolute;inset:0;background:transparent;border-radius:0}\n.${PREFIX} [data-part=frame]{background:transparent;border-radius:0;animation:none;overflow:visible}\n.${PREFIX} [data-part=svg]{background:transparent;border-radius:0;overflow:visible}\n.${PREFIX} [data-part=stroke]{background:none;border-radius:0}\n@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-spin-reverse{to{transform:rotate(-360deg)}}\n@keyframes ${PREFIX}-half-turn{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}\n@keyframes ${PREFIX}-quarter-turn{from{transform:rotate(0deg)}to{transform:rotate(90deg)}}\n@keyframes ${PREFIX}-quarters{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-flip{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-flip-reverse{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}100%{transform:rotate(-360deg)}}\n@keyframes ${PREFIX}-fade-out{from{opacity:1}to{opacity:.2}}\n@keyframes ${PREFIX}-dot-pulse{0%,100%{transform:rotate(var(--angle)) scale(1);opacity:1}50%{transform:rotate(var(--angle)) scale(.5);opacity:.3}}\n@keyframes ${PREFIX}-tumble-a{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(180deg)}}\n@keyframes ${PREFIX}-tumble-b{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(180deg) rotateY(360deg)}}\n@keyframes ${PREFIX}-pinch{0%,100%{scale:1}50%{scale:.82}}\n@keyframes ${PREFIX}-trace{0%{stroke-dashoffset:125}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-125}}\n@keyframes ${PREFIX}-morph{0%,100%{border-radius:10%}50%{border-radius:50%}}\n@keyframes ${PREFIX}-expand{from{transform:scale(.1);opacity:1}to{transform:scale(1.25);opacity:0}}\n@keyframes ${PREFIX}-breathe{0%,100%{transform:scale(.8);border-width:.75em}50%{transform:scale(1.1);border-width:.25em}}\n@keyframes ${PREFIX}-spiral{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}\n`;\n\ntype Variant = {\n  /** Layout of the root, inline so it outranks the unlayered hoisted stylesheet. */\n  root: CSSProperties;\n  render: () => ReactNode;\n};\n\ntype Motion = {\n  /** One keyframe name, or several separated by commas. */\n  name: string;\n  duration: number;\n  delay?: number;\n  /** One timing function, or one per keyframe name. Defaults to linear. */\n  ease?: string;\n};\n\nconst EASE_IN_OUT = \"ease-in-out\";\n/** The source's `type: \"spring\", bounce: 0.4`, as an overshooting curve per step. */\nconst SPRING = \"cubic-bezier(0.34, 1.56, 0.64, 1)\";\n\n/** A part of the loader, with its keyframes, duration and delay. */\nfunction part(\n  key: number | string,\n  kind: string,\n  style: CSSProperties,\n  motion?: Motion,\n  children?: ReactNode,\n): ReactNode {\n  const css: CSSProperties & Record<`--${string}`, string> = { ...style };\n  if (motion) {\n    css.animationName = motion.name\n      .split(\",\")\n      .map((name) => `${PREFIX}-${name.trim()}`)\n      .join(\", \");\n    if (motion.ease) css.animationTimingFunction = motion.ease;\n    css[\"--dur\"] = scaled(motion.duration);\n    css[\"--delay\"] = scaled(motion.delay ?? 0);\n  }\n  return (\n    <span key={key} data-part={motion ? kind : kind === \"ring\" ? \"track\" : kind} style={css}>\n      {children}\n    </span>\n  );\n}\n\n/** A bordered circle; `colors` is the four-side border-color shorthand. */\nfunction ring(\n  key: number | string,\n  size: string,\n  width: string,\n  colors: string,\n  motion?: Motion,\n  extra: CSSProperties = {},\n): ReactNode {\n  return part(\n    key,\n    \"ring\",\n    { width: size, height: size, borderWidth: width, borderColor: colors, ...extra },\n    motion,\n  );\n}\n\nconst ABSOLUTE: CSSProperties = { position: \"absolute\" };\n\nfunction box(size: string): CSSProperties {\n  return { width: size, height: size };\n}\n\n/** Twelve bars around a centre, fading in turn. */\nfunction blades(width: string, height: string, radius: string): ReactNode {\n  return Array.from({ length: 12 }, (_, index) =>\n    part(\n      index,\n      \"bar\",\n      {\n        position: \"absolute\",\n        top: 0,\n        left: `calc(50% - ${width} / 2)`,\n        width,\n        height,\n        transformOrigin: `calc(${width} / 2) ${radius}`,\n        transform: `rotate(${String(index * 30)}deg)`,\n      },\n      { name: \"fade-out\", duration: 1, delay: index / 12 },\n    ),\n  );\n}\n\n/** An SVG ring: a faint track and a stroked arc, in a viewBox of `view`. */\nfunction svg(size: string, view: number, circles: ReactNode, motion?: Motion): ReactNode {\n  const css: CSSProperties & Record<`--${string}`, string> = { width: size, height: size };\n  if (motion) {\n    css.animationName = `${PREFIX}-${motion.name}`;\n    css[\"--dur\"] = scaled(motion.duration);\n    css[\"--delay\"] = scaled(motion.delay ?? 0);\n  }\n  return (\n    <svg\n      data-part={motion ? \"svg\" : \"frame\"}\n      viewBox={`0 0 ${String(view)} ${String(view)}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      aria-hidden=\"true\"\n      style={css}\n    >\n      {circles}\n    </svg>\n  );\n}\n\n/** Keeps the variant names as literal keys while typing each entry as a plain Variant. */\nfunction defineVariants<Name extends string>(variants: Record<Name, Variant>) {\n  return variants;\n}\n\nconst VARIANTS = defineVariants({\n  classic: { root: box(\"4em\"), render: () => blades(\"0.5em\", \"1em\", \"2em\") },\n  sweep: {\n    root: {},\n    render: () =>\n      ring(0, \"5em\", \"0.375em\", `currentColor ${faint(20)} ${faint(20)} ${faint(20)}`, {\n        name: \"spin\",\n        duration: 1,\n      }),\n  },\n  concentric: {\n    root: box(\"6em\"),\n    render: () => [\n      ring(\n        0,\n        \"6em\",\n        \"0.25em\",\n        \"transparent currentColor currentColor\",\n        {\n          name: \"spin\",\n          duration: 2,\n        },\n        ABSOLUTE,\n      ),\n      ring(\n        1,\n        \"4em\",\n        \"0.25em\",\n        \"currentColor currentColor transparent\",\n        {\n          name: \"spin-reverse\",\n          duration: 1.5,\n        },\n        { ...ABSOLUTE, opacity: 0.6 },\n      ),\n      ring(\n        2,\n        \"2em\",\n        \"0.25em\",\n        \"currentColor currentColor currentColor transparent\",\n        {\n          name: \"spin\",\n          duration: 1,\n        },\n        { ...ABSOLUTE, opacity: 0.35 },\n      ),\n    ],\n  },\n  \"dot-ring\": {\n    root: box(\"6em\"),\n    render: () =>\n      Array.from({ length: 8 }, (_, index) =>\n        part(\n          index,\n          \"dot\",\n          {\n            position: \"absolute\",\n            top: 0,\n            left: \"calc(50% - 0.5em)\",\n            width: \"1em\",\n            height: \"1em\",\n            transformOrigin: \"0.5em 3em\",\n            transform: `rotate(${String(index * 45)}deg)`,\n            [\"--angle\" as string]: `${String(index * 45)}deg`,\n          },\n          { name: \"dot-pulse\", duration: 1.5, delay: index * 0.15, ease: EASE_IN_OUT },\n        ),\n      ),\n  },\n  twin: {\n    root: box(\"6em\"),\n    render: () => [\n      ring(\n        0,\n        \"auto\",\n        \"0.25em\",\n        \"currentColor transparent transparent currentColor\",\n        {\n          name: \"spin\",\n          duration: 1.5,\n        },\n        { position: \"absolute\", inset: 0 },\n      ),\n      ring(\n        1,\n        \"auto\",\n        \"0.25em\",\n        \"transparent currentColor currentColor transparent\",\n        {\n          name: \"spin-reverse\",\n          duration: 1.5,\n        },\n        { position: \"absolute\", inset: \"1em\", opacity: 0.7 },\n      ),\n    ],\n  },\n  comet: {\n    root: { ...box(\"5em\"), borderRadius: \"9999px\", border: `0.125em solid ${faint(15)}` },\n    render: () =>\n      part(\n        0,\n        \"layer\",\n        {\n          borderRadius: \"9999px\",\n          background: `conic-gradient(from 0deg, transparent 0%, ${faint(10)} 60%, currentColor 100%)`,\n          maskImage: \"radial-gradient(closest-side, transparent 84%, black 84%)\",\n          WebkitMaskImage: \"radial-gradient(closest-side, transparent 84%, black 84%)\",\n        },\n        { name: \"spin\", duration: 1 },\n      ),\n  },\n  swirl: {\n    root: box(\"5em\"),\n    render: () => [\n      ring(\n        0,\n        \"auto\",\n        \"0.3125em\",\n        `currentColor ${faint(30)} ${faint(10)} transparent`,\n        {\n          name: \"spin\",\n          duration: 1.3,\n        },\n        { position: \"absolute\", inset: 0 },\n      ),\n      ring(\n        1,\n        \"3em\",\n        \"0.3125em\",\n        `${faint(30)} ${faint(10)} currentColor transparent`,\n        {\n          name: \"spin-reverse\",\n          duration: 0.9,\n        },\n        ABSOLUTE,\n      ),\n    ],\n  },\n  radar: {\n    root: {\n      ...box(\"6em\"),\n      borderRadius: \"9999px\",\n      border: `0.125em solid ${faint(10)}`,\n      overflow: \"hidden\",\n    },\n    render: () => [\n      ring(\"r1\", \"4em\", \"0.125em\", faint(5), undefined, ABSOLUTE),\n      ring(\"r2\", \"2em\", \"0.125em\", faint(5), undefined, ABSOLUTE),\n      part(\"core\", \"static\", { ...ABSOLUTE, ...box(\"0.75em\"), opacity: 0.8 }),\n      part(\n        \"sweep\",\n        \"layer\",\n        {\n          background: `conic-gradient(from 0deg, transparent 50%, ${faint(2)} 65%, ${faint(10)} 85%, ${faint(45)} 100%)`,\n        },\n        { name: \"spin\", duration: 1.8 },\n      ),\n    ],\n  },\n  orbit: {\n    root: box(\"5em\"),\n    render: () => [\n      part(\"core\", \"static\", { ...box(\"1em\"), opacity: 0.3 }),\n      part(\n        \"track\",\n        \"layer\",\n        { borderRadius: \"9999px\", border: `0.125em solid ${faint(15)}` },\n        { name: \"spin\", duration: 2 },\n        part(\"dot\", \"static\", {\n          position: \"absolute\",\n          top: \"-0.75em\",\n          left: \"calc(50% - 0.75em)\",\n          ...box(\"1.5em\"),\n        }),\n      ),\n    ],\n  },\n  \"orbit-pair\": {\n    root: box(\"6em\"),\n    render: () => [\n      part(\"core\", \"static\", box(\"1.5em\")),\n      ...([\"spin\", \"spin-reverse\"] as const).map((name) =>\n        part(\n          name,\n          \"layer\",\n          {},\n          { name, duration: 2 },\n          part(\"dot\", \"static\", {\n            position: \"absolute\",\n            top: 0,\n            left: \"calc(50% - 0.5em)\",\n            ...box(\"1em\"),\n            opacity: 0.6,\n          }),\n        ),\n      ),\n    ],\n  },\n  intersect: {\n    root: { ...box(\"6em\"), perspective: \"100em\" },\n    render: () => [\n      ring(\n        0,\n        \"5em\",\n        \"0.25em\",\n        `currentColor ${faint(30)} ${faint(10)} transparent`,\n        {\n          name: \"tumble-a\",\n          duration: 2.2,\n        },\n        { ...ABSOLUTE, transformStyle: \"preserve-3d\" },\n      ),\n      ring(\n        1,\n        \"5em\",\n        \"0.25em\",\n        `${faint(30)} transparent currentColor ${faint(10)}`,\n        {\n          name: \"tumble-b\",\n          duration: 2.2,\n        },\n        { ...ABSOLUTE, transformStyle: \"preserve-3d\" },\n      ),\n    ],\n  },\n  clock: {\n    root: { ...box(\"5em\"), borderRadius: \"9999px\", border: \"0.25em solid currentColor\" },\n    render: () =>\n      (\n        [\n          [\"minute\", \"1.75em\", 2],\n          [\"hour\", \"1.25em\", 12],\n        ] as const\n      ).map(([key, height, duration]) =>\n        part(\n          key,\n          \"bar\",\n          {\n            position: \"absolute\",\n            bottom: \"50%\",\n            left: \"calc(50% - 0.125em)\",\n            width: \"0.25em\",\n            height,\n            transformOrigin: \"50% 100%\",\n          },\n          { name: \"spin\", duration },\n        ),\n      ),\n  },\n  gears: {\n    root: { alignItems: \"flex-start\" },\n    render: () => [\n      ring(\n        0,\n        \"4em\",\n        \"0.5em\",\n        \"currentColor\",\n        { name: \"spin\", duration: 4 },\n        {\n          borderStyle: \"dashed\",\n        },\n      ),\n      ring(\n        1,\n        \"3em\",\n        \"0.375em\",\n        \"currentColor\",\n        { name: \"spin-reverse\", duration: 3 },\n        {\n          borderStyle: \"dashed\",\n          marginTop: \"1.5em\",\n          marginLeft: \"-0.5em\",\n          opacity: 0.6,\n        },\n      ),\n    ],\n  },\n  cross: {\n    root: box(\"4em\"),\n    render: () =>\n      part(0, \"layer\", {}, { name: \"quarters\", duration: 2, ease: EASE_IN_OUT }, [\n        part(\"h\", \"static\", {\n          position: \"absolute\",\n          top: \"calc(50% - 0.375em)\",\n          left: 0,\n          width: \"100%\",\n          height: \"0.75em\",\n        }),\n        part(\"v\", \"static\", {\n          position: \"absolute\",\n          top: 0,\n          left: \"calc(50% - 0.375em)\",\n          width: \"0.75em\",\n          height: \"100%\",\n        }),\n      ]),\n  },\n  line: {\n    root: box(\"5em\"),\n    render: () => [\n      ring(\"track\", \"5em\", \"0.25em\", faint(20), undefined, ABSOLUTE),\n      part(\"bar\", \"bar\", { width: \"4em\", height: \"0.5em\" }, { name: \"spin\", duration: 1.2 }),\n    ],\n  },\n  square: {\n    root: {},\n    render: () =>\n      part(\n        0,\n        \"ring\",\n        {\n          ...box(\"4em\"),\n          borderWidth: \"0.25em\",\n          borderRadius: 0,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        },\n        { name: \"quarter-turn\", duration: 0.6, ease: EASE_IN_OUT },\n        part(\"core\", \"static\", { ...box(\"1em\"), borderRadius: 0 }),\n      ),\n  },\n  \"dual-arc\": {\n    root: box(\"4em\"),\n    render: () =>\n      ring(\n        0,\n        \"auto\",\n        \"0.25em\",\n        \"currentColor transparent\",\n        {\n          name: \"spin, pinch\",\n          duration: 1.2,\n          ease: `linear, ${EASE_IN_OUT}`,\n        },\n        { position: \"absolute\", inset: 0 },\n      ),\n  },\n  \"fade-arc\": {\n    root: {},\n    render: () =>\n      svg(\n        \"4.5em\",\n        50,\n        <>\n          <circle cx=\"25\" cy=\"25\" r=\"20\" strokeWidth=\"3.5\" strokeOpacity=\"0.2\" />\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            strokeWidth=\"3.5\"\n            strokeDasharray=\"80\"\n            strokeDashoffset=\"28\"\n            strokeLinecap=\"round\"\n          />\n        </>,\n        { name: \"spin\", duration: 1 },\n      ),\n  },\n  dash: {\n    root: {},\n    render: () =>\n      svg(\"6em\", 50, <circle cx=\"25\" cy=\"25\" r=\"20\" strokeWidth=\"3\" strokeDasharray=\"8 8\" />, {\n        name: \"spin\",\n        duration: 4,\n      }),\n  },\n  tracer: {\n    root: {},\n    render: () =>\n      svg(\n        \"5em\",\n        50,\n        <>\n          <circle cx=\"25\" cy=\"25\" r=\"20\" strokeWidth=\"4\" strokeOpacity=\"0.2\" />\n          <circle\n            data-part=\"stroke\"\n            cx=\"25\"\n            cy=\"25\"\n            r=\"20\"\n            strokeWidth=\"4\"\n            strokeLinecap=\"round\"\n            strokeDasharray=\"125\"\n            style={\n              {\n                animationName: `${PREFIX}-trace`,\n                animationTimingFunction: EASE_IN_OUT,\n                \"--dur\": scaled(2),\n                \"--delay\": scaled(0),\n              } as CSSProperties\n            }\n          />\n        </>,\n      ),\n  },\n  petals: { root: box(\"4em\"), render: () => blades(\"0.25em\", \"0.875em\", \"2em\") },\n  smooth: {\n    root: {},\n    render: () =>\n      svg(\n        \"4.5em\",\n        32,\n        <>\n          <circle cx=\"16\" cy=\"16\" r=\"14\" strokeWidth=\"3\" strokeOpacity=\"0.2\" />\n          <circle\n            cx=\"16\"\n            cy=\"16\"\n            r=\"14\"\n            strokeWidth=\"3\"\n            strokeDasharray=\"38 80\"\n            strokeLinecap=\"round\"\n          />\n        </>,\n        { name: \"spin\", duration: 1 },\n      ),\n  },\n  morph: {\n    root: {},\n    render: () =>\n      ring(\n        0,\n        \"5em\",\n        \"0.375em\",\n        \"currentColor\",\n        {\n          name: \"half-turn, morph\",\n          duration: 2,\n          ease: EASE_IN_OUT,\n        },\n        { borderRadius: \"10%\" },\n      ),\n  },\n  expand: {\n    root: box(\"6em\"),\n    render: () =>\n      [0, 1].map((index) =>\n        ring(\n          index,\n          \"5em\",\n          \"0.25em\",\n          \"currentColor\",\n          {\n            name: \"expand\",\n            duration: 1.6,\n            delay: index * 0.8,\n            ease: \"ease-out\",\n          },\n          { ...ABSOLUTE, transform: \"scale(0.1)\" },\n        ),\n      ),\n  },\n  watch: {\n    root: box(\"6em\"),\n    render: () =>\n      [0, 1, 2].map((index) =>\n        ring(\n          index,\n          `${String(5.5 - index * 1.5)}em`,\n          \"0.375em\",\n          \"currentColor transparent transparent\",\n          {\n            name: \"spin\",\n            duration: 1 + index * 0.5,\n            ease: EASE_IN_OUT,\n          },\n          ABSOLUTE,\n        ),\n      ),\n  },\n  gradient: {\n    root: {},\n    render: () =>\n      part(\n        0,\n        \"dot\",\n        {\n          ...box(\"5em\"),\n          background: \"conic-gradient(from 0deg, transparent, currentColor)\",\n          maskImage: \"radial-gradient(transparent 55%, black 60%)\",\n          WebkitMaskImage: \"radial-gradient(transparent 55%, black 60%)\",\n        },\n        { name: \"spin\", duration: 1.2 },\n      ),\n  },\n  breathe: {\n    root: box(\"5em\"),\n    render: () =>\n      ring(0, \"5em\", \"0.5em\", \"currentColor\", {\n        name: \"breathe\",\n        duration: 3,\n        ease: EASE_IN_OUT,\n      }),\n  },\n  offset: {\n    root: box(\"6em\"),\n    render: () => [\n      ring(\n        0,\n        \"6em\",\n        \"0.25em\",\n        \"currentColor transparent\",\n        {\n          name: \"flip\",\n          duration: 2,\n          ease: EASE_IN_OUT,\n        },\n        ABSOLUTE,\n      ),\n      ring(\n        1,\n        \"4em\",\n        \"0.25em\",\n        \"transparent currentColor\",\n        {\n          name: \"flip-reverse\",\n          duration: 2,\n          delay: 0.2,\n          ease: EASE_IN_OUT,\n        },\n        { ...ABSOLUTE, opacity: 0.6 },\n      ),\n    ],\n  },\n  spiral: {\n    root: {},\n    render: () =>\n      ring(\n        0,\n        \"5em\",\n        \"0.375em\",\n        \"currentColor\",\n        { name: \"spiral\", duration: 4 },\n        {\n          borderStyle: \"dashed\",\n        },\n      ),\n  },\n  haptic: {\n    root: {},\n    render: () =>\n      ring(0, \"5em\", \"0.375em\", `currentColor ${faint(20)} ${faint(20)} ${faint(20)}`, {\n        name: \"quarters\",\n        duration: 2,\n        ease: SPRING,\n      }),\n  },\n});\n\nexport type RingLoaderVariant = keyof typeof VARIANTS;\n\n/** Every variant, in catalogue order. Stories and tests iterate this. */\nexport const ringLoaderVariantNames = Object.keys(VARIANTS) as RingLoaderVariant[];\n\nconst ringLoaderVariants = 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 RingLoaderProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof ringLoaderVariants> {\n  /** Which animation to play. */\n  variant?: RingLoaderVariant;\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 rings and spinners, in 30 motions. */\nexport function RingLoader({\n  className,\n  size,\n  variant = \"classic\",\n  label,\n  style,\n  ...props\n}: RingLoaderProps) {\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=\"ring-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, ringLoaderVariants({ size }), className)}\n        style={{ ...spec.root, ...style }}\n        {...props}\n      >\n        {spec.render()}\n      </span>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { ringLoaderVariants };\n"],"mappings":"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"}

package/dist/components/scramble-text/index.d.ts

@@ -0,0 +1,2 @@
+import { ScrambleText, ScrambleTextElement, ScrambleTextProps, ScrambleTextTrigger, scrambleFrame, scrambleTextVariants } from "./scramble-text.js";
+export { ScrambleText, type ScrambleTextElement, type ScrambleTextProps, type ScrambleTextTrigger, scrambleFrame, scrambleTextVariants };

package/dist/components/scramble-text/index.js

@@ -0,0 +1,2 @@
+import { ScrambleText, scrambleFrame, scrambleTextVariants } from "./scramble-text.js";
+export { ScrambleText, scrambleFrame, scrambleTextVariants };