@ark-ui/vue 5.26.1 → 5.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/components/anatomy.cjs +5 -0
  2. package/dist/components/anatomy.d.cts +2 -1
  3. package/dist/components/anatomy.d.ts +2 -1
  4. package/dist/components/anatomy.js +1 -0
  5. package/dist/components/angle-slider/angle-slider-root.vue.cjs +2 -0
  6. package/dist/components/angle-slider/angle-slider-root.vue.js +2 -0
  7. package/dist/components/angle-slider/angle-slider.types.d.cts +8 -0
  8. package/dist/components/angle-slider/angle-slider.types.d.ts +8 -0
  9. package/dist/components/bottom-sheet/bottom-sheet-backdrop.vue.cjs +12 -7
  10. package/dist/components/bottom-sheet/bottom-sheet-backdrop.vue.js +13 -8
  11. package/dist/components/dialog/dialog-backdrop.vue.cjs +12 -7
  12. package/dist/components/dialog/dialog-backdrop.vue.js +13 -8
  13. package/dist/components/index.cjs +23 -0
  14. package/dist/components/index.d.cts +1 -0
  15. package/dist/components/index.d.ts +1 -0
  16. package/dist/components/index.js +11 -0
  17. package/dist/components/marquee/index.cjs +30 -0
  18. package/dist/components/marquee/index.d.cts +11 -0
  19. package/dist/components/marquee/index.d.ts +11 -0
  20. package/dist/components/marquee/index.js +11 -0
  21. package/dist/components/marquee/marquee-content.vue.cjs +31 -0
  22. package/dist/components/marquee/marquee-content.vue.d.cts +19 -0
  23. package/dist/components/marquee/marquee-content.vue.d.ts +19 -0
  24. package/dist/components/marquee/marquee-content.vue.js +27 -0
  25. package/dist/components/marquee/marquee-content.vue2.cjs +9 -0
  26. package/dist/components/marquee/marquee-content.vue2.js +5 -0
  27. package/dist/components/marquee/marquee-context.vue.cjs +18 -0
  28. package/dist/components/marquee/marquee-context.vue.d.cts +41 -0
  29. package/dist/components/marquee/marquee-context.vue.d.ts +41 -0
  30. package/dist/components/marquee/marquee-context.vue.js +14 -0
  31. package/dist/components/marquee/marquee-context.vue2.cjs +9 -0
  32. package/dist/components/marquee/marquee-context.vue2.js +5 -0
  33. package/dist/components/marquee/marquee-edge.vue.cjs +31 -0
  34. package/dist/components/marquee/marquee-edge.vue.d.cts +20 -0
  35. package/dist/components/marquee/marquee-edge.vue.d.ts +20 -0
  36. package/dist/components/marquee/marquee-edge.vue.js +27 -0
  37. package/dist/components/marquee/marquee-edge.vue2.cjs +9 -0
  38. package/dist/components/marquee/marquee-edge.vue2.js +5 -0
  39. package/dist/components/marquee/marquee-root-provider.vue.cjs +32 -0
  40. package/dist/components/marquee/marquee-root-provider.vue.d.cts +23 -0
  41. package/dist/components/marquee/marquee-root-provider.vue.d.ts +23 -0
  42. package/dist/components/marquee/marquee-root-provider.vue.js +28 -0
  43. package/dist/components/marquee/marquee-root-provider.vue2.cjs +9 -0
  44. package/dist/components/marquee/marquee-root-provider.vue2.js +5 -0
  45. package/dist/components/marquee/marquee-root.vue.cjs +53 -0
  46. package/dist/components/marquee/marquee-root.vue.d.cts +37 -0
  47. package/dist/components/marquee/marquee-root.vue.d.ts +37 -0
  48. package/dist/components/marquee/marquee-root.vue.js +49 -0
  49. package/dist/components/marquee/marquee-root.vue2.cjs +9 -0
  50. package/dist/components/marquee/marquee-root.vue2.js +5 -0
  51. package/dist/components/marquee/marquee-viewport.vue.cjs +29 -0
  52. package/dist/components/marquee/marquee-viewport.vue.d.cts +19 -0
  53. package/dist/components/marquee/marquee-viewport.vue.d.ts +19 -0
  54. package/dist/components/marquee/marquee-viewport.vue.js +25 -0
  55. package/dist/components/marquee/marquee-viewport.vue2.cjs +9 -0
  56. package/dist/components/marquee/marquee-viewport.vue2.js +5 -0
  57. package/dist/components/marquee/marquee.anatomy.d.cts +1 -0
  58. package/dist/components/marquee/marquee.anatomy.d.ts +1 -0
  59. package/dist/components/marquee/marquee.cjs +19 -0
  60. package/dist/components/marquee/marquee.d.cts +7 -0
  61. package/dist/components/marquee/marquee.d.ts +7 -0
  62. package/dist/components/marquee/marquee.js +6 -0
  63. package/dist/components/marquee/marquee.types.d.cts +83 -0
  64. package/dist/components/marquee/marquee.types.d.ts +83 -0
  65. package/dist/components/marquee/use-marquee-context.cjs +10 -0
  66. package/dist/components/marquee/use-marquee-context.d.cts +4 -0
  67. package/dist/components/marquee/use-marquee-context.d.ts +4 -0
  68. package/dist/components/marquee/use-marquee-context.js +5 -0
  69. package/dist/components/marquee/use-marquee.cjs +60 -0
  70. package/dist/components/marquee/use-marquee.d.cts +10 -0
  71. package/dist/components/marquee/use-marquee.d.ts +10 -0
  72. package/dist/components/marquee/use-marquee.js +37 -0
  73. package/dist/components/tabs/tab-content.vue.cjs +15 -8
  74. package/dist/components/tabs/tab-content.vue.js +16 -9
  75. package/dist/components/tour/tour-backdrop.vue.cjs +12 -8
  76. package/dist/components/tour/tour-backdrop.vue.js +13 -9
  77. package/dist/index.cjs +23 -0
  78. package/dist/index.js +11 -0
  79. package/package.json +72 -69
