weasel-icons 0.2.0 → 0.4.0

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

@@ -0,0 +1,53 @@
+export declare const radioStates: readonly ["off", "tuning", "live"];
+export type RadioState = (typeof radioStates)[number];
+export declare const radioArt: {
+    readonly name: "radio";
+    readonly parts: readonly [{
+        readonly name: "core";
+        readonly paths: readonly ["M10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"];
+        readonly poses: readonly [{}, {}, {}];
+    }, {
+        readonly name: "near";
+        readonly paths: readonly ["M16.247 7.761a6 6 0 0 1 0 8.478", "M7.753 16.239a6 6 0 0 1 0-8.478"];
+        readonly poses: readonly [{
+            readonly opacity: 0.25;
+        }, {}, {}];
+        readonly gestures: readonly [null, {
+            readonly duration: 1;
+            readonly repeatAfter: 1.6;
+            readonly loop: true;
+            readonly frames: readonly [{
+                readonly at: 0;
+                readonly opacity: -0.7;
+            }, {
+                readonly at: 0.4;
+            }, {
+                readonly at: 1;
+                readonly opacity: -0.7;
+            }];
+        }, null];
+    }, {
+        readonly name: "far";
+        readonly paths: readonly ["M19.075 4.933a10 10 0 0 1 0 14.134", "M4.925 19.067a10 10 0 0 1 0-14.134"];
+        readonly poses: readonly [{
+            readonly opacity: 0.25;
+        }, {}, {}];
+        readonly gestures: readonly [null, {
+            readonly duration: 1;
+            readonly repeatAfter: 1.6;
+            readonly loop: true;
+            readonly frames: readonly [{
+                readonly at: 0;
+                readonly opacity: -0.7;
+            }, {
+                readonly at: 0.4;
+                readonly opacity: -0.7;
+            }, {
+                readonly at: 0.7;
+            }, {
+                readonly at: 1;
+                readonly opacity: -0.7;
+            }];
+        }, null];
+    }];
+};

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

@@ -0,0 +1,83 @@
+export const radioStates = ['off', 'tuning', 'live'];
+// Live audio connection. Signal bands pulse outward around a fixed core; live reception holds all bands.
+// Adapted Lucide geometry; see THIRD_PARTY_NOTICES.md.
+export const radioArt = {
+    name: 'radio',
+    parts: [
+        {
+            name: 'core',
+            paths: ['M10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'],
+            poses: [{}, {}, {}],
+        },
+        {
+            name: 'near',
+            paths: ['M16.247 7.761a6 6 0 0 1 0 8.478', 'M7.753 16.239a6 6 0 0 1 0-8.478'],
+            poses: [
+                {
+                    opacity: 0.25,
+                },
+                {},
+                {},
+            ],
+            gestures: [
+                null,
+                {
+                    duration: 1,
+                    repeatAfter: 1.6,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                            opacity: -0.7,
+                        },
+                        {
+                            at: 0.4,
+                        },
+                        {
+                            at: 1,
+                            opacity: -0.7,
+                        },
+                    ],
+                },
+                null,
+            ],
+        },
+        {
+            name: 'far',
+            paths: ['M19.075 4.933a10 10 0 0 1 0 14.134', 'M4.925 19.067a10 10 0 0 1 0-14.134'],
+            poses: [
+                {
+                    opacity: 0.25,
+                },
+                {},
+                {},
+            ],
+            gestures: [
+                null,
+                {
+                    duration: 1,
+                    repeatAfter: 1.6,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                            opacity: -0.7,
+                        },
+                        {
+                            at: 0.4,
+                            opacity: -0.7,
+                        },
+                        {
+                            at: 0.7,
+                        },
+                        {
+                            at: 1,
+                            opacity: -0.7,
+                        },
+                    ],
+                },
+                null,
+            ],
+        },
+    ],
+};

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type ReceiptState } from "./receipt-rig.js";
+export { receiptStates, type ReceiptState } from "./receipt-rig.js";
+export type ReceiptIconProps = StatefulIconProps<ReceiptState>;
+export declare const ReceiptIcon: import("react").NamedExoticComponent<ReceiptIconProps>;

