morphicons 0.1.0

package/dist/react.js

@@ -0,0 +1,114 @@
+import { a as resampleIcon, d as interpPolar, i as serialize, l as allocOutputs, s as buildPlan } from "./spring-Dbj7NCw2.js";
+import { canonicalD, createMorph } from "./dom.js";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/index.tsx
+const useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+/** Frozen shape of the from→to pair at t, using the pure core (SSR-safe).
+*  At exact endpoints returns the canonical `d` (real curves, not polyline). */
+function frozenD(from, to, t) {
+	if (t <= 0) return canonicalD(from);
+	if (t >= 1) return canonicalD(to);
+	const plan = buildPlan(resampleIcon(from), resampleIcon(to));
+	const out = allocOutputs(plan);
+	interpPolar(plan, t, out);
+	return serialize(out, plan.items.map((it) => it.closed));
+}
+const MorphIcon = forwardRef(function MorphIcon(props, ref) {
+	const { icon, from, to, progress, spring, size = 24, color = "currentColor", strokeWidth = 2, absoluteStrokeWidth, label, ...rest } = props;
+	const controlled = from !== void 0 && to !== void 0;
+	const initialIcon = icon ?? from ?? to;
+	const [initialD] = useState(() => {
+		if (controlled) return frozenD(from, to, progress ?? 0);
+		return initialIcon !== void 0 ? canonicalD(initialIcon) : "";
+	});
+	const pathRef = useRef(null);
+	const morphRef = useRef(null);
+	const springRef = useRef(spring);
+	springRef.current = spring;
+	const firstIcon = useRef(true);
+	const based = useRef(false);
+	const pair = useRef(null);
+	useIsoLayoutEffect(() => {
+		const el = pathRef.current;
+		if (!el || initialIcon === void 0) return;
+		const m = createMorph(el, controlled ? from : initialIcon);
+		morphRef.current = m;
+		if (controlled) {
+			pair.current = [from, to];
+			const t = progress ?? 0;
+			if (t <= 0) m.set(from);
+			else if (t >= 1) m.set(to);
+			else {
+				m.seek(to, t);
+				based.current = true;
+			}
+		}
+		return () => {
+			m.destroy();
+			morphRef.current = null;
+			based.current = false;
+			pair.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		if (icon === void 0) return;
+		if (firstIcon.current) {
+			firstIcon.current = false;
+			return;
+		}
+		morphRef.current?.morphTo(icon, springRef.current);
+	}, [icon]);
+	useEffect(() => {
+		const m = morphRef.current;
+		if (!m || !controlled) return;
+		const t = progress ?? 0;
+		if (!pair.current || pair.current[0] !== from || pair.current[1] !== to) {
+			pair.current = [from, to];
+			based.current = false;
+		}
+		if (t <= 0) {
+			m.set(from);
+			based.current = false;
+		} else if (t >= 1) {
+			m.set(to);
+			based.current = false;
+		} else {
+			if (!based.current) {
+				m.set(from);
+				based.current = true;
+			}
+			m.seek(to, t);
+		}
+	}, [
+		controlled,
+		from,
+		to,
+		progress
+	]);
+	useImperativeHandle(ref, () => ({
+		morphTo: (i, s) => morphRef.current?.morphTo(i, s ?? springRef.current),
+		set: (i) => morphRef.current?.set(i)
+	}), []);
+	const sw = absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth;
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: color,
+		strokeWidth: sw,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		role: label ? "img" : void 0,
+		"aria-hidden": label ? void 0 : true,
+		...rest,
+		children: [label ? /* @__PURE__ */ jsx("title", { children: label }) : null, /* @__PURE__ */ jsx("path", {
+			ref: pathRef,
+			d: initialD
+		})]
+	});
+});
+//#endregion
+export { MorphIcon };