weasel-icons 0.1.0 → 0.2.0

package/dist/icons/swap/swap-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type SwapState } from "./swap-rig.js";
+export { swapStates, type SwapState } from "./swap-rig.js";
+export type SwapIconProps = StatefulIconProps<SwapState>;
+export declare const SwapIcon: import("react").NamedExoticComponent<SwapIconProps>;

package/dist/icons/swap/swap-icon.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock, useActionProgress } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { SWAP_LEFT, SWAP_RIGHT, sampleSwap } from "./swap-rig.js";
+export { swapStates } from "./swap-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const SwapIcon = memo(function SwapIcon({ state = 'idle', size = 24, color = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null);
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), swapping = usePoseWeight(state === 'swapping', pace, reduced), swapped = usePoseWeight(state === 'swapped', pace, reduced), error = usePoseWeight(state === 'error', pace, reduced);
+    const performs = alive && !reduced && state !== 'idle', life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    const first = useRef(state !== 'swapping');
+    const canRestart = useCallback(() => {
+        const invisible = first.current || swapping.get() < 0.001;
+        first.current = false;
+        return invisible;
+    }, [swapping]);
+    const entry = useActionProgress(state === 'swapping', pace, reduced, 1.1, canRestart);
+    const errorEntry = useActionProgress(state === 'error', pace, reduced, 1.15);
+    const rig = useTransform(() => sampleSwap([idle.get(), swapping.get(), swapped.get(), error.get()], time.get(), life.get(), entry.get(), errorEntry.get()));
+    const body = useTransform(rig, (r) => r.body), left = useTransform(rig, (r) => r.left), right = useTransform(rig, (r) => r.right);
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: _jsxs(motion.g, { "data-layer": "swap-body", transform: body, style: ORIGIN, children: [_jsx(motion.path, { "data-layer": "swap-left", "data-part": "left-arrow", d: SWAP_LEFT, transform: left, style: ORIGIN }), _jsx(motion.path, { "data-layer": "swap-right", "data-part": "right-arrow", d: SWAP_RIGHT, transform: right, style: ORIGIN })] }) }));
+});

package/dist/icons/swap/swap-rig.d.ts

@@ -0,0 +1,10 @@
+export declare const swapStates: readonly ["idle", "swapping", "swapped", "error"];
+export type SwapState = (typeof swapStates)[number];
+/** Lucide arrow-left-right: complete arrows, with their heads attached. */
+export declare const SWAP_LEFT = "M8 3 4 7l4 4M4 7h16";
+export declare const SWAP_RIGHT = "m16 21 4-4-4-4M20 17H4";
+export declare function sampleSwap(weights: readonly number[], time?: number, alive?: number, entry?: number, errorEntry?: number): {
+    body: string;
+    left: string;
+    right: string;
+};

package/dist/icons/swap/swap-rig.js

@@ -0,0 +1,24 @@
+export const swapStates = ['idle', 'swapping', 'swapped', 'error'];
+/** Lucide arrow-left-right: complete arrows, with their heads attached. */
+export const SWAP_LEFT = 'M8 3 4 7l4 4M4 7h16';
+export const SWAP_RIGHT = 'm16 21 4-4-4-4M20 17H4';
+export function sampleSwap(weights, time = 0, alive = 0, entry = 1, errorEntry = 1) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const [, swapping, swapped, error] = weights.map(clamp), life = clamp(alive);
+    const t = time % 3.2;
+    const travel = Math.max(entry >= 1 ? 0 : behaviorBeat(clamp(entry) * 1.1, 0, 0.38, 0.1, 0.62), life * behaviorBeat(t, 0.12, 0.38, 0.1, 0.62), life * behaviorBeat(t, 1.72, 0.38, 0.1, 0.62));
+    // Attempt → jam → recoil → rest. Error feedback is not gated by living mode.
+    const rejection = (seconds) => 1.7 * behaviorBeat(seconds, 0.06, 0.2, 0.05, 0.25) -
+        0.9 * behaviorBeat(seconds, 0.5, 0.12, 0.02, 0.46);
+    const entryRefusal = errorEntry >= 1 ? 0 : rejection(clamp(errorEntry) * 1.15);
+    const refuse = error * ((1 - life) * entryRefusal + life * rejection(t));
+    const shift = -swapping * travel * 1.45 + error * 0.65 + refuse;
+    const spread = swapped * (0.5 + life * behaviorBeat(t, 0.2, 0.3, 0.1, 0.6) * 0.25);
+    const tilt = error * 8 + refuse * 5;
+    return {
+        body: `translate(12px, 12px) rotate(${180 * swapped}deg) scale(0.82) translate(-12px, -12px)`,
+        left: `translate(${shift}px, ${-spread}px) translate(12px, 7px) rotate(${tilt}deg) translate(-12px, -7px)`,
+        right: `translate(${-shift}px, ${spread}px) translate(12px, 17px) rotate(${-tilt}deg) translate(-12px, -17px)`,
+    };
+}
+import { behaviorBeat } from "../../shared/behavior-curves.js";

