@ark-ui/solid 1.0.0-beta.2 → 1.0.0

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}>
+    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>);
 };

package/source/popover/popover-title.jsx

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

package/source/popover/popover-trigger.jsx

@@ -1,8 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { usePopoverContext } from './popover-context';
 export const PopoverTrigger = (props) => {
     const api = usePopoverContext();
-    const triggerProps = mergeProps(() => api().triggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    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/popover/popover.jsx

@@ -1,8 +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 { PopoverProvider } from './popover-context';
 import { usePopover } from './use-popover';
 export const Popover = (props) => {
-    const [usePopoverProps, restProps] = createSplitProps()(props, [
+    const [presenceProps, popoverProps] = splitPresenceProps(props);
+    const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
         'autoFocus',
         'closeOnEsc',
         'closeOnInteractOutside',
@@ -22,5 +26,9 @@ export const Popover = (props) => {
         'positioning',
     ]);
     const api = usePopover(usePopoverProps);
-    return <PopoverProvider value={api}>{restProps.children}</PopoverProvider>;
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<PopoverProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </PopoverProvider>);
 };

package/source/presence/index.js

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

package/source/presence/presence-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [PresenceProvider, usePresenceContext] = createContext({
+    hookName: 'usePresenceContext',
+    providerName: '<PresenceProvider />',
+});

package/source/presence/presence-props-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [PresencePropsProvider, usePresencePropsContext] = createContext({
+    hookName: 'usePresencePropsContext',
+    providerName: '<PresencePropsProvider />',
+});

package/source/presence/presence.jsx

@@ -1,32 +1,13 @@
-import { children, createEffect, createSignal } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { createSplitProps } from '../create-split-props';
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { splitPresenceProps } from './split-presence-props';
 import { usePresence } from './use-presence';
 export const Presence = (props) => {
-    const [presenceProps, localProps] = createSplitProps()(props, [
-        'onExitComplete',
-        'present',
-    ]);
+    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = usePresence(presenceProps);
-    const [wasEverPresent, setWasEverPresent] = createSignal(false);
-    const getChildren = children(() => props.children);
-    createEffect(() => {
-        const isPresent = api().isPresent;
-        if (isPresent)
-            setWasEverPresent(true);
-        const children = getChildren();
-        if (children instanceof HTMLElement) {
-            api().setNode(children);
-            spread(children, {
-                ['data-state']: presenceProps.present ? 'open' : 'closed',
-                hidden: !api().isPresent,
-            });
-        }
-    });
-    return (<>
-      {(!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
-            (localProps.unmountOnExit && !api().isPresent && wasEverPresent())
-            ? null
-            : getChildren()}
-    </>);
+    const mergedProps = mergeProps(() => api().presenceProps, localProps);
+    return (<Show when={!api().isUnmounted}>
+      <ark.div {...mergedProps} data-scope="presence" data-part="root"/>
+    </Show>);
 };

package/source/presence/use-presence.js

@@ -1,9 +1,26 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo } from 'solid-js';
+import { createEffect, createMemo, createSignal, splitProps } from 'solid-js';
 export const usePresence = (props) => {
-    const [state, send] = useMachine(presence.machine(props), {
-        context: props,
+    const [localProps, machineProps] = splitProps(props, ['lazyMount', 'unmountOnExit']);
+    const [wasEverPresent, setWasEverPresent] = createSignal(false);
+    const [state, send] = useMachine(presence.machine(machineProps), {
+        context: machineProps,
     });
-    return createMemo(() => presence.connect(state, send, normalizeProps));
+    const api = createMemo(() => presence.connect(state, send, normalizeProps));
+    createEffect(() => {
+        const isPresent = api().isPresent;
+        if (isPresent)
+            setWasEverPresent(true);
+    });
+    return createMemo(() => ({
+        isUnmounted: (!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
+            (localProps.unmountOnExit && !api().isPresent && wasEverPresent()),
+        isPresent: api().isPresent,
+        presenceProps: {
+            ref: api().setNode,
+            hidden: !api().isPresent,
+            'data-state': machineProps.present ? 'open' : 'closed',
+        },
+    }));
 };

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

@@ -1,15 +1,16 @@
 import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { useRatingGroupContext } from './rating-group-context';
 import { RatingGroupItemProvider } from './rating-group-item-context';
 export const RatingGroupItem = (props) => {
-    const [ratingParams, restProps] = createSplitProps()(props, ['index']);
+    const [itemProps, localProps] = createSplitProps()(props, ['index']);
     const api = useRatingGroupContext();
-    const itemState = api().getItemState(ratingParams);
-    const mergedProps = mergeProps(() => api().getItemProps(ratingParams), restProps);
-    const getChildren = () => runIfFn(restProps.children, itemState);
+    const itemState = createMemo(() => api().getItemState(itemProps));
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     return (<RatingGroupItemProvider value={itemState}>
       <ark.span {...mergedProps}>{getChildren()}</ark.span>
     </RatingGroupItemProvider>);

package/source/select/select-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 { useSelectContext } from './select-context';
 export const SelectContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

package/source/select/select-control.jsx

@@ -1,8 +1,16 @@
 import { mergeProps } from '@zag-js/solid';
+import { Index } from 'solid-js';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectControl = (props) => {
     const api = useSelectContext();
     const mergedProps = mergeProps(() => api().controlProps, props);
-    return <ark.div {...mergedProps}/>;
+    return (<>
+      <ark.div {...mergedProps}/>
+      <select {...api().hiddenSelectProps}>
+        <Index each={api().collection.toArray()}>
+          {(option) => <option value={option().value}>{option().label}</option>}
+        </Index>
+      </select>
+    </>);
 };

package/source/select/select-item-group-label.jsx

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectItemGroupLabel = (props) => {
-    const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+    const [labelProps, localProps] = createSplitProps()(props, ['for']);
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+    const mergedProps = mergeProps(() => api().getItemGroupLabelProps({ htmlFor: labelProps.for }), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/select/select-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 { useSelectContext } from './select-context';
 export const SelectPositioner = (props) => {
     const api = useSelectContext();
+    const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().positionerProps, props);
-    return <ark.div {...mergedProps}/>;
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/select/select.jsx

@@ -1,11 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { SelectProvider } from './select-context';
 import { useSelect } from './use-select';
 export const Select = (props) => {
-    const [selectProps, localProps] = createSplitProps()(props, [
+    const [presenceProps, selectProps] = splitPresenceProps(props);
+    const [useSelectProps, localProps] = createSplitProps()(selectProps, [
         'closeOnSelect',
         'dir',
         'disabled',
@@ -34,10 +36,13 @@ export const Select = (props) => {
         'selectOnBlur',
         'value',
     ]);
-    const api = useSelect(selectProps);
+    const api = useSelect(useSelectProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<SelectProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
     </SelectProvider>);
 };

package/source/slider/index.js

@@ -4,19 +4,19 @@ import { SliderControl } from './slider-control';
 import { SliderLabel } from './slider-label';
 import { SliderMarker } from './slider-marker';
 import { SliderMarkerGroup } from './slider-marker-group';
-import { SliderOutput } from './slider-output';
 import { SliderRange } from './slider-range';
 import { SliderThumb } from './slider-thumb';
 import { SliderTrack } from './slider-track';
+import { SliderValueText } from './slider-value-text';
 const Slider = Object.assign(SliderRoot, {
     Root: SliderRoot,
     Control: SliderControl,
     Label: SliderLabel,
     Marker: SliderMarker,
     MarkerGroup: SliderMarkerGroup,
-    Output: SliderOutput,
     Range: SliderRange,
     Thumb: SliderThumb,
     Track: SliderTrack,
+    ValueText: SliderValueText,
 });
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };

package/source/slider/slider-thumb.jsx

@@ -5,6 +5,6 @@ import { useSliderContext } from './slider-context';
 export const SliderThumb = (props) => {
     const [thumbProps, localProps] = createSplitProps()(props, ['index']);
     const api = useSliderContext();
-    const mergePdrops = mergeProps(() => api().getThumbProps(thumbProps), localProps);
-    return <ark.div {...mergePdrops}/>;
+    const mergedProps = mergeProps(() => api().getThumbProps(thumbProps), localProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/slider/slider-value-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { children } from 'solid-js';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderValueText = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().valueTextProps, props);
+    const getChildren = children(() => props.children);
+    return <ark.div {...mergedProps}>{getChildren() || api().value.join(',')}</ark.div>;
+};

package/source/splitter/splitter-panel.jsx

@@ -5,6 +5,6 @@ import { useSplitterContext } from './splitter-context';
 export const SplitterPanel = (props) => {
     const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
     const api = useSplitterContext();
-    const panelProps = mergeProps(() => api().getPanelProps(panelParams), restProps);
-    return <ark.div {...panelProps}/>;
+    const mergedProps = mergeProps(() => api().getPanelProps(panelParams), restProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/splitter/splitter-resize-trigger.jsx

@@ -9,6 +9,6 @@ export const SplitterResizeTrigger = (props) => {
         'id',
         'step',
     ]);
-    const triggerProps = mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+    return <ark.button {...mergedProps}/>;
 };

package/source/splitter/splitter.jsx

@@ -18,8 +18,8 @@ export const Splitter = (props) => {
     ]);
     const api = useSplitter(splitterParams);
     const getChildren = () => runIfFn(localProps.children, api);
-    const rootProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<SplitterProvider value={api}>
-      <ark.div {...rootProps}>{getChildren()}</ark.div>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </SplitterProvider>);
 };

package/source/switch/switch-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchLabel = (props) => {
     const checkbox = useSwitchContext();
-    const labelProps = mergeProps(() => checkbox().labelProps, props);
-    return <ark.span {...labelProps}/>;
+    const mergedProps = mergeProps(() => checkbox().labelProps, props);
+    return <ark.span {...mergedProps}/>;
 };

package/source/switch/switch-thumb.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchThumb = (props) => {
     const checkbox = useSwitchContext();
-    const thumbProps = mergeProps(() => checkbox().thumbProps, props);
-    return <ark.span {...thumbProps}/>;
+    const mergedProps = mergeProps(() => checkbox().thumbProps, props);
+    return <ark.span {...mergedProps}/>;
 };

package/source/tabs/tab-content.jsx

@@ -1,15 +1,18 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { splitPresenceProps } from '../presence';
-import { TabPresence } from './tab-presence';
+import { PresenceProvider, usePresence, usePresencePropsContext } from '../presence';
 import { useTabsContext } from './tabs-context';
 export const TabContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
-    const [getContentProps, restProps] = createSplitProps()(localProps, ['value']);
+    const [contentProps, localProps] = createSplitProps()(props, ['value']);
     const api = useTabsContext();
-    const contentProps = mergeProps(() => api().getContentProps(getContentProps), restProps);
-    return (<TabPresence {...presenceProps} {...getContentProps}>
-      <ark.div {...contentProps}/>
-    </TabPresence>);
+    const presenceProps = usePresencePropsContext();
+    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().value === contentProps.value })));
+    const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
+    return (<PresenceProvider value={presenceApi}>
+      <Show when={!presenceApi().isUnmounted}>
+        <ark.div {...mergedProps}/>
+      </Show>
+    </PresenceProvider>);
 };

package/source/tabs/tab-indicator.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTabsContext } from './tabs-context';
 export const TabIndicator = (props) => {
     const api = useTabsContext();
-    const indicatorProps = mergeProps(() => api().indicatorProps, props);
-    return <ark.div {...indicatorProps}/>;
+    const mergedProps = mergeProps(() => api().indicatorProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/tabs/tab-list.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTabsContext } from './tabs-context';
 export const TabList = (props) => {
     const api = useTabsContext();
-    const tablistProps = mergeProps(() => api().tablistProps, props);
-    return <ark.div {...tablistProps}/>;
+    const mergedProps = mergeProps(() => api().tablistProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/tabs/tab-trigger.jsx

@@ -5,6 +5,6 @@ import { useTabsContext } from './tabs-context';
 export const TabTrigger = (props) => {
     const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
     const api = useTabsContext();
-    const triggerProps = mergeProps(() => api().getTriggerProps(tabParams), restProps);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().getTriggerProps(tabParams), restProps);
+    return <ark.button {...mergedProps}/>;
 };

package/source/tabs/tabs.jsx

@@ -1,10 +1,12 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { PresencePropsProvider, splitPresenceProps } from '../presence';
 import { TabsProvider } from './tabs-context';
 import { useTabs } from './use-tabs';
 export const Tabs = (props) => {
-    const [tabsParams, restProps] = createSplitProps()(props, [
+    const [presenceProps, tabsProps] = splitPresenceProps(props);
+    const [tabsParams, restProps] = createSplitProps()(tabsProps, [
         'activationMode',
         'dir',
         'getRootNode',
@@ -18,8 +20,10 @@ export const Tabs = (props) => {
         'value',
     ]);
     const api = useTabs(tabsParams);
-    const rootProps = mergeProps(() => api().rootProps, restProps);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
     return (<TabsProvider value={api}>
-      <ark.div {...rootProps}/>
+      <PresencePropsProvider value={presenceProps}>
+        <ark.div {...mergedProps}/>
+      </PresencePropsProvider>
     </TabsProvider>);
 };

package/source/toggle-group/toggle-group.jsx

@@ -18,8 +18,8 @@ export const ToggleGroup = (props) => {
         'value',
     ]);
     const api = useToggleGroup(groupParams);
-    const rootProps = mergeProps(() => api().rootProps, restProps);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
     return (<ToggleGroupProvider value={api}>
-      <ark.div {...rootProps}/>
+      <ark.div {...mergedProps}/>
     </ToggleGroupProvider>);
 };

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

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

package/source/tooltip/tooltip-arrow.jsx

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

package/source/tooltip/tooltip-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 { useTooltipContext } from './tooltip-context';
 export const TooltipContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useTooltipContext();
-    const contentProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
-      <ark.div {...contentProps}/>
-    </Presence>);
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/tooltip/tooltip-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 { useTooltipContext } from './tooltip-context';
 export const TooltipPositioner = (props) => {
     const api = useTooltipContext();
-    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>);
 };

package/source/tooltip/tooltip-trigger.jsx

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

package/source/tooltip/tooltip.jsx

@@ -1,8 +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 { TooltipProvider } from './tooltip-context';
 import { useTooltip } from './use-tooltip';
 export const Tooltip = (props) => {
-    const [useTooltipProps, restProps] = createSplitProps()(props, [
+    const [presenceProps, tooltipProps] = splitPresenceProps(props);
+    const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, [
         'aria-label',
         'closeDelay',
         'closeOnEsc',
@@ -19,5 +23,9 @@ export const Tooltip = (props) => {
         'positioning',
     ]);
     const api = useTooltip(useTooltipProps);
-    return <TooltipProvider value={api} {...restProps}/>;
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<TooltipProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </TooltipProvider>);
 };