@ark-ui/react 4.9.2 → 5.0.0

package/dist/components/pin-input/index.d.ts

@@ -1,9 +1,9 @@
 export type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails, } from '@zag-js/pin-input';
 export { PinInputContext, type PinInputContextProps } from './pin-input-context';
-export { PinInputControl, type PinInputControlBaseProps, type PinInputControlProps, } from './pin-input-control';
+export { PinInputControl, type PinInputControlBaseProps, type PinInputControlProps } from './pin-input-control';
 export { PinInputHiddenInput, type PinInputHiddenInputBaseProps, type PinInputHiddenInputProps, } from './pin-input-hidden-input';
-export { PinInputInput, type PinInputInputBaseProps, type PinInputInputProps, } from './pin-input-input';
-export { PinInputLabel, type PinInputLabelBaseProps, type PinInputLabelProps, } from './pin-input-label';
+export { PinInputInput, type PinInputInputBaseProps, type PinInputInputProps } from './pin-input-input';
+export { PinInputLabel, type PinInputLabelBaseProps, type PinInputLabelProps } from './pin-input-label';
 export { PinInputRoot, type PinInputRootBaseProps, type PinInputRootProps } from './pin-input-root';
 export { PinInputRootProvider, type PinInputRootProviderBaseProps, type PinInputRootProviderProps, } from './pin-input-root-provider';
 export { pinInputAnatomy } from './pin-input.anatomy';

