@ark-ui/react 1.0.0-beta.3 → 1.0.0-beta.5

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>>;

package/date-picker/date-picker.mjs

@@ -4,14 +4,20 @@ 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 { DatePickerProvider } from './date-picker-context.mjs';
 import { useDatePicker } from './use-date-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 DatePicker = forwardRef((props, ref) => {
-  const [datePickerProps, { children, ...localProps }] = createSplitProps()(
-    props,
+  const [presenceProps, datePickerProps] = splitPresenceProps(props);
+  const [useDatePickerProps, { children, ...localProps }] = createSplitProps()(
+    datePickerProps,
     [
+      "closeOnSelect",
       "defaultValue",
       "dir",
       "disabled",
@@ -21,7 +27,6 @@ const DatePicker = forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "inline",
       "isDateUnavailable",
       "isDateUnavailable",
       "locale",
@@ -46,10 +51,11 @@ const DatePicker = forwardRef((props, ref) => {
       "view"
     ]
   );
-  const api = useDatePicker(datePickerProps);
+  const api = useDatePicker(useDatePickerProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(DatePickerProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(DatePickerProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 });
 DatePicker.displayName = "DatePicker";
 

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

@@ -5,3 +5,4 @@ type DatePickerType = typeof DatePicker;
 declare const meta: Meta<DatePickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const RangeWithSingleGrid: () => JSX.Element;

package/dialog/dialog-backdrop.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 dialogContext = require('./dialog-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DialogBackdrop = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = dialogContext.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.backdropProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerBackdrop, { ref, ...localProps }) });
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(api.backdropProps, props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, ...mergedProps });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
-const DialogInnerBackdrop = react.forwardRef(
-  function DialogInnerBackdrop2(props, ref) {
-    const api = dialogContext.useDialogContext();
-    const mergedProps = react$1.mergeProps(api.backdropProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.DialogBackdrop = DialogBackdrop;

package/dialog/dialog-backdrop.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 DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface DialogBackdropProps extends HTMLArkProps<'div'> {
 }
 export declare const DialogBackdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-backdrop.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 { useDialogContext } from './dialog-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const DialogBackdrop = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.backdropProps }), children: /* @__PURE__ */ jsx(DialogInnerBackdrop, { ref, ...localProps }) });
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(api.backdropProps, props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ref, ...mergedProps });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
-const DialogInnerBackdrop = forwardRef(
-  function DialogInnerBackdrop2(props, ref) {
-    const api = useDialogContext();
-    const mergedProps = mergeProps(api.backdropProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { DialogBackdrop };

package/dialog/dialog-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 dialogContext = require('./dialog-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DialogContent = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = dialogContext.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerContent, { 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 });
 });
 DialogContent.displayName = "DialogContent";
-const DialogInnerContent = react.forwardRef(
-  function DialogInnerContent2(props, ref) {
-    const api = dialogContext.useDialogContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.DialogContent = DialogContent;

package/dialog/dialog-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 DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface DialogContentProps extends HTMLArkProps<'div'> {
 }
 export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-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 { useDialogContext } from './dialog-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const DialogContent = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(DialogInnerContent, { 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 });
 });
 DialogContent.displayName = "DialogContent";
-const DialogInnerContent = forwardRef(
-  function DialogInnerContent2(props, ref) {
-    const api = useDialogContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { DialogContent };

package/dialog/dialog-positioner.cjs

@@ -7,11 +7,17 @@ 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 dialogContext = require('./dialog-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DialogPositioner = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();
   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 });
 });
 DialogPositioner.displayName = "DialogPositioner";

package/dialog/dialog-positioner.mjs

@@ -3,11 +3,17 @@ 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 { useDialogContext } from './dialog-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const DialogPositioner = forwardRef((props, ref) => {
   const api = useDialogContext();
   const mergedProps = mergeProps(api.positionerProps, props);
+  const presenceApi = usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 DialogPositioner.displayName = "DialogPositioner";

package/dialog/dialog-trigger.cjs

@@ -7,11 +7,20 @@ 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 dialogContext = require('./dialog-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const DialogTrigger = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();
-  const mergedProps = react$1.mergeProps(api.triggerProps, props);
+  const presence = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presence.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 DialogTrigger.displayName = "DialogTrigger";

package/dialog/dialog-trigger.mjs

@@ -3,11 +3,20 @@ 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 { useDialogContext } from './dialog-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const DialogTrigger = forwardRef((props, ref) => {
   const api = useDialogContext();
-  const mergedProps = mergeProps(api.triggerProps, props);
+  const presence = usePresenceContext();
+  const mergedProps = mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presence.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 DialogTrigger.displayName = "DialogTrigger";

package/dialog/dialog.cjs

@@ -5,15 +5,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 require('react');
+require('../presence/index.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const useDialog = require('./use-dialog.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const Dialog = (props) => {
-  const { children, ...useDialogProps } = props;
-  const api = useDialog.useDialog(useDialogProps);
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
+  const api = useDialog.useDialog(localProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: view });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };
 
 exports.Dialog = Dialog;

package/dialog/dialog.d.ts

@@ -1,10 +1,8 @@
 import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
-import { type Assign } from '../types';
-import { type DialogContext } from './dialog-context';
-import { type UseDialogProps } from './use-dialog';
-export interface DialogProps extends Assign<UseDialogProps, {
-    children?: ReactNode | ((props: DialogContext) => ReactNode);
-}> {
+import type { UsePresenceProps } from '../presence';
+import { type UseDialogProps, type UseDialogReturn } from './use-dialog';
+export interface DialogProps extends UseDialogProps, UsePresenceProps {
+    children?: ReactNode | ((api: UseDialogReturn) => ReactNode);
 }
 export declare const Dialog: (props: DialogProps) => JSX.Element;

package/dialog/dialog.mjs

@@ -1,15 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
+import '../presence/index.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { DialogProvider } from './dialog-context.mjs';
 import { useDialog } from './use-dialog.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const Dialog = (props) => {
-  const { children, ...useDialogProps } = props;
-  const api = useDialog(useDialogProps);
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
+  const api = useDialog(localProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: view });
+  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };
 
 export { Dialog };

package/editable/editable.d.ts

@@ -1,10 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-import { type EditableContext } from './editable-context';
-import { type UseEditableProps } from './use-editable';
-export interface EditableProps extends Assign<Omit<HTMLArkProps<'div'>, 'children'> & {
-    children?: ReactNode | ((pages: EditableContext) => ReactNode);
-}, UseEditableProps> {
+import { type UseEditableProps, type UseEditableReturn } from './use-editable';
+export interface EditableProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseEditableReturn) => ReactNode);
+}>, UseEditableProps> {
 }
 export declare const Editable: ForwardRefExoticComponent<EditableProps & RefAttributes<HTMLDivElement>>;

package/environment/environment-context.d.ts

@@ -2,4 +2,4 @@ import { Provider } from 'react';
 /// <reference types="react" />
 import { type CommonProperties } from '@zag-js/types';
 export type EnvironmentContext = CommonProperties['getRootNode'];
-export declare const EnvironmentProvider: Provider<(() => ShadowRoot | Node | Document) | undefined>, useEnvironmentContext: () => (() => ShadowRoot | Node | Document) | undefined;
+export declare const EnvironmentProvider: Provider<(() => Node | ShadowRoot | Document) | undefined>, useEnvironmentContext: () => (() => Node | ShadowRoot | Document) | undefined;

package/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const HoverCardContent = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = hoverCardContext.useHoverCardContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardInnerContent, { 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 });
 });
 HoverCardContent.displayName = "HoverCardContent";
-const HoverCardInnerContent = react.forwardRef(
-  function HoverCardInnerContent2(props, ref) {
-    const api = hoverCardContext.useHoverCardContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.HoverCardContent = HoverCardContent;

package/hover-card/hover-card-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 HoverCardContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface HoverCardContentProps extends HTMLArkProps<'div'> {
 }
 export declare const HoverCardContent: ForwardRefExoticComponent<HoverCardContentProps & RefAttributes<HTMLDivElement>>;

package/hover-card/hover-card-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 { useHoverCardContext } from './hover-card-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const HoverCardContent = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useHoverCardContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(HoverCardInnerContent, { 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 });
 });
 HoverCardContent.displayName = "HoverCardContent";
-const HoverCardInnerContent = forwardRef(
-  function HoverCardInnerContent2(props, ref) {
-    const api = useHoverCardContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { HoverCardContent };

package/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const HoverCardPositioner = react.forwardRef(
   (props, ref) => {
     const api = hoverCardContext.useHoverCardContext();
     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/hover-card/hover-card-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 { useHoverCardContext } from './hover-card-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const HoverCardPositioner = forwardRef(
   (props, ref) => {
     const api = useHoverCardContext();
     const mergedProps = mergeProps(api.positionerProps, props);
+    const presenceApi = usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/hover-card/hover-card.cjs

@@ -5,15 +5,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 require('react');
+require('../presence/index.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const hoverCardContext = require('./hover-card-context.cjs');
 const useHoverCard = require('./use-hover-card.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const HoverCard = (props) => {
-  const { children, ...useHoverCardProps } = props;
-  const api = useHoverCard.useHoverCard(useHoverCardProps);
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
+  const api = useHoverCard.useHoverCard(localProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(hoverCardContext.HoverCardProvider, { value: api, children: view });
+  return /* @__PURE__ */ jsxRuntime.jsx(hoverCardContext.HoverCardProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };
 
 exports.HoverCard = HoverCard;

package/hover-card/hover-card.d.ts

@@ -1,10 +1,8 @@
 import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
-import type { Assign } from '../types';
-import { type HoverCardContext } from './hover-card-context';
-import { type UseHoverCardProps } from './use-hover-card';
-export interface HoverCardProps extends Assign<UseHoverCardProps, {
-    children?: ReactNode | ((props: HoverCardContext) => ReactNode);
-}> {
+import type { UsePresenceProps } from '../presence';
+import { type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
+export interface HoverCardProps extends UseHoverCardProps, UsePresenceProps {
+    children?: ReactNode | ((api: UseHoverCardReturn) => ReactNode);
 }
 export declare const HoverCard: (props: HoverCardProps) => JSX.Element;

package/hover-card/hover-card.mjs

@@ -1,15 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
+import '../presence/index.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { HoverCardProvider } from './hover-card-context.mjs';
 import { useHoverCard } from './use-hover-card.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const HoverCard = (props) => {
-  const { children, ...useHoverCardProps } = props;
-  const api = useHoverCard(useHoverCardProps);
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
+  const api = useHoverCard(localProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(HoverCardProvider, { value: api, children: view });
+  return /* @__PURE__ */ jsx(HoverCardProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };
 
 export { HoverCard };

package/index.cjs

@@ -179,7 +179,10 @@ const popoverPositioner = require('./popover/popover-positioner.cjs');
 const popoverTitle = require('./popover/popover-title.cjs');
 const popoverTrigger = require('./popover/popover-trigger.cjs');
 const popoverContext = require('./popover/popover-context.cjs');
+const presencePropsContext = require('./presence/presence-props-context.cjs');
+const presenceContext = require('./presence/presence-context.cjs');
 const splitPresenceProps = require('./presence/split-presence-props.cjs');
+const usePresence = require('./presence/use-presence.cjs');
 const radioGroupItem = require('./radio-group/radio-group-item.cjs');
 const radioGroupItemControl = require('./radio-group/radio-group-item-control.cjs');
 const radioGroupItemText = require('./radio-group/radio-group-item-text.cjs');
@@ -217,10 +220,10 @@ const sliderControl = require('./slider/slider-control.cjs');
 const sliderLabel = require('./slider/slider-label.cjs');
 const sliderMarker = require('./slider/slider-marker.cjs');
 const sliderMarkerGroup = require('./slider/slider-marker-group.cjs');
-const sliderOutput = require('./slider/slider-output.cjs');
 const sliderRange = require('./slider/slider-range.cjs');
 const sliderThumb = require('./slider/slider-thumb.cjs');
 const sliderTrack = require('./slider/slider-track.cjs');
+const sliderValueText = require('./slider/slider-value-text.cjs');
 const sliderContext = require('./slider/slider-context.cjs');
 const splitterPanel = require('./splitter/splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter/splitter-resize-trigger.cjs');
@@ -437,7 +440,12 @@ exports.PopoverPositioner = popoverPositioner.PopoverPositioner;
 exports.PopoverTitle = popoverTitle.PopoverTitle;
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
 exports.usePopoverContext = popoverContext.usePopoverContext;
+exports.PresencePropsProvider = presencePropsContext.PresencePropsProvider;
+exports.usePresencePropsContext = presencePropsContext.usePresencePropsContext;
+exports.PresenceProvider = presenceContext.PresenceProvider;
+exports.usePresenceContext = presenceContext.usePresenceContext;
 exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
+exports.usePresence = usePresence.usePresence;
 exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
 exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
 exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
@@ -475,10 +483,10 @@ exports.SliderControl = sliderControl.SliderControl;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
-exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
+exports.SliderValueText = sliderValueText.SliderValueText;
 exports.useSliderContext = sliderContext.useSliderContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;