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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.1",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -79,64 +79,64 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0-beta.1",
-    "@zag-js/accordion": "0.27.1",
-    "@zag-js/anatomy": "0.27.1",
-    "@zag-js/avatar": "0.27.1",
-    "@zag-js/carousel": "0.27.1",
-    "@zag-js/checkbox": "0.27.1",
-    "@zag-js/color-picker": "0.27.1",
-    "@zag-js/combobox": "0.27.1",
-    "@zag-js/date-picker": "0.27.1",
-    "@zag-js/dialog": "0.27.1",
-    "@zag-js/editable": "0.27.1",
-    "@zag-js/hover-card": "0.27.1",
-    "@zag-js/menu": "0.27.1",
-    "@zag-js/number-input": "0.27.1",
-    "@zag-js/pagination": "0.27.1",
-    "@zag-js/pin-input": "0.27.1",
-    "@zag-js/popover": "0.27.1",
-    "@zag-js/presence": "0.27.1",
-    "@zag-js/radio-group": "0.27.1",
-    "@zag-js/rating-group": "0.27.1",
-    "@zag-js/select": "0.27.1",
-    "@zag-js/slider": "0.27.1",
-    "@zag-js/solid": "0.27.1",
-    "@zag-js/splitter": "0.27.1",
-    "@zag-js/switch": "0.27.1",
-    "@zag-js/tabs": "0.27.1",
-    "@zag-js/tags-input": "0.27.1",
-    "@zag-js/toast": "0.27.1",
-    "@zag-js/toggle-group": "0.27.1",
-    "@zag-js/tooltip": "0.27.1",
-    "@zag-js/types": "0.27.1"
+    "@ark-ui/anatomy": "1.0.0",
+    "@zag-js/accordion": "0.29.0",
+    "@zag-js/avatar": "0.29.0",
+    "@zag-js/carousel": "0.29.0",
+    "@zag-js/checkbox": "0.29.0",
+    "@zag-js/color-picker": "0.29.0",
+    "@zag-js/combobox": "0.29.0",
+    "@zag-js/date-picker": "0.29.0",
+    "@zag-js/dialog": "0.29.0",
+    "@zag-js/editable": "0.29.0",
+    "@zag-js/hover-card": "0.29.0",
+    "@zag-js/menu": "0.29.0",
+    "@zag-js/number-input": "0.29.0",
+    "@zag-js/pagination": "0.29.0",
+    "@zag-js/pin-input": "0.29.0",
+    "@zag-js/popover": "0.29.0",
+    "@zag-js/presence": "0.29.0",
+    "@zag-js/radio-group": "0.29.0",
+    "@zag-js/rating-group": "0.29.0",
+    "@zag-js/select": "0.29.0",
+    "@zag-js/slider": "0.29.0",
+    "@zag-js/solid": "0.29.0",
+    "@zag-js/splitter": "0.29.0",
+    "@zag-js/switch": "0.29.0",
+    "@zag-js/tabs": "0.29.0",
+    "@zag-js/tags-input": "0.29.0",
+    "@zag-js/toast": "0.29.0",
+    "@zag-js/toggle-group": "0.29.0",
+    "@zag-js/tooltip": "0.29.0",
+    "@zag-js/types": "0.29.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
     "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-interactions": "7.5.2",
-    "@storybook/addon-links": "7.5.2",
-    "@storybook/blocks": "7.5.2",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/blocks": "7.5.3",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.4",
+    "@types/jsdom": "21.1.5",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.9.1",
-    "@typescript-eslint/parser": "6.9.1",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "release-it": "16.2.1",
-    "rollup": "4.2.0",
+    "resize-observer-polyfill": "1.5.1",
+    "rollup": "4.3.0",
     "rollup-preset-solid": "2.0.1",
     "solid-js": "1.8.5",
-    "storybook": "7.5.2",
+    "storybook": "7.5.3",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.2.2",

package/source/accordion/accordion-item-content.jsx

@@ -1,14 +1,15 @@
 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 { useAccordionContext } from './accordion-context';
 import { useAccordionItemContext } from './accordion-item-context';
 export const AccordionItemContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const mergedProps = mergeProps(() => api().getItemContentProps(accordionItem), localProps);
