react-useanimations 3.0.0-beta.1 → 3.0.0

package/index.d.mts

@@ -1,144 +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 archive: "hover";
-    readonly arrowDown: "loop";
-    readonly arrowDownCircle: "click-replay";
-    readonly arrowLeftCircle: "click-replay";
-    readonly arrowRightCircle: "click-replay";
-    readonly arrowUp: "loop";
-    readonly arrowUpCircle: "click-replay";
-    readonly behance: "hover-loop";
-    readonly bookmark: "click-toggle";
-    readonly calendar: "hover";
-    readonly checkBox: "click-toggle";
-    readonly checkmark: "loop";
-    readonly chevronLeft: "click-replay";
-    readonly chevronRight: "click-replay";
-    readonly codepen: "hover-loop";
-    readonly copy: "hover";
-    readonly download: "click-replay";
-    readonly dribbble: "hover-loop";
-    readonly edit: "hover";
-    readonly error: "loop";
-    readonly explore: "hover";
-    readonly facebook: "hover-loop";
-    readonly filter: "click-replay";
-    readonly folder: "hover";
-    readonly github: "hover-loop";
-    readonly heart: "click-toggle";
-    readonly help: "loop";
-    readonly home: "hover";
-    readonly infinity: "loop";
-    readonly info: "hover";
-    readonly instagram: "hover";
-    readonly linkedin: "hover-loop";
-    readonly loading: "loop";
-    readonly loading2: "loop";
-    readonly loading3: "loop";
-    readonly loading4: "loop";
-    readonly lock: "click-toggle";
-    readonly mail: "hover";
-    readonly maximizeMinimize: "click-toggle";
-    readonly maximizeMinimize2: "click-toggle";
-    readonly menu: "click-toggle";
-    readonly menu2: "click-toggle";
-    readonly menu3: "click-toggle";
-    readonly menu4: "click-toggle";
-    readonly microphone: "click-toggle";
-    readonly microphone2: "click-toggle";
-    readonly notification: "click-toggle";
-    readonly notification2: "click-toggle";
-    readonly notification3: "loop";
-    readonly notification4: "loop";
-    readonly playPause: "click-toggle";
-    readonly playPauseCircle: "click-toggle";
-    readonly plusToX: "click-toggle";
-    readonly pocket: "hover-loop";
-    readonly radioButton: "click-toggle";
-    readonly refresh: "click-replay";
-    readonly scrollDown: "loop";
-    readonly searchToX: "click-toggle";
-    readonly settings: "hover";
-    readonly settings2: "click-toggle";
-    readonly share: "hover";
-    readonly skipBack: "click-replay";
-    readonly skipForward: "click-replay";
-    readonly star: "click-toggle";
-    readonly thumbUp: "click-toggle";
-    readonly toggle: "click-toggle";
-    readonly trash: "hover";
-    readonly trash2: "hover";
-    readonly twitter: "hover-loop";
-    readonly userMinus: "hover";
-    readonly userPlus: "hover";
-    readonly userX: "hover";
-    readonly video: "click-toggle";
-    readonly video2: "click-toggle";
-    readonly visibility: "click-toggle";
-    readonly visibility2: "click-toggle";
-    readonly visibility3: "click-toggle";
-    readonly volume: "click-toggle";
-    readonly youtube: "hover";
-    readonly youtube2: "hover";
-    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';
+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" | "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" | "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 };

package/index.d.ts

@@ -1,144 +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 archive: "hover";
-    readonly arrowDown: "loop";
-    readonly arrowDownCircle: "click-replay";
-    readonly arrowLeftCircle: "click-replay";
-    readonly arrowRightCircle: "click-replay";
-    readonly arrowUp: "loop";
-    readonly arrowUpCircle: "click-replay";
-    readonly behance: "hover-loop";
-    readonly bookmark: "click-toggle";
-    readonly calendar: "hover";
-    readonly checkBox: "click-toggle";
-    readonly checkmark: "loop";
-    readonly chevronLeft: "click-replay";
-    readonly chevronRight: "click-replay";
-    readonly codepen: "hover-loop";
-    readonly copy: "hover";
-    readonly download: "click-replay";
-    readonly dribbble: "hover-loop";
-    readonly edit: "hover";
-    readonly error: "loop";
-    readonly explore: "hover";
-    readonly facebook: "hover-loop";
-    readonly filter: "click-replay";
-    readonly folder: "hover";
-    readonly github: "hover-loop";
-    readonly heart: "click-toggle";
-    readonly help: "loop";
-    readonly home: "hover";
-    readonly infinity: "loop";
-    readonly info: "hover";
-    readonly instagram: "hover";
-    readonly linkedin: "hover-loop";
-    readonly loading: "loop";
-    readonly loading2: "loop";
-    readonly loading3: "loop";
-    readonly loading4: "loop";
-    readonly lock: "click-toggle";
-    readonly mail: "hover";
-    readonly maximizeMinimize: "click-toggle";
-    readonly maximizeMinimize2: "click-toggle";
-    readonly menu: "click-toggle";
-    readonly menu2: "click-toggle";
-    readonly menu3: "click-toggle";
-    readonly menu4: "click-toggle";
-    readonly microphone: "click-toggle";
-    readonly microphone2: "click-toggle";
-    readonly notification: "click-toggle";
-    readonly notification2: "click-toggle";
-    readonly notification3: "loop";
-    readonly notification4: "loop";
-    readonly playPause: "click-toggle";
-    readonly playPauseCircle: "click-toggle";
-    readonly plusToX: "click-toggle";
-    readonly pocket: "hover-loop";
-    readonly radioButton: "click-toggle";
-    readonly refresh: "click-replay";
-    readonly scrollDown: "loop";
-    readonly searchToX: "click-toggle";
-    readonly settings: "hover";
-    readonly settings2: "click-toggle";
-    readonly share: "hover";
-    readonly skipBack: "click-replay";
-    readonly skipForward: "click-replay";
-    readonly star: "click-toggle";
-    readonly thumbUp: "click-toggle";
-    readonly toggle: "click-toggle";
-    readonly trash: "hover";
-    readonly trash2: "hover";
-    readonly twitter: "hover-loop";
-    readonly userMinus: "hover";
-    readonly userPlus: "hover";
-    readonly userX: "hover";
-    readonly video: "click-toggle";
-    readonly video2: "click-toggle";
-    readonly visibility: "click-toggle";
-    readonly visibility2: "click-toggle";
-    readonly visibility3: "click-toggle";
-    readonly volume: "click-toggle";
-    readonly youtube: "hover";
-    readonly youtube2: "hover";
-    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';
+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" | "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" | "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 };