package/dist/components/pin-input/pin-input-hidden-input.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 
-const PinInputHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const pinInput = usePinInputContext.usePinInputContext();
-    const mergedProps = react$1.mergeProps(pinInput.getHiddenInputProps(), props);
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const PinInputHiddenInput = react.forwardRef((props, ref) => {
+  const pinInput = usePinInputContext.usePinInputContext();
+  const mergedProps = react$1.mergeProps(pinInput.getHiddenInputProps(), props);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 PinInputHiddenInput.displayName = "PinInputHiddenInput";
 
 exports.PinInputHiddenInput = PinInputHiddenInput;

package/dist/components/pin-input/pin-input-hidden-input.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { usePinInputContext } from './use-pin-input-context.js';
 
-const PinInputHiddenInput = forwardRef(
-  (props, ref) => {
-    const pinInput = usePinInputContext();
-    const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const PinInputHiddenInput = forwardRef((props, ref) => {
+  const pinInput = usePinInputContext();
+  const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 PinInputHiddenInput.displayName = "PinInputHiddenInput";
 
 export { PinInputHiddenInput };

package/dist/components/pin-input/pin-input-root-provider.cjs

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 
-const PinInputRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: pinInput }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(pinInput.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(usePinInputContext.PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const PinInputRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: pinInput }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(pinInput.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(usePinInputContext.PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 PinInputRootProvider.displayName = "PinInputRootProvider";
 
 exports.PinInputRootProvider = PinInputRootProvider;

package/dist/components/pin-input/pin-input-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { PinInputProvider } from './use-pin-input-context.js';
 
-const PinInputRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: pinInput }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(pinInput.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const PinInputRootProvider = forwardRef((props, ref) => {
+  const [{ value: pinInput }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(pinInput.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 PinInputRootProvider.displayName = "PinInputRootProvider";
 
 export { PinInputRootProvider };

package/dist/components/pin-input/pin-input-root.cjs

@@ -15,6 +15,7 @@ const PinInputRoot = react.forwardRef((props, ref) => {
   const [usePinInputProps, localProps] = createSplitProps.createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
+    "count",
     "defaultValue",
     "disabled",
     "form",

package/dist/components/pin-input/pin-input-root.js

@@ -11,6 +11,7 @@ const PinInputRoot = forwardRef((props, ref) => {
   const [usePinInputProps, localProps] = createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
+    "count",
     "defaultValue",
     "disabled",
     "form",

package/dist/components/pin-input/pin-input.d.cts

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails, ValueInvalidDetails } from '@zag-js/pin-input';
-export { PinInputContext as Context, type PinInputContextProps as ContextProps, } from './pin-input-context';
+export { PinInputContext as Context, type PinInputContextProps as ContextProps } from './pin-input-context';
 export { PinInputControl as Control, type PinInputControlBaseProps as ControlBaseProps, type PinInputControlProps as ControlProps, } from './pin-input-control';
 export { PinInputHiddenInput as HiddenInput, type PinInputHiddenInputBaseProps as HiddenInputBaseProps, type PinInputHiddenInputProps as HiddenInputProps, } from './pin-input-hidden-input';
 export { PinInputInput as Input, type PinInputInputBaseProps as InputBaseProps, type PinInputInputProps as InputProps, } from './pin-input-input';

package/dist/components/pin-input/pin-input.d.ts

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails, ValueInvalidDetails } from '@zag-js/pin-input';
-export { PinInputContext as Context, type PinInputContextProps as ContextProps, } from './pin-input-context';
+export { PinInputContext as Context, type PinInputContextProps as ContextProps } from './pin-input-context';
 export { PinInputControl as Control, type PinInputControlBaseProps as ControlBaseProps, type PinInputControlProps as ControlProps, } from './pin-input-control';
 export { PinInputHiddenInput as HiddenInput, type PinInputHiddenInputBaseProps as HiddenInputBaseProps, type PinInputHiddenInputProps as HiddenInputProps, } from './pin-input-hidden-input';
 export { PinInputInput as Input, type PinInputInputBaseProps as InputBaseProps, type PinInputInputProps as InputProps, } from './pin-input-input';

package/dist/components/pin-input/use-pin-input.cjs

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -31,11 +30,12 @@ function _interopNamespaceDefault(e) {
 const pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 
 const usePinInput = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -46,18 +46,10 @@ const usePinInput = (props = {}) => {
     invalid: field?.invalid,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onValueComplete: useEvent.useEvent(props.onValueComplete),
-    onValueInvalid: useEvent.useEvent(props.onValueInvalid)
-  };
-  const [state, send] = react$1.useMachine(pinInput__namespace.machine(initialContext), { context });
-  return pinInput__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(pinInput__namespace.machine, machineProps);
+  return pinInput__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.usePinInput = usePinInput;

package/dist/components/pin-input/use-pin-input.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as pinInput from '@zag-js/pin-input';
-export interface UsePinInputProps extends Optional<Omit<pinInput.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the pin input when it is first rendered.
-     * Use when you do not need to control the state of the pin input
-     */
-    defaultValue?: pinInput.Context['value'];
+export interface UsePinInputProps extends Optional<Omit<pinInput.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePinInputReturn extends pinInput.Api<PropTypes> {
 }

package/dist/components/pin-input/use-pin-input.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as pinInput from '@zag-js/pin-input';
-export interface UsePinInputProps extends Optional<Omit<pinInput.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the pin input when it is first rendered.
-     * Use when you do not need to control the state of the pin input
-     */
-    defaultValue?: pinInput.Context['value'];
+export interface UsePinInputProps extends Optional<Omit<pinInput.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePinInputReturn extends pinInput.Api<PropTypes> {
 }

package/dist/components/pin-input/use-pin-input.js

@@ -4,15 +4,15 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 import { useFieldContext } from '../field/use-field-context.js';
 
 const usePinInput = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -23,18 +23,10 @@ const usePinInput = (props = {}) => {
     invalid: field?.invalid,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onValueComplete: useEvent(props.onValueComplete),
-    onValueInvalid: useEvent(props.onValueInvalid)
-  };
-  const [state, send] = useMachine(pinInput.machine(initialContext), { context });
-  return pinInput.connect(state, send, normalizeProps);
+  const service = useMachine(pinInput.machine, machineProps);
+  return pinInput.connect(service, normalizeProps);
 };
 
 export { usePinInput };

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

@@ -1,17 +1,17 @@
 export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
-export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps, } from './popover-anchor';
+export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor';
 export { PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow';
-export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps, } from './popover-arrow-tip';
+export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps } from './popover-arrow-tip';
 export { PopoverCloseTrigger, type PopoverCloseTriggerBaseProps, type PopoverCloseTriggerProps, } from './popover-close-trigger';
-export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps, } from './popover-content';
+export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps } from './popover-content';
 export { PopoverContext, type PopoverContextProps } from './popover-context';
 export { PopoverDescription, type PopoverDescriptionBaseProps, type PopoverDescriptionProps, } from './popover-description';
-export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps, } from './popover-indicator';
-export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps, } from './popover-positioner';
+export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps } from './popover-indicator';
+export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps } from './popover-positioner';
 export { PopoverRoot, type PopoverRootBaseProps, type PopoverRootProps } from './popover-root';
 export { PopoverRootProvider, type PopoverRootProviderBaseProps, type PopoverRootProviderProps, } from './popover-root-provider';
 export { PopoverTitle, type PopoverTitleBaseProps, type PopoverTitleProps } from './popover-title';
-export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps, } from './popover-trigger';
+export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps } from './popover-trigger';
 export { popoverAnatomy } from './popover.anatomy';
 export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
 export { usePopoverContext, type UsePopoverContext } from './use-popover-context';

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

@@ -1,17 +1,17 @@
 export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
-export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps, } from './popover-anchor';
+export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor';
 export { PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow';
-export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps, } from './popover-arrow-tip';
+export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps } from './popover-arrow-tip';
 export { PopoverCloseTrigger, type PopoverCloseTriggerBaseProps, type PopoverCloseTriggerProps, } from './popover-close-trigger';
-export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps, } from './popover-content';
+export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps } from './popover-content';
 export { PopoverContext, type PopoverContextProps } from './popover-context';
 export { PopoverDescription, type PopoverDescriptionBaseProps, type PopoverDescriptionProps, } from './popover-description';
