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

package/esm/index.js

@@ -1,11 +1,11 @@
 import { spread as spread$1, createComponent, Dynamic, mergeProps as mergeProps$1, memo, use, template, insert, effect } from 'solid-js/web';
-import { mergeProps as mergeProps$2, useMachine, normalizeProps, useActor } from '@zag-js/solid';
-import { splitProps, createMemo, mergeProps, children, createEffect, createContext as createContext$1, useContext, createUniqueId, createSignal, onCleanup, Index } from 'solid-js';
-import * as accordion from '@zag-js/accordion';
+import { useMachine, normalizeProps, mergeProps as mergeProps$2, useActor } from '@zag-js/solid';
+import { splitProps, createMemo, mergeProps, children, createEffect, createSignal, Show, createContext as createContext$1, useContext, createUniqueId, Index, onCleanup } from 'solid-js';
 import * as presence from '@zag-js/presence';
+import * as accordion from '@zag-js/accordion';
 import * as avatar from '@zag-js/avatar';
 import * as carousel from '@zag-js/carousel';
-import { carouselAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
+import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
 import * as checkbox from '@zag-js/checkbox';
 import * as colorPicker from '@zag-js/color-picker';
 import * as combobox from '@zag-js/combobox';
@@ -394,6 +394,49 @@ function jsxFactory() {
 }
 const ark = jsxFactory();
 
+function splitPresenceProps(props) {
+  return createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+}
+
+const usePresence = props => {
+  const [localProps, machineProps] = splitProps(props, ['lazyMount', 'unmountOnExit']);
+  const [wasEverPresent, setWasEverPresent] = createSignal(false);
+  const [state, send] = useMachine(presence.machine(machineProps), {
+    context: machineProps
+  });
+  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'
+    }
+  }));
+};
+
+const Presence$1 = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = usePresence(presenceProps);
+  const mergedProps = mergeProps$2(() => api().presenceProps, localProps);
+  return createComponent(Show, {
+    get when() {
+      return !api().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        "data-scope": "presence",
+        "data-part": "root"
+      }));
+    }
+  });
+};
+
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
@@ -418,6 +461,20 @@ function createContext(options = {}) {
   return [Context.Provider, useContext$1, Context];
 }
 
+const [PresenceProvider, usePresenceContext] = createContext({
+  hookName: 'usePresenceContext',
+  providerName: '<PresenceProvider />'
+});
+
+const [PresencePropsProvider, usePresencePropsContext] = createContext({
+  hookName: 'usePresencePropsContext',
+  providerName: '<PresencePropsProvider />'
+});
+
+const Presence = Object.assign(Presence$1, {
+  Root: Presence$1
+});
+
 const [AccordionProvider, useAccordionContext] = createContext({
   hookName: 'useAccordionContext',
   providerName: '<AccordionProvider />'
@@ -429,7 +486,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   strict: false
 });
 
-const _tmpl$$a = /*#__PURE__*/template(`<span hidden>`);
+const _tmpl$$b = /*#__PURE__*/template(`<span hidden>`);
 const Environment$1 = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -440,7 +497,7 @@ const Environment$1 = props => {
     },
     get children() {
       return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$a();
+        const _el$ = _tmpl$$b();
         const _ref$ = spanRef;
         typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
         return _el$;
@@ -466,13 +523,19 @@ const useAccordion = props => {
 };
 
 const Accordion$1 = props => {
-  const [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
-  const api = useAccordion(params);
-  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  const [presenceProps, accordionProps] = splitPresenceProps(props);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const api = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   return createComponent(AccordionProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(PresencePropsProvider, {
+        value: presenceProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
     }
   });
 };
@@ -486,75 +549,44 @@ const [AccordionItemProvider, useAccordionItemContext] = createContext({
 });
 
 const AccordionItem = props => {
-  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
   const api = useAccordionContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), restProps);
-  const accordionItem = mergeProps$2(() => api().getItemState(itemProps), itemProps);
-  const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemProps));
+  const presenceProps = usePresencePropsContext();
+  const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().getItemState(itemProps).isOpen
+  })));
+  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
   return createComponent(AccordionItemProvider, {
-    value: accordionItem,
+    value: itemProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(PresenceProvider, {
+        value: presenceApi,
         get children() {
-          return getChildren();
+          return createComponent(ark.div, mergeProps$1(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
         }
-      }));
-    }
-  });
-};
-
-const usePresence = props => {
-  const [state, send] = useMachine(presence.machine(props), {
-    context: props
-  });
-  return createMemo(() => presence.connect(state, send, normalizeProps));
-};
-
-const Presence$1 = props => {
-  const [presenceProps, localProps] = createSplitProps()(props, ['onExitComplete', 'present']);
-  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$1(children, {
-        ['data-state']: presenceProps.present ? 'open' : 'closed',
-        hidden: !api().isPresent
       });
     }
   });
-  return memo((() => {
-    const _c$ = memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
-    return () => _c$() ? null : getChildren();
-  })());
 };
 
