weasel-icons 0.1.0 → 0.3.0

package/dist/icons/credit-card/credit-card-rig.d.ts

@@ -0,0 +1,88 @@
+export declare const creditCardStates: readonly ["idle", "processing", "approved"];
+export type CreditCardState = (typeof creditCardStates)[number];
+export declare const creditCardArt: {
+    readonly name: "credit-card";
+    readonly parts: readonly [{
+        readonly name: "card";
+        readonly paths: readonly ["M4 5H20Q22 5 22 7V17Q22 19 20 19H4Q2 19 2 17V7Q2 5 4 5Z", "M2 10L22 10", "M6 14h2"];
+        readonly poses: readonly [{}, {}, {}];
+        readonly pivot: readonly [12, 12];
+        readonly gestures: readonly [null, {
+            readonly duration: 1.1;
+            readonly repeatAfter: 2.1;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+            }, {
+                readonly at: 0.18;
+                readonly angle: -3;
+                readonly y: -0.3;
+            }, {
+                readonly at: 0.48;
+                readonly angle: 1.2;
+                readonly y: 0.25;
+            }, {
+                readonly at: 0.75;
+                readonly angle: -0.3;
+            }, {
+                readonly at: 1;
+            }];
+        }, null];
+    }, {
+        readonly name: "authorization";
+        readonly detail: true;
+        readonly paths: readonly ["M14 14L16 14L19 14"];
+        readonly poses: readonly [{
+            readonly opacity: 0;
+        }, {
+            readonly opacity: 1;
+            readonly draw: 0.2;
+        }, {
+            readonly opacity: 1;
+        }];
+        readonly pivot: readonly [12, 12];
+        readonly gestures: readonly [null, {
+            readonly duration: 2.2;
+            readonly repeatAfter: 2.9;
+            readonly loop: true;
+            readonly frames: readonly [{
+                readonly at: 0;
+            }, {
+                readonly at: 0.18;
+                readonly draw: 0.75;
+            }, {
+                readonly at: 0.45;
+                readonly draw: 0.75;
+            }, {
+                readonly at: 0.6;
+                readonly draw: 0.75;
+                readonly opacity: -1;
+            }, {
+                readonly at: 0.76;
+                readonly opacity: -1;
+            }, {
+                readonly at: 1;
+            }];
+        }, {
+            readonly duration: 1;
+            readonly repeatAfter: 2;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+            }, {
+                readonly at: 0.12;
+                readonly draw: -0.85;
+            }, {
+                readonly at: 0.6;
+                readonly draw: 0;
+                readonly scaleX: 0.06;
+                readonly scaleY: 0.06;
+            }, {
+                readonly at: 1;
+            }];
+        }];
+        readonly pathStates: readonly [readonly ["M14 14L16 14L19 14"], readonly ["M14 14L16 14L19 14"], readonly ["M14 14L16 16L19 12.5"]];
+        readonly traceLength: 9;
+        readonly accent: true;
+    }];
+};

package/dist/icons/credit-card/credit-card-rig.js

