react-useanimations 3.0.0-beta.1 → 3.0.0-beta.2

package/index.js

@@ -43,86 +43,297 @@ var interactions = {
   alertCircle: "loop",
   alertOctagon: "loop",
   alertTriangle: "loop",
+  alignCenter: "click-replay",
+  alignJustify: "click-replay",
+  alignLeft: "click-replay",
+  alignRight: "click-replay",
+  anchor: "hover-replay",
+  aperture: "hover-replay",
   archive: "hover",
   arrowDown: "loop",
   arrowDownCircle: "click-replay",
+  arrowDownLeft: "hover-replay",
+  arrowDownRight: "hover-replay",
+  arrowLeft: "hover-replay",
   arrowLeftCircle: "click-replay",
+  arrowRight: "hover-replay",
   arrowRightCircle: "click-replay",
   arrowUp: "loop",
   arrowUpCircle: "click-replay",
+  arrowUpLeft: "hover-replay",
+  arrowUpRight: "hover-replay",
+  atSign: "hover-replay",
+  award: "hover-replay",
+  barChart: "hover-replay",
+  barChart2: "hover-replay",
+  battery: "hover-replay",
+  batteryCharging: "hover-replay",
   behance: "hover-loop",
+  bluetooth: "hover-replay",
+  bold: "click-replay",
+  book: "hover-replay",
   bookmark: "click-toggle",
+  bookOpen: "hover-replay",
+  box: "hover-replay",
+  briefcase: "hover-replay",
   calendar: "hover",
+  camera: "click-replay",
+  cameraOff: "click-toggle",
+  cast: "hover-replay",
+  check: "click-replay",
   checkBox: "click-toggle",
+  checkCircle: "click-replay",
   checkmark: "loop",
+  chevronDown: "hover-replay",
   chevronLeft: "click-replay",
   chevronRight: "click-replay",
+  chevronsDown: "hover-replay",
+  chevronsLeft: "hover-replay",
+  chevronsRight: "hover-replay",
+  chevronsUp: "hover-replay",
+  chevronUp: "hover-replay",
+  chrome: "hover-replay",
+  circle: "hover-replay",
+  clipboard: "hover-replay",
+  clock: "hover-replay",
+  cloud: "hover-loop",
+  cloudDrizzle: "hover-replay",
+  cloudLightning: "hover-replay",
+  cloudOff: "click-toggle",
+  cloudRain: "hover-replay",
+  cloudSnow: "hover-replay",
+  code: "hover-replay",
   codepen: "hover-loop",
+  codesandbox: "hover-replay",
+  coffee: "hover-replay",
+  columns: "hover-replay",
+  command: "hover-replay",
   copy: "hover",
+  cornerDownLeft: "hover-replay",
+  cornerDownRight: "hover-replay",
+  cornerLeftDown: "hover-replay",
+  cornerLeftUp: "hover-replay",
+  cornerRightDown: "hover-replay",
+  cornerRightUp: "hover-replay",
+  cornerUpLeft: "hover-replay",
+  cornerUpRight: "hover-replay",
+  cpu: "hover-replay",
+  creditCard: "hover-replay",
+  crop: "click-replay",
+  crosshair: "hover-replay",
+  database: "hover-replay",
+  delete: "click-replay",
+  disc: "hover-replay",
+  divide: "hover-replay",
+  divideCircle: "hover-replay",
+  divideSquare: "hover-replay",
+  dollarSign: "hover-replay",
   download: "click-replay",
+  download2: "click-replay",
+  downloadCloud: "click-replay",
   dribbble: "hover-loop",
+  droplet: "hover-replay",
   edit: "hover",
+  edit2: "click-replay",
+  edit3: "click-replay",
   error: "loop",
   explore: "hover",
+  externalLink: "hover-replay",
   facebook: "hover-loop",
+  fastForward: "hover-replay",
+  figma: "hover-replay",
+  file: "hover-replay",
+  fileMinus: "click-replay",
+  filePlus: "click-replay",
+  fileText: "hover-replay",
+  film: "hover-replay",
   filter: "click-replay",
+  flag: "hover-loop",
   folder: "hover",
+  folderMinus: "click-replay",
+  folderPlus: "click-replay",
+  framer: "hover-replay",
+  frown: "hover-replay",
+  gift: "hover-replay",
+  gitBranch: "hover-replay",
+  gitCommit: "hover-replay",
   github: "hover-loop",
+  gitlab: "hover-replay",
+  gitMerge: "hover-replay",
+  gitPullRequest: "hover-replay",
+  globe: "hover-loop",
+  grid: "hover-replay",
+  hardDrive: "hover-replay",
+  hash: "hover-replay",
+  headphones: "hover-replay",
   heart: "click-toggle",
+  heart2: "click-replay",
   help: "loop",
+  hexagon: "hover-replay",
   home: "hover",
+  image: "hover-replay",
+  inbox: "hover-replay",
   infinity: "loop",
   info: "hover",
   instagram: "hover",
+  italic: "click-replay",
+  key: "hover-replay",
+  layers: "hover-replay",
+  layout: "hover-replay",
+  lifeBuoy: "hover-replay",
+  link: "click-replay",
+  link2: "click-replay",
   linkedin: "hover-loop",
+  list: "hover-replay",
   loading: "loop",
   loading2: "loop",
   loading3: "loop",
   loading4: "loop",
   lock: "click-toggle",
+  logIn: "click-replay",
+  logOut: "click-replay",
   mail: "hover",
+  map: "hover-replay",
+  mapPin: "hover-replay",
+  maximize2: "hover-replay",
   maximizeMinimize: "click-toggle",
   maximizeMinimize2: "click-toggle",
+  meh: "hover-replay",
   menu: "click-toggle",
   menu2: "click-toggle",
   menu3: "click-toggle",
   menu4: "click-toggle",
+  messageCircle: "hover-replay",
+  messageSquare: "hover-replay",
+  micOff: "click-toggle",
   microphone: "click-toggle",
   microphone2: "click-toggle",
+  minimize2: "hover-replay",
+  minus: "click-replay",
+  minusCircle: "click-replay",
+  minusSquare: "click-replay",
+  monitor: "hover-replay",
+  moon: "hover-replay",
+  moreHorizontal: "loop",
+  moreVertical: "loop",
+  mousePointer: "click-replay",
+  move: "hover-replay",
+  music: "hover-replay",
+  navigation: "hover-replay",
+  navigation2: "hover-replay",
   notification: "click-toggle",
   notification2: "click-toggle",
   notification3: "loop",
   notification4: "loop",
+  octagon: "hover-replay",
+  package: "hover-replay",
+  paperclip: "hover-replay",
+  penTool: "hover-replay",
+  percent: "hover-replay",
+  phone: "click-replay",
+  phoneCall: "click-replay",
+  phoneForwarded: "hover-replay",
+  phoneIncoming: "hover-replay",
+  phoneMissed: "hover-replay",
+  phoneOff: "click-toggle",
+  phoneOutgoing: "hover-replay",
+  pieChart: "hover-replay",
   playPause: "click-toggle",
   playPauseCircle: "click-toggle",
+  plusCircle: "click-replay",
+  plusSquare: "click-replay",
   plusToX: "click-toggle",
   pocket: "hover-loop",
+  power: "click-replay",
+  printer: "click-replay",
+  radio: "hover-replay",
   radioButton: "click-toggle",
   refresh: "click-replay",
+  refresh2: "click-replay",
+  refreshCcw: "click-replay",
+  repeat: "click-replay",
+  rewind: "hover-replay",
+  rotateCcw: "click-replay",
+  rotateCw: "click-replay",
+  rss: "hover-replay",
+  save: "click-replay",
+  scissors: "click-replay",
   scrollDown: "loop",
   searchToX: "click-toggle",
+  send: "click-replay",
+  server: "hover-replay",
   settings: "hover",
   settings2: "click-toggle",
   share: "hover",
+  shield: "hover-replay",
+  shieldOff: "click-toggle",
+  shoppingBag: "hover-replay",
+  shoppingCart: "click-replay",
+  shuffle: "click-replay",
+  sidebar: "hover-replay",
   skipBack: "click-replay",
   skipForward: "click-replay",
+  slack: "hover-replay",
+  slash: "hover-replay",
+  smartphone: "hover-replay",
+  smile: "hover-replay",
+  speaker: "hover-replay",
+  square: "hover-replay",
   star: "click-toggle",
+  stopCircle: "click-replay",
+  sun: "hover-replay",
+  sunrise: "hover-replay",
+  sunset: "hover-replay",
+  table: "hover-replay",
+  tablet: "hover-replay",
+  tag: "hover-replay",
+  target: "hover-replay",
+  terminal: "loop",
+  thermometer: "hover-replay",
+  thumbsDown: "click-replay",
   thumbUp: "click-toggle",
   toggle: "click-toggle",
+  tool: "hover-replay",
   trash: "hover",
   trash2: "hover",
+  trello: "hover-replay",
+  trendingDown: "hover-replay",
+  trendingUp: "hover-replay",
+  triangle: "hover-replay",
+  truck: "hover-replay",
+  tv: "hover-replay",
+  twitch: "hover-replay",
   twitter: "hover-loop",
+  twitterX: "hover-replay",
+  type: "click-replay",
+  umbrella: "hover-replay",
+  underline: "click-replay",
+  upload: "click-replay",
+  uploadCloud: "click-replay",
+  user: "hover-replay",
+  userCheck: "click-replay",
   userMinus: "hover",
   userPlus: "hover",
+  users: "hover-replay",
   userX: "hover",
   video: "click-toggle",
   video2: "click-toggle",
+  videoOff: "click-toggle",
   visibility: "click-toggle",
   visibility2: "click-toggle",
   visibility3: "click-toggle",
+  voicemail: "hover-replay",
   volume: "click-toggle",
+  watch: "hover-replay",
+  wifi: "hover-replay",
+  wifiOff: "click-toggle",
+  wind: "hover-replay",
+  xOctagon: "click-replay",
+  xSquare: "click-replay",
   youtube: "hover",
   youtube2: "hover",
+  zap: "hover-replay",
+  zapOff: "click-toggle",
   zoomIn: "hover",
   zoomOut: "hover"
 };
