@ark-ui/solid 1.0.0-beta.3 → 1.0.1

package/source/dialog/dialog.jsx

@@ -1,9 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
+import { PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { DialogProvider } from './dialog-context';
 import { useDialog } from './use-dialog';
 export const Dialog = (props) => {
-    const [dialogParams, localProps] = createSplitProps()(props, [
+    const [presenceProps, dialogProps] = splitPresenceProps(props);
+    const [useDialogProps, localProps] = createSplitProps()(dialogProps, [
         'aria-label',
         'closeOnEscapeKeyDown',
         'closeOnInteractOutside',
@@ -25,7 +28,12 @@ export const Dialog = (props) => {
         'role',
         'trapFocus',
     ]);
-    const api = useDialog(dialogParams);
+    const api = useDialog(useDialogProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const getChildren = () => runIfFn(localProps.children, api);
-    return <DialogProvider value={api}>{getChildren()}</DialogProvider>;
+    return (<DialogProvider value={api}>
+      <PresencePropsProvider value={presenceProps}>
+        <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+      </PresencePropsProvider>
+    </DialogProvider>);
 };

package/source/editable/editable-area.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableArea = (props) => {
     const editable = useEditableContext();
-    const areaProps = mergeProps(() => editable().areaProps, props);
-    return <ark.div {...areaProps}/>;
+    const mergedProps = mergeProps(() => editable().areaProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/editable/editable-cancel-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableCancelTrigger = (props) => {
     const editable = useEditableContext();
-    const triggerProps = mergeProps(() => editable().cancelTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => editable().cancelTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-control.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableControl = (props) => {
     const editable = useEditableContext();
-    const controlProps = mergeProps(() => editable().controlProps, props);
-    return <ark.div {...controlProps}/>;
+    const mergedProps = mergeProps(() => editable().controlProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/editable/editable-edit-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableEditTrigger = (props) => {
     const editable = useEditableContext();
-    const triggerProps = mergeProps(() => editable().editTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => editable().editTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-input.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableInput = (props) => {
     const editable = useEditableContext();
-    const inputProps = mergeProps(() => editable().inputProps, props);
-    return <ark.input {...inputProps}/>;
+    const mergedProps = mergeProps(() => editable().inputProps, props);
+    return <ark.input {...mergedProps}/>;
 };

package/source/editable/editable-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableLabel = (props) => {
     const editable = useEditableContext();
-    const labelProps = mergeProps(() => editable().labelProps, props);
-    return <ark.label {...labelProps}/>;
+    const mergedProps = mergeProps(() => editable().labelProps, props);
+    return <ark.label {...mergedProps}/>;
 };

package/source/editable/editable-preview.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditablePreview = (props) => {
     const editable = useEditableContext();
-    const previewProps = mergeProps(() => editable().previewProps, props);
-    return <ark.span {...previewProps}/>;
+    const mergedProps = mergeProps(() => editable().previewProps, props);
+    return <ark.span {...mergedProps}/>;
 };

package/source/editable/editable-submit-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableSubmitTrigger = (props) => {
     const dialog = useEditableContext();
-    const triggerProps = mergeProps(() => dialog().submitTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => dialog().submitTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable.jsx

@@ -36,9 +36,9 @@ export const Editable = (props) => {
     ]);
     const editable = useEditable(useEditableProps);
     const [childrenProps, localProps] = splitProps(restProps, ['children']);
-    const rootProps = mergeProps(() => editable().rootProps, localProps);
+    const mergedProps = mergeProps(() => editable().rootProps, localProps);
     const getChildren = () => runIfFn(childrenProps.children, editable);
     return (<EditableProvider value={editable}>
-      <ark.div {...rootProps}>{getChildren()}</ark.div>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </EditableProvider>);
 };

package/source/hover-card/hover-card-arrow-tip.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useHoverCardContext } from './hover-card-context';
 export const HoverCardArrowTip = (props) => {
     const hoverCard = useHoverCardContext();
-    const tipProps = mergeProps(() => hoverCard().arrowTipProps, props);
-    return <ark.div {...tipProps}/>;
+    const mergedProps = mergeProps(() => hoverCard().arrowTipProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/hover-card/hover-card-arrow.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useHoverCardContext } from './hover-card-context';
 export const HoverCardArrow = (props) => {
     const hoverCard = useHoverCardContext();
-    const arrowProps = mergeProps(() => hoverCard().arrowProps, props);
-    return <ark.div {...arrowProps}/>;
+    const mergedProps = mergeProps(() => hoverCard().arrowProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/hover-card/hover-card-content.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { Presence, splitPresenceProps } from '../presence';
+import { usePresenceContext } from '../presence';
 import { useHoverCardContext } from './hover-card-context';
 export const HoverCardContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useHoverCardContext();
-    const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

package/source/hover-card/hover-card-positioner.jsx

@@ -1,8 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useHoverCardContext } from './hover-card-context';
 export const HoverCardPositioner = (props) => {
-    const hoverCard = useHoverCardContext();
-    const positionerProps = mergeProps(() => hoverCard().positionerProps, props);
-    return <ark.div {...positionerProps}/>;
+    const api = useHoverCardContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/hover-card/hover-card-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useHoverCardContext } from './hover-card-context';
 export const HoverCardTrigger = (props) => {
     const hoverCard = useHoverCardContext();
-    const triggerProps = mergeProps(() => hoverCard().triggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => hoverCard().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/hover-card/hover-card.jsx

@@ -1,9 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { HoverCardProvider } from './hover-card-context';
 import { useHoverCard } from './use-hover-card';
 export const HoverCard = (props) => {
-    const [hoverCardProps, localProps] = createSplitProps()(props, [
+    const [presenceProps, hoverCardProps] = splitPresenceProps(props);
+    const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, [
         'closeDelay',
         'dir',
         'getRootNode',
@@ -14,7 +17,10 @@ export const HoverCard = (props) => {
         'openDelay',
         'positioning',
     ]);
-    const api = useHoverCard(hoverCardProps);
+    const api = useHoverCard(useHoverCardProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const getChildren = () => runIfFn(localProps.children, api);
-    return <HoverCardProvider value={api}>{getChildren()}</HoverCardProvider>;
+    return (<HoverCardProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </HoverCardProvider>);
 };

package/source/menu/menu-arrow-tip.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useMenuContext } from './menu-context';
 export const MenuArrowTip = (props) => {
     const menu = useMenuContext();
-    const arrowTipProps = mergeProps(() => menu?.().arrowTipProps, props);
-    return <ark.div {...arrowTipProps}/>;
+    const mergedProps = mergeProps(() => menu?.().arrowTipProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/menu/menu-arrow.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useMenuContext } from './menu-context';
 export const MenuArrow = (props) => {
     const menu = useMenuContext();
-    const arrowProps = mergeProps(() => menu?.().arrowProps, props);
-    return <ark.div {...arrowProps}/>;
+    const mergedProps = mergeProps(() => menu?.().arrowProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/menu/menu-content.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { Presence, splitPresenceProps } from '../presence';
+import { usePresenceContext } from '../presence';
 import { useMenuContext } from './menu-context';
 export const MenuContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useMenuContext();
-    const mergedProps = mergeProps(() => api?.().contentProps, localProps);
-    return (<Presence present={api?.().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

package/source/menu/menu-context-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useMenuContext } from './menu-context';
 export const MenuContextTrigger = (props) => {
     const menu = useMenuContext();
-    const triggerProps = mergeProps(() => menu?.().contextTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => menu?.().contextTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/menu/menu-item-group.jsx

@@ -5,6 +5,6 @@ import { useMenuContext } from './menu-context';
 export const MenuItemGroup = (props) => {
     const menu = useMenuContext();
     const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
-    const groupProps = mergeProps(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
-    return <ark.div {...groupProps}/>;
+    const mergedProps = mergeProps(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/menu/menu-item.jsx

@@ -10,6 +10,6 @@ export const MenuItem = (props) => {
         'valueText',
         'closeOnSelect',
     ]);
-    const itemProps = mergeProps(() => menu?.().getItemProps(itemParams), restProps);
-    return <ark.div {...itemProps}/>;
+    const mergedProps = mergeProps(() => menu?.().getItemProps(itemParams), restProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/menu/menu-option-item.jsx

@@ -16,8 +16,8 @@ export const MenuOptionItem = (props) => {
         'value',
         'onCheckedChange',
     ]);
-    const itemProps = mergeProps(() => menu().getOptionItemProps(optionProps), localProps);
+    const mergedProps = mergeProps(() => menu().getOptionItemProps(optionProps), localProps);
     const itemState = createMemo(() => menu().getOptionItemState(optionProps));
     const getChildren = () => runIfFn(localProps.children, itemState);
-    return <ark.div {...itemProps}>{getChildren()}</ark.div>;
+    return <ark.div {...mergedProps}>{getChildren()}</ark.div>;
 };

package/source/menu/menu-positioner.jsx

@@ -1,8 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useMenuContext } from './menu-context';
 export const MenuPositioner = (props) => {
-    const menu = useMenuContext();
-    const positionerProps = mergeProps(() => menu?.().positionerProps, props);
-    return <ark.div {...positionerProps}/>;
+    const api = useMenuContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/menu/menu-separator.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useMenuContext } from './menu-context';
 export const MenuSeparator = (props) => {
     const menu = useMenuContext();
-    const separatorProps = mergeProps(() => menu?.().separatorProps, props);
-    return <ark.hr {...separatorProps}/>;
+    const mergedProps = mergeProps(() => menu?.().separatorProps, props);
+    return <ark.hr {...mergedProps}/>;
 };

package/source/menu/menu-trigger-item.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useMenuTriggerItemContext } from './menu-context';
 export const MenuTriggerItem = (props) => {
     const getTriggerItemProps = useMenuTriggerItemContext();
-    const triggerProps = mergeProps(() => getTriggerItemProps?.(), props);
-    return <ark.div {...triggerProps}/>;
+    const mergedProps = mergeProps(() => getTriggerItemProps?.(), props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/menu/menu-trigger.jsx

@@ -1,8 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useMenuContext } from './menu-context';
 export const MenuTrigger = (props) => {
-    const menu = useMenuContext();
-    const triggerProps = mergeProps(() => menu?.().triggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const api = useMenuContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
+    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
+    return <ark.button {...mergedProps}/>;
 };

package/source/menu/menu.jsx

@@ -1,10 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
 import { createEffect, createMemo } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { MenuMachineProvider, MenuProvider, MenuTriggerItemProvider, useMenuContext, useMenuMachineContext, } from './menu-context';
 import { useMenu } from './use-menu';
 export const Menu = (props) => {
-    const [menuParams, restProps] = createSplitProps()(props, [
+    const [presenceProps, menuProps] = splitPresenceProps(props);
+    const [useMenuProps, localProps] = createSplitProps()(menuProps, [
         'anchorPoint',
         'aria-label',
         'closeOnSelect',
@@ -20,32 +23,28 @@ export const Menu = (props) => {
         'onPointerDownOutside',
         'onSelect',
         'onValueChange',
+        'open',
         'positioning',
         'value',
     ]);
     const parentMenu = useMenuContext();
     const parentMachine = useMenuMachineContext();
-    const menu = useMenu(menuParams);
+    const menu = useMenu(useMenuProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: menu().api().isOpen })));
     createEffect(() => {
         if (!parentMachine)
             return;
         parentMenu?.().setChild(menu().machine);
         menu().api().setParent(parentMachine());
     });
-    createEffect(() => {
-        if (!restProps.isOpen)
-            return;
-        restProps.isOpen?.() ? menu().api().open() : menu().api().close();
-    });
     const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
     const machineContext = () => menu().machine;
-    const getChildren = () => runIfFn(restProps.children, () => ({
-        isOpen: menu?.().api().isOpen,
-        onClose: menu?.().api().close,
-    }));
+    const getChildren = () => runIfFn(localProps.children, menu().api);
     return (<MenuTriggerItemProvider value={triggerItemContext}>
       <MenuMachineProvider value={machineContext}>
-        <MenuProvider value={menu().api}>{getChildren()}</MenuProvider>
+        <MenuProvider value={menu().api}>
+          <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+        </MenuProvider>
       </MenuMachineProvider>
     </MenuTriggerItemProvider>);
 };

package/source/number-input/number-input-control.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useNumberInputContext } from './number-input-context';
 export const NumberInputControl = (props) => {
     const api = useNumberInputContext();
-    const controlProps = mergeProps(() => api().controlProps, props);
-    return <ark.div {...controlProps}/>;
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/number-input/number-input-decrement-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useNumberInputContext } from './number-input-context';
 export const NumberInputDecrementTrigger = (props) => {
     const api = useNumberInputContext();
-    const triggerProps = mergeProps(() => api().decrementTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().decrementTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/number-input/number-input-field.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useNumberInputContext } from './number-input-context';
 export const NumberInputInput = (props) => {
     const api = useNumberInputContext();
-    const inputProps = mergeProps(() => api().inputProps, props);
-    return <ark.input {...inputProps}/>;
+    const mergedProps = mergeProps(() => api().inputProps, props);
+    return <ark.input {...mergedProps}/>;
 };

package/source/number-input/number-input-increment-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useNumberInputContext } from './number-input-context';
 export const NumberInputIncrementTrigger = (props) => {
     const api = useNumberInputContext();
-    const triggerProps = mergeProps(() => api().incrementTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().incrementTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/number-input/number-input-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useNumberInputContext } from './number-input-context';
 export const NumberInputLabel = (props) => {
     const api = useNumberInputContext();
-    const labelProps = mergeProps(() => api().labelProps, props);
-    return <ark.label {...labelProps}/>;
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
 };

package/source/number-input/number-input-scrubber.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useNumberInputContext } from './number-input-context';
 export const NumberInputScrubber = (props) => {
     const api = useNumberInputContext();
-    const scrubberProps = mergeProps(() => api().scrubberProps, props);
-    return <ark.div {...scrubberProps}/>;
+    const mergedProps = mergeProps(() => api().scrubberProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/number-input/number-input.jsx

@@ -33,8 +33,8 @@ export const NumberInput = (props) => {
         'value',
     ]);
     const api = useNumberInput(useNumberInputProps);
-    const rootProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<NumberInputProvider value={api}>
-      <ark.div {...rootProps}/>
+      <ark.div {...mergedProps}/>
     </NumberInputProvider>);
 };

package/source/pagination/pagination.jsx

@@ -22,8 +22,8 @@ export const Pagination = (props) => {
     const [childrenProps, localProps] = splitProps(restProps, ['children']);
     const api = usePagination(paginationParams);
     const getChildren = () => runIfFn(childrenProps.children, api);
-    const rootProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<PaginationProvider value={api}>
-      <ark.nav {...rootProps}>{getChildren()}</ark.nav>
+      <ark.nav {...mergedProps}>{getChildren()}</ark.nav>
     </PaginationProvider>);
 };

package/source/pin-input/pin-input-field.jsx

@@ -5,6 +5,6 @@ import { usePinInputContext } from './pin-input-context';
 export const PinInputInput = (props) => {
     const [inputParams, localProps] = splitProps(props, ['index']);
     const api = usePinInputContext();
-    const inputProps = mergeProps(() => api().getInputProps(inputParams), localProps);
-    return <ark.input {...inputProps}/>;
+    const mergedProps = mergeProps(() => api().getInputProps(inputParams), localProps);
+    return <ark.input {...mergedProps}/>;
 };

package/source/pin-input/pin-input-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { usePinInputContext } from './pin-input-context';
 export const PinInputLabel = (props) => {
     const api = usePinInputContext();
-    const labelProps = mergeProps(() => api().labelProps, props);
-    return <ark.label {...labelProps}/>;
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
 };

package/source/popover/popover-anchor.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { usePopoverContext } from './popover-context';
 export const PopoverAnchor = (props) => {
     const api = usePopoverContext();
-    const anchorProps = mergeProps(() => api().anchorProps, props);
-    return <ark.div {...anchorProps}/>;
+    const mergedProps = mergeProps(() => api().anchorProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/popover/popover-arrow-tip.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { usePopoverContext } from './popover-context';
 export const PopoverArrowTip = (props) => {
     const popover = usePopoverContext();
-    const arrowTipProps = mergeProps(() => popover().arrowTipProps, props);
-    return <ark.div {...arrowTipProps}/>;
+    const mergedProps = mergeProps(() => popover().arrowTipProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/popover/popover-arrow.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { usePopoverContext } from './popover-context';
 export const PopoverArrow = (props) => {
     const popover = usePopoverContext();
-    const arrowProps = mergeProps(() => popover().arrowProps, props);
-    return <ark.div {...arrowProps}/>;
+    const mergedProps = mergeProps(() => popover().arrowProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/popover/popover-close-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { usePopoverContext } from './popover-context';
 export const PopoverCloseTrigger = (props) => {
     const api = usePopoverContext();
-    const triggerProps = mergeProps(() => api().closeTriggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().closeTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/popover/popover-content.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { Presence, splitPresenceProps } from '../presence';
+import { usePresenceContext } from '../presence';
 import { usePopoverContext } from './popover-context';
 export const PopoverContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = usePopoverContext();
-    const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

package/source/popover/popover-description.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { usePopoverContext } from './popover-context';
 export const PopoverDescription = (props) => {
     const api = usePopoverContext();
-    const descriptionProps = mergeProps(() => api().descriptionProps, props);
-    return <ark.div {...descriptionProps}/>;
+    const mergedProps = mergeProps(() => api().descriptionProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/popover/popover-positioner.jsx

@@ -1,8 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { usePopoverContext } from './popover-context';
 export const PopoverPositioner = (props) => {
     const api = usePopoverContext();
-    const positionerProps = mergeProps(() => api().positionerProps, props);
-    return <ark.div {...positionerProps}/>;
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };