weasel-icons 0.7.0 → 0.8.0

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

@@ -0,0 +1,81 @@
+export const targetStates = ['set', 'tracking', 'hit'];
+// Lucide `target` rings; attribution and pinned source: THIRD_PARTY_NOTICES.md.
+// Host: a goal, objective or KPI target (OKR page, sales quota, campaign goal).
+// set (condition): the two rings with the centre ghosted — a target exists, nothing has reached it.
+// tracking (work): the middle ring breathes inward while the centre brightens and dims, until the host
+// reports the goal is met. At rest the middle ring sits drawn in and the centre is half there.
+// hit (result): the centre lands at full strength with one pop and the outer ring rings once outward.
+// Nearest confusion: a location/locate pin — there is no crosshair and nothing moves off centre.
+const CENTRE = [12, 12];
+const breathe = { duration: 1.5, repeatAfter: 2.2, loop: true };
+const landing = { duration: 0.7, repeatAfter: 2, loop: false };
+const ring = (r) => `M${12 - r} 12a${r} ${r} 0 1 0 ${2 * r} 0a${r} ${r} 0 1 0-${2 * r} 0`;
+export const targetArt = {
+    name: 'target',
+    parts: [
+        {
+            name: 'outer',
+            paths: [ring(10)],
+            poses: [{}, {}, {}],
+            pivot: CENTRE,
+            gestures: [
+                null,
+                null,
+                {
+                    ...landing,
+                    frames: [
+                        { at: 0 },
+                        { at: 0.35, scaleX: 0.04, scaleY: 0.04 },
+                        { at: 0.65, scaleX: -0.01, scaleY: -0.01 },
+                        { at: 1 },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'middle',
+            paths: [ring(6)],
+            poses: [{}, { scaleX: 0.82, scaleY: 0.82 }, {}],
+            pivot: CENTRE,
+            gestures: [
+                null,
+                {
+                    ...breathe,
+                    frames: [{ at: 0 }, { at: 0.5, scaleX: 0.2, scaleY: 0.2 }, { at: 1 }],
+                },
+                {
+                    ...landing,
+                    frames: [
+                        { at: 0 },
+                        { at: 0.3, scaleX: -0.06, scaleY: -0.06 },
+                        { at: 0.6, scaleX: 0.03, scaleY: 0.03 },
+                        { at: 1 },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'centre',
+            accent: true,
+            paths: [ring(2)],
+            poses: [{ opacity: 0.35 }, { opacity: 0.6, scaleX: 0.8, scaleY: 0.8 }, {}],
+            pivot: CENTRE,
+            gestures: [
+                null,
+                {
+                    ...breathe,
+                    frames: [{ at: 0 }, { at: 0.5, opacity: 0.4, scaleX: 0.2, scaleY: 0.2 }, { at: 1 }],
+                },
+                {
+                    ...landing,
+                    frames: [
+                        { at: 0 },
+                        { at: 0.3, scaleX: 0.35, scaleY: 0.35 },
+                        { at: 0.6, scaleX: -0.06, scaleY: -0.06 },
+                        { at: 1 },
+                    ],
+                },
+            ],
+        },
+    ],
+};

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type WebhookState } from "./webhook-rig.js";
+export { webhookStates, type WebhookState } from "./webhook-rig.js";
+export type WebhookIconProps = StatefulIconProps<WebhookState>;
+export declare const WebhookIcon: import("react").NamedExoticComponent<WebhookIconProps>;

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

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { animate, motion, useMotionValue, useTransform } from 'motion/react';
+import { useBehaviorClock, usePoseWeight } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { hookPaths, payloadPaths, routePoint, packetAt, REST, } from "./webhook-rig.js";
+export { webhookStates } from "./webhook-rig.js";
+const ORIGIN = {
+    originX: '0px',
+    originY: '0px',
+    transformBox: 'view-box',
+};
+export const WebhookIcon = memo(function WebhookIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const element = useRef(null), previous = useRef(state);
+    const reduced = useMotionPreference(), pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const progress = useMotionValue(state === 'delivered' ? 1 : state === 'firing' ? REST : 0);
+    const opacity = useMotionValue(state === 'idle' ? 0 : 1), scale = useMotionValue(1);
+    const working = state === 'firing' && alive && !reduced;
+    const life = usePoseWeight(working, pace, reduced);
+    const clock = useBehaviorClock(element, working, pace, life);
+    useEffect(() => {
+        const entered = previous.current !== state;
+        previous.current = state;
+        const target = state === 'delivered' ? 1 : state === 'firing' ? REST : 0;
+        if (reduced) {
+            progress.jump(target);
+            opacity.jump(state === 'idle' ? 0 : 1);
+            scale.jump(1);
+            return;
+        }
+        if (working) {
+            const start = progress.get(), origin = clock.get();
+            const update = (time) => {
+                const v = packetAt(time - origin, start);
+                progress.set(v.p);
+                opacity.set(v.opacity);
+            };
+            const pop = animate(scale, 1, { duration: 0.15 / pace });
+            // The subscription is removed at handoff, preserving the visible playhead exactly.
+            const stop = clock.on('change', update);
+            return () => {
+                stop();
+                pop.stop();
+            };
+        }
+        const duration = (state === 'delivered' ? 0.22 + 0.7 * (1 - progress.get()) : 0.5) / pace;
+        // Pausing pending work holds the visible packet; it must not rewind to a nominal rest pose.
+        const travel = animate(progress, state === 'firing' && !entered ? progress.get() : target, {
+            duration,
+            ease: [0.22, 0.65, 0.2, 1],
+        });
+        const fade = animate(opacity, state === 'idle' ? 0 : 1, {
+            duration: 0.14 / pace,
+        });
+        const land = state === 'delivered' && entered
+            ? animate(scale, [scale.get(), 1.18, 1], {
+                delay: duration,
+                duration: 0.26 / pace,
+                ease: 'easeOut',
+            })
+            : animate(scale, 1, { duration: 0.15 / pace });
+        return () => {
+            travel.stop();
+            fade.stop();
+            land.stop();
+        };
+    }, [state, working, reduced, pace, clock, progress, opacity, scale]);
+    const transform = useTransform(() => {
+        const [x, y] = routePoint(progress.get());
+        return `translate(${x}px, ${y}px) scale(${scale.get()})`;
+    });
+    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' }, children: _jsxs("g", { "data-layer": "webhook-body", transform: "translate(12 12) scale(.84) translate(-12 -12)", children: [_jsx("g", { "data-part": "hook", children: hookPaths.map((d) => (_jsx("path", { d: d }, d))) }), _jsx(motion.g, { "data-part": "payload", transform: transform, opacity: opacity, stroke: accentColor, style: ORIGIN, children: payloadPaths.map((d) => (_jsx("path", { d: d }, d))) })] }) }));
+});

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

@@ -0,0 +1,10 @@
+export declare const webhookStates: readonly ["idle", "firing", "delivered"];
+export type WebhookState = (typeof webhookStates)[number];
+export declare const hookPaths: readonly ["M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2", "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06", "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"];
+export declare const payloadPaths: readonly ["M-0.8 0a.8 .8 0 1 0 1.6 0a.8 .8 0 1 0-1.6 0"];
+export declare function routePoint(p: number): [number, number];
+export declare const REST = 0.37;
+export declare function packetAt(seconds: number, start: number): {
+    p: number;
+    opacity: number;
+};

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

@@ -0,0 +1,50 @@
+// Lucide `webhook` outline; original payload. Attribution: THIRD_PARTY_NOTICES.md.
+export const webhookStates = ['idle', 'firing', 'delivered'];
+export const hookPaths = [
+    'M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2',
+    'm6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06',
+    'm12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8',
+];
+export const payloadPaths = ['M-0.8 0a.8 .8 0 1 0 1.6 0a.8 .8 0 1 0-1.6 0'];
+// A retained scalar playhead follows the exact line, cubic and semicircle. Delivery travels
+// from the visible position to the end; pending loops reset only while the packet is invisible.
+const smooth = (v) => {
+    const t = Math.max(0, Math.min(1, v));
+    return t * t * t * (10 + t * (-15 + 6 * t));
+};
+export function routePoint(p) {
+    const q = Math.max(0, Math.min(1, p));
+    if (q <= 0.29) {
+        const t = q / 0.29;
+        return [12 + 3.13 * t, 6 + 5.73 * t];
+    }
+    if (q < 0.44) {
+        const t = (q - 0.29) / 0.15, u = 1 - t;
+        return [
+            u ** 3 * 15.13 + 3 * u * u * t * 15.66 + 3 * u * t * t * 16.9 + t ** 3 * 18,
+            u ** 3 * 11.73 + 3 * u * u * t * 12.7 + 3 * u * t * t * 13 + t ** 3 * 13,
+        ];
+    }
+    const a = -Math.PI / 2 + ((q - 0.44) / 0.56) * Math.PI;
+    return [18 + 4 * Math.cos(a), 17 + 4 * Math.sin(a)];
+}
+export const REST = 0.37;
+// An outbound packet completes its route before an invisible reset. No visible reverse travel.
+export function packetAt(seconds, start) {
+    const first = 0.18 + 0.68 * (1 - start), end = first + 0.12 + 0.04 + 0.1 + 0.48 + 0.12;
+    if (seconds >= end)
+        return packetAt((seconds - end) % (0.18 + 0.68 * (1 - REST) + 0.12 + 0.04 + 0.1 + 0.48 + 0.12), REST);
+    if (seconds < first)
+        return { p: start + (1 - start) * smooth(seconds / first), opacity: 1 };
+    let t = seconds - first;
+    if (t < 0.12)
+        return { p: 1, opacity: 1 - smooth(t / 0.12) };
+    t -= 0.12;
+    if (t < 0.04)
+        return { p: 0, opacity: 0 };
+    t -= 0.04;
+    if (t < 0.1)
+        return { p: 0, opacity: smooth(t / 0.1) };
+    t -= 0.1;
+    return { p: REST * smooth(t / 0.48), opacity: 1 };
+}

package/dist/index.d.ts

@@ -469,3 +469,13 @@ export { VaultIcon, vaultStates, type VaultState, type VaultIconProps, } from ".
 export { ScaleIcon, scaleStates, type ScaleState, type ScaleIconProps, } from "./icons/scale/scale-icon.js";
 export { LighthouseIcon, lighthouseStates, type LighthouseState, type LighthouseIconProps, } from "./icons/lighthouse/lighthouse-icon.js";
 export { MailboxIcon, mailboxStates, type MailboxState, type MailboxIconProps, } from "./icons/mailbox/mailbox-icon.js";
+export { BlocksIcon, blocksStates, type BlocksState, type BlocksIconProps, } from "./icons/blocks/blocks-icon.js";
+export { BrickWallIcon, brickWallStates, type BrickWallState, type BrickWallIconProps, } from "./icons/brick-wall/brick-wall-icon.js";
+export { WebhookIcon, webhookStates, type WebhookState, type WebhookIconProps, } from "./icons/webhook/webhook-icon.js";
+export { BotIcon, botStates, type BotState, type BotIconProps } from "./icons/bot/bot-icon.js";
+export { TargetIcon, targetStates, type TargetState, type TargetIconProps, } from "./icons/target/target-icon.js";
+export { DiceIcon, diceStates, type DiceState, type DiceIconProps } from "./icons/dice/dice-icon.js";
+export { BadgePercentIcon, badgePercentStates, type BadgePercentState, type BadgePercentIconProps, } from "./icons/badge-percent/badge-percent-icon.js";
+export { InfinityIcon, infinityStates, type InfinityState, type InfinityIconProps, } from "./icons/infinity/infinity-icon.js";
+export { FuelIcon, fuelStates, type FuelState, type FuelIconProps } from "./icons/fuel/fuel-icon.js";
+export { FootprintsIcon, footprintsStates, type FootprintsState, type FootprintsIconProps, } from "./icons/footprints/footprints-icon.js";

package/dist/index.js

@@ -468,3 +468,13 @@ export { VaultIcon, vaultStates, } from "./icons/vault/vault-icon.js";
 export { ScaleIcon, scaleStates, } from "./icons/scale/scale-icon.js";
 export { LighthouseIcon, lighthouseStates, } from "./icons/lighthouse/lighthouse-icon.js";
 export { MailboxIcon, mailboxStates, } from "./icons/mailbox/mailbox-icon.js";
+export { BlocksIcon, blocksStates, } from "./icons/blocks/blocks-icon.js";
+export { BrickWallIcon, brickWallStates, } from "./icons/brick-wall/brick-wall-icon.js";
+export { WebhookIcon, webhookStates, } from "./icons/webhook/webhook-icon.js";
+export { BotIcon, botStates } from "./icons/bot/bot-icon.js";
+export { TargetIcon, targetStates, } from "./icons/target/target-icon.js";
+export { DiceIcon, diceStates } from "./icons/dice/dice-icon.js";
+export { BadgePercentIcon, badgePercentStates, } from "./icons/badge-percent/badge-percent-icon.js";
+export { InfinityIcon, infinityStates, } from "./icons/infinity/infinity-icon.js";
+export { FuelIcon, fuelStates } from "./icons/fuel/fuel-icon.js";
+export { FootprintsIcon, footprintsStates, } from "./icons/footprints/footprints-icon.js";

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

@@ -328,6 +328,16 @@ export interface IconColors {
     tag: never;
     gift: never;
     ticket: never;
+    footprints: never;
+    fuel: never;
+    infinity: never;
+    'badge-percent': never;
+    dice: never;
+    target: never;
+    bot: never;
+    webhook: never;
+    'brick-wall': never;
+    blocks: never;
     mailbox: never;
     lighthouse: never;
     scale: never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weasel-icons",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Stateful animated React SVG icons. Icons that overreact beautifully.",
   "license": "MIT",
   "author": "Vinod Murugan",
@@ -2359,6 +2359,56 @@
       "types": "./dist/icons/mailbox/mailbox-icon.d.ts",
       "import": "./dist/icons/mailbox/mailbox-icon.js",
       "default": "./dist/icons/mailbox/mailbox-icon.js"
+    },
+    "./blocks": {
+      "types": "./dist/icons/blocks/blocks-icon.d.ts",
+      "import": "./dist/icons/blocks/blocks-icon.js",
+      "default": "./dist/icons/blocks/blocks-icon.js"
+    },
+    "./brick-wall": {
+      "types": "./dist/icons/brick-wall/brick-wall-icon.d.ts",
+      "import": "./dist/icons/brick-wall/brick-wall-icon.js",
+      "default": "./dist/icons/brick-wall/brick-wall-icon.js"
+    },
+    "./webhook": {
+      "types": "./dist/icons/webhook/webhook-icon.d.ts",
+      "import": "./dist/icons/webhook/webhook-icon.js",
+      "default": "./dist/icons/webhook/webhook-icon.js"
+    },
+    "./bot": {
+      "types": "./dist/icons/bot/bot-icon.d.ts",
+      "import": "./dist/icons/bot/bot-icon.js",
+      "default": "./dist/icons/bot/bot-icon.js"
+    },
+    "./target": {
+      "types": "./dist/icons/target/target-icon.d.ts",
+      "import": "./dist/icons/target/target-icon.js",
+      "default": "./dist/icons/target/target-icon.js"
+    },
+    "./dice": {
+      "types": "./dist/icons/dice/dice-icon.d.ts",
+      "import": "./dist/icons/dice/dice-icon.js",
+      "default": "./dist/icons/dice/dice-icon.js"
+    },
+    "./badge-percent": {
+      "types": "./dist/icons/badge-percent/badge-percent-icon.d.ts",
+      "import": "./dist/icons/badge-percent/badge-percent-icon.js",
+      "default": "./dist/icons/badge-percent/badge-percent-icon.js"
+    },
+    "./infinity": {
+      "types": "./dist/icons/infinity/infinity-icon.d.ts",
+      "import": "./dist/icons/infinity/infinity-icon.js",
+      "default": "./dist/icons/infinity/infinity-icon.js"
+    },
+    "./fuel": {
+      "types": "./dist/icons/fuel/fuel-icon.d.ts",
+      "import": "./dist/icons/fuel/fuel-icon.js",
+      "default": "./dist/icons/fuel/fuel-icon.js"
+    },
+    "./footprints": {
+      "types": "./dist/icons/footprints/footprints-icon.d.ts",
+      "import": "./dist/icons/footprints/footprints-icon.js",
+      "default": "./dist/icons/footprints/footprints-icon.js"
     }
   },
   "files": [