@@ -0,0 +1,19 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const marqueeContent_vue_vue_type_script_setup_true_lang = require('./marquee-content.vue.cjs');
6
+ const marqueeContext_vue_vue_type_script_setup_true_lang = require('./marquee-context.vue.cjs');
7
+ const marqueeEdge_vue_vue_type_script_setup_true_lang = require('./marquee-edge.vue.cjs');
8
+ const marqueeRoot_vue_vue_type_script_setup_true_lang = require('./marquee-root.vue.cjs');
9
+ const marqueeRootProvider_vue_vue_type_script_setup_true_lang = require('./marquee-root-provider.vue.cjs');
10
+ const marqueeViewport_vue_vue_type_script_setup_true_lang = require('./marquee-viewport.vue.cjs');
11
+
12
+
13
+
14
+ exports.Content = marqueeContent_vue_vue_type_script_setup_true_lang.default;
15
+ exports.Context = marqueeContext_vue_vue_type_script_setup_true_lang.default;
16
+ exports.Edge = marqueeEdge_vue_vue_type_script_setup_true_lang.default;
17
+ exports.Root = marqueeRoot_vue_vue_type_script_setup_true_lang.default;
18
+ exports.RootProvider = marqueeRootProvider_vue_vue_type_script_setup_true_lang.default;
19
+ exports.Viewport = marqueeViewport_vue_vue_type_script_setup_true_lang.default;
@@ -0,0 +1,7 @@
1
+ export type { PauseStatusDetails, Side } from '@zag-js/marquee';
2
+ export { default as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content.vue';
3
+ export { default as Context, type MarqueeContextProps as ContextProps } from './marquee-context.vue';
4
+ export { default as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge.vue';
5
+ export { default as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootEmits as RootEmits, type MarqueeRootProps as RootProps, } from './marquee-root.vue';
6
+ export { default as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider.vue';
7
+ export { default as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport.vue';
@@ -0,0 +1,7 @@
1
+ export type { PauseStatusDetails, Side } from '@zag-js/marquee';
2
+ export { default as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content.vue';
3
+ export { default as Context, type MarqueeContextProps as ContextProps } from './marquee-context.vue';
4
+ export { default as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge.vue';
5
+ export { default as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootEmits as RootEmits, type MarqueeRootProps as RootProps, } from './marquee-root.vue';
6
+ export { default as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider.vue';
7
+ export { default as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport.vue';
@@ -0,0 +1,6 @@
1
+ export { default as Content } from './marquee-content.vue.js';
2
+ export { default as Context } from './marquee-context.vue.js';
3
+ export { default as Edge } from './marquee-edge.vue.js';
4
+ export { default as Root } from './marquee-root.vue.js';
5
+ export { default as RootProvider } from './marquee-root-provider.vue.js';
6
+ export { default as Viewport } from './marquee-viewport.vue.js';
@@ -0,0 +1,83 @@
1
+ import type * as marquee from '@zag-js/marquee';
2
+ export interface RootProps {
3
+ /**
4
+ * Whether to automatically duplicate content to fill the container.
5
+ * @default false
6
+ */
7
+ autoFill?: boolean;
8
+ /**
9
+ * Whether the marquee is paused by default.
10
+ * @default false
11
+ */
12
+ defaultPaused?: boolean;
13
+ /**
14
+ * The delay before the animation starts (in seconds).
15
+ * @default 0
16
+ */
17
+ delay?: number;
18
+ /**
19
+ * The unique identifier of the machine.
20
+ */
21
+ id?: string;
22
+ /**
23
+ * The ids of the elements in the marquee. Useful for composition.
24
+ */
25
+ ids?: Partial<{
26
+ root: string;
27
+ viewport: string;
28
+ content: (index: number) => string;
29
+ }>;
30
+ /**
31
+ * The number of times to loop the animation (0 = infinite).
32
+ * @default 0
33
+ */
34
+ loopCount?: number;
35
+ /**
36
+ * Whether to pause the marquee on user interaction (hover, focus).
37
+ * @default false
38
+ */
39
+ pauseOnInteraction?: boolean;
40
+ /**
41
+ * Whether the marquee is paused.
42
+ */
43
+ paused?: boolean;
44
+ /**
45
+ * Whether to reverse the animation direction.
46
+ * @default false
47
+ */
48
+ reverse?: boolean;
49
+ /**
50
+ * The side/direction the marquee scrolls towards.
51
+ * @default "start"
52
+ */
53
+ side?: marquee.Side;
54
+ /**
55
+ * The spacing between marquee items.
56
+ * @default "1rem"
57
+ */
58
+ spacing?: string;
59
+ /**
60
+ * The speed of the marquee animation in pixels per second.
61
+ * @default 50
62
+ */
63
+ speed?: number;
64
+ /**
65
+ * The localized messages to use.
66
+ */
67
+ translations?: marquee.IntlTranslations;
68
+ }
69
+ export type RootEmits = {
70
+ /**
71
+ * Function called when the marquee completes all loops and stops.
72
+ * Only fires for finite loops (loopCount > 0).
73
+ */
74
+ complete: [];
75
+ /**
76
+ * Function called when the marquee completes one loop iteration.
77
+ */
78
+ loopComplete: [];
79
+ /**
80
+ * Function called when the pause status changes.
81
+ */
82
+ pauseChange: [details: marquee.PauseStatusDetails];
83
+ };
@@ -0,0 +1,83 @@
1
+ import type * as marquee from '@zag-js/marquee';
2
+ export interface RootProps {
3
+ /**
4
+ * Whether to automatically duplicate content to fill the container.
5
+ * @default false
6
+ */
7
+ autoFill?: boolean;
8
+ /**
9
+ * Whether the marquee is paused by default.
10
+ * @default false
11
+ */
12
+ defaultPaused?: boolean;
13
+ /**
14
+ * The delay before the animation starts (in seconds).
15
+ * @default 0
16
+ */
17
+ delay?: number;
18
+ /**
19
+ * The unique identifier of the machine.
20
+ */
21
+ id?: string;
22
+ /**
23
+ * The ids of the elements in the marquee. Useful for composition.
24
+ */
25
+ ids?: Partial<{
26
+ root: string;
27
+ viewport: string;
28
+ content: (index: number) => string;
29
+ }>;
30
+ /**
31
+ * The number of times to loop the animation (0 = infinite).
32
+ * @default 0
33
+ */
34
+ loopCount?: number;
35
+ /**
36
+ * Whether to pause the marquee on user interaction (hover, focus).
37
+ * @default false
38
+ */
39
+ pauseOnInteraction?: boolean;
40
+ /**
41
+ * Whether the marquee is paused.
42
+ */
43
+ paused?: boolean;
44
+ /**
45
+ * Whether to reverse the animation direction.
46
+ * @default false
47
+ */
48
+ reverse?: boolean;
49
+ /**
50
+ * The side/direction the marquee scrolls towards.
51
+ * @default "start"
52
+ */
53
+ side?: marquee.Side;
54
+ /**
55
+ * The spacing between marquee items.
56
+ * @default "1rem"
57
+ */
58
+ spacing?: string;
59
+ /**
60
+ * The speed of the marquee animation in pixels per second.
61
+ * @default 50
62
+ */
63
+ speed?: number;
64
+ /**
65
+ * The localized messages to use.
66
+ */
67
+ translations?: marquee.IntlTranslations;
68
+ }
69
+ export type RootEmits = {
70
+ /**
71
+ * Function called when the marquee completes all loops and stops.
72
+ * Only fires for finite loops (loopCount > 0).
73
+ */
74
+ complete: [];
75
+ /**
76
+ * Function called when the marquee completes one loop iteration.
77
+ */
78
+ loopComplete: [];
79
+ /**
80
+ * Function called when the pause status changes.
81
+ */
82
+ pauseChange: [details: marquee.PauseStatusDetails];
83
+ };
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const createContext = require('../../utils/create-context.cjs');
6
+
7
+ const [MarqueeProvider, useMarqueeContext] = createContext.createContext("MarqueeContext");
8
+
9
+ exports.MarqueeProvider = MarqueeProvider;
10
+ exports.useMarqueeContext = useMarqueeContext;
@@ -0,0 +1,4 @@
1
+ import { UseMarqueeReturn } from './use-marquee';
2
+ export interface UseMarqueeContext extends UseMarqueeReturn {
3
+ }
4
+ export declare const MarqueeProvider: (opts: UseMarqueeContext) => void, useMarqueeContext: (fallback?: UseMarqueeContext | undefined) => UseMarqueeContext;
@@ -0,0 +1,4 @@
1
+ import { UseMarqueeReturn } from './use-marquee';
2
+ export interface UseMarqueeContext extends UseMarqueeReturn {
3
+ }
4
+ export declare const MarqueeProvider: (opts: UseMarqueeContext) => void, useMarqueeContext: (fallback?: UseMarqueeContext | undefined) => UseMarqueeContext;
@@ -0,0 +1,5 @@
1
+ import { createContext } from '../../utils/create-context.js';
2
+
3
+ const [MarqueeProvider, useMarqueeContext] = createContext("MarqueeContext");
4
+
5
+ export { MarqueeProvider, useMarqueeContext };
@@ -0,0 +1,60 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const marquee = require('@zag-js/marquee');
6
+ const vue$1 = require('@zag-js/vue');
7
+ const vue = require('vue');
8
+ const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
9
+ const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
10
+ const cleanProps = require('../../utils/clean-props.cjs');
11
+
12
+ function _interopNamespaceDefault(e) {
13
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
14
+ if (e) {
15
+ for (const k in e) {
16
+ if (k !== 'default') {
17
+ const d = Object.getOwnPropertyDescriptor(e, k);
18
+ Object.defineProperty(n, k, d.get ? d : {
19
+ enumerable: true,
20
+ get: () => e[k]
21
+ });
22
+ }
23
+ }
24
+ }
25
+ n.default = e;
26
+ return Object.freeze(n);
27
+ }
28
+
29
+ const marquee__namespace = /*#__PURE__*/_interopNamespaceDefault(marquee);
30
+
31
+ const useMarquee = (props = {}, emit) => {
32
+ const id = vue.useId();
33
+ const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
34
+ const locale = useLocaleContext.useLocaleContext(useLocaleContext.DEFAULT_LOCALE);
35
+ const context = vue.computed(() => {
36
+ const localeProps = vue.toValue(props);
37
+ return {
38
+ id,
39
+ dir: locale.value.dir,
40
+ getRootNode: env?.value.getRootNode,
41
+ ...cleanProps.cleanProps(localeProps),
42
+ onPauseChange: (details) => {
43
+ emit?.("pauseChange", details);
44
+ localeProps.onPauseChange?.(details);
45
+ },
46
+ onLoopComplete: () => {
47
+ emit?.("loopComplete");
48
+ localeProps.onLoopComplete?.();
49
+ },
50
+ onComplete: () => {
51
+ emit?.("complete");
52
+ localeProps.onComplete?.();
53
+ }
54
+ };
55
+ });
56
+ const service = vue$1.useMachine(marquee__namespace.machine, context);
57
+ return vue.computed(() => marquee__namespace.connect(service, vue$1.normalizeProps));
58
+ };
59
+
60
+ exports.useMarquee = useMarquee;
@@ -0,0 +1,10 @@
1
+ import { PropTypes } from '@zag-js/vue';
2
+ import { ComputedRef, MaybeRef } from 'vue';
3
+ import { EmitFn, Optional } from '../../types';
4
+ import { RootEmits } from './marquee.types';
5
+ import * as marquee from '@zag-js/marquee';
6
+ export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
7
+ }
8
+ export interface UseMarqueeReturn extends ComputedRef<marquee.Api<PropTypes>> {
9
+ }
10
+ export declare const useMarquee: (props?: MaybeRef<UseMarqueeProps>, emit?: EmitFn<RootEmits>) => UseMarqueeReturn;
@@ -0,0 +1,10 @@
1
+ import { PropTypes } from '@zag-js/vue';
2
+ import { ComputedRef, MaybeRef } from 'vue';
3
+ import { EmitFn, Optional } from '../../types';
4
+ import { RootEmits } from './marquee.types';
5
+ import * as marquee from '@zag-js/marquee';
6
+ export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
7
+ }
8
+ export interface UseMarqueeReturn extends ComputedRef<marquee.Api<PropTypes>> {
9
+ }
10
+ export declare const useMarquee: (props?: MaybeRef<UseMarqueeProps>, emit?: EmitFn<RootEmits>) => UseMarqueeReturn;
@@ -0,0 +1,37 @@
1
+ import * as marquee from '@zag-js/marquee';
2
+ import { useMachine, normalizeProps } from '@zag-js/vue';
3
+ import { useId, computed, toValue } from 'vue';
4
+ import { useEnvironmentContext, DEFAULT_ENVIRONMENT } from '../../providers/environment/use-environment-context.js';
5
+ import { useLocaleContext, DEFAULT_LOCALE } from '../../providers/locale/use-locale-context.js';
6
+ import { cleanProps } from '../../utils/clean-props.js';
7
+
8
+ const useMarquee = (props = {}, emit) => {
9
+ const id = useId();
10
+ const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
11
+ const locale = useLocaleContext(DEFAULT_LOCALE);
12
+ const context = computed(() => {
13
+ const localeProps = toValue(props);
14
+ return {
15
+ id,
16
+ dir: locale.value.dir,
17
+ getRootNode: env?.value.getRootNode,
18
+ ...cleanProps(localeProps),
19
+ onPauseChange: (details) => {
20
+ emit?.("pauseChange", details);
21
+ localeProps.onPauseChange?.(details);
22
+ },
23
+ onLoopComplete: () => {
24
+ emit?.("loopComplete");
25
+ localeProps.onLoopComplete?.();
26
+ },
27
+ onComplete: () => {
28
+ emit?.("complete");
29
+ localeProps.onComplete?.();
30
+ }
31
+ };
32
+ });
33
+ const service = useMachine(marquee.machine, context);
34
+ return computed(() => marquee.connect(service, normalizeProps));
35
+ };
36
+
37
+ export { useMarquee };
@@ -3,10 +3,13 @@
3
3
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
4
4
 
5
5
  const vue = require('vue');
6
+ const vue$1 = require('@zag-js/vue');
6
7
  const useForwardExpose = require('../../utils/use-forward-expose.cjs');
7
8
  const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
8
9
  const useTabsContext = require('./use-tabs-context.cjs');
9
- const presence_vue_vue_type_script_setup_true_lang = require('../presence/presence.vue.cjs');
10
+ const usePresence = require('../presence/use-presence.cjs');
11
+ const usePresenceContext = require('../presence/use-presence-context.cjs');
12
+ const factory = require('../factory.cjs');
10
13
 
11
14
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
12
15
  __name: "tab-content",
@@ -18,19 +21,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
18
21
  const props = __props;
19
22
  const tabs = useTabsContext.useTabsContext();
20
23
  const renderStrategy = useRenderStrategy.useRenderStrategyProps();
24
+ const presence = usePresence.usePresence(
25
+ vue.computed(() => ({
26
+ ...renderStrategy.value,
27
+ present: tabs.value.value === props.value,
28
+ immediate: true
29
+ }))
30
+ );
31
+ usePresenceContext.PresenceProvider(presence);
32
+ const mergedProps = vue.computed(() => vue$1.mergeProps(tabs.value.getContentProps(props), presence.value.presenceProps));
21
33
  useForwardExpose.useForwardExpose();
22
34
  return (_ctx, _cache) => {
23
- return vue.openBlock(), vue.createBlock(vue.unref(presence_vue_vue_type_script_setup_true_lang.default), vue.mergeProps(vue.unref(tabs).getContentProps(props), {
24
- present: vue.unref(tabs).value === props.value,
25
- "lazy-mount": vue.unref(renderStrategy).lazyMount,
26
- "unmount-on-exit": vue.unref(renderStrategy).unmountOnExit,
27
- immediate: true
28
- }), {
35
+ return !vue.unref(presence).unmounted ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
29
36
  default: vue.withCtx(() => [
30
37
  vue.renderSlot(_ctx.$slots, "default")
31
38
  ]),
32
39
  _: 3
33
- }, 16, ["present", "lazy-mount", "unmount-on-exit"]);
40
+ }, 16, ["as-child"])) : vue.createCommentVNode("", true);
34
41
  };
35
42
  }
36
43
  });
