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

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

package/menu/menu-option-item.d.ts

@@ -2,8 +2,8 @@ import type { OptionItemProps, OptionItemState } from '@zag-js/menu';
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export interface MenuOptionItemProps extends Assign<HTMLArkProps<'div'>, OptionItemProps & {
+export interface MenuOptionItemProps extends Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((state: OptionItemState) => ReactNode);
-}> {
+}>, OptionItemProps {
 }
 export declare const MenuOptionItem: ForwardRefExoticComponent<MenuOptionItemProps & RefAttributes<HTMLDivElement>>;

package/menu/menu.cjs

@@ -6,13 +6,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const useEffectOnce = require('../use-effect-once.cjs');
 const menuContext = require('./menu-context.cjs');
 const useMenu = require('./use-menu.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const Menu = (props) => {
-  const [menuProps, { children, isOpen }] = createSplitProps.createSplitProps()(props, [
+  const [presenceProps, menuProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps.createSplitProps()(menuProps, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -28,32 +33,26 @@ const Menu = (props) => {
     "onPointerDownOutside",
     "onSelect",
     "onValueChange",
+    "open",
     "positioning",
     "value"
   ]);
   const parentApi = menuContext.useMenuContext();
   const parentMachine = menuContext.useMenuMachineContext();
-  const { api, machine } = useMenu.useMenu(menuProps);
-  const view = runIfFn.runIfFn(children, {
-    isOpen: api.isOpen,
-    onClose: api.close
-  });
+  const { api, machine } = useMenu.useMenu(useMenuProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const view = runIfFn.runIfFn(localProps.children, api);
   useEffectOnce.useEffectOnce(() => {
     if (!parentMachine)
       return;
     parentApi.setChild(machine);
     api.setParent(parentMachine);
   });
-  react.useEffect(() => {
-    if (isOpen && !api.isOpen) {
-      api.open();
-    }
-  }, [isOpen, api]);
   const getTriggerItemProps = react.useCallback(
     () => parentApi.getTriggerItemProps(api),
     [api, parentApi]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuProvider, { value: api, children: view }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) }) });
 };
 
 exports.Menu = Menu;

package/menu/menu.d.ts

@@ -1,15 +1,8 @@
 import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
-import { type Assign } from '../types';
-import { type UseMenuProps } from './use-menu';
-interface MenuState {
-    isOpen: boolean;
-    onClose: () => void;
-}
-export interface MenuProps extends Assign<UseMenuProps, {
-    children?: ReactNode | ((state: MenuState) => ReactNode);
-    isOpen?: boolean;
-}> {
+import { type UsePresenceProps } from '../presence';
+import { type UseMenuProps, type UseMenuReturn } from './use-menu';
+export interface MenuProps extends UseMenuProps, UsePresenceProps {
+    children?: ReactNode | ((api: UseMenuReturn['api']) => ReactNode);
 }
 export declare const Menu: (props: MenuProps) => JSX.Element;
-export {};

package/menu/menu.mjs

@@ -1,14 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useEffectOnce } from '../use-effect-once.mjs';
 import { useMenuContext, useMenuMachineContext, MenuTriggerItemProvider, MenuMachineProvider, MenuProvider } from './menu-context.mjs';
 import { useMenu } from './use-menu.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const Menu = (props) => {
