weasel-icons 0.2.0 → 0.4.0

package/dist/index.js

@@ -27,3 +27,131 @@ export { BadgeCheckIcon, badgeCheckStates, } from "./icons/badge-check/badge-che
 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";
+export { HomeIcon, homeStates } from "./icons/home/home-icon.js";
+export { MenuIcon, menuStates } from "./icons/menu/menu-icon.js";
+export { PlusIcon, plusStates } from "./icons/plus/plus-icon.js";
+export { MinusIcon, minusStates, } from "./icons/minus/minus-icon.js";
+export { ChevronDownIcon, chevronDownStates, } from "./icons/chevron-down/chevron-down-icon.js";
+export { ChevronRightIcon, chevronRightStates, } from "./icons/chevron-right/chevron-right-icon.js";
+export { ChevronLeftIcon, chevronLeftStates, } from "./icons/chevron-left/chevron-left-icon.js";
+export { ChevronUpIcon, chevronUpStates, } from "./icons/chevron-up/chevron-up-icon.js";
+export { ArrowRightIcon, arrowRightStates, } from "./icons/arrow-right/arrow-right-icon.js";
+export { ArrowLeftIcon, arrowLeftStates, } from "./icons/arrow-left/arrow-left-icon.js";
+export { ArrowUpIcon, arrowUpStates, } from "./icons/arrow-up/arrow-up-icon.js";
+export { ArrowDownIcon, arrowDownStates, } from "./icons/arrow-down/arrow-down-icon.js";
+export { ExternalLinkIcon, externalLinkStates, } from "./icons/external-link/external-link-icon.js";
+export { MoreHorizontalIcon, moreHorizontalStates, } from "./icons/more-horizontal/more-horizontal-icon.js";
+export { MoreVerticalIcon, moreVerticalStates, } from "./icons/more-vertical/more-vertical-icon.js";
+export { UserIcon, userStates } from "./icons/user/user-icon.js";
+export { UsersIcon, usersStates, } from "./icons/users/users-icon.js";
+export { SettingsIcon, settingsStates, } from "./icons/settings/settings-icon.js";
+export { LogInIcon, logInStates, } from "./icons/log-in/log-in-icon.js";
+export { LogOutIcon, logOutStates, } from "./icons/log-out/log-out-icon.js";
+export { LockIcon, lockStates } from "./icons/lock/lock-icon.js";
+export { KeyIcon, keyStates } from "./icons/key/key-icon.js";
+export { InfoIcon, infoStates } from "./icons/info/info-icon.js";
+export { MailIcon, mailStates } from "./icons/mail/mail-icon.js";
+export { SendIcon, sendStates } from "./icons/send/send-icon.js";
+export { MessageCircleIcon, messageCircleStates, } from "./icons/message-circle/message-circle-icon.js";
+export { PhoneIcon, phoneStates, } from "./icons/phone/phone-icon.js";
+export { VideoIcon, videoStates, } from "./icons/video/video-icon.js";
+export { MicIcon, micStates } from "./icons/mic/mic-icon.js";
+export { PencilIcon, pencilStates, } from "./icons/pencil/pencil-icon.js";
+export { FileTextIcon, fileTextStates, } from "./icons/file-text/file-text-icon.js";
+export { FileIcon, fileStates } from "./icons/file/file-icon.js";
+export { FolderIcon, folderStates, } from "./icons/folder/folder-icon.js";
+export { SaveIcon, saveStates } from "./icons/save/save-icon.js";
+export { UploadIcon, uploadStates, } from "./icons/upload/upload-icon.js";
+export { ClipboardIcon, clipboardStates, } from "./icons/clipboard/clipboard-icon.js";
+export { BookmarkIcon, bookmarkStates, } from "./icons/bookmark/bookmark-icon.js";
+export { BookOpenIcon, bookOpenStates, } from "./icons/book-open/book-open-icon.js";
+export { ImageIcon, imageStates, } from "./icons/image/image-icon.js";
+export { CameraIcon, cameraStates, } from "./icons/camera/camera-icon.js";
+export { ShareIcon, shareStates, } from "./icons/share/share-icon.js";
+export { CalendarIcon, calendarStates, } from "./icons/calendar/calendar-icon.js";
+export { ClockIcon, clockStates, } from "./icons/clock/clock-icon.js";
+export { TimerIcon, timerStates, } from "./icons/timer/timer-icon.js";
+export { MapPinIcon, mapPinStates, } from "./icons/map-pin/map-pin-icon.js";
+export { GlobeIcon, globeStates, } from "./icons/globe/globe-icon.js";
+export { CircleHelpIcon, circleHelpStates, } from "./icons/circle-help/circle-help-icon.js";
+export { PlayIcon, playStates } from "./icons/play/play-icon.js";
+export { PauseIcon, pauseStates, } from "./icons/pause/pause-icon.js";
+export { VolumeIcon, volumeStates, } from "./icons/volume/volume-icon.js";
+export { MusicIcon, musicStates, } from "./icons/music/music-icon.js";
+export { SunIcon, sunStates } from "./icons/sun/sun-icon.js";
+export { ShoppingCartIcon, shoppingCartStates, } from "./icons/shopping-cart/shopping-cart-icon.js";
+export { ShoppingBagIcon, shoppingBagStates, } from "./icons/shopping-bag/shopping-bag-icon.js";
+export { CreditCardIcon, creditCardStates, } from "./icons/credit-card/credit-card-icon.js";
+export { WalletIcon, walletStates, } from "./icons/wallet/wallet-icon.js";
+export { PackageIcon, packageStates, } from "./icons/package/package-icon.js";
+export { TruckIcon, truckStates, } from "./icons/truck/truck-icon.js";
+export { FilterIcon, filterStates, } from "./icons/filter/filter-icon.js";
+export { SlidersIcon, slidersStates, } from "./icons/sliders/sliders-icon.js";
+export { LayoutGridIcon, layoutGridStates, } from "./icons/layout-grid/layout-grid-icon.js";
+export { LayoutDashboardIcon, layoutDashboardStates, } from "./icons/layout-dashboard/layout-dashboard-icon.js";
+export { ListIcon, listStates } from "./icons/list/list-icon.js";
+export { LayersIcon, layersStates, } from "./icons/layers/layers-icon.js";
+export { MaximizeIcon, maximizeStates, } from "./icons/maximize/maximize-icon.js";
+export { MinimizeIcon, minimizeStates, } from "./icons/minimize/minimize-icon.js";
+export { CodeIcon, codeStates } from "./icons/code/code-icon.js";
+export { TerminalIcon, terminalStates, } from "./icons/terminal/terminal-icon.js";
+export { DatabaseIcon, databaseStates, } from "./icons/database/database-icon.js";
+export { WifiIcon, wifiStates } from "./icons/wifi/wifi-icon.js";
+export { CloudIcon, cloudStates, } from "./icons/cloud/cloud-icon.js";
+export { MoonIcon, moonStates } from "./icons/moon/moon-icon.js";
+export { UndoIcon, undoStates } from "./icons/undo/undo-icon.js";
+export { RedoIcon, redoStates } from "./icons/redo/redo-icon.js";
+export { CropIcon, cropStates } from "./icons/crop/crop-icon.js";
+export { ScissorsIcon, scissorsStates, } from "./icons/scissors/scissors-icon.js";
+export { PaperclipIcon, paperclipStates, } from "./icons/paperclip/paperclip-icon.js";
+export { EraserIcon, eraserStates, } from "./icons/eraser/eraser-icon.js";
+export { BrushIcon, brushStates, } from "./icons/brush/brush-icon.js";
+export { HighlighterIcon, highlighterStates, } from "./icons/highlighter/highlighter-icon.js";
+export { PanelLeftIcon, panelLeftStates, } from "./icons/panel-left/panel-left-icon.js";
+export { PanelRightIcon, panelRightStates, } from "./icons/panel-right/panel-right-icon.js";
+export { ColumnsIcon, columnsStates, } from "./icons/columns/columns-icon.js";
+export { RowsIcon, rowsStates } from "./icons/rows/rows-icon.js";
+export { TableIcon, tableStates, } from "./icons/table/table-icon.js";
+export { KanbanIcon, kanbanStates, } from "./icons/kanban/kanban-icon.js";
+export { AppWindowIcon, appWindowStates, } from "./icons/app-window/app-window-icon.js";
+export { PictureInPictureIcon, pictureInPictureStates, } from "./icons/picture-in-picture/picture-in-picture-icon.js";
+export { FolderOpenIcon, folderOpenStates, } from "./icons/folder-open/folder-open-icon.js";
+export { FolderPlusIcon, folderPlusStates, } from "./icons/folder-plus/folder-plus-icon.js";
+export { FilePlusIcon, filePlusStates, } from "./icons/file-plus/file-plus-icon.js";
+export { FileCheckIcon, fileCheckStates, } from "./icons/file-check/file-check-icon.js";
+export { ArchiveIcon, archiveStates, } from "./icons/archive/archive-icon.js";
+export { InboxIcon, inboxStates, } from "./icons/inbox/inbox-icon.js";
+export { HardDriveIcon, hardDriveStates, } from "./icons/hard-drive/hard-drive-icon.js";
+export { PrinterIcon, printerStates, } from "./icons/printer/printer-icon.js";
+export { BluetoothIcon, bluetoothStates, } from "./icons/bluetooth/bluetooth-icon.js";
+export { CastIcon, castStates } from "./icons/cast/cast-icon.js";
+export { MonitorIcon, monitorStates, } from "./icons/monitor/monitor-icon.js";
+export { SmartphoneIcon, smartphoneStates, } from "./icons/smartphone/smartphone-icon.js";
+export { PowerIcon, powerStates, } from "./icons/power/power-icon.js";
+export { FingerprintIcon, fingerprintStates, } from "./icons/fingerprint/fingerprint-icon.js";
+export { ScanQrIcon, scanQrStates, } from "./icons/scan-qr/scan-qr-icon.js";
+export { ScanFaceIcon, scanFaceStates, } from "./icons/scan-face/scan-face-icon.js";
+export { SkipForwardIcon, skipForwardStates, } from "./icons/skip-forward/skip-forward-icon.js";
+export { SkipBackIcon, skipBackStates, } from "./icons/skip-back/skip-back-icon.js";
+export { RewindIcon, rewindStates, } from "./icons/rewind/rewind-icon.js";
+export { FastForwardIcon, fastForwardStates, } from "./icons/fast-forward/fast-forward-icon.js";
+export { RepeatIcon, repeatStates, } from "./icons/repeat/repeat-icon.js";
+export { ShuffleIcon, shuffleStates, } from "./icons/shuffle/shuffle-icon.js";
+export { HeadphonesIcon, headphonesStates, } from "./icons/headphones/headphones-icon.js";
+export { RadioIcon, radioStates, } from "./icons/radio/radio-icon.js";
+export { ThumbsUpIcon, thumbsUpStates, } from "./icons/thumbs-up/thumbs-up-icon.js";
+export { ThumbsDownIcon, thumbsDownStates, } from "./icons/thumbs-down/thumbs-down-icon.js";
+export { UserPlusIcon, userPlusStates, } from "./icons/user-plus/user-plus-icon.js";
+export { UserMinusIcon, userMinusStates, } from "./icons/user-minus/user-minus-icon.js";
+export { AtSignIcon, atSignStates, } from "./icons/at-sign/at-sign-icon.js";
+export { ReplyIcon, replyStates, } from "./icons/reply/reply-icon.js";
+export { ForwardIcon, forwardStates, } from "./icons/forward/forward-icon.js";
+export { FlagIcon, flagStates } from "./icons/flag/flag-icon.js";
+export { ChartBarIcon, chartBarStates, } from "./icons/chart-bar/chart-bar-icon.js";
+export { ChartLineIcon, chartLineStates, } from "./icons/chart-line/chart-line-icon.js";
+export { ChartPieIcon, chartPieStates, } from "./icons/chart-pie/chart-pie-icon.js";
+export { TrendingUpIcon, trendingUpStates, } from "./icons/trending-up/trending-up-icon.js";
+export { ReceiptIcon, receiptStates, } from "./icons/receipt/receipt-icon.js";
+export { TagIcon, tagStates } from "./icons/tag/tag-icon.js";
+export { GiftIcon, giftStates } from "./icons/gift/gift-icon.js";
+export { TicketIcon, ticketStates, } from "./icons/ticket/ticket-icon.js";

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

