@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/gauge/gauge.js

@@ -0,0 +1,219 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { MORPH, REVEAL, SMOOTH, live, retarget } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/gauge/gauge.tsx
+/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */
+const RADIUS = 42;
+const START = -135;
+const SPAN = 270;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+function ringFor(sweep) {
+	const end = START + SPAN * clamp(sweep, 0, 1);
+	const at = (angle) => `${(50 + RADIUS * Math.sin(angle * Math.PI / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos(angle * Math.PI / 180)).toFixed(3)}`;
+	return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;
+}
+const TRACK = ringFor(1);
+const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, detail, tone = "primary", thresholds, className, ...props }, ref) {
+	const safeMax = max > min ? max : min + 1;
+	const percentage = clamp((value - min) / (safeMax - min), 0, 1);
+	const displayValue = Math.round(percentage * 100);
+	const bands = [...thresholds ?? []].sort((a, b) => a.from - b.from);
+	const bandAt = (at) => bands.filter((band) => at >= band.from - 1e-6).pop();
+	const band = bandAt(value);
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const ring = useRef(null);
+	const digits = useRef(null);
+	const sizer = useRef(null);
+	const sweep = useRef(live(0));
+	const count = useRef(live(0));
+	const [seen, setSeen] = useState(false);
+	const [filled, setFilled] = useState(false);
+	const [shownBand, setShownBand] = useState(band);
+	const [moved, setMoved] = useState({
+		value: displayValue,
+		direction: 1
+	});
+	if (moved.value !== displayValue) setMoved({
+		value: displayValue,
+		direction: displayValue < moved.value ? -1 : 1
+	});
+	const latest = useRef({
+		bandAt,
+		min,
+		span: safeMax - min,
+		filled
+	});
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			bandAt,
+			min,
+			span: safeMax - min,
+			filled
+		};
+	});
+	const shownRef = useRef(shownBand);
+	useIsomorphicLayoutEffect(() => {
+		shownRef.current = shownBand;
+	});
+	/** One writer: the ring, its fade-in over the first sliver, and the count. */
+	const paint = useCallback(() => {
+		const to = clamp(sweep.current.value, 0, 1);
+		ring.current?.setAttribute("d", ringFor(to));
+		if (ring.current) ring.current.style.opacity = String(clamp(to / .02, 0, 1));
+		const shown = clamp(count.current.value, 0, 100);
+		if (digits.current) digits.current.textContent = String(Math.round(shown));
+		const { bandAt: pick, min: lo, span, filled: done } = latest.current;
+		if (done) {
+			const next = pick(lo + shown / 100 * span);
+			const current = shownRef.current;
+			if (next?.from !== current?.from || next?.label !== current?.label) {
+				shownRef.current = next;
+				setShownBand(next);
+			}
+		}
+	}, []);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setSeen(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setSeen(true);
+		}, { threshold: .5 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const bandRef = useRef(band);
+	useIsomorphicLayoutEffect(() => {
+		bandRef.current = band;
+	});
+	useEffect(() => {
+		if (!seen) return;
+		const first = !latest.current.filled;
+		retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);
+		retarget(count.current, percentage * 100, first ? REVEAL : SMOOTH, paint, 0, first ? () => {
+			latest.current.filled = true;
+			shownRef.current = bandRef.current;
+			setShownBand(bandRef.current);
+			setFilled(true);
+		} : void 0);
+	}, [
+		percentage,
+		seen,
+		paint
+	]);
+	useEffect(() => {
+		const sweeping = sweep.current;
+		const number = count.current;
+		return () => {
+			sweeping.stop();
+			number.stop();
+		};
+	}, []);
+	useIsomorphicLayoutEffect(paint, [paint]);
+	useEffect(() => {
+		const node = sizer.current;
+		const box = digits.current;
+		if (!node || !box || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const shown = filled ? shownBand : band;
+	const activeTone = (filled ? shownBand : band)?.tone ?? tone;
+	const clampedValue = clamp(value, min, safeMax);
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		...props,
+		"data-slot": "gauge",
+		"data-tone": activeTone,
+		className: cn("gauge", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "gauge-visual",
+			role: "meter",
+			"aria-label": label,
+			"aria-valuemin": min,
+			"aria-valuemax": safeMax,
+			"aria-valuenow": clampedValue,
+			"aria-valuetext": `${displayValue}%${band ? `, ${band.label}` : ""}`,
+			className: "gauge-visual",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 100 90",
+				"aria-hidden": "true",
+				focusable: "false",
+				className: "block size-full overflow-visible",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: TRACK,
+					className: "gauge-track"
+				}), /* @__PURE__ */ jsx("path", {
+					ref: ring,
+					className: "gauge-fill",
+					style: { opacity: 0 }
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "gauge-readout",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "gauge-number",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							ref: digits,
+							className: "gauge-digits"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "gauge-unit",
+							children: "%"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							ref: sizer,
+							className: "gauge-sizer",
+							children: displayValue
+						})
+					]
+				}), thresholds ? /* @__PURE__ */ jsx("span", {
+					className: "gauge-status",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: filled ? shown?.label ?? "" : "",
+						dir: moved.direction,
+						className: "block",
+						children: shown?.label
+					})
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsxs("figcaption", {
+			className: "grid min-w-0 gap-0.5",
+			children: [/* @__PURE__ */ jsx("strong", {
+				className: "text-sm font-medium text-foreground",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: label,
+					className: "block",
+					children: label
+				})
+			}), detail ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs tabular-nums text-text-secondary",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: detail,
+					dir: moved.direction,
+					className: "block",
+					children: detail
+				})
+			}) : null]
+		})]
+	});
+});
+//#endregion
+export { Gauge };
+
+//# sourceMappingURL=gauge.js.map

