@studiometa/ui 0.2.3 → 0.2.6

package/organisms/ImageGrid/ImageGrid.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ *   Image Grid.
+ *
+ * @param array<Figure> $images
+ *   List of images to display. See Figure.twig for the composition of each image.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $inner_attr
+ *   Custom attributes for the inner element.
+ * @param array $image_attr
+ *   Custom attributes for the images' elements.
+ */
+#}
+
+{% set attributes = merge_html_attributes(attr ?? null, { class: 'image-grid' }) %}
+{% set inner_attributes =
+  merge_html_attributes(inner_attr ?? null, { class: 'image-grid__inner s:grid grid-cols-12 gap-10' })
+%}
+
+<div {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(inner_attributes) }}>
+    {% for image in images %}
+      {% set modulo = loop.index % 5 %}
+      {% set image_attributes = merge_html_attributes(image_attr ?? null, {
+        class: 'image-grid__img'
+      }, {
+        class: {
+          's:col-span-7': modulo == 1 or modulo == 4,
+          's:col-span-5 mt-10': modulo == 2,
+          's:col-span-5 mt-10 clear-m-left': modulo == 3 and not loop.last,
+          's:col-start-2 s:col-end-11': modulo == 0 or (modulo in [0,3] and loop.last),
+          's:col-start-2 s:col-end-13': loop.first and loop.last
+        }
+      }) %}
+      <div {{ html_attributes(image_attributes) }}>
+        {% include '@ui/atoms/Figure/Figure.twig' with image only %}
+      </div>
+    {% endfor %}
+  </div>
+</div>

package/organisms/index.cjs

@@ -2,23 +2,19 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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/organisms/index.js
 var organisms_exports = {};
-__reExport(organisms_exports, require("./Frame/index.cjs"));
 module.exports = __toCommonJS(organisms_exports);
+__reExport(organisms_exports, require("./Frame/index.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/organisms/index.js

@@ -1 +1 @@
-export * from "./Frame/index.js";
+export*from"./Frame/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,8 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^2.0.0-beta.18",
-    "deepmerge": "^4.2.2",
-    "motion": "^10.5.0"
+    "@studiometa/js-toolkit": "^2.0.0",
+    "deepmerge": "^4.2.2"
   }
 }

package/primitives/Draggable/Draggable.cjs

@@ -3,24 +3,19 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,16 +26,14 @@ var Draggable_exports = {};
 __export(Draggable_exports, {
   default: () => Draggable
 });
-var import_motion = require("motion");
+module.exports = __toCommonJS(Draggable_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var _Draggable = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "x", 0);
-    __publicField(this, "y", 0);
-    __publicField(this, "originX", 0);
-    __publicField(this, "originY", 0);
-  }
+var import_utils = require("@studiometa/js-toolkit/utils");
+var Draggable = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
+  x = 0;
+  y = 0;
+  originX = 0;
+  originY = 0;
   dragged(props) {
     if (props.mode === "start") {
       this.originX = this.x;
@@ -49,16 +42,10 @@ var _Draggable = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit
     }
     this.x = this.originX + props.x - props.origin.x;
     this.y = this.originY + props.y - props.origin.y;
-    (0, import_motion.animate)(this.$el, { x: this.x, y: this.y }, _Draggable.animateOptions);
+    this.$el.style.transform = (0, import_utils.matrix)({ translateX: this.x, translateY: this.y });
   }
 };
-var Draggable = _Draggable;
 __publicField(Draggable, "config", {
   name: "DraggableElement"
 });