package/dist/icons/wave/wave-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type WaveState } from "./wave-rig.js";
+export { waveStates, type WaveState } from "./wave-rig.js";
+export type WaveIconProps = StatefulIconProps<WaveState>;
+export declare const WaveIcon: import("react").NamedExoticComponent<WaveIconProps>;

package/dist/icons/wave/wave-icon.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { sampleWave } from "./wave-rig.js";
+export { waveStates } from "./wave-rig.js";
+export const WaveIcon = memo(function WaveIcon({ state = 'idle', size = 24, color = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null);
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), flowing = usePoseWeight(state === 'flowing', pace, reduced), energetic = usePoseWeight(state === 'energetic', pace, reduced), flat = usePoseWeight(state === 'flat', pace, reduced);
+    const performs = alive && !reduced && (state === 'flowing' || state === 'energetic');
+    const life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    const rig = useTransform(() => sampleWave([idle.get(), flowing.get(), energetic.get(), flat.get()], time.get(), life.get()));
+    const path = useTransform(rig, (r) => r.path);
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: _jsx(motion.path, { "data-layer": "wave-line", d: path, stroke: color, strokeWidth: strokeWidth }) }));
+});

package/dist/icons/wave/wave-rig.d.ts

@@ -0,0 +1,8 @@
+export declare const waveStates: readonly ["idle", "flowing", "energetic", "flat"];
+export type WaveState = (typeof waveStates)[number];
+/** Hermite segments preserve exact slope correspondence as the wave travels.
+ * Life blends positions, not accumulated phase, so switching it off cannot rewind.
+ */
+export declare function sampleWave(weights: readonly number[], time?: number, alive?: number): {
+    path: string;
+};

package/dist/icons/wave/wave-rig.js

@@ -0,0 +1,39 @@
+export const waveStates = ['idle', 'flowing', 'energetic', 'flat'];
+/** Hermite segments preserve exact slope correspondence as the wave travels.
+ * Life blends positions, not accumulated phase, so switching it off cannot rewind.
+ */
+export function sampleWave(weights, time = 0, alive = 0) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const [idle, flowing, energetic] = weights.map(clamp), life = clamp(alive);
+    const k = (Math.PI * 4) / 18;
+    function point(x) {
+        const u = x - 3;
+        const flowPhase = k * u + 0.4, energyPhase = k * u;
+        const y = idle * 3.6 * Math.sin(k * u) +
+            flowing * 3.6 * ((1 - life) * Math.sin(flowPhase) + life * Math.sin(flowPhase - time * 2.1)) +
+            energetic *
+                (5 * ((1 - life) * Math.sin(energyPhase) + life * Math.sin(energyPhase - time * 3.6)) +
+                    0.35 *
+                        ((1 - life) * Math.sin(energyPhase * 2) +
+                            life * Math.sin(energyPhase * 2 - time * 7.2)));
+        const slope = idle * 3.6 * k * Math.cos(k * u) +
+            flowing *
+                3.6 *
+                k *
+                ((1 - life) * Math.cos(flowPhase) + life * Math.cos(flowPhase - time * 2.1)) +
+            energetic *
+                (5 * k * ((1 - life) * Math.cos(energyPhase) + life * Math.cos(energyPhase - time * 3.6)) +
+                    0.7 *
+                        k *
+                        ((1 - life) * Math.cos(energyPhase * 2) +
+                            life * Math.cos(energyPhase * 2 - time * 7.2)));
+        return { y: 12 - y, slope: -slope };
+    }
+    const step = 18 / 24;
+    let path = `M3 ${point(3).y}`;
+    for (let i = 0; i < 24; i++) {
+        const x = 3 + i * step, a = point(x), b = point(x + step);
+        path += `C${x + step / 3} ${a.y + (a.slope * step) / 3} ${x + (step * 2) / 3} ${b.y - (b.slope * step) / 3} ${x + step} ${b.y}`;
+    }
+    return { path };
+}

