@studiometa/ui 0.2.4 → 0.2.7

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

@@ -29,6 +29,12 @@ __export(Figure_exports, {
 module.exports = __toCommonJS(Figure_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
+  get src() {
+    return this.$refs.img.src;
+  }
+  set src(value) {
+    this.$refs.img.src = value;
+  }
   mounted() {
     if (!this.$refs.img) {
       throw new Error("[Figure] The `img` ref is required.");
@@ -36,13 +42,16 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
     if (!(this.$refs.img instanceof HTMLImageElement)) {
       throw new Error("[Figure] The `img` ref must be an `<img>` element.");
     }
-    if (this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.$refs.img.src) {
-      this.$refs.img.src = this.$refs.img.getAttribute("data-src");
+    if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
+      this.src = this.$refs.img.getAttribute("data-src");
     }
   }
 };
 __publicField(Figure, "config", {
   name: "Figure",
-  refs: ["img"]
+  refs: ["img"],
+  options: {
+    lazy: Boolean
+  }
 });
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Figure/Figure.d.ts

@@ -15,7 +15,25 @@ export default class Figure extends Base {
     static config: {
         name: string;
         refs: string[];
+        options: {
+            lazy: BooleanConstructor;
+        };
     };
+    /**
+     * Set the image source.
+     *
+     * @this {Figure & FigureInterface}
+     * @param   {string} value
+     * @returns {void}
+     */
+    set src(arg: string);
+    /**
+     * Get the image source.
+     *
+     * @this {Figure & FigureInterface}
+     * @returns {string}
+     */
+    get src(): string;
     /**
      * Load on mount.
      * @this {Figure & FigureInterface}

package/atoms/Figure/Figure.js

@@ -1 +1 @@
-import{Base as e,withMountWhenInView as t}from"@studiometa/js-toolkit";class i extends t(e,{threshold:[0,1]}){static config={name:"Figure",refs:["img"]};mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.$refs.img.src&&(this.$refs.img.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};
+import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};

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/Figure/FigureTwicPics.cjs

@@ -0,0 +1,72 @@
+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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/Figure/FigureTwicPics.js
+var FigureTwicPics_exports = {};
+__export(FigureTwicPics_exports, {
+  default: () => FigureTwicPics
+});
+module.exports = __toCommonJS(FigureTwicPics_exports);
+var import_Figure = __toESM(require("./Figure.cjs"), 1);
+function normalizeSize(that, prop) {
+  const { step } = that.$options;
+  return Math.ceil(that.$refs.img[prop] / step) * step;
+}
+var FigureTwicPics = class extends import_Figure.default {
+  get domain() {
+    const url = new URL(this.$refs.img.dataset.src);
+    return url.host;
+  }
+  set src(value) {
+    const url = new URL(value);
+    url.host = this.domain;
+    const width = normalizeSize(this, "offsetWidth");
+    const height = normalizeSize(this, "offsetHeight");
+    url.searchParams.set("twic", ["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/"));
+    url.search = decodeURIComponent(url.search);
+    super.src = url.toString();
+  }
+  resized() {
+    this.src = this.$refs.img.dataset.src;
+  }
+};
+__publicField(FigureTwicPics, "config", {
+  ...import_Figure.default.config,
+  name: "FigureTwicPics",
+  options: {
+    ...import_Figure.default.config.options,
+    transform: String,
+    step: {
+      type: Number,
+      default: 50
+    },
+    mode: {
+      type: String,
+      default: "cover"
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Figure/FigureTwicPics.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Figure class.
+ *
+ * Manager lazyloading image sources.
+ */
+export default class FigureTwicPics extends Figure {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        options: {
+            transform: StringConstructor;
+            step: {
+                type: NumberConstructor;
+                default: number;
+            };
+            mode: {
+                type: StringConstructor;
+                default: string;
+            };
+            lazy: BooleanConstructor;
+        };
+        refs: string[];
+    };
+    /**
+     * Get the TwicPics domain.
+     *
+     * @this {FigureTwicPicsInterface}
+     * @returns {string}
+     */
+    get domain(): string;
+    /**
+     * Reassign the source from the original on resized.
+     *
+     * @this {FigureTwicPicsInterface}
+     * @returns {void}
+     */
+    resized(this: FigureTwicPicsInterface): void;
+}
+export type FigureInterface = import('./Figure.js').FigureInterface;
+export type FigureTwicPicsInterface = FigureTwicPics & FigureInterface & {
+    $options: {
+        transform: string;
+        step: number;
+    };
+};
+import Figure from "./Figure.js";

package/atoms/Figure/FigureTwicPics.js

@@ -0,0 +1 @@
+import i from"./Figure.js";function o(e,s){const{step:t}=e.$options;return Math.ceil(e.$refs.img[s]/t)*t}class c extends i{static config={...i.config,name:"FigureTwicPics",options:{...i.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};

package/atoms/Figure/index.cjs

@@ -0,0 +1,31 @@
+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/ui/atoms/Figure/index.js
+var Figure_exports = {};
+__export(Figure_exports, {
+  Figure: () => import_Figure.default,
+  FigureTwicPics: () => import_FigureTwicPics.default
+});
+module.exports = __toCommonJS(Figure_exports);
+var import_Figure = __toESM(require("./Figure.cjs"), 1);
+var import_FigureTwicPics = __toESM(require("./FigureTwicPics.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Figure/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Figure } from "./Figure.js";
+export { default as FigureTwicPics } from "./FigureTwicPics.js";

package/atoms/Figure/index.js

@@ -0,0 +1 @@
+import{default as a}from"./Figure.js";import{default as i}from"./FigureTwicPics.js";export{a as Figure,i as FigureTwicPics};

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.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

@@ -0,0 +1,126 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/ScrollAnimation/AbstractScrollAnimation.js
+var AbstractScrollAnimation_exports = {};
+__export(AbstractScrollAnimation_exports, {
+  default: () => AbstractScrollAnimation
+});
+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;
+  }
+  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;
+    }
+  }
+};
+__publicField(AbstractScrollAnimation, "config", {
+  name: "AbstractScrollAnimation",
+  options: {
+    playRange: {
+      type: Array,
+      default: () => [0, 1]
+    },
+    dampFactor: {
+      type: Number,
+      default: 0.5
+    },
+    dampPrecision: {
+      type: Number,
+      default: 1e-3
+    },
+    from: {
+      type: Object,
+      default: getDefaults,
+      merge: true
+    },
+    to: {
+      type: Object,
+      default: getDefaults,
+      merge: true
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;