@@ -0,0 +1,122 @@
+export const creditCardStates = ['idle', 'processing', 'approved'];
+// Lucide-derived outline; attribution and pinned source: THIRD_PARTY_NOTICES.md.
+// Checkout: a single card tap starts processing, a held authorization stroke advances, and only the approved state writes the check. The card stays still while waiting.
+export const creditCardArt = {
+    name: 'credit-card',
+    parts: [
+        {
+            name: 'card',
+            paths: ['M4 5H20Q22 5 22 7V17Q22 19 20 19H4Q2 19 2 17V7Q2 5 4 5Z', 'M2 10L22 10', 'M6 14h2'],
+            poses: [{}, {}, {}],
+            pivot: [12, 12],
+            gestures: [
+                null,
+                {
+                    duration: 1.1,
+                    repeatAfter: 2.1,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.18,
+                            angle: -3,
+                            y: -0.3,
+                        },
+                        {
+                            at: 0.48,
+                            angle: 1.2,
+                            y: 0.25,
+                        },
+                        {
+                            at: 0.75,
+                            angle: -0.3,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                null,
+            ],
+        },
+        {
+            name: 'authorization',
+            detail: true,
+            paths: ['M14 14L16 14L19 14'],
+            poses: [
+                {
+                    opacity: 0,
+                },
+                {
+                    opacity: 1,
+                    draw: 0.2,
+                },
+                {
+                    opacity: 1,
+                },
+            ],
+            pivot: [12, 12],
+            gestures: [
+                null,
+                {
+                    duration: 2.2,
+                    repeatAfter: 2.9,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.18,
+                            draw: 0.75,
+                        },
+                        {
+                            at: 0.45,
+                            draw: 0.75,
+                        },
+                        {
+                            at: 0.6,
+                            draw: 0.75,
+                            opacity: -1,
+                        },
+                        {
+                            at: 0.76,
+                            opacity: -1,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                {
+                    duration: 1,
+                    repeatAfter: 2,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.12,
+                            draw: -0.85,
+                        },
+                        {
+                            at: 0.6,
+                            draw: 0,
+                            scaleX: 0.06,
+                            scaleY: 0.06,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+            ],
+            pathStates: [['M14 14L16 14L19 14'], ['M14 14L16 14L19 14'], ['M14 14L16 16L19 12.5']],
+            traceLength: 9,
+            accent: true,
+        },
+    ],
+};

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type CursorState } from "./cursor-rig.js";
+export { cursorStates, type CursorState } from "./cursor-rig.js";
+export type CursorIconProps = StatefulIconProps<CursorState>;
+export declare const CursorIcon: import("react").NamedExoticComponent<CursorIconProps>;

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useRef } from 'react';
+import { motion, useMotionValue, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock, useActionProgress } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { CURSOR_POINTER, cursorClickAction, sampleCursor } from "./cursor-rig.js";
+export { cursorStates } from "./cursor-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const CursorIcon = memo(function CursorIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null), id = useId();
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), hovering = usePoseWeight(state === 'hovering', pace, reduced), clicking = usePoseWeight(state === 'clicking', pace, reduced), blocked = usePoseWeight(state === 'blocked', pace, reduced);
+    const performs = alive && !reduced && state !== 'idle', life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    const clickEpoch = useMotionValue(0);
+    const canRestart = useCallback(() => {
+        const phase = (time.get() - clickEpoch.get()) % 6.8;
+        const repeat = phase < 3.1 ? 1 : Math.min(1, (phase - 3.1) / 0.9);
+        const reaction = cursorClickAction(repeat);
+        return clicking.get() * life.get() * (reaction.press + reaction.opacity) === 0;
+    }, [time, clickEpoch, clicking, life]);
+    const entry = useActionProgress(state === 'clicking', pace, reduced, 0.9, canRestart);
+    useEffect(() => {
+        // Give a fresh entry its own quiet interval without resetting the shared clock
+        // or restarting an already visible, interrupted click.
+        if (state === 'clicking' && entry.get() === 0)
+            clickEpoch.set(time.get());
+    }, [state, entry, clickEpoch, time]);
+    const rig = useTransform(() => sampleCursor([idle.get(), hovering.get(), clicking.get(), blocked.get()], time.get(), life.get(), entry.get(), time.get() - clickEpoch.get(), strokeWidth));
+    const pointer = useTransform(rig, (r) => r.pointer), click = useTransform(rig, (r) => r.click), blockedOpacity = useTransform(rig, (r) => r.blocked), tipCut = useTransform(rig, (r) => r.tipCut), badgeRadius = useTransform(rig, (r) => r.badgeRadius), badgeStroke = useTransform(rig, (r) => r.badgeStroke), blockedSlash = useTransform(rig, (r) => r.blockedSlash), rays = useTransform(rig, (r) => r.rays);
+    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", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: [_jsx("defs", { children: _jsx("clipPath", { id: `${id}-tip-cut`, children: _jsx(motion.path, { "data-part": "cursor-tip-cut", d: tipCut, clipRule: "evenodd" }) }) }), _jsx(motion.path, { "data-layer": "cursor-click", d: rays, stroke: accentColor, strokeWidth: strokeWidth * 0.45, opacity: click }), _jsx(motion.path, { "data-layer": "cursor-pointer", "data-part": "pointer", d: CURSOR_POINTER, stroke: color, strokeWidth: strokeWidth, transform: pointer, style: ORIGIN, clipPath: `url(#${id}-tip-cut)` }), _jsxs(motion.g, { "data-layer": "cursor-blocked", transform: pointer, style: ORIGIN, opacity: blockedOpacity, stroke: accentColor, strokeWidth: badgeStroke, children: [_jsx(motion.circle, { "data-part": "blocked-ring", cx: "4.2", cy: "4.2", r: badgeRadius }), _jsx(motion.path, { "data-part": "blocked-slash", d: blockedSlash })] })] }));
+});

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