package/dist/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { live, MORPH, retarget, REVEAL, SMOOTH } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Gauge: one value against a range, as a ring open at the bottom with the\n * number at its centre. Use it for a score or a fill level; use Progress for a\n * task that finishes.\n *\n * The ring fills the first time it is seen, slowly and without overshoot, like\n * a ring closing. After that it springs to each new value with a little life\n * while the count follows without overshooting. A band that starts at\n * `from` sets the colour and names the state (\"Healthy\", \"At risk\"): the\n * highest band the value reaches wins, and it changes exactly as the count\n * crosses the threshold, so state never rests on colour alone. The label,\n * status and detail rise in when they change, from the side the value moved\n * toward.\n *\n * Plain SVG and CSS. One small spring tween writes the ring and the count\n * straight to the DOM. The ring is a `meter` for assistive technology.\n */\nexport type GaugeTone = \"primary\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface GaugeThreshold {\n  /** The band starts at this value (in the same unit as `value`). */\n  from: number;\n  tone: GaugeTone;\n  /** Names the state. Shown under the number and announced with the value. */\n  label: string;\n}\n\nexport interface GaugeProps extends Omit<ComponentPropsWithoutRef<\"figure\">, \"children\"> {\n  value: number;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** What is measured. Names the meter. */\n  label: string;\n  /** A line under the label, such as \"Up 4 from last week\". */\n  detail?: string;\n  /** The colour when no band applies. @default \"primary\" */\n  tone?: GaugeTone;\n  /** Bands that set the tone and name the state. */\n  thresholds?: GaugeThreshold[];\n}\n\n/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */\nconst RADIUS = 42;\nconst START = -135;\nconst SPAN = 270;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\nfunction ringFor(sweep: number) {\n  const end = START + SPAN * clamp(sweep, 0, 1);\n  const at = (angle: number) =>\n    `${(50 + RADIUS * Math.sin((angle * Math.PI) / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos((angle * Math.PI) / 180)).toFixed(3)}`;\n  return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;\n}\nconst TRACK = ringFor(1);\n\nexport const Gauge = forwardRef<HTMLElement, GaugeProps>(function Gauge(\n  { value, min = 0, max = 100, label, detail, tone = \"primary\", thresholds, className, ...props },\n  ref,\n) {\n  const safeMax = max > min ? max : min + 1;\n  const percentage = clamp((value - min) / (safeMax - min), 0, 1);\n  const displayValue = Math.round(percentage * 100);\n  const bands = [...(thresholds ?? [])].sort((a, b) => a.from - b.from);\n  const bandAt = (at: number) => bands.filter((band) => at >= band.from - 1e-6).pop();\n  const band = bandAt(value);\n\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const ring = useRef<SVGPathElement>(null);\n  const digits = useRef<HTMLSpanElement>(null);\n  const sizer = useRef<HTMLSpanElement>(null);\n  const sweep = useRef(live(0));\n  const count = useRef(live(0));\n\n  const [seen, setSeen] = useState(false);\n  const [filled, setFilled] = useState(false);\n  // The band on screen: after the first fill it follows the number as it counts.\n  const [shownBand, setShownBand] = useState(band);\n  const [moved, setMoved] = useState({ value: displayValue, direction: 1 });\n  if (moved.value !== displayValue) {\n    setMoved({ value: displayValue, direction: displayValue < moved.value ? -1 : 1 });\n  }\n\n  const latest = useRef({ bandAt, min, span: safeMax - min, filled });\n  useIsomorphicLayoutEffect(() => {\n    latest.current = { bandAt, min, span: safeMax - min, filled };\n  });\n  const shownRef = useRef(shownBand);\n  useIsomorphicLayoutEffect(() => {\n    shownRef.current = shownBand;\n  });\n\n  /** One writer: the ring, its fade-in over the first sliver, and the count. */\n  const paint = useCallback(() => {\n    const to = clamp(sweep.current.value, 0, 1);\n    ring.current?.setAttribute(\"d\", ringFor(to));\n    if (ring.current) ring.current.style.opacity = String(clamp(to / 0.02, 0, 1));\n    const shown = clamp(count.current.value, 0, 100);\n    if (digits.current) digits.current.textContent = String(Math.round(shown));\n    // After the first fill the state follows the number on screen, so the colour and label change as the count crosses a threshold.\n    const { bandAt: pick, min: lo, span, filled: done } = latest.current;\n    if (done) {\n      const next = pick(lo + (shown / 100) * span);\n      const current = shownRef.current;\n      if (next?.from !== current?.from || next?.label !== current?.label) {\n        shownRef.current = next;\n        setShownBand(next);\n      }\n    }\n  }, []);\n\n  // The ring fills once half of it is in view.\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setSeen(true);\n      },\n      { threshold: 0.5 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // The first fill is slower and never overshoots; later values spring to place, the count a beat calmer.\n  const bandRef = useRef(band);\n  useIsomorphicLayoutEffect(() => {\n    bandRef.current = band;\n  });\n  useEffect(() => {\n    if (!seen) return;\n    const first = !latest.current.filled;\n    retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);\n    retarget(\n      count.current,\n      percentage * 100,\n      first ? REVEAL : SMOOTH,\n      paint,\n      0,\n      first\n        ? () => {\n            latest.current.filled = true;\n            shownRef.current = bandRef.current;\n            setShownBand(bandRef.current);\n            setFilled(true);\n          }\n        : undefined,\n    );\n  }, [percentage, seen, paint]);\n  useEffect(() => {\n    const sweeping = sweep.current;\n    const number = count.current;\n    return () => {\n      sweeping.stop();\n      number.stop();\n    };\n  }, []);\n  useIsomorphicLayoutEffect(paint, [paint]);\n\n  // The digits sit right aligned in a box sized to the target number, so the ones column never jumps while counting and the group recentres when the number gains or loses a digit.\n  useEffect(() => {\n    const node = sizer.current;\n    const box = digits.current;\n    if (!node || !box || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const shown = filled ? shownBand : band;\n  const activeTone = (filled ? shownBand : band)?.tone ?? tone;\n  const clampedValue = clamp(value, min, safeMax);\n\n  return (\n    <figure\n      ref={refs}\n      {...props}\n      data-slot=\"gauge\"\n      data-tone={activeTone}\n      className={cn(\"gauge\", className)}\n    >\n      <div\n        data-slot=\"gauge-visual\"\n        role=\"meter\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={safeMax}\n        aria-valuenow={clampedValue}\n        aria-valuetext={`${displayValue}%${band ? `, ${band.label}` : \"\"}`}\n        className=\"gauge-visual\"\n      >\n        <svg\n          viewBox=\"0 0 100 90\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          className=\"block size-full overflow-visible\"\n        >\n          <path d={TRACK} className=\"gauge-track\" />\n          <path ref={ring} className=\"gauge-fill\" style={{ opacity: 0 }} />\n        </svg>\n        <div aria-hidden=\"true\" className=\"gauge-readout\">\n          <span className=\"gauge-number\">\n            <span ref={digits} className=\"gauge-digits\" />\n            <span className=\"gauge-unit\">%</span>\n            <span ref={sizer} className=\"gauge-sizer\">\n              {displayValue}\n            </span>\n          </span>\n          {thresholds ? (\n            <span className=\"gauge-status\">\n              <SwapText\n                swapKey={filled ? (shown?.label ?? \"\") : \"\"}\n                dir={moved.direction}\n                className=\"block\"\n              >\n                {shown?.label}\n              </SwapText>\n            </span>\n          ) : null}\n        </div>\n      </div>\n      <figcaption className=\"grid min-w-0 gap-0.5\">\n        <strong className=\"text-sm font-medium text-foreground\">\n          <SwapText swapKey={label} className=\"block\">\n            {label}\n          </SwapText>\n        </strong>\n        {detail ? (\n          <span className=\"text-xs tabular-nums text-text-secondary\">\n            <SwapText swapKey={detail} dir={moved.direction} className=\"block\">\n              {detail}\n            </SwapText>\n          </span>\n        ) : null}\n      </figcaption>\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/gauge/index.d.ts

@@ -0,0 +1,2 @@
+import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge.js";
+export { Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone };

package/dist/gauge/index.js

@@ -0,0 +1,2 @@
+import { Gauge } from "./gauge.js";
+export { Gauge };

package/dist/icon-morph/icon-morph.d.ts

@@ -0,0 +1,55 @@
+import { SVGProps } from "react";
+//#region src/icon-morph/icon-morph.d.ts
+export type IconMorphName = "menu" | "play" | "plus" | "copy" | "theme" | "chevron" | "bell" | "heart";
+export interface IconMorphIconProps extends Omit<SVGProps<SVGSVGElement>, "ref" | "children"> {
+  /**
+   * The second state of the icon. menu: close, play: pause, plus: check, copy: check,
+   * theme: moon, chevron: turned, bell: notifications on, heart: liked.
+   */
+  state?: boolean;
+  /** Rendered size in px. Defaults to 24. */
+  size?: number;
+  /** Stroke width in the 24 unit grid. Defaults to 1.75. */
+  strokeWidth?: number;
+}
+/**
+ * A family of icons that morph between two states instead of swapping. Lines
+ * rotate and slide into place, shapes interpolate their outlines, and a few
+ * carry a small moment of their own: the bell rings when it turns on and the
+ * heart bursts when liked. Every morph rides an interruptible spring, so
+ * toggling quickly reverses from wherever the icon is. The icons are
+ * decorative; put them inside a button that carries the accessible name and
+ * `aria-pressed`.
+ */
+export interface IconMorphProps extends IconMorphIconProps {
+  name: IconMorphName;
+}
+/** Menu to close: the outer lines slide to the middle as they rotate into an X, and the middle line folds away. */
+export declare function MenuIcon({ state, ...props }: IconMorphIconProps): import("react").JSX.Element;
+/** Play to pause: the triangle splits into two halves that straighten into bars. */
+export declare function PlayPauseIcon({ state, ...props }: IconMorphIconProps): import("react").JSX.Element;
+/** Plus to check: each bar swings its ends to become one leg of the check. */
+export declare function PlusCheckIcon({ state, ...props }: IconMorphIconProps): import("react").JSX.Element;
+/** Copy to check: the back sheet tucks under the front one, the front one settles away, and the check draws in. */
+export declare function CopyCheckIcon({ state, ...props }: IconMorphIconProps): import("react").JSX.Element;
+/**
+ * Sun to moon: the disc grows while a shadow slides across it from the corner, carving the crescent, and the rays turn and fold in.
+ * The crescent is drawn as an outline: the disc's edge outside the shadow, and the shadow's edge inside the disc.
+ */
+export declare function SunMoonIcon({ state, ...props }: IconMorphIconProps): import("react").JSX.Element;
+export interface ChevronIconProps extends IconMorphIconProps {
+  /** Degrees the chevron turns when `state` is true. 180 flips down to up; 90 turns right to down. */
+  turn?: number;
+  /** Where the chevron points at rest. */
+  pointing?: "down" | "right";
+}
+/** A chevron that turns on a spring, for disclosure and sort controls. */
+export declare function ChevronIcon({ state, turn, pointing, style, ...props }: ChevronIconProps): import("react").JSX.Element;
+/** Notifications on and off: turning on rings the bell from its top, with the clapper lagging behind; turning off strikes it through. */
+export declare function BellIcon({ state, ...props }: IconMorphIconProps): import("react").JSX.Element;
+/** Like: the heart fills with a pop, and a ring and a few sparks burst out once. Unliking simply empties it. */
+export declare function HeartIcon({ state, className, ...props }: IconMorphIconProps): import("react").JSX.Element;
+/** One entry point for every morphing icon: pick it by `name` and drive it with `state`. */
+export declare function IconMorph({ name, ...props }: IconMorphProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=icon-morph.d.ts.map

package/dist/icon-morph/icon-morph.js

@@ -0,0 +1,331 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { lerpPath, useSpringProgress } from "../lib/spring-progress.js";
+import { useSvgId } from "../lib/svg-id.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/icon-morph/icon-morph.tsx
+/** Counts how many times `state` turned true after mount, so one-shot moments (a ring, a burst) replay on each turn on. */
+function useTurnOns(state) {
+	const [previous, setPrevious] = useState(state);
+	const [count, setCount] = useState(0);
+	if (previous !== state) {
+		setPrevious(state);
+		if (state) setCount((value) => value + 1);
+	}
+	return count;
+}
+function Frame({ size = 24, strokeWidth = 1.75, state, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: size,
+		height: size,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		"data-on": state ? "" : void 0,
+		className: cn("block flex-none overflow-visible", className),
+		...rest,
+		children
+	});
+}
+/** Menu to close: the outer lines slide to the middle as they rotate into an X, and the middle line folds away. */
+function MenuIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 6h16",
+				className: "icon-morph-menu-top"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 12h16",
+				className: "icon-morph-menu-middle"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 18h16",
+				className: "icon-morph-menu-bottom"
+			})
+		]
+	});
+}
+const PLAY = ["M7 4.5 L12 7.42 L12 16.58 L7 19.5 Z", "M12 7.42 L19.5 11.8 L19.5 12.2 L12 16.58 Z"];
+const PAUSE = ["M6.5 5 L10 5 L10 19 L6.5 19 Z", "M14 5 L17.5 5 L17.5 19 L14 19 Z"];
+/**
+* A pair of paths that morph between two outlines on the morph spring. The path
+* is driven from script (see useSpringProgress): CSS cannot interpolate `d` in
+* every browser.
+*/
+function MorphPaths({ from, to, state, props }) {
+	const refs = useRef([]);
+	const [initial] = useState(() => from.map((d, i) => lerpPath(d, to[i], state ? 1 : 0)));
+	useSpringProgress(state ? 1 : 0, (progress) => {
+		refs.current.forEach((path, i) => path?.setAttribute("d", lerpPath(from[i], to[i], progress)));
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: from.map((_, i) => /* @__PURE__ */ jsx("path", {
+		ref: (node) => {
+			refs.current[i] = node;
+		},
+		d: initial[i],
+		...props
+	}, i)) });
+}
+/** Play to pause: the triangle splits into two halves that straighten into bars. */
+function PlayPauseIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsx(Frame, {
+		state,
+		...props,
+		children: /* @__PURE__ */ jsx(MorphPaths, {
+			from: PLAY,
+			to: PAUSE,
+			state,
+			props: {
+				fill: "currentColor",
+				strokeWidth: 1.5
+			}
+		})
+	});
+}
+/** Plus to check: each bar swings its ends to become one leg of the check. */
+function PlusCheckIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsx(Frame, {
+		state,
+		...props,
+		children: /* @__PURE__ */ jsx(MorphPaths, {
+			from: ["M12 5 L12 19", "M5 12 L19 12"],
+			to: ["M20 6.5 L9.5 17", "M4.5 12 L9.5 17"],
+			state
+		})
+	});
+}
+/** Copy to check: the back sheet tucks under the front one, the front one settles away, and the check draws in. */
+function CopyCheckIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+				className: "icon-morph-copy-back"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "8",
+				y: "8",
+				width: "14",
+				height: "14",
+				rx: "2",
+				className: "icon-morph-copy-front"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M5 12.5 L9.5 17 L19 7.5",
+				pathLength: 1,
+				className: "icon-morph-copy-check"
+			})
+		]
+	});
+}
+const RAYS = Array.from({ length: 8 }, (_, index) => {
+	const angle = index * Math.PI / 4;
+	const c = Math.cos(angle);
+	const s = Math.sin(angle);
+	const r = (value) => Math.round(value * 100) / 100;
+	return "M" + r(12 + c * 7.5) + " " + r(12 + s * 7.5) + " L" + r(12 + c * 10) + " " + r(12 + s * 10);
+});
+/**
+* Sun to moon: the disc grows while a shadow slides across it from the corner, carving the crescent, and the rays turn and fold in.
+* The crescent is drawn as an outline: the disc's edge outside the shadow, and the shadow's edge inside the disc.
+*/
+function SunMoonIcon({ state = false, ...props }) {
+	const id = useSvgId();
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("mask", {
+				id: id + "-bite",
+				maskUnits: "userSpaceOnUse",
+				x: "-8",
+				y: "-8",
+				width: "40",
+				height: "40",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: "-8",
+					y: "-8",
+					width: "40",
+					height: "40",
+					fill: "white",
+					stroke: "none"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: 30,
+					cy: -6,
+					r: 6.5,
+					fill: "black",
+					stroke: "none",
+					className: "icon-morph-sun-shadow"
+				})]
+			}), /* @__PURE__ */ jsx("clipPath", {
+				id: id + "-disc",
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: 12,
+					cy: 12,
+					r: 4.5,
+					className: "icon-morph-sun-disc"
+				})
+			})] }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: 4.5,
+				mask: "url(#" + id + "-bite)",
+				className: "icon-morph-sun-disc"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 30,
+				cy: -6,
+				r: 6.5,
+				clipPath: "url(#" + id + "-disc)",
+				className: "icon-morph-sun-shadow"
+			}),
+			/* @__PURE__ */ jsx("g", {
+				className: "icon-morph-sun-rays",
+				children: RAYS.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+			})
+		]
+	});
+}
+/** A chevron that turns on a spring, for disclosure and sort controls. */
+function ChevronIcon({ state = false, turn = 180, pointing = "down", style, ...props }) {
+	return /* @__PURE__ */ jsx(Frame, {
+		state,
+		style: {
+			"--turn": turn + "deg",
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: pointing === "down" ? "M6 9 L12 15 L18 9" : "M9 6 L15 12 L9 18",
+			className: "icon-morph-chevron"
+		})
+	});
+}
+const BELL = "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9";
+const CLAPPER = "M10.3 21a1.94 1.94 0 0 0 3.4 0";
+/** Notifications on and off: turning on rings the bell from its top, with the clapper lagging behind; turning off strikes it through. */
+function BellIcon({ state = false, ...props }) {
+	const id = useSvgId();
+	const rings = useTurnOns(state);
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+				id: id + "-cut",
+				maskUnits: "userSpaceOnUse",
+				x: "-4",
+				y: "-4",
+				width: "32",
+				height: "32",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: "-4",
+					y: "-4",
+					width: "32",
+					height: "32",
+					fill: "white",
+					stroke: "none"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M3 3 L21 21",
+					stroke: "black",
+					strokeWidth: 5,
+					pathLength: 1,
+					className: "icon-morph-slash"
+				})]
+			}) }),
+			/* @__PURE__ */ jsxs("g", {
+				mask: "url(#" + id + "-cut)",
+				children: [/* @__PURE__ */ jsx("g", {
+					className: cn("[transform-box:fill-box] [transform-origin:50%_0%]", rings > 0 && "motion-safe:animate-bell-ring"),
+					children: /* @__PURE__ */ jsx("path", { d: BELL })
+				}, "bell-" + rings), /* @__PURE__ */ jsx("path", {
+					d: CLAPPER,
+					className: cn(rings > 0 && "motion-safe:animate-clapper-ring")
+				}, "clapper-" + rings)]
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M3 3 L21 21",
+				pathLength: 1,
+				className: "icon-morph-slash"
+			})
+		]
+	});
+}
+const HEART = "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z";
+const SPARKS = Array.from({ length: 7 }, (_, index) => {
+	const angle = -Math.PI / 2 + index * 2 * Math.PI / 7;
+	return {
+		x: Math.cos(angle),
+		y: Math.sin(angle),
+		r: index % 2 ? 1 : 1.4
+	};
+});
+/** Like: the heart fills with a pop, and a ring and a few sparks burst out once. Unliking simply empties it. */
+function HeartIcon({ state = false, className, ...props }) {
+	const likes = useTurnOns(state);
+	const burst = likes > 0 && state;
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		className: cn("icon-morph-heart", className),
+		...props,
+		children: [burst ? /* @__PURE__ */ jsxs("g", {
+			stroke: "none",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: 13,
+				fill: "none",
+				stroke: "currentColor",
+				className: "motion-safe:animate-heart-ring"
+			}), SPARKS.map((spark, index) => /* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: spark.r,
+				fill: "currentColor",
+				style: {
+					"--sx": spark.x,
+					"--sy": spark.y
+				},
+				className: "icon-morph-part motion-safe:animate-heart-spark"
+			}, index))]
+		}, "burst-" + likes) : null, /* @__PURE__ */ jsx("g", {
+			className: cn("icon-morph-part", burst && "motion-safe:animate-heart-pop"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: HEART,
+				fill: "currentColor",
+				className: "icon-morph-heart-fill"
+			})
+		}, "heart-" + likes)]
+	});
+}
+const ICONS = {
+	menu: MenuIcon,
+	play: PlayPauseIcon,
+	plus: PlusCheckIcon,
+	copy: CopyCheckIcon,
+	theme: SunMoonIcon,
+	chevron: ChevronIcon,
+	bell: BellIcon,
+	heart: HeartIcon
+};
+/** One entry point for every morphing icon: pick it by `name` and drive it with `state`. */
+function IconMorph({ name, ...props }) {
+	const Icon = ICONS[name];
+	return /* @__PURE__ */ jsx(Icon, { ...props });
+}
+//#endregion
+export { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon };
+
+//# sourceMappingURL=icon-morph.js.map