package/dist/icons/receipt/receipt-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 { receiptArt, receiptStates } from "./receipt-rig.js";
+export { receiptStates } from "./receipt-rig.js";
+export const ReceiptIcon = memo(function ReceiptIcon(props) {
+    return _jsx(ArticulatedIcon, { art: receiptArt, states: receiptStates, ...props });
+});

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

@@ -0,0 +1,65 @@
+export declare const receiptStates: readonly ["idle", "issuing", "issued"];
+export type ReceiptState = (typeof receiptStates)[number];
+export declare const receiptArt: {
+    readonly name: "receipt";
+    readonly parts: readonly [{
+        readonly name: "paper";
+        readonly paths: readonly ["M4 3 A1 1 0 0 1 5 2 A1.3 1.3 0 0 1 5.7 2.2 L6.633 2.8 A1.3 1.3 0 0 0 8.033 2.8 L8.967 2.2 A1.3 1.3 0 0 1 10.367 2.2 L11.3 2.8 A1.3 1.3 0 0 0 12.7 2.8 L13.633 2.2 A1.3 1.3 0 0 1 15.033 2.2 L15.967 2.8 A1.3 1.3 0 0 0 17.367 2.8 L18.3 2.2 A1.3 1.3 0 0 1 19 2 A1 1 0 0 1 20 3 V21 A1 1 0 0 1 19 22 A1.3 1.3 0 0 1 18.3 21.8 L17.367 21.2 A1.3 1.3 0 0 0 15.967 21.2 L15.033 21.8 A1.3 1.3 0 0 1 13.633 21.8 L12.7 21.2 A1.3 1.3 0 0 0 11.3 21.2 L10.367 21.8 A1.3 1.3 0 0 1 8.967 21.8 L8.033 21.2 A1.3 1.3 0 0 0 6.633 21.2 L5.7 21.8 A1.3 1.3 0 0 1 5 22 A1 1 0 0 1 4 21 Z"];
+        readonly poses: readonly [{}, {}, {}];
+        readonly pathOffsets: readonly [readonly [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -3.24, 0, 0, 0, 0, 0, 0, -3.42, 0, 0, 0, 0, 0, 0, -3.384, 0, -3.276, 0, 0, 0, 0, 0, 0, -3.276, 0, -3.384, 0, 0, 0, 0, 0, 0, -3.384, 0, -3.276, 0, 0, 0, 0, 0, 0, -3.276, 0, -3.384, 0, 0, 0, 0, 0, 0, -3.384, 0, -3.276, 0, 0, 0, 0, 0, 0, -3.276, 0, -3.384, 0, 0, 0, 0, 0, 0, -3.42, 0, 0, 0, 0, 0, 0, -3.24]];
+        readonly gestures: readonly [null, {
+            readonly duration: 0.8;
+            readonly repeatAfter: 1.5;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+                readonly flex: 1;
+            }, {
+                readonly at: 0.15;
+                readonly flex: 1;
+            }, {
+                readonly at: 0.85;
+            }, {
+                readonly at: 1;
+            }];
+        }, null];
+    }, {
+        readonly name: "amount";
+        readonly paths: readonly ["M12 17V7", "M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8"];
+        readonly poses: readonly [{
+            readonly opacity: 0.35;
+        }, {
+            readonly opacity: 0.65;
+        }, {}];
+        readonly traceLength: 32;
+        readonly gestures: readonly [null, {
+            readonly duration: 0.8;
+            readonly repeatAfter: 1.5;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+                readonly draw: -1;
+            }, {
+                readonly at: 0.22;
+                readonly draw: -1;
+            }, {
+                readonly at: 0.92;
+            }, {
+                readonly at: 1;
+            }];
+        }, {
+            readonly duration: 0.65;
+            readonly repeatAfter: 1.5;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+                readonly draw: -1;
+            }, {
+                readonly at: 0.8;
+            }, {
+                readonly at: 1;
+            }];
+        }];
+        readonly detail: true;
+    }];
+};

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

