@studiometa/js-toolkit 2.0.0-rc.2 → 2.1.0

package/utils/css/animate.cjs

@@ -0,0 +1,190 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/utils/css/animate.js
+var animate_exports = {};
+__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_transform = __toESM(require("./transform.cjs"), 1);
+var id = 0;
+var running = /* @__PURE__ */ new WeakMap();
+var noop = () => {
+};
+var PROGRESS_PRECISION = 1e-4;
+var CSSUnitConverter = {
+  "%": (value, sizeRef) => value * sizeRef / 100,
+  vh: (value) => value * window.innerHeight / 100,
+  vw: (value) => value * window.innerWidth / 100,
+  vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
+  vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
+};
+function getAnimationStepValue(val, sizeRef) {
+  if (typeof val === "number") {
+    return val;
+  }
+  if (!val[1] || !CSSUnitConverter[val[1]]) {
+    return val[0];
+  }
+  return CSSUnitConverter[val[1]](val[0], sizeRef);
+}
+function linear(value) {
+  return value;
+}
+function normalizeEase(ease) {
+  if (!(0, import_isDefined.default)(ease)) {
+    return linear;
+  }
+  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 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 scaleRenderStrategy = generateLerpRenderStrategy(1);
+var degreesRenderStrategy = generateLerpRenderStrategy(0);
+var transformRenderStrategies = {
+  x: widthBasedTranslateRenderStrategy,
+  y: heightBasedTranslateRenderStrategy,
+  z: widthBasedTranslateRenderStrategy,
+  scale: scaleRenderStrategy,
+  scaleX: scaleRenderStrategy,
+  scaleY: scaleRenderStrategy,
+  scaleZ: scaleRenderStrategy,
+  skew: degreesRenderStrategy,
+  skewX: degreesRenderStrategy,
+  skewY: degreesRenderStrategy,
+  rotate: degreesRenderStrategy,
+  rotateX: degreesRenderStrategy,
+  rotateY: degreesRenderStrategy,
+  rotateZ: degreesRenderStrategy
+};
+function render(element, from, to, progress) {
+  var _a, _b;
+  const stepProgress = to.easing((0, import_math.map)(progress, from.offset, to.offset, 0, 1));
+  if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
+    element.style.opacity = (0, import_math.map)(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+  } else if (element.style.opacity) {
+    element.style.opacity = "";
+  }
+  if ((0, import_isDefined.default)(to.transformOrigin)) {
+    element.style.transformOrigin = to.transformOrigin;
+  } else if (element.style.transformOrigin) {
+    element.style.transformOrigin = "";
+  }
+  (0, import_transform.default)(element, Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_isDefined.default)(from[name]) || (0, import_isDefined.default)(to[name])).map((name) => {
+    return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+  })));
+}
+function animate(element, keyframes, options = {}) {
+  var _a;
+  let progressValue = 0;
+  let easedProgress = 0;
+  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;
+  }
+  function progress(newProgress) {
+    if (typeof newProgress === "undefined") {
+      return progressValue;
+    }
+    progressValue = newProgress;
+    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
+      progressValue = 1;
+      pause();
+      requestAnimationFrame(() => onFinish(progressValue, easedProgress));
+    }
+    easedProgress = ease(progressValue);
+    let toIndex = 0;
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+      toIndex += 1;
+    }
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
+    onProgress(progressValue, easedProgress);
+    return progressValue;
+  }
+  function tick(time) {
+    if (!isRunning) {
+      return;
+    }
+    progress((0, import_math.clamp01)((0, import_math.map)(time, startTime, endTime, 0, 1)));
+    requestAnimationFrame(tick);
+  }
+  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;
+    requestAnimationFrame(tick);
+  }
+  function play() {
+    if (isRunning) {
+      return;
+    }
+    startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
+    endTime = startTime + duration;
+    isRunning = true;
+    requestAnimationFrame(tick);
+  }
+  return {
+    start,
+    finish: () => progress(1),
+    pause,
+    play,
+    progress
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @typedef {import('./transform.js').TransformProps} TransformProps
+ * @typedef {import('../math/ease.js').EasingFunction} EasingFn
+ * @typedef {[number, number, number, number]} BezierCurve
+ * @typedef {{
+ *   duration?: number;
+ *   easing?: EasingFn|BezierCurve;
+ *   onProgress?: (progress: number, easedProgress: number) => void;
+ *   onFinish?: (progress: number, easedProgress: number) => void;
+ *  }} Options
+ * @typedef {TransformProps & {
+ *   opacity?: number;
+ *   transformOrigin?: string;
+ *   easing?: EasingFn|BezierCurve;
+ *   offset?: number;
+ * }} Keyframe
+ * @typedef {Keyframe & {
+ *   easing: EasingFn;
+ *   offset: number;
+ * }} NormalizedKeyframe
+ * @typedef {{
+ *   start: () => void;
+ *   pause: () => void;
+ *   play: () => void;
+ *   finish: () => void;
+ *   progress: (value: number?) => number
+ * }} Animate
+ */
+/**
+ * Animate an element.
+ * @param   {HTMLElement} element
+ * @param   {Keyframe[]} keyframes
+ * @param   {Options} options
+ * @returns {Animate}
+ */
+export function animate(element: HTMLElement, keyframes: Keyframe[], options?: Options): Animate;
+export type TransformProps = import('./transform.js').TransformProps;
+export type EasingFn = import('../math/ease.js').EasingFunction;
+export type BezierCurve = [number, number, number, number];
+export type Options = Options;
+export type Keyframe = TransformProps & {
+    opacity?: number;
+    transformOrigin?: string;
+    easing?: EasingFn | [number, number, number, number];
+    offset?: number;
+};
+export type NormalizedKeyframe = Keyframe & {
+    easing: EasingFn;
+    offset: number;
+};
+export type Animate = {
+    start: () => void;
+    pause: () => void;
+    play: () => void;
+    finish: () => void;
+    progress: (value: number | null) => number;
+};

package/utils/css/animate.js

@@ -0,0 +1,165 @@
+import { cubicBezier } from "@motionone/easing";
+import { lerp, map, clamp01 } from "../math/index.js";
+import isDefined from "../isDefined.js";
+import transform, { TRANSFORM_PROPS } from "./transform.js";
+let id = 0;
+const running = /* @__PURE__ */ new WeakMap();
+const noop = () => {
+};
+const PROGRESS_PRECISION = 1e-4;
+const CSSUnitConverter = {
+  "%": (value, sizeRef) => value * sizeRef / 100,
+  vh: (value) => value * window.innerHeight / 100,
+  vw: (value) => value * window.innerWidth / 100,
+  vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
+  vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
+};
+function getAnimationStepValue(val, sizeRef) {
+  if (typeof val === "number") {
+    return val;
+  }
+  if (!val[1] || !CSSUnitConverter[val[1]]) {
+    return val[0];
+  }
+  return CSSUnitConverter[val[1]](val[0], sizeRef);
+}
+function linear(value) {
+  return value;
+}
+function normalizeEase(ease) {
+  if (!isDefined(ease)) {
+    return linear;
+  }
+  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 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 scaleRenderStrategy = generateLerpRenderStrategy(1);
+const degreesRenderStrategy = generateLerpRenderStrategy(0);
+const transformRenderStrategies = {
+  x: widthBasedTranslateRenderStrategy,
+  y: heightBasedTranslateRenderStrategy,
+  z: widthBasedTranslateRenderStrategy,
+  scale: scaleRenderStrategy,
+  scaleX: scaleRenderStrategy,
+  scaleY: scaleRenderStrategy,
+  scaleZ: scaleRenderStrategy,
+  skew: degreesRenderStrategy,
+  skewX: degreesRenderStrategy,
+  skewY: degreesRenderStrategy,
+  rotate: degreesRenderStrategy,
+  rotateX: degreesRenderStrategy,
+  rotateY: degreesRenderStrategy,
+  rotateZ: degreesRenderStrategy
+};
+function render(element, from, to, progress) {
+  var _a, _b;
+  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
+  if (isDefined(from.opacity) || isDefined(to.opacity)) {
+    element.style.opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+  } else if (element.style.opacity) {
+    element.style.opacity = "";
+  }
+  if (isDefined(to.transformOrigin)) {
+    element.style.transformOrigin = to.transformOrigin;
+  } else if (element.style.transformOrigin) {
+    element.style.transformOrigin = "";
+  }
+  transform(element, Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
+    return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+  })));
+}
+function animate(element, keyframes, options = {}) {
+  var _a;
+  let progressValue = 0;
+  let easedProgress = 0;
+  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;
+  }
+  function progress(newProgress) {
+    if (typeof newProgress === "undefined") {
+      return progressValue;
+    }
+    progressValue = newProgress;
+    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
+      progressValue = 1;
+      pause();
+      requestAnimationFrame(() => onFinish(progressValue, easedProgress));
+    }
+    easedProgress = ease(progressValue);
+    let toIndex = 0;
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+      toIndex += 1;
+    }
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
+    onProgress(progressValue, easedProgress);
+    return progressValue;
+  }
+  function tick(time) {
+    if (!isRunning) {
+      return;
+    }
+    progress(clamp01(map(time, startTime, endTime, 0, 1)));
+    requestAnimationFrame(tick);
+  }
+  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;
+    requestAnimationFrame(tick);
+  }
+  function play() {
+    if (isRunning) {
+      return;
+    }
+    startTime = performance.now() - lerp(0, duration, progressValue);
+    endTime = startTime + duration;
+    isRunning = true;
+    requestAnimationFrame(tick);
+  }
+  return {
+    start,
+    finish: () => progress(1),
+    pause,
+    play,
+    progress
+  };
+}
+export {
+  animate
+};

