@ark-ui/vue 5.29.1 → 5.31.0

package/dist/components/combobox/combobox-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 { useComboboxContext } from './use-combobox-context.js';
 

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

@@ -184,6 +184,10 @@ export interface RootProps<T extends CollectionItem> {
     translations?: combobox.IntlTranslations;
 }
 export type RootEmits<T extends CollectionItem> = {
+    /**
+     * Function called when the animation ends in the closed state
+     */
+    exitComplete: [];
     /**
      * Function called when the focus is moved outside the component
      */

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

@@ -184,6 +184,10 @@ export interface RootProps<T extends CollectionItem> {
     translations?: combobox.IntlTranslations;
 }
 export type RootEmits<T extends CollectionItem> = {
+    /**
+     * Function called when the animation ends in the closed state
+     */
+    exitComplete: [];
     /**
      * Function called when the focus is moved outside the component
      */

package/dist/components/combobox/index.d.cts

@@ -15,7 +15,7 @@ export { default as ComboboxItem, type ComboboxItemBaseProps, type ComboboxItemP
 export { default as ComboboxLabel, type ComboboxLabelBaseProps, type ComboboxLabelProps } from './combobox-label.vue';
 export { default as ComboboxList, type ComboboxListBaseProps, type ComboboxListProps } from './combobox-list.vue';
 export { default as ComboboxPositioner, type ComboboxPositionerBaseProps, type ComboboxPositionerProps, } from './combobox-positioner.vue';
-export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, type ComboboxRootProviderComponent, } from './combobox-root-provider.vue';
+export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderEmits, type ComboboxRootProviderProps, type ComboboxRootProviderComponent, } from './combobox-root-provider.vue';
 export { default as ComboboxRoot, type ComboboxRootComponentProps, type ComboboxRootBaseProps, type ComboboxRootComponent, type ComboboxRootEmits, type ComboboxRootProps, } from './combobox-root.vue';
 export { default as ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps, } from './combobox-trigger.vue';
 export { comboboxAnatomy } from './combobox.anatomy';

package/dist/components/combobox/index.d.ts

@@ -15,7 +15,7 @@ export { default as ComboboxItem, type ComboboxItemBaseProps, type ComboboxItemP
 export { default as ComboboxLabel, type ComboboxLabelBaseProps, type ComboboxLabelProps } from './combobox-label.vue';
 export { default as ComboboxList, type ComboboxListBaseProps, type ComboboxListProps } from './combobox-list.vue';
 export { default as ComboboxPositioner, type ComboboxPositionerBaseProps, type ComboboxPositionerProps, } from './combobox-positioner.vue';
-export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, type ComboboxRootProviderComponent, } from './combobox-root-provider.vue';
+export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderEmits, type ComboboxRootProviderProps, type ComboboxRootProviderComponent, } from './combobox-root-provider.vue';
 export { default as ComboboxRoot, type ComboboxRootComponentProps, type ComboboxRootBaseProps, type ComboboxRootComponent, type ComboboxRootEmits, type ComboboxRootProps, } from './combobox-root.vue';
 export { default as ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps, } from './combobox-trigger.vue';
 export { comboboxAnatomy } from './combobox.anatomy';

