@maas/vue-equipment 0.13.0 → 0.14.0

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs

@@ -0,0 +1,201 @@
+import {
+  ref,
+  computed,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  toValue
+} from "vue";
+import { useEventListener, unrefElement } from "@vueuse/core";
+import { interpolate } from "@maas/vue-equipment/utils";
+import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
+export function useDrawerDrag(args) {
+  const { elRef, position, overshoot, threshold, close } = args;
+  const dragStart = ref(void 0);
+  const originX = ref(0);
+  const originY = ref(0);
+  const dragging = ref(false);
+  const shouldClose = ref(false);
+  const elRect = ref(void 0);
+  let cancelPointermove = void 0;
+  const draggedX = ref(0);
+  const draggedY = ref(0);
+  const style = computed(
+    () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
+  );
+  function getSizes() {
+    elRect.value = unrefElement(elRef)?.getBoundingClientRect();
+  }
+  function checkPosition() {
+    switch (position) {
+      case "bottom":
+        if (draggedY.value > toValue(threshold).distance) {
+          shouldClose.value = true;
+        }
+        break;
+      case "top":
+        if (draggedY.value < toValue(threshold).distance * -1) {
+          shouldClose.value = true;
+        }
+        break;
+      case "right":
+        if (draggedX.value > toValue(threshold).distance) {
+          shouldClose.value = true;
+        }
+        break;
+      case "left":
+        if (draggedX.value < toValue(threshold).distance * -1) {
+          shouldClose.value = true;
+        }
+        break;
+    }
+  }
+  function checkMomentum({ x, y }) {
+    const elapsed = Date.now() - dragStart.value.getTime();
+    const velocityX = (x - originX.value) / elapsed;
+    const velocityY = (y - originY.value) / elapsed;
+    switch (position) {
+      case "bottom":
+        if (velocityY > toValue(threshold).momentum) {
+          shouldClose.value = true;
+        }
+        break;
+      case "top":
+        if (velocityY < toValue(threshold).momentum * -1) {
+          shouldClose.value = true;
+        }
+        break;
+      case "right":
+        if (velocityX > toValue(threshold).momentum) {
+          shouldClose.value = true;
+        }
+        break;
+      case "left":
+        if (velocityX < toValue(threshold).momentum * -1) {
+          shouldClose.value = true;
+        }
+        break;
+    }
+  }
+  function clamp(value, from, to) {
+    if (from > to) {
+      if (value > from)
+        return value;
+      if (value < to)
+        return to;
+      else
+        return value;
+    } else if (from < to) {
+      if (value < from)
+        return value;
+      if (value > to)
+        return to;
+      else
+        return value;
+    } else {
+      return value;
+    }
+  }
+  function setDragged({ x, y }) {
+    switch (position) {
+      case "bottom":
+        draggedY.value = clamp(y - originY.value, 0, toValue(overshoot) * -1);
+        break;
+      case "top":
+        draggedY.value = clamp(y - originY.value, 0, toValue(overshoot));
+        break;
+      case "right":
+        draggedX.value = clamp(x - originX.value, 0, toValue(overshoot) * -1);
+        break;
+      case "left":
+        draggedX.value = clamp(x - originX.value, 0, toValue(overshoot));
+        break;
+    }
+  }
+  function resetStateAndListeners() {
+    dragging.value = false;
+    cancelPointermove?.();
+  }
+  function resetDragged() {
+    draggedX.value = 0;
+    draggedY.value = 0;
+  }
+  function emitterCallback(event, _payload) {
+    if (event === "afterLeave") {
+      resetDragged();
+    }
+  }
+  function onPointerup(e) {
+    resetStateAndListeners();
+    if (shouldClose.value) {
+      close();
+    } else {
+      switch (position) {
+        case "bottom":
+        case "top":
+          interpolate({
+            from: draggedY.value,
+            to: 0,
+            duration: 50,
+            callback: (value) => {
+              draggedY.value = value;
+            }
+          });
+          break;
+        case "right":
+        case "left":
+          interpolate({
+            from: draggedX.value,
+            to: 0,
+            duration: 50,
+            callback: (value) => {
+              draggedX.value = value;
+            }
+          });
+          break;
+      }
+    }
+    e.preventDefault();
+  }
+  function onPointermove(e) {
+    shouldClose.value = false;
+    checkMomentum({ x: e.screenX, y: e.screenY });
+    setDragged({ x: e.screenX, y: e.screenY });
+    checkPosition();
+    e.preventDefault();
+  }
+  function onPointerdown(e) {
+    if (dragging.value) {
+      return;
+    } else {
+      dragging.value = true;
+    }
+    ;
+    e.target.setPointerCapture(e.pointerId);
+    useEventListener(document, "pointerup", onPointerup);
+    cancelPointermove = useEventListener(document, "pointermove", onPointermove);
+    originX.value = e.screenX;
+    originY.value = e.screenY;
+    dragStart.value = /* @__PURE__ */ new Date();
+    onPointermove(e);
+    e.preventDefault();
+  }
+  onMounted(() => {
+    getSizes();
+    useDrawerEmitter().on("*", emitterCallback);
+  });
+  watch(
+    () => unrefElement(elRef),
+    () => {
+      getSizes();
+    }
+  );
+  onBeforeUnmount(() => {
+    useDrawerEmitter().off("*", emitterCallback);
+  });
+  return {
+    style,
+    dragging,
+    onPointerdown
+  };
+}

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerStore.d.ts