@@ -1,8 +1,11 @@
1
- import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
1
+ import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
2
+ import { mergeProps } from '@zag-js/vue';
2
3
  import { useForwardExpose } from '../../utils/use-forward-expose.js';
3
4
  import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
4
5
  import { useTabsContext } from './use-tabs-context.js';
5
- import _sfc_main$1 from '../presence/presence.vue.js';
6
+ import { usePresence } from '../presence/use-presence.js';
7
+ import { PresenceProvider } from '../presence/use-presence-context.js';
8
+ import { ark } from '../factory.js';
6
9
 
7
10
  const _sfc_main = /* @__PURE__ */ defineComponent({
8
11
  __name: "tab-content",
@@ -14,19 +17,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
14
17
  const props = __props;
15
18
  const tabs = useTabsContext();
16
19
  const renderStrategy = useRenderStrategyProps();
20
+ const presence = usePresence(
21
+ computed(() => ({
22
+ ...renderStrategy.value,
23
+ present: tabs.value.value === props.value,
24
+ immediate: true
25
+ }))
26
+ );
27
+ PresenceProvider(presence);
28
+ const mergedProps = computed(() => mergeProps(tabs.value.getContentProps(props), presence.value.presenceProps));
17
29
  useForwardExpose();
18
30
  return (_ctx, _cache) => {
19
- return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(unref(tabs).getContentProps(props), {
20
- present: unref(tabs).value === props.value,
21
- "lazy-mount": unref(renderStrategy).lazyMount,
22
- "unmount-on-exit": unref(renderStrategy).unmountOnExit,
23
- immediate: true
24
- }), {
31
+ return !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps$1({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
25
32
  default: withCtx(() => [
26
33
  renderSlot(_ctx.$slots, "default")
27
34
  ]),
28
35
  _: 3
29
- }, 16, ["present", "lazy-mount", "unmount-on-exit"]);
36
+ }, 16, ["as-child"])) : createCommentVNode("", true);
30
37
  };
