@ark-ui/vue 5.26.2 → 5.27.1

package/dist/components/marquee/marquee-viewport.vue.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { PolymorphicProps } from '../factory';
+export interface MarqueeViewportBaseProps extends PolymorphicProps {
+}
+export interface MarqueeViewportProps extends MarqueeViewportBaseProps, 
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<MarqueeViewportProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MarqueeViewportProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/marquee/marquee-viewport.vue.js

@@ -0,0 +1,25 @@
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { ark } from '../factory.js';
+import { useForwardExpose } from '../../utils/use-forward-expose.js';
+import { useMarqueeContext } from './use-marquee-context.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "marquee-viewport",
+  props: {
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const marquee = useMarqueeContext();
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ark).div, mergeProps(unref(marquee).getViewportProps(), { "as-child": __props.asChild }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as-child"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/marquee/marquee-viewport.vue2.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const marqueeViewport_vue_vue_type_script_setup_true_lang = require('./marquee-viewport.vue.cjs');
+
+
+
+exports.default = marqueeViewport_vue_vue_type_script_setup_true_lang.default;

package/dist/components/marquee/marquee-viewport.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './marquee-viewport.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/marquee/marquee.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as marqueeAnatomy } from '@zag-js/marquee';

package/dist/components/marquee/marquee.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as marqueeAnatomy } from '@zag-js/marquee';

package/dist/components/marquee/marquee.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const marqueeContent_vue_vue_type_script_setup_true_lang = require('./marquee-content.vue.cjs');
+const marqueeContext_vue_vue_type_script_setup_true_lang = require('./marquee-context.vue.cjs');
+const marqueeEdge_vue_vue_type_script_setup_true_lang = require('./marquee-edge.vue.cjs');
+const marqueeItem_vue_vue_type_script_setup_true_lang = require('./marquee-item.vue.cjs');
+const marqueeRoot_vue_vue_type_script_setup_true_lang = require('./marquee-root.vue.cjs');
+const marqueeRootProvider_vue_vue_type_script_setup_true_lang = require('./marquee-root-provider.vue.cjs');
+const marqueeViewport_vue_vue_type_script_setup_true_lang = require('./marquee-viewport.vue.cjs');
+
+
+
+exports.Content = marqueeContent_vue_vue_type_script_setup_true_lang.default;
+exports.Context = marqueeContext_vue_vue_type_script_setup_true_lang.default;
+exports.Edge = marqueeEdge_vue_vue_type_script_setup_true_lang.default;
+exports.Item = marqueeItem_vue_vue_type_script_setup_true_lang.default;
+exports.Root = marqueeRoot_vue_vue_type_script_setup_true_lang.default;
+exports.RootProvider = marqueeRootProvider_vue_vue_type_script_setup_true_lang.default;
+exports.Viewport = marqueeViewport_vue_vue_type_script_setup_true_lang.default;

package/dist/components/marquee/marquee.d.cts

