react-useanimations 3.0.0-beta.2 → 3.1.0

package/index.d.ts

@@ -1,356 +1,70 @@
-import React from 'react';
-import { AnimationConfigWithData } from 'lottie-web';
-
-declare const interactions: {
-    readonly activity: "loop";
-    readonly airplay: "loop";
-    readonly alertCircle: "loop";
-    readonly alertOctagon: "loop";
-    readonly alertTriangle: "loop";
-    readonly alignCenter: "click-replay";
-    readonly alignJustify: "click-replay";
-    readonly alignLeft: "click-replay";
-    readonly alignRight: "click-replay";
-    readonly anchor: "hover-replay";
-    readonly aperture: "hover-replay";
-    readonly archive: "hover";
-    readonly arrowDown: "loop";
-    readonly arrowDownCircle: "click-replay";
-    readonly arrowDownLeft: "hover-replay";
-    readonly arrowDownRight: "hover-replay";
-    readonly arrowLeft: "hover-replay";
-    readonly arrowLeftCircle: "click-replay";
-    readonly arrowRight: "hover-replay";
-    readonly arrowRightCircle: "click-replay";
-    readonly arrowUp: "loop";
-    readonly arrowUpCircle: "click-replay";
-    readonly arrowUpLeft: "hover-replay";
-    readonly arrowUpRight: "hover-replay";
-    readonly atSign: "hover-replay";
-    readonly award: "hover-replay";
-    readonly barChart: "hover-replay";
-    readonly barChart2: "hover-replay";
-    readonly battery: "hover-replay";
-    readonly batteryCharging: "hover-replay";
-    readonly behance: "hover-loop";
-    readonly bluetooth: "hover-replay";
-    readonly bold: "click-replay";
-    readonly book: "hover-replay";
-    readonly bookmark: "click-toggle";
-    readonly bookOpen: "hover-replay";
-    readonly box: "hover-replay";
-    readonly briefcase: "hover-replay";
-    readonly calendar: "hover";
-    readonly camera: "click-replay";
-    readonly cameraOff: "click-toggle";
-    readonly cast: "hover-replay";
-    readonly check: "click-replay";
-    readonly checkBox: "click-toggle";
-    readonly checkCircle: "click-replay";
-    readonly checkmark: "loop";
-    readonly chevronDown: "hover-replay";
-    readonly chevronLeft: "click-replay";
-    readonly chevronRight: "click-replay";
-    readonly chevronsDown: "hover-replay";
-    readonly chevronsLeft: "hover-replay";
-    readonly chevronsRight: "hover-replay";
-    readonly chevronsUp: "hover-replay";
-    readonly chevronUp: "hover-replay";
-    readonly chrome: "hover-replay";
-    readonly circle: "hover-replay";
-    readonly clipboard: "hover-replay";
-    readonly clock: "hover-replay";
-    readonly cloud: "hover-loop";
-    readonly cloudDrizzle: "hover-replay";
-    readonly cloudLightning: "hover-replay";
-    readonly cloudOff: "click-toggle";
-    readonly cloudRain: "hover-replay";
-    readonly cloudSnow: "hover-replay";
-    readonly code: "hover-replay";
-    readonly codepen: "hover-loop";
-    readonly codesandbox: "hover-replay";
-    readonly coffee: "hover-replay";
-    readonly columns: "hover-replay";
-    readonly command: "hover-replay";
-    readonly copy: "hover";
-    readonly cornerDownLeft: "hover-replay";
-    readonly cornerDownRight: "hover-replay";
-    readonly cornerLeftDown: "hover-replay";
-    readonly cornerLeftUp: "hover-replay";
-    readonly cornerRightDown: "hover-replay";
-    readonly cornerRightUp: "hover-replay";
-    readonly cornerUpLeft: "hover-replay";
-    readonly cornerUpRight: "hover-replay";
-    readonly cpu: "hover-replay";
-    readonly creditCard: "hover-replay";
-    readonly crop: "click-replay";
-    readonly crosshair: "hover-replay";
-    readonly database: "hover-replay";
-    readonly delete: "click-replay";
-    readonly disc: "hover-replay";
-    readonly divide: "hover-replay";
-    readonly divideCircle: "hover-replay";
-    readonly divideSquare: "hover-replay";
-    readonly dollarSign: "hover-replay";
-    readonly download: "click-replay";
-    readonly download2: "click-replay";
-    readonly downloadCloud: "click-replay";
-    readonly dribbble: "hover-loop";
-    readonly droplet: "hover-replay";
-    readonly edit: "hover";
-    readonly edit2: "click-replay";
-    readonly edit3: "click-replay";
-    readonly error: "loop";
-    readonly explore: "hover";
-    readonly externalLink: "hover-replay";
-    readonly facebook: "hover-loop";
-    readonly fastForward: "hover-replay";
-    readonly figma: "hover-replay";
-    readonly file: "hover-replay";
-    readonly fileMinus: "click-replay";
-    readonly filePlus: "click-replay";
-    readonly fileText: "hover-replay";
-    readonly film: "hover-replay";
-    readonly filter: "click-replay";
-    readonly flag: "hover-loop";
-    readonly folder: "hover";
-    readonly folderMinus: "click-replay";
-    readonly folderPlus: "click-replay";
-    readonly framer: "hover-replay";
-    readonly frown: "hover-replay";
-    readonly gift: "hover-replay";
-    readonly gitBranch: "hover-replay";
-    readonly gitCommit: "hover-replay";
-    readonly github: "hover-loop";
-    readonly gitlab: "hover-replay";
-    readonly gitMerge: "hover-replay";
-    readonly gitPullRequest: "hover-replay";
-    readonly globe: "hover-loop";
-    readonly grid: "hover-replay";
-    readonly hardDrive: "hover-replay";
-    readonly hash: "hover-replay";
-    readonly headphones: "hover-replay";
-    readonly heart: "click-toggle";
-    readonly heart2: "click-replay";
-    readonly help: "loop";
-    readonly hexagon: "hover-replay";
-    readonly home: "hover";
-    readonly image: "hover-replay";
-    readonly inbox: "hover-replay";
-    readonly infinity: "loop";
-    readonly info: "hover";
-    readonly instagram: "hover";
-    readonly italic: "click-replay";
-    readonly key: "hover-replay";
-    readonly layers: "hover-replay";
-    readonly layout: "hover-replay";
-    readonly lifeBuoy: "hover-replay";
-    readonly link: "click-replay";
-    readonly link2: "click-replay";
-    readonly linkedin: "hover-loop";
-    readonly list: "hover-replay";
-    readonly loading: "loop";
-    readonly loading2: "loop";
-    readonly loading3: "loop";
-    readonly loading4: "loop";
-    readonly lock: "click-toggle";
-    readonly logIn: "click-replay";
-    readonly logOut: "click-replay";
-    readonly mail: "hover";
-    readonly map: "hover-replay";
-    readonly mapPin: "hover-replay";
-    readonly maximize2: "hover-replay";
-    readonly maximizeMinimize: "click-toggle";
-    readonly maximizeMinimize2: "click-toggle";
-    readonly meh: "hover-replay";
-    readonly menu: "click-toggle";
-    readonly menu2: "click-toggle";
-    readonly menu3: "click-toggle";
-    readonly menu4: "click-toggle";
-    readonly messageCircle: "hover-replay";
-    readonly messageSquare: "hover-replay";
-    readonly micOff: "click-toggle";
-    readonly microphone: "click-toggle";
-    readonly microphone2: "click-toggle";
-    readonly minimize2: "hover-replay";
-    readonly minus: "click-replay";
-    readonly minusCircle: "click-replay";
-    readonly minusSquare: "click-replay";
-    readonly monitor: "hover-replay";
-    readonly moon: "hover-replay";
-    readonly moreHorizontal: "loop";
-    readonly moreVertical: "loop";
-    readonly mousePointer: "click-replay";
-    readonly move: "hover-replay";
-    readonly music: "hover-replay";
-    readonly navigation: "hover-replay";
-    readonly navigation2: "hover-replay";
-    readonly notification: "click-toggle";
-    readonly notification2: "click-toggle";
-    readonly notification3: "loop";
-    readonly notification4: "loop";
-    readonly octagon: "hover-replay";
-    readonly package: "hover-replay";
-    readonly paperclip: "hover-replay";
-    readonly penTool: "hover-replay";
-    readonly percent: "hover-replay";
-    readonly phone: "click-replay";
-    readonly phoneCall: "click-replay";
-    readonly phoneForwarded: "hover-replay";
-    readonly phoneIncoming: "hover-replay";
-    readonly phoneMissed: "hover-replay";
-    readonly phoneOff: "click-toggle";
-    readonly phoneOutgoing: "hover-replay";
-    readonly pieChart: "hover-replay";
-    readonly playPause: "click-toggle";
-    readonly playPauseCircle: "click-toggle";
-    readonly plusCircle: "click-replay";
-    readonly plusSquare: "click-replay";
-    readonly plusToX: "click-toggle";
-    readonly pocket: "hover-loop";
-    readonly power: "click-replay";
-    readonly printer: "click-replay";
-    readonly radio: "hover-replay";
-    readonly radioButton: "click-toggle";
-    readonly refresh: "click-replay";
-    readonly refresh2: "click-replay";
-    readonly refreshCcw: "click-replay";
-    readonly repeat: "click-replay";
-    readonly rewind: "hover-replay";
-    readonly rotateCcw: "click-replay";
-    readonly rotateCw: "click-replay";
-    readonly rss: "hover-replay";
-    readonly save: "click-replay";
-    readonly scissors: "click-replay";
-    readonly scrollDown: "loop";
-    readonly searchToX: "click-toggle";
-    readonly send: "click-replay";
-    readonly server: "hover-replay";
-    readonly settings: "hover";
-    readonly settings2: "click-toggle";
-    readonly share: "hover";
-    readonly shield: "hover-replay";
-    readonly shieldOff: "click-toggle";
-    readonly shoppingBag: "hover-replay";
-    readonly shoppingCart: "click-replay";
-    readonly shuffle: "click-replay";
-    readonly sidebar: "hover-replay";
-    readonly skipBack: "click-replay";
-    readonly skipForward: "click-replay";
-    readonly slack: "hover-replay";
-    readonly slash: "hover-replay";
-    readonly smartphone: "hover-replay";
-    readonly smile: "hover-replay";
-    readonly speaker: "hover-replay";
-    readonly square: "hover-replay";
-    readonly star: "click-toggle";
-    readonly stopCircle: "click-replay";
-    readonly sun: "hover-replay";
-    readonly sunrise: "hover-replay";
-    readonly sunset: "hover-replay";
-    readonly table: "hover-replay";
-    readonly tablet: "hover-replay";
-    readonly tag: "hover-replay";
-    readonly target: "hover-replay";
-    readonly terminal: "loop";
-    readonly thermometer: "hover-replay";
-    readonly thumbsDown: "click-replay";
-    readonly thumbUp: "click-toggle";
-    readonly toggle: "click-toggle";
-    readonly tool: "hover-replay";
-    readonly trash: "hover";
-    readonly trash2: "hover";
-    readonly trello: "hover-replay";
-    readonly trendingDown: "hover-replay";
-    readonly trendingUp: "hover-replay";
-    readonly triangle: "hover-replay";
-    readonly truck: "hover-replay";
-    readonly tv: "hover-replay";
-    readonly twitch: "hover-replay";
-    readonly twitter: "hover-loop";
-    readonly twitterX: "hover-replay";
-    readonly type: "click-replay";
-    readonly umbrella: "hover-replay";
-    readonly underline: "click-replay";
-    readonly upload: "click-replay";
-    readonly uploadCloud: "click-replay";
-    readonly user: "hover-replay";
-    readonly userCheck: "click-replay";
-    readonly userMinus: "hover";
-    readonly userPlus: "hover";
-    readonly users: "hover-replay";
-    readonly userX: "hover";
-    readonly video: "click-toggle";
-    readonly video2: "click-toggle";
-    readonly videoOff: "click-toggle";
-    readonly visibility: "click-toggle";
-    readonly visibility2: "click-toggle";
-    readonly visibility3: "click-toggle";
-    readonly voicemail: "hover-replay";
-    readonly volume: "click-toggle";
-    readonly watch: "hover-replay";
-    readonly wifi: "hover-replay";
-    readonly wifiOff: "click-toggle";
-    readonly wind: "hover-replay";
-    readonly xOctagon: "click-replay";
-    readonly xSquare: "click-replay";
-    readonly youtube: "hover";
-    readonly youtube2: "hover";
-    readonly zap: "hover-replay";
-    readonly zapOff: "click-toggle";
-    readonly zoomIn: "hover";
-    readonly zoomOut: "hover";
-};
-type AnimationKey = keyof typeof interactions;
 
