@studiometa/js-toolkit 2.6.4 → 2.7.0

package/utils/collide/collideRectRect.cjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/collide/collideRectRect.js"],
+  "sources": ["../../../packages/js-toolkit/utils/collide/collideRectRect.ts"],
   "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a rectangle collides with another rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/rect-rect.php\n *\n * @param {Rect} rect1 Rectangle 1\n * @param {Rect} rect2 Rectangle 2\n * @returns {boolean} Are the sides of one rectangle touching the other ?\n */\nexport default function collideRectRect(rect1, rect2) {\n  return (\n    rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND\n    rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND\n    rect1.y + rect1.height >= rect2.y && // rect1 top edge past rect2 bottom AND\n    rect1.y <= rect2.y + rect2.height // rect1 bottom edge past rect2 top\n  );\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBe,SAAR,gBAAiC,OAAO,OAAO;AACpD,SACE,MAAM,IAAI,MAAM,SAAS,MAAM,KAC/B,MAAM,KAAK,MAAM,IAAI,MAAM,SAC3B,MAAM,IAAI,MAAM,UAAU,MAAM,KAChC,MAAM,KAAK,MAAM,IAAI,MAAM;AAE/B;",
   "names": []

package/utils/collide/collideRectRect.d.ts

@@ -13,22 +13,4 @@
  * @param {Rect} rect2 Rectangle 2
  * @returns {boolean} Are the sides of one rectangle touching the other ?
  */
-export default function collideRectRect(rect1: Rect, rect2: Rect): boolean;
-export type Rect = {
-    /**
-     * Rectangle's x position
-     */
-    x: number;
-    /**
-     * Rectangle's y position
-     */
-    y: number;
-    /**
-     * Rectangle's width
-     */
-    width: number;
-    /**
-     * Rectangle's height
-     */
-    height: number;
-};
+export default function collideRectRect(rect1: any, rect2: any): boolean;

package/utils/collide/collideRectRect.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/collide/collideRectRect.js"],
+  "sources": ["../../../packages/js-toolkit/utils/collide/collideRectRect.ts"],
   "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a rectangle collides with another rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/rect-rect.php\n *\n * @param {Rect} rect1 Rectangle 1\n * @param {Rect} rect2 Rectangle 2\n * @returns {boolean} Are the sides of one rectangle touching the other ?\n */\nexport default function collideRectRect(rect1, rect2) {\n  return (\n    rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND\n    rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND\n    rect1.y + rect1.height >= rect2.y && // rect1 top edge past rect2 bottom AND\n    rect1.y <= rect2.y + rect2.height // rect1 bottom edge past rect2 top\n  );\n}\n"],
   "mappings": "AAgBe,SAAR,gBAAiC,OAAO,OAAO;AACpD,SACE,MAAM,IAAI,MAAM,SAAS,MAAM,KAC/B,MAAM,KAAK,MAAM,IAAI,MAAM,SAC3B,MAAM,IAAI,MAAM,UAAU,MAAM,KAChC,MAAM,KAAK,MAAM,IAAI,MAAM;AAE/B;",
   "names": []

