@studiometa/ui 0.2.1 → 0.2.4

package/organisms/Frame/Frame.d.ts

@@ -0,0 +1,119 @@
+/**
+ * @typedef {Object} FrameOptions
+ * @property {boolean} history
+ * @property {'replace'|'prepend'|'append'} position
+ * @property {string} target
+ */
+/**
+ * @typedef {Frame & {
+ *   $children: {
+ *     FrameAnchor: FrameAnchor[],
+ *     FrameForm: FrameForm[],
+ *     FrameTarget: FrameTarget[],
+ *     Frame: Frame[],
+ *   }
+ * }} FrameInterface
+ */
+/**
+ * Class.
+ */
+export default class Frame extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        emits: string[];
+        log: boolean;
+        components: {
+            FrameAnchor: typeof FrameAnchor;
+            FrameForm: typeof FrameForm;
+            FrameTarget: typeof FrameTarget;
+            Frame: typeof Frame;
+        };
+        options: {
+            history: BooleanConstructor;
+        };
+    };
+    /**
+     * Get uniq id.
+     * @returns {string}
+     */
+    get id(): string;
+    /**
+     * Get direct children.
+     *
+     * @this    {FrameInterface}
+     * @param   {string} name
+     * @returns {any[]}
+     */
+    getDirectChild(this: FrameInterface, name: string): any[];
+    /**
+     * Get direct `FrameAnchor` children.
+     * @returns {FrameAnchor[]}
+     */
+    get directChildFrameAnchor(): FrameAnchor[];
+    /**
+     * Get direct `FrameForm` children.
+     * @returns {FrameForm[]}
+     */
+    get directChildFrameForm(): FrameForm[];
+    /**
+     * Get direct `FrameTarget` children.
+     * @returns {FrameTarget[]}
+     */
+    get directChildFrameTarget(): FrameTarget[];
+    /**
+     * Prevent click on `FrameAnchor`.
+     *
+     * @this    {FrameInterface}
+     * @param   {MouseEvent} event
+     * @param   {number} index
+     * @returns {void}
+     */
+    onFrameAnchorFrameClick(this: FrameInterface, event: MouseEvent, index: number): void;
+    /**
+     * Prevent submit on forms.
+     *
+     * @this    {FrameInterface}
+     * @param   {SubmitEvent} event
+     * @param   {number} index
+     * @returns {void}
+     */
+    onFrameFormFrameSubmit(this: FrameInterface, event: SubmitEvent, index: number): void;
+    /**
+     * Parge an HTML string into a DOM object.
+     * @param   {string} string
+     * @returns {Document}
+     */
+    parseHTML(string?: string): Document;
+    /**
+     * Go to the given url.
+     * @param   {string} url
+     * @returns {Promise<void>}
+     */
+    goTo(url: string): Promise<void>;
+    /**
+     * Fetch the given url.
+     * @param   {string} url
+     * @returns {Promise<string>}
+     */
+    fetch(url: string): Promise<string>;
+}
+export type FrameOptions = {
+    history: boolean;
+    position: 'replace' | 'prepend' | 'append';
+    target: string;
+};
+export type FrameInterface = Frame & {
+    $children: {
+        FrameAnchor: FrameAnchor[];
+        FrameForm: FrameForm[];
+        FrameTarget: FrameTarget[];
+        Frame: Frame[];
+    };
+};
+import { Base } from "@studiometa/js-toolkit";
+import FrameAnchor from "./FrameAnchor.js";
+import FrameForm from "./FrameForm.js";
+import FrameTarget from "./FrameTarget.js";

package/organisms/Frame/Frame.js