-  const [menuProps, { children, isOpen }] = createSplitProps()(props, [
+  const [presenceProps, menuProps] = splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -24,32 +29,26 @@ const Menu = (props) => {
     "onPointerDownOutside",
     "onSelect",
     "onValueChange",
+    "open",
     "positioning",
     "value"
   ]);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
-  const { api, machine } = useMenu(menuProps);
-  const view = runIfFn(children, {
-    isOpen: api.isOpen,
-    onClose: api.close
-  });
+  const { api, machine } = useMenu(useMenuProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const view = runIfFn(localProps.children, api);
   useEffectOnce(() => {
     if (!parentMachine)
       return;
     parentApi.setChild(machine);
     api.setParent(parentMachine);
   });
-  useEffect(() => {
-    if (isOpen && !api.isOpen) {
-      api.open();
-    }
-  }, [isOpen, api]);
   const getTriggerItemProps = useCallback(
     () => parentApi.getTriggerItemProps(api),
     [api, parentApi]
   );
-  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: view }) }) });
+  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) }) });
 };
 
 export { Menu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -59,72 +59,71 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0-beta.1",
-    "@zag-js/accordion": "0.27.1",
-    "@zag-js/anatomy": "0.27.1",
-    "@zag-js/avatar": "0.27.1",
-    "@zag-js/carousel": "0.27.1",
-    "@zag-js/checkbox": "0.27.1",
-    "@zag-js/color-picker": "0.27.1",
-    "@zag-js/color-utils": "0.27.1",
-    "@zag-js/combobox": "0.27.1",
-    "@zag-js/core": "0.27.1",
-    "@zag-js/date-picker": "0.27.1",
-    "@zag-js/date-utils": "0.27.1",
-    "@zag-js/dialog": "0.27.1",
-    "@zag-js/editable": "0.27.1",
-    "@zag-js/hover-card": "0.27.1",
-    "@zag-js/menu": "0.27.1",
-    "@zag-js/number-input": "0.27.1",
-    "@zag-js/pagination": "0.27.1",
-    "@zag-js/pin-input": "0.27.1",
-    "@zag-js/popover": "0.27.1",
-    "@zag-js/presence": "0.27.1",
-    "@zag-js/radio-group": "0.27.1",
-    "@zag-js/rating-group": "0.27.1",
-    "@zag-js/react": "0.27.1",
-    "@zag-js/select": "0.27.1",
-    "@zag-js/slider": "0.27.1",
-    "@zag-js/splitter": "0.27.1",
-    "@zag-js/switch": "0.27.1",
-    "@zag-js/tabs": "0.27.1",
-    "@zag-js/tags-input": "0.27.1",
-    "@zag-js/toast": "0.27.1",
-    "@zag-js/toggle-group": "0.27.1",
-    "@zag-js/tooltip": "0.27.1",
-    "@zag-js/types": "0.27.1"
+    "@ark-ui/anatomy": "1.0.0",
+    "@zag-js/accordion": "0.28.0",
+    "@zag-js/avatar": "0.28.0",
+    "@zag-js/carousel": "0.28.0",
+    "@zag-js/checkbox": "0.28.0",
+    "@zag-js/color-picker": "0.28.0",
+    "@zag-js/color-utils": "0.28.0",
+    "@zag-js/combobox": "0.28.0",
+    "@zag-js/core": "0.28.0",
+    "@zag-js/date-picker": "0.28.0",
+    "@zag-js/date-utils": "0.28.0",
+    "@zag-js/dialog": "0.28.0",
+    "@zag-js/editable": "0.28.0",
+    "@zag-js/hover-card": "0.28.0",
+    "@zag-js/menu": "0.28.0",
+    "@zag-js/number-input": "0.28.0",
+    "@zag-js/pagination": "0.28.0",
+    "@zag-js/pin-input": "0.28.0",
+    "@zag-js/popover": "0.28.0",
+    "@zag-js/presence": "0.28.0",
+    "@zag-js/radio-group": "0.28.0",
+    "@zag-js/rating-group": "0.28.0",
+    "@zag-js/react": "0.28.0",
+    "@zag-js/select": "0.28.0",
+    "@zag-js/slider": "0.28.0",
+    "@zag-js/splitter": "0.28.0",
+    "@zag-js/switch": "0.28.0",
+    "@zag-js/tabs": "0.28.0",
+    "@zag-js/tags-input": "0.28.0",
+    "@zag-js/toast": "0.28.0",
+    "@zag-js/toggle-group": "0.28.0",
+    "@zag-js/tooltip": "0.28.0",
+    "@zag-js/types": "0.28.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.5.2",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addons": "7.5.2",
-    "@storybook/react": "7.5.2",
-    "@storybook/react-vite": "7.5.2",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addons": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-vite": "7.5.3",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "14.1.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.4",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
+    "@types/jsdom": "21.1.5",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.9.1",
-    "@typescript-eslint/parser": "6.9.1",
-    "@vitejs/plugin-react": "4.1.0",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
+    "@vitejs/plugin-react": "4.1.1",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
-    "lucide-react": "0.291.0",
+    "lucide-react": "0.292.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "release-it": "16.2.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.5.2",
+    "storybook": "7.5.3",
     "typescript": "5.2.2",
     "vite": "4.5.0",
     "vite-plugin-dts": "3.6.3",

package/pagination/pagination.d.ts

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
-export interface PaginationProps extends Assign<Assign<HTMLArkProps<'nav'>, UsePaginationProps>, {
-    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
-}> {
+export interface PaginationProps extends Assign<Assign<HTMLArkProps<'nav'>, {
+    children?: ReactNode | ((api: UsePaginationReturn) => ReactNode);
+}>, UsePaginationProps> {
 }
 export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;

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

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

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

package/popover/popover-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 popoverContext = require('./popover-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const PopoverPositioner = react.forwardRef(
   (props, ref) => {
     const api = popoverContext.usePopoverContext();
+    const presenceApi = presenceContext.usePresenceContext();
     const mergedProps = react$1.mergeProps(api.positionerProps, props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/popover/popover-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 { usePopoverContext } from './popover-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const PopoverPositioner = forwardRef(
   (props, ref) => {
     const api = usePopoverContext();
+    const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(api.positionerProps, props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

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

package/popover/popover.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 popoverContext = require('./popover-context.cjs');
 const usePopover = require('./use-popover.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const Popover = (props) => {
-  const { children, ...usePopoverProps } = props;
-  const api = usePopover.usePopover(usePopoverProps);
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
+  const api = usePopover.usePopover(localProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: api, children: view });
+  return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };
 
 exports.Popover = Popover;

package/popover/popover.d.ts

@@ -1,10 +1,8 @@
 import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
-import type { Assign } from '../types';
-import { type PopoverContext } from './popover-context';
-import { type UsePopoverProps } from './use-popover';
-export interface PopoverProps extends Assign<UsePopoverProps, {
-    children?: ReactNode | ((props: PopoverContext) => ReactNode);
-}> {
+import type { UsePresenceProps } from '../presence';
+import { type UsePopoverProps, type UsePopoverReturn } from './use-popover';
+export interface PopoverProps extends UsePopoverProps, UsePresenceProps {
+    children?: ReactNode | ((api: UsePopoverReturn) => ReactNode);
 }
 export declare const Popover: (props: PopoverProps) => JSX.Element;

package/popover/popover.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 { PopoverProvider } from './popover-context.mjs';
 import { usePopover } from './use-popover.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const Popover = (props) => {
-  const { children, ...usePopoverProps } = props;
-  const api = usePopover(usePopoverProps);
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
+  const api = usePopover(localProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(PopoverProvider, { value: api, children: view });
+  return /* @__PURE__ */ jsx(PopoverProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };
 
 export { Popover };

package/presence/index.cjs

@@ -4,11 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const presence = require('./presence.cjs');
+const presenceContext = require('./presence-context.cjs');
+const presencePropsContext = require('./presence-props-context.cjs');
 const splitPresenceProps = require('./split-presence-props.cjs');
+const usePresence = require('./use-presence.cjs');
 
 const Presence = Object.assign(presence.Presence, {
   Root: presence.Presence
 });
 
+exports.PresenceProvider = presenceContext.PresenceProvider;
+exports.usePresenceContext = presenceContext.usePresenceContext;
+exports.PresencePropsProvider = presencePropsContext.PresencePropsProvider;
+exports.usePresencePropsContext = presencePropsContext.usePresencePropsContext;
 exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
+exports.usePresence = usePresence.usePresence;
 exports.Presence = Presence;

package/presence/index.d.ts

@@ -1,9 +1,12 @@
-import { ReactElement, JSXElementConstructor } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type PresenceProps } from './presence';
+import { PresenceProvider, usePresenceContext, type PresenceContext } from './presence-context';
+import { PresencePropsProvider, usePresencePropsContext, type PresencePropsContext } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
-declare const Presence: ((props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined) & {
-    Root: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined;
+import { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
+declare const Presence: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>>;
 };
-export { Presence, splitPresenceProps };
-export type { PresenceProps };
+export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };
+export type { PresenceContext, PresenceProps, PresencePropsContext, UsePresenceProps, UsePresenceReturn, };

package/presence/index.mjs

@@ -1,6 +1,9 @@
 'use client';
 import { Presence as Presence$1 } from './presence.mjs';
+export { PresenceProvider, usePresenceContext } from './presence-context.mjs';
+export { PresencePropsProvider, usePresencePropsContext } from './presence-props-context.mjs';
 export { splitPresenceProps } from './split-presence-props.mjs';
+export { usePresence } from './use-presence.mjs';
 
 const Presence = Object.assign(Presence$1, {
   Root: Presence$1

package/presence/presence-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [PresenceProvider, usePresenceContext] = createContext.createContext({
+  name: "PresenceContext",
+  hookName: "usePresenceContext",
+  providerName: "<PresenceProvider />"
+});
+
+exports.PresenceProvider = PresenceProvider;
+exports.usePresenceContext = usePresenceContext;

package/presence/presence-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { UsePresenceReturn } from './use-presence';
+export interface PresenceContext extends UsePresenceReturn {
+}
+export declare const PresenceProvider: Provider<PresenceContext>, usePresenceContext: () => PresenceContext;