@studiometa/js-toolkit 2.2.3 → 2.3.0

package/helpers/importWhenIdle.cjs

@@ -31,8 +31,7 @@ function importWhenIdle(fn, options) {
     });
   };
   return new Promise((resolve) => {
-    var _a;
-    const timeout = (_a = options == null ? void 0 : options.timeout) != null ? _a : 1;
+    const timeout = options?.timeout ?? 1;
     if (!("requestIdleCallback" in window)) {
       setTimeout(() => {
         resolver(resolve);
@@ -42,7 +41,7 @@ function importWhenIdle(fn, options) {
         setTimeout(() => {
           resolver(resolve);
         }, 0);
-      }, { timeout: options == null ? void 0 : options.timeout });
+      }, { timeout: options?.timeout });
     }
   });
 }

package/helpers/importWhenIdle.js

@@ -7,8 +7,7 @@ function importWhenIdle(fn, options) {
     });
   };
   return new Promise((resolve) => {
-    var _a;
-    const timeout = (_a = options == null ? void 0 : options.timeout) != null ? _a : 1;
+    const timeout = options?.timeout ?? 1;
     if (!("requestIdleCallback" in window)) {
       setTimeout(() => {
         resolver(resolve);
@@ -18,7 +17,7 @@ function importWhenIdle(fn, options) {
         setTimeout(() => {
           resolver(resolve);
         }, 0);
-      }, { timeout: options == null ? void 0 : options.timeout });
+      }, { timeout: options?.timeout });
     }
   });
 }

package/helpers/importWhenVisible.cjs

@@ -23,13 +23,14 @@ __export(importWhenVisible_exports, {
 });
 module.exports = __toCommonJS(importWhenVisible_exports);
 var import_utils = require("./utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
   let ResolvedClass;
   const resolver = (resolve, cb) => {
     fn().then((module2) => {
       ResolvedClass = "default" in module2 ? module2.default : module2;
       resolve(ResolvedClass);
-      if (typeof cb === "function") {
+      if ((0, import_utils2.isFunction)(cb)) {
         cb();
       }
     });
@@ -43,7 +44,7 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
         }, 0);
       }
     }, observerOptions);
-    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent?.$el);
     elements.forEach((element) => observer.observe(element));
   });
 }

package/helpers/importWhenVisible.js

@@ -1,11 +1,12 @@
 import { getTargetElements } from "./utils.js";
+import { isFunction } from "../utils/index.js";
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
   let ResolvedClass;
   const resolver = (resolve, cb) => {
     fn().then((module) => {
       ResolvedClass = "default" in module ? module.default : module;
       resolve(ResolvedClass);
-      if (typeof cb === "function") {
+      if (isFunction(cb)) {
         cb();
       }
     });
@@ -19,7 +20,7 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
         }, 0);
       }
     }, observerOptions);
-    const elements = getTargetElements(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
     elements.forEach((element) => observer.observe(element));
   });
 }

package/helpers/utils.cjs

