@maas/vue-equipment 1.0.0-beta.9 → 1.0.1

package/dist/plugins/MagicAccordion/src/composables/useMagicAccordion.d.ts

@@ -1,10 +1,6 @@
-import { type MaybeRef } from 'vue';
-interface UseMagicAccordionArgs {
-    instanceId: MaybeRef<string>;
-}
-export declare function useMagicAccordion(args: UseMagicAccordionArgs): {
+import type { MaybeRef } from 'vue';
+export declare function useMagicAccordion(id: MaybeRef<string>): {
     selectView: (id: string) => void;
     unselectView: (id: string) => void;
 };
 export type UseMagicAccordionReturn = ReturnType<typeof useMagicAccordion>;
-export {};

package/dist/plugins/MagicAccordion/src/composables/useMagicAccordion.mjs

@@ -1,7 +1,6 @@
 import { useAccordionView } from "./private/useAccordionView.mjs";
-export function useMagicAccordion(args) {
-  const { instanceId } = args;
-  const { selectView, unselectView } = useAccordionView(instanceId);
+export function useMagicAccordion(id) {
+  const { selectView, unselectView } = useAccordionView(id);
   return {
     selectView,
     unselectView

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

@@ -8,17 +8,19 @@ export interface MagicAccordionOptions {
         easing: (t: number) => number;
     };
 }
+export type RequiredMagicAccordionOptions = Required<MagicAccordionOptions>;
 export interface AccordionView {
     id: string;
     active: boolean;
 }
 export interface AccordionState {
     id: string;
+    refCount: number;
     views: AccordionView[];
     options: MagicAccordionOptions;
 }
 export type Interaction = 'click' | 'mouseenter';
-export type AccordionEvents = {
+export interface AccordionEvents {
     beforeEnter: {
         id: string;
         viewId: string;
@@ -43,5 +45,5 @@ export type AccordionEvents = {
         id: string;
         viewId: string;
     };
-};
+}
 export {};

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

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

package/dist/plugins/MagicCarousel/index.d.ts

@@ -0,0 +1,7 @@
+import { useMagicCarousel } from './src/composables/useMagicCarousel.js';
+import { MagicCarouselInstanceId } from './src/symbols/index.js';
+import type { Plugin } from 'vue';
+import type { MagicCarouselOptions, CarouselTriggerAction, CarouselEvents } from './src/types/index.js';
+declare const MagicCarouselPlugin: Plugin;
+export { MagicCarouselPlugin, useMagicCarousel, MagicCarouselInstanceId };
+export type { MagicCarouselOptions, CarouselTriggerAction, CarouselEvents };

package/dist/plugins/MagicCarousel/index.mjs

@@ -0,0 +1,15 @@
+import MagicCarouselProvider from "./src/components/MagicCarouselProvider.vue";
+import MagicCarouselSlide from "./src/components/MagicCarouselSlide.vue";
+import MagicCarouselTrigger from "./src/components/MagicCarouselTrigger.vue";
+import MagicCarouselTrack from "./src/components/MagicCarouselTrack.vue";
+import { useMagicCarousel } from "./src/composables/useMagicCarousel.mjs";
+import { MagicCarouselInstanceId } from "./src/symbols/index.mjs";
+const MagicCarouselPlugin = {
+  install: (app) => {
+    app.component("MagicCarouselProvider", MagicCarouselProvider);
+    app.component("MagicCarouselSlide", MagicCarouselSlide);
+    app.component("MagicCarouselTrigger", MagicCarouselTrigger);
+    app.component("MagicCarouselTrack", MagicCarouselTrack);
+  }
+};
+export { MagicCarouselPlugin, useMagicCarousel, MagicCarouselInstanceId };

package/dist/plugins/MagicCarousel/nuxt.mjs

@@ -0,0 +1,23 @@
+import {
+  addComponentsDir,
+  addImports,
+  createResolver,
+  defineNuxtModule
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicCarousel"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("src/components"),
+      global: true,
+      pathPrefix: false
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicCarousel",
+      name: "useMagicCarousel"
+    });
+  }
+});

package/dist/plugins/MagicCarousel/src/components/MagicCarouselProvider.d.vue.ts

