@ark-ui/vue 5.29.1 → 5.31.0

package/dist/components/checkbox/use-checkbox-group.js

@@ -1,8 +1,13 @@
 import { computed, toRefs } from 'vue';
+import { toBooleanValue } from '../../utils/boolean.js';
+import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 import { useVModel } from '../use-v-model.js';
 
 function useCheckboxGroup(props, emit) {
-  const interactive = computed(() => !(props.disabled || props.readOnly));
+  const fieldset = useFieldsetContext();
+  const disabled = computed(() => props.disabled ?? fieldset?.value?.disabled);
+  const invalid = computed(() => props.invalid ?? fieldset?.value?.invalid);
+  const interactive = computed(() => !(disabled.value || props.readOnly));
   const { defaultValue } = toRefs(props);
   const valueRef = useVModel(props, "modelValue", emit, {
     defaultValue: defaultValue?.value ?? [],
@@ -33,9 +38,9 @@ function useCheckboxGroup(props, emit) {
         }
       },
       name: props.name,
-      disabled: props.disabled,
+      disabled: toBooleanValue(disabled.value),
       readOnly: props.readOnly,
-      invalid: props.invalid
+      invalid: invalid.value
     };
   };
   const setValue = (value) => {
@@ -45,9 +50,9 @@ function useCheckboxGroup(props, emit) {
     isChecked,
     value: valueRef.value,
     name: props.name,
-    disabled: props.disabled,
+    disabled: toBooleanValue(disabled.value),
     readOnly: props.readOnly,
-    invalid: props.invalid,
+    invalid: invalid.value,
     addValue,
     setValue,
     toggleValue,

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

@@ -38,7 +38,7 @@ const useCheckbox = (props = {}, emit) => {
   const checkboxGroup = useCheckboxGroupContext.useCheckboxGroupContext();
   const computedProps = vue.computed(() => {
     const propsValue = vue.toValue(props);
-    return vue$1.mergeProps(propsValue, checkboxGroup?.value.getItemProps({ value: propsValue.value }) ?? {});
+    return vue$1.mergeProps(checkboxGroup?.value.getItemProps({ value: propsValue.value }) ?? {}, propsValue);
   });
   const context = vue.computed(() => {
     const localProps = vue.toValue(computedProps);

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

@@ -15,7 +15,7 @@ const useCheckbox = (props = {}, emit) => {
   const checkboxGroup = useCheckboxGroupContext();
   const computedProps = computed(() => {
     const propsValue = toValue(props);
-    return mergeProps(propsValue, checkboxGroup?.value.getItemProps({ value: propsValue.value }) ?? {});
+    return mergeProps(checkboxGroup?.value.getItemProps({ value: propsValue.value }) ?? {}, propsValue);
   });
   const context = computed(() => {
     const localProps = toValue(computedProps);

package/dist/components/clipboard/clipboard-control.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/clipboard-indicator.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/clipboard-input.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/clipboard-label.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/clipboard-root-provider.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { ClipboardProvider } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/clipboard-root.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboard } from './use-clipboard.js';
 import { ClipboardProvider } from './use-clipboard-context.js';

package/dist/components/clipboard/clipboard-trigger.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/clipboard-value-text.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/clipboard/index.cjs

@@ -13,8 +13,8 @@ const clipboardTrigger_vue_vue_type_script_setup_true_lang = require('./clipboar
 const clipboardValueText_vue_vue_type_script_setup_true_lang = require('./clipboard-value-text.vue.cjs');
 const useClipboard = require('./use-clipboard.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
-const clipboard$1 = require('./clipboard.cjs');
-const clipboard = require('@zag-js/clipboard');
+const clipboard = require('./clipboard.cjs');
+const clipboard$1 = require('@zag-js/clipboard');
 
 
 
@@ -29,8 +29,8 @@ exports.ClipboardTrigger = clipboardTrigger_vue_vue_type_script_setup_true_lang.
 exports.ClipboardValueText = clipboardValueText_vue_vue_type_script_setup_true_lang.default;
 exports.useClipboard = useClipboard.useClipboard;
 exports.useClipboardContext = useClipboardContext.useClipboardContext;
-exports.Clipboard = clipboard$1;
+exports.Clipboard = clipboard;
 Object.defineProperty(exports, "clipboardAnatomy", {
   enumerable: true,
-  get: () => clipboard.anatomy
+  get: () => clipboard$1.anatomy
 });

package/dist/components/collapsible/collapsible-content.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, unref, openBlock, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { ark } from '../factory.js';
 import { useCollapsibleContext } from './use-collapsible-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/collapsible/collapsible-indicator.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useCollapsibleContext } from './use-collapsible-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/collapsible/collapsible-root-provider.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { CollapsibleProvider } from './use-collapsible-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/collapsible/collapsible-root.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeDefaults, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, mergeDefaults } from 'vue';
 import { ark } from '../factory.js';
 import { useCollapsible } from './use-collapsible.js';
 import { CollapsibleProvider } from './use-collapsible-context.js';

package/dist/components/collapsible/collapsible-trigger.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useCollapsibleContext } from './use-collapsible-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/collapsible/index.cjs

@@ -10,8 +10,8 @@ const collapsibleTrigger_vue_vue_type_script_setup_true_lang = require('./collap
 const collapsibleIndicator_vue_vue_type_script_setup_true_lang = require('./collapsible-indicator.vue.cjs');
 const useCollapsible = require('./use-collapsible.cjs');
 const useCollapsibleContext = require('./use-collapsible-context.cjs');
-const collapsible$1 = require('./collapsible.cjs');
-const collapsible = require('@zag-js/collapsible');
+const collapsible = require('./collapsible.cjs');
+const collapsible$1 = require('@zag-js/collapsible');
 
 
 
@@ -23,8 +23,8 @@ exports.CollapsibleTrigger = collapsibleTrigger_vue_vue_type_script_setup_true_l
 exports.CollapsibleIndicator = collapsibleIndicator_vue_vue_type_script_setup_true_lang.default;
 exports.useCollapsible = useCollapsible.useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
-exports.Collapsible = collapsible$1;
+exports.Collapsible = collapsible;
 Object.defineProperty(exports, "collapsibleAnatomy", {
   enumerable: true,
-  get: () => collapsible.anatomy
+  get: () => collapsible$1.anatomy
 });

package/dist/components/collection/tree-collection.js

@@ -1,4 +1,4 @@
-import { filePathToTree, TreeCollection } from '@zag-js/collection';
+import { TreeCollection, filePathToTree } from '@zag-js/collection';
 
 const createTreeCollection = (options) => new TreeCollection(options);
 const createFileTreeCollection = (paths) => filePathToTree(paths);

package/dist/components/color-picker/color-picker-area-background.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';

package/dist/components/color-picker/color-picker-area-thumb.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';

package/dist/components/color-picker/color-picker-area.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { ColorPickerAreaPropsProvider } from './use-color-picker-area-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';

package/dist/components/color-picker/color-picker-channel-input.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-channel-slider-label.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';

package/dist/components/color-picker/color-picker-channel-slider-thumb.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';

package/dist/components/color-picker/color-picker-channel-slider-track.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';

package/dist/components/color-picker/color-picker-channel-slider-value-text.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, useSlots, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import { useLocaleContext, DEFAULT_LOCALE } from '../../providers/locale/use-locale-context.js';
 import { ark } from '../factory.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';

package/dist/components/color-picker/color-picker-channel-slider.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { ColorPickerChannelPropsProvider } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';

package/dist/components/color-picker/color-picker-content.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, unref, openBlock, createBlock, mergeProps as mergeProps$1, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-control.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-eye-dropper-trigger.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-format-select.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, createElementBlock, Fragment, renderList, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, createElementBlock, Fragment, renderList, createVNode, createTextVNode, toDisplayString } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-format-trigger.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-hidden-input.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useFieldContext } from '../field/use-field-context.js';

package/dist/components/color-picker/color-picker-label.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/color-picker/color-picker-positioner.vue.cjs

@@ -3,12 +3,10 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
-const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
 const useForwardExpose = require('../../utils/use-forward-expose.cjs');
-const usePresence = require('../presence/use-presence.cjs');
+const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
-const factory = require('../factory.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "color-picker-positioner",
@@ -17,14 +15,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const renderStrategy = useRenderStrategy.useRenderStrategyProps();
-    const presence = usePresence.usePresence(
-      vue.computed(() => ({
-        ...renderStrategy.value,
-        present: colorPicker.value.open
-      }))
-    );
-    usePresenceContext.PresenceProvider(presence);
+    const presence = usePresenceContext.usePresenceContext();
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
       return !vue.unref(presence).unmounted ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, vue.unref(colorPicker).getPositionerProps(), { "as-child": __props.asChild }), {

package/dist/components/color-picker/color-picker-positioner.vue.js

@@ -1,10 +1,8 @@
-import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, renderSlot } from 'vue';
-import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
+import { defineComponent, unref, openBlock, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
-import { usePresence } from '../presence/use-presence.js';
-import { PresenceProvider } from '../presence/use-presence-context.js';
-import { useColorPickerContext } from './use-color-picker-context.js';
 import { ark } from '../factory.js';
+import { usePresenceContext } from '../presence/use-presence-context.js';
+import { useColorPickerContext } from './use-color-picker-context.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "color-picker-positioner",
@@ -13,14 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const colorPicker = useColorPickerContext();
-    const renderStrategy = useRenderStrategyProps();
-    const presence = usePresence(
-      computed(() => ({
-        ...renderStrategy.value,
-        present: colorPicker.value.open
-      }))
-    );
-    PresenceProvider(presence);
+    const presence = usePresenceContext();
     useForwardExpose();
     return (_ctx, _cache) => {
       return !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps({ key: 0 }, unref(colorPicker).getPositionerProps(), { "as-child": __props.asChild }), {

package/dist/components/color-picker/color-picker-root-provider.vue.cjs

@@ -6,6 +6,8 @@ const vue = require('vue');
 const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
 const useForwardExpose = require('../../utils/use-forward-expose.cjs');
 const factory = require('../factory.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -16,10 +18,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     unmountOnExit: { type: Boolean },
     asChild: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["exitComplete"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emits = __emit;
     const colorPicker = vue.computed(() => props.value);
+    const presence = usePresence.usePresence(
+      vue.computed(() => ({
+        present: colorPicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      // @ts-expect-error TODO tweak EmitFn
+      emits
+    );
     useColorPickerContext.ColorPickerProvider(colorPicker);
+    usePresenceContext.PresenceProvider(presence);
     useRenderStrategy.RenderStrategyPropsProvider(vue.computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/color-picker/color-picker-root-provider.vue.d.cts

@@ -2,6 +2,7 @@ import { HTMLAttributes, UnwrapRef, DefineComponent, ComponentOptionsMixin, Publ
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { PolymorphicProps } from '../factory';
 import { UseColorPickerReturn } from './use-color-picker';
+import { RootEmits as PresenceEmits } from '../presence/presence.types';
 interface RootProviderProps {
     value: UnwrapRef<UseColorPickerReturn>;
 }
@@ -13,7 +14,13 @@ export interface ColorPickerRootProviderProps extends ColorPickerRootProviderBas
  */
 HTMLAttributes {
 }
-declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ColorPickerRootProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+export interface ColorPickerRootProviderEmits extends PresenceEmits {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
+}, string, PublicProps, Readonly<ColorPickerRootProviderProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/color-picker/color-picker-root-provider.vue.d.ts

@@ -2,6 +2,7 @@ import { HTMLAttributes, UnwrapRef, DefineComponent, ComponentOptionsMixin, Publ
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { PolymorphicProps } from '../factory';
 import { UseColorPickerReturn } from './use-color-picker';
+import { RootEmits as PresenceEmits } from '../presence/presence.types';
 interface RootProviderProps {
     value: UnwrapRef<UseColorPickerReturn>;
 }
@@ -13,7 +14,13 @@ export interface ColorPickerRootProviderProps extends ColorPickerRootProviderBas
  */
 HTMLAttributes {
 }
-declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ColorPickerRootProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+export interface ColorPickerRootProviderEmits extends PresenceEmits {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
+}, string, PublicProps, Readonly<ColorPickerRootProviderProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/color-picker/color-picker-root-provider.vue.js

@@ -1,7 +1,9 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { RenderStrategyPropsProvider } from '../../utils/use-render-strategy.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
 import { ark } from '../factory.js';
+import { usePresence } from '../presence/use-presence.js';
+import { PresenceProvider } from '../presence/use-presence-context.js';
 import { ColorPickerProvider } from './use-color-picker-context.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -12,10 +14,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     unmountOnExit: { type: Boolean },
     asChild: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["exitComplete"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emits = __emit;
     const colorPicker = computed(() => props.value);
+    const presence = usePresence(
+      computed(() => ({
+        present: colorPicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      // @ts-expect-error TODO tweak EmitFn
+      emits
+    );
     ColorPickerProvider(colorPicker);
+    PresenceProvider(presence);
     RenderStrategyPropsProvider(computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/color-picker/color-picker-root.vue.cjs

@@ -3,11 +3,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
+const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
+const useForwardExpose = require('../../utils/use-forward-expose.cjs');
 const factory = require('../factory.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
-const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
-const useForwardExpose = require('../../utils/use-forward-expose.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "color-picker-root",
@@ -44,12 +46,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     required: void 0,
     inline: void 0
   }),
-  emits: ["focusOutside", "formatChange", "interactOutside", "openChange", "pointerDownOutside", "valueChange", "valueChangeEnd", "update:modelValue", "update:open", "update:format"],
+  emits: ["exitComplete", "focusOutside", "formatChange", "interactOutside", "openChange", "pointerDownOutside", "valueChange", "valueChangeEnd", "update:modelValue", "update:open", "update:format"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const colorPicker = useColorPicker.useColorPicker(props, emits);
+    const presence = usePresence.usePresence(
+      vue.computed(() => ({
+        present: colorPicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      emits
+    );
     useColorPickerContext.ColorPickerProvider(colorPicker);
+    usePresenceContext.PresenceProvider(presence);
     useRenderStrategy.RenderStrategyPropsProvider(vue.computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/color-picker/color-picker-root.vue.d.cts

@@ -4,7 +4,7 @@ import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './color-picker.types';
 import { ValueChangeDetails, OpenChangeDetails, FormatChangeDetails } from '@zag-js/color-picker';
 import { Color, ColorFormat } from '@zag-js/color-utils';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface ColorPickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface ColorPickerRootProps extends ColorPickerRootBaseProps, 
@@ -16,6 +16,7 @@ HTMLAttributes {
 export interface ColorPickerRootEmits extends RootEmits {
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
     valueChange: (details: ValueChangeDetails) => any;
     "update:modelValue": (value: Color) => any;
     openChange: (details: OpenChangeDetails) => any;
@@ -27,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRoot
     pointerDownOutside: (event: PointerDownOutsideEvent) => any;
     "update:format": (format: ColorFormat) => any;
 }, string, PublicProps, Readonly<ColorPickerRootProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
     onValueChange?: ((details: ValueChangeDetails) => any) | undefined;
     "onUpdate:modelValue"?: ((value: Color) => any) | undefined;
     onOpenChange?: ((details: OpenChangeDetails) => any) | undefined;

package/dist/components/color-picker/color-picker-root.vue.d.ts

@@ -4,7 +4,7 @@ import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './color-picker.types';
 import { ValueChangeDetails, OpenChangeDetails, FormatChangeDetails } from '@zag-js/color-picker';
 import { Color, ColorFormat } from '@zag-js/color-utils';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface ColorPickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface ColorPickerRootProps extends ColorPickerRootBaseProps, 
@@ -16,6 +16,7 @@ HTMLAttributes {
 export interface ColorPickerRootEmits extends RootEmits {
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
     valueChange: (details: ValueChangeDetails) => any;
     "update:modelValue": (value: Color) => any;
     openChange: (details: OpenChangeDetails) => any;
@@ -27,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<ColorPickerRoot
     pointerDownOutside: (event: PointerDownOutsideEvent) => any;
     "update:format": (format: ColorFormat) => any;
 }, string, PublicProps, Readonly<ColorPickerRootProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
     onValueChange?: ((details: ValueChangeDetails) => any) | undefined;
     "onUpdate:modelValue"?: ((value: Color) => any) | undefined;
     onOpenChange?: ((details: OpenChangeDetails) => any) | undefined;