package/dist/index.d.ts

@@ -1,6 +1,15 @@
+export { RefreshIcon, refreshStates, type RefreshState, type RefreshIconProps, } from "./icons/refresh/refresh-icon.js";
+export { CopyIcon, copyStates, type CopyState, type CopyIconProps } from "./icons/copy/copy-icon.js";
+export { EyeIcon, eyeStates, type EyeState, type EyeIconProps } from "./icons/eye/eye-icon.js";
+export { LinkIcon, linkStates, type LinkState, type LinkIconProps } from "./icons/link/link-icon.js";
+export { CheckIcon, checkStates, type CheckState, type CheckIconProps, } from "./icons/check/check-icon.js";
+export { CloseIcon, closeStates, type CloseState, type CloseIconProps, } from "./icons/close/close-icon.js";
+export { SparkleIcon, sparkleStates, type SparkleState, type SparkleIconProps, } from "./icons/sparkle/sparkle-icon.js";
+export { SparklesIcon, sparklesStates, type SparklesState, type SparklesIconProps, } from "./icons/sparkles/sparkles-icon.js";
+export { StarIcon, starStates, type StarState, type StarIconProps } from "./icons/star/star-icon.js";
+export { WaveIcon, waveStates, type WaveState, type WaveIconProps } from "./icons/wave/wave-icon.js";
 export { DogIcon, dogStates, type DogState, type DogIconProps } from "./icons/dog/dog-icon.js";
 export { HeartIcon, heartStates, type HeartIconProps, type HeartState, } from "./icons/heart/heart-icon.js";
-export { LeafIcon, leafStates, type LeafState, type LeafIconProps } from "./icons/leaf/leaf-icon.js";
 export { MonkeyIcon, monkeyStates, type MonkeyState, type MonkeyIconProps, } from "./icons/monkey/monkey-icon.js";
 export { RocketIcon, rocketStates, type RocketState, type RocketIconProps, } from "./icons/rocket/rocket-icon.js";
 export { ShipIcon, shipStates, type ShipState, type ShipIconProps } from "./icons/ship/ship-icon.js";
@@ -8,4 +17,14 @@ export { SearchIcon, searchStates, type SearchState, type SearchIconProps, } fro
 export { BellIcon, bellStates, type BellState, type BellIconProps } from "./icons/bell/bell-icon.js";
 export { DownloadIcon, downloadStates, type DownloadState, type DownloadIconProps, } from "./icons/download/download-icon.js";
 export type { StatefulIconProps } from "./shared/icon-types.js";
-export type { DogColors, MonkeyColors, HeartColors, ShipColors, LeafColors, } from "./shared/icon-colors.js";
+export { ShieldIcon, shieldStates, type ShieldState, type ShieldIconProps, } from "./icons/shield/shield-icon.js";
+export { CursorIcon, cursorStates, type CursorState, type CursorIconProps, } from "./icons/cursor/cursor-icon.js";
+export { ClapperboardIcon, clapperboardStates, type ClapperboardState, type ClapperboardIconProps, } from "./icons/clapperboard/clapperboard-icon.js";
+export { PlugIcon, plugStates, type PlugState, type PlugIconProps } from "./icons/plug/plug-icon.js";
+export { BulbIcon, bulbStates, type BulbState, type BulbIconProps } from "./icons/bulb/bulb-icon.js";
+export { AlertIcon, alertStates, type AlertState, type AlertIconProps, } from "./icons/alert/alert-icon.js";
+export { BadgeCheckIcon, badgeCheckStates, type BadgeCheckState, type BadgeCheckIconProps, } from "./icons/badge-check/badge-check-icon.js";
+export { ReplaceIcon, replaceStates, type ReplaceState, type ReplaceIconProps, } from "./icons/replace/replace-icon.js";
+export { DeleteIcon, deleteStates, type DeleteState, type DeleteIconProps, } from "./icons/delete/delete-icon.js";
+export { SwapIcon, swapStates, type SwapState, type SwapIconProps } from "./icons/swap/swap-icon.js";
+export type { DogColors, MonkeyColors, HeartColors, ShipColors, AlertColors, } from "./shared/icon-colors.js";