@@ -0,0 +1,7 @@
+import type { StatefulIconProps } from "./icon-types.js";
+import { type Articulation } from "./articulation.js";
+/** Shared binding, never a shared drawing or a generic whole-icon animation. */
+export declare function ArticulatedIcon<State extends string>({ art, states, state, size, color, accentColor, strokeWidth, speed, alive, className, }: StatefulIconProps<State> & {
+    art: Articulation;
+    states: readonly [State, State, State];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shared/articulated-icon.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useActionProgress, useBehaviorClock } from "./use-icon-motion.js";
+import { useMotionPreference } from "./use-motion-preference.js";
+import { sampleArticulation } from "./articulation.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+function PartPath({ part, index, pathIndex, rig, }) {
+    const d = useTransform(rig, (sample) => sample[index].paths[pathIndex]);
+    const offset = useTransform(rig, (sample) => (part.traceLength ?? 0) * (1 - sample[index].draw));
+    return (_jsx(motion.path, { d: d, fill: part.surface ? 'var(--weasel-surface, #fff)' : undefined, strokeDasharray: part.traceLength, strokeDashoffset: part.traceLength ? offset : undefined }));
+}
+function Part({ part, index, rig, name, accentColor, strokeWidth, }) {
+    const transform = useTransform(rig, (sample) => sample[index].transform);
+    const opacity = useTransform(rig, (sample) => sample[index].opacity);
+    return (_jsx(motion.g, { "data-layer": `${name}-${part.name}`, "data-part": part.name, transform: transform, opacity: opacity, style: ORIGIN, stroke: part.accent ? accentColor : undefined, strokeWidth: part.detail ? Math.min(strokeWidth * 0.8, 1.5) : undefined, children: part.paths.map((_, i) => (_jsx(PartPath, { part: part, index: index, pathIndex: i, rig: rig }, i))) }));
+}
+/** Shared binding, never a shared drawing or a generic whole-icon animation. */
+export function ArticulatedIcon({ art, states, state = states[0], size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const element = useRef(null);
+    const reduced = useMotionPreference();
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const w0 = usePoseWeight(state === states[0], pace, reduced);
+    const w1 = usePoseWeight(state === states[1], pace, reduced);
+    const w2 = usePoseWeight(state === states[2], pace, reduced);
+    const can0 = useCallback(() => w0.get() < 0.001, [w0]);
+    const can1 = useCallback(() => w1.get() < 0.001, [w1]);
+    const can2 = useCallback(() => w2.get() < 0.001, [w2]);
+    const duration = (index) => Math.max(0.8, ...art.parts.map((part) => part.gestures?.[index]?.duration ?? 0));
+    const e0 = useActionProgress(state === states[0] && art.parts.some((part) => Boolean(part.gestures?.[0])), pace, reduced, duration(0), can0);
+    const e1 = useActionProgress(state === states[1] && art.parts.some((part) => Boolean(part.gestures?.[1])), pace, reduced, duration(1), can1);
+    const e2 = useActionProgress(state === states[2] && art.parts.some((part) => Boolean(part.gestures?.[2])), pace, reduced, duration(2), can2);
+    const activeIndex = states.indexOf(state);
+    const performs = alive &&
+        !reduced &&
+        art.parts.some((part) => {
+            const gesture = part.gestures?.[activeIndex];
+            return (gesture && gesture.loop !== false) || part.spin?.state === activeIndex;
+        });
+    const life = usePoseWeight(performs, pace, reduced);
+    const time = useBehaviorClock(element, performs, pace, life, art.parts.some((part) => Boolean(part.spin)));
+    const rig = useTransform(() => sampleArticulation(art, [w0.get(), w1.get(), w2.get()], time.get(), life.get(), [
+        e0.get(),
+        e1.get(),
+        e2.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: _jsx("g", { "data-layer": `${art.name}-body`, transform: "translate(12 12) scale(.84) translate(-12 -12)", children: art.parts.map((part, index) => (_jsx(Part, { part: part, index: index, rig: rig, name: art.name, accentColor: accentColor, strokeWidth: strokeWidth }, part.name))) }) }));
+}

package/dist/shared/articulation.d.ts

@@ -0,0 +1,62 @@
+/** Numeric articulation only. Subjects, state meanings and artwork stay in their rigs. */
+export interface PartPose {
+    x?: number;
+    y?: number;
+    angle?: number;
+    scaleX?: number;
+    scaleY?: number;
+    opacity?: number;
+    draw?: number;
+    /** Local, authored path displacement; zero retains the accepted drawing. */
+    flex?: number;
+}
+export interface PartGesture {
+    /** Finite entry action; living repeats use the same action followed by a quiet interval. */
+    duration: number;
+    repeatAfter: number;
+    /** A shutter, landing or acknowledgement should play once even when alive stays true. */
+    loop?: boolean;
+    frames: readonly (PartPose & {
+        at: number;
+    })[];
+}
+export interface ArticulatedPart {
+    name: string;
+    paths: readonly string[];
+    /** Compatible command streams with corresponding landmarks; node count never changes. */
+    pathStates?: readonly (readonly string[])[];
+    /** Numeric-coordinate offsets for flex. Fixed landmarks use zero offsets. */
+    pathOffsets?: readonly (readonly number[])[];
+    pivot?: readonly [number, number];
+    /** One pose per public state, in the rig's declared order. */
+    poses: readonly PartPose[];
+    gestures?: readonly (PartGesture | null | undefined)[];
+    accent?: boolean;
+    /** Status details retain room inside a heavier structural outline. */
+    detail?: boolean;
+    surface?: boolean;
+    traceLength?: number;
+    /** Clock phase is retained on pause; it is never multiplied by the living fade. */
+    spin?: {
+        state: number;
+        degreesPerSecond: number;
+    };
+}
+export interface Articulation {
+    name: string;
+    parts: readonly ArticulatedPart[];
+}
+/** Keyframe offsets have zero velocity at authored landmarks and hold outside the action. */
+export declare function gesturePose(gesture: PartGesture, progress: number): PartPose;
+export declare function sampleArticulation(art: Articulation, input: readonly number[], time?: number, living?: number, entries?: readonly number[]): {
+    paths: readonly string[];
+    transform: string;
+    x: number;
+    y: number;
+    angle: number;
+    scaleX: number;
+    scaleY: number;
+    opacity: number;
+    draw: number;
+    flex: number;
+}[];

package/dist/shared/articulation.js

@@ -0,0 +1,85 @@
+const channels = ['x', 'y', 'angle', 'scaleX', 'scaleY', 'opacity', 'draw', 'flex'];
+const defaults = { x: 0, y: 0, angle: 0, scaleX: 1, scaleY: 1, opacity: 1, draw: 1, flex: 0 };
+const finite = (n) => (Number.isFinite(n) ? n : 0);
+const unit = (n) => Math.max(0, Math.min(1, finite(n)));
+const smooth = (n) => {
+    const t = unit(n);
+    return t * t * t * (10 + t * (-15 + 6 * t));
+};
+const morphs = new WeakMap();
+function partPaths(part, weights, flex) {
+    if (!part.pathStates && !part.pathOffsets)
+        return part.paths;
+    let compiled = morphs.get(part);
+    if (!compiled) {
+        const number = /[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/gi;
+        compiled = part.paths.map((_, index) => {
+            const paths = part.pathStates?.map((state) => state[index]) ?? part.poses.map(() => part.paths[index]);
+            const literals = paths[0].split(number);
+            const values = paths.map((path) => (path.match(number) ?? []).map(Number));
+            if (part.pathOffsets && part.pathOffsets[index]?.length !== values[0].length)
+                throw new Error(`Incompatible path offsets: ${part.name}`);
+            for (const path of paths) {
+                if (JSON.stringify(path.split(number)) !== JSON.stringify(literals))
+                    throw new Error(`Incompatible path topology: ${part.name}`);
+            }
+            return { literals, values };
+        });
+        morphs.set(part, compiled);
+    }
+    return compiled.map(({ literals, values }, pathIndex) => literals
+        .map((literal, index) => index === literals.length - 1
+        ? literal
+        : literal +
+            (values.reduce((sum, row, state) => sum + row[index] * (weights[state] ?? 0), 0) +
+                (part.pathOffsets?.[pathIndex]?.[index] ?? 0) * flex))
+        .join(''));
+}
+/** Keyframe offsets have zero velocity at authored landmarks and hold outside the action. */
+export function gesturePose(gesture, progress) {
+    const t = unit(progress);
+    const frames = gesture.frames;
+    const right = frames.findIndex((frame) => frame.at >= t);
+    if (right <= 0)
+        return frames[right < 0 ? frames.length - 1 : 0] ?? {};
+    const a = frames[right - 1], b = frames[right];
+    const blend = smooth((t - a.at) / (b.at - a.at));
+    return Object.fromEntries(channels.map((key) => [key, (a[key] ?? 0) + ((b[key] ?? 0) - (a[key] ?? 0)) * blend]));
+}
+export function sampleArticulation(art, input, time = 0, living = 0, entries = []) {
+    const positive = input.map(unit);
+    const sum = positive.reduce((a, b) => a + b, 0);
+    const weights = sum > 0 ? positive.map((n) => n / sum) : positive.map((_, i) => Number(i === 0));
+    const life = unit(living);
+    return art.parts.map((part) => {
+        const pose = { ...defaults, x: 0, y: 0, angle: 0, scaleX: 0, scaleY: 0, opacity: 0, draw: 0 };
+        part.poses.forEach((target, i) => {
+            const weight = weights[i] ?? 0;
+            if (weight === 0)
+                return;
+            const gesture = part.gestures?.[i];
+            const entry = gesture ? gesturePose(gesture, entries[i] ?? 1) : {};
+            // Phase is independent of the living fade. Turning alive off cannot rewind an action.
+            const loop = gesture
+                ? gesturePose(gesture, Math.min((Math.max(0, finite(time)) % gesture.repeatAfter) / gesture.duration, 1))
+                : {};
+            for (const key of channels) {
+                pose[key] +=
+                    weight *
+                        ((target[key] ?? defaults[key]) +
+                            (entry[key] ?? 0) * (gesture?.loop === false ? 1 : 1 - life) +
+                            (loop[key] ?? 0) * (gesture?.loop === false ? 0 : life));
+            }
+        });
+        pose.opacity = unit(pose.opacity);
+        pose.draw = unit(pose.draw);
+        if (part.spin)
+            pose.angle += Math.max(0, finite(time)) * part.spin.degreesPerSecond;
+        const [px, py] = part.pivot ?? [12, 12];
+        return {
+            ...pose,
+            paths: partPaths(part, weights, pose.flex),
+            transform: `translate(${pose.x}px, ${pose.y}px) translate(${px}px, ${py}px) rotate(${pose.angle}deg) scale(${pose.scaleX}, ${pose.scaleY}) translate(${-px}px, ${-py}px)`,
+        };
+    });
+}

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

@@ -22,6 +22,134 @@ export interface AlertColors {
     critical?: string;
 }
 export interface IconColors {
+    undo: never;
+    redo: never;
+    crop: never;
+    scissors: never;
+    paperclip: never;
+    eraser: never;
+    brush: never;
+    highlighter: never;
+    'panel-left': never;
+    'panel-right': never;
+    columns: never;
+    rows: never;
+    table: never;
+    kanban: never;
+    'app-window': never;
+    'picture-in-picture': never;
+    'folder-open': never;
+    'folder-plus': never;
+    'file-plus': never;
+    'file-check': never;
+    archive: never;
+    inbox: never;
+    'hard-drive': never;
+    printer: never;
+    bluetooth: never;
+    cast: never;
+    monitor: never;
+    smartphone: never;
+    power: never;
+    fingerprint: never;
+    'scan-qr': never;
+    'scan-face': never;
+    'skip-forward': never;
+    'skip-back': never;
+    rewind: never;
+    'fast-forward': never;
+    repeat: never;
+    shuffle: never;
+    headphones: never;
+    radio: never;
+    'thumbs-up': never;
+    'thumbs-down': never;
+    'user-plus': never;
+    'user-minus': never;
+    'at-sign': never;
+    reply: never;
+    forward: never;
+    flag: never;
+    'chart-bar': never;
+    'chart-line': never;
+    'chart-pie': never;
+    'trending-up': never;
+    receipt: never;
+    tag: never;
+    gift: never;
+    ticket: never;
+    bookmark: never;
+    'book-open': never;
+    image: never;
+    camera: never;
+    share: never;
+    calendar: never;
+    clock: never;
+    timer: never;
+    'map-pin': never;
+    globe: never;
+    'circle-help': never;
+    play: never;
+    pause: never;
+    volume: never;
+    music: never;
+    sun: never;
+    'shopping-cart': never;
+    'shopping-bag': never;
+    'credit-card': never;
+    wallet: never;
+    package: never;
+    truck: never;
+    filter: never;
+    sliders: never;
+    'layout-grid': never;
+    'layout-dashboard': never;
+    list: never;
+    layers: never;
+    maximize: never;
+    minimize: never;
+    code: never;
+    terminal: never;
+    database: never;
+    wifi: never;
+    cloud: never;
+    moon: never;
+    'log-in': never;
+    'log-out': never;
+    lock: never;
+    key: never;
+    info: never;
+    mail: never;
+    send: never;
+    'message-circle': never;
+    phone: never;
+    video: never;
+    mic: never;
+    pencil: never;
+    'file-text': never;
+    file: never;
+    folder: never;
+    save: never;
+    upload: never;
+    clipboard: never;
+    home: never;
+    menu: never;
+    plus: never;
+    minus: never;
+    'chevron-down': never;
+    'chevron-right': never;
+    'chevron-left': never;
+    'chevron-up': never;
+    'arrow-right': never;
+    'arrow-left': never;
+    'arrow-up': never;
+    'arrow-down': never;
+    'external-link': never;
+    'more-horizontal': never;
+    'more-vertical': never;
+    user: never;
+    users: never;
+    settings: never;
     refresh: never;
     copy: never;
     eye: never;

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

@@ -11,4 +11,4 @@ export declare function useActionProgress(active: boolean, pace: number, reduced
  * the correct animation cleanup; we forward source values through one listener.
  */
 export declare function useFollowPose(source: MotionValue<number>, pace: number, reduced: boolean): MotionValue<number>;
-export declare function useBehaviorClock(element: RefObject<SVGSVGElement | null>, enabled: boolean, pace: number, amount: MotionValue<number>): MotionValue<number>;
+export declare function useBehaviorClock(element: RefObject<SVGSVGElement | null>, enabled: boolean, pace: number, amount: MotionValue<number>, coastWithAmount?: boolean): MotionValue<number>;

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

@@ -75,7 +75,7 @@ export function useFollowPose(source, pace, reduced) {
     }, [source, value, options, reduced]);
     return value;
 }
-export function useBehaviorClock(element, enabled, pace, amount) {
+export function useBehaviorClock(element, enabled, pace, amount, coastWithAmount = false) {
     const time = useMotionValue(0);
     useEffect(() => {
         if (!element.current || (!enabled && amount.get() < 0.001))
@@ -83,7 +83,8 @@ export function useBehaviorClock(element, enabled, pace, amount) {
         const stop = subscribeBehavior(element.current, (delta) => {
             if (!enabled && amount.get() < 0.001)
                 return false;
-            time.set(time.get() + delta * pace);
+            const coast = coastWithAmount ? Math.max(0, Math.min(1, amount.get())) : 1;
+            time.set(time.get() + delta * pace * coast);
         });
         const unAmount = amount.on('change', (value) => {
             if (!enabled && value < 0.001)
@@ -93,6 +94,6 @@ export function useBehaviorClock(element, enabled, pace, amount) {
             stop();
             unAmount();
         };
-    }, [element, enabled, pace, amount, time]);
+    }, [element, enabled, pace, amount, time, coastWithAmount]);
     return time;
 }