31
38
  }
32
39
  });
@@ -3,9 +3,11 @@
3
3
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
4
4
 
5
5
  const vue = require('vue');
6
+ const vue$1 = require('@zag-js/vue');
6
7
  const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
7
8
  const useForwardExpose = require('../../utils/use-forward-expose.cjs');
8
- const presence_vue_vue_type_script_setup_true_lang = require('../presence/presence.vue.cjs');
9
+ const usePresence = require('../presence/use-presence.cjs');
10
+ const factory = require('../factory.cjs');
9
11
  const useTourContext = require('./use-tour-context.cjs');
10
12
 
11
13
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -16,19 +18,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
16
18
  setup(__props) {
17
19
  const tour = useTourContext.useTourContext();
18
20
  const renderStrategy = useRenderStrategy.useRenderStrategyProps();
21
+ const presence = usePresence.usePresence(
22
+ vue.computed(() => ({
23
+ ...renderStrategy.value,
24
+ present: tour.value.open
25
+ }))
26
+ );
27
+ const mergedProps = vue.computed(() => vue$1.mergeProps(tour.value.getBackdropProps(), presence.value.presenceProps));
19
28
  useForwardExpose.useForwardExpose();
20
29
  return (_ctx, _cache) => {
21
- 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(), {
22
- hidden: !vue.unref(tour).open,
23
- present: vue.unref(tour).open,
24
- "lazy-mount": vue.unref(renderStrategy).lazyMount,
25
- "unmount-on-exit": vue.unref(renderStrategy).unmountOnExit
26
- }), {
30
+ 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 }), {
27
31
  default: vue.withCtx(() => [
28
32
  vue.renderSlot(_ctx.$slots, "default")
29
33
  ]),
30
34
  _: 3
31
- }, 16, ["hidden", "present", "lazy-mount", "unmount-on-exit"])) : vue.createCommentVNode("", true);
35
+ }, 16, ["as-child"])) : vue.createCommentVNode("", true);
32
36
  };