package/utils/css/classes.cjs

@@ -24,7 +24,7 @@ __export(classes_exports, {
   toggle: () => toggle
 });
 module.exports = __toCommonJS(classes_exports);
-function setClasses(element, classNames, method = "add", forceToggle = void 0) {
+function setClasses(element, classNames, method, forceToggle) {
   if (!element || !classNames) {
     return;
   }
@@ -36,12 +36,12 @@ function setClasses(element, classNames, method = "add", forceToggle = void 0) {
   }
 }
 function add(element, classNames) {
-  setClasses(element, classNames);
+  setClasses(element, classNames, "add");
 }
 function remove(element, classNames) {
   setClasses(element, classNames, "remove");
 }
-function toggle(element, classNames, force = void 0) {
+function toggle(element, classNames, force) {
   setClasses(element, classNames, "toggle", force);
 }
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/classes.d.ts

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

package/utils/css/classes.js

@@ -1,4 +1,4 @@
-function setClasses(element, classNames, method = "add", forceToggle = void 0) {
+function setClasses(element, classNames, method, forceToggle) {
   if (!element || !classNames) {
     return;
   }
@@ -10,12 +10,12 @@ function setClasses(element, classNames, method = "add", forceToggle = void 0) {
   }
 }
 function add(element, classNames) {
-  setClasses(element, classNames);
+  setClasses(element, classNames, "add");
 }
 function remove(element, classNames) {
   setClasses(element, classNames, "remove");
 }
-function toggle(element, classNames, force = void 0) {
+function toggle(element, classNames, force) {
   setClasses(element, classNames, "toggle", force);
 }
 export {

package/utils/css/getOffsetSizes.cjs

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/getOffsetSizes.js
+var getOffsetSizes_exports = {};
+__export(getOffsetSizes_exports, {
+  default: () => getOffsetSizes
+});
+module.exports = __toCommonJS(getOffsetSizes_exports);
+function getOffsetSizes(element) {
+  let parent = element;
+  let x = -window.pageXOffset;
+  let y = -window.pageYOffset;
+  while (parent) {
+    x += parent.offsetLeft;
+    y += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  const width = element.offsetWidth;
+  const height = element.offsetWidth;
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: width + x,
+    bottom: height + y,
+    left: x
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/getOffsetSizes.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/utils/css/getOffsetSizes.js

@@ -0,0 +1,25 @@
+function getOffsetSizes(element) {
+  let parent = element;
+  let x = -window.pageXOffset;
+  let y = -window.pageYOffset;
+  while (parent) {
+    x += parent.offsetLeft;
+    y += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  const width = element.offsetWidth;
+  const height = element.offsetWidth;
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: width + x,
+    bottom: height + y,
+    left: x
+  };
+}
+export {
+  getOffsetSizes as default
+};

package/utils/css/index.cjs

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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);
 
@@ -24,15 +25,20 @@ var css_exports = {};
 __export(css_exports, {
   addClass: () => import_classes.add,
   addStyle: () => import_styles.add,
+  getOffsetSizes: () => import_getOffsetSizes.default,
   matrix: () => import_matrix.default,
   removeClass: () => import_classes.remove,
   removeStyle: () => import_styles.remove,
   toggleClass: () => import_classes.toggle,
+  transform: () => import_transform.default,
   transition: () => import_transition.default
 });
 module.exports = __toCommonJS(css_exports);
+__reExport(css_exports, require("./animate.cjs"), module.exports);
 var import_classes = require("./classes.cjs");
 var import_styles = require("./styles.cjs");
+var import_getOffsetSizes = __toESM(require("./getOffsetSizes.cjs"), 1);
 var import_matrix = __toESM(require("./matrix.cjs"), 1);
+var import_transform = __toESM(require("./transform.cjs"), 1);
 var import_transition = __toESM(require("./transition.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/index.d.ts

@@ -1,4 +1,7 @@
+export * from "./animate.js";
+export { default as getOffsetSizes } from "./getOffsetSizes.js";
 export { default as matrix } from "./matrix.js";
+export { default as transform } from "./transform.js";
 export { default as transition } from "./transition.js";
 export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
 export { add as addStyle, remove as removeStyle } from "./styles.js";

package/utils/css/index.js

@@ -1,13 +1,18 @@
+export * from "./animate.js";
 import { add, remove, toggle } from "./classes.js";
 import { add as add2, remove as remove2 } from "./styles.js";
-import { default as default2 } from "./matrix.js";
-import { default as default3 } from "./transition.js";
+import { default as default2 } from "./getOffsetSizes.js";
+import { default as default3 } from "./matrix.js";
+import { default as default4 } from "./transform.js";
+import { default as default5 } from "./transition.js";
 export {
   add as addClass,
   add2 as addStyle,
-  default2 as matrix,
+  default2 as getOffsetSizes,
+  default3 as matrix,
   remove as removeClass,
   remove2 as removeStyle,
   toggle as toggleClass,
-  default3 as transition
+  default4 as transform,
+  default5 as transition
 };