@@ -0,0 +1,110 @@
+export const receiptStates = ['idle', 'issuing', 'issued'];
+// The bottom paper edge feeds down from a fixed top; the amount prints into the paper during the feed.
+// Adapted Lucide geometry; see THIRD_PARTY_NOTICES.md.
+export const receiptArt = {
+    name: 'receipt',
+    parts: [
+        {
+            name: 'paper',
+            paths: [
+                'M4 3 A1 1 0 0 1 5 2 A1.3 1.3 0 0 1 5.7 2.2 L6.633 2.8 A1.3 1.3 0 0 0 8.033 2.8 L8.967 2.2 A1.3 1.3 0 0 1 10.367 2.2 L11.3 2.8 A1.3 1.3 0 0 0 12.7 2.8 L13.633 2.2 A1.3 1.3 0 0 1 15.033 2.2 L15.967 2.8 A1.3 1.3 0 0 0 17.367 2.8 L18.3 2.2 A1.3 1.3 0 0 1 19 2 A1 1 0 0 1 20 3 V21 A1 1 0 0 1 19 22 A1.3 1.3 0 0 1 18.3 21.8 L17.367 21.2 A1.3 1.3 0 0 0 15.967 21.2 L15.033 21.8 A1.3 1.3 0 0 1 13.633 21.8 L12.7 21.2 A1.3 1.3 0 0 0 11.3 21.2 L10.367 21.8 A1.3 1.3 0 0 1 8.967 21.8 L8.033 21.2 A1.3 1.3 0 0 0 6.633 21.2 L5.7 21.8 A1.3 1.3 0 0 1 5 22 A1 1 0 0 1 4 21 Z',
+            ],
+            poses: [{}, {}, {}],
+            pathOffsets: [
+                [
+                    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
+                    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
+                    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
+                    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
+                    0.0, 0.0, 0.0, 0.0, 0.0, -3.24, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -3.42, 0.0, 0.0, 0.0, 0.0,
+                    0.0, 0.0, -3.384, 0.0, -3.276, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -3.276, 0.0, -3.384, 0.0,
+                    0.0, 0.0, 0.0, 0.0, 0.0, -3.384, 0.0, -3.276, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -3.276, 0.0,
+                    -3.384, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -3.384, 0.0, -3.276, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
+                    -3.276, 0.0, -3.384, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -3.42, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
+                    -3.24,
+                ],
+            ],
+            gestures: [
+                null,
+                {
+                    duration: 0.8,
+                    repeatAfter: 1.5,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                            flex: 1,
+                        },
+                        {
+                            at: 0.15,
+                            flex: 1,
+                        },
+                        {
+                            at: 0.85,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                null,
+            ],
+        },
+        {
+            name: 'amount',
+            paths: ['M12 17V7', 'M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8'],
+            poses: [
+                {
+                    opacity: 0.35,
+                },
+                {
+                    opacity: 0.65,
+                },
+                {},
+            ],
+            traceLength: 32,
+            gestures: [
+                null,
+                {
+                    duration: 0.8,
+                    repeatAfter: 1.5,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                            draw: -1,
+                        },
+                        {
+                            at: 0.22,
+                            draw: -1,
+                        },
+                        {
+                            at: 0.92,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                {
+                    duration: 0.65,
+                    repeatAfter: 1.5,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                            draw: -1,
+                        },
+                        {
+                            at: 0.8,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+            ],
+            detail: true,
+        },
+    ],
+};

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type RedoState } from "./redo-rig.js";
+export { redoStates, type RedoState } from "./redo-rig.js";
+export type RedoIconProps = StatefulIconProps<RedoState>;
+export declare const RedoIcon: import("react").NamedExoticComponent<RedoIconProps>;

package/dist/icons/redo/redo-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 { redoArt, redoStates } from "./redo-rig.js";
+export { redoStates } from "./redo-rig.js";
+export const RedoIcon = memo(function RedoIcon(props) {
+    return _jsx(ArticulatedIcon, { art: redoArt, states: redoStates, ...props });
+});

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

@@ -0,0 +1,28 @@
+export declare const redoStates: readonly ["idle", "redoing", "unavailable"];
+export type RedoState = (typeof redoStates)[number];
+export declare const redoArt: {
+    readonly name: "redo";
+    readonly parts: readonly [{
+        readonly name: "return-arrow";
+        readonly paths: readonly ["M15 14 L20 9 L15 4", "M20 9 L9.5 9 C6.462 9 4 11.462 4 14.5 C4 17.538 6.462 20 9.5 20 L13 20"];
+        readonly pathOffsets: readonly [readonly [1.2, 0, 1.2, 0, 1.2, 0], readonly [1.2, 0, 0, 0, 0, 0, 1, -0.5, 1, -1, 1, -1.5, 0.5, -2, 0, -2, -3, -2]];
+        readonly poses: readonly [{}, {}, {
+            readonly opacity: 0.32;
+        }];
+        readonly gestures: readonly [null, {
+            readonly duration: 0.8;
+            readonly repeatAfter: 1.6;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+            }, {
+                readonly at: 0.34;
+                readonly flex: 1;
+            }, {
+                readonly at: 0.8;
+            }, {
+                readonly at: 1;
+            }];
+        }, null];
+    }];
+};

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