+import * as React from "react";
+//#region src/types.d.ts
 /**
  * How an icon reacts to the user, matching the `interaction` field of the useAnimations catalog.
+ * When reduced motion is preferred, icons stay still or jump straight to their new state.
  * - `loop`: plays continuously.
  * - `click-toggle`: toggles between two states on click (forward, then backward).
  * - `click-replay`: replays from the start on every click.
  * - `hover`: plays forward on mouse enter and backward on mouse leave.
- * - `hover-loop`: loops while hovered and stops on mouse leave.
+ * - `hover-loop`: loops while hovered and finishes the current cycle on mouse leave.
  * - `hover-replay`: plays once from the start on mouse enter.
  */
-type Interaction = 'loop' | 'click-toggle' | 'click-replay' | 'hover' | 'hover-loop' | 'hover-replay';
+type Interaction = "loop" | "click-toggle" | "click-replay" | "hover" | "hover-loop" | "hover-replay";
+/** An icon imported from `react-useanimations/lib/<name>`, or your own Lottie animation. */
 type Animation = {
-    animationData: unknown;
-    animationKey: AnimationKey;
+  /** Lottie JSON of the animation. */
+  animationData: object;
+  /** How the animation plays unless the `interaction` prop overrides it. Defaults to `'click-replay'`. */
+  interaction?: Interaction;
 };