@@ -0,0 +1,5 @@
+export declare function useDrawerStore(): {
+    drawerStore: import("vue").Ref<string[]>;
+    addInstance: (id: string) => void;
+    removeInstance: (id: string) => void;
+};

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerStore.mjs

@@ -0,0 +1,15 @@
+import { ref } from "vue";
+let drawerStore = ref([]);
+export function useDrawerStore() {
+  function addInstance(id) {
+    drawerStore.value.push(id);
+  }
+  function removeInstance(id) {
+    drawerStore.value = drawerStore.value.filter((x) => x !== id);
+  }
+  return {
+    drawerStore,
+    addInstance,
+    removeInstance
+  };
+}

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts

@@ -0,0 +1,19 @@
+import { type MaybeRef } from 'vue';
+import type { DrawerOptions } from '../types/index.js';
+import type { MaybeElementRef } from '@vueuse/core';
+export type useDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
+    focusTarget: MaybeElementRef;
+};
+export declare function useDrawerApi(id?: MaybeRef<string>, options?: useDrawerApiOptions): {
+    id: import("vue").ComputedRef<string>;
+    isActive: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+};
+export type UseDrawerApiReturn = ReturnType<typeof useDrawerApi>;

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.mjs

@@ -0,0 +1,75 @@
+import { uuid } from "@maas/vue-equipment/utils";
+import { ref, computed, toValue } from "vue";
+import { defu } from "defu";
+import { useScrollLock } from "@vueuse/core";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import { useDrawerStore } from "./private/useDrawerStore.mjs";
+const defaultOptions = {
+  focusTarget: void 0,
+  scrollLock: true
+};
+export function useDrawerApi(id, options) {
+  const positionFixedElements = ref([]);
+  const mappedId = computed(() => toValue(id) || uuid());
+  const mappedOptions = defu(options, defaultOptions);
+  const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
+  const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
+  const { drawerStore, addInstance, removeInstance } = useDrawerStore();
+  const isActive = computed(() => drawerStore.value.includes(mappedId.value));
+  function open() {
+    addInstance(mappedId.value);
+  }
+  function close() {
+    removeInstance(mappedId.value);
+  }
+  function trapFocus() {
+    if (focusTrap) {
+      focusTrap.activate();
+    }
+  }
+  function releaseFocus() {
+    if (focusTrap) {
+      focusTrap.deactivate();
+    }
+  }
+  function lockScroll() {
+    scrollLock.value = true;
+  }
+  function unlockScroll() {
+    scrollLock.value = false;
+  }
+  function addScrollLockPadding() {
+    if (typeof window === "undefined")
+      return;
+    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
+    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
+    document.body.style.paddingRight = "var(--scrollbar-width)";
+    positionFixedElements.value = [
+      ...document.body.getElementsByTagName("*")
+    ].filter(
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed"
+    );
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+    );
+  }
+  function removeScrollLockPadding() {
+    document.body.style.paddingRight = "";
+    document.body.style.removeProperty("--scrollbar-width");
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = ""
+    );
+  }
+  return {
+    id: mappedId,
+    isActive,
+    open,
+    close,
+    trapFocus,
+    releaseFocus,
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  };
+}