33
37
  }
34
38
  });
@@ -1,7 +1,9 @@
1
- import { defineComponent, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, renderSlot } from 'vue';
1
+ import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
2
+ import { mergeProps } from '@zag-js/vue';
2
3
  import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
3
4
  import { useForwardExpose } from '../../utils/use-forward-expose.js';
4
- import _sfc_main$1 from '../presence/presence.vue.js';
5
+ import { usePresence } from '../presence/use-presence.js';
6
+ import { ark } from '../factory.js';
5
7
  import { useTourContext } from './use-tour-context.js';
6
8
 
7
9
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -12,19 +14,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
12
14
  setup(__props) {
13
15
  const tour = useTourContext();
14
16
  const renderStrategy = useRenderStrategyProps();
17
+ const presence = usePresence(
18
+ computed(() => ({
19
+ ...renderStrategy.value,
20
+ present: tour.value.open
21
+ }))
22
+ );
23
+ const mergedProps = computed(() => mergeProps(tour.value.getBackdropProps(), presence.value.presenceProps));
15
24
  useForwardExpose();
16
25
  return (_ctx, _cache) => {
17
- return unref(tour).step?.backdrop ? (openBlock(), createBlock(unref(_sfc_main$1), mergeProps({ key: 0 }, unref(tour).getBackdropProps(), {
18
- hidden: !unref(tour).open,
19
- present: unref(tour).open,
20
- "lazy-mount": unref(renderStrategy).lazyMount,
21
- "unmount-on-exit": unref(renderStrategy).unmountOnExit
22
- }), {
26
+ return unref(tour).step?.backdrop && !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps$1({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
23
27
  default: withCtx(() => [
24
28
  renderSlot(_ctx.$slots, "default")
25
29
  ]),
26
30
  _: 3
27
- }, 16, ["hidden", "present", "lazy-mount", "unmount-on-exit"])) : createCommentVNode("", true);
31
+ }, 16, ["as-child"])) : createCommentVNode("", true);
28
32
  };