package/dist/index.js

@@ -1,10 +1,29 @@
 'use client';
+export { RefreshIcon, refreshStates, } from "./icons/refresh/refresh-icon.js";
+export { CopyIcon, copyStates } from "./icons/copy/copy-icon.js";
+export { EyeIcon, eyeStates } from "./icons/eye/eye-icon.js";
+export { LinkIcon, linkStates } from "./icons/link/link-icon.js";
+export { CheckIcon, checkStates, } from "./icons/check/check-icon.js";
+export { CloseIcon, closeStates, } from "./icons/close/close-icon.js";
+export { SparkleIcon, sparkleStates, } from "./icons/sparkle/sparkle-icon.js";
+export { SparklesIcon, sparklesStates, } from "./icons/sparkles/sparkles-icon.js";
+export { StarIcon, starStates } from "./icons/star/star-icon.js";
+export { WaveIcon, waveStates } from "./icons/wave/wave-icon.js";
 export { DogIcon, dogStates } from "./icons/dog/dog-icon.js";
 export { HeartIcon, heartStates, } from "./icons/heart/heart-icon.js";
-export { LeafIcon, leafStates } from "./icons/leaf/leaf-icon.js";
 export { MonkeyIcon, monkeyStates, } from "./icons/monkey/monkey-icon.js";
 export { RocketIcon, rocketStates, } from "./icons/rocket/rocket-icon.js";
 export { ShipIcon, shipStates } from "./icons/ship/ship-icon.js";
 export { SearchIcon, searchStates, } from "./icons/search/search-icon.js";
 export { BellIcon, bellStates } from "./icons/bell/bell-icon.js";
 export { DownloadIcon, downloadStates, } from "./icons/download/download-icon.js";
+export { ShieldIcon, shieldStates, } from "./icons/shield/shield-icon.js";
+export { CursorIcon, cursorStates, } from "./icons/cursor/cursor-icon.js";
+export { ClapperboardIcon, clapperboardStates, } from "./icons/clapperboard/clapperboard-icon.js";
+export { PlugIcon, plugStates } from "./icons/plug/plug-icon.js";
+export { BulbIcon, bulbStates } from "./icons/bulb/bulb-icon.js";
+export { AlertIcon, alertStates, } from "./icons/alert/alert-icon.js";
+export { BadgeCheckIcon, badgeCheckStates, } from "./icons/badge-check/badge-check-icon.js";
+export { ReplaceIcon, replaceStates, } from "./icons/replace/replace-icon.js";
+export { DeleteIcon, deleteStates, } from "./icons/delete/delete-icon.js";
+export { SwapIcon, swapStates } from "./icons/swap/swap-icon.js";

package/dist/shared/icon-colors.d.ts

@@ -17,18 +17,37 @@ export interface ShipColors {
     windows?: string;
     water?: string;
 }