@@ -0,0 +1,8 @@
+export type { PauseStatusDetails, Side } from '@zag-js/marquee';
+export { default as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content.vue';
+export { default as Context, type MarqueeContextProps as ContextProps } from './marquee-context.vue';
+export { default as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge.vue';
+export { default as Item, type MarqueeItemBaseProps as ItemBaseProps, type MarqueeItemProps as ItemProps, } from './marquee-item.vue';
+export { default as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootEmits as RootEmits, type MarqueeRootProps as RootProps, } from './marquee-root.vue';
+export { default as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider.vue';
+export { default as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport.vue';

package/dist/components/marquee/marquee.d.ts

@@ -0,0 +1,8 @@
+export type { PauseStatusDetails, Side } from '@zag-js/marquee';
+export { default as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content.vue';
+export { default as Context, type MarqueeContextProps as ContextProps } from './marquee-context.vue';
+export { default as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge.vue';
+export { default as Item, type MarqueeItemBaseProps as ItemBaseProps, type MarqueeItemProps as ItemProps, } from './marquee-item.vue';
+export { default as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootEmits as RootEmits, type MarqueeRootProps as RootProps, } from './marquee-root.vue';
+export { default as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider.vue';
+export { default as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport.vue';

package/dist/components/marquee/marquee.js

@@ -0,0 +1,7 @@
+export { default as Content } from './marquee-content.vue.js';
+export { default as Context } from './marquee-context.vue.js';
+export { default as Edge } from './marquee-edge.vue.js';
+export { default as Item } from './marquee-item.vue.js';
+export { default as Root } from './marquee-root.vue.js';
+export { default as RootProvider } from './marquee-root-provider.vue.js';
+export { default as Viewport } from './marquee-viewport.vue.js';

package/dist/components/marquee/marquee.types.d.cts

@@ -0,0 +1,83 @@
+import type * as marquee from '@zag-js/marquee';
+export interface RootProps {
+    /**
+     * Whether to automatically duplicate content to fill the container.
+     * @default false
+     */
+    autoFill?: boolean;
+    /**
+     * Whether the marquee is paused by default.
+     * @default false
+     */
+    defaultPaused?: boolean;
+    /**
+     * The delay before the animation starts (in seconds).
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * The unique identifier of the machine.
+     */
+    id?: string;
+    /**
+     * The ids of the elements in the marquee. Useful for composition.
+     */
+    ids?: Partial<{
+        root: string;
+        viewport: string;
+        content: (index: number) => string;
+    }>;
+    /**
+     * The number of times to loop the animation (0 = infinite).
+     * @default 0
+     */
+    loopCount?: number;
+    /**
+     * Whether to pause the marquee on user interaction (hover, focus).
+     * @default false
+     */
+    pauseOnInteraction?: boolean;
+    /**
+     * Whether the marquee is paused.
+     */
+    paused?: boolean;
+    /**
+     * Whether to reverse the animation direction.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The side/direction the marquee scrolls towards.
+     * @default "start"
+     */
+    side?: marquee.Side;
+    /**
+     * The spacing between marquee items.
+     * @default "1rem"
+     */
+    spacing?: string;
+    /**
+     * The speed of the marquee animation in pixels per second.
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * The localized messages to use.
+     */
+    translations?: marquee.IntlTranslations;
+}
+export type RootEmits = {
+    /**
+     * Function called when the marquee completes all loops and stops.
+     * Only fires for finite loops (loopCount > 0).
+     */
+    complete: [];
+    /**
+     * Function called when the marquee completes one loop iteration.
+     */
+    loopComplete: [];
+    /**
+     * Function called when the pause status changes.
+     */
+    pauseChange: [details: marquee.PauseStatusDetails];
+};

package/dist/components/marquee/marquee.types.d.ts

@@ -0,0 +1,83 @@
+import type * as marquee from '@zag-js/marquee';
+export interface RootProps {
+    /**
+     * Whether to automatically duplicate content to fill the container.
+     * @default false
+     */
+    autoFill?: boolean;
+    /**
+     * Whether the marquee is paused by default.
+     * @default false
+     */
+    defaultPaused?: boolean;
+    /**
+     * The delay before the animation starts (in seconds).
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * The unique identifier of the machine.
+     */
+    id?: string;
+    /**
+     * The ids of the elements in the marquee. Useful for composition.
+     */
+    ids?: Partial<{
+        root: string;
+        viewport: string;
+        content: (index: number) => string;
+    }>;
+    /**
+     * The number of times to loop the animation (0 = infinite).
+     * @default 0
+     */
+    loopCount?: number;
+    /**
+     * Whether to pause the marquee on user interaction (hover, focus).
+     * @default false
+     */
+    pauseOnInteraction?: boolean;
+    /**
+     * Whether the marquee is paused.
+     */
+    paused?: boolean;
+    /**
+     * Whether to reverse the animation direction.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The side/direction the marquee scrolls towards.
+     * @default "start"
+     */
+    side?: marquee.Side;
+    /**
+     * The spacing between marquee items.
+     * @default "1rem"
+     */
+    spacing?: string;
+    /**
+     * The speed of the marquee animation in pixels per second.
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * The localized messages to use.
+     */
+    translations?: marquee.IntlTranslations;
+}
+export type RootEmits = {
+    /**
+     * Function called when the marquee completes all loops and stops.
+     * Only fires for finite loops (loopCount > 0).
+     */
+    complete: [];
+    /**
+     * Function called when the marquee completes one loop iteration.
+     */
+    loopComplete: [];
+    /**
+     * Function called when the pause status changes.
+     */
+    pauseChange: [details: marquee.PauseStatusDetails];
+};

package/dist/components/marquee/use-marquee-context.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [MarqueeProvider, useMarqueeContext] = createContext.createContext("MarqueeContext");
+
+exports.MarqueeProvider = MarqueeProvider;
+exports.useMarqueeContext = useMarqueeContext;

package/dist/components/marquee/use-marquee-context.d.cts

@@ -0,0 +1,4 @@
+import { UseMarqueeReturn } from './use-marquee';
+export interface UseMarqueeContext extends UseMarqueeReturn {
+}
+export declare const MarqueeProvider: (opts: UseMarqueeContext) => void, useMarqueeContext: (fallback?: UseMarqueeContext | undefined) => UseMarqueeContext;

package/dist/components/marquee/use-marquee-context.d.ts

@@ -0,0 +1,4 @@
+import { UseMarqueeReturn } from './use-marquee';
+export interface UseMarqueeContext extends UseMarqueeReturn {
+}
+export declare const MarqueeProvider: (opts: UseMarqueeContext) => void, useMarqueeContext: (fallback?: UseMarqueeContext | undefined) => UseMarqueeContext;

package/dist/components/marquee/use-marquee-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../../utils/create-context.js';
+
+const [MarqueeProvider, useMarqueeContext] = createContext("MarqueeContext");
+
+export { MarqueeProvider, useMarqueeContext };

package/dist/components/marquee/use-marquee.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const marquee = require('@zag-js/marquee');
+const vue$1 = require('@zag-js/vue');
+const vue = require('vue');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const cleanProps = require('../../utils/clean-props.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const marquee__namespace = /*#__PURE__*/_interopNamespaceDefault(marquee);
+
+const useMarquee = (props = {}, emit) => {
+  const id = vue.useId();
+  const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
+  const locale = useLocaleContext.useLocaleContext(useLocaleContext.DEFAULT_LOCALE);
+  const context = vue.computed(() => {
+    const localeProps = vue.toValue(props);
+    return {
+      id,
+      dir: locale.value.dir,
+      getRootNode: env?.value.getRootNode,
+      ...cleanProps.cleanProps(localeProps),
+      onPauseChange: (details) => {
+        emit?.("pauseChange", details);
+        localeProps.onPauseChange?.(details);
+      },
+      onLoopComplete: () => {
+        emit?.("loopComplete");
+        localeProps.onLoopComplete?.();
+      },
+      onComplete: () => {
+        emit?.("complete");
+        localeProps.onComplete?.();
+      }
+    };
+  });
+  const service = vue$1.useMachine(marquee__namespace.machine, context);
+  return vue.computed(() => marquee__namespace.connect(service, vue$1.normalizeProps));
+};
+
+exports.useMarquee = useMarquee;

package/dist/components/marquee/use-marquee.d.cts

@@ -0,0 +1,10 @@
+import { PropTypes } from '@zag-js/vue';
+import { ComputedRef, MaybeRef } from 'vue';
+import { EmitFn, Optional } from '../../types';
+import { RootEmits } from './marquee.types';
+import * as marquee from '@zag-js/marquee';
+export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseMarqueeReturn extends ComputedRef<marquee.Api<PropTypes>> {
+}
+export declare const useMarquee: (props?: MaybeRef<UseMarqueeProps>, emit?: EmitFn<RootEmits>) => UseMarqueeReturn;

package/dist/components/marquee/use-marquee.d.ts

@@ -0,0 +1,10 @@
+import { PropTypes } from '@zag-js/vue';
+import { ComputedRef, MaybeRef } from 'vue';
+import { EmitFn, Optional } from '../../types';
+import { RootEmits } from './marquee.types';
+import * as marquee from '@zag-js/marquee';
+export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseMarqueeReturn extends ComputedRef<marquee.Api<PropTypes>> {
+}
+export declare const useMarquee: (props?: MaybeRef<UseMarqueeProps>, emit?: EmitFn<RootEmits>) => UseMarqueeReturn;

package/dist/components/marquee/use-marquee.js

@@ -0,0 +1,37 @@
+import * as marquee from '@zag-js/marquee';
+import { useMachine, normalizeProps } from '@zag-js/vue';
+import { useId, computed, toValue } from 'vue';
+import { useEnvironmentContext, DEFAULT_ENVIRONMENT } from '../../providers/environment/use-environment-context.js';
+import { useLocaleContext, DEFAULT_LOCALE } from '../../providers/locale/use-locale-context.js';
+import { cleanProps } from '../../utils/clean-props.js';
+
+const useMarquee = (props = {}, emit) => {
+  const id = useId();
+  const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+  const locale = useLocaleContext(DEFAULT_LOCALE);
+  const context = computed(() => {
+    const localeProps = toValue(props);
+    return {
+      id,
+      dir: locale.value.dir,
+      getRootNode: env?.value.getRootNode,
+      ...cleanProps(localeProps),
+      onPauseChange: (details) => {
+        emit?.("pauseChange", details);
+        localeProps.onPauseChange?.(details);
+      },
+      onLoopComplete: () => {
+        emit?.("loopComplete");
+        localeProps.onLoopComplete?.();
+      },
+      onComplete: () => {
+        emit?.("complete");
+        localeProps.onComplete?.();
+      }
+    };
+  });
+  const service = useMachine(marquee.machine, context);
+  return computed(() => marquee.connect(service, normalizeProps));
+};
+
+export { useMarquee };

package/dist/components/tabs/tab-content.vue.cjs

@@ -3,10 +3,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
+const vue$1 = require('@zag-js/vue');
 const useForwardExpose = require('../../utils/use-forward-expose.cjs');
 const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
 const useTabsContext = require('./use-tabs-context.cjs');
-const presence_vue_vue_type_script_setup_true_lang = require('../presence/presence.vue.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
+const factory = require('../factory.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "tab-content",
@@ -18,19 +21,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const tabs = useTabsContext.useTabsContext();
     const renderStrategy = useRenderStrategy.useRenderStrategyProps();
+    const presence = usePresence.usePresence(
+      vue.computed(() => ({
+        ...renderStrategy.value,
+        present: tabs.value.value === props.value,
+        immediate: true
+      }))
+    );
+    usePresenceContext.PresenceProvider(presence);
+    const mergedProps = vue.computed(() => vue$1.mergeProps(tabs.value.getContentProps(props), presence.value.presenceProps));
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(presence_vue_vue_type_script_setup_true_lang.default), vue.mergeProps(vue.unref(tabs).getContentProps(props), {
-        present: vue.unref(tabs).value === props.value,
-        "lazy-mount": vue.unref(renderStrategy).lazyMount,
-        "unmount-on-exit": vue.unref(renderStrategy).unmountOnExit,
-        immediate: true
-      }), {
+      return !vue.unref(presence).unmounted ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["present", "lazy-mount", "unmount-on-exit"]);
+      }, 16, ["as-child"])) : vue.createCommentVNode("", true);
     };
   }
 });

package/dist/components/tabs/tab-content.vue.js

@@ -1,8 +1,11 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
+import { mergeProps } from '@zag-js/vue';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
 import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
 import { useTabsContext } from './use-tabs-context.js';
-import _sfc_main$1 from '../presence/presence.vue.js';
+import { usePresence } from '../presence/use-presence.js';
+import { PresenceProvider } from '../presence/use-presence-context.js';
+import { ark } from '../factory.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-content",
@@ -14,19 +17,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const tabs = useTabsContext();
     const renderStrategy = useRenderStrategyProps();
+    const presence = usePresence(
+      computed(() => ({
+        ...renderStrategy.value,
+        present: tabs.value.value === props.value,
+        immediate: true
+      }))
+    );
+    PresenceProvider(presence);
+    const mergedProps = computed(() => mergeProps(tabs.value.getContentProps(props), presence.value.presenceProps));
     useForwardExpose();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(unref(tabs).getContentProps(props), {
-        present: unref(tabs).value === props.value,
-        "lazy-mount": unref(renderStrategy).lazyMount,
-        "unmount-on-exit": unref(renderStrategy).unmountOnExit,
-        immediate: true
-      }), {
+      return !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps$1({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["present", "lazy-mount", "unmount-on-exit"]);
+      }, 16, ["as-child"])) : createCommentVNode("", true);
     };
   }
 });