29
33
  }
30
34
  });
package/dist/index.cjs CHANGED
@@ -324,6 +324,15 @@ const useListbox = require('./components/listbox/use-listbox.cjs');
324
324
  const useListboxContext = require('./components/listbox/use-listbox-context.cjs');
325
325
  const useListboxItemContext = require('./components/listbox/use-listbox-item-context.cjs');
326
326
  const listbox = require('./components/listbox/listbox.cjs');
327
+ const marqueeContent_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-content.vue.cjs');
328
+ const marqueeContext_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-context.vue.cjs');
329
+ const marqueeEdge_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-edge.vue.cjs');
330
+ const marqueeRoot_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-root.vue.cjs');
331
+ const marqueeRootProvider_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-root-provider.vue.cjs');
332
+ const marqueeViewport_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-viewport.vue.cjs');
333
+ const useMarquee = require('./components/marquee/use-marquee.cjs');
334
+ const useMarqueeContext = require('./components/marquee/use-marquee-context.cjs');
335
+ const marquee$1 = require('./components/marquee/marquee.cjs');
327
336
  const menuArrowTip_vue_vue_type_script_setup_true_lang = require('./components/menu/menu-arrow-tip.vue.cjs');
328
337
  const menuArrow_vue_vue_type_script_setup_true_lang = require('./components/menu/menu-arrow.vue.cjs');