-export interface LeafColors {
-    blade?: string;
-    stem?: string;
+export interface AlertColors {
+    /** Critical punctuation; defaults to red, independent of the triangle outline. */
+    critical?: string;
 }
 export interface IconColors {
+    refresh: never;
+    copy: never;
+    eye: never;
+    link: never;
+    check: never;
+    close: never;
+    sparkles: never;
+    sparkle: never;
+    star: never;
+    wave: never;
     dog: DogColors;
     monkey: MonkeyColors;
     heart: HeartColors;
     ship: ShipColors;
-    leaf: LeafColors;
     rocket: never;
     search: never;
     bell: never;
     download: never;
+    shield: never;
+    cursor: never;
+    clapperboard: never;
+    plug: never;
+    bulb: never;
+    alert: AlertColors;
+    'badge-check': never;
+    replace: never;
+    delete: never;
+    swap: never;
 }

package/dist/shared/icon-types.d.ts

@@ -5,6 +5,7 @@ export interface StatefulIconProps<State extends string, Colors = never> {
     accentColor?: string;
     /** Optional, icon-specific detail colours. Unset parts inherit their defaults. */
     colors?: Colors;
+    /** Outline width in SVG units. Defaults to 1.65. */
     strokeWidth?: number;
     speed?: number;
     /** Keeps the icon performing after its state transition has settled. */

package/dist/shared/sparkle-motion.d.ts

@@ -0,0 +1,12 @@
+export declare const SPARKLE_BLINK_DURATION = 2.4;
+export declare function sampleTwinkle(time: number, alive: number, entry: number, start: number, repeats: readonly number[]): {
+    dark: number;
+    tilt: number;
+};
+export declare function sampleSparkleCore(weights: readonly number[], time: number, alive: number, entry: number, baseScale: number): {
+    core: string;
+    coreOpacity: number;
+    tint: number;
+};
+/** Lucide's ISC-licensed rounded four-point contour, shared by the two compositions. */
+export declare const SPARKLE_CORE = "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z";

package/dist/shared/sparkle-motion.js

@@ -0,0 +1,38 @@
+import { behaviorBeat } from "./behavior-curves.js";
+const clamp = (n) => Math.max(0, Math.min(1, n));
+export const SPARKLE_BLINK_DURATION = 2.4;
+/** Soft disappearance and recovery; no dark hold, flash or scale-pop. */
+function twinkle(time, start) {
+    const dark = clamp(behaviorBeat(time, start, 0.48, 0, 0.68));
+    return {
+        dark,
+        tilt: dark * Math.sin(((time - start) / 1.16) * Math.PI * 2) * 4,
+    };
+}
+export function sampleTwinkle(time, alive, entry, start, repeats) {
+    const first = twinkle(clamp(entry) * SPARKLE_BLINK_DURATION, start);
+    let recurring = { dark: 0, tilt: 0 };
+    if (alive > 0)
+        for (const at of repeats) {
+            const beat = twinkle(((time % 6.4) + 6.4) % 6.4, at);
+            if (beat.dark > 0)
+                recurring = { dark: beat.dark * clamp(alive), tilt: beat.tilt * clamp(alive) };
+        }
+    // Smooth union keeps overlapping entry/live fades bounded, without max() handoff kinks.
+    return {
+        dark: 1 - (1 - first.dark) * (1 - recurring.dark),
+        tilt: first.tilt * (1 - recurring.dark * 0.5) + recurring.tilt * (1 - first.dark * 0.5),
+    };
+}
+export function sampleSparkleCore(weights, time, alive, entry, baseScale) {
+    const [, shimmering, blink, dimmed] = weights.map(clamp), life = clamp(alive);
+    const beat = sampleTwinkle(time, life, entry, 0.05, [0.2, 3.2]);
+    const scale = baseScale - dimmed * 0.09 + shimmering * 0.025;
+    return {
+        core: `translate(12px, 12px) rotate(${shimmering * (-5 + life * Math.sin(time * 1.5) * 4) + blink * beat.tilt}deg) scale(${scale}) translate(-12px, -12px)`,
+        coreOpacity: clamp(1 - blink * beat.dark * 0.9),
+        tint: 0,
+    };
+}
+/** Lucide's ISC-licensed rounded four-point contour, shared by the two compositions. */
+export const SPARKLE_CORE = 'M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z';

package/dist/shared/use-icon-motion.d.ts

@@ -1,6 +1,10 @@
 import { type RefObject } from 'react';
 import { type MotionValue } from 'motion/react';
 export declare function usePoseWeight(active: boolean, pace: number, reduced: boolean): MotionValue<number>;
+/** Finite action playhead: preserve interrupted progress; restart only once invisible.
+ * Motion owns scheduling, not React state or another recurring frame loop.
+ */
+export declare function useActionProgress(active: boolean, pace: number, reduced: boolean, duration: number, canRestart?: () => boolean): MotionValue<number>;
 /** Own the source subscription so changing speed disposes the previous spring.
  * Motion's source-following spring cleanup currently removes the subscription
  * without stopping the old animation when options change. A numeric spring has

package/dist/shared/use-icon-motion.js

@@ -24,6 +24,32 @@ export function usePoseWeight(active, pace, reduced) {
     }, [active, pace, reduced, value, spring]);
     return value;
 }
+/** Finite action playhead: preserve interrupted progress; restart only once invisible.
+ * Motion owns scheduling, not React state or another recurring frame loop.
+ */
+export function useActionProgress(active, pace, reduced, duration, canRestart) {
+    const progress = useMotionValue(1);
+    const wasActive = useRef(false);
+    useEffect(() => {
+        const entered = active && !wasActive.current;
+        wasActive.current = active;
+        if (reduced) {
+            progress.jump(1);
+            return;
+        }
+        if (entered && progress.get() === 1 && (canRestart?.() ?? true))
+            progress.jump(0);
+        const remaining = 1 - progress.get();
+        if (remaining <= 0)
+            return;
+        const animation = animate(progress, 1, {
+            duration: (duration * remaining) / pace,
+            ease: 'linear',
+        });
+        return () => animation.stop();
+    }, [active, pace, reduced, duration, progress, canRestart]);
+    return progress;
+}
 /** Own the source subscription so changing speed disposes the previous spring.
  * Motion's source-following spring cleanup currently removes the subscription
  * without stopping the old animation when options change. A numeric spring has

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weasel-icons",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Stateful animated React SVG icons. Icons that overreact beautifully.",
   "license": "MIT",
   "author": "Vinod Murugan",
@@ -39,11 +39,6 @@
       "import": "./dist/icons/rocket/rocket-icon.js",
       "default": "./dist/icons/rocket/rocket-icon.js"
     },
-    "./leaf": {
-      "types": "./dist/icons/leaf/leaf-icon.d.ts",
-      "import": "./dist/icons/leaf/leaf-icon.js",
-      "default": "./dist/icons/leaf/leaf-icon.js"
-    },
     "./search": {
       "types": "./dist/icons/search/search-icon.d.ts",
       "import": "./dist/icons/search/search-icon.js",
@@ -59,7 +54,107 @@
       "import": "./dist/icons/download/download-icon.js",
       "default": "./dist/icons/download/download-icon.js"
     },
-    "./package.json": "./package.json"
+    "./shield": {
+      "types": "./dist/icons/shield/shield-icon.d.ts",
+      "import": "./dist/icons/shield/shield-icon.js",
+      "default": "./dist/icons/shield/shield-icon.js"
+    },
+    "./cursor": {
+      "types": "./dist/icons/cursor/cursor-icon.d.ts",
+      "import": "./dist/icons/cursor/cursor-icon.js",
+      "default": "./dist/icons/cursor/cursor-icon.js"
+    },
+    "./clapperboard": {
+      "types": "./dist/icons/clapperboard/clapperboard-icon.d.ts",
+      "import": "./dist/icons/clapperboard/clapperboard-icon.js",
+      "default": "./dist/icons/clapperboard/clapperboard-icon.js"
+    },
+    "./plug": {
+      "types": "./dist/icons/plug/plug-icon.d.ts",
+      "import": "./dist/icons/plug/plug-icon.js",
+      "default": "./dist/icons/plug/plug-icon.js"
+    },
+    "./bulb": {
+      "types": "./dist/icons/bulb/bulb-icon.d.ts",
+      "import": "./dist/icons/bulb/bulb-icon.js",
+      "default": "./dist/icons/bulb/bulb-icon.js"
+    },
+    "./alert": {
+      "types": "./dist/icons/alert/alert-icon.d.ts",
+      "import": "./dist/icons/alert/alert-icon.js",
+      "default": "./dist/icons/alert/alert-icon.js"
+    },
+    "./badge-check": {
+      "types": "./dist/icons/badge-check/badge-check-icon.d.ts",
+      "import": "./dist/icons/badge-check/badge-check-icon.js",
+      "default": "./dist/icons/badge-check/badge-check-icon.js"
+    },
+    "./replace": {
+      "types": "./dist/icons/replace/replace-icon.d.ts",
+      "import": "./dist/icons/replace/replace-icon.js",
+      "default": "./dist/icons/replace/replace-icon.js"
+    },
+    "./delete": {
+      "types": "./dist/icons/delete/delete-icon.d.ts",
+      "import": "./dist/icons/delete/delete-icon.js",
+      "default": "./dist/icons/delete/delete-icon.js"
+    },
+    "./swap": {
+      "types": "./dist/icons/swap/swap-icon.d.ts",
+      "import": "./dist/icons/swap/swap-icon.js",
+      "default": "./dist/icons/swap/swap-icon.js"
+    },
+    "./sparkles": {
+      "types": "./dist/icons/sparkles/sparkles-icon.d.ts",
+      "import": "./dist/icons/sparkles/sparkles-icon.js",
+      "default": "./dist/icons/sparkles/sparkles-icon.js"
+    },
+    "./sparkle": {
+      "types": "./dist/icons/sparkle/sparkle-icon.d.ts",
+      "import": "./dist/icons/sparkle/sparkle-icon.js",
+      "default": "./dist/icons/sparkle/sparkle-icon.js"
+    },
+    "./star": {
+      "types": "./dist/icons/star/star-icon.d.ts",
+      "import": "./dist/icons/star/star-icon.js",
+      "default": "./dist/icons/star/star-icon.js"
+    },
+    "./wave": {
+      "types": "./dist/icons/wave/wave-icon.d.ts",
+      "import": "./dist/icons/wave/wave-icon.js",
+      "default": "./dist/icons/wave/wave-icon.js"
+    },
+    "./package.json": "./package.json",
+    "./refresh": {
+      "types": "./dist/icons/refresh/refresh-icon.d.ts",
+      "import": "./dist/icons/refresh/refresh-icon.js",
+      "default": "./dist/icons/refresh/refresh-icon.js"
+    },
+    "./copy": {
+      "types": "./dist/icons/copy/copy-icon.d.ts",
+      "import": "./dist/icons/copy/copy-icon.js",
+      "default": "./dist/icons/copy/copy-icon.js"
+    },
+    "./eye": {
+      "types": "./dist/icons/eye/eye-icon.d.ts",
+      "import": "./dist/icons/eye/eye-icon.js",
+      "default": "./dist/icons/eye/eye-icon.js"
+    },
+    "./link": {
+      "types": "./dist/icons/link/link-icon.d.ts",
+      "import": "./dist/icons/link/link-icon.js",
+      "default": "./dist/icons/link/link-icon.js"
+    },
+    "./check": {
+      "types": "./dist/icons/check/check-icon.d.ts",
+      "import": "./dist/icons/check/check-icon.js",
+      "default": "./dist/icons/check/check-icon.js"
+    },
+    "./close": {
+      "types": "./dist/icons/close/close-icon.d.ts",
+      "import": "./dist/icons/close/close-icon.js",
+      "default": "./dist/icons/close/close-icon.js"
+    }
   },
   "files": [
     "dist",
@@ -68,8 +163,8 @@
     "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
     "motion": "^13.2.0"

package/dist/icons/leaf/leaf-icon.d.ts

@@ -1,6 +0,0 @@
-import type { LeafColors } from "../../shared/icon-colors.js";
-import type { StatefulIconProps } from "../../shared/icon-types.js";
-import { type LeafState } from "./leaf-rig.js";
-export { leafStates, type LeafState } from "./leaf-rig.js";
-export type LeafIconProps = StatefulIconProps<LeafState, LeafColors>;
-export declare const LeafIcon: import("react").NamedExoticComponent<LeafIconProps>;

package/dist/icons/leaf/leaf-icon.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useRef } from 'react';
-import { motion, useTransform } from 'motion/react';
-import { usePoseWeight, useBehaviorClock } from "../../shared/use-icon-motion.js";
-import { useMotionPreference } from "../../shared/use-motion-preference.js";
-import { sampleLeaf } from "./leaf-rig.js";
-export { leafStates } from "./leaf-rig.js";
-const WINDS = ['M2.5 7.2C4.1 6.1 5.8 6.1 7.2 6.5', 'M3 10.3C4 9.7 4.6 9.6 5.3 9.7'];
-const LeafWind = memo(function LeafWind({ rig, index, color, width, }) {
-    const opacity = useTransform(rig, (r) => r.wind[index].opacity);
-    const offset = useTransform(rig, (r) => r.wind[index].offset);
-    return (_jsx(motion.path, { "data-part": `wind-${index}`, d: WINDS[index], stroke: color, strokeWidth: width * 0.65, opacity: opacity, strokeDasharray: "3 8", strokeDashoffset: offset }));
-});
-export const LeafIcon = memo(function LeafIcon({ state = 'resting', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.8, speed = 1, alive = false, className, colors, }) {
-    const reduced = useMotionPreference(), element = useRef(null);
-    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
-    const resting = usePoseWeight(state === 'resting', pace, reduced);
-    const growing = usePoseWeight(state === 'growing', pace, reduced);
-    const breezy = usePoseWeight(state === 'breezy', pace, reduced);
-    const wilted = usePoseWeight(state === 'wilted', pace, reduced);
-    const performs = alive && !reduced;
-    const life = usePoseWeight(performs, pace, reduced);
-    const time = useBehaviorClock(element, performs, pace, life);
-    const rig = useTransform(() => sampleLeaf([resting.get(), growing.get(), breezy.get(), wilted.get()], time.get(), life.get()));
-    const blade = useTransform(rig, (r) => r.blade), stem = useTransform(rig, (r) => r.stem);
-    const tint = useTransform(rig, (r) => r.tint), glint = useTransform(rig, (r) => r.glint);
-    return (_jsxs("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", overflow: "visible", preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", focusable: "false", pointerEvents: "none", shapeRendering: "geometricPrecision", strokeLinecap: "round", strokeLinejoin: "round", style: { display: 'block', overflow: 'visible' }, children: [_jsxs("g", { "data-layer": "leaf-wind", children: [_jsx(LeafWind, { rig: rig, index: 0, color: accentColor, width: strokeWidth }), _jsx(LeafWind, { rig: rig, index: 1, color: accentColor, width: strokeWidth })] }), _jsxs("g", { "data-layer": "leaf-body", children: [_jsx(motion.path, { "data-part": "blade", d: blade, stroke: colors?.blade ?? color, strokeWidth: strokeWidth, fill: colors?.blade ?? accentColor, fillOpacity: tint }), _jsx(motion.path, { "data-part": "stem", d: stem, stroke: colors?.stem ?? colors?.blade ?? color, strokeWidth: strokeWidth })] }), _jsx(motion.path, { "data-layer": "leaf-glint", d: "M4 3v2M3 4h2", opacity: glint, stroke: accentColor, strokeWidth: strokeWidth * 0.6 })] }));
-});

package/dist/icons/leaf/leaf-rig.d.ts

@@ -1,25 +0,0 @@
-/** Lucide-informed blade: one closed contour and one connected petiole/midrib. */
-export declare const leafStates: readonly ["resting", "growing", "breezy", "wilted"];
-export type LeafState = (typeof leafStates)[number];
-export type LeafWeights = readonly [number, number, number, number];
-type Point = readonly [number, number];
-export declare const LEAF_SCENE_SECONDS = 5.2;
-export declare const leafBehaviors: {
-    readonly resting: readonly ["a quiet tip nod", "catch a little light", "soft blade flex"];
-    readonly growing: readonly ["open toward the light", "stretch, then unfurl the tip", "a small proud lift"];
-    readonly breezy: readonly ["lean into a passing gust", "tip flutters after the blade", "longer breeze, soft recovery"];
-    readonly wilted: readonly ["petiole gives a little", "edges curl inward", "a tired tip settles"];
-};
-export declare function sampleLeaf(weights: LeafWeights, time?: number, alive?: number): {
-    blade: string;
-    stem: string;
-    bladePoints: Point[];
-    stemPoints: Point[];
-    tint: number;
-    wind: {
-        opacity: number;
-        offset: number;
-    }[];
-    glint: number;
-};
-export {};