package/dist/components/tour/tour-backdrop.vue.cjs

@@ -3,9 +3,11 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
+const vue$1 = require('@zag-js/vue');
 const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
 const useForwardExpose = require('../../utils/use-forward-expose.cjs');
-const presence_vue_vue_type_script_setup_true_lang = require('../presence/presence.vue.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const factory = require('../factory.cjs');
 const useTourContext = require('./use-tour-context.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -16,19 +18,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const tour = useTourContext.useTourContext();
     const renderStrategy = useRenderStrategy.useRenderStrategyProps();
+    const presence = usePresence.usePresence(
+      vue.computed(() => ({
+        ...renderStrategy.value,
+        present: tour.value.open
+      }))
+    );
+    const mergedProps = vue.computed(() => vue$1.mergeProps(tour.value.getBackdropProps(), presence.value.presenceProps));
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
-      return vue.unref(tour).step?.backdrop ? (vue.openBlock(), vue.createBlock(vue.unref(presence_vue_vue_type_script_setup_true_lang.default), vue.mergeProps({ key: 0 }, vue.unref(tour).getBackdropProps(), {
-        hidden: !vue.unref(tour).open,
-        present: vue.unref(tour).open,
-        "lazy-mount": vue.unref(renderStrategy).lazyMount,
-        "unmount-on-exit": vue.unref(renderStrategy).unmountOnExit
-      }), {
+      return vue.unref(tour).step?.backdrop && !vue.unref(presence).unmounted ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["hidden", "present", "lazy-mount", "unmount-on-exit"])) : vue.createCommentVNode("", true);
+      }, 16, ["as-child"])) : vue.createCommentVNode("", true);
     };
   }
 });

