react-useanimations 2.10.0 → 3.0.0-beta.2

package/LICENSE

@@ -0,0 +1,30 @@
+RIGHTS
+
+All the free files available in useAnimations are distributed
+under Creative Commons (CC) Attribution (BY) unless stated otherwise.
+Our resources (animations) can be used for personal and commercial usage
+within Web and Mobile Applications.
+
+You may modify the resources according to your requirements and use them
+in any or all of your personal or commercial projects. For example,
+you may include this resource on a website or mobile application
+you will be designing for a client.
+
+You are required to attribute or link to useanimations.com in any of projects.
+useAnimations (useanimations.com) will not be responsible for any outcome
+that may occur during the use of our resources.
+
+Files from useAnimations can be shared as long as the useAnimations
+are credited appropriately. 
+
+
+PROHIBITIONS
+
+You do not have the rights to redistribute, resell, lease, license,
+sub-license or offer the file downloaded to any third party.
+For any resalable web applications, software programs, web templates,
+app templates, merchandise etc. you should not include our graphics resources.
+This will be considered as a redistribution of our resources
+which is forbidden by us.
+
+More about Creative Commons (CC) Attribution (BY) - https://creativecommons.org/licenses/by/4.0/

package/README.md

@@ -0,0 +1,157 @@
+## React UseAnimations Icons
+
+[![npm version](https://img.shields.io/npm/v/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations) [![npm downloads](https://img.shields.io/npm/dm/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations)
+
+#### What is react-useanimations?
+
+React-useanimations is the official React component for [useAnimations](https://useanimations.com), a free library of 290+ animated Lottie icons.
+
+📖 **Documentation:** [useanimations.com/documentation](https://useanimations.com/documentation): React props and all import names, plus plain HTML/JS, Vue, iOS and Android guides.
+
+![](useanimations-preview.gif)
+
+### Installation
+
+```
+npm install react-useanimations
+```
+
+Requires React 16.8+ (tested with React 18 and 19). Works with StrictMode, Next.js (App Router) and other SSR frameworks.
+
+### Usage
+
+```javascript
+import UseAnimations from 'react-useanimations';
+// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
+import github from 'react-useanimations/lib/github';
+
+const App = () => <UseAnimations animation={github} />;
+
+export default App;
+```
+
+Icons can be configured with inline props:
+
+```javascript
+<UseAnimations
+  animation={github}
+  size={56}
+  strokeColor="currentColor"
+  wrapperStyle={{ padding: 100 }}
+/>
+```
+
+These props are available:
+
+| Prop         |  Default  |                                                                                                                   Definition |
+| :----------- | :-------: | ---------------------------------------------------------------------------------------------------------------------------: |
+| animation    |     /     |                                                                     animation imported from `react-useanimations/lib/<name>` |
+| size         |   `24`    |                                                                                                         animation size in px |
+| strokeColor  |     /     |                                                                              stroke color of the icon, e.g. `'currentColor'` |
+| fillColor    |     /     |                                                                                                       fill color of the icon |
+| pathCss      |     /     |                                                                                  extra CSS declarations for the icon's paths |
+| wrapperStyle |   `{}`    |                                                                                                           wrapper div styles |
+| interaction  | per icon* |                                  `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` or `'hover-replay'` |
+| reverse      |  `false`  |                            for `click-toggle` icons: `true` shows the end state (e.g. a checked checkbox); can be controlled |
+| autoplay     | per icon* |                                                                                        `true` for looping icons like loaders |
+| loop         | per icon* |                                                                                        `true` for looping icons like loaders |
+| speed        |    `1`    |                                                                                           playback speed (1 is normal speed) |
+| options      |   `{}`    | any other [lottie-web options](https://github.com/airbnb/lottie-web#other-loading-options); applied when the animation loads |
+| render       |     /     |                                                                                  render prop for a custom wrapper, see below |
+
+\* Each icon has a default interaction matching [useanimations.com](https://useanimations.com):
+
+- `loop`: plays continuously (loaders, alerts).
+- `click-toggle`: toggles between two states on click (menu, checkbox, play/pause).
+- `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 (social icons).
+- `hover-replay`: plays once from the start on mouse enter.
+
+Any other prop (`className`, `aria-label`, `onClick`, `onMouseEnter`, …) is passed to the wrapper div. Your event handlers run before the animation's; call `event.preventDefault()` to skip the animation.
+
+#### Controlled toggle
+
+```javascript
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export const MenuButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      reverse={open} // also animates when `open` changes elsewhere, e.g. the menu closes on Escape
+      onClick={() => setOpen(!open)}
+    />
+  );
+};
+```
+
+#### Changing the interaction
+
+```javascript
+<UseAnimations animation={download} interaction="hover" />
+```
+
+#### Wrapping the animation in another element
+
+```javascript
+import heart from 'react-useanimations/lib/heart';
+
+export const LikeButton = () => (
+  <UseAnimations
+    animation={heart}
+    size={60}
+    onClick={() => console.log('liked')}
+    render={(eventProps, animationProps) => (
+      <button type="button" aria-label="Like" {...eventProps}>
+        <div {...animationProps} />
+      </button>
+    )}
+  />
+);
+```
+
+`eventProps` holds the `onClick`, `onMouseEnter` and `onMouseLeave` handlers for your interactive element (e.g. a button) and `animationProps` holds the animation itself, which you spread inside a plain `<div>`.
+
+#### Next.js and other SSR frameworks
+
+The component is marked `'use client'` and loads lottie-web only in the browser, so it can be rendered from server components without `dynamic(..., { ssr: false })`.
+
+### Available animations
+
+<!-- icons:start -->
+
+`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`
+<!-- icons:end -->
+
+Import each one from `react-useanimations/lib/<name>`. `delete` and `package` are reserved words in JavaScript, so import them under another name, e.g. `import deleteIcon from 'react-useanimations/lib/delete';`.
+
+### Upgrading from v2
+
+- 211 new icons (290+ in total), matching the full set on useanimations.com.
+- Icon interactions now match useanimations.com (e.g. `zoomIn` plays on hover instead of looping, social icons loop while hovered). Pass `interaction` to keep a different behavior.
+- `reverse` is now fully controlled: changing it from `true` to `false` animates back.
+- `onMouseEnter` / `onMouseLeave` no longer replace the hover animation, and `style` is merged into the wrapper styles.
+- `loop={false}` and `autoplay={false}` now override the defaults of looping icons.
+- `options` is typed as lottie-web's `AnimationConfigWithData<'svg'>`.
+- The `react-useanimations/utils/*` paths were removed; import the types (`Animation`, `AnimationKey`, `Interaction`, `UseAnimationsProps`) from `react-useanimations`.
+
+### Development
+
+```
+npm install
+npm test            # vitest
+npm run lint
+npm run check-types
+npm run build       # builds dist/ (CJS + ESM + types)
+npm run sync-icons  # syncs src/lib with https://useanimations.com/icons.json
+```
+
+### License
+
+The animations are free for personal and commercial use under [Creative Commons Attribution 4.0](https://creativecommons.org/licenses/by/4.0/). Attribution with a link to [useanimations.com](https://useanimations.com) is required; redistributing or reselling the files themselves (e.g. in icon packs, templates or UI kits) is not allowed. See [LICENSE](LICENSE) and [Licencing & Terms](https://useanimations.com/licencing-and-terms).

package/index.d.mts

@@ -0,0 +1,356 @@
+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;
+
+/**
+ * How an icon reacts to the user, matching the `interaction` field of the useAnimations catalog.
+ * - `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-replay`: plays once from the start on mouse enter.
+ */
+type Interaction = 'loop' | 'click-toggle' | 'click-replay' | 'hover' | 'hover-loop' | 'hover-replay';
+type Animation = {
+    animationData: unknown;
+    animationKey: AnimationKey;
+};
+
+type MouseHandler = (event: React.MouseEvent<HTMLElement>) => void;
+type EventProps = {
+    onClick: MouseHandler;
+    onMouseEnter: MouseHandler;
+    onMouseLeave: MouseHandler;
+};
+type AnimationProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.Ref<HTMLDivElement>;
+    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;
+};
+type UseAnimationsProps = OwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 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 };