@@ -0,0 +1,21 @@
+export declare const cursorStates: readonly ["idle", "hovering", "clicking", "blocked"];
+export type CursorState = (typeof cursorStates)[number];
+export declare const CURSOR_POINTER = "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z";
+export declare const CURSOR_RAY_ANGLES: readonly [180, 225, 270];
+/** One press, followed by an outward burst. Reset distance only while invisible. */
+export declare function cursorClickAction(progress: number): {
+    press: number;
+    opacity: number;
+    distance: number;
+    length: number;
+};
+export declare function sampleCursor(weights: readonly number[], time?: number, alive?: number, entry?: number, clickTime?: number, strokeWidth?: number): {
+    pointer: string;
+    rays: string;
+    click: number;
+    blocked: number;
+    badgeRadius: number;
+    badgeStroke: number;
+    blockedSlash: string;
+    tipCut: string;
+};

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

@@ -0,0 +1,63 @@
+import { behaviorBeat } from "../../shared/behavior-curves.js";
+export const cursorStates = ['idle', 'hovering', 'clicking', 'blocked'];
+export const CURSOR_POINTER = 'M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z';
+export const CURSOR_RAY_ANGLES = [180, 225, 270];
+const clamp = (n) => Math.max(0, Math.min(1, n));
+const smooth = (n) => {
+    const x = clamp(n);
+    return x * x * x * (x * (x * 6 - 15) + 10);
+};
+/** One press, followed by an outward burst. Reset distance only while invisible. */
+export function cursorClickAction(progress) {
+    const t = clamp(progress) * 0.9;
+    const travel = smooth((t - 0.22) / 0.5);
+    return {
+        press: behaviorBeat(t, 0, 0.18, 0.04, 0.3),
+        opacity: behaviorBeat(t, 0.22, 0.09, 0.02, 0.39),
+        distance: 2.7 + 0.5 * travel,
+        length: 1.05,
+    };
+}
+export function sampleCursor(weights, time = 0, alive = 0, entry = 1, clickTime = time, strokeWidth = 1.65) {
+    const [, h, c, b] = weights.map(clamp), life = clamp(alive), t = time % 6.8;
+    // Two continuous figure-eights per phrase: the whole pointer explores, never
+    // stops at a keyframe, and keeps the current phase when a state is interrupted.
+    const orbit = (t * Math.PI * 2) / 3.4;
+    const approach = behaviorBeat(t, 0.2, 0.38, 0.08, 0.28) + 0.65 * behaviorBeat(t, 3.65, 0.44, 0.06, 0.3);
+    const recoil = behaviorBeat(t, 0.63, 0.22, 0.04, 0.66) + 0.65 * behaviorBeat(t, 4.12, 0.24, 0.04, 0.7);
+    // Entry owns the first click; living repeats use the existing uninterrupted clock.
+    const clickPhase = clickTime % 6.8;
+    const repeat = clickPhase < 3.1 ? 1 : clamp((clickPhase - 3.1) / 0.9);
+    const action = cursorClickAction(entry < 1 ? entry : repeat);
+    const amount = entry < 1 ? 1 : life;
+    const refusal = life * (-0.5 * approach + 0.42 * recoil);
+    // A brief entry hesitation also works with alive off, then becomes static.
+    const entryHesitation = 0.24 * 4 * b * (1 - b);
+    const dx = h * life * 1.25 * Math.sin(orbit) + b * (0.3 + refusal) + entryHesitation;
+    const dy = h * life * 0.75 * Math.sin(orbit * 2) + b * (0.3 + refusal) + entryHesitation;
+    const tipX = 6 + dx, tipY = 6 + dy;
+    const scale = 0.84 + h * 0.015 - b * 0.06 - c * (0.012 + amount * 0.065 * action.press);
+    const rays = CURSOR_RAY_ANGLES.map((angle) => {
+        const radians = (angle * Math.PI) / 180, x = Math.cos(radians), y = Math.sin(radians);
+        // Fade paint, not emitted travel: turning alive off must not pull rays back.
+        const distance = amount > 0 ? action.distance : 2.7;
+        const point = (r) => `${tipX + x * r} ${tipY + y * r}`;
+        return `M${point(distance)}L${point(distance + action.length)}`;
+    }).join('');
+    // The blocked symbol replaces the pointed apex. Clearance includes both
+    // painted half-strokes, so primary paint never shows through the badge.
+    const badgeRadius = b * 2.8;
+    const badgeStroke = b * strokeWidth * 0.75;
+    const cutRadius = badgeRadius + badgeStroke / 2 + b * 0.5 + strokeWidth * 0.5 * smooth(b / 0.08);
+    const diagonal = badgeRadius / Math.SQRT2;
+    return {
+        pointer: `translate(${tipX}px, ${tipY}px) scale(${scale}) translate(-4.2px, -4.2px)`,
+        rays,
+        click: c * amount * action.opacity,
+        blocked: b,
+        badgeRadius,
+        badgeStroke,
+        blockedSlash: `M${4.2 - diagonal} ${4.2 - diagonal}L${4.2 + diagonal} ${4.2 + diagonal}`,
+        tipCut: `M-24 -24H48V48H-24Z M${4.2 - cutRadius} 4.2a${cutRadius} ${cutRadius} 0 1 0 ${2 * cutRadius} 0a${cutRadius} ${cutRadius} 0 1 0 ${-2 * cutRadius} 0Z`,
+    };
+}

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type DatabaseState } from "./database-rig.js";
+export { databaseStates, type DatabaseState } from "./database-rig.js";
+export type DatabaseIconProps = StatefulIconProps<DatabaseState>;
+export declare const DatabaseIcon: import("react").NamedExoticComponent<DatabaseIconProps>;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ArticulatedIcon } from "../../shared/articulated-icon.js";
+import { databaseArt, databaseStates } from "./database-rig.js";
+export { databaseStates } from "./database-rig.js";
+export const DatabaseIcon = memo(function DatabaseIcon(props) {
+    return _jsx(ArticulatedIcon, { art: databaseArt, states: databaseStates, ...props });
+});

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