-    return (<Presence present={accordionItem.isOpen} {...presenceProps} fallback={<div {...api().getItemContentProps(accordionItem)}/>}>
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().getItemContentProps(accordionItem), () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

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

@@ -1,10 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useAccordionContext } from './accordion-context';
 import { useAccordionItemContext } from './accordion-item-context';
 export const AccordionItemTrigger = (props) => {
     const api = useAccordionContext();
     const item = useAccordionItemContext();
-    const mergedProps = mergeProps(() => api().getItemTriggerProps(item), props);
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().getItemTriggerProps(item), () => ({ '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/accordion/accordion-item.jsx

@@ -1,16 +1,20 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { PresenceProvider, usePresence, usePresencePropsContext } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { useAccordionContext } from './accordion-context';
 import { AccordionItemProvider } from './accordion-item-context';
 export const AccordionItem = (props) => {
-    const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+    const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
     const api = useAccordionContext();
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), restProps);
-    const accordionItem = mergeProps(() => api().getItemState(itemProps), itemProps);
-    const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemProps));
-    return (<AccordionItemProvider value={accordionItem}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    const presenceProps = usePresencePropsContext();
+    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().getItemState(itemProps).isOpen })));
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+    return (<AccordionItemProvider value={itemProps}>
+      <PresenceProvider value={presenceApi}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
     </AccordionItemProvider>);
 };

package/source/accordion/accordion.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 { AccordionProvider } from './accordion-context';
 import { useAccordion } from './use-accordion';
 export const Accordion = (props) => {
-    const [params, localProps] = createSplitProps()(props, [
+    const [presenceProps, accordionProps] = splitPresenceProps(props);
+    const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
         'collapsible',
         'dir',
         'disabled',
@@ -17,9 +19,11 @@ export const Accordion = (props) => {
         'orientation',
         'value',
     ]);
-    const api = useAccordion(params);
-    const rootProps = mergeProps(() => api().rootProps, localProps);
+    const api = useAccordion(useAccordionProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<AccordionProvider value={api}>
-      <ark.div {...rootProps}/>
+      <PresencePropsProvider value={presenceProps}>
+        <ark.div {...mergedProps}/>
+      </PresencePropsProvider>
     </AccordionProvider>);
 };

package/source/avatar/avatar-fallback.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useAvatarContext } from './avatar-context';
 export const AvatarFallback = (props) => {
     const avatar = useAvatarContext();
-    const fallbackProps = mergeProps(() => avatar().fallbackProps, props);
-    return <ark.span {...fallbackProps}/>;
+    const mergedProps = mergeProps(() => avatar().fallbackProps, props);
+    return <ark.span {...mergedProps}/>;
 };

package/source/avatar/avatar-image.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useAvatarContext } from './avatar-context';
 export const AvatarImage = (props) => {
     const avatar = useAvatarContext();
-    const imageProps = mergeProps(() => avatar().imageProps, props);
-    return <ark.img {...imageProps}/>;
+    const mergedProps = mergeProps(() => avatar().imageProps, props);
+    return <ark.img {...mergedProps}/>;
 };

package/source/avatar/avatar.jsx

@@ -11,8 +11,8 @@ export const Avatar = (props) => {
         'onLoadingStatusChange',
     ]);
     const api = useAvatar(params);
-    const rootProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<AvatarProvider value={api}>
-      <ark.div {...rootProps}/>
+      <ark.div {...mergedProps}/>
     </AvatarProvider>);
 };

package/source/carousel/carousel.jsx

@@ -1,6 +1,7 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
 import { CarouselProvider } from './carousel-context';
 import { useCarousel } from './use-carousel';
 export const Carousel = (props) => {
@@ -17,9 +18,10 @@ export const Carousel = (props) => {
         'slidesPerView',
         'spacing',
     ]);
-    const carousel = useCarousel(useCarouselProps);
-    const rootProps = mergeProps(() => carousel().rootProps, localProps);
-    return (<CarouselProvider value={carousel}>
-      <ark.div {...rootProps}/>
+    const api = useCarousel(useCarouselProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<CarouselProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </CarouselProvider>);
 };

package/source/checkbox/checkbox-label.jsx

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

package/source/color-picker/color-picker-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 { useColorPickerContext } from './color-picker-context';
 export const ColorPickerContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useColorPickerContext();
-    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/color-picker/color-picker-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 { useColorPickerContext } from './color-picker-context';
 export const ColorPickerPositioner = (props) => {
     const api = useColorPickerContext();
+    const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().positionerProps, props);
-    return <ark.div {...mergedProps}/>;
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/color-picker/color-picker-view.jsx

@@ -0,0 +1,13 @@
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerView = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => colorPickerAnatomy.build().view.attrs, props);
+    // TODO @segunadebayo
+    return (<Show when={api().format === props.format}>
+      <ark.div data-format={props.format} {...mergedProps}/>
+    </Show>);
+};