package/utils/collide/index.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/collide/index.js
+// packages/js-toolkit/utils/collide/index.ts
 var collide_exports = {};
 __export(collide_exports, {
   boundingRectToCircle: () => import_boundingRectToCircle.default,

package/utils/collide/index.cjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/collide/index.js"],
+  "sources": ["../../../packages/js-toolkit/utils/collide/index.ts"],
   "sourcesContent": ["/**\n * Inspired by http://www.jeffreythompson.org/collision-detection/\n */\nexport { default as boundingRectToCircle } from './boundingRectToCircle.js';\nexport { default as collideCircleCircle } from './collideCircleCircle.js';\nexport { default as collideCircleRect } from './collideCircleRect.js';\nexport { default as collidePointCircle } from './collidePointCircle.js';\nexport { default as collidePointRect } from './collidePointRect.js';\nexport { default as collideRectRect } from './collideRectRect.js';\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kCAAgD;AAChD,iCAA+C;AAC/C,+BAA6C;AAC7C,gCAA8C;AAC9C,8BAA4C;AAC5C,6BAA2C;",
   "names": []

package/utils/collide/index.d.ts

@@ -1,6 +1,9 @@
-export { default as boundingRectToCircle } from "./boundingRectToCircle.js";
-export { default as collideCircleCircle } from "./collideCircleCircle.js";
-export { default as collideCircleRect } from "./collideCircleRect.js";
-export { default as collidePointCircle } from "./collidePointCircle.js";
-export { default as collidePointRect } from "./collidePointRect.js";
-export { default as collideRectRect } from "./collideRectRect.js";
+/**
+ * Inspired by http://www.jeffreythompson.org/collision-detection/
+ */
+export { default as boundingRectToCircle } from './boundingRectToCircle.js';
+export { default as collideCircleCircle } from './collideCircleCircle.js';
+export { default as collideCircleRect } from './collideCircleRect.js';
+export { default as collidePointCircle } from './collidePointCircle.js';
+export { default as collidePointRect } from './collidePointRect.js';
+export { default as collideRectRect } from './collideRectRect.js';

package/utils/collide/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/collide/index.js"],
+  "sources": ["../../../packages/js-toolkit/utils/collide/index.ts"],
   "sourcesContent": ["/**\n * Inspired by http://www.jeffreythompson.org/collision-detection/\n */\nexport { default as boundingRectToCircle } from './boundingRectToCircle.js';\nexport { default as collideCircleCircle } from './collideCircleCircle.js';\nexport { default as collideCircleRect } from './collideCircleRect.js';\nexport { default as collidePointCircle } from './collidePointCircle.js';\nexport { default as collidePointRect } from './collidePointRect.js';\nexport { default as collideRectRect } from './collideRectRect.js';\n"],
   "mappings": "AAGA,SAAoB,WAAXA,gBAAuC;AAChD,SAAoB,WAAXA,gBAAsC;AAC/C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAAkC;",
   "names": ["default"]

package/utils/css/animate.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/animate.js
+// packages/js-toolkit/utils/css/animate.ts
 var animate_exports = {};
 __export(animate_exports, {
   animate: () => animate
@@ -83,7 +83,7 @@ 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() {
+  import_scheduler.domScheduler.read(() => {
     let opacity = false;
     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);
@@ -97,11 +97,12 @@ function render(element, from, to, progress) {
       transformOrigin = "";
     }
     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_transform.TRANSFORM_PROPS.filter((name) => (0, import_is.isDefined)(from[name]) || (0, import_is.isDefined)(to[name])).map((name) => [
+        name,
+        transformRenderStrategies[name](element, from[name], to[name], stepProgress)
+      ])
     );
-    import_scheduler.domScheduler.write(function renderWrite() {
+    import_scheduler.domScheduler.write(() => {
       if (opacity !== false) {
         element.style.opacity = opacity;
       }
@@ -155,15 +156,13 @@ function animate(elementOrElements, keyframes, options = {}) {
     elementOrElements,
     (element) => singleAnimate(element, keyframes, options)
   );
-  const delegate = (key) => {
-    return (...args) => {
-      if (key === "progress" && args.length === 0) {
-        return controls[0][key]();
-      }
-      controls.forEach((control) => {
-        control[key](...args);
-      });
-    };
+  const delegate = (key) => (...args) => {
+    if (key === "progress" && args.length === 0) {
+      return controls[0][key]();
+    }
+    controls.forEach((control) => {
+      control[key](...args);
+    });
   };
   return {
     start: delegate("start"),

package/utils/css/animate.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/animate.js"],
-  "sourcesContent": ["import { lerp, map } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport transform, { TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n * @param   {number|[number, string]} val\n * @param   {() => number} getSizeRef\n * @returns {number}\n */\nfunction getAnimationStepValue(val, getSizeRef) {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n *\n * @param   {HTMLElement} element\n * @param   {NormalizedKeyframe} from\n * @param   {NormalizedKeyframe} to\n * @param   {number} progress\n * @returns {void}\n */\nfunction render(element, from, to, progress) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(function renderRead() {\n    /** @type {false|number|string} */\n    let opacity = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    /** @type {false|string} */\n    let transformOrigin = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {\n        return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];\n      }),\n    );\n    scheduler.write(function renderWrite() {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * @typedef {import('./transform.js').TransformProps} TransformProps\n * @typedef {TransformProps & {\n *   opacity?: number;\n *   transformOrigin?: string;\n *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;\n *   offset?: number;\n * }} Keyframe\n * @typedef {Keyframe & {\n *   easing: import('../math/createEases.js').EasingFunction;\n *   offset: number;\n * }} NormalizedKeyframe\n * @typedef {{\n *   start: () => void;\n *   pause: () => void;\n *   play: () => void;\n *   finish: () => void;\n *   progress: (value?: number) => number\n * }} Animate\n */\n\n/**\n * Animate an element.\n * @param   {HTMLElement} element\n * @param   {Keyframe[]} keyframes\n * @param   {import('../tween.js').TweenOptions} [options]\n * @returns {Animate}\n */\nfunction singleAnimate(element, keyframes, options = {}) {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index) =>\n      /** @type {NormalizedKeyframe} */ ({\n        ...keyframe,\n        offset: keyframe.offset ?? index / keyframesCount,\n        easing: normalizeEase(keyframe.easing),\n      }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   *\n   * @param {number} progress The progress value.\n   */\n  function callback(progress) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\n        runningPause();\n        runningKeys.delete(runningKey);\n      });\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\n/**\n * Animate one or more elements.\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {Keyframe[]} keyframes\n * @param   {import('../tween.js').TweenOptions} [options]\n * @returns {Animate}\n */\nexport function animate(elementOrElements, keyframes, options = {}) {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate = (key) => {\n    // eslint-disable-next-line consistent-return\n    return (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\n      });\n    };\n  };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
-  "mappings": "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",
+  "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
+  "sourcesContent": ["import { lerp, map } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport transform, { TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\n      ]),\n    );\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index) => /** @type {NormalizedKeyframe} */ ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\n        runningPause();\n        runningKeys.delete(runningKey);\n      });\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\n      });\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
+  "mappings": "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",
   "names": ["scheduler", "transform"]
 }

package/utils/css/animate.d.ts

@@ -1,26 +1,24 @@
-/**
- * Animate one or more elements.
- * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
- * @param   {Keyframe[]} keyframes
- * @param   {import('../tween.js').TweenOptions} [options]
- * @returns {Animate}
- */
-export function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
-export type TransformProps = import('./transform.js').TransformProps;
-export type Keyframe = TransformProps & {
+import type { TransformProps } from './transform.js';
+import type { EasingFunction } from '../math/index.js';
+import type { BezierCurve, TweenOptions } from '../tween.js';
+export declare type Keyframe = TransformProps & {
     opacity?: number;
     transformOrigin?: string;
-    easing?: import('../math/createEases.js').EasingFunction | import('../tween.js').BezierCurve;
+    easing?: EasingFunction | BezierCurve;
     offset?: number;
 };
-export type NormalizedKeyframe = Keyframe & {
-    easing: import('../math/createEases.js').EasingFunction;
+export declare type NormalizedKeyframe = Keyframe & {
+    easing: EasingFunction;
     offset: number;
 };
-export type Animate = {
+export declare type Animate = {
     start: () => void;
     pause: () => void;
     play: () => void;
     finish: () => void;
     progress: (value?: number) => number;
 };
+/**
+ * Animate one or more elements.
+ */
+export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: TweenOptions): Animate;

package/utils/css/animate.js

@@ -53,7 +53,7 @@ const transformRenderStrategies = {
 };
 function render(element, from, to, progress) {
   const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
-  scheduler.read(function renderRead() {
+  scheduler.read(() => {
     let opacity = false;
     if (isDefined(from.opacity) || isDefined(to.opacity)) {
       opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);
@@ -67,11 +67,12 @@ function render(element, from, to, progress) {
       transformOrigin = "";
     }
     const props = Object.fromEntries(
-      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
-        return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
-      })
+      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [
+        name,
+        transformRenderStrategies[name](element, from[name], to[name], stepProgress)
+      ])
     );
-    scheduler.write(function renderWrite() {
+    scheduler.write(() => {
       if (opacity !== false) {
         element.style.opacity = opacity;
       }
@@ -125,15 +126,13 @@ function animate(elementOrElements, keyframes, options = {}) {
     elementOrElements,
     (element) => singleAnimate(element, keyframes, options)
   );
-  const delegate = (key) => {
-    return (...args) => {
-      if (key === "progress" && args.length === 0) {
-        return controls[0][key]();
-      }
-      controls.forEach((control) => {
-        control[key](...args);
-      });
-    };
+  const delegate = (key) => (...args) => {
+    if (key === "progress" && args.length === 0) {
+      return controls[0][key]();
+    }
+    controls.forEach((control) => {
+      control[key](...args);
+    });
   };
   return {
     start: delegate("start"),

package/utils/css/animate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/animate.js"],
-  "sourcesContent": ["import { lerp, map } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport transform, { TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n * @param   {number|[number, string]} val\n * @param   {() => number} getSizeRef\n * @returns {number}\n */\nfunction getAnimationStepValue(val, getSizeRef) {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n *\n * @param   {HTMLElement} element\n * @param   {NormalizedKeyframe} from\n * @param   {NormalizedKeyframe} to\n * @param   {number} progress\n * @returns {void}\n */\nfunction render(element, from, to, progress) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(function renderRead() {\n    /** @type {false|number|string} */\n    let opacity = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    /** @type {false|string} */\n    let transformOrigin = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {\n        return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];\n      }),\n    );\n    scheduler.write(function renderWrite() {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * @typedef {import('./transform.js').TransformProps} TransformProps\n * @typedef {TransformProps & {\n *   opacity?: number;\n *   transformOrigin?: string;\n *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;\n *   offset?: number;\n * }} Keyframe\n * @typedef {Keyframe & {\n *   easing: import('../math/createEases.js').EasingFunction;\n *   offset: number;\n * }} NormalizedKeyframe\n * @typedef {{\n *   start: () => void;\n *   pause: () => void;\n *   play: () => void;\n *   finish: () => void;\n *   progress: (value?: number) => number\n * }} Animate\n */\n\n/**\n * Animate an element.\n * @param   {HTMLElement} element\n * @param   {Keyframe[]} keyframes\n * @param   {import('../tween.js').TweenOptions} [options]\n * @returns {Animate}\n */\nfunction singleAnimate(element, keyframes, options = {}) {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index) =>\n      /** @type {NormalizedKeyframe} */ ({\n        ...keyframe,\n        offset: keyframe.offset ?? index / keyframesCount,\n        easing: normalizeEase(keyframe.easing),\n      }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   *\n   * @param {number} progress The progress value.\n   */\n  function callback(progress) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\n        runningPause();\n        runningKeys.delete(runningKey);\n      });\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\n/**\n * Animate one or more elements.\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {Keyframe[]} keyframes\n * @param   {import('../tween.js').TweenOptions} [options]\n * @returns {Animate}\n */\nexport function animate(elementOrElements, keyframes, options = {}) {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate = (key) => {\n    // eslint-disable-next-line consistent-return\n    return (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\n      });\n    };\n  };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
-  "mappings": "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",
+  "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
+  "sourcesContent": ["import { lerp, map } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport transform, { TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\n      ]),\n    );\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index) => /** @type {NormalizedKeyframe} */ ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\n        runningPause();\n        runningKeys.delete(runningKey);\n      });\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\n      });\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/utils/css/classes.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/classes.js
+// packages/js-toolkit/utils/css/classes.ts
 var classes_exports = {};
 __export(classes_exports, {
   add: () => add,

package/utils/css/classes.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/classes.js"],
-  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n *\n * @param {Element|Element[]|NodeListOf<Element>} element The element to update.\n * @param {string|string[]} classNames A string of class names.\n * @param {'add'|'remove'|'toggle'} [method] The method to use: add, remove or toggle.\n * @param {boolean} [forceToggle] Force toggle?\n */\nfunction setClasses(element, classNames, method, forceToggle) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    normalizedClassNames.forEach((className) =>\n      eachElements(element, (el) => el.classList[method](className, forceToggle)),\n    );\n  }\n}\n\n/**\n * Add class names to an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function add(element, classNames) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function remove(element, classNames) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @param   {boolean}         [force]    Force toggle?\n * @returns {void}\n */\nexport function toggle(element, classNames, force) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAwB;AAExB,mBAA6B;AAU7B,SAAS,WAAW,SAAS,YAAY,QAAQ,aAAa;AAC5D,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,2BAAuB,mBAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,mCAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,yBAAqB;AAAA,MAAQ,CAAC,kBAC5B,2BAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,WAAW,WAAW,CAAC;AAAA,IAC5E;AAAA,EACF;AACF;AASO,SAAS,IAAI,SAAS,YAAY;AACvC,aAAW,SAAS,YAAY,KAAK;AACvC;AASO,SAAS,OAAO,SAAS,YAAY;AAC1C,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAUO,SAAS,OAAO,SAAS,YAAY,OAAO;AACjD,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
+  "sources": ["../../../packages/js-toolkit/utils/css/classes.ts"],
+  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    normalizedClassNames.forEach((className) =>\n      eachElements(element, (el) => el.classList[method](className, forceToggle)),\n    );\n  }\n}\n\n/**\n * Add class names to an element.\n */\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n */\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAwB;AAExB,mBAA6B;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,2BAAuB,mBAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,mCAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,yBAAqB;AAAA,MAAQ,CAAC,kBAC5B,2BAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,WAAW,WAAW,CAAC;AAAA,IAC5E;AAAA,EACF;AACF;AAKO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAKO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAKO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
   "names": []
 }

package/utils/css/classes.d.ts

@@ -1,25 +1,12 @@
 /**
  * Add class names to an element.
- *
- * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.
- * @param   {string|string[]} classNames A string of class names.
- * @returns {void}
  */
-export function add(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
+export declare function add(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
- *
- * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.
- * @param   {string|string[]} classNames A string of class names.
- * @returns {void}
  */
-export function remove(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
+export declare function remove(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
- *
- * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.
- * @param   {string|string[]} classNames A string of class names.
- * @param   {boolean}         [force]    Force toggle?
- * @returns {void}
  */
-export function toggle(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;
+export declare function toggle(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;

package/utils/css/classes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/classes.js"],
-  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n *\n * @param {Element|Element[]|NodeListOf<Element>} element The element to update.\n * @param {string|string[]} classNames A string of class names.\n * @param {'add'|'remove'|'toggle'} [method] The method to use: add, remove or toggle.\n * @param {boolean} [forceToggle] Force toggle?\n */\nfunction setClasses(element, classNames, method, forceToggle) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    normalizedClassNames.forEach((className) =>\n      eachElements(element, (el) => el.classList[method](className, forceToggle)),\n    );\n  }\n}\n\n/**\n * Add class names to an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function add(element, classNames) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function remove(element, classNames) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @param   {boolean}         [force]    Force toggle?\n * @returns {void}\n */\nexport function toggle(element, classNames, force) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAU7B,SAAS,WAAW,SAAS,YAAY,QAAQ,aAAa;AAC5D,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,uBAAuB,QAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,iBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,yBAAqB;AAAA,MAAQ,CAAC,cAC5B,aAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,WAAW,WAAW,CAAC;AAAA,IAC5E;AAAA,EACF;AACF;AASO,SAAS,IAAI,SAAS,YAAY;AACvC,aAAW,SAAS,YAAY,KAAK;AACvC;AASO,SAAS,OAAO,SAAS,YAAY;AAC1C,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAUO,SAAS,OAAO,SAAS,YAAY,OAAO;AACjD,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
+  "sources": ["../../../packages/js-toolkit/utils/css/classes.ts"],
+  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    normalizedClassNames.forEach((className) =>\n      eachElements(element, (el) => el.classList[method](className, forceToggle)),\n    );\n  }\n}\n\n/**\n * Add class names to an element.\n */\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n */\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,uBAAuB,QAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,iBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,yBAAqB;AAAA,MAAQ,CAAC,cAC5B,aAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,WAAW,WAAW,CAAC;AAAA,IAC5E;AAAA,EACF;AACF;AAKO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAKO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAKO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
   "names": []
 }

package/utils/css/getOffsetSizes.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/getOffsetSizes.js
+// packages/js-toolkit/utils/css/getOffsetSizes.ts
 var getOffsetSizes_exports = {};
 __export(getOffsetSizes_exports, {
   default: () => getOffsetSizes

package/utils/css/getOffsetSizes.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.js"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n * @param   {HTMLElement} element\n * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}\n */\nexport default function getOffsetSizes(element) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKe,SAAR,eAAgC,SAAS;AAC9C,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
+  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGe,SAAR,eAAgC,SAAsB;AAC3D,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/utils/css/getOffsetSizes.d.ts

@@ -1,7 +1,5 @@
 /**
  * Get a `DOMRect` like `Object` for an element, without its transforms.
- * @param   {HTMLElement} element
- * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}
  */
 export default function getOffsetSizes(element: HTMLElement): {
     x: number;

package/utils/css/getOffsetSizes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.js"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n * @param   {HTMLElement} element\n * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}\n */\nexport default function getOffsetSizes(element) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
-  "mappings": "AAKe,SAAR,eAAgC,SAAS;AAC9C,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
+  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "mappings": "AAGe,SAAR,eAAgC,SAAsB;AAC3D,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/utils/css/matrix.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/matrix.js
+// packages/js-toolkit/utils/css/matrix.ts
 var matrix_exports = {};
 __export(matrix_exports, {
   default: () => matrix

package/utils/css/matrix.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/matrix.js"],
-  "sourcesContent": ["/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform) {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBe,SAAR,OAAwB,WAAW;AAExC,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,MAAM,UAAU,SAAS,MAAM,UAAU,SAAS,MACrF,UAAU,UAAU,MACjB,UAAU,cAAc,MAAM,UAAU,cAAc;AAC7D;",
+  "sources": ["../../../packages/js-toolkit/utils/css/matrix.ts"],
+  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Be,SAAR,OAAwB,WAAoC;AAEjE,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,MAAM,UAAU,SAAS,MAAM,UAAU,SAAS,MACrF,UAAU,UAAU,MACjB,UAAU,cAAc,MAAM,UAAU,cAAc;AAC7D;",
   "names": []
 }

package/utils/css/matrix.d.ts

@@ -1,3 +1,11 @@
+declare type MatrixTransform = {
+    scaleX?: number;
+    scaleY?: number;
+    skewX?: number;
+    skewY?: number;
+    translateX?: number;
+    translateY?: number;
+};
 /**
  * Format a CSS transform matrix with the given values.
  *
@@ -15,11 +23,5 @@
  * // matrix(0.5, 0, 0, 0.5, 0, 0)
  * ```
  */
-export default function matrix(transform: {
-    scaleX?: number;
-    scaleY?: number;
-    skewX?: number;
-    skewY?: number;
-    translateX?: number;
-    translateY?: number;
-}): string;
+export default function matrix(transform: MatrixTransform): string;
+export {};

package/utils/css/matrix.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/matrix.js"],
-  "sourcesContent": ["/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform) {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
-  "mappings": "AAiBe,SAAR,OAAwB,WAAW;AAExC,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,MAAM,UAAU,SAAS,MAAM,UAAU,SAAS,MACrF,UAAU,UAAU,MACjB,UAAU,cAAc,MAAM,UAAU,cAAc;AAC7D;",
+  "sources": ["../../../packages/js-toolkit/utils/css/matrix.ts"],
+  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
+  "mappings": "AA0Be,SAAR,OAAwB,WAAoC;AAEjE,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,MAAM,UAAU,SAAS,MAAM,UAAU,SAAS,MACrF,UAAU,UAAU,MACjB,UAAU,cAAc,MAAM,UAAU,cAAc;AAC7D;",
   "names": []
 }

package/utils/css/styles.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/styles.js
+// packages/js-toolkit/utils/css/styles.ts
 var styles_exports = {};
 __export(styles_exports, {
   add: () => add,