@@ -0,0 +1,53 @@
+export const redoStates = ['idle', 'redoing', 'unavailable'];
+// The matching history arrow pulls right while its connected return curve takes up slack; one recoil settles. Undo and redo intentionally remain a mirrored pair.
+// Adapted Lucide geometry; see THIRD_PARTY_NOTICES.md.
+export const redoArt = {
+    name: 'redo',
+    parts: [
+        {
+            name: 'return-arrow',
+            paths: [
+                'M15 14 L20 9 L15 4',
+                'M20 9 L9.5 9 C6.462 9 4 11.462 4 14.5 C4 17.538 6.462 20 9.5 20 L13 20',
+            ],
+            pathOffsets: [
+                [1.2, 0.0, 1.2, 0.0, 1.2, 0.0],
+                [
+                    1.2, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, -0.5, 1.0, -1.0, 1.0, -1.5, 0.5, -2.0, 0.0, -2.0, -3.0,
+                    -2.0,
+                ],
+            ],
+            poses: [
+                {},
+                {},
+                {
+                    opacity: 0.32,
+                },
+            ],
+            gestures: [
+                null,
+                {
+                    duration: 0.8,
+                    repeatAfter: 1.6,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.34,
+                            flex: 1,
+                        },
+                        {
+                            at: 0.8,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                null,
+            ],
+        },
+    ],
+};

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

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type RepeatState } from "./repeat-rig.js";
+export { repeatStates, type RepeatState } from "./repeat-rig.js";
+export type RepeatIconProps = StatefulIconProps<RepeatState>;
+export declare const RepeatIcon: import("react").NamedExoticComponent<RepeatIconProps>;

package/dist/icons/repeat/repeat-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 { repeatArt, repeatStates } from "./repeat-rig.js";
+export { repeatStates } from "./repeat-rig.js";
+export const RepeatIcon = memo(function RepeatIcon(props) {
+    return _jsx(ArticulatedIcon, { art: repeatArt, states: repeatStates, ...props });
+});

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