-__publicField(Draggable, "animateOptions", {
-  easing: "linear",
-  duration: 0
-});
-module.exports = __toCommonJS(Draggable_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/primitives/Draggable/Draggable.d.ts

@@ -5,11 +5,6 @@ export default class Draggable extends Base {
     static config: {
         name: string;
     };
-    /**
-     * Options for the animate function.
-     * @type {import('motion').AnimationListOptions}
-     */
-    static animateOptions: import('motion').AnimationListOptions;
     /**
      * Horizontal transformation.
      * @type {number}

package/primitives/Draggable/Draggable.js

@@ -1,38 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { animate } from "motion";
-import { Base, withDrag } from "@studiometa/js-toolkit";
-const _Draggable = class extends withDrag(Base) {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "x", 0);
-    __publicField(this, "y", 0);
-    __publicField(this, "originX", 0);
-    __publicField(this, "originY", 0);
-  }
-  dragged(props) {
-    if (props.mode === "start") {
-      this.originX = this.x;
-      this.originY = this.y;
-      return;
-    }
-    this.x = this.originX + props.x - props.origin.x;
-    this.y = this.originY + props.y - props.origin.y;
-    animate(this.$el, { x: this.x, y: this.y }, _Draggable.animateOptions);
-  }
-};
-let Draggable = _Draggable;
-__publicField(Draggable, "config", {
-  name: "DraggableElement"
-});
-__publicField(Draggable, "animateOptions", {
-  easing: "linear",
-  duration: 0
-});
-export {
-  Draggable as default
-};
+import{Base as t,withDrag as r}from"@studiometa/js-toolkit";import{matrix as a}from"@studiometa/js-toolkit/utils";class e extends r(t){static config={name:"DraggableElement"};x=0;y=0;originX=0;originY=0;dragged(i){if(i.mode==="start"){this.originX=this.x,this.originY=this.y;return}this.x=this.originX+i.x-i.origin.x,this.y=this.originY+i.y-i.origin.y,this.$el.style.transform=a({translateX:this.x,translateY:this.y})}}export{e as default};

package/primitives/Sentinel/Sentinel.cjs

@@ -3,24 +3,19 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,11 +26,11 @@ var Sentinel_exports = {};
 __export(Sentinel_exports, {
   default: () => Sentinel
 });
+module.exports = __toCommonJS(Sentinel_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var Sentinel = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, { threshold: [0, 1] }) {
 };
 __publicField(Sentinel, "config", {
   name: "Sentinel"
 });
-module.exports = __toCommonJS(Sentinel_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/primitives/Sentinel/Sentinel.js

@@ -1,15 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
-class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {
-}
-__publicField(Sentinel, "config", {
-  name: "Sentinel"
-});
-export {
-  Sentinel as default
-};
+import{Base as e,withIntersectionObserver as t}from"@studiometa/js-toolkit";class n extends t(e,{threshold:[0,1]}){static config={name:"Sentinel"}}export{n as default};

package/primitives/Transition/Transition.cjs

@@ -3,24 +3,19 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,6 +26,7 @@ var Transition_exports = {};
 __export(Transition_exports, {
   default: () => Transition
 });
+module.exports = __toCommonJS(Transition_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Transition = class extends import_js_toolkit.Base {
@@ -38,17 +34,17 @@ var Transition = class extends import_js_toolkit.Base {
     return this.$el;
   }
   enter() {
-    const { enterFrom, enterActive, enterTo, enterKeep } = this.$options;
+    const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
     return (0, import_utils.transition)(this.target, {
-      from: enterFrom,
+      from: (leaveTo + " " + enterFrom).trim(),
       active: enterActive,
       to: enterTo
     }, enterKeep && "keep");
   }
   leave() {
-    const { leaveFrom, leaveActive, leaveTo, leaveKeep } = this.$options;
+    const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
     return (0, import_utils.transition)(this.target, {
-      from: leaveFrom,
+      from: (enterTo + " " + leaveFrom).trim(),
       active: leaveActive,
       to: leaveTo
     }, leaveKeep && "keep");
@@ -67,5 +63,4 @@ __publicField(Transition, "config", {
     leaveKeep: Boolean
   }
 });
-module.exports = __toCommonJS(Transition_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/primitives/Transition/Transition.d.ts

@@ -36,19 +36,17 @@ export default class Transition extends Base {
     /**
      * Trigger the enter transition.
      *
-     * @todo merge leaveTo and enterFrom classes when leaveKeep is active
      * @this {TransitionInterface}
      * @returns {Promise<void>}
      */
-    enter(): Promise<void>;
+    enter(this: TransitionInterface): Promise<void>;
     /**
      * Trigger the leave transition.
      *
-     * @todo merge enterTo and leaveTo classes when enterKeep is active
      * @this {TransitionInterface}
      * @returns {Promise<void>}
      */
-    leave(): Promise<void>;
+    leave(this: TransitionInterface): Promise<void>;
 }
 export type TransitionOptions = {
     enterFrom: string;

package/primitives/Transition/Transition.js

@@ -1,45 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-import { transition } from "@studiometa/js-toolkit/utils";
-class Transition extends Base {
-  get target() {
-    return this.$el;
-  }
-  enter() {
-    const { enterFrom, enterActive, enterTo, enterKeep } = this.$options;
-    return transition(this.target, {
-      from: enterFrom,
-      active: enterActive,
-      to: enterTo
-    }, enterKeep && "keep");
-  }
-  leave() {
-    const { leaveFrom, leaveActive, leaveTo, leaveKeep } = this.$options;
-    return transition(this.target, {
-      from: leaveFrom,
-      active: leaveActive,
-      to: leaveTo
-    }, leaveKeep && "keep");
-  }
-}
-__publicField(Transition, "config", {
-  name: "Transition",
-  options: {
-    enterFrom: String,
-    enterActive: String,
-    enterTo: String,
-    enterKeep: Boolean,
-    leaveFrom: String,
-    leaveActive: String,
-    leaveTo: String,
-    leaveKeep: Boolean
-  }
-});
-export {
-  Transition as default
-};
+import{Base as a}from"@studiometa/js-toolkit";import{transition as i}from"@studiometa/js-toolkit/utils";class s extends a{static config={name:"Transition",options:{enterFrom:String,enterActive:String,enterTo:String,enterKeep:Boolean,leaveFrom:String,leaveActive:String,leaveTo:String,leaveKeep:Boolean}};get target(){return this.$el}enter(){const{enterFrom:e,enterActive:t,enterTo:r,enterKeep:n,leaveTo:o}=this.$options;return i(this.target,{from:(o+" "+e).trim(),active:t,to:r},n&&"keep")}leave(){const{leaveFrom:e,leaveActive:t,leaveTo:r,leaveKeep:n,enterTo:o}=this.$options;return i(this.target,{from:(o+" "+e).trim(),active:t,to:r},n&&"keep")}}export{s as default};

package/primitives/index.cjs

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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/primitives/index.js
 var primitives_exports = {};
@@ -33,8 +26,8 @@ __export(primitives_exports, {
   Sentinel: () => import_Sentinel.default,
   Transition: () => import_Transition.default
 });
+module.exports = __toCommonJS(primitives_exports);
 var import_Draggable = __toESM(require("./Draggable/Draggable.cjs"), 1);
 var import_Sentinel = __toESM(require("./Sentinel/Sentinel.cjs"), 1);
 var import_Transition = __toESM(require("./Transition/Transition.cjs"), 1);
-module.exports = __toCommonJS(primitives_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/primitives/index.js

@@ -1,8 +1 @@
-import { default as default2 } from "./Draggable/Draggable.js";
-import { default as default3 } from "./Sentinel/Sentinel.js";
-import { default as default4 } from "./Transition/Transition.js";
-export {
-  default2 as Draggable,
-  default3 as Sentinel,
-  default4 as Transition
-};
+import{default as r}from"./Draggable/Draggable.js";import{default as o}from"./Sentinel/Sentinel.js";import{default as l}from"./Transition/Transition.js";export{r as Draggable,o as Sentinel,l as Transition};