@@ -141,11 +352,17 @@ var replay = (animation) => {
   animation.setDirection(1);
   animation.playSegments([0, animation.totalFrames], true);
 };
+var isHover = (interaction) => interaction === "hover" || interaction === "hover-loop" || interaction === "hover-replay";
 var hoverStart = (animation, interaction) => {
+  if (interaction === "hover-replay") {
+    if (animation.isPaused) replay(animation);
+    return;
+  }
   if (interaction === "hover") animation.setDirection(1);
   animation.play();
 };
 var hoverEnd = (animation, interaction) => {
+  if (interaction === "hover-replay") return;
   if (interaction === "hover") {
     animation.setDirection(-1);
     animation.play();
@@ -263,12 +480,12 @@ var UseAnimations = (props) => {
     onMouseEnter: (event) => {
       onMouseEnter?.(event);
       if (!player || event.defaultPrevented) return;
-      if (interaction === "hover" || interaction === "hover-loop") hoverStart(player, interaction);
+      if (isHover(interaction)) hoverStart(player, interaction);
     },
     onMouseLeave: (event) => {
       onMouseLeave?.(event);
       if (!player || event.defaultPrevented) return;
-      if (interaction === "hover" || interaction === "hover-loop") hoverEnd(player, interaction);
+      if (isHover(interaction)) hoverEnd(player, interaction);
     }
   };
   const animationProps = {

package/index.mjs

@@ -10,86 +10,297 @@ var interactions = {
   alertCircle: "loop",
   alertOctagon: "loop",
   alertTriangle: "loop",
+  alignCenter: "click-replay",
+  alignJustify: "click-replay",
+  alignLeft: "click-replay",
+  alignRight: "click-replay",
+  anchor: "hover-replay",
+  aperture: "hover-replay",
   archive: "hover",
   arrowDown: "loop",
   arrowDownCircle: "click-replay",
+  arrowDownLeft: "hover-replay",
+  arrowDownRight: "hover-replay",
+  arrowLeft: "hover-replay",
   arrowLeftCircle: "click-replay",
+  arrowRight: "hover-replay",
   arrowRightCircle: "click-replay",
   arrowUp: "loop",
   arrowUpCircle: "click-replay",
+  arrowUpLeft: "hover-replay",
+  arrowUpRight: "hover-replay",
+  atSign: "hover-replay",
+  award: "hover-replay",
+  barChart: "hover-replay",
+  barChart2: "hover-replay",
+  battery: "hover-replay",
+  batteryCharging: "hover-replay",
   behance: "hover-loop",
+  bluetooth: "hover-replay",
+  bold: "click-replay",
+  book: "hover-replay",
   bookmark: "click-toggle",
+  bookOpen: "hover-replay",
+  box: "hover-replay",
+  briefcase: "hover-replay",
   calendar: "hover",
+  camera: "click-replay",
+  cameraOff: "click-toggle",
+  cast: "hover-replay",
+  check: "click-replay",
   checkBox: "click-toggle",
+  checkCircle: "click-replay",
   checkmark: "loop",
+  chevronDown: "hover-replay",
   chevronLeft: "click-replay",
   chevronRight: "click-replay",
+  chevronsDown: "hover-replay",
+  chevronsLeft: "hover-replay",
+  chevronsRight: "hover-replay",
+  chevronsUp: "hover-replay",
+  chevronUp: "hover-replay",
+  chrome: "hover-replay",
+  circle: "hover-replay",
+  clipboard: "hover-replay",
+  clock: "hover-replay",
+  cloud: "hover-loop",
+  cloudDrizzle: "hover-replay",
+  cloudLightning: "hover-replay",
+  cloudOff: "click-toggle",
+  cloudRain: "hover-replay",
+  cloudSnow: "hover-replay",
+  code: "hover-replay",
   codepen: "hover-loop",
+  codesandbox: "hover-replay",
+  coffee: "hover-replay",
+  columns: "hover-replay",
+  command: "hover-replay",
   copy: "hover",
+  cornerDownLeft: "hover-replay",
+  cornerDownRight: "hover-replay",
+  cornerLeftDown: "hover-replay",
+  cornerLeftUp: "hover-replay",
+  cornerRightDown: "hover-replay",
+  cornerRightUp: "hover-replay",
+  cornerUpLeft: "hover-replay",
+  cornerUpRight: "hover-replay",
+  cpu: "hover-replay",
+  creditCard: "hover-replay",
+  crop: "click-replay",
+  crosshair: "hover-replay",
+  database: "hover-replay",
+  delete: "click-replay",
+  disc: "hover-replay",
+  divide: "hover-replay",
+  divideCircle: "hover-replay",
+  divideSquare: "hover-replay",
+  dollarSign: "hover-replay",
   download: "click-replay",
+  download2: "click-replay",
+  downloadCloud: "click-replay",
   dribbble: "hover-loop",
+  droplet: "hover-replay",
   edit: "hover",
+  edit2: "click-replay",
+  edit3: "click-replay",
   error: "loop",
   explore: "hover",
+  externalLink: "hover-replay",
   facebook: "hover-loop",
+  fastForward: "hover-replay",
+  figma: "hover-replay",
+  file: "hover-replay",
+  fileMinus: "click-replay",
+  filePlus: "click-replay",
+  fileText: "hover-replay",
+  film: "hover-replay",
   filter: "click-replay",
+  flag: "hover-loop",
   folder: "hover",
+  folderMinus: "click-replay",
+  folderPlus: "click-replay",
+  framer: "hover-replay",
+  frown: "hover-replay",
+  gift: "hover-replay",
+  gitBranch: "hover-replay",
+  gitCommit: "hover-replay",
   github: "hover-loop",
+  gitlab: "hover-replay",
+  gitMerge: "hover-replay",
+  gitPullRequest: "hover-replay",
+  globe: "hover-loop",
+  grid: "hover-replay",
+  hardDrive: "hover-replay",
+  hash: "hover-replay",
+  headphones: "hover-replay",
   heart: "click-toggle",
+  heart2: "click-replay",
   help: "loop",
+  hexagon: "hover-replay",
   home: "hover",
+  image: "hover-replay",
+  inbox: "hover-replay",
   infinity: "loop",
   info: "hover",
   instagram: "hover",
+  italic: "click-replay",
+  key: "hover-replay",
+  layers: "hover-replay",
+  layout: "hover-replay",
+  lifeBuoy: "hover-replay",
+  link: "click-replay",
+  link2: "click-replay",
   linkedin: "hover-loop",
+  list: "hover-replay",
   loading: "loop",
   loading2: "loop",
   loading3: "loop",
   loading4: "loop",
   lock: "click-toggle",
+  logIn: "click-replay",
+  logOut: "click-replay",
   mail: "hover",
+  map: "hover-replay",
+  mapPin: "hover-replay",
+  maximize2: "hover-replay",
   maximizeMinimize: "click-toggle",
   maximizeMinimize2: "click-toggle",
+  meh: "hover-replay",
   menu: "click-toggle",
   menu2: "click-toggle",
   menu3: "click-toggle",
   menu4: "click-toggle",
+  messageCircle: "hover-replay",
+  messageSquare: "hover-replay",
+  micOff: "click-toggle",
   microphone: "click-toggle",
   microphone2: "click-toggle",
+  minimize2: "hover-replay",
+  minus: "click-replay",
+  minusCircle: "click-replay",
+  minusSquare: "click-replay",
+  monitor: "hover-replay",
+  moon: "hover-replay",
+  moreHorizontal: "loop",
+  moreVertical: "loop",
+  mousePointer: "click-replay",
+  move: "hover-replay",
+  music: "hover-replay",
+  navigation: "hover-replay",
+  navigation2: "hover-replay",
   notification: "click-toggle",
   notification2: "click-toggle",
   notification3: "loop",
   notification4: "loop",
+  octagon: "hover-replay",
+  package: "hover-replay",
+  paperclip: "hover-replay",
+  penTool: "hover-replay",
+  percent: "hover-replay",
+  phone: "click-replay",
+  phoneCall: "click-replay",
+  phoneForwarded: "hover-replay",
+  phoneIncoming: "hover-replay",
+  phoneMissed: "hover-replay",
+  phoneOff: "click-toggle",
+  phoneOutgoing: "hover-replay",
+  pieChart: "hover-replay",
   playPause: "click-toggle",
   playPauseCircle: "click-toggle",
+  plusCircle: "click-replay",
+  plusSquare: "click-replay",
   plusToX: "click-toggle",
   pocket: "hover-loop",
+  power: "click-replay",
+  printer: "click-replay",
+  radio: "hover-replay",
   radioButton: "click-toggle",
   refresh: "click-replay",
+  refresh2: "click-replay",
+  refreshCcw: "click-replay",
+  repeat: "click-replay",
+  rewind: "hover-replay",
+  rotateCcw: "click-replay",
+  rotateCw: "click-replay",
+  rss: "hover-replay",
+  save: "click-replay",
+  scissors: "click-replay",
   scrollDown: "loop",
   searchToX: "click-toggle",
+  send: "click-replay",
+  server: "hover-replay",
   settings: "hover",
   settings2: "click-toggle",
   share: "hover",
+  shield: "hover-replay",
+  shieldOff: "click-toggle",
+  shoppingBag: "hover-replay",
+  shoppingCart: "click-replay",
+  shuffle: "click-replay",
+  sidebar: "hover-replay",
   skipBack: "click-replay",
   skipForward: "click-replay",
+  slack: "hover-replay",
+  slash: "hover-replay",
+  smartphone: "hover-replay",
+  smile: "hover-replay",
+  speaker: "hover-replay",
+  square: "hover-replay",
   star: "click-toggle",
+  stopCircle: "click-replay",
+  sun: "hover-replay",
+  sunrise: "hover-replay",
+  sunset: "hover-replay",
+  table: "hover-replay",
+  tablet: "hover-replay",
+  tag: "hover-replay",
+  target: "hover-replay",
+  terminal: "loop",
+  thermometer: "hover-replay",
+  thumbsDown: "click-replay",
   thumbUp: "click-toggle",
   toggle: "click-toggle",
+  tool: "hover-replay",
   trash: "hover",
   trash2: "hover",
+  trello: "hover-replay",
+  trendingDown: "hover-replay",
+  trendingUp: "hover-replay",
+  triangle: "hover-replay",
+  truck: "hover-replay",
+  tv: "hover-replay",
+  twitch: "hover-replay",
   twitter: "hover-loop",
+  twitterX: "hover-replay",
+  type: "click-replay",
+  umbrella: "hover-replay",
+  underline: "click-replay",
+  upload: "click-replay",
+  uploadCloud: "click-replay",
+  user: "hover-replay",
+  userCheck: "click-replay",
   userMinus: "hover",
   userPlus: "hover",
+  users: "hover-replay",
   userX: "hover",
   video: "click-toggle",
   video2: "click-toggle",
+  videoOff: "click-toggle",
   visibility: "click-toggle",
   visibility2: "click-toggle",
   visibility3: "click-toggle",
+  voicemail: "hover-replay",
   volume: "click-toggle",
+  watch: "hover-replay",
+  wifi: "hover-replay",
+  wifiOff: "click-toggle",
+  wind: "hover-replay",
+  xOctagon: "click-replay",
+  xSquare: "click-replay",
   youtube: "hover",
   youtube2: "hover",
+  zap: "hover-replay",
+  zapOff: "click-toggle",
   zoomIn: "hover",
   zoomOut: "hover"
 };
@@ -108,11 +319,17 @@ var replay = (animation) => {
   animation.setDirection(1);
   animation.playSegments([0, animation.totalFrames], true);
 };
+var isHover = (interaction) => interaction === "hover" || interaction === "hover-loop" || interaction === "hover-replay";
 var hoverStart = (animation, interaction) => {
+  if (interaction === "hover-replay") {
+    if (animation.isPaused) replay(animation);
+    return;
+  }
   if (interaction === "hover") animation.setDirection(1);
   animation.play();
 };
 var hoverEnd = (animation, interaction) => {
+  if (interaction === "hover-replay") return;
   if (interaction === "hover") {
     animation.setDirection(-1);
     animation.play();
@@ -230,12 +447,12 @@ var UseAnimations = (props) => {
     onMouseEnter: (event) => {
       onMouseEnter?.(event);
       if (!player || event.defaultPrevented) return;
-      if (interaction === "hover" || interaction === "hover-loop") hoverStart(player, interaction);
+      if (isHover(interaction)) hoverStart(player, interaction);
     },
     onMouseLeave: (event) => {
       onMouseLeave?.(event);
       if (!player || event.defaultPrevented) return;
-      if (interaction === "hover" || interaction === "hover-loop") hoverEnd(player, interaction);
+      if (isHover(interaction)) hoverEnd(player, interaction);
     }
   };
   const animationProps = {

package/lib/activity/index.d.mts

@@ -1,5 +1,5 @@
 import type { Animation } from '../../index.mjs';
 
-declare const activity: Animation;
+declare const animation: Animation;
 
-export default activity;
+export default animation;

package/lib/activity/index.d.ts

@@ -1,5 +1,5 @@
 import type { Animation } from '../../index.js';
 
-declare const activity: Animation;
+declare const animation: Animation;
 
-export default activity;
+export default animation;

package/lib/airplay/index.d.mts

@@ -1,5 +1,5 @@
 import type { Animation } from '../../index.mjs';
 
-declare const airplay: Animation;
+declare const animation: Animation;
 
-export default airplay;
+export default animation;

package/lib/airplay/index.d.ts

@@ -1,5 +1,5 @@
 import type { Animation } from '../../index.js';
 
-declare const airplay: Animation;
+declare const animation: Animation;
 
-export default airplay;
+export default animation;