@@ -0,0 +1,61 @@
+export declare const databaseStates: readonly ["idle", "syncing", "synced"];
+export type DatabaseState = (typeof databaseStates)[number];
+export declare const databaseArt: {
+    readonly name: "database";
+    readonly parts: readonly [{
+        readonly name: "cylinder";
+        readonly paths: readonly ["M3 5V19A9 3 0 0 0 21 19V5", "M3 5a9 3 0 1 0 18 0a9 3 0 1 0 -18 0"];
+        readonly poses: readonly [{}, {}, {}];
+        readonly pivot: readonly [12, 12];
+        readonly gestures: readonly [];
+    }, {
+        readonly name: "middle-band";
+        readonly paths: readonly ["M3 12A9 3 0 0 0 21 12"];
+        readonly poses: readonly [{}, {
+            readonly y: -3;
+        }, {
+            readonly y: 3;
+        }];
+        readonly pivot: readonly [12, 12];
+        readonly gestures: readonly [null, {
+            readonly duration: 2.5;
+            readonly repeatAfter: 3.8;
+            readonly loop: true;
+            readonly frames: readonly [{
+                readonly at: 0;
+            }, {
+                readonly at: 0.12;
+            }, {
+                readonly at: 0.58;
+                readonly y: 6;
+            }, {
+                readonly at: 0.72;
+                readonly y: 6;
+                readonly opacity: -1;
+            }, {
+                readonly at: 0.88;
+                readonly opacity: -1;
+            }, {
+                readonly at: 1;
+            }];
+        }, {
+            readonly duration: 1.2;
+            readonly repeatAfter: 2.2;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+            }, {
+                readonly at: 0.2;
+                readonly y: -0.9;
+            }, {
+                readonly at: 0.55;
+                readonly y: 0.25;
+            }, {
+                readonly at: 0.8;
+                readonly y: -0.05;
+            }, {
+                readonly at: 1;
+            }];
+        }];
+    }];
+};

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