@@ -0,0 +1 @@
+import{Base as l}from"@studiometa/js-toolkit";import{nextFrame as c,historyPush as d}from"@studiometa/js-toolkit/utils";import f from"./FrameAnchor.js";import F from"./FrameForm.js";import g from"./FrameTarget.js";const n=new Map;class a extends l{static config={name:"Frame",emits:["before-fetch","after-fetch","before-leave","after-leave","before-content","after-content","before-enter","after-enter"],log:!0,components:{FrameAnchor:f,FrameForm:F,FrameTarget:g,Frame:a},options:{history:Boolean}};get id(){return this.$el.id}getDirectChild(e){return this.$children[e]?this.$children.Frame?this.$children[e].filter(t=>this.$children.Frame.every(r=>r.$children[e]?!r.$children[e].includes(t):!0)):this.$children[e]:[]}get directChildFrameAnchor(){return this.getDirectChild("FrameAnchor")}get directChildFrameForm(){return this.getDirectChild("form")}get directChildFrameTarget(){return this.getDirectChild("FrameTarget")}onFrameAnchorFrameClick(e,t){if(!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[t]))return;this.$log("onAFrameClick",e,t),e.preventDefault();const r=this.$children.FrameAnchor[t];r.href!==window.location.href&&this.goTo(r.href)}onFrameFormFrameSubmit(e,t){if(!this.directChildFrameForm.includes(this.$children.FrameForm[t]))return;this.$log("onFrameFormFrameSubmit",e),e.preventDefault();const r=this.$children.FrameForm[t];this.goTo(r.action)}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e){this.$log("goTo",e);const t=new URL(e);if(t.origin!==window.location.origin)throw new Error("Cross origin request are not allowed.");this.$emit("before-fetch",e);const r=await this.fetch(e),i=this.parseHTML(r),h=i.querySelector(`#${this.id}`),s=new a(h);s.$children.registerAll(),this.$emit("after-fetch",e,r),this.$emit("before-leave"),await Promise.all(this.directChildFrameTarget.map(o=>o.leave())),this.$emit("after-leave"),this.$emit("before-content"),this.directChildFrameTarget.map((o,m)=>o.updateContent(s.directChildFrameTarget[m])),this.$options.history&&(document.title=i.title,d({path:t.pathname,search:t.searchParams})),await c(),this.$root.$update(),await c(),this.$emit("after-content"),this.$emit("before-enter"),await Promise.all(this.directChildFrameTarget.map(o=>o.enter())),this.$emit("after-enter")}async fetch(e){const t=n.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{n.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(h=>h.text());return n.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return n.set(e,{promise:r,status:"error",content:i}),i}}}export{a as default};

package/organisms/Frame/FrameAnchor.cjs

@@ -0,0 +1,43 @@
+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/organisms/Frame/FrameAnchor.js
+var FrameAnchor_exports = {};
+__export(FrameAnchor_exports, {
+  default: () => FrameAnchor
+});
+module.exports = __toCommonJS(FrameAnchor_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var FrameAnchor = class extends import_js_toolkit.Base {
+  get href() {
+    return this.$el.href;
+  }
+  onClick(event) {
+    this.$emit("frame-click", event);
+  }
+};
+__publicField(FrameAnchor, "config", {
+  name: "FrameAnchor",
+  emits: ["frame-click"]
+});
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameAnchor.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @typedef {FrameAnchor & {
+ *   $el: HTMLAnchorElement
+ * }} FrameAnchorInterface
+ */
+/**
+ * FrameAnchor class.
+ */
+export default class FrameAnchor extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        emits: string[];
+    };
+    /**
+     * Get the URL.
+     *
+     * @this    {FrameAnchorInterface}
+     * @returns {string}
+     */
+    get href(): string;
+    /**
+     * Dispatch the link click event.
+     *
+     * @param   {MouseEvent} event
+     * @returns {void}
+     */
+    onClick(event: MouseEvent): void;
+}
+export type FrameAnchorInterface = FrameAnchor & {
+    $el: HTMLAnchorElement;
+};
+import { Base } from "@studiometa/js-toolkit";

package/organisms/Frame/FrameAnchor.js

@@ -0,0 +1 @@
+import{Base as r}from"@studiometa/js-toolkit";class t extends r{static config={name:"FrameAnchor",emits:["frame-click"]};get href(){return this.$el.href}onClick(e){this.$emit("frame-click",e)}}export{t as default};

package/organisms/Frame/FrameForm.cjs

