@ark-ui/react 3.0.2 → 3.2.0

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

@@ -4,10 +4,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const pinInputContext = require('./pin-input-context.cjs');
 const pinInputControl = require('./pin-input-control.cjs');
+const pinInputHiddenInput = require('./pin-input-hidden-input.cjs');
 const pinInputInput = require('./pin-input-input.cjs');
 const pinInputLabel = require('./pin-input-label.cjs');
 const pinInputRoot = require('./pin-input-root.cjs');
-const pinInputHiddenInput = require('./pin-input-hidden-input.cjs');
+const pinInputRootProvider = require('./pin-input-root-provider.cjs');
+const usePinInput = require('./use-pin-input.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 const pinInput = require('./pin-input.cjs');
 
@@ -15,9 +17,11 @@ const pinInput = require('./pin-input.cjs');
 
 exports.PinInputContext = pinInputContext.PinInputContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
+exports.PinInputHiddenInput = pinInputHiddenInput.PinInputHiddenInput;
 exports.PinInputInput = pinInputInput.PinInputInput;
 exports.PinInputLabel = pinInputLabel.PinInputLabel;
 exports.PinInputRoot = pinInputRoot.PinInputRoot;
-exports.PinInputHiddenInput = pinInputHiddenInput.PinInputHiddenInput;
+exports.PinInputRootProvider = pinInputRootProvider.PinInputRootProvider;
+exports.usePinInput = usePinInput.usePinInput;
 exports.usePinInputContext = usePinInputContext.usePinInputContext;
 exports.PinInput = pinInput;

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

@@ -1,9 +1,11 @@
 export type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails, } from '@zag-js/pin-input';
 export { PinInputContext, type PinInputContextProps } from './pin-input-context';
 export { PinInputControl, type PinInputControlProps } from './pin-input-control';
+export { PinInputHiddenInput, type PinInputHiddenInputProps } from './pin-input-hidden-input';
 export { PinInputInput, type PinInputInputProps } from './pin-input-input';
 export { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 export { PinInputRoot, type PinInputRootProps } from './pin-input-root';
-export { PinInputHiddenInput, type PinInputHiddenInputProps } from './pin-input-hidden-input';
-export { type UsePinInputContext, usePinInputContext } from './use-pin-input-context';
+export { PinInputRootProvider, type PinInputRootProviderProps } from './pin-input-root-provider';
+export { usePinInput, type UsePinInputProps, type UsePinInputReturn } from './use-pin-input';
+export { usePinInputContext, type UsePinInputContext } from './use-pin-input-context';
 export * as PinInput from './pin-input';

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

@@ -1,9 +1,11 @@
 export type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails, } from '@zag-js/pin-input';
 export { PinInputContext, type PinInputContextProps } from './pin-input-context';
 export { PinInputControl, type PinInputControlProps } from './pin-input-control';