@@ -0,0 +1,86 @@
+export const databaseStates = ['idle', 'syncing', 'synced'];
+// Lucide-derived outline; attribution and pinned source: THIRD_PARTY_NOTICES.md.
+// Sync storage: a write band scans downward through the cylinder, fades, and resets invisibly. The synced band seats at the bottom; the cylinder keeps its volume.
+export const databaseArt = {
+    name: 'database',
+    parts: [
+        {
+            name: 'cylinder',
+            paths: ['M3 5V19A9 3 0 0 0 21 19V5', 'M3 5a9 3 0 1 0 18 0a9 3 0 1 0 -18 0'],
+            poses: [{}, {}, {}],
+            pivot: [12, 12],
+            gestures: [],
+        },
+        {
+            name: 'middle-band',
+            paths: ['M3 12A9 3 0 0 0 21 12'],
+            poses: [
+                {},
+                {
+                    y: -3,
+                },
+                {
+                    y: 3,
+                },
+            ],
+            pivot: [12, 12],
+            gestures: [
+                null,
+                {
+                    duration: 2.5,
+                    repeatAfter: 3.8,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.12,
+                        },
+                        {
+                            at: 0.58,
+                            y: 6,
+                        },
+                        {
+                            at: 0.72,
+                            y: 6,
+                            opacity: -1,
+                        },
+                        {
+                            at: 0.88,
+                            opacity: -1,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                {
+                    duration: 1.2,
+                    repeatAfter: 2.2,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.2,
+                            y: -0.9,
+                        },
+                        {
+                            at: 0.55,
+                            y: 0.25,
+                        },
+                        {
+                            at: 0.8,
+                            y: -0.05,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type DeleteState } from "./delete-rig.js";
+export { deleteStates, type DeleteState } from "./delete-rig.js";
+export type DeleteIconProps = StatefulIconProps<DeleteState>;
+export declare const DeleteIcon: import("react").NamedExoticComponent<DeleteIconProps>;

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef, useId } 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 { DELETE_SHELL, sampleDelete } from "./delete-rig.js";
+export { deleteStates } from "./delete-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const DeleteIcon = memo(function DeleteIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null), id = useId();
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), deleting = usePoseWeight(state === 'deleting', pace, reduced), deleted = usePoseWeight(state === 'deleted', 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 !== 'deleting');
+    const canRestart = useCallback(() => {
+        const invisible = first.current || deleting.get() < 0.001;
+        first.current = false;
+        return invisible;
+    }, [deleting]);
+    const entry = useActionProgress(state === 'deleting', pace, reduced, 1.15, canRestart);
+    const rig = useTransform(() => sampleDelete([idle.get(), deleting.get(), deleted.get(), error.get()], time.get(), life.get(), entry.get()));
+    const body = useTransform(rig, (r) => r.body), mark = useTransform(rig, (r) => r.mark), reverse = useTransform(rig, (r) => r.reverse), offset = useTransform(rig, (r) => r.offset), markOpacity = useTransform(rig, (r) => r.markOpacity), cutX = useTransform(rig, (r) => r.cutX), erase = useTransform(rig, (r) => r.erase), eraseX = useTransform(rig, (r) => r.eraseX), echo = useTransform(rig, (r) => r.echo), echoOffset = useTransform(rig, (r) => r.echoOffset);
+    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", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: [_jsxs("defs", { children: [_jsx("clipPath", { id: `${id}-inside`, children: _jsx("path", { d: DELETE_SHELL }) }), _jsx("clipPath", { id: `${id}-erase`, children: _jsx(motion.rect, { "data-part": "erase-window", x: "0", y: "6", width: cutX, height: "12" }) })] }), _jsxs(motion.g, { "data-layer": "delete-body", transform: body, style: ORIGIN, children: [_jsx("path", { "data-part": "shell", d: DELETE_SHELL, stroke: color, strokeWidth: strokeWidth }), _jsxs("g", { clipPath: `url(#${id}-inside)`, children: [_jsxs(motion.g, { "data-layer": "delete-symbol", style: { x: offset }, opacity: markOpacity, clipPath: `url(#${id}-erase)`, children: [_jsx(motion.path, { "data-layer": "delete-mark", d: mark, stroke: color, strokeWidth: Math.min(strokeWidth, 2.5) }), _jsx(motion.path, { "data-layer": "delete-reverse", d: "m18 9-6 6", opacity: reverse, stroke: color, strokeWidth: Math.min(strokeWidth, 2.5) })] }), _jsx(motion.path, { "data-layer": "delete-erase", d: "M0 8v8", style: { x: eraseX }, opacity: erase, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.75, 1.4) })] }), _jsx(motion.path, { "data-layer": "delete-echo", d: "M0 10h-1.2M0 14h-1.2", style: { x: echoOffset }, opacity: echo, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.65, 1.1) })] })] }));
+});

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

@@ -0,0 +1,15 @@
+export declare const deleteStates: readonly ["idle", "deleting", "deleted", "error"];
+export type DeleteState = (typeof deleteStates)[number];
+export declare const DELETE_SHELL = "M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z";
+export declare function sampleDelete(weights: readonly number[], time?: number, alive?: number, entry?: number): {
+    body: string;
+    mark: string;
+    reverse: number;
+    markOpacity: number;
+    cutX: number;
+    offset: number;
+    erase: number;
+    eraseX: number;
+    echo: number;
+    echoOffset: number;
+};

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

@@ -0,0 +1,33 @@
+import { behaviorBeat } from "../../shared/behavior-curves.js";
+export const deleteStates = ['idle', 'deleting', 'deleted', 'error'];
+export const DELETE_SHELL = 'M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z';
+export function sampleDelete(weights, time = 0, alive = 0, entry = 1) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const smooth = (n) => {
+        const t = clamp(n);
+        return t * t * t * (t * (t * 6 - 15) + 10);
+    };
+    const [, deleting, deleted, error] = weights.map(clamp), life = clamp(alive);
+    const t = time % 6;
+    const action = clamp(entry) * 1.15;
+    const sweep = smooth((action - 0.22) / 0.68);
+    const repeating = smooth((t - 0.55) / 0.8) * (1 - smooth((t - 2.5) / 0.65));
+    const eraseProgress = sweep * (1 - life) + repeating * life;
+    const contact = Math.max(behaviorBeat(action, 0, 0.16, 0.05, 0.32), life * behaviorBeat(t, 0.25, 0.16, 0.05, 0.35));
+    const refusal = error * life * behaviorBeat(t, 0.4, 0.22, 0.06, 0.6);
+    const erased = smooth((t - 1.1) / 0.3) * (1 - smooth((t - 3.2) / 0.55));
+    const effect = deleting *
+        Math.max(behaviorBeat(action, 0.22, 0.1, 0.45, 0.22), life * behaviorBeat(t, 0.55, 0.1, 0.55, 0.25));
+    return {
+        body: `translate(${12 - deleting * contact * 0.7 + refusal * 0.6}px, 12px) scale(${0.82 - deleting * contact * 0.025}) translate(-12px, -12px)`,
+        mark: `M${12 - 0.5 * deleted} ${9 + 3 * deleted}L${15 - 1.5 * deleted} ${12 + 2 * deleted}L18 ${15 - 5 * deleted}`,
+        reverse: 1 - deleted,
+        markOpacity: 1 - deleting * life * erased,
+        cutX: 24 - deleting * (4 + eraseProgress * 10) - effect * 0.6,
+        offset: -deleting * eraseProgress * 0.4,
+        erase: effect,
+        eraseX: 20 - eraseProgress * 10,
+        echo: deleting * contact * 0.5,
+        echoOffset: -contact * 0.2,
+    };
+}

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