package/dist/components/date-picker/date-picker-clear-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-picker-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-picker-month-select.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, toDisplayString } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, toDisplayString } from 'vue';
 import { ark } from '../factory.js';
 import { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-picker-next-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js';

package/dist/components/date-picker/date-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 usePresence = require('../presence/use-presence.cjs');
-const usePresenceContext = require('../presence/use-presence-context.cjs');
-const useDatePickerContext = require('./use-date-picker-context.cjs');
 const useForwardExpose = require('../../utils/use-forward-expose.cjs');
 const factory = require('../factory.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
+const useDatePickerContext = require('./use-date-picker-context.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "date-picker-positioner",
@@ -17,14 +15,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const datePicker = useDatePickerContext.useDatePickerContext();
-    const renderStrategy = useRenderStrategy.useRenderStrategyProps();
-    const presence = usePresence.usePresence(
-      vue.computed(() => ({
-        ...renderStrategy.value,
-        present: datePicker.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(datePicker).getPositionerProps(), { "as-child": __props.asChild }), {

package/dist/components/date-picker/date-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 { usePresence } from '../presence/use-presence.js';
-import { PresenceProvider } from '../presence/use-presence-context.js';
-import { useDatePickerContext } from './use-date-picker-context.js';
+import { defineComponent, unref, openBlock, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
 import { ark } from '../factory.js';
+import { usePresenceContext } from '../presence/use-presence-context.js';
+import { useDatePickerContext } from './use-date-picker-context.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "date-picker-positioner",
@@ -13,14 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const datePicker = useDatePickerContext();
-    const renderStrategy = useRenderStrategyProps();
-    const presence = usePresence(
-      computed(() => ({
-        ...renderStrategy.value,
-        present: datePicker.value.open
-      }))
-    );
-    PresenceProvider(presence);
+    const presence = usePresenceContext();
     useForwardExpose();
     return (_ctx, _cache) => {
       return !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps({ key: 0 }, unref(datePicker).getPositionerProps(), { "as-child": __props.asChild }), {

package/dist/components/date-picker/date-picker-preset-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-picker-prev-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js';

package/dist/components/date-picker/date-picker-range-text.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createTextVNode, toDisplayString } from 'vue';
 import { uniq } from '@zag-js/utils';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';
 import { ark } from '../factory.js';

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

@@ -4,9 +4,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 
 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 useDatePickerContext = require('./use-date-picker-context.cjs');
-const useForwardExpose = require('../../utils/use-forward-expose.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "date-picker-root-provider",
@@ -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 datePicker = vue.computed(() => props.value);
+    const presence = usePresence.usePresence(
+      vue.computed(() => ({
+        present: datePicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      // @ts-expect-error TODO tweak EmitFn
+      emits
+    );
     useDatePickerContext.DatePickerProvider(datePicker);
+    usePresenceContext.PresenceProvider(presence);
     useRenderStrategy.RenderStrategyPropsProvider(vue.computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/date-picker/date-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 { UseDatePickerReturn } from './use-date-picker';
+import { RootEmits as PresenceEmits } from '../presence/presence.types';
 interface RootProviderProps {
     value: UnwrapRef<UseDatePickerReturn>;
 }
@@ -13,7 +14,13 @@ export interface DatePickerRootProviderProps extends DatePickerRootProviderBaseP
  */
 HTMLAttributes {
 }
-declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DatePickerRootProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+export interface DatePickerRootProviderEmits extends PresenceEmits {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
+}, string, PublicProps, Readonly<DatePickerRootProviderProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/date-picker/date-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 { UseDatePickerReturn } from './use-date-picker';
+import { RootEmits as PresenceEmits } from '../presence/presence.types';
 interface RootProviderProps {
     value: UnwrapRef<UseDatePickerReturn>;
 }
@@ -13,7 +14,13 @@ export interface DatePickerRootProviderProps extends DatePickerRootProviderBaseP
  */
 HTMLAttributes {
 }
-declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DatePickerRootProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+export interface DatePickerRootProviderEmits extends PresenceEmits {
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
+}, string, PublicProps, Readonly<DatePickerRootProviderProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -1,8 +1,10 @@
-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 { DatePickerProvider } from './use-date-picker-context.js';
-import { useForwardExpose } from '../../utils/use-forward-expose.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "date-picker-root-provider",
@@ -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 datePicker = computed(() => props.value);
+    const presence = usePresence(
+      computed(() => ({
+        present: datePicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      // @ts-expect-error TODO tweak EmitFn
+      emits
+    );
     DatePickerProvider(datePicker);
+    PresenceProvider(presence);
     RenderStrategyPropsProvider(computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/date-picker/date-picker-root.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 useDatePicker = require('./use-date-picker.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
 
@@ -44,6 +46,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     translations: {},
     view: {},
     inline: { type: Boolean },
+    invalid: { type: Boolean },
+    required: { type: Boolean },
     lazyMount: { type: Boolean },
     unmountOnExit: { type: Boolean },
     asChild: { type: Boolean }
@@ -52,17 +56,28 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     defaultOpen: void 0,
     disabled: void 0,
     fixedWeeks: void 0,
+    inline: void 0,
+    invalid: void 0,
     open: void 0,
-    readOnly: void 0,
     outsideDaySelectable: void 0,
-    inline: void 0
+    readOnly: void 0,
+    required: void 0
   }),
-  emits: ["focusChange", "openChange", "valueChange", "viewChange", "update:modelValue", "update:open", "update:view", "update:focusedValue"],
+  emits: ["exitComplete", "focusChange", "openChange", "valueChange", "viewChange", "visibleRangeChange", "update:modelValue", "update:open", "update:view", "update:focusedValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const datePicker = useDatePicker.useDatePicker(props, emits);
+    const presence = usePresence.usePresence(
+      vue.computed(() => ({
+        present: datePicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      emits
+    );
     useDatePickerContext.DatePickerProvider(datePicker);
+    usePresenceContext.PresenceProvider(presence);
     useRenderStrategy.RenderStrategyPropsProvider(vue.computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {

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

@@ -2,8 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './date-picker.types';
-import { FocusChangeDetails, ValueChangeDetails, OpenChangeDetails, ViewChangeDetails, DateView } from '@zag-js/date-picker';
-import { DateValue } from '@internationalized/date';
+import { FocusChangeDetails, ValueChangeDetails, DateValue, OpenChangeDetails, ViewChangeDetails, VisibleRangeChangeDetails, DateView } from '@zag-js/date-picker';
 export interface DatePickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface DatePickerRootProps extends DatePickerRootBaseProps, 
@@ -15,25 +14,31 @@ HTMLAttributes {
 export interface DatePickerRootEmits extends RootEmits {
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
     focusChange: (details: FocusChangeDetails) => any;
     valueChange: (details: ValueChangeDetails) => any;
     "update:modelValue": (value: DateValue[]) => any;
     openChange: (details: OpenChangeDetails) => any;
     "update:open": (open: boolean) => any;
     viewChange: (details: ViewChangeDetails) => any;
+    visibleRangeChange: (details: VisibleRangeChangeDetails) => any;
     "update:view": (view: DateView) => any;
     "update:focusedValue": (focusedValue: DateValue) => any;
 }, string, PublicProps, Readonly<DatePickerRootProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
     onFocusChange?: ((details: FocusChangeDetails) => any) | undefined;
     onValueChange?: ((details: ValueChangeDetails) => any) | undefined;
     "onUpdate:modelValue"?: ((value: DateValue[]) => any) | undefined;
     onOpenChange?: ((details: OpenChangeDetails) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onViewChange?: ((details: ViewChangeDetails) => any) | undefined;
+    onVisibleRangeChange?: ((details: VisibleRangeChangeDetails) => any) | undefined;
     "onUpdate:view"?: ((view: DateView) => any) | undefined;
     "onUpdate:focusedValue"?: ((focusedValue: DateValue) => any) | undefined;
 }>, {
+    invalid: boolean;
     disabled: boolean;
+    required: boolean;
     open: boolean;
     inline: boolean;
     defaultOpen: boolean;

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

@@ -2,8 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './date-picker.types';
-import { FocusChangeDetails, ValueChangeDetails, OpenChangeDetails, ViewChangeDetails, DateView } from '@zag-js/date-picker';
-import { DateValue } from '@internationalized/date';
+import { FocusChangeDetails, ValueChangeDetails, DateValue, OpenChangeDetails, ViewChangeDetails, VisibleRangeChangeDetails, DateView } from '@zag-js/date-picker';
 export interface DatePickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface DatePickerRootProps extends DatePickerRootBaseProps, 
@@ -15,25 +14,31 @@ HTMLAttributes {
 export interface DatePickerRootEmits extends RootEmits {
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    exitComplete: () => any;
     focusChange: (details: FocusChangeDetails) => any;
     valueChange: (details: ValueChangeDetails) => any;
     "update:modelValue": (value: DateValue[]) => any;
     openChange: (details: OpenChangeDetails) => any;
     "update:open": (open: boolean) => any;
     viewChange: (details: ViewChangeDetails) => any;
+    visibleRangeChange: (details: VisibleRangeChangeDetails) => any;
     "update:view": (view: DateView) => any;
     "update:focusedValue": (focusedValue: DateValue) => any;
 }, string, PublicProps, Readonly<DatePickerRootProps> & Readonly<{
+    onExitComplete?: (() => any) | undefined;
     onFocusChange?: ((details: FocusChangeDetails) => any) | undefined;
     onValueChange?: ((details: ValueChangeDetails) => any) | undefined;
     "onUpdate:modelValue"?: ((value: DateValue[]) => any) | undefined;
     onOpenChange?: ((details: OpenChangeDetails) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onViewChange?: ((details: ViewChangeDetails) => any) | undefined;
+    onVisibleRangeChange?: ((details: VisibleRangeChangeDetails) => any) | undefined;
     "onUpdate:view"?: ((view: DateView) => any) | undefined;
     "onUpdate:focusedValue"?: ((focusedValue: DateValue) => any) | undefined;
 }>, {
+    invalid: boolean;
     disabled: boolean;
+    required: boolean;
     open: boolean;
     inline: boolean;
     defaultOpen: boolean;

package/dist/components/date-picker/date-picker-root.vue.js

@@ -1,7 +1,9 @@
-import { defineComponent, mergeDefaults, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, mergeDefaults } 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 { useDatePicker } from './use-date-picker.js';
 import { DatePickerProvider } from './use-date-picker-context.js';
 
@@ -40,6 +42,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     translations: {},
     view: {},
     inline: { type: Boolean },
+    invalid: { type: Boolean },
+    required: { type: Boolean },
     lazyMount: { type: Boolean },
     unmountOnExit: { type: Boolean },
     asChild: { type: Boolean }
@@ -48,17 +52,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     defaultOpen: void 0,
     disabled: void 0,
     fixedWeeks: void 0,
+    inline: void 0,
+    invalid: void 0,
     open: void 0,
-    readOnly: void 0,
     outsideDaySelectable: void 0,
-    inline: void 0
+    readOnly: void 0,
+    required: void 0
   }),
-  emits: ["focusChange", "openChange", "valueChange", "viewChange", "update:modelValue", "update:open", "update:view", "update:focusedValue"],
+  emits: ["exitComplete", "focusChange", "openChange", "valueChange", "viewChange", "visibleRangeChange", "update:modelValue", "update:open", "update:view", "update:focusedValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const datePicker = useDatePicker(props, emits);
+    const presence = usePresence(
+      computed(() => ({
+        present: datePicker.value.open,
+        lazyMount: props.lazyMount,
+        unmountOnExit: props.unmountOnExit
+      })),
+      emits
+    );
     DatePickerProvider(datePicker);
+    PresenceProvider(presence);
     RenderStrategyPropsProvider(computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })));
     useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/date-picker/date-picker-table-body.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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js';

package/dist/components/date-picker/date-picker-table-cell-trigger.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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js';

package/dist/components/date-picker/date-picker-table-cell.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 { useDatePickerContext } from './use-date-picker-context.js';
 import { DatePickerTableCellPropsProvider } from './use-date-picker-table-cell-props-context.js';

package/dist/components/date-picker/date-picker-table-head.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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js';

package/dist/components/date-picker/date-picker-table-header.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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js';

package/dist/components/date-picker/date-picker-table-row.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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useDatePickerTablePropsContext } from './use-date-picker-table-props-context.js';

package/dist/components/date-picker/date-picker-table.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useId, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, useId, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { ark } from '../factory.js';
 import { useDatePickerContext } from './use-date-picker-context.js';
 import { DatePickerTablePropsProvider } from './use-date-picker-table-props-context.js';

package/dist/components/date-picker/date-picker-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 { useDatePickerContext } from './use-date-picker-context.js';
 import { useForwardExpose } from '../../utils/use-forward-expose.js';

package/dist/components/date-picker/date-picker-value-text.vue.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const useForwardExpose = require('../../utils/use-forward-expose.cjs');
+const factory = require('../factory.cjs');
+const datePicker_anatomy = require('./date-picker.anatomy.cjs');
+const useDatePickerContext = require('./use-date-picker-context.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "date-picker-value-text",
+  props: {
+    placeholder: {},
+    separator: { default: ", " },
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const datePicker = useDatePickerContext.useDatePickerContext();
+    const hasValue = vue.computed(() => datePicker.value.value.length > 0);
+    const displayValue = vue.computed(() => {
+      if (!hasValue.value) return props.placeholder;
+      return datePicker.value.valueAsString.join(props.separator);
+    });
+    const getRenderProps = (value, index) => ({
+      value,
+      index,
+      valueAsString: datePicker.value.valueAsString[index],
+      remove: () => {
+        datePicker.value.setValue(datePicker.value.value.filter((_, i) => i !== index));
+      }
+    });
+    useForwardExpose.useForwardExpose();
+    return (_ctx, _cache) => {
+      return _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+        hasValue.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(datePicker).value, (value, index) => {
+          return vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+            key: index,
+            ref_for: true
+          }, getRenderProps(value, index)));
+        }), 128)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          vue.createTextVNode(vue.toDisplayString(__props.placeholder), 1)
+        ], 64))
+      ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).span, vue.mergeProps({ key: 1 }, vue.unref(datePicker_anatomy.datePickerAnatomy).build().valueText.attrs, { "as-child": __props.asChild }), {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(displayValue.value), 1)
+        ]),
+        _: 1
+      }, 16, ["as-child"]));
+    };
+  }
+});
+
+exports.default = _sfc_main;