@@ -0,0 +1,35 @@
+export declare const repeatStates: readonly ["off", "all", "one"];
+export type RepeatState = (typeof repeatStates)[number];
+export declare const repeatArt: {
+    readonly name: "repeat";
+    readonly parts: readonly [{
+        readonly name: "loop";
+        readonly paths: readonly ["m17 2 4 4-4 4", "M3 11v-1a4 4 0 0 1 4-4h14", "m7 22-4-4 4-4", "M21 13v1a4 4 0 0 1-4 4H3"];
+        readonly poses: readonly [{
+            readonly opacity: 0.45;
+        }, {}, {}];
+        readonly traceLength: 30;
+        readonly gestures: readonly [null, {
+            readonly duration: 0.65;
+            readonly repeatAfter: 1.5;
+            readonly loop: false;
+            readonly frames: readonly [{
+                readonly at: 0;
+                readonly draw: -1;
+            }, {
+                readonly at: 0.8;
+            }, {
+                readonly at: 1;
+            }];
+        }, null];
+    }, {
+        readonly name: "one";
+        readonly paths: readonly ["M10 11l2-2v6M10 15h4"];
+        readonly poses: readonly [{
+            readonly opacity: 0;
+        }, {
+            readonly opacity: 0;
+        }, {}];
+        readonly detail: true;
+    }];
+};

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