package/dist/components/tour/tour-backdrop.vue.js

@@ -1,7 +1,9 @@
-import { defineComponent, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
+import { mergeProps } from '@zag-js/vue';
 import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
-import _sfc_main$1 from '../presence/presence.vue.js';
+import { usePresence } from '../presence/use-presence.js';
+import { ark } from '../factory.js';
 import { useTourContext } from './use-tour-context.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -12,19 +14,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const tour = useTourContext();
     const renderStrategy = useRenderStrategyProps();
+    const presence = usePresence(
+      computed(() => ({
+        ...renderStrategy.value,
+        present: tour.value.open
+      }))
+    );
+    const mergedProps = computed(() => mergeProps(tour.value.getBackdropProps(), presence.value.presenceProps));
     useForwardExpose();
     return (_ctx, _cache) => {
-      return unref(tour).step?.backdrop ? (openBlock(), createBlock(unref(_sfc_main$1), mergeProps({ key: 0 }, unref(tour).getBackdropProps(), {
-        hidden: !unref(tour).open,
-        present: unref(tour).open,
-        "lazy-mount": unref(renderStrategy).lazyMount,
-        "unmount-on-exit": unref(renderStrategy).unmountOnExit
-      }), {
+      return unref(tour).step?.backdrop && !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps$1({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["hidden", "present", "lazy-mount", "unmount-on-exit"])) : createCommentVNode("", true);
+      }, 16, ["as-child"])) : createCommentVNode("", true);
     };
   }
 });