329
338
  const menuCheckboxItem_vue_vue_type_script_setup_true_lang = require('./components/menu/menu-checkbox-item.vue.cjs');
@@ -716,6 +725,7 @@ const editable = require('@zag-js/editable');
716
725
  const fileUpload = require('@zag-js/file-upload');
717
726
  const floatingPanel = require('@zag-js/floating-panel');
718
727
  const hoverCard = require('@zag-js/hover-card');
728
+ const marquee = require('@zag-js/marquee');
719
729
  const menu = require('@zag-js/menu');
720
730
  const numberInput = require('@zag-js/number-input');
721
731
  const pagination = require('@zag-js/pagination');
@@ -1073,6 +1083,15 @@ exports.useListbox = useListbox.useListbox;
1073
1083
  exports.useListboxContext = useListboxContext.useListboxContext;
1074
1084
  exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
1075
1085
  exports.Listbox = listbox;
1086
+ exports.MarqueeContent = marqueeContent_vue_vue_type_script_setup_true_lang.default;
1087
+ exports.MarqueeContext = marqueeContext_vue_vue_type_script_setup_true_lang.default;
1088
+ exports.MarqueeEdge = marqueeEdge_vue_vue_type_script_setup_true_lang.default;
1089
+ exports.MarqueeRoot = marqueeRoot_vue_vue_type_script_setup_true_lang.default;
1090
+ exports.MarqueeRootProvider = marqueeRootProvider_vue_vue_type_script_setup_true_lang.default;
1091
+ exports.MarqueeViewport = marqueeViewport_vue_vue_type_script_setup_true_lang.default;
1092
+ exports.useMarquee = useMarquee.useMarquee;
1093
+ exports.useMarqueeContext = useMarqueeContext.useMarqueeContext;
1094
+ exports.Marquee = marquee$1;
1076
1095
  exports.MenuArrowTip = menuArrowTip_vue_vue_type_script_setup_true_lang.default;