-
-type MouseHandler = (event: React.MouseEvent<HTMLElement>) => void;
-type EventProps = {
-    onClick: MouseHandler;
-    onMouseEnter: MouseHandler;
-    onMouseLeave: MouseHandler;
+//#endregion
+//#region src/icons.d.ts
+/** Name of an icon in `react-useanimations/lib/<name>`. */
+type AnimationKey = "activity" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "anchor" | "aperture" | "archive" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowLeft" | "arrowLeftCircle" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "award" | "barChart" | "barChart2" | "battery" | "batteryCharging" | "behance" | "bluetooth" | "bold" | "book" | "bookmark" | "bookOpen" | "box" | "briefcase" | "calendar" | "camera" | "cameraOff" | "cast" | "check" | "checkBox" | "checkCircle" | "checkmark" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "chevronUp" | "chrome" | "circle" | "clipboard" | "clock" | "cloud" | "cloudDrizzle" | "cloudLightning" | "cloudOff" | "cloudRain" | "cloudSnow" | "code" | "codepen" | "codesandbox" | "coffee" | "columns" | "command" | "copy" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "crop" | "crosshair" | "database" | "delete" | "disc" | "discord" | "divide" | "divideCircle" | "divideSquare" | "dollarSign" | "download" | "download2" | "downloadCloud" | "dribbble" | "droplet" | "edit" | "edit2" | "edit3" | "error" | "explore" | "externalLink" | "facebook" | "fastForward" | "figma" | "file" | "fileMinus" | "filePlus" | "fileText" | "film" | "filter" | "flag" | "folder" | "folderMinus" | "folderPlus" | "framer" | "frown" | "gift" | "gitBranch" | "gitCommit" | "github" | "gitlab" | "gitMerge" | "gitPullRequest" | "globe" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "heart2" | "help" | "hexagon" | "home" | "image" | "inbox" | "infinity" | "info" | "instagram" | "italic" | "key" | "layers" | "layout" | "lifeBuoy" | "link" | "link2" | "linkedin" | "list" | "loading" | "loading2" | "loading3" | "loading4" | "lock" | "logIn" | "logOut" | "mail" | "map" | "mapPin" | "maximize2" | "maximizeMinimize" | "maximizeMinimize2" | "meh" | "menu" | "menu2" | "menu3" | "menu4" | "messageCircle" | "messageSquare" | "micOff" | "microphone" | "microphone2" | "minimize2" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "mousePointer" | "move" | "music" | "navigation" | "navigation2" | "notification" | "notification2" | "notification3" | "notification4" | "octagon" | "package" | "paperclip" | "penTool" | "percent" | "phone" | "phoneCall" | "phoneForwarded" | "phoneIncoming" | "phoneMissed" | "phoneOff" | "phoneOutgoing" | "pieChart" | "playPause" | "playPauseCircle" | "plusCircle" | "plusSquare" | "plusToX" | "pocket" | "power" | "printer" | "radio" | "radioButton" | "refresh" | "refresh2" | "refreshCcw" | "repeat" | "rewind" | "rotateCcw" | "rotateCw" | "rss" | "save" | "scissors" | "scrollDown" | "searchToX" | "send" | "server" | "settings" | "settings2" | "share" | "shield" | "shieldOff" | "shoppingBag" | "shoppingCart" | "shuffle" | "sidebar" | "skipBack" | "skipForward" | "slack" | "slash" | "smartphone" | "smile" | "speaker" | "square" | "star" | "stopCircle" | "sun" | "sunrise" | "sunset" | "table" | "tablet" | "tag" | "target" | "telegram" | "terminal" | "thermometer" | "thumbsDown" | "thumbUp" | "toggle" | "tool" | "trash" | "trash2" | "trello" | "trendingDown" | "trendingUp" | "triangle" | "truck" | "tv" | "twitch" | "twitter" | "twitterX" | "type" | "umbrella" | "underline" | "upload" | "uploadCloud" | "user" | "userCheck" | "userMinus" | "userPlus" | "users" | "userX" | "video" | "video2" | "videoOff" | "visibility" | "visibility2" | "visibility3" | "voicemail" | "volume" | "watch" | "wifi" | "wifiOff" | "wind" | "xOctagon" | "xSquare" | "youtube" | "youtube2" | "zap" | "zapOff" | "zoomIn" | "zoomOut";
+//#endregion
+//#region src/index.d.ts
+export type EventProps = {
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
+  onPointerEnter: (event: React.PointerEvent<HTMLElement>) => void;
+  onFocus: (event: React.FocusEvent<HTMLElement>) => void;
+  onBlur: (event: React.FocusEvent<HTMLElement>) => void;
 };
-type AnimationProps = React.HTMLAttributes<HTMLDivElement> & {
-    ref: React.Ref<HTMLDivElement>;
-    style: React.CSSProperties;
+export type AnimationProps = React.HTMLAttributes<HTMLElement> & {
+  "data-useanimations": "";
+  ref: (element: HTMLElement | null) => void;
+  style: React.CSSProperties;
 };
 type OwnProps = {
-    /** Animation imported from `react-useanimations/lib/<name>`. */
-    animation: Animation;
-    /** Overrides the icon's default interaction, e.g. `'hover'` for an icon that normally plays on click. */
-    interaction?: Interaction;
-    /** For `click-toggle` icons: `true` shows the end state (e.g. a checked checkbox). Can be controlled. */
-    reverse?: boolean;
-    strokeColor?: string;
-    fillColor?: string;
-    /** Extra CSS declarations applied to every path of the icon. */
-    pathCss?: string;
-    /** Extra lottie-web options, applied when the animation loads. */
-    options?: Partial<AnimationConfigWithData<'svg'>>;
-    size?: number;
-    loop?: boolean | number;
-    autoplay?: boolean;
-    speed?: number;
-    wrapperStyle?: React.CSSProperties;
-    /** Renders a custom wrapper: spread `eventProps` on the interactive element, `animationProps` on a div. */
-    render?: (eventProps: EventProps, animationProps: AnimationProps) => React.ReactElement;
+  /** Icon imported from `react-useanimations/lib/<name>`, or `{ animationData, interaction }` for your own Lottie JSON. */
+  animation: Animation;
+  /** Overrides the icon's default interaction, e.g. `'hover'` for an icon that normally plays on click. */
+  interaction?: Interaction;
+  /** For `click-toggle` icons: `true` shows the end state (e.g. a checked checkbox). Controlled: set it in `onClick`. */
+  active?: boolean;
+  /** @deprecated Use `active`. */
+  reverse?: boolean;
+  /** Width and height; numbers are pixels. Default `24`. */
+  size?: number | string;
+  /** Color of the icon's strokes. Default `'currentColor'`, so the icon follows the text color. */
+  strokeColor?: string;
+  /** Color of the icon's filled parts (e.g. a liked heart). Defaults to `strokeColor`. */
+  fillColor?: string;
+  /** Playback speed; `1` is normal speed. */
+  speed?: number;
+  /** Defaults to `true` for `loop` and `hover-loop` icons. */
+  loop?: boolean | number;
+  /** Defaults to `true` for `loop` icons, unless reduced motion is preferred. */
+  autoplay?: boolean;
+  /** @deprecated Use `style`. */
+  wrapperStyle?: React.CSSProperties;
+  /** Renders a custom wrapper: spread `eventProps` on the interactive element, `animationProps` on a span inside it. */
+  render?: (eventProps: EventProps, animationProps: AnimationProps) => React.ReactElement;
 };
-type UseAnimationsProps = OwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof OwnProps>;
-
+export type UseAnimationsProps = OwnProps & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof OwnProps>;
 declare const UseAnimations: (props: UseAnimationsProps) => React.ReactElement;
-
-export { type Animation, type AnimationKey, type AnimationProps, type EventProps, type Interaction, type UseAnimationsProps, UseAnimations as default };
+//#endregion
+export { type Animation, type AnimationKey, type Interaction, UseAnimations as UseAnimation, UseAnimations, UseAnimations as default, type UseAnimationsProps as UseAnimationProps };