@ark-ui/react 1.0.0-beta.4 → 1.0.0

package/color-picker/color-picker.cjs

@@ -8,43 +8,46 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const ColorPicker = react.forwardRef((props, ref) => {
-  const [colorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "autoFocus",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "getRootNode",
-      "id",
-      "ids",
-      "initialFocusEl",
-      "name",
-      "name",
-      "onFocusOutside",
-      "onInteractOutside",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "onValueChangeEnd",
-      "open",
-      "positioning",
-      "readOnly",
-      "value"
-    ]
-  );
-  const api = useColorPicker.useColorPicker(colorPickerProps);
+  const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useColorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(colorPickerProps, [
+    "autoFocus",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "initialFocusEl",
+    "name",
+    "name",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueChangeEnd",
+    "open",
+    "positioning",
+    "readOnly",
+    "value"
+  ]);
+  const api = useColorPicker.useColorPicker(useColorPickerProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(colorPickerContext.ColorPickerProvider, { value: api, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(colorPickerContext.ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsxs(presenceContext.PresenceProvider, { value: presenceApi, children: [
     /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
-  ] });
+  ] }) });
 });
 ColorPicker.displayName = "ColorPicker";
 

package/color-picker/color-picker.d.ts

@@ -1,9 +1,10 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import { type Assign } from '../types';
-import { type ColorPickerContext } from './color-picker-context';
-import { type UseColorPickerProps } from './use-color-picker';
-export interface ColorPickerProps extends Assign<UseColorPickerProps, {
-    children?: ReactNode | ((props: ColorPickerContext) => ReactNode);
-}> {
+import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
+export interface ColorPickerProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseColorPickerReturn) => ReactNode);
+}>, UseColorPickerProps>, UsePresenceProps {
 }
 export declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker.mjs

@@ -1,46 +1,49 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { ColorPickerProvider } from './color-picker-context.mjs';
 import { useColorPicker } from './use-color-picker.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const ColorPicker = forwardRef((props, ref) => {
-  const [colorPickerProps, { children, ...localProps }] = createSplitProps()(
-    props,
-    [
-      "autoFocus",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "getRootNode",
-      "id",
-      "ids",
-      "initialFocusEl",
-      "name",
-      "name",
-      "onFocusOutside",
-      "onInteractOutside",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "onValueChangeEnd",
-      "open",
-      "positioning",
-      "readOnly",
-      "value"
-    ]
-  );
-  const api = useColorPicker(colorPickerProps);
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [useColorPickerProps, { children, ...localProps }] = createSplitProps()(colorPickerProps, [
+    "autoFocus",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "initialFocusEl",
+    "name",
+    "name",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueChangeEnd",
+    "open",
+    "positioning",
+    "readOnly",
+    "value"
+  ]);
+  const api = useColorPicker(useColorPickerProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxs(ColorPickerProvider, { value: api, children: [
+  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxs(PresenceProvider, { value: presenceApi, children: [
     /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
     /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
-  ] });
+  ] }) });
 });
 ColorPicker.displayName = "ColorPicker";
 

package/color-picker/index.cjs

@@ -25,6 +25,7 @@ const colorPickerSwatchTrigger = require('./color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker-trigger.cjs');
 const colorPickerValueText = require('./color-picker-value-text.cjs');
+const colorPickerView = require('./color-picker-view.cjs');
 
 const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Root: colorPicker.ColorPicker,
@@ -45,7 +46,8 @@ const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
   TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
   Trigger: colorPickerTrigger.ColorPickerTrigger,
-  ValueText: colorPickerValueText.ColorPickerValueText
+  ValueText: colorPickerValueText.ColorPickerValueText,
+  View: colorPickerView.ColorPickerView
 });
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;

package/color-picker/index.d.ts

@@ -22,6 +22,7 @@ import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './
 import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } from './color-picker-transparency-grid';
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
+import { type ColorPickerViewProps } from './color-picker-view';
 declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
@@ -42,6 +43,7 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
     ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
+    View: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
 };
 export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, };
+export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };

package/color-picker/index.mjs