package/dist/plugins/MagicDrawer/src/composables/useDrawerEmitter.d.ts

@@ -0,0 +1,15 @@
+import type { DrawerEvents } from '../types.js';
+export declare function useDrawerEmitter(): {
+    on: {
+        <Key extends keyof DrawerEvents>(type: Key, handler: import("mitt").Handler<DrawerEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<DrawerEvents>): void;
+    };
+    off: {
+        <Key_1 extends keyof DrawerEvents>(type: Key_1, handler?: import("mitt").Handler<DrawerEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<DrawerEvents>): void;
+    };
+    emit: {
+        <Key_2 extends keyof DrawerEvents>(type: Key_2, event: DrawerEvents[Key_2]): void;
+        <Key_3 extends keyof DrawerEvents>(type: undefined extends DrawerEvents[Key_3] ? Key_3 : never): void;
+    };
+};

package/dist/plugins/MagicDrawer/src/composables/useDrawerEmitter.mjs

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function useDrawerEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}

package/dist/plugins/MagicDrawer/src/types/index.d.ts

@@ -0,0 +1,29 @@
+export type DrawerOptions = {
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    backdrop?: boolean;
+    focusTrap?: boolean;
+    scrollLock?: boolean;
+    scrollLockPadding?: boolean;
+    teleport?: {
+        target?: string;
+        disabled?: boolean;
+    };
+    transitions?: {
+        content?: string;
+        backdrop?: string;
+    };
+    threshold: {
+        distance: number;
+        momentum: number;
+    };
+    tag?: 'dialog' | 'div';
+    keys?: string[] | false;
+};
+export type DrawerEvents = {
+    beforeEnter: string;
+    enter: string;
+    afterEnter: string;
+    beforeLeave: string;
+    leave: string;
+    afterLeave: string;
+};

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerOptions } from '../types.js';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+declare const defaultOptions: RequireAll<DrawerOptions>;
+export { defaultOptions };

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs

@@ -0,0 +1,22 @@
+const defaultOptions = {
+  position: "bottom",
+  backdrop: true,
+  focusTrap: true,
+  scrollLock: true,
+  scrollLockPadding: true,
+  teleport: {
+    target: "body",
+    disabled: false
+  },
+  transitions: {
+    content: "magic-drawer--content",
+    backdrop: "magic-drawer--backdrop"
+  },
+  threshold: {
+    distance: 150,
+    momentum: 1
+  },
+  tag: "dialog",
+  keys: ["Escape"]
+};
+export { defaultOptions };

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -71,8 +71,8 @@ import { useModalCallback } from '../composables/private/useModalCallback'
 
 import type { ModalOptions } from './../types/index'
 