-export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps, } from './popover-indicator';
-export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps, } from './popover-positioner';
+export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps } from './popover-indicator';
+export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps } from './popover-positioner';
 export { PopoverRoot, type PopoverRootBaseProps, type PopoverRootProps } from './popover-root';
 export { PopoverRootProvider, type PopoverRootProviderBaseProps, type PopoverRootProviderProps, } from './popover-root-provider';
 export { PopoverTitle, type PopoverTitleBaseProps, type PopoverTitleProps } from './popover-title';
-export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps, } from './popover-trigger';
+export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps } from './popover-trigger';
 export { popoverAnatomy } from './popover.anatomy';
 export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
 export { usePopoverContext, type UsePopoverContext } from './use-popover-context';

package/dist/components/popover/popover-close-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const usePopoverContext = require('./use-popover-context.cjs');
 
-const PopoverCloseTrigger = react.forwardRef(
-  (props, ref) => {
-    const popover = usePopoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(popover.getCloseTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const PopoverCloseTrigger = react.forwardRef((props, ref) => {
+  const popover = usePopoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(popover.getCloseTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 PopoverCloseTrigger.displayName = "PopoverCloseTrigger";
 
 exports.PopoverCloseTrigger = PopoverCloseTrigger;

package/dist/components/popover/popover-close-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { usePopoverContext } from './use-popover-context.js';
 
-const PopoverCloseTrigger = forwardRef(
-  (props, ref) => {
-    const popover = usePopoverContext();
-    const mergedProps = mergeProps(popover.getCloseTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const PopoverCloseTrigger = forwardRef((props, ref) => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps(popover.getCloseTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 PopoverCloseTrigger.displayName = "PopoverCloseTrigger";
 
 export { PopoverCloseTrigger };

package/dist/components/popover/popover-description.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const usePopoverContext = require('./use-popover-context.cjs');
 
-const PopoverDescription = react.forwardRef(
-  (props, ref) => {
-    const popover = usePopoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(popover.getDescriptionProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const PopoverDescription = react.forwardRef((props, ref) => {
+  const popover = usePopoverContext.usePopoverContext();
+  const mergedProps = react$1.mergeProps(popover.getDescriptionProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 PopoverDescription.displayName = "PopoverDescription";
 
 exports.PopoverDescription = PopoverDescription;

package/dist/components/popover/popover-description.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { usePopoverContext } from './use-popover-context.js';
 
-const PopoverDescription = forwardRef(
-  (props, ref) => {
-    const popover = usePopoverContext();
-    const mergedProps = mergeProps(popover.getDescriptionProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const PopoverDescription = forwardRef((props, ref) => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps(popover.getDescriptionProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 PopoverDescription.displayName = "PopoverDescription";
 
 export { PopoverDescription };

package/dist/components/popover/popover-positioner.cjs

@@ -10,17 +10,15 @@ const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const usePopoverContext = require('./use-popover-context.cjs');
 
-const PopoverPositioner = react.forwardRef(
-  (props, ref) => {
-    const popover = usePopoverContext.usePopoverContext();
-    const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(popover.getPositionerProps(), props);
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+const PopoverPositioner = react.forwardRef((props, ref) => {
+  const popover = usePopoverContext.usePopoverContext();
+  const presence = usePresenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(popover.getPositionerProps(), props);
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 PopoverPositioner.displayName = "PopoverPositioner";
 
 exports.PopoverPositioner = PopoverPositioner;

package/dist/components/popover/popover-positioner.js

@@ -6,17 +6,15 @@ import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { usePopoverContext } from './use-popover-context.js';
 
-const PopoverPositioner = forwardRef(
-  (props, ref) => {
-    const popover = usePopoverContext();
-    const presence = usePresenceContext();
-    const mergedProps = mergeProps(popover.getPositionerProps(), props);
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+const PopoverPositioner = forwardRef((props, ref) => {
+  const popover = usePopoverContext();
+  const presence = usePresenceContext();
+  const mergedProps = mergeProps(popover.getPositionerProps(), props);
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 PopoverPositioner.displayName = "PopoverPositioner";
 
 export { PopoverPositioner };

package/dist/components/popover/popover.d.cts

@@ -4,7 +4,7 @@ export { PopoverArrow as Arrow, type PopoverArrowBaseProps as ArrowBaseProps, ty
 export { PopoverArrowTip as ArrowTip, type PopoverArrowTipBaseProps as ArrowTipBaseProps, type PopoverArrowTipProps as ArrowTipProps, } from './popover-arrow-tip';
 export { PopoverCloseTrigger as CloseTrigger, type PopoverCloseTriggerBaseProps as CloseTriggerBaseProps, type PopoverCloseTriggerProps as CloseTriggerProps, } from './popover-close-trigger';
 export { PopoverContent as Content, type PopoverContentBaseProps as ContentBaseProps, type PopoverContentProps as ContentProps, } from './popover-content';
-export { PopoverContext as Context, type PopoverContextProps as ContextProps, } from './popover-context';
+export { PopoverContext as Context, type PopoverContextProps as ContextProps } from './popover-context';
 export { PopoverDescription as Description, type PopoverDescriptionBaseProps as DescriptionBaseProps, type PopoverDescriptionProps as DescriptionProps, } from './popover-description';
 export { PopoverIndicator as Indicator, type PopoverIndicatorBaseProps as IndicatorBaseProps, type PopoverIndicatorProps as IndicatorProps, } from './popover-indicator';
 export { PopoverPositioner as Positioner, type PopoverPositionerBaseProps as PositionerBaseProps, type PopoverPositionerProps as PositionerProps, } from './popover-positioner';

package/dist/components/popover/popover.d.ts

@@ -4,7 +4,7 @@ export { PopoverArrow as Arrow, type PopoverArrowBaseProps as ArrowBaseProps, ty
 export { PopoverArrowTip as ArrowTip, type PopoverArrowTipBaseProps as ArrowTipBaseProps, type PopoverArrowTipProps as ArrowTipProps, } from './popover-arrow-tip';
 export { PopoverCloseTrigger as CloseTrigger, type PopoverCloseTriggerBaseProps as CloseTriggerBaseProps, type PopoverCloseTriggerProps as CloseTriggerProps, } from './popover-close-trigger';
 export { PopoverContent as Content, type PopoverContentBaseProps as ContentBaseProps, type PopoverContentProps as ContentProps, } from './popover-content';
-export { PopoverContext as Context, type PopoverContextProps as ContextProps, } from './popover-context';
+export { PopoverContext as Context, type PopoverContextProps as ContextProps } from './popover-context';
 export { PopoverDescription as Description, type PopoverDescriptionBaseProps as DescriptionBaseProps, type PopoverDescriptionProps as DescriptionProps, } from './popover-description';
 export { PopoverIndicator as Indicator, type PopoverIndicatorBaseProps as IndicatorBaseProps, type PopoverIndicatorProps as IndicatorProps, } from './popover-indicator';
 export { PopoverPositioner as Positioner, type PopoverPositionerBaseProps as PositionerBaseProps, type PopoverPositionerProps as PositionerProps, } from './popover-positioner';

package/dist/components/popover/use-popover.cjs

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,23 +29,17 @@ function _interopNamespaceDefault(e) {
 const popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
 
 const usePopover = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(popover__namespace.machine(initialContext), { context });
-  return popover__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(popover__namespace.machine, machineProps);
+  return popover__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.usePopover = usePopover;

package/dist/components/popover/use-popover.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as popover from '@zag-js/popover';
-export interface UsePopoverProps extends Optional<Omit<popover.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the popover when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: popover.Context['open'];
+export interface UsePopoverProps extends Optional<Omit<popover.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePopoverReturn extends popover.Api<PropTypes> {
 }

package/dist/components/popover/use-popover.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as popover from '@zag-js/popover';
-export interface UsePopoverProps extends Optional<Omit<popover.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the popover when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: popover.Context['open'];
+export interface UsePopoverProps extends Optional<Omit<popover.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePopoverReturn extends popover.Api<PropTypes> {
 }

package/dist/components/popover/use-popover.js

@@ -4,26 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const usePopover = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = useMachine(popover.machine(initialContext), { context });
-  return popover.connect(state, send, normalizeProps);
+  const service = useMachine(popover.machine, machineProps);
+  return popover.connect(service, normalizeProps);
 };
 
 export { usePopover };

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

@@ -1,4 +1,4 @@
 export { Presence, type PresenceBaseProps, type PresenceProps } from './presence';
 export { splitPresenceProps } from './split-presence-props';
 export { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
-export { PresenceProvider, usePresenceContext, type UsePresenceContext, } from './use-presence-context';
+export { PresenceProvider, usePresenceContext, type UsePresenceContext } from './use-presence-context';

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

@@ -1,4 +1,4 @@
 export { Presence, type PresenceBaseProps, type PresenceProps } from './presence';
 export { splitPresenceProps } from './split-presence-props';
 export { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
-export { PresenceProvider, usePresenceContext, type UsePresenceContext, } from './use-presence-context';
+export { PresenceProvider, usePresenceContext, type UsePresenceContext } from './use-presence-context';

package/dist/components/presence/split-presence-props.cjs

@@ -5,12 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createSplitProps = require('../../utils/create-split-props.cjs');
 
-const splitPresenceProps = (props) => createSplitProps.createSplitProps()(props, [
-  "immediate",
-  "lazyMount",
-  "onExitComplete",
-  "present",
-  "unmountOnExit"
-]);
+const splitPresenceProps = (props) => createSplitProps.createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
 
 exports.splitPresenceProps = splitPresenceProps;

package/dist/components/presence/split-presence-props.js

@@ -1,12 +1,6 @@
 'use client';
 import { createSplitProps } from '../../utils/create-split-props.js';
 
-const splitPresenceProps = (props) => createSplitProps()(props, [
-  "immediate",
-  "lazyMount",
-  "onExitComplete",
-  "present",
-  "unmountOnExit"
-]);
+const splitPresenceProps = (props) => createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
 
 export { splitPresenceProps };