package/source/color-picker/color-picker.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 { ColorPickerProvider } from './color-picker-context';
 import { useColorPicker, } from './use-color-picker';
 export const ColorPicker = (props) => {
-    const [colorPickerProps, localProps] = createSplitProps()(props, [
+    const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+    const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
         'autoFocus',
         'dir',
         'disabled',
@@ -26,11 +28,14 @@ export const ColorPicker = (props) => {
         'readOnly',
         'value',
     ]);
-    const api = useColorPicker(colorPickerProps);
+    const api = useColorPicker(useColorPickerProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<ColorPickerProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
       <input {...api().hiddenInputProps}/>
     </ColorPickerProvider>);
 };

package/source/color-picker/index.js

@@ -20,6 +20,7 @@ import { ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger';
 import { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
 import { ColorPickerTrigger } from './color-picker-trigger';
 import { ColorPickerValueText } from './color-picker-value-text';
+import { ColorPickerView } from './color-picker-view';
 const ColorPicker = Object.assign(ColorPickerRoot, {
     Root: ColorPickerRoot,
     Area: ColorPickerArea,
@@ -40,5 +41,6 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
     TransparencyGrid: ColorPickerTransparencyGrid,
     Trigger: ColorPickerTrigger,
     ValueText: ColorPickerValueText,
+    View: ColorPickerView,
 });
 export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };

package/source/combobox/combobox-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 { useComboboxContext } from './combobox-context';
 export const ComboboxContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useComboboxContext();
-    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/combobox/combobox-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 { useComboboxContext } from './combobox-context';
 export const ComboboxPositioner = (props) => {
-    const combobox = useComboboxContext();
-    const mergedProps = mergeProps(() => combobox().positionerProps, props);
-    return <ark.div {...mergedProps}/>;
+    const api = useComboboxContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/combobox/combobox.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 { ComboboxProvider } from './combobox-context';
 import { useCombobox } from './use-combobox';
 export const Combobox = (props) => {
-    const [selectProps, localProps] = createSplitProps()(props, [
+    const [presenceProps, comboboxProps] = splitPresenceProps(props);
+    const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, [
         'allowCustomValue',
         'autoFocus',
         'closeOnSelect',
@@ -43,10 +45,13 @@ export const Combobox = (props) => {
         'translations',
         'value',
     ]);
-    const api = useCombobox(selectProps);
+    const api = useCombobox(useComboboxProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<ComboboxProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
     </ComboboxProvider>);
 };

package/source/date-picker/date-picker-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 { useDatePickerContext } from './date-picker-context';
 export const DatePickerContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDatePickerContext();
-    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/date-picker/date-picker-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 { useDatePickerContext } from './date-picker-context';
 export const DatePickerPositioner = (props) => {
     const api = useDatePickerContext();
+    const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().positionerProps, props);
-    return <ark.div {...mergedProps}/>;
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/date-picker/date-picker.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 { DatePickerProvider } from './date-picker-context';
 import { useDatePicker } from './use-date-picker';
 export const DatePicker = (props) => {
-    const [datePickerProps, localProps] = createSplitProps()(props, [
+    const [presenceProps, datePickerProps] = splitPresenceProps(props);
+    const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
         'closeOnSelect',
         'dir',
         'disabled',
@@ -38,10 +40,13 @@ export const DatePicker = (props) => {
         'value',
         'view',
     ]);
-    const api = useDatePicker(datePickerProps);
+    const api = useDatePicker(useDatePickerProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<DatePickerProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
     </DatePickerProvider>);
 };

package/source/dialog/dialog-backdrop.jsx

@@ -1,12 +1,14 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { Presence, splitPresenceProps } from '../presence';
+import { usePresence, usePresencePropsContext } from '../presence';
 import { useDialogContext } from './dialog-context';
 export const DialogBackdrop = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDialogContext();
-    const mergedProps = mergeProps(() => api().backdropProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().backdropProps}/>}>
+    const presenceProps = usePresencePropsContext();
+    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const mergedProps = mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

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

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

package/source/dialog/dialog-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 { useDialogContext } from './dialog-context';
 export const DialogContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDialogContext();
-    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/dialog/dialog-description.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDialogContext } from './dialog-context';
 export const DialogDescription = (props) => {
     const dialog = useDialogContext();
-    const descriptionProps = mergeProps(() => dialog().descriptionProps, props);
-    return <ark.p {...descriptionProps}/>;
+    const mergedProps = mergeProps(() => dialog().descriptionProps, props);
+    return <ark.p {...mergedProps}/>;
 };

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

package/source/dialog/dialog-title.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDialogContext } from './dialog-context';
 export const DialogTitle = (props) => {
     const dialog = useDialogContext();
-    const titleProps = mergeProps(() => dialog().titleProps, props);
-    return <ark.h2 {...titleProps}/>;
+    const mergedProps = mergeProps(() => dialog().titleProps, props);
+    return <ark.h2 {...mergedProps}/>;
 };

package/source/dialog/dialog-trigger.jsx

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