-import 'utils/css/animations/fade-in.css'
-import 'utils/css/animations/fade-out.css'
+import '@maas/vue-equipment/utils/css/animations/fade-in.css'
+import '@maas/vue-equipment/utils/css/animations/fade-out.css'
 
 // Prevent keys array from being merged with default
 const customDefu = createDefu((obj, key, value) => {

package/dist/plugins/MagicModal/src/components/MagicModal.vue.d.ts

@@ -1,7 +1,7 @@
 import { type Component, type MaybeRef } from 'vue';
 import type { ModalOptions } from './../types/index';
-import 'utils/css/animations/fade-in.css';
-import 'utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicModalProps {
     id: MaybeRef<string>;
     class?: MaybeRef<string>;
@@ -10,9 +10,9 @@ interface MagicModalProps {
     options?: ModalOptions;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicModalProps>, {
-    options: () => RequireAll<ModalOptions>;
+    options: () => ModalOptions;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicModalProps>, {
-    options: () => RequireAll<ModalOptions>;
+    options: () => ModalOptions;
 }>>>, {
     options: ModalOptions;
 }, {}>, {

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.d.ts

@@ -1,6 +1,6 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { ModalOptions } from '../../types.js';
-type Args = {
+type UseModalCallbackArgs = {
     id: MaybeRef<string>;
     mappedOptions: ModalOptions;
     addScrollLockPadding: () => void;
@@ -11,12 +11,12 @@ type Args = {
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;
 };
-export declare function useModalCallback({ id, mappedOptions, addScrollLockPadding, removeScrollLockPadding, lockScroll, unlockScroll, trapFocus, releaseFocus, wrapperActive, }: Args): {
+export declare function useModalCallback(args: UseModalCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;
     onEnter: (_el: Element) => void;
-    onAfterEnter: (el: Element) => Promise<void>;
+    onAfterEnter: (_el: Element) => Promise<void>;
     onBeforeLeave: (_el: Element) => void;
-    onLeave: (el: Element) => void;
+    onLeave: (_el: Element) => void;
     onAfterLeave: (_el: Element) => void;
 };
 export {};

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs

@@ -1,23 +1,24 @@
 import { toValue, nextTick } from "vue";
 import { useModalEmitter } from "./../useModalEmitter.mjs";
-export function useModalCallback({
-  id,
-  mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
-  trapFocus,
-  releaseFocus,
-  wrapperActive
-}) {
+export function useModalCallback(args) {
+  const {
+    id,
+    mappedOptions,
+    addScrollLockPadding,
+    removeScrollLockPadding,
+    lockScroll,
+    unlockScroll,
+    trapFocus,
+    releaseFocus,
+    wrapperActive
+  } = args;
   function onBeforeEnter(_el) {
     useModalEmitter().emit("beforeEnter", toValue(id));
   }
   function onEnter(_el) {
     useModalEmitter().emit("enter", toValue(id));
   }
-  async function onAfterEnter(el) {
+  async function onAfterEnter(_el) {
     useModalEmitter().emit("afterEnter", toValue(id));
     if (mappedOptions.scrollLock) {
       if (mappedOptions.scrollLockPadding) {
@@ -33,7 +34,7 @@ export function useModalCallback({
   function onBeforeLeave(_el) {
     useModalEmitter().emit("beforeLeave", toValue(id));
   }
-  function onLeave(el) {
+  function onLeave(_el) {
     useModalEmitter().emit("leave", toValue(id));
   }
   function onAfterLeave(_el) {

package/dist/plugins/MagicModal/src/composables/useModalApi.mjs

@@ -1,4 +1,4 @@
-import { uuid } from "utils";
+import { uuid } from "@maas/vue-equipment/utils";
 import { ref, computed, toValue } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";

package/dist/plugins/MagicModal/src/utils/defaultOptions.d.ts

@@ -1,4 +1,4 @@
-import type { ModalOptions } from '../types/index.js';
-import type { RequireAll } from 'utils';
+import type { ModalOptions } from '../types.js';
+import type { RequireAll } from '@maas/vue-equipment/utils';
 declare const defaultOptions: RequireAll<ModalOptions>;
 export { defaultOptions };

package/dist/plugins/MagicNoise/src/utils/defaultOptions.d.ts

@@ -1,4 +1,4 @@
 import type { NoiseOptions } from '../types/index.js';
-import type { RequireAll } from 'utils';
+import type { RequireAll } from '@maas/vue-equipment/utils';
 declare const defaultOptions: RequireAll<NoiseOptions>;
 export { defaultOptions };

package/dist/plugins/MagicPlayer/src/composables/private/useControlsApi.mjs

@@ -4,7 +4,7 @@ import {
   useEventListener,
   defaultWindow
 } from "@vueuse/core";
-import { clampValue, mapValue } from "utils";
+import { clampValue, mapValue } from "@maas/vue-equipment/utils";
 import { usePlayerStore } from "./usePlayerStore.mjs";
 export function useControlsApi(args) {
   const { findInstance } = usePlayerStore();

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerInternalApi.mjs

@@ -1,6 +1,6 @@
 import { ref, watch, toValue } from "vue";
 import { useFullscreen } from "@vueuse/core";
-import { isIOS } from "utils";
+import { isIOS } from "@maas/vue-equipment/utils";
 import { usePlayerStore } from "./usePlayerStore.mjs";
 export function usePlayerInternalApi(args) {
   const touched = ref(false);

package/dist/plugins/MagicPlayer/src/composables/usePlayerApi.mjs

@@ -1,4 +1,4 @@
-import { uuid } from "utils";
+import { uuid } from "@maas/vue-equipment/utils";
 import { computed, onUnmounted, toValue } from "vue";
 import { usePlayerStore } from "./private/usePlayerStore.mjs";
 import { usePlayerInternalApi } from "./private/usePlayerInternalApi.mjs";

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -16,7 +16,7 @@ import {
   readonly,
 } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
-import { mapValue } from 'utils'
+import { mapValue } from '@maas/vue-equipment/utils'
 import { useScrollApi } from '../composables/useScrollApi'
 import {
   ScrollPositionKey,

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -1,4 +1,4 @@
-import { mapValue } from 'utils';
+import { mapValue } from '@maas/vue-equipment/utils';
 import type { FromTo } from '../types';
 interface Props {
     from?: FromTo;

package/dist/plugins/MagicScroll/src/composables/useScrollApi.mjs

@@ -1,7 +1,7 @@
 import { ref, inject, toValue } from "vue";
 import { useWindowSize } from "@vueuse/core";
 import { ScrollPositionKey } from "../symbols/index.mjs";
-import { clampValue } from "utils";
+import { clampValue } from "@maas/vue-equipment/utils";
 export function useScrollApi(params) {
   const { child, parent, from, to } = params;
   const scrollPosition = inject(ScrollPositionKey, void 0);

package/dist/plugins/MagicToast/src/components/MagicToast.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { uuid } from 'utils'
+import { uuid } from '@maas/vue-equipment/utils'
 import { defu } from 'defu'
 import { toValue, ref, watch, type MaybeRef } from 'vue'
 import { onClickOutside, type MaybeElement } from '@vueuse/core'
@@ -55,11 +55,11 @@ import MagicToastComponent from './MagicToastComponent.vue'
 
 import type { ToastOptions } from './../types/index'
 
-import 'utils/css/animations/fade-out.css'
-import 'utils/css/animations/slide-ltr-in.css'
-import 'utils/css/animations/slide-rtl-in.css'
-import 'utils/css/animations/slide-ttb-in.css'
-import 'utils/css/animations/slide-btt-in.css'
+import '@maas/vue-equipment/utils/css/animations/fade-out.css'
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css'
 
 interface MagicToastProps {
   id: MaybeRef<string>

package/dist/plugins/MagicToast/src/components/MagicToast.vue.d.ts

@@ -1,10 +1,10 @@
 import { type MaybeRef } from 'vue';
 import type { ToastOptions } from './../types/index';
-import 'utils/css/animations/fade-out.css';
-import 'utils/css/animations/slide-ltr-in.css';
-import 'utils/css/animations/slide-rtl-in.css';
-import 'utils/css/animations/slide-ttb-in.css';
-import 'utils/css/animations/slide-btt-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
 interface MagicToastProps {
     id: MaybeRef<string>;
     class: MaybeRef<string>;

package/dist/plugins/MagicToast/src/composables/private/useToastInternalApi.mjs

@@ -1,4 +1,4 @@
-import { uuid } from "utils";
+import { uuid } from "@maas/vue-equipment/utils";
 export function useToastInternalApi() {
   function removeToastAfterTimeout(id, duration, ctx) {
     if (duration > 0) {

package/dist/plugins/MagicToast/src/composables/private/useToastStore.d.ts

@@ -1,4 +1,4 @@
-import type { ToastInstance } from '../../types.js';
+import type { ToastInstance, AddArgs } from '../../types.js';
 export declare function useToastStore(): {
     toastStore: import("vue").Ref<{
         id: string;
@@ -8,7 +8,7 @@ export declare function useToastStore(): {
             props?: Record<string, any> | undefined;
             remove: Function;
         }[];
-        add: (args: any) => string;
+        add: (args: AddArgs) => string;
         remove: (id: string) => void;
     }[]>;
     findInstance: (id: string) => ToastInstance | undefined;