1077
1096
  exports.MenuArrow = menuArrow_vue_vue_type_script_setup_true_lang.default;
1078
1097
  exports.MenuCheckboxItem = menuCheckboxItem_vue_vue_type_script_setup_true_lang.default;
@@ -1507,6 +1526,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
1507
1526
  enumerable: true,
1508
1527
  get: () => hoverCard.anatomy
1509
1528
  });
1529
+ Object.defineProperty(exports, "marqueeAnatomy", {
1530
+ enumerable: true,
1531
+ get: () => marquee.anatomy
1532
+ });
1510
1533
  Object.defineProperty(exports, "menuAnatomy", {
1511
1534
  enumerable: true,
1512
1535
  get: () => menu.anatomy
package/dist/index.js CHANGED
@@ -341,6 +341,16 @@ export { useListboxContext } from './components/listbox/use-listbox-context.js';
341
341
  export { useListboxItemContext } from './components/listbox/use-listbox-item-context.js';
342
342
  import * as listbox from './components/listbox/listbox.js';
343
343
  export { listbox as Listbox };
344
+ export { default as MarqueeContent } from './components/marquee/marquee-content.vue.js';
345
+ export { default as MarqueeContext } from './components/marquee/marquee-context.vue.js';
346
+ export { default as MarqueeEdge } from './components/marquee/marquee-edge.vue.js';
347
+ export { default as MarqueeRoot } from './components/marquee/marquee-root.vue.js';
348
+ export { default as MarqueeRootProvider } from './components/marquee/marquee-root-provider.vue.js';
349
+ export { default as MarqueeViewport } from './components/marquee/marquee-viewport.vue.js';
350
+ export { useMarquee } from './components/marquee/use-marquee.js';
351
+ export { useMarqueeContext } from './components/marquee/use-marquee-context.js';
352
+ import * as marquee from './components/marquee/marquee.js';
353
+ export { marquee as Marquee };
344
354
  export { default as MenuArrowTip } from './components/menu/menu-arrow-tip.vue.js';
345
355
  export { default as MenuArrow } from './components/menu/menu-arrow.vue.js';
346
356
  export { default as MenuCheckboxItem } from './components/menu/menu-checkbox-item.vue.js';
@@ -760,6 +770,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
760
770
  export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
761
771
  export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
762
772
  export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
773
+ export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
763
774
  export { anatomy as menuAnatomy } from '@zag-js/menu';
764
775
  export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
765
776
  export { anatomy as paginationAnatomy } from '@zag-js/pagination';