@studiometa/ui 0.2.42 → 0.2.44

package/atoms/Action/Action.cjs

@@ -0,0 +1,90 @@
+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/Action/Action.ts
+var Action_exports = {};
+__export(Action_exports, {
+  Action: () => Action
+});
+module.exports = __toCommonJS(Action_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var Action = class extends import_js_toolkit.Base {
+  /**
+   * Run method on targeted components
+   */
+  handleEvent() {
+    const { target: componentNames, method, selector } = this.$options;
+    let targets = componentNames.includes(" ") ? componentNames.split(" ").flatMap((componentName) => this.$root.$children?.[componentName]) : this.$root.$children?.[componentNames];
+    if (!targets || !targets.length) {
+      this.$warn("Target not found.");
+      return;
+    }
+    if (selector || selector.length > 0) {
+      targets = targets.filter((target) => target.$el.matches(selector));
+    }
+    if (!targets || !targets.length) {
+      this.$warn(`Target with selector "${selector}" not found.`);
+      return;
+    }
+    targets.forEach((target) => {
+      if (!(0, import_utils.isFunction)(target[method])) {
+        this.$warn(`Method "${method}()" not found on target.`, target);
+        return;
+      }
+      target[method]();
+    });
+  }
+  /**
+   * Mounted
+   */
+  mounted() {
+    const { on: eventName, target, method } = this.$options;
+    if (!target || !method || target.length <= 0 || method.length <= 0) {
+      this.$warn("No target or method specified.");
+      this.$terminate();
+      return;
+    }
+    this.$el.addEventListener(eventName, this);
+  }
+  /**
+   * Destroyed
+   */
+  destroyed() {
+    this.$el.removeEventListener(this.$options.on, this);
+  }
+};
+__publicField(Action, "config", {
+  name: "Action",
+  options: {
+    on: {
+      type: String,
+      default: "click"
+    },
+    target: String,
+    method: String,
+    selector: String
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Action.cjs.map

package/atoms/Action/Action.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/Action.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface ActionProps extends BaseProps {\n  $options: {\n    on: string;\n    target: string;\n    method: string;\n    selector: string;\n  };\n}\n\n/**\n * Action class.\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n  static config: BaseConfig = {\n    name: 'Action',\n    options: {\n      on: {\n        type: String,\n        default: 'click',\n      },\n      target: String,\n      method: String,\n      selector: String,\n    },\n  };\n\n  /**\n   * Run method on targeted components\n   */\n  handleEvent() {\n    const { target: componentNames, method, selector } = this.$options;\n\n    let targets = componentNames.includes(' ')\n      ? componentNames\n          .split(' ')\n          .flatMap((componentName) => this.$root.$children?.[componentName] as Base[])\n      : (this.$root.$children?.[componentNames] as Base[]);\n\n    if (!targets || !targets.length) {\n      this.$warn('Target not found.');\n      return;\n    }\n\n    if (selector || selector.length > 0) {\n      targets = targets.filter((target) => target.$el.matches(selector));\n    }\n\n    if (!targets || !targets.length) {\n      this.$warn(`Target with selector \"${selector}\" not found.`);\n      return;\n    }\n\n    targets.forEach((target) => {\n      if (!isFunction(target[method])) {\n        this.$warn(`Method \"${method}()\" not found on target.`, target);\n        return;\n      }\n\n      target[method]();\n    });\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    const { on: eventName, target, method } = this.$options;\n\n    if (!target || !method || target.length <= 0 || method.length <= 0) {\n      this.$warn('No target or method specified.');\n      this.$terminate();\n      return;\n    }\n\n    this.$el.addEventListener(eventName, this);\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    this.$el.removeEventListener(this.$options.on, this);\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AACrB,mBAA2B;AAepB,IAAM,SAAN,cAAsD,uBAAsB;AAAA;AAAA;AAAA;AAAA,EAiBjF,cAAc;AACZ,UAAM,EAAE,QAAQ,gBAAgB,QAAQ,SAAS,IAAI,KAAK;AAE1D,QAAI,UAAU,eAAe,SAAS,GAAG,IACrC,eACG,MAAM,GAAG,EACT,QAAQ,CAAC,kBAAkB,KAAK,MAAM,YAAY,aAAa,CAAW,IAC5E,KAAK,MAAM,YAAY,cAAc;AAE1C,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,mBAAmB;AAC9B;AAAA,IACF;AAEA,QAAI,YAAY,SAAS,SAAS,GAAG;AACnC,gBAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,IAAI,QAAQ,QAAQ,CAAC;AAAA,IACnE;AAEA,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,yBAAyB,sBAAsB;AAC1D;AAAA,IACF;AAEA,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,KAAC,yBAAW,OAAO,MAAM,CAAC,GAAG;AAC/B,aAAK,MAAM,WAAW,kCAAkC,MAAM;AAC9D;AAAA,MACF;AAEA,aAAO,MAAM,EAAE;AAAA,IACjB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,WAAW,QAAQ,OAAO,IAAI,KAAK;AAE/C,QAAI,CAAC,UAAU,CAAC,UAAU,OAAO,UAAU,KAAK,OAAO,UAAU,GAAG;AAClE,WAAK,MAAM,gCAAgC;AAC3C,WAAK,WAAW;AAChB;AAAA,IACF;AAEA,SAAK,IAAI,iBAAiB,WAAW,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;AAtEE,cADW,QACJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,IACP,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACF;",
+  "names": []
+}

package/atoms/Action/Action.d.ts

@@ -0,0 +1,28 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+export interface ActionProps extends BaseProps {
+    $options: {
+        on: string;
+        target: string;
+        method: string;
+        selector: string;
+    };
+}
+/**
+ * Action class.
+ */
+export declare class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {
+    static config: BaseConfig;
+    /**
+     * Run method on targeted components
+     */
+    handleEvent(): void;
+    /**
+     * Mounted
+     */
+    mounted(): void;
+    /**
+     * Destroyed
+     */
+    destroyed(): void;
+}

package/atoms/Action/Action.js

@@ -0,0 +1,63 @@
+import { Base } from "@studiometa/js-toolkit";
+import { isFunction } from "@studiometa/js-toolkit/utils";
+class Action extends Base {
+  static config = {
+    name: "Action",
+    options: {
+      on: {
+        type: String,
+        default: "click"
+      },
+      target: String,
+      method: String,
+      selector: String
+    }
+  };
+  /**
+   * Run method on targeted components
+   */
+  handleEvent() {
+    const { target: componentNames, method, selector } = this.$options;
+    let targets = componentNames.includes(" ") ? componentNames.split(" ").flatMap((componentName) => this.$root.$children?.[componentName]) : this.$root.$children?.[componentNames];
+    if (!targets || !targets.length) {
+      this.$warn("Target not found.");
+      return;
+    }
+    if (selector || selector.length > 0) {
+      targets = targets.filter((target) => target.$el.matches(selector));
+    }
+    if (!targets || !targets.length) {
+      this.$warn(`Target with selector "${selector}" not found.`);
+      return;
+    }
+    targets.forEach((target) => {
+      if (!isFunction(target[method])) {
+        this.$warn(`Method "${method}()" not found on target.`, target);
+        return;
+      }
+      target[method]();
+    });
+  }
+  /**
+   * Mounted
+   */
+  mounted() {
+    const { on: eventName, target, method } = this.$options;
+    if (!target || !method || target.length <= 0 || method.length <= 0) {
+      this.$warn("No target or method specified.");
+      this.$terminate();
+      return;
+    }
+    this.$el.addEventListener(eventName, this);
+  }
+  /**
+   * Destroyed
+   */
+  destroyed() {
+    this.$el.removeEventListener(this.$options.on, this);
+  }
+}
+export {
+  Action
+};
+//# sourceMappingURL=Action.js.map

package/atoms/Action/Action.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/Action.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface ActionProps extends BaseProps {\n  $options: {\n    on: string;\n    target: string;\n    method: string;\n    selector: string;\n  };\n}\n\n/**\n * Action class.\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n  static config: BaseConfig = {\n    name: 'Action',\n    options: {\n      on: {\n        type: String,\n        default: 'click',\n      },\n      target: String,\n      method: String,\n      selector: String,\n    },\n  };\n\n  /**\n   * Run method on targeted components\n   */\n  handleEvent() {\n    const { target: componentNames, method, selector } = this.$options;\n\n    let targets = componentNames.includes(' ')\n      ? componentNames\n          .split(' ')\n          .flatMap((componentName) => this.$root.$children?.[componentName] as Base[])\n      : (this.$root.$children?.[componentNames] as Base[]);\n\n    if (!targets || !targets.length) {\n      this.$warn('Target not found.');\n      return;\n    }\n\n    if (selector || selector.length > 0) {\n      targets = targets.filter((target) => target.$el.matches(selector));\n    }\n\n    if (!targets || !targets.length) {\n      this.$warn(`Target with selector \"${selector}\" not found.`);\n      return;\n    }\n\n    targets.forEach((target) => {\n      if (!isFunction(target[method])) {\n        this.$warn(`Method \"${method}()\" not found on target.`, target);\n        return;\n      }\n\n      target[method]();\n    });\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    const { on: eventName, target, method } = this.$options;\n\n    if (!target || !method || target.length <= 0 || method.length <= 0) {\n      this.$warn('No target or method specified.');\n      this.$terminate();\n      return;\n    }\n\n    this.$el.addEventListener(eventName, this);\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    this.$el.removeEventListener(this.$options.on, this);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAepB,MAAM,eAAgD,KAAsB;AAAA,EACjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,UAAM,EAAE,QAAQ,gBAAgB,QAAQ,SAAS,IAAI,KAAK;AAE1D,QAAI,UAAU,eAAe,SAAS,GAAG,IACrC,eACG,MAAM,GAAG,EACT,QAAQ,CAAC,kBAAkB,KAAK,MAAM,YAAY,aAAa,CAAW,IAC5E,KAAK,MAAM,YAAY,cAAc;AAE1C,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,mBAAmB;AAC9B;AAAA,IACF;AAEA,QAAI,YAAY,SAAS,SAAS,GAAG;AACnC,gBAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,IAAI,QAAQ,QAAQ,CAAC;AAAA,IACnE;AAEA,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,yBAAyB,sBAAsB;AAC1D;AAAA,IACF;AAEA,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,WAAW,OAAO,MAAM,CAAC,GAAG;AAC/B,aAAK,MAAM,WAAW,kCAAkC,MAAM;AAC9D;AAAA,MACF;AAEA,aAAO,MAAM,EAAE;AAAA,IACjB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,WAAW,QAAQ,OAAO,IAAI,KAAK;AAE/C,QAAI,CAAC,UAAU,CAAC,UAAU,OAAO,UAAU,KAAK,OAAO,UAAU,GAAG;AAClE,WAAK,MAAM,gCAAgC;AAC3C,WAAK,WAAW;AAChB;AAAA,IACF;AAEA,SAAK,IAAI,iBAAiB,WAAW,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;",
+  "names": []
+}

package/atoms/Action/index.cjs

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/atoms/Action/index.ts
+var Action_exports = {};
+module.exports = __toCommonJS(Action_exports);
+__reExport(Action_exports, require("./Action.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/atoms/Action/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/index.ts"],
+  "sourcesContent": ["export * from './Action.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,yBAAd;",
+  "names": []
+}

package/atoms/Action/index.d.ts

@@ -0,0 +1 @@
+export * from './Action.js';

package/atoms/Action/index.js

@@ -0,0 +1,2 @@
+export * from "./Action.js";
+//# sourceMappingURL=index.js.map

package/atoms/Action/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/index.ts"],
+  "sourcesContent": ["export * from './Action.js';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/atoms/CircularMarquee/CircularMarquee.cjs

@@ -0,0 +1,74 @@
+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/CircularMarquee/CircularMarquee.ts
+var CircularMarquee_exports = {};
+__export(CircularMarquee_exports, {
+  CircularMarquee: () => CircularMarquee
+});
+module.exports = __toCommonJS(CircularMarquee_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var CircularMarquee = class extends import_js_toolkit.Base {
+  /**
+   * Rotate value.
+   * @type {number}
+   */
+  rotate = 0;
+  /**
+   * Scroll delta Y.
+   * @type {number}
+   */
+  deltaY = 0;
+  /**
+   * Transform values.
+   * @type {object}
+   */
+  transform = {
+    rotate: 0
+  };
+  scrolled(props) {
+    this.deltaY = props.delta.y;
+  }
+  ticked() {
+    this.rotate -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
+    this.transform.rotate = (0, import_utils.damp)(this.rotate, this.transform.rotate, 0.25);
+    return () => {
+      (0, import_utils.transform)(this.$el, this.transform);
+    };
+  }
+};
+/**
+ * CircularMarquee Configuration
+ */
+__publicField(CircularMarquee, "config", {
+  name: "CircularMarquee",
+  options: {
+    sensitivity: {
+      type: Number,
+      default: 0.1
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=CircularMarquee.cjs.map

package/atoms/CircularMarquee/CircularMarquee.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/CircularMarquee/CircularMarquee.ts"],
+  "sourcesContent": ["import { Base, BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { damp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface CircularMarqueeProps extends BaseProps {\n  $options: {\n    sensitivity: number;\n  };\n}\n\n/**\n * CircularMarquee component\n */\nexport class CircularMarquee extends Base<CircularMarqueeProps> {\n  /**\n   * CircularMarquee Configuration\n   */\n  static config: BaseConfig = {\n    name: 'CircularMarquee',\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n    },\n  };\n\n  /**\n   * Rotate value.\n   * @type {number}\n   */\n  rotate = 0;\n\n  /**\n   * Scroll delta Y.\n   * @type {number}\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   * @type {object}\n   */\n  transform = {\n    rotate: 0,\n  };\n\n  scrolled(props) {\n    this.deltaY = props.delta.y;\n  }\n\n  ticked() {\n    this.rotate -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.rotate = damp(this.rotate, this.transform.rotate, 0.25);\n\n    return () => {\n      transform(this.$el, this.transform);\n    };\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA4C;AAC5C,mBAAgC;AAWzB,IAAM,kBAAN,cAA8B,uBAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,EAkB9D,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAEA,SAAS,OAAO;AACd,SAAK,SAAS,MAAM,MAAM;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,SAAK,WAAW,KAAK,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;AAE3D,SAAK,UAAU,aAAS,mBAAK,KAAK,QAAQ,KAAK,UAAU,QAAQ,IAAI;AAErE,WAAO,MAAM;AACX,kCAAU,KAAK,KAAK,KAAK,SAAS;AAAA,IACpC;AAAA,EACF;AACF;AAAA;AAAA;AAAA;AA3CE,cAJW,iBAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,IACP,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
+  "names": []
+}

package/atoms/CircularMarquee/CircularMarquee.d.ts

@@ -0,0 +1,34 @@
+import { Base, BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+export interface CircularMarqueeProps extends BaseProps {
+    $options: {
+        sensitivity: number;
+    };
+}
+/**
+ * CircularMarquee component
+ */
+export declare class CircularMarquee extends Base<CircularMarqueeProps> {
+    /**
+     * CircularMarquee Configuration
+     */
+    static config: BaseConfig;
+    /**
+     * Rotate value.
+     * @type {number}
+     */
+    rotate: number;
+    /**
+     * Scroll delta Y.
+     * @type {number}
+     */
+    deltaY: number;
+    /**
+     * Transform values.
+     * @type {object}
+     */
+    transform: {
+        rotate: number;
+    };
+    scrolled(props: any): void;
+    ticked(): () => void;
+}

package/atoms/CircularMarquee/CircularMarquee.js

@@ -0,0 +1,47 @@
+import { Base } from "@studiometa/js-toolkit";
+import { damp, transform } from "@studiometa/js-toolkit/utils";
+class CircularMarquee extends Base {
+  /**
+   * CircularMarquee Configuration
+   */
+  static config = {
+    name: "CircularMarquee",
+    options: {
+      sensitivity: {
+        type: Number,
+        default: 0.1
+      }
+    }
+  };
+  /**
+   * Rotate value.
+   * @type {number}
+   */
+  rotate = 0;
+  /**
+   * Scroll delta Y.
+   * @type {number}
+   */
+  deltaY = 0;
+  /**
+   * Transform values.
+   * @type {object}
+   */
+  transform = {
+    rotate: 0
+  };
+  scrolled(props) {
+    this.deltaY = props.delta.y;
+  }
+  ticked() {
+    this.rotate -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
+    this.transform.rotate = damp(this.rotate, this.transform.rotate, 0.25);
+    return () => {
+      transform(this.$el, this.transform);
+    };
+  }
+}
+export {
+  CircularMarquee
+};
+//# sourceMappingURL=CircularMarquee.js.map

package/atoms/CircularMarquee/CircularMarquee.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/CircularMarquee/CircularMarquee.ts"],
+  "sourcesContent": ["import { Base, BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { damp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface CircularMarqueeProps extends BaseProps {\n  $options: {\n    sensitivity: number;\n  };\n}\n\n/**\n * CircularMarquee component\n */\nexport class CircularMarquee extends Base<CircularMarqueeProps> {\n  /**\n   * CircularMarquee Configuration\n   */\n  static config: BaseConfig = {\n    name: 'CircularMarquee',\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n    },\n  };\n\n  /**\n   * Rotate value.\n   * @type {number}\n   */\n  rotate = 0;\n\n  /**\n   * Scroll delta Y.\n   * @type {number}\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   * @type {object}\n   */\n  transform = {\n    rotate: 0,\n  };\n\n  scrolled(props) {\n    this.deltaY = props.delta.y;\n  }\n\n  ticked() {\n    this.rotate -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.rotate = damp(this.rotate, this.transform.rotate, 0.25);\n\n    return () => {\n      transform(this.$el, this.transform);\n    };\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAmC;AAC5C,SAAS,MAAM,iBAAiB;AAWzB,MAAM,wBAAwB,KAA2B;AAAA;AAAA;AAAA;AAAA,EAI9D,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAEA,SAAS,OAAO;AACd,SAAK,SAAS,MAAM,MAAM;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,SAAK,WAAW,KAAK,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;AAE3D,SAAK,UAAU,SAAS,KAAK,KAAK,QAAQ,KAAK,UAAU,QAAQ,IAAI;AAErE,WAAO,MAAM;AACX,gBAAU,KAAK,KAAK,KAAK,SAAS;AAAA,IACpC;AAAA,EACF;AACF;",
+  "names": []
+}

package/atoms/CircularMarquee/CircularMarquee.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Circular Marquee
+ *
+ * @param {String} id - *required
+ * @param {Number} outer_radius
+ * @param {Number} radius
+ * @param {Number} cx
+ * @param {Number} cy
+ * @param {String} content
+ * @param {Object} content_attr
+ * @param {Number} sensitivity
+ */
+#}
+
+{# Outer radius is svg size radius #}
+{% set outer_radius = outer_radius|default(250) %}
+{% set outer_diameter = outer_radius * 2 %}
+
+{# Inner radius is the circle size inside the svg (need to be smaller to not cut text with svg viewbox) #}
+{% set radius = radius|default(220) %}
+{% set diameter = radius * 2 %}
+{% set cx = cx|default(radius) %}
+{% set cy = cy|default(radius) %}
+{% set perimeter = 3.1413 * diameter %}
+
+{% set first = 'M ' ~ (outer_radius - cx) ~ ',' ~ outer_radius %}
+{% set second = 'a ' ~ radius ~ ',' ~ radius ~ ' 0 1,1 ' ~ diameter ~ ',0' %}
+{% set third = 'a ' ~ radius ~ ',' ~ radius ~ ' 0 1,1 -' ~ diameter ~ ',0' %}
+{% set d = [first, second, third]|join(' ') %}
+
+{% set default_content_attributes = { 'xlink:href': '#' ~ id } %}
+{% set content_attributes =
+  merge_html_attributes(default_content_attributes, content_attr|default({}))
+%}
+
+<div data-component="CircularMarquee"
+  {{ html_attributes({ data_option_sensitivity: sensitivity }) }}>
+  <svg aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 {{ outer_diameter }} {{ outer_diameter }}"
+    width="{{ outer_diameter }}"
+    height="{{ outer_diameter }}"
+    class="z-default relative left-1/2 -translate-x-1/2">
+    <defs>
+      <path d="{{ d }}" id="{{ id }}" />
+    </defs>
+    <text dy="0" textLength="{{ perimeter }}">
+      <textPath {{ html_attributes(content_attributes) }}>
+        {{ content|raw }}
+      </textPath>
+    </text>
+  </svg>
+</div>

package/atoms/CircularMarquee/index.cjs

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/atoms/CircularMarquee/index.ts
+var CircularMarquee_exports = {};
+module.exports = __toCommonJS(CircularMarquee_exports);
+__reExport(CircularMarquee_exports, require("./CircularMarquee.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/atoms/CircularMarquee/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/CircularMarquee/index.ts"],
+  "sourcesContent": ["export * from './CircularMarquee.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAc,kCAAd;",
+  "names": []
+}

package/atoms/CircularMarquee/index.d.ts

@@ -0,0 +1 @@
+export * from './CircularMarquee.js';

package/atoms/CircularMarquee/index.js

@@ -0,0 +1,2 @@
+export * from "./CircularMarquee.js";
+//# sourceMappingURL=index.js.map

package/atoms/CircularMarquee/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/CircularMarquee/index.ts"],
+  "sourcesContent": ["export * from './CircularMarquee.js';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/atoms/index.cjs

@@ -16,7 +16,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/ui/atoms/index.ts
 var atoms_exports = {};
 module.exports = __toCommonJS(atoms_exports);
+__reExport(atoms_exports, require("./Action/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./AnchorScrollTo/index.cjs"), module.exports);
+__reExport(atoms_exports, require("./CircularMarquee/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Cursor/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Figure/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./LargeText/index.cjs"), module.exports);

package/atoms/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/atoms/index.ts"],
-  "sourcesContent": ["export * from './AnchorScrollTo/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,uCAAd;AACA,0BAAc,+BADd;AAEA,0BAAc,+BAFd;AAGA,0BAAc,kCAHd;AAIA,0BAAc,oCAJd;AAKA,0BAAc,iCALd;AAMA,0BAAc,wCANd;AAOA,0BAAc,qCAPd;",
+  "sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,+BAAd;AACA,0BAAc,uCADd;AAEA,0BAAc,wCAFd;AAGA,0BAAc,+BAHd;AAIA,0BAAc,+BAJd;AAKA,0BAAc,kCALd;AAMA,0BAAc,oCANd;AAOA,0BAAc,iCAPd;AAQA,0BAAc,wCARd;AASA,0BAAc,qCATd;",
   "names": []
 }

package/atoms/index.d.ts

@@ -1,4 +1,6 @@
+export * from './Action/index.js';
 export * from './AnchorScrollTo/index.js';
+export * from './CircularMarquee/index.js';
 export * from './Cursor/index.js';
 export * from './Figure/index.js';
 export * from './LargeText/index.js';

package/atoms/index.js

@@ -1,4 +1,6 @@
+export * from "./Action/index.js";
 export * from "./AnchorScrollTo/index.js";
+export * from "./CircularMarquee/index.js";
 export * from "./Cursor/index.js";
 export * from "./Figure/index.js";
 export * from "./LargeText/index.js";

package/atoms/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/atoms/index.ts"],
-  "sourcesContent": ["export * from './AnchorScrollTo/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"