@@ -23,11 +23,12 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("../Base/utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function getTargetElements(nameOrSelectorOrElement, context) {
-  if (typeof nameOrSelectorOrElement === "string") {
+  if ((0, import_utils2.isString)(nameOrSelectorOrElement)) {
     return (0, import_utils.getComponentElements)(nameOrSelectorOrElement, context);
   }
-  if (!Array.isArray(nameOrSelectorOrElement)) {
+  if (!(0, import_utils2.isArray)(nameOrSelectorOrElement)) {
     return [nameOrSelectorOrElement];
   }
   return nameOrSelectorOrElement;

package/helpers/utils.js

@@ -1,9 +1,10 @@
 import { getComponentElements } from "../Base/utils.js";
+import { isString, isArray } from "../utils/index.js";
 function getTargetElements(nameOrSelectorOrElement, context) {
-  if (typeof nameOrSelectorOrElement === "string") {
+  if (isString(nameOrSelectorOrElement)) {
     return getComponentElements(nameOrSelectorOrElement, context);
   }
-  if (!Array.isArray(nameOrSelectorOrElement)) {
+  if (!isArray(nameOrSelectorOrElement)) {
     return [nameOrSelectorOrElement];
   }
   return nameOrSelectorOrElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -41,5 +41,8 @@
   "dependencies": {
     "@motionone/easing": "^10.9.0",
     "deepmerge": "^4.2.2"
+  },
+  "devDependencies": {
+    "vue": "2.6"
   }
 }

package/services/key.cjs

@@ -40,7 +40,7 @@ function createKeyService() {
     if (!previousEvent) {
       props.triggered = 0;
     }
-    if (props.event.type === "keydown" && (previousEvent == null ? void 0 : previousEvent.type) === "keydown") {
+    if (props.event.type === "keydown" && previousEvent?.type === "keydown") {
       props.triggered += 1;
     } else {
       props.triggered = 1;

package/services/key.js

@@ -13,7 +13,7 @@ function createKeyService() {
     if (!previousEvent) {
       props.triggered = 0;
     }
-    if (props.event.type === "keydown" && (previousEvent == null ? void 0 : previousEvent.type) === "keydown") {
+    if (props.event.type === "keydown" && previousEvent?.type === "keydown") {
       props.triggered += 1;
     } else {
       props.triggered = 1;

package/services/pointer.cjs

@@ -29,15 +29,14 @@ function isTouchEvent(event) {
 var events = ["mousemove", "touchmove", "mousedown", "touchstart", "mouseup", "touchend"];
 function createPointerService() {
   function updateProps(event) {
-    var _a, _b;
     props.event = event;
     const yLast = props.y;
     const xLast = props.x;
-    const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
+    const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
     if (y !== props.y) {
       props.y = y;
     }
-    const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
+    const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
     if (x !== props.x) {
       props.x = x;
     }

package/services/pointer.js

@@ -5,15 +5,14 @@ function isTouchEvent(event) {
 const events = ["mousemove", "touchmove", "mousedown", "touchstart", "mouseup", "touchend"];
 function createPointerService() {
   function updateProps(event) {
-    var _a, _b;
     props.event = event;
     const yLast = props.y;
     const xLast = props.x;
-    const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
+    const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
     if (y !== props.y) {
       props.y = y;
     }
-    const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
+    const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
     if (x !== props.x) {
       props.x = x;
     }

package/services/raf.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,7 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/js-toolkit/services/raf.js
@@ -28,7 +25,7 @@ module.exports = __toCommonJS(raf_exports);
 var import_service = require("./service.cjs");
 var import_nextFrame = require("../utils/nextFrame.cjs");
 var import_scheduler = require("../utils/scheduler.cjs");
-var import_isFunction = __toESM(require("../utils/isFunction.cjs"), 1);
+var import_is = require("../utils/is.cjs");
 var scheduler = (0, import_scheduler.useScheduler)(["update", "render"]);
 function createRafService() {
   let isTicking = false;
@@ -37,7 +34,7 @@ function createRafService() {
     callbacks.forEach(function forEachCallback(callback) {
       scheduler.update(function rafUpdate() {
         const render = callback(props2);
-        if ((0, import_isFunction.default)(render)) {
+        if ((0, import_is.isFunction)(render)) {
           scheduler.render(function rafRender() {
             render(props2);
           });

package/services/raf.js

@@ -1,7 +1,7 @@
 import { useService } from "./service.js";
 import { getRaf as getRequestAnimationFrame } from "../utils/nextFrame.js";
 import { useScheduler } from "../utils/scheduler.js";
-import isFunction from "../utils/isFunction.js";
+import { isFunction } from "../utils/is.js";
 const scheduler = useScheduler(["update", "render"]);
 function createRafService() {
   let isTicking = false;

package/utils/css/animate.cjs

@@ -25,16 +25,13 @@ __export(animate_exports, {
   animate: () => animate
 });
 module.exports = __toCommonJS(animate_exports);
-var import_easing = require("@motionone/easing");
 var import_math = require("../math/index.cjs");
-var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
+var import_is = require("../is.cjs");
 var import_transform = __toESM(require("./transform.cjs"), 1);
-var import_raf = __toESM(require("../../services/raf.cjs"), 1);
 var import_scheduler = require("../scheduler.cjs");
-var import_noop = require("../noop.cjs");
+var import_tween = require("../tween.cjs");
 var id = 0;
 var running = /* @__PURE__ */ new WeakMap();
-var PROGRESS_PRECISION = 1e-4;
 var CSSUnitConverter = {
   "%": (value, getSizeRef) => value * getSizeRef() / 100,
   vh: (value) => value * window.innerHeight / 100,
@@ -43,7 +40,7 @@ var CSSUnitConverter = {
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
 function getAnimationStepValue(val, getSizeRef) {
-  if (typeof val === "number") {
+  if ((0, import_is.isNumber)(val)) {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
@@ -51,19 +48,10 @@ function getAnimationStepValue(val, getSizeRef) {
   }
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
-function normalizeEase(ease) {
-  if (!(0, import_isDefined.default)(ease)) {
-    return import_noop.noopValue;
-  }
-  if (Array.isArray(ease)) {
-    return (0, import_easing.cubicBezier)(...ease);
-  }
-  return ease;
-}
-var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
+var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(getAnimationStepValue(fromValue ?? 0, () => element[sizeRef]), getAnimationStepValue(toValue ?? 0, () => element[sizeRef]), progress);
 var widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
 var heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
-var generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
+var generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(fromValue ?? defaultValue, toValue ?? defaultValue, progress);
 var scaleRenderStrategy = generateLerpRenderStrategy(1);
 var degreesRenderStrategy = generateLerpRenderStrategy(0);
 var transformRenderStrategies = {
@@ -85,20 +73,19 @@ var transformRenderStrategies = {
 function render(element, from, to, progress) {
   const stepProgress = to.easing((0, import_math.map)(progress, from.offset, to.offset, 0, 1));
   import_scheduler.domScheduler.read(function renderRead() {
-    var _a, _b;
     let opacity = false;
-    if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
-      opacity = (0, import_math.map)(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+    if ((0, import_is.isDefined)(from.opacity) || (0, import_is.isDefined)(to.opacity)) {
+      opacity = (0, import_math.map)(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);
     } else if (element.style.opacity) {
       opacity = "";
     }
     let transformOrigin = false;
-    if ((0, import_isDefined.default)(to.transformOrigin)) {
+    if ((0, import_is.isDefined)(to.transformOrigin)) {
       transformOrigin = to.transformOrigin;
     } else if (element.style.transformOrigin) {
       transformOrigin = "";
     }
-    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_isDefined.default)(from[name]) || (0, import_isDefined.default)(to[name])).map((name) => {
+    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_is.isDefined)(from[name]) || (0, import_is.isDefined)(to[name])).map((name) => {
       return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
     }));
     import_scheduler.domScheduler.write(function renderWrite() {
@@ -113,91 +100,39 @@ function render(element, from, to, progress) {
   });
 }
 function animate(element, keyframes, options = {}) {
-  var _a;
-  const raf = (0, import_raf.default)();
-  let progressValue = 0;
-  let easedProgress = 0;
+  const keyframesCount = keyframes.length - 1;
+  const normalizedKeyframes = keyframes.map((keyframe, index) => ({
+    ...keyframe,
+    offset: keyframe.offset ?? index / keyframesCount,
+    easing: (0, import_tween.normalizeEase)(keyframe.easing)
+  }));
   if (!running.has(element)) {
     running.set(element, /* @__PURE__ */ new Map());
   }
-  const ease = normalizeEase(options.easing);
-  let duration = (_a = options.duration) != null ? _a : 1;
-  duration *= 1e3;
-  let startTime = performance.now();
-  let endTime = startTime + duration;
   const key = `animate-${id}`;
   id += 1;
-  const { onProgress = import_noop.noop, onFinish = import_noop.noop } = options;
-  let isRunning = false;
-  const keyframesCount = keyframes.length - 1;
-  const normalizedKeyframes = keyframes.map((keyframe, index) => {
-    var _a2;
-    return {
-      ...keyframe,
-      offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
-      easing: normalizeEase(keyframe.easing)
-    };
-  });
-  function pause() {
-    isRunning = false;
-    raf.remove(key);
-  }
-  function progress(newProgress) {
-    if (typeof newProgress === "undefined") {
-      return progressValue;
-    }
-    progressValue = newProgress;
-    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
-      progressValue = 1;
-      pause();
-      import_scheduler.domScheduler.afterWrite(() => onFinish(progressValue, easedProgress));
-    }
-    easedProgress = ease(progressValue);
+  function callback(progress) {
     let toIndex = 0;
-    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= progress && normalizedKeyframes[toIndex].offset !== 1) {
       toIndex += 1;
     }
-    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
-    onProgress(progressValue, easedProgress);
-    return progressValue;
-  }
-  function tick(props) {
-    if (!isRunning) {
-      raf.remove(key);
-      return;
-    }
-    progress((0, import_math.clamp01)((0, import_math.map)(props.time, startTime, endTime, 0, 1)));
-  }
-  function start() {
-    const runningKeys = running.get(element);
-    runningKeys.forEach((runningPause, runningKey) => {
-      runningPause();
-      runningKeys.delete(runningKey);
-    });
-    runningKeys.set(key, pause);
-    running.set(element, runningKeys);
-    startTime = performance.now();
-    endTime = startTime + duration;
-    progressValue = 0;
-    easedProgress = 0;
-    isRunning = true;
-    raf.add(key, tick);
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);
   }
-  function play() {
-    if (isRunning) {
-      return;
+  const controls = (0, import_tween.tween)(callback, {
+    ...options,
+    onStart() {
+      if ((0, import_is.isFunction)(options.onStart)) {
+        options.onStart();
+      }
+      const runningKeys = running.get(element);
+      runningKeys.forEach((runningPause, runningKey) => {
+        runningPause();
+        runningKeys.delete(runningKey);
+      });
+      runningKeys.set(key, controls.pause);
+      running.set(element, runningKeys);
     }
-    startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
-    endTime = startTime + duration;
-    isRunning = true;
-    raf.add(key, tick);
-  }
-  return {
-    start,
-    finish: () => progress(1),
-    pause,
-    play,
-    progress
-  };
+  });
+  return controls;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -1,10 +1,9 @@
 /**
  * @typedef {import('./transform.js').TransformProps} TransformProps
- * @typedef {[number, number, number, number]} BezierCurve
  * @typedef {TransformProps & {
  *   opacity?: number;
  *   transformOrigin?: string;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
+ *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;
  *   offset?: number;
  * }} Keyframe
  * @typedef {Keyframe & {
@@ -23,26 +22,15 @@
  * Animate an element.
  * @param   {HTMLElement} element
  * @param   {Keyframe[]} keyframes
- * @param   {{
- *   duration?: number;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
- *   onProgress?: (progress: number, easedProgress: number) => void;
- *   onFinish?: (progress: number, easedProgress: number) => void;
- *  }} [options]
+ * @param   {import('../tween.js').TweenOptions} [options]
  * @returns {Animate}
  */
-export function animate(element: HTMLElement, keyframes: Keyframe[], options?: {
-    duration?: number;
-    easing?: import('../math/createEases.js').EasingFunction | BezierCurve;
-    onProgress?: (progress: number, easedProgress: number) => void;
-    onFinish?: (progress: number, easedProgress: number) => void;
-}): Animate;
+export function animate(element: HTMLElement, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
 export type TransformProps = import('./transform.js').TransformProps;
-export type BezierCurve = [number, number, number, number];
 export type Keyframe = TransformProps & {
     opacity?: number;
     transformOrigin?: string;
-    easing?: import('../math/createEases.js').EasingFunction | [number, number, number, number];
+    easing?: import('../math/createEases.js').EasingFunction | import('../tween.js').BezierCurve;
     offset?: number;
 };
 export type NormalizedKeyframe = Keyframe & {

package/utils/css/animate.js

@@ -1,13 +1,10 @@
-import { cubicBezier } from "@motionone/easing";
-import { lerp, map, clamp01 } from "../math/index.js";
-import isDefined from "../isDefined.js";
+import { lerp, map } from "../math/index.js";
+import { isDefined, isFunction, isNumber } from "../is.js";
 import transform, { TRANSFORM_PROPS } from "./transform.js";
-import useRaf from "../../services/raf.js";
 import { domScheduler as scheduler } from "../scheduler.js";
-import { noop, noopValue } from "../noop.js";
+import { tween, normalizeEase } from "../tween.js";
 let id = 0;
 const running = /* @__PURE__ */ new WeakMap();
-const PROGRESS_PRECISION = 1e-4;
 const CSSUnitConverter = {
   "%": (value, getSizeRef) => value * getSizeRef() / 100,
   vh: (value) => value * window.innerHeight / 100,
@@ -16,7 +13,7 @@ const CSSUnitConverter = {
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
 function getAnimationStepValue(val, getSizeRef) {
-  if (typeof val === "number") {
+  if (isNumber(val)) {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
@@ -24,19 +21,10 @@ function getAnimationStepValue(val, getSizeRef) {
   }
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
-function normalizeEase(ease) {
-  if (!isDefined(ease)) {
-    return noopValue;
-  }
-  if (Array.isArray(ease)) {
-    return cubicBezier(...ease);
-  }
-  return ease;
-}
-const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
+const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue ?? 0, () => element[sizeRef]), getAnimationStepValue(toValue ?? 0, () => element[sizeRef]), progress);
 const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
 const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
-const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
+const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);
 const scaleRenderStrategy = generateLerpRenderStrategy(1);
 const degreesRenderStrategy = generateLerpRenderStrategy(0);
 const transformRenderStrategies = {
@@ -58,10 +46,9 @@ const transformRenderStrategies = {
 function render(element, from, to, progress) {
   const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
   scheduler.read(function renderRead() {
-    var _a, _b;
     let opacity = false;
     if (isDefined(from.opacity) || isDefined(to.opacity)) {
-      opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);
     } else if (element.style.opacity) {
       opacity = "";
     }
@@ -86,92 +73,40 @@ function render(element, from, to, progress) {
   });
 }
 function animate(element, keyframes, options = {}) {
-  var _a;
-  const raf = useRaf();
-  let progressValue = 0;
-  let easedProgress = 0;
+  const keyframesCount = keyframes.length - 1;
+  const normalizedKeyframes = keyframes.map((keyframe, index) => ({
+    ...keyframe,
+    offset: keyframe.offset ?? index / keyframesCount,
+    easing: normalizeEase(keyframe.easing)
+  }));
   if (!running.has(element)) {
     running.set(element, /* @__PURE__ */ new Map());
   }
-  const ease = normalizeEase(options.easing);
-  let duration = (_a = options.duration) != null ? _a : 1;
-  duration *= 1e3;
-  let startTime = performance.now();
-  let endTime = startTime + duration;
   const key = `animate-${id}`;
   id += 1;
-  const { onProgress = noop, onFinish = noop } = options;
-  let isRunning = false;
-  const keyframesCount = keyframes.length - 1;
-  const normalizedKeyframes = keyframes.map((keyframe, index) => {
-    var _a2;
-    return {
-      ...keyframe,
-      offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
-      easing: normalizeEase(keyframe.easing)
-    };
-  });
-  function pause() {
-    isRunning = false;
-    raf.remove(key);
-  }
-  function progress(newProgress) {
-    if (typeof newProgress === "undefined") {
-      return progressValue;
-    }
-    progressValue = newProgress;
-    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
-      progressValue = 1;
-      pause();
-      scheduler.afterWrite(() => onFinish(progressValue, easedProgress));
-    }
-    easedProgress = ease(progressValue);
+  function callback(progress) {
     let toIndex = 0;
-    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= progress && normalizedKeyframes[toIndex].offset !== 1) {
       toIndex += 1;
     }
-    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
-    onProgress(progressValue, easedProgress);
-    return progressValue;
-  }
-  function tick(props) {
-    if (!isRunning) {
-      raf.remove(key);
-      return;
-    }
-    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));
-  }
-  function start() {
-    const runningKeys = running.get(element);
-    runningKeys.forEach((runningPause, runningKey) => {
-      runningPause();
-      runningKeys.delete(runningKey);
-    });
-    runningKeys.set(key, pause);
-    running.set(element, runningKeys);
-    startTime = performance.now();
-    endTime = startTime + duration;
-    progressValue = 0;
-    easedProgress = 0;
-    isRunning = true;
-    raf.add(key, tick);
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);
   }
-  function play() {
-    if (isRunning) {
-      return;
+  const controls = tween(callback, {
+    ...options,
+    onStart() {
+      if (isFunction(options.onStart)) {
+        options.onStart();
+      }
+      const runningKeys = running.get(element);
+      runningKeys.forEach((runningPause, runningKey) => {
+        runningPause();
+        runningKeys.delete(runningKey);
+      });
+      runningKeys.set(key, controls.pause);
+      running.set(element, runningKeys);
     }
-    startTime = performance.now() - lerp(0, duration, progressValue);
-    endTime = startTime + duration;
-    isRunning = true;
-    raf.add(key, tick);
-  }
-  return {
-    start,
-    finish: () => progress(1),
-    pause,
-    play,
-    progress
-  };
+  });
+  return controls;
 }
 export {
   animate

package/utils/css/classes.cjs

@@ -24,11 +24,12 @@ __export(classes_exports, {
   toggle: () => toggle
 });
 module.exports = __toCommonJS(classes_exports);
+var import_is = require("../is.cjs");
 function setClasses(element, classNames, method, forceToggle) {
   if (!element || !classNames) {
     return;
   }
-  const normalizedClassNames = Array.isArray(classNames) ? classNames : classNames.split(" ");
+  const normalizedClassNames = (0, import_is.isArray)(classNames) ? classNames : classNames.split(" ");
   if (method !== "toggle") {
     element.classList[method](...normalizedClassNames);
   } else {