@@ -21,6 +21,7 @@ import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
 import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
 import { ColorPickerTrigger } from './color-picker-trigger.mjs';
 import { ColorPickerValueText } from './color-picker-value-text.mjs';
+import { ColorPickerView } from './color-picker-view.mjs';
 
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
@@ -41,7 +42,8 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
   Trigger: ColorPickerTrigger,
-  ValueText: ColorPickerValueText
+  ValueText: ColorPickerValueText,
+  View: ColorPickerView
 });
 
 export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText };

package/combobox/combobox-content.cjs

@@ -7,22 +7,19 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const index = require('../presence/index.cjs');
+require('../presence/index.cjs');
 const comboboxContext = require('./combobox-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const ComboboxContent = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = comboboxContext.useComboboxContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxInnerContent, { ref, ...localProps }) });
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
 });
 ComboboxContent.displayName = "ComboboxContent";
-const ComboboxInnerContent = react.forwardRef(
-  function ComboboxInnerContent2(props, ref) {
-    const api = comboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.ComboboxContent = ComboboxContent;

package/combobox/combobox-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface ComboboxContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface ComboboxContentProps extends HTMLArkProps<'div'> {
 }
 export declare const ComboboxContent: ForwardRefExoticComponent<ComboboxContentProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-content.mjs

@@ -3,22 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { Presence } from '../presence/index.mjs';
+import '../presence/index.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const ComboboxContent = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useComboboxContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(ComboboxInnerContent, { ref, ...localProps }) });
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
 });
 ComboboxContent.displayName = "ComboboxContent";