-function splitPresenceProps(props) {
-  return createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
-}
-
-const Presence = Object.assign(Presence$1, {
-  Root: Presence$1
-});
-
 const AccordionItemContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useAccordionContext();
   const accordionItem = useAccordionItemContext();
-  const contentProps = mergeProps$2(() => api().getItemContentProps(accordionItem), localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return accordionItem.isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().getItemContentProps(accordionItem), () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
-      return createComponent(ark.div, contentProps);
+      return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const AccordionItemIndicator = props => {
@@ -567,7 +599,12 @@ const AccordionItemIndicator = props => {
 const AccordionItemTrigger = props => {
   const api = useAccordionContext();
   const item = useAccordionItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemTriggerProps(item), props);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => 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 createComponent(ark.button, mergedProps);
 };
 
@@ -599,25 +636,25 @@ const useAvatar = props => {
 const Avatar$1 = props => {
   const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
   const api = useAvatar(params);
-  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   return createComponent(AvatarProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
 
 const AvatarFallback = props => {
   const avatar = useAvatarContext();
-  const fallbackProps = mergeProps$2(() => avatar().fallbackProps, props);
-  return createComponent(ark.span, fallbackProps);
+  const mergedProps = mergeProps$2(() => avatar().fallbackProps, props);
+  return createComponent(ark.span, mergedProps);
 };
 
 const AvatarImage = props => {
   const avatar = useAvatarContext();
-  const imageProps = mergeProps$2(() => avatar().imageProps, props);
-  return createComponent(ark.img, imageProps);
+  const mergedProps = mergeProps$2(() => avatar().imageProps, props);
+  return createComponent(ark.img, mergedProps);
 };
 
 const Avatar = Object.assign(Avatar$1, {
@@ -645,12 +682,17 @@ const useCarousel = props => {
 
 const Carousel$1 = props => {
   const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
-  const carousel = useCarousel(useCarouselProps);
-  const rootProps = mergeProps$2(() => carousel().rootProps, localProps);
+  const api = useCarousel(useCarouselProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(CarouselProvider, {
-    value: carousel,
+    value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
@@ -750,12 +792,12 @@ const Checkbox$1 = props => {
   });
 };
 
-const _tmpl$$9 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$a = /*#__PURE__*/template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
   const mergedProps = mergeProps$2(() => api().controlProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$9();
+    const _el$ = _tmpl$$a();
     spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -769,8 +811,8 @@ const CheckboxIndicator = props => {
 
 const CheckboxLabel = props => {
   const checkbox = useCheckboxContext();
-  const labelProps = mergeProps$2(() => checkbox().labelProps, props);
-  return createComponent(ark.span, labelProps);
+  const mergedProps = mergeProps$2(() => checkbox().labelProps, props);
+  return createComponent(ark.span, mergedProps);
 };
 
 const Checkbox = Object.assign(Checkbox$1, {
@@ -799,21 +841,30 @@ const useColorPicker = props => {
   return createMemo(() => colorPicker.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$8 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$9 = /*#__PURE__*/template(`<input>`);
 const ColorPicker$1 = props => {
-  const [colorPickerProps, localProps] = createSplitProps()(props, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
-  const api = useColorPicker(colorPickerProps);
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker(useColorPickerProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
   const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(ColorPickerProvider, {
     value: api,
     get children() {
-      return [createComponent(ark.div, mergeProps$1(mergedProps, {
+      return [createComponent(PresenceProvider, {
+        value: apiPresence,
         get children() {
-          return getChildren();
+          return createComponent(ark.div, mergeProps$1(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
         }
-      })), (() => {
-        const _el$ = _tmpl$$8();
+      }), (() => {
+        const _el$ = _tmpl$$9();
         spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -892,8 +943,16 @@ const ColorPickerChannelSliderTrack = props => {
 
 const ColorPickerContent = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, props);
-  return createComponent(ark.div, mergedProps);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const ColorPickerControl = props => {
@@ -916,8 +975,16 @@ const ColorPickerLabel = props => {
 
 const ColorPickerPositioner = props => {
   const api = useColorPickerContext();
+  const presenceApi = usePresenceContext();
   const mergedProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(ark.div, mergedProps);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const ColorPickerSwatch = props => {
@@ -953,6 +1020,35 @@ const ColorPickerTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerValueText = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    get children() {
+      return api().valueAsString || props.children;
+    }
+  }));
+};
+
+const ColorPickerView = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().view.attrs, props);
+
+  // TODO @segunadebayo
+  return createComponent(Show, {
+    get when() {
+      return api().format === props.format;
+    },
+    get children() {
+      return createComponent(ark.div, mergeProps$1({
+        get ["data-format"]() {
+          return props.format;
+        }
+      }, mergedProps));
+    }
+  });
+};
+
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
   Area: ColorPickerArea,
@@ -971,7 +1067,9 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
-  Trigger: ColorPickerTrigger
+  Trigger: ColorPickerTrigger,
+  ValueText: ColorPickerValueText,
+  View: ColorPickerView
 });
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -996,18 +1094,27 @@ const useCombobox = props => {
 };
 
 const Combobox$1 = props => {
-  const [selectProps, localProps] = createSplitProps()(props, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
-  const api = useCombobox(selectProps);
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const api = useCombobox(useComboboxProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
   const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(ComboboxProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
         get children() {
-          return getChildren();
+          return createComponent(ark.div, mergeProps$1(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
         }
-      }));
+      });
     }
   });
 };
@@ -1019,18 +1126,17 @@ const ComboboxClearTrigger = props => {
 };
 
 const ComboboxContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useComboboxContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const ComboboxControl = props => {
@@ -1075,9 +1181,11 @@ const ComboboxItemGroup = props => {
 };
 
 const ComboboxItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
   const api = useComboboxContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps(labelProps), localProps);
+  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -1102,9 +1210,17 @@ const ComboboxLabel = props => {
 };
 
 const ComboboxPositioner = props => {
-  const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().positionerProps, props);
-  return createComponent(ark.div, mergedProps);
+  const api = useComboboxContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const ComboboxTrigger = props => {
@@ -1150,18 +1266,27 @@ const useDatePicker = props => {
 };
 
 const DatePicker$1 = props => {
-  const [datePickerProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
-  const api = useDatePicker(datePickerProps);
+  const [presenceProps, datePickerProps] = splitPresenceProps(props);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
+  const api = useDatePicker(useDatePickerProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
   const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(DatePickerProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
         get children() {
-          return getChildren();
+          return createComponent(ark.div, mergeProps$1(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
         }
-      }));
+      });
     }
   });
 };
@@ -1174,8 +1299,16 @@ const DatePickerClearTrigger = props => {
 
 const DatePickerContent = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, props);
-  return createComponent(ark.div, mergedProps);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const DatePickerControl = props => {
@@ -1196,14 +1329,14 @@ const DatePickerLabel = props => {
   return createComponent(ark.label, mergedProps);
 };
 
-const _tmpl$$7 = /*#__PURE__*/template(`<option>`);
+const _tmpl$$8 = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$2(() => api().monthSelectProps, props);
   return createComponent(ark.select, mergeProps$1(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        const _el$ = _tmpl$$7();
+        const _el$ = _tmpl$$8();
         insert(_el$, () => month.label);
         effect(() => _el$.value = month.value);
         return _el$;
@@ -1226,8 +1359,16 @@ const DatePickerNextTrigger = props => {
 
 const DatePickerPositioner = props => {
   const api = useDatePickerContext();
+  const presenceApi = usePresenceContext();
   const mergedProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(ark.div, mergedProps);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const DatePickerPrevTrigger = props => {
@@ -1348,10 +1489,11 @@ const DatePickerView = props => {
   const [viewProps, localProps] = createSplitProps()(props, ['view']);
   const api = useDatePickerContext();
   const getChildren = () => runIfFn(localProps.children, api);
+  const mergedProps = mergeProps$2(() => datePickerAnatomy.build().view.attrs, localProps);
   return createComponent(DatePickerViewProvider, {
     value: viewProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(localProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get hidden() {
           return api().view !== viewProps.view;
         },
@@ -1377,7 +1519,7 @@ const DatePickerViewTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-const _tmpl$$6 = /*#__PURE__*/template(`<option>`);
+const _tmpl$$7 = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$2(() => api().yearSelectProps, props);
@@ -1387,7 +1529,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        const _el$ = _tmpl$$6();
+        const _el$ = _tmpl$$7();
         _el$.value = year;
         insert(_el$, year);
         return _el$;
@@ -1447,75 +1589,95 @@ const useDialog = props => {
 };
 
 const Dialog$1 = props => {
-  const [dialogParams, localProps] = createSplitProps()(props, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
-  const api = useDialog(dialogParams);
+  const [presenceProps, dialogProps] = splitPresenceProps(props);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const api = useDialog(useDialogProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(DialogProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
     }
   });
 };
 
 const DialogBackdrop = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  const mergedProps = mergeProps$2(() => api().backdropProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().backdropProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const DialogCloseTrigger = props => {
   const dialog = useDialogContext();
-  const triggerProps = mergeProps$2(() => dialog().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => dialog().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const DialogContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const DialogDescription = props => {
   const dialog = useDialogContext();
-  const descriptionProps = mergeProps$2(() => dialog().descriptionProps, props);
-  return createComponent(ark.p, descriptionProps);
+  const mergedProps = mergeProps$2(() => dialog().descriptionProps, props);
+  return createComponent(ark.p, mergedProps);
 };
 
 const DialogPositioner = props => {
-  const dialog = useDialogContext();
-  const mergedProps = mergeProps$2(() => dialog().positionerProps, props);
-  return createComponent(ark.div, mergedProps);
+  const api = useDialogContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const DialogTitle = props => {
   const dialog = useDialogContext();
-  const titleProps = mergeProps$2(() => dialog().titleProps, props);
-  return createComponent(ark.h2, titleProps);
+  const mergedProps = mergeProps$2(() => dialog().titleProps, props);
+  return createComponent(ark.h2, mergedProps);
 };
 
 const DialogTrigger = props => {
-  const dialog = useDialogContext();
-  const triggerProps = mergeProps$2(() => dialog().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const api = useDialogContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => 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 createComponent(ark.button, mergedProps);
 };
 
 const Dialog = Object.assign(Dialog$1, {
@@ -1550,12 +1712,12 @@ const Editable$1 = props => {
   const [useEditableProps, restProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const editable = useEditable(useEditableProps);
   const [childrenProps, localProps] = splitProps(restProps, ['children']);
-  const rootProps = mergeProps$2(() => editable().rootProps, localProps);
+  const mergedProps = mergeProps$2(() => editable().rootProps, localProps);
   const getChildren = () => runIfFn(childrenProps.children, editable);
   return createComponent(EditableProvider, {
     value: editable,
     get children() {
-      return createComponent(ark.div, mergeProps$1(rootProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -1566,50 +1728,50 @@ const Editable$1 = props => {
 
 const EditableArea = props => {
   const editable = useEditableContext();
-  const areaProps = mergeProps$2(() => editable().areaProps, props);
-  return createComponent(ark.div, areaProps);
+  const mergedProps = mergeProps$2(() => editable().areaProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const EditableCancelTrigger = props => {
   const editable = useEditableContext();
-  const triggerProps = mergeProps$2(() => editable().cancelTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => editable().cancelTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const EditableControl = props => {
   const editable = useEditableContext();
-  const controlProps = mergeProps$2(() => editable().controlProps, props);
-  return createComponent(ark.div, controlProps);
+  const mergedProps = mergeProps$2(() => editable().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const EditableEditTrigger = props => {
   const editable = useEditableContext();
-  const triggerProps = mergeProps$2(() => editable().editTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => editable().editTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const EditableInput = props => {
   const editable = useEditableContext();
-  const inputProps = mergeProps$2(() => editable().inputProps, props);
-  return createComponent(ark.input, inputProps);
+  const mergedProps = mergeProps$2(() => editable().inputProps, props);
+  return createComponent(ark.input, mergedProps);
 };
 
 const EditableLabel = props => {
   const editable = useEditableContext();
-  const labelProps = mergeProps$2(() => editable().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const mergedProps = mergeProps$2(() => editable().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 const EditablePreview = props => {
   const editable = useEditableContext();
-  const previewProps = mergeProps$2(() => editable().previewProps, props);
-  return createComponent(ark.span, previewProps);
+  const mergedProps = mergeProps$2(() => editable().previewProps, props);
+  return createComponent(ark.span, mergedProps);
 };
 
 const EditableSubmitTrigger = props => {
   const dialog = useEditableContext();
-  const triggerProps = mergeProps$2(() => dialog().submitTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => dialog().submitTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const Editable = Object.assign(Editable$1, {
@@ -1642,54 +1804,70 @@ const useHoverCard = props => {
 };
 
 const HoverCard$1 = props => {
-  const [hoverCardProps, localProps] = createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
-  const api = useHoverCard(hoverCardProps);
+  const [presenceProps, hoverCardProps] = splitPresenceProps(props);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useHoverCard(useHoverCardProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(HoverCardProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
     }
   });
 };
 
 const HoverCardArrow = props => {
   const hoverCard = useHoverCardContext();
-  const arrowProps = mergeProps$2(() => hoverCard().arrowProps, props);
-  return createComponent(ark.div, arrowProps);
+  const mergedProps = mergeProps$2(() => hoverCard().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const HoverCardArrowTip = props => {
   const hoverCard = useHoverCardContext();
-  const tipProps = mergeProps$2(() => hoverCard().arrowTipProps, props);
-  return createComponent(ark.div, tipProps);
+  const mergedProps = mergeProps$2(() => hoverCard().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const HoverCardContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useHoverCardContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const HoverCardPositioner = props => {
-  const hoverCard = useHoverCardContext();
-  const positionerProps = mergeProps$2(() => hoverCard().positionerProps, props);
-  return createComponent(ark.div, positionerProps);
+  const api = useHoverCardContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const HoverCardTrigger = props => {
   const hoverCard = useHoverCardContext();
-  const triggerProps = mergeProps$2(() => hoverCard().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => hoverCard().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const HoverCard = Object.assign(HoverCard$1, {
@@ -1733,25 +1911,22 @@ const useMenu = props => {
 };
 
 const Menu$1 = props => {
-  const [menuParams, restProps] = createSplitProps()(props, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'onValueChange', 'positioning', 'value']);
+  const [presenceProps, menuProps] = splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'onValueChange', 'open', 'positioning', 'value']);
   const parentMenu = useMenuContext();
   const parentMachine = useMenuMachineContext();
-  const menu = useMenu(menuParams);
+  const menu = useMenu(useMenuProps);
+  const apiPresence = usePresence(mergeProps$2(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 createComponent(MenuTriggerItemProvider, {
     value: triggerItemContext,
     get children() {
@@ -1763,7 +1938,12 @@ const Menu$1 = props => {
               return menu().api;
             },
             get children() {
-              return getChildren();
+              return createComponent(PresenceProvider, {
+                value: apiPresence,
+                get children() {
+                  return getChildren();
+                }
+              });
             }
           });
         }
@@ -1774,65 +1954,66 @@ const Menu$1 = props => {
 
 const MenuArrow = props => {
   const menu = useMenuContext();
-  const arrowProps = mergeProps$2(() => menu?.().arrowProps, props);
-  return createComponent(ark.div, arrowProps);
+  const mergedProps = mergeProps$2(() => menu?.().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const MenuArrowTip = props => {
   const menu = useMenuContext();
-  const arrowTipProps = mergeProps$2(() => menu?.().arrowTipProps, props);
-  return createComponent(ark.div, arrowTipProps);
+  const mergedProps = mergeProps$2(() => menu?.().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const MenuContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useMenuContext();
-  const mergedProps = mergeProps$2(() => api?.().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api?.().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const MenuContextTrigger = props => {
   const menu = useMenuContext();
-  const triggerProps = mergeProps$2(() => menu?.().contextTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => menu?.().contextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const MenuItem = props => {
   const menu = useMenuContext();
   const [itemParams, restProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
-  const itemProps = mergeProps$2(() => menu?.().getItemProps(itemParams), restProps);
-  return createComponent(ark.div, itemProps);
+  const mergedProps = mergeProps$2(() => menu?.().getItemProps(itemParams), restProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const MenuItemGroup = props => {
   const menu = useMenuContext();
   const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
-  const groupProps = mergeProps$2(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
-  return createComponent(ark.div, groupProps);
+  const mergedProps = mergeProps$2(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const MenuItemGroupLabel = props => {
   const menu = useMenuContext();
-  const [itemGroupLabelProps, localProps] = createSplitProps()(props, ['htmlFor']);
-  const labelProps = mergeProps$2(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
-  return createComponent(ark.label, labelProps);
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const mergedProps = mergeProps$2(() => menu?.().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const MenuOptionItem = props => {
   const menu = useMenuContext();
   const [optionProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
-  const itemProps = mergeProps$2(() => menu().getOptionItemProps(optionProps), localProps);
+  const mergedProps = mergeProps$2(() => menu().getOptionItemProps(optionProps), localProps);
   const itemState = createMemo(() => menu().getOptionItemState(optionProps));
   const getChildren = () => runIfFn(localProps.children, itemState);
-  return createComponent(ark.div, mergeProps$1(itemProps, {
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
     get children() {
       return getChildren();
     }
@@ -1840,27 +2021,35 @@ const MenuOptionItem = props => {
 };
 
 const MenuPositioner = props => {
-  const menu = useMenuContext();
-  const positionerProps = mergeProps$2(() => menu?.().positionerProps, props);
-  return createComponent(ark.div, positionerProps);
+  const api = useMenuContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const MenuSeparator = props => {
   const menu = useMenuContext();
-  const separatorProps = mergeProps$2(() => menu?.().separatorProps, props);
-  return createComponent(ark.hr, separatorProps);
+  const mergedProps = mergeProps$2(() => menu?.().separatorProps, props);
+  return createComponent(ark.hr, mergedProps);
 };
 
 const MenuTrigger = props => {
   const menu = useMenuContext();
-  const triggerProps = mergeProps$2(() => menu?.().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => menu?.().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const MenuTriggerItem = props => {
   const getTriggerItemProps = useMenuTriggerItemContext();
-  const triggerProps = mergeProps$2(() => getTriggerItemProps?.(), props);
-  return createComponent(ark.div, triggerProps);
+  const mergedProps = mergeProps$2(() => getTriggerItemProps?.(), props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const Menu = Object.assign(Menu$1, {
@@ -1899,49 +2088,49 @@ const useNumberInput = props => {
 const NumberInput$1 = props => {
   const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
-  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   return createComponent(NumberInputProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
 
 const NumberInputControl = props => {
   const api = useNumberInputContext();
-  const controlProps = mergeProps$2(() => api().controlProps, props);
-  return createComponent(ark.div, controlProps);
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const NumberInputDecrementTrigger = props => {
   const api = useNumberInputContext();
-  const triggerProps = mergeProps$2(() => api().decrementTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => api().decrementTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const NumberInputInput = props => {
   const api = useNumberInputContext();
-  const inputProps = mergeProps$2(() => api().inputProps, props);
-  return createComponent(ark.input, inputProps);
+  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
 };
 
 const NumberInputIncrementTrigger = props => {
   const api = useNumberInputContext();
-  const triggerProps = mergeProps$2(() => api().incrementTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => api().incrementTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const NumberInputLabel = props => {
   const api = useNumberInputContext();
-  const labelProps = mergeProps$2(() => api().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 const NumberInputScrubber = props => {
   const api = useNumberInputContext();
-  const scrubberProps = mergeProps$2(() => api().scrubberProps, props);
-  return createComponent(ark.div, scrubberProps);
+  const mergedProps = mergeProps$2(() => api().scrubberProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const NumberInput = Object.assign(NumberInput$1, {
@@ -1976,11 +2165,11 @@ const Pagination$1 = props => {
   const [childrenProps, localProps] = splitProps(restProps, ['children']);
   const api = usePagination(paginationParams);
   const getChildren = () => runIfFn(childrenProps.children, api);
-  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   return createComponent(PaginationProvider, {
     value: api,
     get children() {
-      return createComponent(ark.nav, mergeProps$1(rootProps, {
+      return createComponent(ark.nav, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2040,7 +2229,7 @@ const usePinInput = props => {
   return createMemo(() => pinInput.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
 const PinInput$1 = props => {
   const [pinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput(pinInputProps);
@@ -2049,7 +2238,7 @@ const PinInput$1 = props => {
     value: api,
     get children() {
       return [createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$5();
+        const _el$ = _tmpl$$6();
         spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -2066,14 +2255,14 @@ const PinInputControl = props => {
 const PinInputInput = props => {
   const [inputParams, localProps] = splitProps(props, ['index']);
   const api = usePinInputContext();
-  const inputProps = mergeProps$2(() => api().getInputProps(inputParams), localProps);
-  return createComponent(ark.input, inputProps);
+  const mergedProps = mergeProps$2(() => api().getInputProps(inputParams), localProps);
+  return createComponent(ark.input, mergedProps);
 };
 
 const PinInputLabel = props => {
   const api = usePinInputContext();
-  const labelProps = mergeProps$2(() => api().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 const PinInput = Object.assign(PinInput$1, {
@@ -2101,59 +2290,68 @@ const usePopover = props => {
 };
 
 const Popover$1 = props => {
-  const [usePopoverProps, restProps] = createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [presenceProps, popoverProps] = splitPresenceProps(props);
+  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
   const api = usePopover(usePopoverProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(PopoverProvider, {
     value: api,
     get children() {
-      return restProps.children;
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
     }
   });
 };
 
 const PopoverAnchor = props => {
   const api = usePopoverContext();
-  const anchorProps = mergeProps$2(() => api().anchorProps, props);
-  return createComponent(ark.div, anchorProps);
+  const mergedProps = mergeProps$2(() => api().anchorProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrow = props => {
   const popover = usePopoverContext();
-  const arrowProps = mergeProps$2(() => popover().arrowProps, props);
-  return createComponent(ark.div, arrowProps);
+  const mergedProps = mergeProps$2(() => popover().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrowTip = props => {
   const popover = usePopoverContext();
-  const arrowTipProps = mergeProps$2(() => popover().arrowTipProps, props);
-  return createComponent(ark.div, arrowTipProps);
+  const mergedProps = mergeProps$2(() => popover().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const PopoverCloseTrigger = props => {
   const api = usePopoverContext();
-  const triggerProps = mergeProps$2(() => api().closeTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const PopoverContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const PopoverDescription = props => {
   const api = usePopoverContext();
-  const descriptionProps = mergeProps$2(() => api().descriptionProps, props);
-  return createComponent(ark.div, descriptionProps);
+  const mergedProps = mergeProps$2(() => api().descriptionProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2164,20 +2362,33 @@ const PopoverIndicator = props => {
 
 const PopoverPositioner = props => {
   const api = usePopoverContext();
-  const positionerProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(ark.div, positionerProps);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const PopoverTitle = props => {
   const api = usePopoverContext();
-  const titleProps = mergeProps$2(() => api().titleProps, props);
-  return createComponent(ark.div, titleProps);
+  const mergedProps = mergeProps$2(() => api().titleProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const PopoverTrigger = props => {
   const api = usePopoverContext();
-  const triggerProps = mergeProps$2(() => api().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => 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 createComponent(ark.button, mergedProps);
 };
 
 const Popover = Object.assign(Popover$1, {
@@ -2246,13 +2457,13 @@ const RadioGroupItem = props => {
   });
 };
 
-const _tmpl$$4 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
 const RadioGroupItemControl = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
   const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$4();
+    const _el$ = _tmpl$$5();
     spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2309,7 +2520,7 @@ const RatingGroup$1 = props => {
   });
 };
 
-const _tmpl$$3 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$4 = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const getChildren = () => runIfFn(props.children, api);
@@ -2319,7 +2530,7 @@ const RatingGroupControl = props => {
       return getChildren();
     }
   })), (() => {
-    const _el$ = _tmpl$$3();
+    const _el$ = _tmpl$$4();
     spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2331,11 +2542,11 @@ const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
 });
 
 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$2(() => 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$2(() => api().getItemProps(itemProps), localProps);
   return createComponent(RatingGroupItemProvider, {
     value: itemState,
     get children() {
@@ -2413,13 +2624,13 @@ const SegmentGroupItem = props => {
   });
 };
 
-const _tmpl$$2 = /*#__PURE__*/template(`<input>`);
+const _tmpl$$3 = /*#__PURE__*/template(`<input>`);
 const SegmentGroupItemControl = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
   const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$2();
+    const _el$ = _tmpl$$3();
     spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2469,18 +2680,27 @@ const useSelect = props => {
 };
 
 const Select$1 = props => {
-  const [selectProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
-  const api = useSelect(selectProps);
+  const [presenceProps, selectProps] = splitPresenceProps(props);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
+  const api = useSelect(useSelectProps);
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
   const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(SelectProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
         get children() {
-          return getChildren();
+          return createComponent(ark.div, mergeProps$1(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
         }
-      }));
+      });
     }
   });
 };
@@ -2492,24 +2712,40 @@ const SelectClearTrigger = props => {
 };
 
 const SelectContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
       return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
+const _tmpl$$2 = /*#__PURE__*/template(`<select>`),
+  _tmpl$2 = /*#__PURE__*/template(`<option>`);
 const SelectControl = props => {
   const api = useSelectContext();
   const mergedProps = mergeProps$2(() => api().controlProps, props);
-  return createComponent(ark.div, mergedProps);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$2();
+    spread$1(_el$, mergeProps$1(() => api().hiddenSelectProps), false, true);
+    insert(_el$, createComponent(Index, {
+      get each() {
+        return api().collection.toArray();
+      },
+      children: option => (() => {
+        const _el$2 = _tmpl$2();
+        insert(_el$2, () => option().label);
+        effect(() => _el$2.value = option().value);
+        return _el$2;
+      })()
+    }));
+    return _el$;
+  })()];
 };
 
 const SelectIndicator = props => {
@@ -2548,9 +2784,11 @@ const SelectItemGroup = props => {
 };
 
 const SelectItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps(labelProps), localProps);
+  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2576,8 +2814,16 @@ const SelectLabel = props => {
 
 const SelectPositioner = props => {
   const api = useSelectContext();
+  const presenceApi = usePresenceContext();
   const mergedProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(ark.div, mergedProps);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const SelectTrigger = props => {
@@ -2672,17 +2918,6 @@ const SliderMarkerGroup = props => {
   return createComponent(ark.div, mergedProps);
 };
 
-const SliderOutput = props => {
-  const slider = useSliderContext();
-  const getChildren = () => runIfFn(props.children, slider);
-  const outputProps = mergeProps$2(() => slider().outputProps, props);
-  return createComponent(ark.output, mergeProps$1(outputProps, {
-    get children() {
-      return getChildren();
-    }
-  }));
-};
-
 const SliderRange = props => {
   const api = useSliderContext();
   const mergedProps = mergeProps$2(() => api().rangeProps, props);
@@ -2692,8 +2927,8 @@ const SliderRange = props => {
 const SliderThumb = props => {
   const [thumbProps, localProps] = createSplitProps()(props, ['index']);
   const api = useSliderContext();
-  const mergePdrops = mergeProps$2(() => api().getThumbProps(thumbProps), localProps);
-  return createComponent(ark.div, mergePdrops);
+  const mergedProps = mergeProps$2(() => api().getThumbProps(thumbProps), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const SliderTrack = props => {
@@ -2702,16 +2937,27 @@ const SliderTrack = props => {
   return createComponent(ark.div, mergedProps);
 };
 
+const SliderValueText = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().valueTextProps, props);
+  const getChildren = children(() => props.children);
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
+    get children() {
+      return getChildren() || api().value.join(',');
+    }
+  }));
+};
+
 const Slider = Object.assign(Slider$1, {
   Root: Slider$1,
   Control: SliderControl,
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
-  Output: SliderOutput,
   Range: SliderRange,
   Thumb: SliderThumb,
-  Track: SliderTrack
+  Track: SliderTrack,
+  ValueText: SliderValueText
 });
 
 const [SplitterProvider, useSplitterContext] = createContext({
@@ -2735,11 +2981,11 @@ const Splitter$1 = props => {
   const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'onSizeChangeStart', 'orientation', 'size']);
   const api = useSplitter(splitterParams);
   const getChildren = () => runIfFn(localProps.children, api);
-  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
   return createComponent(SplitterProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(rootProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2751,15 +2997,15 @@ const Splitter$1 = props => {
 const SplitterPanel = props => {
   const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
   const api = useSplitterContext();
-  const panelProps = mergeProps$2(() => api().getPanelProps(panelParams), restProps);
-  return createComponent(ark.div, panelProps);
+  const mergedProps = mergeProps$2(() => api().getPanelProps(panelParams), restProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 const SplitterResizeTrigger = props => {
   const api = useSplitterContext();
   const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
-  const triggerProps = mergeProps$2(() => api().getResizeTriggerProps(triggerParams), restProps);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return createComponent(ark.button, mergedProps);
 };
 
 const Splitter = Object.assign(Splitter$1, {
@@ -2815,14 +3061,14 @@ const SwitchControl = props => {
 
 const SwitchLabel = props => {
   const checkbox = useSwitchContext();
-  const labelProps = mergeProps$2(() => checkbox().labelProps, props);
-  return createComponent(ark.span, labelProps);
+  const mergedProps = mergeProps$2(() => checkbox().labelProps, props);
+  return createComponent(ark.span, mergedProps);
 };
 
 const SwitchThumb = props => {
   const checkbox = useSwitchContext();
-  const thumbProps = mergeProps$2(() => checkbox().thumbProps, props);
-  return createComponent(ark.span, thumbProps);
+  const mergedProps = mergeProps$2(() => checkbox().thumbProps, props);
+  return createComponent(ark.span, mergedProps);
 };
 
 const Switch = Object.assign(Switch$1, {
@@ -2837,44 +3083,46 @@ const [TabsProvider, useTabsContext] = createContext({
   providerName: '<TabsProvider />'
 });
 
-const TabPresence = props => {
-  const api = useTabsContext();
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().value === props.value;
-    }
-  }, props));
-};
-
 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$2(() => api().getContentProps(getContentProps), restProps);
-  return createComponent(TabPresence, mergeProps$1(presenceProps, getContentProps, {
+  const presenceProps = usePresencePropsContext();
+  const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().value === contentProps.value
+  })));
+  const mergedProps = mergeProps$2(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
+  return createComponent(PresenceProvider, {
+    value: presenceApi,
     get children() {
-      return createComponent(ark.div, contentProps);
+      return createComponent(Show, {
+        get when() {
+          return !presenceApi().isUnmounted;
+        },
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
     }
-  }));
+  });
 };
 
 const TabIndicator = props => {
   const api = useTabsContext();
-  const indicatorProps = mergeProps$2(() => api().indicatorProps, props);
-  return createComponent(ark.div, indicatorProps);
+  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const TabList = props => {
   const api = useTabsContext();
-  const tablistProps = mergeProps$2(() => api().tablistProps, props);
-  return createComponent(ark.div, tablistProps);
+  const mergedProps = mergeProps$2(() => api().tablistProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const TabTrigger = props => {
   const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
   const api = useTabsContext();
-  const triggerProps = mergeProps$2(() => api().getTriggerProps(tabParams), restProps);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => api().getTriggerProps(tabParams), restProps);
+  return createComponent(ark.button, mergedProps);
 };
 
 const useTabs = props => {
@@ -2890,13 +3138,19 @@ const useTabs = props => {
 };
 
 const Tabs$1 = props => {
-  const [tabsParams, restProps] = createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
+  const [presenceProps, tabsProps] = splitPresenceProps(props);
+  const [tabsParams, restProps] = createSplitProps()(tabsProps, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(tabsParams);
-  const rootProps = mergeProps$2(() => api().rootProps, restProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
   return createComponent(TabsProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(PresencePropsProvider, {
+        value: presenceProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
     }
   });
 };
@@ -3032,8 +3286,6 @@ const [ToastProvider, useToastContext] = createContext({
   providerName: '<ToastProvider />'
 });
 
-// TODO simplify types after next zag.js upgrade
-
 const createToaster = props => {
   const {
     placement,
@@ -3138,11 +3390,11 @@ const useToggleGroup = props => {
 const ToggleGroup$1 = props => {
   const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'loop', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
   const api = useToggleGroup(groupParams);
-  const rootProps = mergeProps$2(() => api().rootProps, restProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
   return createComponent(ToggleGroupProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
@@ -3177,50 +3429,70 @@ const useTooltip = props => {
 };
 
 const Tooltip$1 = props => {
-  const [useTooltipProps, restProps] = createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [presenceProps, tooltipProps] = splitPresenceProps(props);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useTooltip(useTooltipProps);
-  return createComponent(TooltipProvider, mergeProps$1({
-    value: api
-  }, restProps));
+  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(TooltipProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
 };
 
 const TooltipArrow = props => {
   const tooltip = useTooltipContext();
-  const arrowProps = mergeProps$2(() => tooltip().arrowProps, props);
-  return createComponent(ark.div, arrowProps);
+  const mergedProps = mergeProps$2(() => tooltip().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const TooltipArrowTip = props => {
   const api = useTooltipContext();
-  const arrowTipProps = mergeProps$2(() => api().arrowTipProps, props);
-  return createComponent(ark.div, arrowTipProps);
+  const mergedProps = mergeProps$2(() => api().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const TooltipContent = props => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useTooltipContext();
-  const contentProps = mergeProps$2(() => api().contentProps, localProps);
-  return createComponent(Presence, mergeProps$1({
-    get present() {
-      return api().isOpen;
-    }
-  }, presenceProps, {
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
     get children() {
-      return createComponent(ark.div, contentProps);
+      return createComponent(ark.div, mergedProps);
     }
-  }));
+  });
 };
 
 const TooltipPositioner = props => {
   const api = useTooltipContext();
-  const positionerProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(ark.div, positionerProps);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const TooltipTrigger = props => {
   const api = useTooltipContext();
-  const triggerProps = mergeProps$2(() => api().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const Tooltip = Object.assign(Tooltip$1, {
@@ -3232,5 +3504,5 @@ const Tooltip = Object.assign(Tooltip$1, {
   Trigger: TooltipTrigger
 });
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
 //# sourceMappingURL=index.js.map