@studiometa/ui 0.2.5 → 0.2.8

package/atoms/Button/Button.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * Button component.
+ *
+ * @param string $label
+ * @param string $tag
+ * @param string $href
+ * @param array $attr
+ * @param string $icon
+ * @param array|string $icon_classes
+ * @param 'start'|'end' $icon_position
+ * @param boolean $icon_only
+ */
+#}
+
+{# Customizable tag with a default value. #}
+{% set tag =
+  tag|default(href is defined or (attr is defined and attr.href is defined) ? 'a' : 'button')
+%}
+
+{# Default icon values #}
+{% set icon_position = icon_position|default('start') %}
+{% set icon_only = icon_only|default(false) %}
+
+{# Final attributes are a merge of the defaults, the given and then the required #}
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      title: label,
+      type: tag == 'button' ? 'button' : false,
+      href: tag == 'a' and href is defined ? href : false,
+      aria_label: icon_only ? label : false
+    },
+    { class: ['btn'] }
+  )
+%}
+
+{% set rendered_icon %}
+  {% block icon %}
+    {% include '@ui/atoms/Icon/Icon.twig' with {
+      name: icon ?? '',
+      classes: icon_classes ?? {
+        'mr-3': not icon_only and icon_position == 'start',
+        'ml-3': not icon_only and icon_position == 'end',
+       }
+    } %}
+  {% endblock %}
+{% endset %}
+
+{% html_element tag with attributes %}
+  {% block content %}
+    {% if icon is defined and icon_position == 'start' %}
+      {{ rendered_icon }}
+    {% endif %}
+    {% block label %}
+      {% if icon_only %}
+        <span class="sr-only">{{ label }}</span>
+      {% else %}
+        {{ label }}
+      {% endif %}
+    {% endblock %}
+    {% if icon is defined and icon_position == 'end' %}
+      {{ rendered_icon }}
+    {% endif %}
+  {% endblock %}
+{% end_html_element %}

package/atoms/Button/StyledButton.twig

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ *   Styled button.
+ *
+ * @param 'primary'|'secondary'|'tertiary' $theme
+ */
+#}
+
+{% extends '@ui/atoms/Button/Button.twig' %}
+
+{% set icon_only = icon_only|default(false) %}
+
+{% set theme = theme|default('primary') %}
+
+{% set theme_shared = [
+  'rounded cursor-pointer transition',
+  'disabled:cursor-not-allowed',
+  {
+    'inline-block': icon is not defined,
+    'inline-flex items-center': icon is defined,
+    'px-6 py-4': not icon_only,
+    'p-4': icon_only
+  }
+] %}
+
+{% set theme_primary = ['text-white bg-black', 'hover:bg-opacity-75 disabled:bg-opacity-50'] %}
+
+{% set theme_secondary = [
+  'ring ring-inset ring-2 ring-black ring-opacity-25',
+  {
+    'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
+      or attr is not defined
+  }
+] %}
+
+{% set attr =
+  attr
+    |default({})
+    |merge({
+      class: [
+        theme_shared,
+        theme == 'primary' ? theme_primary : '',
+        theme == 'secondary' ? theme_secondary : ''
+      ]
+    })
+%}

package/atoms/Cursor/Cursor.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ *   Cursor component.
+ *
+ * @param array $attr
+ *   Custom attributes for the root element.
+ *
+ * @block $content
+ *   Custom content for the root element, defaults to `''`.
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      data_component: 'Cursor',
+      class: 'fixed top-0 left-0 w-12 h-12 -mt-6 -ml-6 rounded-full bg-black'
+    },
+    { class: 'pointer-events-none' }
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
+  {% block content %}
+  {% endblock %}
+</div>

package/atoms/Figure/Figure.twig