+export { PinInputHiddenInput, type PinInputHiddenInputProps } from './pin-input-hidden-input';
 export { PinInputInput, type PinInputInputProps } from './pin-input-input';
 export { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 export { PinInputRoot, type PinInputRootProps } from './pin-input-root';
-export { PinInputHiddenInput, type PinInputHiddenInputProps } from './pin-input-hidden-input';
-export { type UsePinInputContext, usePinInputContext } from './use-pin-input-context';
+export { PinInputRootProvider, type PinInputRootProviderProps } from './pin-input-root-provider';
+export { usePinInput, type UsePinInputProps, type UsePinInputReturn } from './use-pin-input';
+export { usePinInputContext, type UsePinInputContext } from './use-pin-input-context';
 export * as PinInput from './pin-input';

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

@@ -1,9 +1,11 @@
 export { PinInputContext } from './pin-input-context.js';
 export { PinInputControl } from './pin-input-control.js';
+export { PinInputHiddenInput } from './pin-input-hidden-input.js';
 export { PinInputInput } from './pin-input-input.js';
 export { PinInputLabel } from './pin-input-label.js';
 export { PinInputRoot } from './pin-input-root.js';
-export { PinInputHiddenInput } from './pin-input-hidden-input.js';
+export { PinInputRootProvider } from './pin-input-root-provider.js';
+export { usePinInput } from './use-pin-input.js';
 export { usePinInputContext } from './use-pin-input-context.js';
 import * as pinInput from './pin-input.js';
 export { pinInput as PinInput };

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

@@ -11,7 +11,7 @@ const usePinInputContext = require('./use-pin-input-context.cjs');
 
 const PinInputControl = react.forwardRef((props, ref) => {
   const pinInput = usePinInputContext.usePinInputContext();
-  const mergedProps = react$1.mergeProps(pinInput.controlProps, props);
+  const mergedProps = react$1.mergeProps(pinInput.getControlProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 PinInputControl.displayName = "PinInputControl";

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

@@ -7,7 +7,7 @@ import { usePinInputContext } from './use-pin-input-context.js';
 
 const PinInputControl = forwardRef((props, ref) => {
   const pinInput = usePinInputContext();
-  const mergedProps = mergeProps(pinInput.controlProps, props);
+  const mergedProps = mergeProps(pinInput.getControlProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PinInputControl.displayName = "PinInputControl";

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

@@ -12,7 +12,7 @@ const usePinInputContext = require('./use-pin-input-context.cjs');
 const PinInputHiddenInput = react.forwardRef(
   (props, ref) => {
     const pinInput = usePinInputContext.usePinInputContext();
-    const mergedProps = react$1.mergeProps(pinInput.hiddenInputProps, props);
+    const mergedProps = react$1.mergeProps(pinInput.getHiddenInputProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { usePinInputContext } from './use-pin-input-context.js';
 const PinInputHiddenInput = forwardRef(
   (props, ref) => {
     const pinInput = usePinInputContext();
-    const mergedProps = mergeProps(pinInput.hiddenInputProps, props);
+    const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
     return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
   }
 );

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

@@ -11,7 +11,7 @@ const usePinInputContext = require('./use-pin-input-context.cjs');
 
 const PinInputLabel = react.forwardRef((props, ref) => {
   const pinInput = usePinInputContext.usePinInputContext();
-  const mergedProps = react$1.mergeProps(pinInput.labelProps, props);
+  const mergedProps = react$1.mergeProps(pinInput.getLabelProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
 PinInputLabel.displayName = "PinInputLabel";

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

@@ -7,7 +7,7 @@ import { usePinInputContext } from './use-pin-input-context.js';
 
 const PinInputLabel = forwardRef((props, ref) => {
   const pinInput = usePinInputContext();
-  const mergedProps = mergeProps(pinInput.labelProps, props);
+  const mergedProps = mergeProps(pinInput.getLabelProps(), props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 PinInputLabel.displayName = "PinInputLabel";

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+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 }) });
+  }
+);
+PinInputRootProvider.displayName = "PinInputRootProvider";
+
+exports.PinInputRootProvider = PinInputRootProvider;

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

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UsePinInputReturn } from './use-pin-input';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UsePinInputReturn;
+}
+export interface PinInputRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const PinInputRootProvider: ForwardRefExoticComponent<PinInputRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UsePinInputReturn } from './use-pin-input';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UsePinInputReturn;
+}
+export interface PinInputRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const PinInputRootProvider: ForwardRefExoticComponent<PinInputRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+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 }) });
+  }
+);
+PinInputRootProvider.displayName = "PinInputRootProvider";
+
+export { PinInputRootProvider };

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

@@ -35,7 +35,7 @@ const PinInputRoot = react.forwardRef((props, ref) => {
     "value"
   ]);
   const pinInput = usePinInput.usePinInput(usePinInputProps);
-  const mergedProps = react$1.mergeProps(pinInput.rootProps, localProps);
+  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 }) });
 });
 PinInputRoot.displayName = "PinInputRoot";

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

@@ -31,7 +31,7 @@ const PinInputRoot = forwardRef((props, ref) => {
     "value"
   ]);
   const pinInput = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps(pinInput.rootProps, localProps);