@@ -0,0 +1,60 @@
+export const repeatStates = ['off', 'all', 'one'];
+// Repeat mode selector. The loop traces once on activation; a central one distinguishes track repeat from playlist repeat.
+// Adapted Lucide geometry; see THIRD_PARTY_NOTICES.md.
+export const repeatArt = {
+    name: 'repeat',
+    parts: [
+        {
+            name: 'loop',
+            paths: [
+                'm17 2 4 4-4 4',
+                'M3 11v-1a4 4 0 0 1 4-4h14',
+                'm7 22-4-4 4-4',
+                'M21 13v1a4 4 0 0 1-4 4H3',
+            ],
+            poses: [
+                {
+                    opacity: 0.45,
+                },
+                {},
+                {},
+            ],
+            traceLength: 30,
+            gestures: [
+                null,
+                {
+                    duration: 0.65,
+                    repeatAfter: 1.5,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                            draw: -1,
+                        },
+                        {
+                            at: 0.8,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                null,
+            ],
+        },
+        {
+            name: 'one',
+            paths: ['M10 11l2-2v6M10 15h4'],
+            poses: [
+                {
+                    opacity: 0,
+                },
+                {
+                    opacity: 0,
+                },
+                {},
+            ],
+            detail: true,
+        },
+    ],
+};

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

@@ -4,22 +4,23 @@ 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 { REPLACE_SOURCE, REPLACE_TARGET, sampleReplace } from "./replace-rig.js";
+import { REPLACE_SOURCE, REPLACE_TARGET, REPLACE_ARROW_LENGTH, REPLACE_CHECK_LENGTH, sampleReplace, } from "./replace-rig.js";
 export { replaceStates } from "./replace-rig.js";
-const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
 export const ReplaceIcon = memo(function ReplaceIcon({ 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), replacing = usePoseWeight(state === 'replacing', pace, reduced), replaced = usePoseWeight(state === 'replaced', 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 replacing = usePoseWeight(state === 'replacing', pace, reduced), replaced = usePoseWeight(state === 'replaced', pace, reduced), error = usePoseWeight(state === 'error', pace, reduced);
+    const performs = alive && !reduced && state === 'replacing', life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
     const first = useRef(state !== 'replacing');
     const canRestart = useCallback(() => {
         const invisible = first.current || replacing.get() < 0.001;
         first.current = false;
         return invisible;
     }, [replacing]);
-    const entry = useActionProgress(state === 'replacing', pace, reduced, 1.4, canRestart);
-    const rig = useTransform(() => sampleReplace([idle.get(), replacing.get(), replaced.get(), error.get()], time.get(), life.get(), entry.get()));
-    const body = useTransform(rig, (r) => r.body), source = useTransform(rig, (r) => r.source), target = useTransform(rig, (r) => r.target), arrow = useTransform(rig, (r) => r.arrow), head = useTransform(rig, (r) => r.head), check = useTransform(rig, (r) => r.check), failure = useTransform(rig, (r) => r.error), status = useTransform(rig, (r) => r.status);
-    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: _jsxs(motion.g, { "data-layer": "replace-body", transform: body, style: ORIGIN, children: [_jsx(motion.g, { "data-layer": "replace-source", transform: source, style: ORIGIN, children: _jsx("path", { "data-part": "source", d: REPLACE_SOURCE, stroke: color, strokeWidth: strokeWidth }) }), _jsxs(motion.g, { "data-layer": "replace-target", transform: target, style: ORIGIN, children: [_jsx("path", { "data-part": "target", d: REPLACE_TARGET, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "replace-check", d: status, opacity: check, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.65, 0.8) }), _jsx(motion.path, { "data-layer": "replace-error", d: "M6.5 16.4v1.1M6.5 18.5h.01", opacity: failure, stroke: color, strokeWidth: Math.min(strokeWidth * 0.65, 0.8) })] }), _jsx(motion.path, { "data-layer": "replace-arrow", d: arrow, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "replace-head", d: head, stroke: color, strokeWidth: strokeWidth })] }) }));
+    const entry = useActionProgress(state === 'replacing', pace, reduced, 1.6, canRestart);
+    const canConfirm = useCallback(() => replaced.get() < 0.001, [replaced]);
+    const confirmation = useActionProgress(state === 'replaced', pace, reduced, 0.38, canConfirm);
+    const rig = useTransform(() => sampleReplace([0, replacing.get(), replaced.get(), error.get()], time.get(), life.get(), entry.get(), confirmation.get()));
+    const arrow = useTransform(rig, (r) => r.arrow), head = useTransform(rig, (r) => r.head), check = useTransform(rig, (r) => r.check), failure = useTransform(rig, (r) => r.error), status = useTransform(rig, (r) => r.status), arrowOffset = useTransform(rig, (r) => r.arrowOffset), arrowOpacity = useTransform(rig, (r) => r.arrowOpacity), headOpacity = useTransform(rig, (r) => r.headOpacity), checkOffset = useTransform(rig, (r) => r.checkOffset);
+    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: _jsxs("g", { "data-layer": "replace-body", transform: "translate(12 12) scale(0.84) translate(-12 -12)", children: [_jsx("g", { "data-layer": "replace-source", children: _jsx("path", { "data-part": "source", d: REPLACE_SOURCE, stroke: color, strokeWidth: strokeWidth }) }), _jsxs("g", { "data-layer": "replace-target", children: [_jsx("path", { "data-part": "target", d: REPLACE_TARGET, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "replace-check", d: status, opacity: check, strokeDasharray: REPLACE_CHECK_LENGTH, strokeDashoffset: checkOffset, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.72, 1.05) }), _jsx(motion.path, { "data-layer": "replace-error", d: "M6.5 16v1.7M6.5 19h.01", opacity: failure, stroke: color, strokeWidth: Math.min(strokeWidth * 0.72, 1.05) })] }), _jsx(motion.path, { "data-layer": "replace-arrow", d: arrow, opacity: arrowOpacity, strokeDasharray: REPLACE_ARROW_LENGTH, strokeDashoffset: arrowOffset, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "replace-head", d: head, opacity: headOpacity, stroke: color, strokeWidth: strokeWidth })] }) }));
 });

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

@@ -2,13 +2,19 @@ export declare const replaceStates: readonly ["idle", "replacing", "replaced", "
 export type ReplaceState = (typeof replaceStates)[number];
 export declare const REPLACE_SOURCE = "M14 4a1 1 0 0 1 1-1M15 10a1 1 0 0 1-1-1M21 4a1 1 0 0 0-1-1M21 9a1 1 0 0 1-1 1";
 export declare const REPLACE_TARGET = "M4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z";
-export declare function sampleReplace(weights: readonly number[], time?: number, alive?: number, entry?: number): {
+export declare const REPLACE_ARROW_LENGTH: number;
+export declare const REPLACE_CHECK_LENGTH: number;
+export declare function sampleReplace(weights: readonly number[], time?: number, alive?: number, entry?: number, confirmation?: number): {
     body: string;
     source: string;
     target: string;
     arrow: string;
     head: string;
+    arrowOffset: number;
+    arrowOpacity: number;
+    headOpacity: number;
     check: number;
     error: number;
+    checkOffset: number;
     status: string;
 };