@@ -0,0 +1,120 @@
+{#
+/**
+ * @file
+ * Figure component.
+ *
+ * @param string $src
+ * @param string $srcset
+ * @param string $sizes
+ * @param number $width
+ * @param number $height
+ * @param string $alt
+ * @param string $caption
+ * @param boolean $lazy
+ * @param 'cover'|'contain'|'fill'|'none' $fit
+ *   Define how the image will fit.
+ * @param boolean $absolute
+ *   Use absolute position on the image holder instead of relative.
+ * @param boolean $inline
+ *   Wether to enable the display of the figure inline or not. When `inline`, the root element
+ *   will have a max-width set corresponding to the `width` given. Use with caution.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $inner_attr
+ *   Custom attributes for the inner element.
+ * @param array $img_attr
+ *   Custom attributes for the image element.
+ * @param array $caption_attr
+ *   Custom attributes for the caption element.
+ *
+ * @block $caption
+ *   Use this block to customize the image's caption.
+ *
+ * @todo
+ *  - twicpics: use TwicPics to serve image at the right size
+ *  - loading: display a loader while loading, the fallback image if there was an error
+ *  - mode: img | background → is it really necessary with `object-fit-...`?
+ */
+#}
+
+{% set absolute = absolute|default(false) %}
+{% set inline = inline|default(false) %}
+{% set fit = fit ?? null %}
+{% set height = height|default(100) %}
+{% set width = width|default(100) %}
+{% set lazy = lazy ?? true %}
+
+{%- set placeholder_markup -%}
+  <svg xmlns="http://www.w3.org/2000/svg"
+    viewbox="0 0 {{ width }} {{ height }}"
+    width="{{ width }}"
+    height="{{ height }}">
+    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="#eee" />
+  </svg>
+{%- endset -%}
+{% set generic_placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { data_component: 'Figure', class: ['figure', 'w-full'] },
+    {
+      style: { height: absolute ? '100%' : '', maxWidth: inline ? width ~ 'px' : '' },
+      data_option_lazy: lazy
+    }
+  )
+%}
+
+{% set img_attributes =
+  merge_html_attributes(
+    img_attr ?? null,
+    { class: 'figure__img' },
+    {
+      class: [
+        'absolute inset-0 w-full max-w-none h-full',
+        {
+          'object-cover': fit == 'cover',
+          'object-contain': fit == 'contain',
+          'object-fill': fit == 'fill',
+          'object-none': fit == 'none'
+        }
+      ],
+      src: lazy ? placeholder|default(generic_placeholder) : src,
+      data_src: lazy ? src|default(generic_placeholder) : src,
+      alt: alt|default(''),
+      width: width|default(false),
+      height: height|default(false),
+      srcset: srcset|default(false),
+      sizes: sizes|default(false),
+      data_ref: 'img'
+    }
+  )
+%}
+
+{% set inner_attributes =
+  merge_html_attributes(
+    inner_attr ?? null,
+    { class: ['figure__inner'] },
+    {
+      class: absolute ? ['absolute', 'inset-0'] : ['relative', 'w-full', 'h-0'],
+      style: { paddingTop: absolute ? '' : height * 100 / width ~ '%' }
+    }
+  )
+%}
+
+{% set caption_attributes =
+  merge_html_attributes(caption_attr ?? null, { class: 'figure__caption' })
+%}
+
+<figure {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(inner_attributes) }}>
+    <img {{ html_attributes(img_attributes) }} />
+  </div>
+  {% if caption is defined %}
+    {% block caption %}
+      <figcaption {{ html_attributes(caption_attributes) }}>
+        {{ caption }}
+      </figcaption>
+    {% endblock %}
+  {% endif %}
+</figure>

package/atoms/Icon/Icon.twig

@@ -0,0 +1,13 @@
+{#
+/**
+ * @file
+ * Icon component
+ *
+ * @param string $name The file name of the icon.
+ * @param string[] $classes Additional classes.
+ */
+#}
+
+<span class="icon {{ 'icon--%s'|format(name) }} {{ html_classes(classes|default('inline-block')) }}">
+  {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+</span>

package/atoms/LargeText/LargeText.cjs

@@ -59,9 +59,9 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
       this.translateX = 0;
       this.transform.translateX -= 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

@@ -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 i,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,clamp as a,transform as r}from"@studiometa/js-toolkit/utils";class n 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(){return 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(a(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),()=>{r(this.$refs.target,this.transform)}}}export{n as default};

package/atoms/LargeText/LargeText.twig

@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ *   LargeText component.
+ *
+ * @param string $content
+ *   The text content.
+ * @param number $repeat
+ *   The number of times the content should be repeated, defaults to 2.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $target_attr
+ *   Custom attributes for the target element.
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { data_component: 'LargeText' },
+    { class: 'overflow-x-hidden pointer-events-none' }
+  )
+%}
+
+{% set target_attributes =
+  merge_html_attributes(
+    target_attr ?? null,
+    { class: 'text-9xl font-bold' },
+    { data_ref: 'target', class: 'relative inline-block whitespace-nowrap' }
+  )
+%}
+
+{% set position_factor = attributes.data_option_sensitivity is defined
+  and attributes.data_option_sensitivity < 0
+  ? - 100
+  : 100
+%}
+
+<div {{ html_attributes(attributes) }}>
+  <span {{ html_attributes(target_attributes) }}>
+    {% for count in 1..repeat ?? 2 %}
+      {% set content_attributes = {
+        style: { left: loop.first ? '' : loop.index0 * position_factor ~ '%' },
+        class: { 'absolute top-0': not loop.first }
+      } %}
+      <span {{ html_attributes(content_attributes) }}>&nbsp;{{ content }}</span>
+    {% endfor %}
+  </span>
+</div>

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/index.cjs

@@ -19,4 +19,5 @@ module.exports = __toCommonJS(ui_exports);
 __reExport(ui_exports, require("./primitives/index.cjs"), module.exports);
 __reExport(ui_exports, require("./atoms/index.cjs"), module.exports);
 __reExport(ui_exports, require("./molecules/index.cjs"), module.exports);
+__reExport(ui_exports, require("./organisms/index.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;