@@ -9,7 +9,7 @@ export { dogStates } from "./dog-rig.js";
 // Motion emits CSS transforms. The -3/-3 viewBox origin is offset back to
 // SVG coordinate (0,0), so authored pivot coordinates remain exact.
 const SVG_ORIGIN = { originX: '3px', originY: '3px', transformBox: 'view-box' };
-export const DogIcon = memo(function DogIcon({ state = 'waiting', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.8, speed = 1, alive = false, className, colors, }) {
+export const DogIcon = memo(function DogIcon({ state = 'waiting', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, colors, }) {
     const reduced = useMotionPreference();
     const element = useRef(null);
     const mouthId = `puppy-mouth-${useId().replace(/:/g, '')}`;

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

@@ -7,7 +7,7 @@ import { usePoseWeight, useBehaviorClock } from "../../shared/use-icon-motion.js
 import { sampleDownload, DOWNLOAD_TRAY } from "./download-rig.js";
 export { downloadStates } from "./download-rig.js";
 const ORIGIN = { originX: 0, originY: 0, transformBox: 'view-box' };
-export const DownloadIcon = memo(function DownloadIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.8, speed = 1, alive = false, className, }) {
+export const DownloadIcon = memo(function DownloadIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = '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), downloading = usePoseWeight(state === 'downloading', pace, reduced);

package/dist/icons/external-link/external-link-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type ExternalLinkState } from "./external-link-rig.js";
+export { externalLinkStates, type ExternalLinkState } from "./external-link-rig.js";
+export type ExternalLinkIconProps = StatefulIconProps<ExternalLinkState>;
+export declare const ExternalLinkIcon: import("react").NamedExoticComponent<ExternalLinkIconProps>;

package/dist/icons/external-link/external-link-icon.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ArticulatedIcon } from "../../shared/articulated-icon.js";
+import { externalLinkArt, externalLinkStates, resolveExternalLinkState, } from "./external-link-rig.js";
+export { externalLinkStates } from "./external-link-rig.js";
+export const ExternalLinkIcon = memo(function ExternalLinkIcon(props) {
+    return (_jsx(ArticulatedIcon, { art: externalLinkArt, states: externalLinkStates, ...props, state: resolveExternalLinkState(props.state) }));
+});