@@ -0,0 +1,43 @@
+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/organisms/Frame/FrameForm.js
+var FrameForm_exports = {};
+__export(FrameForm_exports, {
+  default: () => FrameForm
+});
+module.exports = __toCommonJS(FrameForm_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var FrameForm = class extends import_js_toolkit.Base {
+  get action() {
+    return this.$el.action;
+  }
+  onSubmit(event) {
+    this.$emit("frame-submit", event);
+  }
+};
+__publicField(FrameForm, "config", {
+  name: "FrameForm",
+  emits: ["frame-submit"]
+});
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameForm.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @typedef {FrameForm & {
+ *   $el: HTMLFormElement
+ * }} FrameFormInterface
+ */
+/**
+ * FrameForm class.
+ */
+export default class FrameForm extends Base {
+    static config: {
+        name: string;
+        emits: string[];
+    };
+    /**
+     * Get the form action.
+     *
+     * @this    {FrameFormInterface}
+     * @returns {string}
+     */
+    get action(): string;
+    /**
+     * Dispatch the form `submit` event.
+     *
+     * @param   {SubmitEvent} event
+     * @returns {void}
+     */
+    onSubmit(event: SubmitEvent): void;
+}
+export type FrameFormInterface = FrameForm & {
+    $el: HTMLFormElement;
+};
+import { Base } from "@studiometa/js-toolkit";

package/organisms/Frame/FrameForm.js

@@ -0,0 +1 @@
+import{Base as e}from"@studiometa/js-toolkit";class m extends e{static config={name:"FrameForm",emits:["frame-submit"]};get action(){return this.$el.action}onSubmit(t){this.$emit("frame-submit",t)}}export{m as default};

package/organisms/Frame/FrameTarget.cjs

@@ -0,0 +1,92 @@
+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/organisms/Frame/FrameTarget.js
+var FrameTarget_exports = {};
+__export(FrameTarget_exports, {
+  default: () => FrameTarget
+});
+module.exports = __toCommonJS(FrameTarget_exports);
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_primitives = require("../../primitives/index.cjs");
+var _FrameTarget = class extends import_primitives.Transition {
+  get $options() {
+    const options = super.$options;
+    options.leaveKeep = true;
+    return options;
+  }
+  get id() {
+    return this.$options.id ?? this.$el.id;
+  }
+  async enter() {
+    this.$log("enter");
+    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo } = this.$options;
+    const transitionStyles = { from, active, to };
+    switch (this.$options.mode) {
+      case "append":
+      case "prepend":
+        await Promise.all(Array.from(this.$el.children).filter((child) => from.split(" ").every((className) => child.classList.contains(className))).map((child) => {
+          return (0, import_utils.transition)(child, transitionStyles);
+        }));
+        break;
+      case "replace":
+      default:
+        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(" ");
+        await (0, import_utils.transition)(this.$el, transitionStyles);
+    }
+  }
+  updateContent(newTarget) {
+    switch (this.$options.mode) {
+      case "prepend":
+      case "append":
+        Array.from(newTarget.$el.children).forEach((child) => {
+          child.classList.add(...this.$options.enterFrom.split(" "));
+        });
+        this.$el.insertAdjacentHTML(_FrameTarget.__INSERT_MODES[this.$options.mode], newTarget.$el.innerHTML);
+        break;
+      case "replace":
+      default:
+        this.$el.innerHTML = newTarget.$el.innerHTML;
+        break;
+    }
+  }
+};
+var FrameTarget = _FrameTarget;
+__publicField(FrameTarget, "config", {
+  ...import_primitives.Transition.config,
+  name: "FrameTarget",
+  log: true,
+  options: {
+    ...import_primitives.Transition.config.options,
+    mode: {
+      type: String,
+      default: "replace"
+    },
+    id: String
+  }
+});
+__publicField(FrameTarget, "__INSERT_MODES", {
+  prepend: "afterbegin",
+  append: "beforeend"
+});
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameTarget.d.ts