+  const mergedProps = mergeProps(pinInput.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 PinInputRoot.displayName = "PinInputRoot";

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

@@ -8,6 +8,7 @@ const pinInputHiddenInput = require('./pin-input-hidden-input.cjs');
 const pinInputInput = require('./pin-input-input.cjs');
 const pinInputLabel = require('./pin-input-label.cjs');
 const pinInputRoot = require('./pin-input-root.cjs');
+const pinInputRootProvider = require('./pin-input-root-provider.cjs');
 
 
 
@@ -17,3 +18,4 @@ exports.HiddenInput = pinInputHiddenInput.PinInputHiddenInput;
 exports.Input = pinInputInput.PinInputInput;
 exports.Label = pinInputLabel.PinInputLabel;
 exports.Root = pinInputRoot.PinInputRoot;
+exports.RootProvider = pinInputRootProvider.PinInputRootProvider;

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

@@ -5,3 +5,4 @@ export { PinInputHiddenInput as HiddenInput, type PinInputHiddenInputProps as Hi
 export { PinInputInput as Input, type PinInputInputProps as InputProps } from './pin-input-input';
 export { PinInputLabel as Label, type PinInputLabelProps as LabelProps } from './pin-input-label';
 export { PinInputRoot as Root, type PinInputRootProps as RootProps } from './pin-input-root';
+export { PinInputRootProvider as RootProvider, type PinInputRootProviderProps as RootProviderProps, } from './pin-input-root-provider';

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

@@ -5,3 +5,4 @@ export { PinInputHiddenInput as HiddenInput, type PinInputHiddenInputProps as Hi
 export { PinInputInput as Input, type PinInputInputProps as InputProps } from './pin-input-input';
 export { PinInputLabel as Label, type PinInputLabelProps as LabelProps } from './pin-input-label';
 export { PinInputRoot as Root, type PinInputRootProps as RootProps } from './pin-input-root';
+export { PinInputRootProvider as RootProvider, type PinInputRootProviderProps as RootProviderProps, } from './pin-input-root-provider';

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

@@ -4,3 +4,4 @@ export { PinInputHiddenInput as HiddenInput } from './pin-input-hidden-input.js'
 export { PinInputInput as Input } from './pin-input-input.js';
 export { PinInputLabel as Label } from './pin-input-label.js';
 export { PinInputRoot as Root } from './pin-input-root.js';
+export { PinInputRootProvider as RootProvider } from './pin-input-root-provider.js';

package/dist/components/popover/index.cjs

@@ -12,8 +12,10 @@ const popoverDescription = require('./popover-description.cjs');
 const popoverIndicator = require('./popover-indicator.cjs');
 const popoverPositioner = require('./popover-positioner.cjs');
 const popoverRoot = require('./popover-root.cjs');
+const popoverRootProvider = require('./popover-root-provider.cjs');
 const popoverTitle = require('./popover-title.cjs');
 const popoverTrigger = require('./popover-trigger.cjs');
+const usePopover = require('./use-popover.cjs');
 const usePopoverContext = require('./use-popover-context.cjs');
 const popover = require('./popover.cjs');
 
@@ -29,7 +31,9 @@ exports.PopoverDescription = popoverDescription.PopoverDescription;
 exports.PopoverIndicator = popoverIndicator.PopoverIndicator;
 exports.PopoverPositioner = popoverPositioner.PopoverPositioner;
 exports.PopoverRoot = popoverRoot.PopoverRoot;
+exports.PopoverRootProvider = popoverRootProvider.PopoverRootProvider;
 exports.PopoverTitle = popoverTitle.PopoverTitle;
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
+exports.usePopover = usePopover.usePopover;
 exports.usePopoverContext = usePopoverContext.usePopoverContext;
 exports.Popover = popover;

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

@@ -9,7 +9,9 @@ export { PopoverDescription, type PopoverDescriptionProps } from './popover-desc
 export { PopoverIndicator, type PopoverIndicatorProps } from './popover-indicator';
 export { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner';
 export { PopoverRoot, type PopoverRootProps } from './popover-root';
+export { PopoverRootProvider, type PopoverRootProviderProps } from './popover-root-provider';
 export { PopoverTitle, type PopoverTitleProps } from './popover-title';
 export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger';
-export { type UsePopoverContext, usePopoverContext } from './use-popover-context';
+export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
+export { usePopoverContext, type UsePopoverContext } from './use-popover-context';
 export * as Popover from './popover';

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

@@ -9,7 +9,9 @@ export { PopoverDescription, type PopoverDescriptionProps } from './popover-desc
 export { PopoverIndicator, type PopoverIndicatorProps } from './popover-indicator';
 export { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner';
 export { PopoverRoot, type PopoverRootProps } from './popover-root';
+export { PopoverRootProvider, type PopoverRootProviderProps } from './popover-root-provider';
 export { PopoverTitle, type PopoverTitleProps } from './popover-title';
 export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger';
-export { type UsePopoverContext, usePopoverContext } from './use-popover-context';
+export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
+export { usePopoverContext, type UsePopoverContext } from './use-popover-context';
 export * as Popover from './popover';

package/dist/components/popover/index.js

@@ -8,8 +8,10 @@ export { PopoverDescription } from './popover-description.js';
 export { PopoverIndicator } from './popover-indicator.js';
 export { PopoverPositioner } from './popover-positioner.js';
 export { PopoverRoot } from './popover-root.js';
+export { PopoverRootProvider } from './popover-root-provider.js';
 export { PopoverTitle } from './popover-title.js';
 export { PopoverTrigger } from './popover-trigger.js';
+export { usePopover } from './use-popover.js';
 export { usePopoverContext } from './use-popover-context.js';
 import * as popover from './popover.js';
 export { popover as Popover };

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

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

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

@@ -7,7 +7,7 @@ import { usePopoverContext } from './use-popover-context.js';
 
 const PopoverAnchor = forwardRef((props, ref) => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps(popover.anchorProps, props);
+  const mergedProps = mergeProps(popover.getAnchorProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverAnchor.displayName = "PopoverAnchor";

package/dist/components/popover/popover-arrow-tip.cjs

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

package/dist/components/popover/popover-arrow-tip.js

@@ -7,7 +7,7 @@ import { usePopoverContext } from './use-popover-context.js';
 
 const PopoverArrowTip = forwardRef((props, ref) => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps(popover.arrowTipProps, props);
+  const mergedProps = mergeProps(popover.getArrowTipProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverArrowTip.displayName = "PopoverArrowTip";

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

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

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

@@ -7,7 +7,7 @@ import { usePopoverContext } from './use-popover-context.js';
 
 const PopoverArrow = forwardRef((props, ref) => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps(popover.arrowProps, props);
+  const mergedProps = mergeProps(popover.getArrowProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverArrow.displayName = "PopoverArrow";

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

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

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

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

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

@@ -13,7 +13,7 @@ const usePopoverContext = require('./use-popover-context.cjs');
 const PopoverContent = react.forwardRef((props, ref) => {
   const popover = usePopoverContext.usePopoverContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(popover.contentProps, presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(popover.getContentProps(), presence.getPresenceProps(ref), props);
   if (presence.unmounted) {
     return null;
   }

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

@@ -9,7 +9,7 @@ import { usePopoverContext } from './use-popover-context.js';
 const PopoverContent = forwardRef((props, ref) => {
   const popover = usePopoverContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(popover.contentProps, presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(popover.getContentProps(), presence.getPresenceProps(ref), props);
   if (presence.unmounted) {
     return null;
   }

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

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

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

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

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

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

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

@@ -7,7 +7,7 @@ import { usePopoverContext } from './use-popover-context.js';
 
 const PopoverIndicator = forwardRef((props, ref) => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps(popover.indicatorProps, props);
+  const mergedProps = mergeProps(popover.getIndicatorProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverIndicator.displayName = "PopoverIndicator";

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

@@ -14,7 +14,7 @@ const PopoverPositioner = react.forwardRef(
   (props, ref) => {
     const popover = usePopoverContext.usePopoverContext();
     const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(popover.positionerProps, props);
+    const mergedProps = react$1.mergeProps(popover.getPositionerProps(), props);
     if (presence.unmounted) {
       return null;
     }

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

@@ -10,7 +10,7 @@ const PopoverPositioner = forwardRef(
   (props, ref) => {
     const popover = usePopoverContext();
     const presence = usePresenceContext();
-    const mergedProps = mergeProps(popover.positionerProps, props);
+    const mergedProps = mergeProps(popover.getPositionerProps(), props);
     if (presence.unmounted) {
       return null;
     }

package/dist/components/popover/popover-root-provider.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
+const usePopoverContext = require('./use-popover-context.cjs');
+
+const PopoverRootProvider = (props) => {
+  const [presenceProps, { value: popover, children }] = splitPresenceProps.splitPresenceProps(props);
+  const presence = usePresence.usePresence(react.mergeProps({ present: popover.open }, presenceProps));
+  return /* @__PURE__ */ jsxRuntime.jsx(usePopoverContext.PopoverProvider, { value: popover, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children }) });
+};
+
+exports.PopoverRootProvider = PopoverRootProvider;

package/dist/components/popover/popover-root-provider.d.cts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { UsePresenceProps } from '../presence';
+import { UsePopoverReturn } from './use-popover';
+
+interface RootProviderProps {
+    children?: ReactNode;
+    value: UsePopoverReturn;
+}
+export interface PopoverRootProviderProps extends RootProviderProps, UsePresenceProps {
+}
+export declare const PopoverRootProvider: (props: PopoverRootProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/popover/popover-root-provider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { UsePresenceProps } from '../presence';
+import { UsePopoverReturn } from './use-popover';
+
+interface RootProviderProps {
+    children?: ReactNode;
+    value: UsePopoverReturn;
+}
+export interface PopoverRootProviderProps extends RootProviderProps, UsePresenceProps {
+}
+export declare const PopoverRootProvider: (props: PopoverRootProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/popover/popover-root-provider.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { splitPresenceProps } from '../presence/split-presence-props.js';
+import { usePresence } from '../presence/use-presence.js';
+import { PresenceProvider } from '../presence/use-presence-context.js';
+import { PopoverProvider } from './use-popover-context.js';
+
+const PopoverRootProvider = (props) => {
+  const [presenceProps, { value: popover, children }] = splitPresenceProps(props);
+  const presence = usePresence(mergeProps({ present: popover.open }, presenceProps));
+  return /* @__PURE__ */ jsx(PopoverProvider, { value: popover, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children }) });
+};
+
+export { PopoverRootProvider };

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

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

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

@@ -7,7 +7,7 @@ import { usePopoverContext } from './use-popover-context.js';
 
 const PopoverTitle = forwardRef((props, ref) => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps(popover.titleProps, props);
+  const mergedProps = mergeProps(popover.getTitleProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PopoverTitle.displayName = "PopoverTitle";

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

@@ -15,8 +15,8 @@ const PopoverTrigger = react.forwardRef((props, ref) => {
   const presence = usePresenceContext.usePresenceContext();
   const mergedProps = react$1.mergeProps(
     {
-      ...popover.triggerProps,
-      "aria-controls": presence.unmounted ? void 0 : popover.triggerProps["aria-controls"]
+      ...popover.getTriggerProps(),
+      "aria-controls": presence.unmounted ? void 0 : popover.getTriggerProps()["aria-controls"]
     },
     props
   );

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

@@ -11,8 +11,8 @@ const PopoverTrigger = forwardRef((props, ref) => {
   const presence = usePresenceContext();
   const mergedProps = mergeProps(
     {
-      ...popover.triggerProps,
-      "aria-controls": presence.unmounted ? void 0 : popover.triggerProps["aria-controls"]
+      ...popover.getTriggerProps(),
+      "aria-controls": presence.unmounted ? void 0 : popover.getTriggerProps()["aria-controls"]
     },
     props
   );

package/dist/components/popover/popover.cjs

@@ -12,6 +12,7 @@ const popoverDescription = require('./popover-description.cjs');
 const popoverIndicator = require('./popover-indicator.cjs');
 const popoverPositioner = require('./popover-positioner.cjs');
 const popoverRoot = require('./popover-root.cjs');
+const popoverRootProvider = require('./popover-root-provider.cjs');
 const popoverTitle = require('./popover-title.cjs');
 const popoverTrigger = require('./popover-trigger.cjs');
 
@@ -27,5 +28,6 @@ exports.Description = popoverDescription.PopoverDescription;
 exports.Indicator = popoverIndicator.PopoverIndicator;
 exports.Positioner = popoverPositioner.PopoverPositioner;
 exports.Root = popoverRoot.PopoverRoot;
+exports.RootProvider = popoverRootProvider.PopoverRootProvider;
 exports.Title = popoverTitle.PopoverTitle;
 exports.Trigger = popoverTrigger.PopoverTrigger;

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

@@ -9,5 +9,6 @@ export { PopoverDescription as Description, type PopoverDescriptionProps as Desc
 export { PopoverIndicator as Indicator, type PopoverIndicatorProps as IndicatorProps, } from './popover-indicator';
 export { PopoverPositioner as Positioner, type PopoverPositionerProps as PositionerProps, } from './popover-positioner';
 export { PopoverRoot as Root, type PopoverRootProps as RootProps } from './popover-root';
+export { PopoverRootProvider as RootProvider, type PopoverRootProviderProps as RootProviderProps, } from './popover-root-provider';
 export { PopoverTitle as Title, type PopoverTitleProps as TitleProps } from './popover-title';
 export { PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps, } from './popover-trigger';