@@ -0,0 +1,20 @@
+import type { MaybeRef } from 'vue';
+import type { MagicCarouselOptions } from '../types/index.js';
+interface MagicCarouselProviderProps {
+    id: MaybeRef<string>;
+    asChild?: boolean;
+    options?: MagicCarouselOptions;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselProvider.vue

@@ -0,0 +1,37 @@
+<template>
+  <vue-primitive
+    :data-id="id"
+    :as-child="asChild"
+    class="magic-carousel-provider"
+  >
+    <slot />
+  </vue-primitive>
+</template>
+
+<script setup>
+import { provide, watch } from "vue";
+import { VuePrimitive } from "@maas/vue-primitive";
+import { useCarouselState } from "../composables/private/useCarouselState";
+import { MagicCarouselInstanceId } from "../symbols";
+const { id, asChild, options } = defineProps({
+  id: { type: null, required: true },
+  asChild: { type: Boolean, required: false },
+  options: { type: Object, required: false }
+});
+const { initializeState } = useCarouselState(id);
+initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
+provide(MagicCarouselInstanceId, id);
+</script>
+
+<style>
+.magic-carousel-provider {
+  container-type: inline-size;
+}
+</style>

package/dist/plugins/MagicCarousel/src/components/MagicCarouselProvider.vue.d.ts

@@ -0,0 +1,20 @@
+import type { MaybeRef } from 'vue';
+import type { MagicCarouselOptions } from '../types/index.js';
+interface MagicCarouselProviderProps {
+    id: MaybeRef<string>;
+    asChild?: boolean;
+    options?: MagicCarouselOptions;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselSlide.d.vue.ts

@@ -0,0 +1,20 @@
+interface MagicCarouselSlideProps {
+    id?: string;
+    asChild?: boolean;
+}
+declare var __VLS_9: {
+    active: any;
+    index: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselSlideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselSlideProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselSlide.vue

@@ -0,0 +1,74 @@
+<template>
+  <vue-primitive
+    ref="el"
+    class="magic-carousel-slide"
+    :as-child="asChild"
+    :data-id="mappedId"
+    :data-active="slide.active || null"
+    :style="mappedStyle"
+  >
+    <slot :active="slide.active" :index="mappedIndex" />
+  </vue-primitive>
+</template>
+
+<script setup>
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  useId,
+  useTemplateRef
+} from "vue";
+import { unrefElement } from "@vueuse/core";
+import { VuePrimitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
+import { MagicCarouselInstanceId } from "../symbols";
+import { useCarouselState } from "../composables/private/useCarouselState";
+import { useCarouselSlides } from "../composables/private/useCarouselSlides";
+const { id, asChild } = defineProps({
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicCarousel",
+  source: "MagicCarouselSlide"
+});
+const instanceId = inject(MagicCarouselInstanceId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicCarouselSlide must be nested inside MagicCarouselProvider",
+  errorCode: "missing_instance_id"
+});
+const uuid = useId();
+const mappedId = computed(() => id ?? `magic-carousel-slide-${uuid}`);
+const elRef = useTemplateRef("el");
+const { initializeState } = useCarouselState(instanceId);
+const state = initializeState();
+const { initializeSlide, connectSlide, deleteSlide } = useCarouselSlides(instanceId);
+const slide = initializeSlide({ id: mappedId.value });
+const mappedIndex = computed(
+  () => state.slides.findIndex((entry) => entry.id === mappedId.value)
+);
+const mappedStyle = computed(() => ({
+  "--mc-loop-x": `${slide.loopOffset}px`
+}));
+onMounted(() => {
+  const el = unrefElement(elRef);
+  if (el instanceof HTMLElement) {
+    connectSlide(mappedId.value, el);
+  }
+});
+onBeforeUnmount(() => {
+  deleteSlide(mappedId.value);
+});
+</script>
+
+<style>
+.magic-carousel-slide {
+  scroll-snap-align: var(--magic-carousel-snap-align, start);
+  scroll-snap-stop: var(--magic-carousel-snap-stop, normal);
+  translate: var(--mc-loop-x, 0px) 0;
+}
+</style>

package/dist/plugins/MagicCarousel/src/components/MagicCarouselSlide.vue.d.ts

@@ -0,0 +1,20 @@
+interface MagicCarouselSlideProps {
+    id?: string;
+    asChild?: boolean;
+}
+declare var __VLS_9: {
+    active: any;
+    index: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselSlideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselSlideProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselTrack.d.vue.ts

@@ -0,0 +1,20 @@
+interface MagicCarouselTrackProps {
+    asChild?: boolean;
+}
+declare var __VLS_9: {
+    activeIndex: any;
+    progress: any;
+    dragging: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselTrackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselTrackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselTrack.vue

@@ -0,0 +1,135 @@
+<template>
+  <vue-primitive
+    ref="el"
+    class="magic-carousel-track"
+    :as-child="asChild"
+    :data-draggable="state.draggable || null"
+    :data-dragging="state.dragging || null"
+    :data-scrolling="state.scrolling || null"
+    :data-snapping="state.snapping || null"
+    :data-loop="state.options.loop || null"
+    :data-arrived-start="state.arrivedStart || null"
+    :data-arrived-end="state.arrivedEnd || null"
+    :style="mappedStyle"
+  >
+    <slot
+      :active-index="state.activeIndex"
+      :progress="state.progress"
+      :dragging="state.dragging"
+    />
+  </vue-primitive>
+</template>
+
+<script setup>
+import {
+  computed,
+  inject,
+  markRaw,
+  onBeforeUnmount,
+  onMounted,
+  useTemplateRef
+} from "vue";
+import { unrefElement } from "@vueuse/core";
+import { VuePrimitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
+import { MagicCarouselInstanceId } from "../symbols";
+import { useCarouselState } from "../composables/private/useCarouselState";
+import { useCarouselMeasure } from "../composables/private/useCarouselMeasure";
+import { useCarouselScroll } from "../composables/private/useCarouselScroll";
+import { useCarouselDrag } from "../composables/private/useCarouselDrag";
+const { asChild } = defineProps({
+  asChild: { type: Boolean, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicCarousel",
+  source: "MagicCarouselTrack"
+});
+const instanceId = inject(MagicCarouselInstanceId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicCarouselTrack must be nested inside MagicCarouselProvider",
+  errorCode: "missing_instance_id"
+});
+const elRef = useTemplateRef("el");
+const { initializeState } = useCarouselState(instanceId);
+const state = initializeState();
+useCarouselMeasure(instanceId);
+useCarouselScroll(instanceId);
+useCarouselDrag(instanceId);
+const mappedStyle = computed(() => ({
+  "--mc-rubberband-x": `${state.rubberbandOffset}px`
+}));
+onMounted(() => {
+  const el = unrefElement(elRef);
+  if (el instanceof HTMLElement) {
+    state.trackEl = markRaw(el);
+  }
+});
+onBeforeUnmount(() => {
+  state.trackEl = null;
+});
+</script>
+
+<style>
+.magic-carousel-track {
+  --magic-carousel-drag-overshoot: 4rem;
+  --mc-slide-basis: 100%;
+
+  position: relative;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(
+    --magic-carousel-slide-size,
+    calc(
+      (
+          var(--mc-slide-basis) - (var(--magic-carousel-slides-per-view, 1) - 1) *
+            var(--magic-carousel-gap, 0px)
+        ) /
+        var(--magic-carousel-slides-per-view, 1)
+    )
+  );
+  gap: var(--magic-carousel-gap, 0px);
+  overflow-x: auto;
+  overflow-y: clip;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: var(--magic-carousel-snap-type, x mandatory);
+  scrollbar-width: none;
+  translate: var(--mc-rubberband-x, 0px) 0;
+}
+
+.magic-carousel-track::-webkit-scrollbar {
+  display: none;
+}
+
+.magic-carousel-track[data-scrolling='true'],
+.magic-carousel-track[data-snapping='true'] {
+  scroll-snap-type: none;
+}
+
+.magic-carousel-track[data-loop='true'] {
+  --mc-slide-basis: 100cqi;
+
+  padding-inline: 50%;
+  scroll-padding-inline: 50%;
+}
+
+.magic-carousel-track[data-loop='true']::after {
+  content: '';
+  width: calc(var(--magic-carousel-gap, 0px) + 8px);
+}
+
+.magic-carousel-track[data-draggable='true'] {
+  cursor: var(--magic-carousel-cursor, grab);
+}
+
+.magic-carousel-track[data-draggable='true'][data-dragging='true'] {
+  cursor: var(--magic-carousel-cursor-dragging, grabbing);
+}
+
+.magic-carousel-track[data-draggable='true'] * {
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+</style>

package/dist/plugins/MagicCarousel/src/components/MagicCarouselTrack.vue.d.ts

@@ -0,0 +1,20 @@
+interface MagicCarouselTrackProps {
+    asChild?: boolean;
+}
+declare var __VLS_9: {
+    activeIndex: any;
+    progress: any;
+    dragging: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselTrackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselTrackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselTrigger.d.vue.ts

@@ -0,0 +1,22 @@
+import type { CarouselTriggerAction } from '../types/index.js';
+interface MagicCarouselTriggerProps {
+    action?: CarouselTriggerAction;
+    disabled?: boolean;
+    asChild?: boolean;
+}
+declare var __VLS_10: {
+    active: boolean;
+    disabled: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/components/MagicCarouselTrigger.vue

@@ -0,0 +1,82 @@
+<template>
+  <vue-primitive
+    class="magic-carousel-trigger"
+    as="button"
+    type="button"
+    :as-child="asChild"
+    :data-action="action"
+    :data-active="mappedActive || null"
+    :data-disabled="mappedDisabled || null"
+    :aria-disabled="mappedDisabled || void 0"
+    @click="onClick"
+  >
+    <slot :active="mappedActive" :disabled="mappedDisabled" />
+  </vue-primitive>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import { VuePrimitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
+import { MagicCarouselInstanceId } from "../symbols";
+import { useMagicCarousel } from "../composables/useMagicCarousel";
+const {
+  action = "next",
+  disabled = false,
+  asChild
+} = defineProps({
+  action: { type: [String, Number], required: false },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicCarousel",
+  source: "MagicCarouselTrigger"
+});
+const instanceId = inject(MagicCarouselInstanceId, void 0);
+magicError.assert(instanceId, {
+  message: "MagicCarouselTrigger must be nested inside MagicCarouselProvider",
+  errorCode: "missing_instance_id"
+});
+const { activeIndex, arrivedStart, arrivedEnd, previous, next, snapTo } = useMagicCarousel(instanceId);
+const mappedActive = computed(
+  () => typeof action === "number" && action === activeIndex.value
+);
+const mappedDisabled = computed(() => {
+  switch (action) {
+    case "previous":
+      return disabled || arrivedStart.value;
+    case "next":
+      return disabled || arrivedEnd.value;
+    default:
+      return disabled;
+  }
+});
+function onClick() {
+  if (mappedDisabled.value) {
+    return;
+  }
+  switch (action) {
+    case "previous":
+      previous();
+      break;
+    case "next":
+      next();
+      break;
+    default:
+      snapTo(action);
+  }
+}
+</script>
+
+<style>
+.magic-carousel-trigger {
+  cursor: var(--magic-carousel-trigger-cursor, pointer);
+}
+
+.magic-carousel-trigger[data-disabled='true'] {
+  cursor: var(--magic-carousel-trigger-cursor-disabled, not-allowed);
+}
+</style>

package/dist/plugins/MagicCarousel/src/components/MagicCarouselTrigger.vue.d.ts

@@ -0,0 +1,22 @@
+import type { CarouselTriggerAction } from '../types/index.js';
+interface MagicCarouselTriggerProps {
+    action?: CarouselTriggerAction;
+    disabled?: boolean;
+    asChild?: boolean;
+}
+declare var __VLS_10: {
+    active: boolean;
+    disabled: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicCarouselTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCarouselTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCarousel/src/composables/private/useCarouselDrag.d.ts

@@ -0,0 +1,2 @@
+import type { MaybeRef } from 'vue';
+export declare function useCarouselDrag(instanceId: MaybeRef<string>): void;