@@ -0,0 +1,47 @@
+/**
+ * FrameTarget class.
+ */
+export default class FrameTarget extends Transition {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        log: boolean;
+        options: {
+            mode: {
+                type: StringConstructor;
+                default: string;
+            };
+            id: StringConstructor;
+            enterFrom: StringConstructor;
+            enterActive: StringConstructor;
+            enterTo: StringConstructor;
+            enterKeep: BooleanConstructor;
+            leaveFrom: StringConstructor;
+            leaveActive: StringConstructor;
+            leaveTo: StringConstructor;
+            leaveKeep: BooleanConstructor;
+        };
+    };
+    /**
+     * Insert modes.
+     */
+    static __INSERT_MODES: {
+        prepend: string;
+        append: string;
+    };
+    /**
+     * Get uniq ID.
+     * @returns {string}
+     */
+    get id(): string;
+    /**
+     * Update the content from the new target.
+     *
+     * @param   {FrameTarget} newTarget The instance of the new target.
+     * @returns {void}
+     */
+    updateContent(newTarget: FrameTarget): void;
+}
+import { Transition } from "../../primitives/index.js";

package/organisms/Frame/FrameTarget.js

@@ -0,0 +1 @@
+import{transition as s}from"@studiometa/js-toolkit/utils";import{Transition as r}from"../../primitives/index.js";class o extends r{static config={...r.config,name:"FrameTarget",log:!0,options:{...r.config.options,mode:{type:String,default:"replace"},id:String}};static __INSERT_MODES={prepend:"afterbegin",append:"beforeend"};get $options(){const e=super.$options;return e.leaveKeep=!0,e}get id(){return this.$options.id??this.$el.id}async enter(){this.$log("enter");const{enterFrom:e,enterActive:t,enterTo:a,leaveTo:p}=this.$options,i={from:e,active:t,to:a};switch(this.$options.mode){case"append":case"prepend":await Promise.all(Array.from(this.$el.children).filter(n=>e.split(" ").every(l=>n.classList.contains(l))).map(n=>s(n,i)));break;case"replace":default:i.from=Array.from(new Set([e,p].flat())).join(" "),await s(this.$el,i)}}updateContent(e){switch(this.$options.mode){case"prepend":case"append":Array.from(e.$el.children).forEach(t=>{t.classList.add(...this.$options.enterFrom.split(" "))}),this.$el.insertAdjacentHTML(o.__INSERT_MODES[this.$options.mode],e.$el.innerHTML);break;case"replace":default:this.$el.innerHTML=e.$el.innerHTML;break}}}export{o as default};

package/organisms/Frame/index.cjs

@@ -0,0 +1,35 @@
+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/organisms/Frame/index.js
+var Frame_exports = {};
+__export(Frame_exports, {
+  Frame: () => import_Frame.default,
+  FrameAnchor: () => import_FrameAnchor.default,
+  FrameForm: () => import_FrameForm.default,
+  FrameTarget: () => import_FrameTarget.default
+});
+module.exports = __toCommonJS(Frame_exports);
+var import_Frame = __toESM(require("./Frame.cjs"), 1);
+var import_FrameAnchor = __toESM(require("./FrameAnchor.cjs"), 1);
+var import_FrameForm = __toESM(require("./FrameForm.cjs"), 1);
+var import_FrameTarget = __toESM(require("./FrameTarget.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Frame } from "./Frame.js";
+export { default as FrameAnchor } from "./FrameAnchor.js";
+export { default as FrameForm } from "./FrameForm.js";
+export { default as FrameTarget } from "./FrameTarget.js";

package/organisms/Frame/index.js

@@ -0,0 +1 @@
+import{default as e}from"./Frame.js";import{default as m}from"./FrameAnchor.js";import{default as f}from"./FrameForm.js";import{default as d}from"./FrameTarget.js";export{e as Frame,m as FrameAnchor,f as FrameForm,d as FrameTarget};

package/organisms/index.cjs

@@ -2,22 +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 = {};
 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.d.ts

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

package/organisms/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "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.15",
-    "deepmerge": "^4.2.2",
-    "motion": "^10.5.0"
+    "@studiometa/js-toolkit": "^2.0.0-rc.2",
+    "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}