@lovince/icons 1.1.2 → 1.3.0

package/README.md

@@ -19,6 +19,7 @@ do the things a general-purpose set is not trying to do:
 | | |
 |---|---|
 | **One geometry, three variants** | Outline, duotone and filled are the same paths at different fill strengths — so a variant change is an animatable value, not a swap |
+| **Any icon morphs into any other** | Not curated pairs — `home` into `settings`, `search` into `spark`. Arbitrary geometry, no hand-alignment |
 | **Transitions, not swaps** | Menu ⇄ Close, Plus ⇄ Close, and a tick that draws on. Continuity is the point |
 | **Hit area separated from icon size** | An 18px icon still gets a 44px target. The most common icon-button mistake, invisible until someone taps it |
 | **Journey step states** | `○ → ◉ → ✓` as one shape, for onboarding progress |
@@ -112,6 +113,43 @@ control moves as one object:
 </button>
 ```
 
+## Morphing
+
+Libraries that morph icons do it by hand: a menu and a close are *drawn* as the
+same three lines so CSS can rotate one into the other. That works for a handful
+of curated pairs and not at all for the rest.
+
+This morphs arbitrary geometry.
+
+```vue
+<LvMorphIcon :name="current" :size="28" />
+```
+
+Change `name` and the icon transforms into the new one — any icon, any other
+icon, with no pre-alignment.
+
+```ts
+import { planMorph, canMorph } from '@lovince/icons'
+
+const plan = planMorph(paths.home, paths.settings)
+plan?.at(0.5)   // the geometry halfway between them
+```
+
+**How it works.** Both icons are sampled into equal point counts using the
+browser's own geometry engine (`getPointAtLength`), then interpolated. Using
+the browser rather than a hand-written path parser means arcs, cubics,
+quadratics and every shorthand come for free, and the sampling cannot drift
+from how the path actually renders.
+
+Sub-paths are padded on both sides, so a five-path icon can morph into a
+two-path icon: the surplus collapses to a point instead of vanishing. Point
+rings are rotated to their nearest alignment first, which is what stops the
+shape visibly unwinding mid-morph.
+
+Where no geometry engine exists — a server, an old browser, reduced motion —
+`canMorph()` reports `false` and the component swaps instantly. The end state
+is identical either way.
+
 ## Icon set
 
 47 icons across five groups — `navigation`, `journey`, `status`, `onboarding`,

package/dist/LvMorphIcon.vue.d.ts

@@ -0,0 +1,28 @@
+import { IconName } from './paths';
+import { IconFlip } from './core/props';
+type __VLS_Props = {
+    /** Change this and the icon morphs into the new one. Any icon, any other icon. */
+    name: IconName;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    flip?: IconFlip;
+    rotate?: number | string;
+    label?: string;
+    duration?: number;
+    /** Points sampled per sub-path. Higher is smoother and slower to prepare. */
+    resolution?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    morphed: (args_0: "arrowRight" | "arrowLeft" | "arrowUp" | "arrowDown" | "chevronRight" | "chevronLeft" | "chevronUp" | "chevronDown" | "close" | "menu" | "external" | "start" | "skip" | "complete" | "target" | "spark" | "pause" | "restart" | "success" | "warning" | "info" | "error" | "welcome" | "discover" | "click" | "swipe" | "drag" | "scroll" | "tip" | "help" | "shortcut" | "newFeature" | "home" | "search" | "install" | "book" | "code" | "palette" | "shield" | "accessibility" | "sun" | "moon" | "monitor" | "plus" | "minus" | "copy" | "settings") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMorphed?: ((args_0: "arrowRight" | "arrowLeft" | "arrowUp" | "arrowDown" | "chevronRight" | "chevronLeft" | "chevronUp" | "chevronDown" | "close" | "menu" | "external" | "start" | "skip" | "complete" | "target" | "spark" | "pause" | "restart" | "success" | "warning" | "info" | "error" | "welcome" | "discover" | "click" | "swipe" | "drag" | "scroll" | "tip" | "help" | "shortcut" | "newFeature" | "home" | "search" | "install" | "book" | "code" | "palette" | "shield" | "accessibility" | "sun" | "moon" | "monitor" | "plus" | "minus" | "copy" | "settings") => any) | undefined;
+}>, {
+    size: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    duration: number;
+    resolution: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvMenuToClose.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     size: number | string;
     strokeWidth: number | string;
     absoluteStrokeWidth: boolean;
-    open: boolean;
     duration: number;
+    open: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/animated/LvPlusToClose.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     size: number | string;
     strokeWidth: number | string;
     absoluteStrokeWidth: boolean;
-    open: boolean;
     duration: number;
+    open: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/core/morph.d.ts

@@ -0,0 +1,50 @@
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * Morphing between *arbitrary* icons.
+ *
+ * Icon libraries that morph do it by hand: a menu and a close are drawn as the
+ * same three lines so CSS can rotate them. That works for a handful of curated
+ * pairs and not at all for the other 2,000 combinations.
+ *
+ * This samples any two paths into equal point counts and interpolates between
+ * them, so *any* icon can become *any* other — `home` into `settings`, `search`
+ * into `spark` — with no hand-alignment.
+ *
+ * The sampling uses the browser's own geometry engine (`getPointAtLength`)
+ * rather than a hand-written path parser. That is the whole trick: arcs,
+ * cubics, quadratics and every shorthand come for free and cannot drift from
+ * how the browser actually renders them.
+ *
+ * Where that engine is unavailable — a server, an older environment — every
+ * function returns `null` and callers swap instantly instead.
+ */
+export declare const canMorph: () => boolean;
+/** Samples one path into `count` points spaced evenly along its length. */
+export declare const samplePath: (d: string, count: number) => Point[] | null;
+/**
+ * Samples a whole icon. Sub-paths are padded to the same count on both sides so
+ * a three-path icon can morph into a one-path icon: the surplus collapses to a
+ * point rather than being dropped, which keeps the motion continuous.
+ */
+export declare const sampleIcon: (shapes: readonly string[], perPath: number) => Point[][] | null;
+/**
+ * Rotates the target ring so its start point is nearest the source's. Without
+ * this the shape visibly unwinds during the morph, which reads as a glitch
+ * rather than a transformation.
+ */
+export declare const align: (from: readonly Point[], to: readonly Point[]) => Point[];
+export declare const lerp: (a: number, b: number, t: number) => number;
+export interface MorphPlan {
+    readonly from: Point[][];
+    readonly to: Point[][];
+    /** `at(0)` is the source icon, `at(1)` the target. */
+    readonly at: (progress: number) => string[];
+}
+/**
+ * Prepares a reusable interpolation between two icons. Sampling is the
+ * expensive part, so it happens once here rather than on every frame.
+ */
+export declare const planMorph: (from: readonly string[], to: readonly string[], perPath?: number) => MorphPlan | null;

package/dist/index.d.ts

@@ -8,5 +8,6 @@ export { renderIcon, createIcon, iconDataUri, type RenderOptions } from './rende
 export { defineIconElement, optionsFromAttributes, resolveElementName, type LvIconElement, } from './element';
 export { CANVAS, DEFAULT_SIZE, DEFAULT_STROKE, resolveGeometry, resolveStroke, resolveTransform, resolveFill, type IconFlip, type IconGeometry, } from './core/props';
 export { CONTEXT, VARIANT_FILL, STATE_FILL, STATE_OPACITY, opticalStroke, resolveContext, resolveVariantFill, type ContextPreset, type IconContext, type IconState, type IconVariant, } from './core/variants';
+export { align, canMorph, lerp, planMorph, sampleIcon, samplePath, type MorphPlan, type Point, } from './core/morph';
 export { createTimeline, journeyChoreography, type Cue, type CueInput, type Timeline, } from './core/choreography';
 export { DURATION, EASE, cssDuration, prefersReducedMotion, resolveDuration, } from './core/motion';

package/dist/index.js

@@ -1,9 +1,9 @@
 import { iconGroups as e, iconNames as t, isIconName as n, paths as r } from "./paths.js";
-import { _ as i, a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, y as S } from "./motion-72rOKpWt.js";
+import { C as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, l as g, m as _, n as v, o as y, p as b, r as x, s as S, t as C, u as w, v as T, w as E, x as D, y as O } from "./motion-CBQXeIyE.js";
 //#region src/render.ts
-var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), T = (e, t) => {
-	let n = i(t), a = l(t.fill), o = t.label == null || t.label.length === 0, s = {
-		xmlns: C,
+var k = "http://www.w3.org/2000/svg", A = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), j = (e, t) => {
+	let n = i(t), o = a(t.fill), s = t.label == null || t.label.length === 0, c = {
+		xmlns: k,
 		class: t.class ?? "lv-icon",
 		width: String(n.size),
 		height: String(n.size),
@@ -14,29 +14,29 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	};
-	return o ? s["aria-hidden"] = "true" : (s.role = "img", s["aria-label"] = t.label), {
-		attrs: s,
+	return s ? c["aria-hidden"] = "true" : (c.role = "img", c["aria-label"] = t.label), {
+		attrs: c,
 		shapes: r[e] ?? [],
 		transform: n.transform,
-		fill: a
+		fill: o
 	};
-}, E = (e, t = {}) => {
-	let { attrs: n, shapes: r, transform: i, fill: a } = T(e, t), o = Object.entries(n).map(([e, t]) => `${e}="${w(t)}"`).join(" "), s = a > 0 ? ` fill="currentColor" fill-opacity="${a}"` : "", c = r.map((e) => `<path d="${w(e)}"${s}/>`).join("");
-	return `<svg ${o}>${i === void 0 ? c : `<g transform="${w(i)}">${c}</g>`}</svg>`;
-}, D = (e, t = {}) => {
+}, M = (e, t = {}) => {
+	let { attrs: n, shapes: r, transform: i, fill: a } = j(e, t), o = Object.entries(n).map(([e, t]) => `${e}="${A(t)}"`).join(" "), s = a > 0 ? ` fill="currentColor" fill-opacity="${a}"` : "", c = r.map((e) => `<path d="${A(e)}"${s}/>`).join("");
+	return `<svg ${o}>${i === void 0 ? c : `<g transform="${A(i)}">${c}</g>`}</svg>`;
+}, N = (e, t = {}) => {
 	if (typeof document > "u") return null;
-	let { attrs: n, shapes: r, transform: i, fill: a } = T(e, t), o = document.createElementNS(C, "svg");
+	let { attrs: n, shapes: r, transform: i, fill: a } = j(e, t), o = document.createElementNS(k, "svg");
 	for (let [e, t] of Object.entries(n)) o.setAttribute(e, t);
 	let s = i === void 0 ? o : (() => {
-		let e = document.createElementNS(C, "g");
+		let e = document.createElementNS(k, "g");
 		return e.setAttribute("transform", i), o.appendChild(e), e;
 	})();
 	for (let e of r) {
-		let t = document.createElementNS(C, "path");
+		let t = document.createElementNS(k, "path");
 		t.setAttribute("d", e), a > 0 && (t.setAttribute("fill", "currentColor"), t.setAttribute("fill-opacity", String(a))), s.appendChild(t);
 	}
 	return o;
-}, O = (e, t = {}) => `data:image/svg+xml,${encodeURIComponent(E(e, t))}`, k = [
+}, P = (e, t = {}) => `data:image/svg+xml,${encodeURIComponent(M(e, t))}`, F = [
 	"name",
 	"size",
 	"stroke-width",
@@ -45,30 +45,30 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 	"rotate",
 	"flip",
 	"label"
-], A = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), j = (e) => {
+], I = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), L = (e) => {
 	if (e == null) return null;
-	let t = A(e.trim());
+	let t = I(e.trim());
 	return n(t) ? t : null;
-}, M = (e, t) => {
+}, R = (e, t) => {
 	if (e == null) return t;
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, N = (e, t) => {
+}, z = (e, t) => {
 	let n = e("flip"), r = e("label");
 	return {
-		size: M(e("size"), 24),
-		strokeWidth: M(e("stroke-width"), 2),
+		size: R(e("size"), 24),
+		strokeWidth: R(e("stroke-width"), 2),
 		absoluteStrokeWidth: t("absolute-stroke-width"),
-		fill: M(e("fill"), 0),
-		rotate: M(e("rotate"), 0),
+		fill: R(e("fill"), 0),
+		rotate: R(e("rotate"), 0),
 		...n === "horizontal" || n === "vertical" || n === "both" ? { flip: n } : {},
 		...r == null ? {} : { label: r }
 	};
-}, P = (e = "lv-icon") => {
+}, B = (e = "lv-icon") => {
 	if (typeof window > "u" || typeof customElements > "u" || typeof HTMLElement > "u" || customElements.get(e) !== void 0) return;
 	class t extends HTMLElement {
 		static get observedAttributes() {
-			return k;
+			return F;
 		}
 		connectedCallback() {
 			this.render();
@@ -77,16 +77,16 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 			this.isConnected && this.render();
 		}
 		render() {
-			let e = j(this.getAttribute("name"));
+			let e = L(this.getAttribute("name"));
 			if (this.replaceChildren(), e === null) return;
-			let t = D(e, N((e) => this.getAttribute(e), (e) => this.hasAttribute(e)));
+			let t = N(e, z((e) => this.getAttribute(e), (e) => this.hasAttribute(e)));
 			t !== null && this.appendChild(t);
 		}
 	}
 	customElements.define(e, t);
-}, F = (e) => e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2, I = () => {
+}, V = (e) => e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2, H = () => {
 	let e = [], t = 0, n = 0, r = !1, i = (n) => {
-		let r = n.duration ?? y.state, i = Math.max(0, t + (n.offset ?? 0));
+		let r = n.duration ?? C.state, i = Math.max(0, t + (n.offset ?? 0));
 		e.push({
 			name: n.name,
 			at: i,
@@ -94,23 +94,23 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 			run: n.run,
 			...n.onComplete === void 0 ? {} : { onComplete: n.onComplete }
 		}), t = i + r;
-	}, o = {
-		add: (e) => (i(e), o),
-		stagger: (e, n = y.micro / 2) => {
+	}, a = {
+		add: (e) => (i(e), a),
+		stagger: (e, n = C.micro / 2) => {
 			let r = t;
 			return e.forEach((e, a) => {
 				t = r + a * n, i({
 					...e,
 					offset: 0
 				});
-			}), t = Math.max(t, r + (e.length - 1) * n + (e[0]?.duration ?? y.state)), o;
+			}), t = Math.max(t, r + (e.length - 1) * n + (e[0]?.duration ?? C.state)), a;
 		},
 		cues: () => [...e],
 		duration: () => e.reduce((e, t) => Math.max(e, t.at + t.duration), 0),
 		play: () => {
 			r = !1;
-			let t = o.duration();
-			if (a(t) === 0 || typeof requestAnimationFrame != "function") {
+			let t = a.duration();
+			if (c(t) === 0 || typeof requestAnimationFrame != "function") {
 				for (let t of e) t.run(1), t.onComplete?.();
 				return Promise.resolve();
 			}
@@ -121,7 +121,7 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 					for (let t of e) {
 						if (l < t.at) continue;
 						let e = t.duration <= 0 ? 1 : (l - t.at) / t.duration, n = e >= 1 ? 1 : e;
-						t.run(F(n)), n === 1 && !o.has(t.name) && (o.add(t.name), t.onComplete?.());
+						t.run(V(n)), n === 1 && !o.has(t.name) && (o.add(t.name), t.onComplete?.());
 					}
 					if (l >= t) return i();
 					n = requestAnimationFrame(s);
@@ -133,9 +133,9 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 			r = !0, n !== 0 && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(n), n = 0;
 		}
 	};
-	return o;
-}, L = (e) => {
-	let t = I().add({
+	return a;
+}, U = (e) => {
+	let t = H().add({
 		name: "spotlight",
 		duration: .72,
 		run: e.spotlight
@@ -156,4 +156,4 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 	}), n.length > 0 && t.stagger(n, .06), t;
 };
 //#endregion
-export { g as CANVAS, h as CONTEXT, p as DEFAULT_SIZE, u as DEFAULT_STROKE, y as DURATION, m as EASE, v as STATE_FILL, o as STATE_OPACITY, f as VARIANT_FILL, D as createIcon, I as createTimeline, _ as cssDuration, P as defineIconElement, O as iconDataUri, e as iconGroups, t as iconNames, n as isIconName, L as journeyChoreography, b as opticalStroke, N as optionsFromAttributes, r as paths, d as prefersReducedMotion, E as renderIcon, s as resolveContext, a as resolveDuration, j as resolveElementName, l as resolveFill, i as resolveGeometry, x as resolveStroke, S as resolveTransform, c as resolveVariantFill };
+export { O as CANVAS, f as CONTEXT, l as DEFAULT_SIZE, D as DEFAULT_STROKE, C as DURATION, v as EASE, b as STATE_FILL, _ as STATE_OPACITY, m as VARIANT_FILL, y as align, S as canMorph, N as createIcon, H as createTimeline, x as cssDuration, B as defineIconElement, P as iconDataUri, e as iconGroups, t as iconNames, n as isIconName, U as journeyChoreography, u as lerp, p as opticalStroke, z as optionsFromAttributes, r as paths, g as planMorph, h as prefersReducedMotion, M as renderIcon, s as resolveContext, c as resolveDuration, L as resolveElementName, a as resolveFill, i as resolveGeometry, E as resolveStroke, o as resolveTransform, T as resolveVariantFill, w as sampleIcon, d as samplePath };

package/dist/motion-CBQXeIyE.js

@@ -0,0 +1,166 @@
+//#region src/core/props.ts
+var e = 24, t = 24, n = 2, r = (e, t) => {
+	if (typeof e == "number") return Number.isFinite(e) ? e : t;
+	if (typeof e == "string") {
+		let n = Number.parseFloat(e);
+		return Number.isFinite(n) ? n : t;
+	}
+	return t;
+}, i = (e, t, n) => {
+	let i = r(e, 2);
+	return !n || t <= 0 ? i : i * 24 / t;
+}, a = (e) => (r(e, 0) % 360 + 360) % 360, o = (e) => e === "horizontal" ? [-1, 1] : e === "vertical" ? [1, -1] : e === "both" ? [-1, -1] : [1, 1], s = (e, t) => {
+	let n = a(e), [r, i] = o(t);
+	if (n === 0 && r === 1 && i === 1) return;
+	let s = ["translate(12 12)"];
+	return n !== 0 && s.push(`rotate(${n})`), (r !== 1 || i !== 1) && s.push(`scale(${r} ${i})`), s.push("translate(-12 -12)"), s.join(" ");
+}, c = (e) => {
+	let t = r(e.size, 24);
+	return {
+		size: t,
+		strokeWidth: i(e.strokeWidth, t, e.absoluteStrokeWidth === !0),
+		transform: s(e.rotate, e.flip)
+	};
+}, l = (e) => {
+	if (e === !0) return 1;
+	if (e === void 0 || e === !1) return 0;
+	let t = r(e, 0);
+	return t < 0 ? 0 : t > 1 ? 1 : t;
+}, u = {
+	outline: 0,
+	duotone: .18,
+	filled: 1
+}, d = (e) => u[e ?? "outline"] ?? 0, f = {
+	inline: {
+		size: 16,
+		strokeWidth: 2,
+		hitArea: 0
+	},
+	toolbar: {
+		size: 20,
+		strokeWidth: 2,
+		hitArea: 44
+	},
+	button: {
+		size: 18,
+		strokeWidth: 2,
+		hitArea: 44
+	},
+	navigation: {
+		size: 22,
+		strokeWidth: 1.9,
+		hitArea: 48
+	},
+	status: {
+		size: 20,
+		strokeWidth: 2,
+		hitArea: 0
+	},
+	hero: {
+		size: 40,
+		strokeWidth: 1.6,
+		hitArea: 0
+	}
+}, p = (e) => e === void 0 ? null : f[e] ?? null, m = (e, t = 2) => e <= 16 ? t * .9 : e <= 20 ? t * .95 : e <= 28 ? t : e <= 40 ? t * .85 : t * .75, h = {
+	default: 0,
+	hover: .12,
+	active: 1,
+	selected: 1,
+	disabled: 0
+}, g = {
+	default: 1,
+	hover: 1,
+	active: 1,
+	selected: 1,
+	disabled: .38
+}, _ = "http://www.w3.org/2000/svg", v = () => {
+	if (typeof document > "u") return !1;
+	try {
+		let e = document.createElementNS(_, "path");
+		return typeof e.getTotalLength == "function" && typeof e.getPointAtLength == "function";
+	} catch {
+		return !1;
+	}
+}, y = (e, t) => {
+	if (!v() || t < 2) return null;
+	try {
+		let n = document.createElementNS(_, "svg"), r = document.createElementNS(_, "path");
+		r.setAttribute("d", e), n.appendChild(r);
+		let i = r.getTotalLength();
+		if (!Number.isFinite(i) || i <= 0) return null;
+		let a = [];
+		for (let e = 0; e < t; e += 1) {
+			let n = r.getPointAtLength(i * e / (t - 1));
+			a.push({
+				x: n.x,
+				y: n.y
+			});
+		}
+		return a;
+	} catch {
+		return null;
+	}
+}, b = (e, t) => {
+	if (e.length === 0) return null;
+	let n = [];
+	for (let r of e) {
+		let e = y(r, t);
+		if (e === null) return null;
+		n.push(e);
+	}
+	return n;
+}, x = (e) => {
+	let t = 0, n = 0;
+	for (let r of e) t += r.x, n += r.y;
+	return {
+		x: t / e.length,
+		y: n / e.length
+	};
+}, S = (e) => {
+	let t = x(e);
+	return e.map(() => t);
+}, C = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), w = (e, t) => {
+	if (e.length !== t.length || e.length === 0) return [...t];
+	let n = 0, r = Infinity, i = Math.max(1, Math.floor(t.length / 24));
+	for (let a = 0; a < t.length; a += i) {
+		let o = 0;
+		for (let n = 0; n < e.length; n += i) o += C(e[n], t[(n + a) % t.length]);
+		o < r && (r = o, n = a);
+	}
+	return t.map((e, r) => t[(r + n) % t.length]);
+}, T = (e, t, n) => e + (t - e) * n, E = (e) => {
+	if (e.length === 0) return "";
+	let t = e[0], n = e.slice(1).map((e) => `L${e.x.toFixed(2)} ${e.y.toFixed(2)}`).join("");
+	return `M${t.x.toFixed(2)} ${t.y.toFixed(2)}${n}`;
+}, D = (e, t, n = 64) => {
+	let r = b(e, n), i = b(t, n);
+	if (r === null || i === null) return null;
+	let a = Math.max(r.length, i.length), o = [], s = [];
+	for (let e = 0; e < a; e += 1) {
+		let t = r[e], n = i[e];
+		t !== void 0 && n !== void 0 ? (o.push([...t]), s.push(w(t, n))) : t === void 0 ? n !== void 0 && (o.push(S(n)), s.push([...n])) : (o.push([...t]), s.push(S(t)));
+	}
+	return {
+		from: o,
+		to: s,
+		at: (e) => {
+			let t = e <= 0 ? 0 : e >= 1 ? 1 : e;
+			return o.map((e, n) => {
+				let r = s[n];
+				return E(e.map((e, n) => ({
+					x: T(e.x, r[n].x, t),
+					y: T(e.y, r[n].y, t)
+				})));
+			});
+		}
+	};
+}, O = {
+	micro: .18,
+	state: .28,
+	morph: .36
+}, k = {
+	enter: "cubic-bezier(0.33, 1, 0.68, 1)",
+	morph: "cubic-bezier(0.65, 0, 0.35, 1)"
+}, A = () => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches === !0, j = (e, t = A()) => t ? 0 : e, M = (e, t) => `${j(e, t)}s`;
+//#endregion
+export { c as C, l as S, s as T, p as _, j as a, t as b, T as c, y as d, f, m as g, u as h, A as i, D as l, g as m, k as n, w as o, h as p, M as r, v as s, O as t, b as u, d as v, i as w, n as x, e as y };

package/dist/paths.d.ts

@@ -9,53 +9,53 @@
  * those, which is what lets one definition serve every size and weight.
  */
 export declare const paths: {
-    readonly arrowRight: readonly ["M4 12h15", "m13 6 6 6-6 6"];
-    readonly arrowLeft: readonly ["M20 12H5", "m11 6-6 6 6 6"];
-    readonly arrowUp: readonly ["M12 20V5", "m6 11 6-6 6 6"];
-    readonly arrowDown: readonly ["M12 4v15", "m6 13 6 6 6-6"];
-    readonly chevronRight: readonly ["m9 6 6 6-6 6"];
-    readonly chevronLeft: readonly ["m15 6-6 6 6 6"];
-    readonly chevronUp: readonly ["m6 15 6-6 6 6"];
-    readonly chevronDown: readonly ["m6 9 6 6 6-6"];
-    readonly close: readonly ["m6 6 12 12", "m18 6-12 12"];
-    readonly menu: readonly ["M4 7h16", "M4 12h16", "M4 17h16"];
-    readonly external: readonly ["M14 4h6v6", "M20 4 11 13", "M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"];
-    readonly start: readonly ["M9.5 7.5v9l7-4.5z", "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"];
-    readonly skip: readonly ["m6 6 7 6-7 6", "M18 5v14"];
-    readonly complete: readonly ["m5 12.5 4.5 4.5L19 7.5"];
-    readonly target: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z", "M12 11.25a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"];
-    readonly spark: readonly ["M12 3.5 13.9 9l5.6 1.9-5.6 1.9L12 18.5l-1.9-5.7L4.5 10.9 10.1 9Z", "M18.5 4v3", "M20 5.5h-3"];
-    readonly pause: readonly ["M9.5 5v14", "M14.5 5v14"];
-    readonly restart: readonly ["M20 12a8 8 0 1 1-2.6-5.9", "M20 4v5h-5"];
-    readonly success: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "m8.25 12.25 2.5 2.5 5-5.5"];
-    readonly warning: readonly ["M10.6 4.3 2.9 17.5A1.6 1.6 0 0 0 4.3 20h15.4a1.6 1.6 0 0 0 1.4-2.5L13.4 4.3a1.6 1.6 0 0 0-2.8 0Z", "M12 9.5v4", "M12 16.75h.01"];
-    readonly info: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "M12 11v5", "M12 8h.01"];
-    readonly error: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "m9 9 6 6", "m15 9-6 6"];
-    readonly welcome: readonly ["M4 11.5 12 4l8 7.5", "M6.5 10.2V19a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-8.8", "M9.5 20v-4.5a2.5 2.5 0 0 1 5 0V20"];
-    readonly discover: readonly ["M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z", "m20 20-4.4-4.4", "M11 8.5v5", "M8.5 11h5"];
-    readonly click: readonly ["M9 4.5v3", "M4.5 9h3", "M6.2 6.2 8 8", "m11 11 8.5 3.2-3.6 1.4-1.4 3.6z"];
-    readonly swipe: readonly ["M7 12h10", "m10 9-3 3 3 3", "m14 9 3 3-3 3", "M12 4v2", "M12 18v2"];
-    readonly drag: readonly ["M9 6.5h.01", "M15 6.5h.01", "M9 12h.01", "M15 12h.01", "M9 17.5h.01", "M15 17.5h.01"];
-    readonly scroll: readonly ["M12 5.5a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0V9A3.5 3.5 0 0 0 12 5.5Z", "M12 9v2.5"];
-    readonly tip: readonly ["M9 18h6", "M10 21h4", "M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1 1 1.6v.5h5v-.5c0-.6.4-1.2 1-1.6A6 6 0 0 0 12 3Z"];
-    readonly help: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "M9.6 9.5a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4", "M12 16.5h.01"];
-    readonly shortcut: readonly ["M6 8.5a2.5 2.5 0 1 1 2.5 2.5H6z", "M8.5 13H6v2.5A2.5 2.5 0 1 0 8.5 13Z", "M15.5 11H18V8.5A2.5 2.5 0 1 0 15.5 11Z", "M15.5 13a2.5 2.5 0 1 0 2.5 2.5V13z"];
-    readonly newFeature: readonly ["M12 3.5 13.6 9l5.4 1.8-5.4 1.8L12 18l-1.6-5.4L5 10.8 10.4 9Z", "M18.5 15v3.5", "M20.25 16.75h-3.5"];
-    readonly home: readonly ["M3 10.4 12 3l9 7.4", "M5.5 9.2V20a1 1 0 0 0 1 1H10v-6h4v6h3.5a1 1 0 0 0 1-1V9.2"];
-    readonly search: readonly ["M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z", "m20 20-4.4-4.4"];
-    readonly install: readonly ["M12 3v11", "m7.5 10 4.5 4 4.5-4", "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"];
-    readonly book: readonly ["M4 4.5h5a3 3 0 0 1 3 3V20a2.5 2.5 0 0 0-2.5-2.5H4Z", "M20 4.5h-5a3 3 0 0 0-3 3V20a2.5 2.5 0 0 1 2.5-2.5H20Z"];
-    readonly code: readonly ["m8.5 7-5 5 5 5", "m15.5 7 5 5-5 5", "m13.5 4-3 16"];
-    readonly palette: readonly ["M12 3a9 9 0 0 0 0 18 2 2 0 0 0 1.6-3.2 2 2 0 0 1 1.6-3.2H18a3 3 0 0 0 3-3 9 9 0 0 0-9-8.6Z", "M7.5 12.5h.01", "M9.5 8h.01", "M14 7h.01", "M17 10h.01"];
-    readonly shield: readonly ["M12 3l7.5 3v6c0 4.4-3 8.1-7.5 9.4C7.5 20.1 4.5 16.4 4.5 12V6Z", "m9 12 2.2 2.2L15.5 10"];
-    readonly accessibility: readonly ["M12 3.2a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z", "M4.5 8.4 12 9.8l7.5-1.4", "M12 9.8v4.4", "m9 20.4 3-6.2 3 6.2"];
-    readonly sun: readonly ["M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z", "M12 2.5v2", "M12 19.5v2", "M4.6 4.6 6 6", "M18 18l1.4 1.4", "M2.5 12h2", "M19.5 12h2", "M4.6 19.4 6 18", "M18 6l1.4-1.4"];
-    readonly moon: readonly ["M20 14.2A8.2 8.2 0 0 1 9.8 4 8.4 8.4 0 1 0 20 14.2Z"];
-    readonly monitor: readonly ["M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z", "M9 20h6", "M12 16v4"];
-    readonly plus: readonly ["M12 5v14", "M5 12h14"];
-    readonly minus: readonly ["M5 12h14"];
-    readonly copy: readonly ["M9 9h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Z", "M5 15H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v1"];
-    readonly settings: readonly ["M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z", "M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1v.3a2 2 0 1 1-4 0v-.2a1.6 1.6 0 0 0-2.8-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3.5 15H3a2 2 0 1 1 0-4h.2a1.6 1.6 0 0 0 1.1-2.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 4.5V4a2 2 0 1 1 4 0v.2a1.6 1.6 0 0 0 2.8 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.8h.3a2 2 0 1 1 0 4h-.2a1.6 1.6 0 0 0-1.4.9Z"];
+    readonly arrowRight: readonly ["M4 12L19 12", "M13 6L19 12L13 18"];
+    readonly arrowLeft: readonly ["M20 12L5 12", "M11 6L5 12L11 18"];
+    readonly arrowUp: readonly ["M12 20L12 5", "M6 11L12 5L18 11"];
+    readonly arrowDown: readonly ["M12 4L12 19", "M6 13L12 19L18 13"];
+    readonly chevronRight: readonly ["M9 6L15 12L9 18"];
+    readonly chevronLeft: readonly ["M15 6L9 12L15 18"];
+    readonly chevronUp: readonly ["M6 15L12 9L18 15"];
+    readonly chevronDown: readonly ["M6 9L12 15L18 9"];
+    readonly close: readonly ["M6 6L18 18", "M18 6L6 18"];
+    readonly menu: readonly ["M4 7L20 7", "M4 12L20 12", "M4 17L20 17"];
+    readonly external: readonly ["M14 4L20 4L20 10", "M20 4L11 13", "M18 14L18 19A1 1 0 0 1 17 20L5 20A1 1 0 0 1 4 19L4 7A1 1 0 0 1 5 6L10 6"];
+    readonly start: readonly ["M9.5 7.5L9.5 16.5L16.5 12Z", "M12 3A9 9 0 1 0 12 21A9 9 0 0 0 12 3Z"];
+    readonly skip: readonly ["M6 6L13 12L6 18", "M18 5L18 19"];
+    readonly complete: readonly ["M5 12.5L9.5 17L19 7.5"];
+    readonly target: readonly ["M12 3A9 9 0 1 0 12 21A9 9 0 0 0 12 3Z", "M12 8A4 4 0 1 0 12 16A4 4 0 0 0 12 8Z", "M12 11.5A1 1 0 1 0 12 13A1 1 0 0 0 12 11.5Z"];
+    readonly spark: readonly ["M12 3.5L14 9L19.5 11L14 13L12 18.5L10 13L4.5 11L10 9Z", "M18.5 4L18.5 7", "M20 5.5L17 5.5"];
+    readonly pause: readonly ["M9.5 5L9.5 19", "M14.5 5L14.5 19"];
+    readonly restart: readonly ["M20 12A8 8 0 1 1 17.5 6", "M20 4L20 9L15 9"];
+    readonly success: readonly ["M12 3A9 9 0 1 0 12 21A9 9 0 0 0 12 3Z", "M8.5 12.5L11 15L16 9.5"];
+    readonly warning: readonly ["M10.5 4.5L3 17.5A1.5 1.5 0 0 0 4.5 20L20 20A1.5 1.5 0 0 0 21.5 17.5L13.5 4.5A1.5 1.5 0 0 0 10.5 4.5Z", "M12 9.5L12 13.5", "M12 17L12 17"];
+    readonly info: readonly ["M12 3A9 9 0 1 0 12 21A9 9 0 0 0 12 3Z", "M12 11L12 16", "M12 8L12 8"];
+    readonly error: readonly ["M12 3A9 9 0 1 0 12 21A9 9 0 0 0 12 3Z", "M9 9L15 15", "M15 9L9 15"];
+    readonly welcome: readonly ["M4 11.5L12 4L20 11.5", "M6.5 10L6.5 19A1 1 0 0 0 7.5 20L16.5 20A1 1 0 0 0 17.5 19L17.5 10", "M9.5 20L9.5 15.5A2.5 2.5 0 0 1 14.5 15.5L14.5 20"];
+    readonly discover: readonly ["M11 4.5A6.5 6.5 0 1 0 11 17.5A6.5 6.5 0 0 0 11 4.5Z", "M20 20L15.5 15.5", "M11 8.5L11 13.5", "M8.5 11L13.5 11"];
+    readonly click: readonly ["M9 4.5L9 7.5", "M4.5 9L7.5 9", "M6 6L8 8", "M11 11L19.5 14L16 15.5L14.5 19Z"];
+    readonly swipe: readonly ["M7 12L17 12", "M10 9L7 12L10 15", "M14 9L17 12L14 15", "M12 4L12 6", "M12 18L12 20"];
+    readonly drag: readonly ["M9 6.5L9 6.5", "M15 6.5L15 6.5", "M9 12L9 12", "M15 12L15 12", "M9 17.5L9 17.5", "M15 17.5L15 17.5"];
+    readonly scroll: readonly ["M12 5.5A3.5 3.5 0 0 0 8.5 9L8.5 15A3.5 3.5 0 0 0 15.5 15L15.5 9A3.5 3.5 0 0 0 12 5.5Z", "M12 9L12 11.5"];
+    readonly tip: readonly ["M9 18L15 18", "M10 21L14 21", "M12 3A6 6 0 0 0 8.5 14C9 14.5 9.5 15 9.5 15.5L9.5 16L14.5 16L14.5 15.5C14.5 15 15 14.5 15.5 14A6 6 0 0 0 12 3Z"];
+    readonly help: readonly ["M12 3A9 9 0 1 0 12 21A9 9 0 0 0 12 3Z", "M9.5 9.5A2.5 2.5 0 1 1 13 12C12.5 12 12 13 12 13.5L12 14", "M12 16.5L12 16.5"];
+    readonly shortcut: readonly ["M6 8.5A2.5 2.5 0 1 1 8.5 11L6 11Z", "M8.5 13L6 13L6 15.5A2.5 2.5 0 1 0 8.5 13Z", "M15.5 11L18 11L18 8.5A2.5 2.5 0 1 0 15.5 11Z", "M15.5 13A2.5 2.5 0 1 0 18 15.5L18 13Z"];
+    readonly newFeature: readonly ["M12 3.5L13.5 9L19 11L13.5 13L12 18L10.5 12.5L5 11L10.5 9Z", "M18.5 15L18.5 18.5", "M20.5 17L17 17"];
+    readonly home: readonly ["M3 10.5L12 3L21 10.5", "M5.5 9L5.5 20A1 1 0 0 0 6.5 21L10 21L10 15L14 15L14 21L17.5 21A1 1 0 0 0 18.5 20L18.5 9"];
+    readonly search: readonly ["M11 4.5A6.5 6.5 0 1 0 11 17.5A6.5 6.5 0 0 0 11 4.5Z", "M20 20L15.5 15.5"];
+    readonly install: readonly ["M12 3L12 14", "M7.5 10L12 14L16.5 10", "M4 17L4 19A2 2 0 0 0 6 21L18 21A2 2 0 0 0 20 19L20 17"];
+    readonly book: readonly ["M4 4.5L9 4.5A3 3 0 0 1 12 7.5L12 20A2.5 2.5 0 0 0 9.5 17.5L4 17.5Z", "M20 4.5L15 4.5A3 3 0 0 0 12 7.5L12 20A2.5 2.5 0 0 1 14.5 17.5L20 17.5Z"];
+    readonly code: readonly ["M8.5 7L3.5 12L8.5 17", "M15.5 7L20.5 12L15.5 17", "M13.5 4L10.5 20"];
+    readonly palette: readonly ["M12 3A9 9 0 0 0 12 21A2 2 0 0 0 13.5 18A2 2 0 0 1 15 15L18 15A3 3 0 0 0 21 12A9 9 0 0 0 12 3.5Z", "M7.5 12.5L7.5 12.5", "M9.5 8L9.5 8", "M14 7L14 7", "M17 10L17 10"];
+    readonly shield: readonly ["M12 3L19.5 6L19.5 12C19.5 16.5 16.5 20 12 21.5C7.5 20 4.5 16.5 4.5 12L4.5 6Z", "M9 12L11 14L15.5 10"];
+    readonly accessibility: readonly ["M12 3A1.5 1.5 0 1 0 12 6A1.5 1.5 0 0 0 12 3Z", "M4.5 8.5L12 10L19.5 8.5", "M12 10L12 14.5", "M9 20.5L12 14.5L15 20.5"];
+    readonly sun: readonly ["M12 8A4 4 0 1 0 12 16A4 4 0 0 0 12 8Z", "M12 2.5L12 4.5", "M12 19.5L12 21.5", "M4.5 4.5L6 6", "M18 18L19.5 19.5", "M2.5 12L4.5 12", "M19.5 12L21.5 12", "M4.5 19.5L6 18", "M18 6L19.5 4.5"];
+    readonly moon: readonly ["M20 14A8 8 0 0 1 10 4A8.5 8.5 0 1 0 20 14Z"];
+    readonly monitor: readonly ["M4 5L20 5A1 1 0 0 1 21 6L21 15A1 1 0 0 1 20 16L4 16A1 1 0 0 1 3 15L3 6A1 1 0 0 1 4 5Z", "M9 20L15 20", "M12 16L12 20"];
+    readonly plus: readonly ["M12 5L12 19", "M5 12L19 12"];
+    readonly minus: readonly ["M5 12L19 12"];
+    readonly copy: readonly ["M9 9L18 9A1 1 0 0 1 19 10L19 19A1 1 0 0 1 18 20L9 20A1 1 0 0 1 8 19L8 10A1 1 0 0 1 9 9Z", "M5 15L4 15A1 1 0 0 1 3 14L3 5A1 1 0 0 1 4 4L13 4A1 1 0 0 1 14 5L14 6"];
+    readonly settings: readonly ["M12 8.5A3.5 3.5 0 1 0 12 15.5A3.5 3.5 0 0 0 12 8.5Z", "M19.5 15A1.5 1.5 0 0 0 20 17L20 17A2 2 0 1 1 17 20L17 20A1.5 1.5 0 0 0 14.5 21L14.5 21.5A2 2 0 1 1 10.5 21.5L10.5 21.5A1.5 1.5 0 0 0 7.5 20.5L7.5 20.5A2 2 0 1 1 4.5 17.5L4.5 17.5A1.5 1.5 0 0 0 3.5 15L3 15A2 2 0 1 1 3 11L3 11A1.5 1.5 0 0 0 4 8L4 8A2 2 0 1 1 7 5L7 5A1.5 1.5 0 0 0 10 4.5L10 4A2 2 0 1 1 14 4L14 4A1.5 1.5 0 0 0 17 5L17 5A2 2 0 1 1 20 8L20 8A1.5 1.5 0 0 0 21 11L21.5 11A2 2 0 1 1 21.5 15L21.5 15A1.5 1.5 0 0 0 20 16Z"];
 };
 export type IconName = keyof typeof paths;
 export declare const iconNames: IconName[];