-const ComboboxInnerContent = forwardRef(
-  function ComboboxInnerContent2(props, ref) {
-    const api = useComboboxContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { ComboboxContent };

package/combobox/combobox-item.d.ts

@@ -1,7 +1,9 @@
-import type { ItemProps } from '@zag-js/combobox';
-import { ForwardRefExoticComponent, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import type { ItemProps, ItemState } from '@zag-js/combobox';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export interface ComboboxItemProps extends Assign<ComponentPropsWithoutRef<typeof ark.div>, ItemProps> {
+export interface ComboboxItemProps extends Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((state: ItemState) => ReactNode);
+}>, ItemProps {
 }
 export declare const ComboboxItem: ForwardRefExoticComponent<ComboboxItemProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-positioner.cjs

@@ -7,12 +7,18 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const comboboxContext = require('./combobox-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const ComboboxPositioner = react.forwardRef(
   (props, ref) => {
     const api = comboboxContext.useComboboxContext();
     const mergedProps = react$1.mergeProps(api.positionerProps, props);
+    const presenceApi = presenceContext.usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/combobox/combobox-positioner.mjs

@@ -3,12 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const ComboboxPositioner = forwardRef(
   (props, ref) => {
     const api = useComboboxContext();
     const mergedProps = mergeProps(api.positionerProps, props);
+    const presenceApi = usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/combobox/combobox.cjs

@@ -8,13 +8,18 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const useCombobox = require('./use-combobox.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const ComboboxImpl = (props, ref) => {
+  const [presenceProps, comboboxProps] = splitPresenceProps.splitPresenceProps(props);
   const [useComboboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
+    comboboxProps,
     [
       "allowCustomValue",
       "autoFocus",
@@ -56,9 +61,10 @@ const ComboboxImpl = (props, ref) => {
     ]
   );
   const api = useCombobox.useCombobox(useComboboxProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(comboboxContext.ComboboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(comboboxContext.ComboboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 };
 const Combobox = react.forwardRef(ComboboxImpl);
 

package/combobox/combobox.d.ts

@@ -1,10 +1,11 @@
 import { type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';
 import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
-export interface ComboboxProps<T extends CollectionItem> extends Assign<HTMLArkProps<'div'>, UseComboboxProps<T> & {
-    children?: ReactNode | ((state: UseComboboxReturn<T>) => ReactNode);
-}> {
+export interface ComboboxProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseComboboxReturn<T>) => ReactNode);
+}>, UseComboboxProps<T>>, UsePresenceProps {
 }
 export interface ComboboxComponent {
     <T extends CollectionItem>(props: ComboboxProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;

package/combobox/combobox.mjs

@@ -4,13 +4,18 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { ComboboxProvider } from './combobox-context.mjs';
 import { useCombobox } from './use-combobox.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const ComboboxImpl = (props, ref) => {
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
   const [useComboboxProps, { children, ...localProps }] = createSplitProps()(
-    props,
+    comboboxProps,
     [
       "allowCustomValue",
       "autoFocus",
@@ -52,9 +57,10 @@ const ComboboxImpl = (props, ref) => {
     ]
   );
   const api = useCombobox(useComboboxProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 };
 const Combobox = forwardRef(ComboboxImpl);
 

package/date-picker/date-picker-content.cjs

@@ -7,24 +7,21 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const index = require('../presence/index.cjs');
+require('../presence/index.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DatePickerContent = react.forwardRef(
   (props, ref) => {
-    const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
     const api = datePickerContext.useDatePickerContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInnerContent, { ref, ...localProps }) });
+    const presenceApi = presenceContext.usePresenceContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
-const DatePickerInnerContent = react.forwardRef(
-  function DatePickerInnerContent2(props, ref) {
-    const api = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.DatePickerContent = DatePickerContent;

package/date-picker/date-picker-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface DatePickerContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface DatePickerContentProps extends HTMLArkProps<'div'> {
 }
 export declare const DatePickerContent: ForwardRefExoticComponent<DatePickerContentProps & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker-content.mjs

@@ -3,24 +3,21 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { Presence } from '../presence/index.mjs';
+import '../presence/index.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const DatePickerContent = forwardRef(
   (props, ref) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDatePickerContext();
-    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(DatePickerInnerContent, { ref, ...localProps }) });
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
-const DatePickerInnerContent = forwardRef(
-  function DatePickerInnerContent2(props, ref) {
-    const api = useDatePickerContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { DatePickerContent };

package/date-picker/date-picker-positioner.cjs

@@ -7,12 +7,18 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DatePickerPositioner = react.forwardRef(
   (props, ref) => {
     const api = datePickerContext.useDatePickerContext();
     const mergedProps = react$1.mergeProps(api.positionerProps, props);
+    const presenceApi = presenceContext.usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-positioner.mjs

@@ -3,12 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const DatePickerPositioner = forwardRef(
   (props, ref) => {
     const api = useDatePickerContext();
     const mergedProps = mergeProps(api.positionerProps, props);
+    const presenceApi = usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-view.d.ts

@@ -3,8 +3,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import type { UseDatePickerReturn } from './use-date-picker';
-export interface DatePickerViewProps extends Required<ViewProps>, Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((props: UseDatePickerReturn) => ReactNode);
-}> {
+export interface DatePickerViewProps extends Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseDatePickerReturn) => ReactNode);
+}>, Required<ViewProps> {
 }
 export declare const DatePickerView: ForwardRefExoticComponent<DatePickerViewProps & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker.cjs

@@ -8,13 +8,18 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 const useDatePicker = require('./use-date-picker.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DatePicker = react.forwardRef((props, ref) => {
-  const [datePickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
+  const [presenceProps, datePickerProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useDatePickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    datePickerProps,
     [
       "closeOnSelect",
       "defaultValue",
@@ -50,10 +55,11 @@ const DatePicker = react.forwardRef((props, ref) => {
       "view"
     ]
   );
-  const api = useDatePicker.useDatePicker(datePickerProps);
+  const api = useDatePicker.useDatePicker(useDatePickerProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(datePickerContext.DatePickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(datePickerContext.DatePickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 });
 DatePicker.displayName = "DatePicker";
 

package/date-picker/date-picker.d.ts

@@ -1,9 +1,10 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import { type Assign } from '../types';
-import { type DatePickerContext } from './date-picker-context';
-import { type UseDatePickerProps } from './use-date-picker';
-export interface DatePickerProps extends Assign<UseDatePickerProps, {
-    children?: ReactNode | ((props: DatePickerContext) => ReactNode);
-}> {
+import { type UseDatePickerProps, type UseDatePickerReturn } from './use-date-picker';
+export interface DatePickerProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseDatePickerReturn) => ReactNode);
+}>, UseDatePickerProps>, UsePresenceProps {
 }
 export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;