@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/popover/popover-anchor.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverAnchorProps = HTMLArkProps<'div'>;
-export declare const PopoverAnchor: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface PopoverAnchorProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverAnchor: ForwardRefExoticComponent<PopoverAnchorProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-anchor.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverAnchor = forwardRef((props, ref) => {
-  const { anchorProps } = usePopoverContext();
-  const mergedProps = mergeProps(anchorProps, props);
+  const api = usePopoverContext();
+  const mergedProps = mergeProps(api.anchorProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverAnchor.displayName = "PopoverAnchor";

package/popover/popover-arrow-tip.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const popoverContext = require('./popover-context.cjs');
 
 const PopoverArrowTip = react.forwardRef((props, ref) => {
-  const { arrowTipProps } = popoverContext.usePopoverContext();
-  const mergedProps = react$1.mergeProps(arrowTipProps, props);
+  const api = popoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(api.arrowTipProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 PopoverArrowTip.displayName = "PopoverArrowTip";

package/popover/popover-arrow-tip.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverArrowTipProps = HTMLArkProps<'div'>;
-export declare const PopoverArrowTip: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface PopoverArrowTipProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverArrowTip: ForwardRefExoticComponent<PopoverArrowTipProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-arrow-tip.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverArrowTip = forwardRef((props, ref) => {
-  const { arrowTipProps } = usePopoverContext();
-  const mergedProps = mergeProps(arrowTipProps, props);
+  const api = usePopoverContext();
+  const mergedProps = mergeProps(api.arrowTipProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverArrowTip.displayName = "PopoverArrowTip";

package/popover/popover-arrow.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const popoverContext = require('./popover-context.cjs');
 
 const PopoverArrow = react.forwardRef((props, ref) => {
-  const { arrowProps } = popoverContext.usePopoverContext();
-  const mergedProps = react$1.mergeProps(arrowProps, props);
+  const api = popoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(api.arrowProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 PopoverArrow.displayName = "PopoverArrow";

package/popover/popover-arrow.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverArrowProps = HTMLArkProps<'div'>;
-export declare const PopoverArrow: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface PopoverArrowProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverArrow: ForwardRefExoticComponent<PopoverArrowProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-arrow.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverArrow = forwardRef((props, ref) => {
-  const { arrowProps } = usePopoverContext();
-  const mergedProps = mergeProps(arrowProps, props);
+  const api = usePopoverContext();
+  const mergedProps = mergeProps(api.arrowProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverArrow.displayName = "PopoverArrow";

package/popover/popover-close-trigger.cjs

@@ -11,8 +11,8 @@ const popoverContext = require('./popover-context.cjs');
 
 const PopoverCloseTrigger = react.forwardRef(
   (props, ref) => {
-    const { closeTriggerProps } = popoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(closeTriggerProps, props);
+    const api = popoverContext.usePopoverContext();
+    const mergedProps = react$1.mergeProps(api.closeTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/popover/popover-close-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverCloseTriggerProps = HTMLArkProps<'button'>;
-export declare const PopoverCloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface PopoverCloseTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const PopoverCloseTrigger: ForwardRefExoticComponent<PopoverCloseTriggerProps & RefAttributes<HTMLButtonElement>>;

package/popover/popover-close-trigger.mjs

@@ -7,8 +7,8 @@ import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverCloseTrigger = forwardRef(
   (props, ref) => {
-    const { closeTriggerProps } = usePopoverContext();
-    const mergedProps = mergeProps(closeTriggerProps, props);
+    const api = usePopoverContext();
+    const mergedProps = mergeProps(api.closeTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/popover/popover-content.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export type PopoverContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
-export declare const PopoverContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+}
+export declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePopoverReturn } from './use-popover';
-export type PopoverContext = UsePopoverReturn;
-export declare const PopoverProvider: Provider<UsePopoverReturn>, usePopoverContext: () => UsePopoverReturn;
+export interface PopoverContext extends UsePopoverReturn {
+}
+export declare const PopoverProvider: Provider<PopoverContext>, usePopoverContext: () => PopoverContext;

package/popover/popover-description.cjs

@@ -11,8 +11,8 @@ const popoverContext = require('./popover-context.cjs');
 
 const PopoverDescription = react.forwardRef(
   (props, ref) => {
-    const { descriptionProps } = popoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(descriptionProps, props);
+    const api = popoverContext.usePopoverContext();
+    const mergedProps = react$1.mergeProps(api.descriptionProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
   }
 );

package/popover/popover-description.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverDescriptionProps = HTMLArkProps<'div'>;
-export declare const PopoverDescription: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLParagraphElement>>;
+export interface PopoverDescriptionProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLParagraphElement>>;

package/popover/popover-description.mjs

@@ -7,8 +7,8 @@ import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverDescription = forwardRef(
   (props, ref) => {
-    const { descriptionProps } = usePopoverContext();
-    const mergedProps = mergeProps(descriptionProps, props);
+    const api = usePopoverContext();
+    const mergedProps = mergeProps(api.descriptionProps, props);
     return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
   }
 );

package/{range-slider/range-slider-range.cjs → popover/popover-indicator.cjs}

@@ -7,13 +7,13 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const rangeSliderContext = require('./range-slider-context.cjs');
+const popoverContext = require('./popover-context.cjs');
 
-const RangeSliderRange = react.forwardRef((props, ref) => {
-  const { rangeProps } = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react$1.mergeProps(rangeProps, props);
+const PopoverIndicator = react.forwardRef((props, ref) => {
+  const api = popoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(api.indicatorProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
-RangeSliderRange.displayName = "RangeSliderRange";
+PopoverIndicator.displayName = "PopoverIndicator";
 
-exports.RangeSliderRange = RangeSliderRange;
+exports.PopoverIndicator = PopoverIndicator;

package/popover/popover-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface PopoverIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverIndicator: ForwardRefExoticComponent<PopoverIndicatorProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-indicator.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { usePopoverContext } from './popover-context.mjs';
+
+const PopoverIndicator = forwardRef((props, ref) => {
+  const api = usePopoverContext();
+  const mergedProps = mergeProps(api.indicatorProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+PopoverIndicator.displayName = "PopoverIndicator";
+
+export { PopoverIndicator };

package/popover/popover-positioner.cjs

@@ -11,8 +11,8 @@ const popoverContext = require('./popover-context.cjs');
 
 const PopoverPositioner = react.forwardRef(
   (props, ref) => {
-    const { positionerProps } = popoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(positionerProps, props);
+    const api = popoverContext.usePopoverContext();
+    const mergedProps = react$1.mergeProps(api.positionerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/popover/popover-positioner.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverPositionerProps = HTMLArkProps<'div'>;
-export declare const PopoverPositioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface PopoverPositionerProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverPositioner: ForwardRefExoticComponent<PopoverPositionerProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-positioner.mjs

@@ -7,8 +7,8 @@ import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverPositioner = forwardRef(
   (props, ref) => {
-    const { positionerProps } = usePopoverContext();
-    const mergedProps = mergeProps(positionerProps, props);
+    const api = usePopoverContext();
+    const mergedProps = mergeProps(api.positionerProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/popover/popover-title.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const popoverContext = require('./popover-context.cjs');
 
 const PopoverTitle = react.forwardRef((props, ref) => {
-  const { titleProps } = popoverContext.usePopoverContext();
-  const mergedProps = react$1.mergeProps(titleProps, props);
+  const api = popoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(api.titleProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 PopoverTitle.displayName = "PopoverTitle";

package/popover/popover-title.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverTitleProps = HTMLArkProps<'div'>;
-export declare const PopoverTitle: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends HTMLArkProps<'div'> {
+}
+export declare const PopoverTitle: ForwardRefExoticComponent<PopoverTitleProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-title.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverTitle = forwardRef((props, ref) => {
-  const { titleProps } = usePopoverContext();
-  const mergedProps = mergeProps(titleProps, props);
+  const api = usePopoverContext();
+  const mergedProps = mergeProps(api.titleProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverTitle.displayName = "PopoverTitle";

package/popover/popover-trigger.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const popoverContext = require('./popover-context.cjs');
 
 const PopoverTrigger = react.forwardRef((props, ref) => {
-  const { triggerProps } = popoverContext.usePopoverContext();
-  const mergedProps = react$1.mergeProps(triggerProps, props);
+  const api = popoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(api.triggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 PopoverTrigger.displayName = "PopoverTrigger";

package/popover/popover-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type PopoverTriggerProps = HTMLArkProps<'button'>;
-export declare const PopoverTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface PopoverTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const PopoverTrigger: ForwardRefExoticComponent<PopoverTriggerProps & RefAttributes<HTMLButtonElement>>;

package/popover/popover-trigger.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { usePopoverContext } from './popover-context.mjs';
 
 const PopoverTrigger = forwardRef((props, ref) => {
-  const { triggerProps } = usePopoverContext();
-  const mergedProps = mergeProps(triggerProps, props);
+  const api = usePopoverContext();
+  const mergedProps = mergeProps(api.triggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 PopoverTrigger.displayName = "PopoverTrigger";

package/popover/popover.cjs

@@ -11,9 +11,9 @@ const usePopover = require('./use-popover.cjs');
 
 const Popover = (props) => {
   const { children, ...usePopoverProps } = props;
-  const popover = usePopover.usePopover(usePopoverProps);
-  const view = runIfFn.runIfFn(children, popover);
-  return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: popover, children: view });
+  const api = usePopover.usePopover(usePopoverProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: api, children: view });
 };
 
 exports.Popover = Popover;

package/popover/popover.d.ts

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

package/popover/popover.mjs

@@ -7,9 +7,9 @@ import { usePopover } from './use-popover.mjs';
 
 const Popover = (props) => {
   const { children, ...usePopoverProps } = props;
-  const popover = usePopover(usePopoverProps);
-  const view = runIfFn(children, popover);
-  return /* @__PURE__ */ jsx(PopoverProvider, { value: popover, children: view });
+  const api = usePopover(usePopoverProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(PopoverProvider, { value: api, children: view });
 };
 
 export { Popover };

package/popover/use-popover.cjs

@@ -7,6 +7,7 @@ const popover = require('@zag-js/popover');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -28,12 +29,17 @@ function _interopNamespaceDefault(e) {
 
 const popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
 
-const usePopover = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
-  const context = {
+const usePopover = (props = {}) => {
+  const initialContext = {
     id: react.useId(),
-    getRootNode,
-    ...props
+    getRootNode: environmentContext.useEnvironmentContext(),
+    ...props,
+    open: props.defaultOpen ?? props.open
+  };
+  const context = {
+    ...initialContext,
+    open: props.open,
+    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(popover__namespace.machine(context), { context });
   return popover__namespace.connect(state, send, react$1.normalizeProps);

package/popover/use-popover.d.ts

@@ -1,6 +1,12 @@
 import * as popover from '@zag-js/popover';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UsePopoverProps extends Optional<popover.Context, 'id'> {
+    /**
+     * The initial open state of the popover.
+     */
+    defaultOpen?: popover.Context['open'];
 }
-export type UsePopoverReturn = popover.Api;
-export declare const usePopover: (props: UsePopoverProps) => UsePopoverReturn;
+export interface UsePopoverReturn extends popover.Api<PropTypes> {
+}
+export declare const usePopover: (props?: UsePopoverProps) => UsePopoverReturn;

package/popover/use-popover.mjs

@@ -3,14 +3,20 @@ import * as popover from '@zag-js/popover';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
-const usePopover = (props) => {
-  const getRootNode = useEnvironmentContext();
-  const context = {
+const usePopover = (props = {}) => {
+  const initialContext = {
     id: useId(),
-    getRootNode,
-    ...props
+    getRootNode: useEnvironmentContext(),
+    ...props,
+    open: props.defaultOpen ?? props.open
+  };
+  const context = {
+    ...initialContext,
+    open: props.open,
+    onOpenChange: useEvent(props.onOpenChange, { sync: true })
   };
   const [state, send] = useMachine(popover.machine(context), { context });
   return popover.connect(state, send, normalizeProps);

package/portal.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const reactDom = require('react-dom');
+require('./environment/index.cjs');
+const environmentContext = require('./environment/environment-context.cjs');
+
+const isServer = typeof window === "undefined";
+const Portal = (props) => {
+  const { children, container, disabled } = props;
+  const getRootNode = environmentContext.useEnvironmentContext();
+  if (isServer || disabled)
+    return children;
+  const doc = getRootNode?.().ownerDocument ?? document;
+  const mountNode = container?.current ?? doc.body;
+  return react.Children.map(children, (child) => reactDom.createPortal(child, mountNode));
+};
+
+exports.Portal = Portal;

package/portal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode, type PropsWithChildren, type RefObject } from 'react';
+export interface PortalProps {
+    disabled?: boolean;
+    container?: RefObject<HTMLElement>;
+}
+export declare const Portal: (props: PropsWithChildren<PortalProps>) => ReactNode;

package/portal.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { Children } from 'react';
+import { createPortal } from 'react-dom';
+import './environment/index.mjs';
+import { useEnvironmentContext } from './environment/environment-context.mjs';
+
+const isServer = typeof window === "undefined";
+const Portal = (props) => {
+  const { children, container, disabled } = props;
+  const getRootNode = useEnvironmentContext();
+  if (isServer || disabled)
+    return children;
+  const doc = getRootNode?.().ownerDocument ?? document;
+  const mountNode = container?.current ?? doc.body;
+  return Children.map(children, (child) => createPortal(child, mountNode));
+};
+
+export { Portal };

package/presence/presence.d.ts

@@ -6,11 +6,13 @@ export interface PresenceProps extends UsePresenceProps {
      */
     children: ReactElement;
     /**
-     * Whether to enable lazy mounting. Defaults to `false`.
+     * Whether to enable lazy mounting
+     * @default false
      */
     lazyMount?: boolean;
     /**
-     * Whether to unmount on exit. Defaults to `false`.
+     * Whether to unmount on exit.
+     * @default false
      */
     unmountOnExit?: boolean;
 }

package/presence/presence.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Presence } from './presence';
+import { Presence } from './';
 type PresenceType = typeof Presence;
 declare const meta: Meta<PresenceType>;
 export default meta;

package/presence/use-presence.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const presence = require('@zag-js/presence');
 const react = require('@zag-js/react');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,9 +27,11 @@ function _interopNamespaceDefault(e) {
 const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 
 const usePresence = (props) => {
-  const [state, send] = react.useMachine(presence__namespace.machine(props), {
-    context: props
-  });
+  const context = {
+    ...props,
+    onExitComplete: useEvent.useEvent(props.onExitComplete)
+  };
+  const [state, send] = react.useMachine(presence__namespace.machine(context), { context });
   return presence__namespace.connect(state, send, react.normalizeProps);
 };
 

package/presence/use-presence.mjs

@@ -1,11 +1,14 @@
 'use client';
 import * as presence from '@zag-js/presence';
 import { useMachine, normalizeProps } from '@zag-js/react';
+import { useEvent } from '../use-event.mjs';
 
 const usePresence = (props) => {
-  const [state, send] = useMachine(presence.machine(props), {
-    context: props
-  });
+  const context = {
+    ...props,
+    onExitComplete: useEvent(props.onExitComplete)
+  };
+  const [state, send] = useMachine(presence.machine(context), { context });
   return presence.connect(state, send, normalizeProps);
 };