@studiometa/ui 0.2.6 → 0.2.9

package/atoms/Cursor/Cursor.cjs

@@ -51,7 +51,7 @@ var Cursor = class extends import_js_toolkit.Base {
     }
     this.pointerX = x;
     this.pointerY = y;
-    let scale = 1;
+    let { scale } = this.$options;
     if (!event) {
       this.pointerScale = scale;
       return;
@@ -96,6 +96,10 @@ __publicField(Cursor, "config", {
       type: String,
       default: "[data-cursor-shrink], [data-cursor-shrink] *"
     },
+    scale: {
+      type: Number,
+      default: 1
+    },
     growTo: {
       type: Number,
       default: 2

package/atoms/Cursor/Cursor.d.ts

@@ -6,6 +6,7 @@
  * @typedef {Object} CursorOptions
  * @property {string} growSelectors
  * @property {string} shrinkSelectors
+ * @property {number} scale
  * @property {number} growTo
  * @property {number} shrinkTo
  * @property {number} translateDampFactor
@@ -37,6 +38,10 @@ export default class Cursor extends Base {
                 type: StringConstructor;
                 default: string;
             };
+            scale: {
+                type: NumberConstructor;
+                default: number;
+            };
             growTo: {
                 type: NumberConstructor;
                 default: number;
@@ -125,6 +130,7 @@ export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type CursorOptions = {
     growSelectors: string;
     shrinkSelectors: string;
+    scale: number;
     growTo: number;
     shrinkTo: number;
     translateDampFactor: number;

package/atoms/Cursor/Cursor.js

@@ -1 +1 @@
-import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let e=1;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};
+import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},scale:{type:Number,default:1},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let{scale:e}=this.$options;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};

package/atoms/LargeText/LargeText.cjs

@@ -30,11 +30,11 @@ module.exports = __toCommonJS(LargeText_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
-  translateX = 0;
+  x = 0;
   deltaY = 0;
   transform = {
     skewX: 0,
-    translateX: 0
+    x: 0
   };
   width = 0;
   mounted() {
@@ -47,21 +47,21 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
     this.deltaY = props.delta.y;
   }
   ticked() {
-    this.translateX -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
-    this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
+    this.x -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
+    this.transform.x = (0, import_utils.damp)(this.x, this.transform.x, 0.25);
     if (this.$options.skew) {
-      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
+      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY * -1, -50, 50) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
     }
-    if (this.translateX <= this.width * -1) {
-      this.translateX = 0;
-      this.transform.translateX += this.width;
-    } else if (this.$options.sensitivity < 0 && this.translateX >= this.width) {
-      this.translateX = 0;
-      this.transform.translateX -= this.width;
+    if (this.x <= this.width * -1) {
+      this.x = 0;
+      this.transform.x += this.width;
+    } else if (this.$options.sensitivity < 0 && this.x >= this.width) {
+      this.x = 0;
+      this.transform.x -= this.width;
     }
-    (0, import_utils.nextFrame)(() => {
-      this.$refs.target.style.transform = (0, import_utils.matrix)(this.transform) + " translateZ(0px)";
-    });
+    return () => {
+      (0, import_utils.transform)(this.$refs.target, this.transform);
+    };
   }
 };
 __publicField(LargeText, "config", {

package/atoms/LargeText/LargeText.d.ts

@@ -34,7 +34,7 @@ export default class LargeText extends Base {
      * Translate X.
      * @type {number}
      */
-    translateX: number;
+    x: number;
     /**
      * Scroll delta Y.
      * @type {number}
@@ -45,7 +45,7 @@ export default class LargeText extends Base {
      */
     transform: {
         skewX: number;
-        translateX: number;
+        x: number;
     };
     /**
      * Target width.
@@ -77,9 +77,8 @@ export default class LargeText extends Base {
      * Update values on raf.
      *
      * @this    {LargeTextInterface}
-     * @returns {void}
      */
-    ticked(this: LargeTextInterface): void;
+    ticked(this: LargeTextInterface): () => void;
 }
 export type LargeTextInterface = LargeText & {
     $refs: {

package/atoms/LargeText/LargeText.js

@@ -1 +1 @@
-import{Base as i,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,matrix as a,clamp as r,nextFrame as n}from"@studiometa/js-toolkit/utils";class h extends e(i,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};translateX=0;deltaY=0;transform={skewX:0,translateX:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(s){this.deltaY=s.delta.y}ticked(){this.translateX-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.translateX=t(this.translateX,this.transform.translateX,.25),this.$options.skew&&(this.transform.skewX=t(r(this.deltaY/20*-1,-.5,.5)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.translateX<=this.width*-1?(this.translateX=0,this.transform.translateX+=this.width):this.$options.sensitivity<0&&this.translateX>=this.width&&(this.translateX=0,this.transform.translateX-=this.width),n(()=>{this.$refs.target.style.transform=a(this.transform)+" translateZ(0px)"})}}export{h as default};
+import{Base as s,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,clamp as h,transform as r}from"@studiometa/js-toolkit/utils";class a extends e(s,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};x=0;deltaY=0;transform={skewX:0,x:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(i){this.deltaY=i.delta.y}ticked(){return this.x-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.x=t(this.x,this.transform.x,.25),this.$options.skew&&(this.transform.skewX=t(h(this.deltaY*-1,-50,50)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.x<=this.width*-1?(this.x=0,this.transform.x+=this.width):this.$options.sensitivity<0&&this.x>=this.width&&(this.x=0,this.transform.x-=this.width),()=>{r(this.$refs.target,this.transform)}}}export{a as default};

package/atoms/LargeText/LargeText.twig

@@ -18,7 +18,7 @@
   merge_html_attributes(
     attr ?? null,
     { data_component: 'LargeText' },
-    { class: 'overflow-x-hidden pointer-events-none' }
+    { class: 'overflow-x-hidden pointer-events-none', style: { contain: 'content' } }
   )
 %}
 

package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs

@@ -29,71 +29,25 @@ __export(AbstractScrollAnimation_exports, {
 module.exports = __toCommonJS(AbstractScrollAnimation_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-function getDefaults() {
-  return {
-    x: 0,
-    y: 0,
-    z: 0,
-    scale: 1,
-    scaleX: 1,
-    scaleY: 1,
-    rotate: 0,
-    skewX: 0,
-    skewY: 0,
-    opacity: 1
-  };
-}
 var AbstractScrollAnimation = class extends (0, import_js_toolkit.withFreezedOptions)(import_js_toolkit.Base) {
   get target() {
     return this.$el;
   }
-  get has() {
-    const has = {
-      x: false,
-      y: false,
-      z: false,
-      scale: false,
-      scaleX: false,
-      scaleY: false,
-      rotate: false,
-      skewX: false,
-      skewY: false,
-      opacity: false,
-      transform: false
-    };
-    Object.keys(this.$options.from).forEach((key) => {
-      has[key] = this.$options.from[key] !== this.$options.to[key];
-    });
-    has.transform = Object.keys(has).filter((key) => key !== "opacity" && key !== "transform").some((key) => has[key]);
-    Object.defineProperty(this, "has", { value: has });
-    return has;
+  animation;
+  mounted() {
+    let { keyframes } = this.$options;
+    const { from, to } = this.$options;
+    if (keyframes.length <= 0 && from && to) {
+      keyframes = [from, to];
+    }
+    this.animation = (0, import_utils.animate)(this.target, keyframes, { easing: this.$options.easing });
   }
   scrolledInView(props) {
-    if (!this.has.opacity && !this.has.transform) {
-      return;
-    }
     const progress = (0, import_utils.map)((0, import_utils.clamp)(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]), this.$options.playRange[0], this.$options.playRange[1], 0, 1);
     this.render(progress);
   }
   render(progress) {
-    if (this.has.opacity) {
-      this.target.style.opacity = String((0, import_utils.map)(progress, 0, 1, this.$options.from.opacity, this.$options.to.opacity));
-    }
-    if (this.has.transform) {
-      let transform = (0, import_utils.matrix)({
-        translateX: this.has.x ? (0, import_utils.lerp)(this.$options.from.x, this.$options.to.x, progress) : void 0,
-        translateY: this.has.y ? (0, import_utils.lerp)(this.$options.from.y, this.$options.to.y, progress) : void 0,
-        scaleX: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleX ? (0, import_utils.lerp)(this.$options.from.scaleX, this.$options.to.scaleX, progress) : void 0,
-        scaleY: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleY ? (0, import_utils.lerp)(this.$options.from.scaleY, this.$options.to.scaleY, progress) : void 0,
-        skewX: this.has.skewX ? (0, import_utils.lerp)(this.$options.from.skewX, this.$options.to.skewX, progress) : void 0,
-        skewY: this.has.skewY ? (0, import_utils.lerp)(this.$options.from.skewY, this.$options.to.skewY, progress) : void 0
-      });
-      if (this.has.rotate) {
-        transform += ` rotate(${(0, import_utils.lerp)(this.$options.from.rotate, this.$options.to.rotate, progress)}deg)`;
-      }
-      transform += `translateZ(${this.has.z ? (0, import_utils.lerp)(this.$options.from.z, this.$options.to.z, progress) : 0})`;
-      this.target.style.transform = transform;
-    }
+    this.animation.progress(progress);
   }
 };
 __publicField(AbstractScrollAnimation, "config", {
@@ -113,13 +67,18 @@ __publicField(AbstractScrollAnimation, "config", {
     },
     from: {
       type: Object,
-      default: getDefaults,
-      merge: true
+      default: () => ({})
     },
     to: {
       type: Object,
-      default: getDefaults,
-      merge: true
+      default: () => ({})
+    },
+    keyframes: {
+      type: Array
+    },
+    easing: {
+      type: Array,
+      default: () => [0, 0, 1, 1]
     }
   }
 });

package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts

@@ -1,11 +1,16 @@
+/**
+ * @typedef {typeof AbstractScrollAnimation} AbstractScrollAnimationConstructor
+ * @typedef {import('@studiometa/js-toolkit/utils/css/animate.js').Keyframe} Keyframe
+ */
 /**
  * @typedef {AbstractScrollAnimation & {
  *   $options: {
  *     playRange: string,
  *     dampFactor: number,
  *     dampPrecision: number,
- *     from: AnimationOptions,
- *     to: AnimationOptions,
+ *     from: Keyframe,
+ *     to: Keyframe,
+ *     keyframes: Keyframe[],
  *   },
  * }} ScrollAnimationChildInterface
  */
@@ -43,13 +48,18 @@ export default class AbstractScrollAnimation extends Base {
             };
             from: {
                 type: ObjectConstructor;
-                default: typeof getDefaults;
-                merge: boolean;
+                default: () => {};
             };
             to: {
                 type: ObjectConstructor;
-                default: typeof getDefaults;
-                merge: boolean;
+                default: () => {};
+            };
+            keyframes: {
+                type: ArrayConstructor;
+            };
+            easing: {
+                type: ArrayConstructor;
+                default: () => number[];
             };
         };
     };
@@ -60,21 +70,14 @@ export default class AbstractScrollAnimation extends Base {
      */
     get target(): HTMLElement;
     /**
-     * Flags for style detection.
+     * @type {ReturnType<animate>}
      */
-    get has(): {
-        x: boolean;
-        y: boolean;
-        z: boolean;
-        scale: boolean;
-        scaleX: boolean;
-        scaleY: boolean;
-        rotate: boolean;
-        skewX: boolean;
-        skewY: boolean;
-        opacity: boolean;
-        transform: boolean;
-    };
+    animation: ReturnType<typeof animate>;
+    /**
+     * @this {ScrollAnimationChildInterface}
+     * @returns {void}
+     */
+    mounted(this: ScrollAnimationChildInterface): void;
     /**
      * @todo do not add unnecessary styles
      */
@@ -88,46 +91,16 @@ export default class AbstractScrollAnimation extends Base {
     render(progress: number): void;
 }
 export type AbstractScrollAnimationConstructor = typeof AbstractScrollAnimation;
-export type AnimationOptions = {
-    x?: number;
-    y?: number;
-    z?: number;
-    scale?: number;
-    scaleX?: number;
-    scaleY?: number;
-    rotate?: number;
-    skewX?: number;
-    skewY?: number;
-    opacity?: number;
-};
+export type Keyframe = import('@studiometa/js-toolkit/utils/css/animate.js').Keyframe;
 export type ScrollAnimationChildInterface = AbstractScrollAnimation & {
     $options: {
         playRange: string;
         dampFactor: number;
         dampPrecision: number;
-        from: AnimationOptions;
-        to: AnimationOptions;
+        from: Keyframe;
+        to: Keyframe;
+        keyframes: Keyframe[];
     };
 };
 import { Base } from "@studiometa/js-toolkit";
-/**
- * @typedef {typeof AbstractScrollAnimation} AbstractScrollAnimationConstructor
- * @typedef {{
- *   x?: number;
- *   y?: number;
- *   z?: number;
- *   scale?: number;
- *   scaleX?: number;
- *   scaleY?: number;
- *   rotate?: number;
- *   skewX?: number;
- *   skewY?: number;
- *   opacity?: number;
- * }} AnimationOptions
- */
-/**
- * Get animation configuration defaults.
- * @returns {AnimationOptions}
- */
-declare function getDefaults(): AnimationOptions;
-export {};
+import { animate } from "@studiometa/js-toolkit/utils/css/animate.js";

package/atoms/ScrollAnimation/AbstractScrollAnimation.js

@@ -1 +1 @@
-import{Base as a,withFreezedOptions as n}from"@studiometa/js-toolkit";import{matrix as h,lerp as e,map as o,clamp as r}from"@studiometa/js-toolkit/utils";function i(){return{x:0,y:0,z:0,scale:1,scaleX:1,scaleY:1,rotate:0,skewX:0,skewY:0,opacity:1}}class l extends n(a){static config={name:"AbstractScrollAnimation",options:{playRange:{type:Array,default:()=>[0,1]},dampFactor:{type:Number,default:.5},dampPrecision:{type:Number,default:.001},from:{type:Object,default:i,merge:!0},to:{type:Object,default:i,merge:!0}}};get target(){return this.$el}get has(){const t={x:!1,y:!1,z:!1,scale:!1,scaleX:!1,scaleY:!1,rotate:!1,skewX:!1,skewY:!1,opacity:!1,transform:!1};return Object.keys(this.$options.from).forEach(s=>{t[s]=this.$options.from[s]!==this.$options.to[s]}),t.transform=Object.keys(t).filter(s=>s!=="opacity"&&s!=="transform").some(s=>t[s]),Object.defineProperty(this,"has",{value:t}),t}scrolledInView(t){if(!this.has.opacity&&!this.has.transform)return;const s=o(r(t.dampedProgress.y,this.$options.playRange[0],this.$options.playRange[1]),this.$options.playRange[0],this.$options.playRange[1],0,1);this.render(s)}render(t){if(this.has.opacity&&(this.target.style.opacity=String(o(t,0,1,this.$options.from.opacity,this.$options.to.opacity))),this.has.transform){let s=h({translateX:this.has.x?e(this.$options.from.x,this.$options.to.x,t):void 0,translateY:this.has.y?e(this.$options.from.y,this.$options.to.y,t):void 0,scaleX:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleX?e(this.$options.from.scaleX,this.$options.to.scaleX,t):void 0,scaleY:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleY?e(this.$options.from.scaleY,this.$options.to.scaleY,t):void 0,skewX:this.has.skewX?e(this.$options.from.skewX,this.$options.to.skewX,t):void 0,skewY:this.has.skewY?e(this.$options.from.skewY,this.$options.to.skewY,t):void 0});this.has.rotate&&(s+=` rotate(${e(this.$options.from.rotate,this.$options.to.rotate,t)}deg)`),s+=`translateZ(${this.has.z?e(this.$options.from.z,this.$options.to.z,t):0})`,this.target.style.transform=s}}}export{l as default};
+import{Base as i,withFreezedOptions as o}from"@studiometa/js-toolkit";import{map as s,clamp as n,animate as r}from"@studiometa/js-toolkit/utils";class p extends o(i){static config={name:"AbstractScrollAnimation",options:{playRange:{type:Array,default:()=>[0,1]},dampFactor:{type:Number,default:.5},dampPrecision:{type:Number,default:.001},from:{type:Object,default:()=>({})},to:{type:Object,default:()=>({})},keyframes:{type:Array},easing:{type:Array,default:()=>[0,0,1,1]}}};get target(){return this.$el}animation;mounted(){let{keyframes:t}=this.$options;const{from:e,to:a}=this.$options;t.length<=0&&e&&a&&(t=[e,a]),this.animation=r(this.target,t,{easing:this.$options.easing})}scrolledInView(t){const e=s(n(t.dampedProgress.y,this.$options.playRange[0],this.$options.playRange[1]),this.$options.playRange[0],this.$options.playRange[1],0,1);this.render(e)}render(t){this.animation.progress(t)}}export{p as default};

package/atoms/ScrollAnimation/ScrollAnimation.d.ts

@@ -26,13 +26,18 @@ export default class ScrollAnimation extends AbstractScrollAnimation {
             };
             from: {
                 type: ObjectConstructor;
-                default: () => import("./AbstractScrollAnimation.js").AnimationOptions;
-                merge: boolean;
+                default: () => {};
             };
             to: {
                 type: ObjectConstructor;
-                default: () => import("./AbstractScrollAnimation.js").AnimationOptions;
-                merge: boolean;
+                default: () => {};
+            };
+            keyframes: {
+                type: ArrayConstructor;
+            };
+            easing: {
+                type: ArrayConstructor;
+                default: () => number[];
             };
         };
     };

package/atoms/ScrollAnimation/animationScrollWithEase.cjs

@@ -23,29 +23,8 @@ __export(animationScrollWithEase_exports, {
 });
 module.exports = __toCommonJS(animationScrollWithEase_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
-var eases = {
-  outQuad: import_utils.easeOutQuad,
-  inQuad: import_utils.easeInQuad,
-  inOutQuad: import_utils.easeInOutQuad,
-  outCubic: import_utils.easeOutCubic,
-  inCubic: import_utils.easeInCubic,
-  inOutCubic: import_utils.easeInOutCubic,
-  outQuart: import_utils.easeOutQuart,
-  inQuart: import_utils.easeInQuart,
-  inOutQuart: import_utils.easeInOutQuart,
-  outQuint: import_utils.easeOutQuint,
-  inQuint: import_utils.easeInQuint,
-  inOutQuint: import_utils.easeInOutQuint,
-  outSine: import_utils.easeOutSine,
-  inSine: import_utils.easeInSine,
-  inOutSine: import_utils.easeInOutSine,
-  outCirc: import_utils.easeOutCirc,
-  inCirc: import_utils.easeInCirc,
-  inOutCirc: import_utils.easeInOutCirc,
-  outExpo: import_utils.easeOutExpo,
-  inExpo: import_utils.easeInExpo,
-  inOutExpo: import_utils.easeInOutExpo
-};
+var regex = /ease([A-Z])/;
+var eases = Object.fromEntries(Object.entries(import_utils.ease).filter(([name]) => name.startsWith("ease")).map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value]));
 function animationScrollWithEase(ScrollAnimation) {
   return class extends ScrollAnimation {
     static config = {
@@ -60,7 +39,7 @@ function animationScrollWithEase(ScrollAnimation) {
       }
     };
     render(progress) {
-      if (eases[this.$options.ease]) {
+      if (typeof eases[this.$options.ease] === "function") {
         progress = eases[this.$options.ease](progress);
       }
       super.render(progress);

package/atoms/ScrollAnimation/animationScrollWithEase.js

@@ -1 +1 @@
-import{easeOutQuad as n,easeInQuad as i,easeInOutQuad as a,easeOutCubic as s,easeInCubic as o,easeInOutCubic as O,easeOutQuart as c,easeInQuart as Q,easeInOutQuart as r,easeOutQuint as I,easeInQuint as p,easeInOutQuint as C,easeOutSine as d,easeInSine as f,easeInOutSine as x,easeOutCirc as E,easeInCirc as b,easeInOutCirc as S,easeOutExpo as h,easeInExpo as g,easeInOutExpo as $}from"@studiometa/js-toolkit/utils";const u={outQuad:n,inQuad:i,inOutQuad:a,outCubic:s,inCubic:o,inOutCubic:O,outQuart:c,inQuart:Q,inOutQuart:r,outQuint:I,inQuint:p,inOutQuint:C,outSine:d,inSine:f,inOutSine:x,outCirc:E,inCirc:b,inOutCirc:S,outExpo:h,inExpo:g,inOutExpo:$};function m(e){return class extends e{static config={...e.config,name:`${e.config.name}WithEase`,options:{...e.config.options,ease:{type:String,default:"outExpo"}}};render(t){u[this.$options.ease]&&(t=u[this.$options.ease](t)),super.render(t)}}}export{m as default};
+import{ease as n}from"@studiometa/js-toolkit/utils";const o=/ease([A-Z])/,s=Object.fromEntries(Object.entries(n).filter(([e])=>e.startsWith("ease")).map(([e,t])=>[e.replace(o,(f,a)=>a.toLowerCase()),t]));function i(e){return class extends e{static config={...e.config,name:`${e.config.name}WithEase`,options:{...e.config.options,ease:{type:String,default:"outExpo"}}};render(t){typeof s[this.$options.ease]=="function"&&(t=s[this.$options.ease](t)),super.render(t)}}}export{i as default};

package/molecules/Menu/Menu.cjs

@@ -35,20 +35,11 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
 var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
 var _Menu = class extends import_js_toolkit.Base {
-  getDirectChildren(name) {
-    if (!this.$children[name]) {
-      return [];
-    }
-    if (!this.$children.Menu) {
-      return this.$children[name];
-    }
-    return this.$children[name].filter((child) => this.$children.Menu.every((menu) => menu.$children[name] ? !menu.$children[name].includes(child) : true));
-  }
   get menuList() {
-    return this.getDirectChildren("MenuList")[0];
+    return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
   }
   get menuBtn() {
-    return this.getDirectChildren("MenuBtn")[0];
+    return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuBtn")[0];
   }
   get shouldReactOnClick() {
     return this.$options.mode === "click";
@@ -80,18 +71,18 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     }
   }
-  onMenuBtnBtnClick(event, index) {
-    if (this.$children.MenuBtn[index] === this.menuBtn && this.shouldReactOnClick) {
+  onMenuBtnClick(index, event) {
+    if ((0, import_js_toolkit.isDirectChild)(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
       event.preventDefault();
       this.toggle();
     }
   }
-  onMenuBtnBtnMouseenter(event, index) {
+  onMenuBtnMouseenter(index) {
     if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
       this.open();
     }
   }
-  onMenuBtnBtnMouseleave() {
+  onMenuBtnMouseleave() {
     if (this.shouldReactOnClick) {
       return;
     }
@@ -101,7 +92,7 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     });
   }
-  onMenuListItemsMouseleave() {
+  onMenuListMouseleave() {
     if (this.shouldReactOnClick) {
       return;
     }

package/molecules/Menu/Menu.d.ts

@@ -4,6 +4,9 @@
  *     Menu: Menu[],
  *     MenuBtn: MenuBtn[],
  *     MenuList: MenuList[],
+ *   },
+ *   $options: {
+ *     mode: 'click'|'hover'
  *   }
  * }} MenuInterface
  */
@@ -29,14 +32,6 @@ export default class Menu extends Base {
             };
         };
     };
-    /**
-     * Get direct children.
-     *
-     * @this    {MenuInterface}
-     * @param   {string} name
-     * @returns {any[]}
-     */
-    getDirectChildren(this: MenuInterface, name: string): any[];
     /**
      * Get the first `MenuList` instance.
      *
@@ -79,31 +74,33 @@ export default class Menu extends Base {
      * Toggle menu items on button click;
      *
      * @this    {MenuInterface}
+     * @param   {number} index
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMenuBtnBtnClick(this: MenuInterface, event: MouseEvent, index: any): void;
+    onMenuBtnClick(this: MenuInterface, index: number, event: MouseEvent): void;
     /**
      * Open menu items on button mouse enter.
      *
      * @this    {MenuInterface}
+     * @param   {number} index
      * @returns {void}
      */
-    onMenuBtnBtnMouseenter(this: MenuInterface, event: any, index: any): void;
+    onMenuBtnMouseenter(this: MenuInterface, index: number): void;
     /**
      * Close menu items on button mouse leave.
      *
      * @this    {MenuInterface}
      * @returns {void}
      */
-    onMenuBtnBtnMouseleave(this: MenuInterface): void;
+    onMenuBtnMouseleave(this: MenuInterface): void;
     /**
      * Close menu items on button mouse leave.
      *
      * @this    {MenuInterface}
      * @returns {void}
      */
-    onMenuListItemsMouseleave(this: MenuInterface): void;
+    onMenuListMouseleave(this: MenuInterface): void;
     /**
      * Close other non-parent menu items on menu items open.
      *
@@ -134,6 +131,9 @@ export type MenuInterface = Menu & {
         MenuBtn: MenuBtn[];
         MenuList: MenuList[];
     };
+    $options: {
+        mode: 'click' | 'hover';
+    };
 };
 import { Base } from "@studiometa/js-toolkit";
 import MenuList from "./MenuList.js";

package/molecules/Menu/Menu.js

@@ -1 +1 @@
-import{Base as h}from"@studiometa/js-toolkit";import{nextTick as s}from"@studiometa/js-toolkit/utils";import u from"./MenuBtn.js";import o from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:u,MenuList:o,Menu:n},options:{mode:{type:String,default:"click"}}};getDirectChildren(t){return this.$children[t]?this.$children.Menu?this.$children[t].filter(e=>this.$children.Menu.every(i=>i.$children[t]?!i.$children[t].includes(e):!0)):this.$children[t]:[]}get menuList(){return this.getDirectChildren("MenuList")[0]}get menuBtn(){return this.getDirectChildren("MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const r=document.activeElement===this.menuBtn.$el;t&&r&&this.toggle()}}}onMenuBtnBtnClick(t,e){this.$children.MenuBtn[e]===this.menuBtn&&this.shouldReactOnClick&&(t.preventDefault(),this.toggle())}onMenuBtnBtnMouseenter(t,e){this.$children.MenuBtn[e]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnBtnMouseleave(){this.shouldReactOnClick||s(()=>{this.isHover||this.close()})}onMenuListItemsMouseleave(){this.shouldReactOnClick||s(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}export{n as default};
+import{Base as h,isDirectChild as r,getDirectChildren as s}from"@studiometa/js-toolkit";import{nextTick as o}from"@studiometa/js-toolkit/utils";import l from"./MenuBtn.js";import c from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:l,MenuList:c,Menu:n},options:{mode:{type:String,default:"click"}}};get menuList(){return s(this,"Menu","MenuList")[0]}get menuBtn(){return s(this,"Menu","MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const u=document.activeElement===this.menuBtn.$el;t&&u&&this.toggle()}}}onMenuBtnClick(t,e){r(this,"Menu","MenuBtn",this.$children.MenuBtn[t])&&this.shouldReactOnClick&&(e.preventDefault(),this.toggle())}onMenuBtnMouseenter(t){this.$children.MenuBtn[t]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}export{n as default};

package/molecules/Menu/MenuBtn.cjs

@@ -32,22 +32,18 @@ var MenuBtn = class extends import_js_toolkit.Base {
   isHover = false;
   onClick(event) {
     event.stopPropagation();
-    this.$emit("btn-click", event);
   }
   onMouseenter(event) {
     this.isHover = true;
     event.stopPropagation();
-    this.$emit("btn-mouseenter", event);
   }
   onMouseleave(event) {
     this.isHover = false;
     event.stopPropagation();
-    this.$emit("btn-mouseleave", event);
   }
 };
 __publicField(MenuBtn, "config", {
   name: "MenuBtn",
-  debug: true,
-  emits: ["btn-click", "btn-mouseenter", "btn-mouseleave"]
+  debug: true
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Menu/MenuBtn.d.ts

@@ -8,7 +8,6 @@ export default class MenuBtn extends Base {
     static config: {
         name: string;
         debug: boolean;
-        emits: string[];
     };
     /**
      * Wether the button is hovered or not.

package/molecules/Menu/MenuBtn.js

@@ -1 +1 @@
-import{Base as t}from"@studiometa/js-toolkit";class o extends t{static config={name:"MenuBtn",debug:!0,emits:["btn-click","btn-mouseenter","btn-mouseleave"]};isHover=!1;onClick(e){e.stopPropagation(),this.$emit("btn-click",e)}onMouseenter(e){this.isHover=!0,e.stopPropagation(),this.$emit("btn-mouseenter",e)}onMouseleave(e){this.isHover=!1,e.stopPropagation(),this.$emit("btn-mouseleave",e)}}export{o as default};
+import{Base as o}from"@studiometa/js-toolkit";class t extends o{static config={name:"MenuBtn",debug:!0};isHover=!1;onClick(e){e.stopPropagation()}onMouseenter(e){this.isHover=!0,e.stopPropagation()}onMouseleave(e){this.isHover=!1,e.stopPropagation()}}export{t as default};

package/molecules/Menu/MenuList.cjs

@@ -59,9 +59,8 @@ var _MenuList = class extends import_Transition.default {
   onMouseenter() {
     this.isHover = true;
   }
-  onMouseleave(event) {
+  onMouseleave() {
     this.isHover = false;
-    this.$emit("items-mouseleave", event);
   }
   open() {
     if (this.isOpen) {