@ark-ui/solid 3.1.0 → 3.2.0

package/dist/esm/index.js

@@ -119,7 +119,7 @@ const [CollapsibleProvider, useCollapsibleContext] = createContext({
 
 const CollapsibleContent = props => {
   const api = useCollapsibleContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), props);
   return createComponent(Show, {
     get when() {
       return !api().unmounted;
@@ -226,7 +226,7 @@ const useCollapsible = props => {
 const CollapsibleRoot = props => {
   const [useCollapsibleProps, localProps] = createSplitProps()(props, ['defaultOpen', 'disabled', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
   const api = useCollapsible(useCollapsibleProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(CollapsibleProvider, {
     value: api,
     get children() {
@@ -235,9 +235,22 @@ const CollapsibleRoot = props => {
   });
 };
 
+const CollapsibleRootProvider = props => {
+  const [{
+    value: collapsible
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => collapsible().getRootProps(), localProps);
+  return createComponent(CollapsibleProvider, {
+    value: collapsible,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const CollapsibleTrigger = props => {
   const api = useCollapsibleContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -246,6 +259,7 @@ var collapsible = /*#__PURE__*/Object.freeze({
   Content: CollapsibleContent,
   Context: CollapsibleContext,
   Root: CollapsibleRoot,
+  RootProvider: CollapsibleRootProvider,
   Trigger: CollapsibleTrigger
 });
 
@@ -340,7 +354,7 @@ const AccordionRoot = props => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
   const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'defaultValue', 'disabled', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
   const api = useAccordion(useAccordionProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(AccordionProvider, {
     value: api,
     get children() {
@@ -354,6 +368,25 @@ const AccordionRoot = props => {
   });
 };
 
+const AccordionRootProvider = props => {
+  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
+  const [{
+    value: accordion
+  }, localProps] = createSplitProps()(accordionProps, ['value']);
+  const mergedProps = mergeProps$1(() => accordion().getRootProps(), localProps);
+  return createComponent(AccordionProvider, {
+    value: accordion,
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 var accordion = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: AccordionContext,
@@ -362,7 +395,8 @@ var accordion = /*#__PURE__*/Object.freeze({
   ItemContext: AccordionItemContext,
   ItemIndicator: AccordionItemIndicator,
   ItemTrigger: AccordionItemTrigger,
-  Root: AccordionRoot
+  Root: AccordionRoot,
+  RootProvider: AccordionRootProvider
 });
 
 const [AvatarProvider, useAvatarContext] = createContext({
@@ -374,13 +408,13 @@ const AvatarContext = props => props.children(useAvatarContext());
 
 const AvatarFallback = props => {
   const context = useAvatarContext();
-  const mergedProps = mergeProps$1(() => context().fallbackProps, props);
+  const mergedProps = mergeProps$1(() => context().getFallbackProps(), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const AvatarImage = props => {
   const context = useAvatarContext();
-  const mergedProps = mergeProps$1(() => context().imageProps, props);
+  const mergedProps = mergeProps$1(() => context().getImageProps(), props);
   return createComponent(ark.img, mergedProps);
 };
 
@@ -403,7 +437,7 @@ const useAvatar = props => {
 const AvatarRoot = props => {
   const [useAvatarProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange']);
   const context = useAvatar(useAvatarProps);
-  const mergedProps = mergeProps$1(() => context().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => context().getRootProps(), localProps);
   return createComponent(AvatarProvider, {
     value: context,
     get children() {
@@ -412,12 +446,26 @@ const AvatarRoot = props => {
   });
 };
 
+const AvatarRootProvider = props => {
+  const [{
+    value: avatar
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => avatar().getRootProps(), localProps);
+  return createComponent(AvatarProvider, {
+    value: avatar,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 var avatar = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: AvatarContext,
   Fallback: AvatarFallback,
   Image: AvatarImage,
-  Root: AvatarRoot
+  Root: AvatarRoot,
+  RootProvider: AvatarRootProvider
 });
 
 const [CarouselProvider, useCarouselContext] = createContext({
@@ -441,7 +489,7 @@ const CarouselIndicator = props => {
 
 const CarouselIndicatorGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$1(() => api().indicatorGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().getIndicatorGroupProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -454,19 +502,19 @@ const CarouselItem = props => {
 
 const CarouselItemGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$1(() => api().itemGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().getItemGroupProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const CarouselNextTrigger = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getNextTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const CarouselPrevTrigger = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPrevTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -490,7 +538,7 @@ const useCarousel = props => {
 const CarouselRoot = props => {
   const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'defaultIndex', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
   const api = useCarousel(useCarouselProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(CarouselProvider, {
     value: api,
     get children() {
@@ -499,9 +547,22 @@ const CarouselRoot = props => {
   });
 };
 
+const CarouselRootProvider = props => {
+  const [{
+    value: carousel
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => carousel().getRootProps(), localProps);
+  return createComponent(CarouselProvider, {
+    value: carousel,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const CarouselViewport = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$1(() => api().viewportProps, props);
+  const mergedProps = mergeProps$1(() => api().getViewportProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -516,6 +577,7 @@ var carousel = /*#__PURE__*/Object.freeze({
   NextTrigger: CarouselNextTrigger,
   PrevTrigger: CarouselPrevTrigger,
   Root: CarouselRoot,
+  RootProvider: CarouselRootProvider,
   Viewport: CarouselViewport
 });
 
@@ -528,20 +590,20 @@ const CheckboxContext = props => props.children(useCheckboxContext());
 
 const CheckboxControl = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = mergeProps$1(() => checkbox().controlProps, props);
+  const mergedProps = mergeProps$1(() => checkbox().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const CheckboxHiddenInput = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = mergeProps$1(() => checkbox().hiddenInputProps, props);
+  const mergedProps = mergeProps$1(() => checkbox().getHiddenInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
 const CheckboxIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
   const checkbox = useCheckboxContext();
-  const mergedProps = mergeProps$1(() => checkbox().indicatorProps, localProps);
+  const mergedProps = mergeProps$1(() => checkbox().getIndicatorProps(), localProps);
   return createComponent(ark.div, mergeProps(mergedProps, {
     get hidden() {
       return !(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked);
@@ -551,7 +613,7 @@ const CheckboxIndicator = props => {
 
 const CheckboxLabel = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = mergeProps$1(() => checkbox().labelProps, props);
+  const mergedProps = mergeProps$1(() => checkbox().getLabelProps(), props);
   return createComponent(ark.span, mergedProps);
 };
 
@@ -575,7 +637,20 @@ const useCheckbox = props => {
 const CheckboxRoot = props => {
   const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'defaultChecked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
   const checkbox = useCheckbox(useCheckboxProps);
-  const mergedProps = mergeProps$1(() => checkbox().rootProps, labelprops);
+  const mergedProps = mergeProps$1(() => checkbox().getRootProps(), labelprops);
+  return createComponent(CheckboxProvider, {
+    value: checkbox,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const CheckboxRootProvider = props => {
+  const [{
+    value: checkbox
+  }, labelprops] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => checkbox().getRootProps(), labelprops);
   return createComponent(CheckboxProvider, {
     value: checkbox,
     get children() {
@@ -591,7 +666,8 @@ var checkbox = /*#__PURE__*/Object.freeze({
   HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
-  Root: CheckboxRoot
+  Root: CheckboxRoot,
+  RootProvider: CheckboxRootProvider
 });
 
 const [ClipboardProvider, useClipboardContext] = createContext({
@@ -603,7 +679,7 @@ const ClipboardContext = props => props.children(useClipboardContext());
 
 const ClipboardControl = props => {
   const api = useClipboardContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -633,13 +709,13 @@ const ClipboardIndicator = props => {
 
 const ClipboardInput = props => {
   const api = useClipboardContext();
-  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().getInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
 const ClipboardLabel = props => {
   const api = useClipboardContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -660,7 +736,7 @@ const useClipboard = props => {
 const ClipboardRoot = props => {
   const [useClipboardProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange', 'timeout', 'value']);
   const api = useClipboard(useClipboardProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(ClipboardProvider, {
     value: api,
     get children() {
@@ -669,9 +745,22 @@ const ClipboardRoot = props => {
   });
 };
 
+const ClipboardRootProvider = props => {
+  const [{
+    value: clipboard
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => clipboard().getRootProps(), localProps);
+  return createComponent(ClipboardProvider, {
+    value: clipboard,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ClipboardTrigger = props => {
   const api = useClipboardContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -683,6 +772,7 @@ var clipboard = /*#__PURE__*/Object.freeze({
   Input: ClipboardInput,
   Label: ClipboardLabel,
   Root: ClipboardRoot,
+  RootProvider: ClipboardRootProvider,
   Trigger: ClipboardTrigger
 });
 
@@ -809,7 +899,7 @@ const [PresenceProvider, usePresenceContext] = createContext({
 const ColorPickerContent = props => {
   const api = useColorPickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -824,19 +914,19 @@ const ColorPickerContext = props => props.children(useColorPickerContext());
 
 const ColorPickerControl = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerEyeDropperTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().eyeDropperTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getEyeDropperTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerFormatSelect = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().formatSelectProps, props);
+  const mergedProps = mergeProps$1(() => api().getFormatSelectProps(), props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return createComponent(Index, {
@@ -856,26 +946,26 @@ const ColorPickerFormatSelect = props => {
 
 const ColorPickerFormatTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().formatTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getFormatTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerHiddenInput = props => {
   const colorPicker = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => colorPicker().hiddenInputProps, props);
+  const mergedProps = mergeProps$1(() => colorPicker().getHiddenInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
 const ColorPickerPositioner = props => {
   const api = useColorPickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -912,7 +1002,7 @@ const ColorPickerRoot = props => {
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().open
   })));
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(ColorPickerProvider, {
     value: api,
     get children() {
@@ -926,6 +1016,28 @@ const ColorPickerRoot = props => {
   });
 };
 
+const ColorPickerRootProvider = props => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [{
+    value: colorPicker
+  }, localProps] = createSplitProps()(colorPickerProps, ['value']);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: colorPicker().open
+  })));
+  const mergedProps = mergeProps$1(() => colorPicker().getRootProps(), localProps);
+  return createComponent(ColorPickerProvider, {
+    value: colorPicker,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
@@ -945,7 +1057,7 @@ const ColorPickerSwatch = props => {
 
 const ColorPickerSwatchGroup = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().swatchGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().getSwatchGroupProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -972,7 +1084,7 @@ const ColorPickerTransparencyGrid = props => {
 
 const ColorPickerTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -1040,14 +1152,14 @@ const [ComboboxProvider, useComboboxContext] = createContext({
 
 const ComboboxClearTrigger = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$1(() => combobox().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => combobox().getClearTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ComboboxContent = props => {
   const api = useComboboxContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1062,13 +1174,13 @@ const ComboboxContext = props => props.children(useComboboxContext());
 
 const ComboboxControl = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$1(() => combobox().controlProps, props);
+  const mergedProps = mergeProps$1(() => combobox().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$1(() => combobox().inputProps, props);
+  const mergedProps = mergeProps$1(() => combobox().getInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
@@ -1147,14 +1259,14 @@ const ComboboxItemText = props => {
 
 const ComboboxLabel = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$1(() => combobox().labelProps, props);
+  const mergedProps = mergeProps$1(() => combobox().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
 const ComboboxPositioner = props => {
   const api = useComboboxContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1194,7 +1306,7 @@ const ComboboxRoot = props => {
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().open
   })));
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(ComboboxProvider, {
     value: api,
     get children() {
@@ -1208,6 +1320,28 @@ const ComboboxRoot = props => {
   });
 };
 
+const ComboboxRootProvider = props => {
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
+  const [{
+    value: combobox
+  }, localProps] = createSplitProps()(comboboxProps, ['value']);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: combobox().open
+  })));
+  const mergedProps = mergeProps$1(() => combobox().getRootProps(), localProps);
+  return createComponent(ComboboxProvider, {
+    value: combobox,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const ComboboxTrigger = props => {
   const [triggerProps, localProps] = createSplitProps()(props, ['focusable']);
   const combobox = useComboboxContext();
@@ -1231,6 +1365,7 @@ var combobox = /*#__PURE__*/Object.freeze({
   Label: ComboboxLabel,
   Positioner: ComboboxPositioner,
   Root: ComboboxRoot,
+  RootProvider: ComboboxRootProvider,
   Trigger: ComboboxTrigger
 });
 
@@ -1241,14 +1376,14 @@ const [DatePickerProvider, useDatePickerContext] = createContext({
 
 const DatePickerClearTrigger = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getClearTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DatePickerContent = props => {
   const api = useDatePickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1263,7 +1398,7 @@ const DatePickerContext = props => props.children(useDatePickerContext());
 
 const DatePickerControl = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -1276,14 +1411,14 @@ const DatePickerInput = props => {
 
 const DatePickerLabel = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
 var _tmpl$$3 = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().monthSelectProps, props);
+  const mergedProps = mergeProps$1(() => api().getMonthSelectProps(), props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
@@ -1315,7 +1450,7 @@ const DatePickerNextTrigger = props => {
 const DatePickerPositioner = props => {
   const api = useDatePickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1342,7 +1477,7 @@ const DatePickerPrevTrigger = props => {
 
 const DatePickerRangeText = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().rangeTextProps, props);
+  const mergedProps = mergeProps$1(() => api().getRangeTextProps(), props);
   return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return api().visibleRangeText.start;
@@ -1379,7 +1514,7 @@ const DatePickerRoot = props => {
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().open
   })));
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(DatePickerProvider, {
     value: api,
     get children() {
@@ -1393,6 +1528,28 @@ const DatePickerRoot = props => {
   });
 };
 
+const DatePickerRootProvider = props => {
+  const [presenceProps, datePickerProps] = splitPresenceProps(props);
+  const [{
+    value: datePicker
+  }, localProps] = createSplitProps()(datePickerProps, ['value']);
+  const presence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: datePicker().open
+  })));
+  const mergedProps = mergeProps$1(() => datePicker().getRootProps(), localProps);
+  return createComponent(DatePickerProvider, {
+    value: datePicker,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const [DatePickerTableProvider, useDatePickerTableContext] = createContext({
   hookName: 'useDatePickerTableContext',
   providerName: '<DatePickerTableProvider />'
@@ -1434,13 +1591,18 @@ const DatePickerTableCell = props => {
   const [cellProps, localProps] = createSplitProps()(props, ['disabled', 'value', 'visibleRange', 'columns']);
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
-  const tableCellProps = {
-    day: api().getDayTableCellProps,
-    month: api().getMonthTableCellProps,
-    year: api().getYearTableCellProps
-    // @ts-expect-error use filter guard
-  }[viewProps.view](cellProps);
-  const mergedProps = mergeProps$1(() => tableCellProps, localProps);
+  const tableCellProps = createMemo(() => {
+    const viewMap = {
+      day: api().getDayTableCellProps,
+      month: api().getMonthTableCellProps,
+      year: api().getYearTableCellProps
+    };
+    const viewFn = viewMap[viewProps.view];
+
+    // @ts-expect-error
+    return viewFn(cellProps);
+  });
+  const mergedProps = mergeProps$1(tableCellProps, localProps);
   return createComponent(DatePickerTableCellProvider, {
     value: cellProps,
     get children() {
@@ -1491,7 +1653,7 @@ const DatePickerTableRow = props => {
 
 const DatePickerTrigger = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -1528,7 +1690,7 @@ const DatePickerViewTrigger = props => {
 var _tmpl$$2 = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$1(() => api().yearSelectProps, props);
+  const mergedProps = mergeProps$1(() => api().getYearSelectProps(), props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return getYearsRange({
@@ -1566,6 +1728,7 @@ var datePicker = /*#__PURE__*/Object.freeze({
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
   Root: DatePickerRoot,
+  RootProvider: DatePickerRootProvider,
   Table: DatePickerTable,
   TableBody: DatePickerTableBody,
   TableCell: DatePickerTableCell,
@@ -1591,7 +1754,7 @@ const DialogBackdrop = props => {
   const presenceApi = usePresence(mergeProps$1(renderStrategyProps, () => ({
     present: api().open
   })));
-  const mergedProps = mergeProps$1(() => api().backdropProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getBackdropProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1604,14 +1767,14 @@ const DialogBackdrop = props => {
 
 const DialogCloseTrigger = props => {
   const dialog = useDialogContext();
-  const mergedProps = mergeProps$1(() => dialog().closeTriggerProps, props);
+  const mergedProps = mergeProps$1(() => dialog().getCloseTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DialogContent = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1626,14 +1789,14 @@ const DialogContext = props => props.children(useDialogContext());
 
 const DialogDescription = props => {
   const dialog = useDialogContext();
-  const mergedProps = mergeProps$1(() => dialog().descriptionProps, props);
+  const mergedProps = mergeProps$1(() => dialog().getDescriptionProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const DialogPositioner = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1688,16 +1851,42 @@ const DialogRoot = props => {
   });
 };
 
+const DialogRootProvider = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: localProps.value().open
+  })));
+  return createComponent(DialogProvider, {
+    get value() {
+      return localProps.value;
+    },
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(PresenceProvider, {
+            value: apiPresence,
+            get children() {
+              return localProps.children;
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const DialogTitle = props => {
   const dialog = useDialogContext();
-  const mergedProps = mergeProps$1(() => dialog().titleProps, props);
+  const mergedProps = mergeProps$1(() => dialog().getTitleProps(), props);
   return createComponent(ark.h2, mergedProps);
 };
 
 const DialogTrigger = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), () => ({
     'aria-controls': presenceApi().unmounted && null
   }), props);
   return createComponent(ark.button, mergedProps);
@@ -1712,6 +1901,7 @@ var dialog = /*#__PURE__*/Object.freeze({
   Description: DialogDescription,
   Positioner: DialogPositioner,
   Root: DialogRoot,
+  RootProvider: DialogRootProvider,
   Title: DialogTitle,
   Trigger: DialogTrigger
 });
@@ -1723,13 +1913,13 @@ const [EditableProvider, useEditableContext] = createContext({
 
 const EditableArea = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().areaProps, props);
+  const mergedProps = mergeProps$1(() => api().getAreaProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const EditableCancelTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().cancelTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getCancelTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -1737,31 +1927,31 @@ const EditableContext = props => props.children(useEditableContext());
 
 const EditableControl = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const EditableEditTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().editTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getEditTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const EditableInput = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().getInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
 const EditableLabel = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
 const EditablePreview = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().previewProps, props);
+  const mergedProps = mergeProps$1(() => api().getPreviewProps(), props);
   return createComponent(ark.span, mergedProps);
 };
 
@@ -1785,7 +1975,7 @@ const useEditable = props => {
 const EditableRoot = props => {
   const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultValue', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const api = useEditable(useEditableProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(EditableProvider, {
     value: api,
     get children() {
@@ -1794,9 +1984,22 @@ const EditableRoot = props => {
   });
 };
 
+const EditableRootProvider = props => {
+  const [{
+    value: editable
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => editable().getRootProps(), localProps);
+  return createComponent(EditableProvider, {
+    value: editable,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const EditableSubmitTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$1(() => api().submitTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getSubmitTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -1811,6 +2014,7 @@ var editable = /*#__PURE__*/Object.freeze({
   Label: EditableLabel,
   Preview: EditablePreview,
   Root: EditableRoot,
+  RootProvider: EditableRootProvider,
   SubmitTrigger: EditableSubmitTrigger
 });
 
@@ -1823,10 +2027,16 @@ const FileUploadContext = props => props.children(useFileUploadContext());
 
 const FileUploadDropzone = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => fileUpload().dropzoneProps, props);
+  const mergedProps = mergeProps$1(() => fileUpload().getDropzoneProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
+const FileUploadHiddenInput = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getHiddenInputProps(), props);
+  return createComponent(ark.input, mergedProps);
+};
+
 const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
   hookName: 'useFileUploadItemPropsContext',
   providerName: '<FileUploadItemPropsProvider />'
@@ -1853,7 +2063,7 @@ const FileUploadItemDeleteTrigger = props => {
 
 const FileUploadItemGroup = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => fileUpload().itemGroupProps, props);
+  const mergedProps = mergeProps$1(() => fileUpload().getItemGroupProps(), props);
   return createComponent(ark.ul, mergedProps);
 };
 
@@ -1901,7 +2111,7 @@ const FileUploadItemSizeText = props => {
 
 const FileUploadLabel = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => fileUpload().labelProps, props);
+  const mergedProps = mergeProps$1(() => fileUpload().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -1924,7 +2134,7 @@ const useFileUpload = props => {
 const FileUploadRoot = props => {
   const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
   const fileUpload = useFileUpload(fileUploadProps);
-  const mergedProps = mergeProps$1(() => fileUpload().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => fileUpload().getRootProps(), localProps);
   return createComponent(FileUploadProvider, {
     value: fileUpload,
     get children() {
@@ -1933,16 +2143,23 @@ const FileUploadRoot = props => {
   });
 };
 
-const FileUploadTrigger = props => {
-  const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => fileUpload().triggerProps, props);
-  return createComponent(ark.button, mergedProps);
+const FileUploadRootProvider = props => {
+  const [{
+    value: fileUpload
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => fileUpload().getRootProps(), localProps);
+  return createComponent(FileUploadProvider, {
+    value: fileUpload,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
-const FileUploadHiddenInput = props => {
+const FileUploadTrigger = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => fileUpload().hiddenInputProps, props);
-  return createComponent(ark.input, mergedProps);
+  const mergedProps = mergeProps$1(() => fileUpload().getTriggerProps(), props);
+  return createComponent(ark.button, mergedProps);
 };
 
 var fileUpload = /*#__PURE__*/Object.freeze({
@@ -1959,6 +2176,7 @@ var fileUpload = /*#__PURE__*/Object.freeze({
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
   Root: FileUploadRoot,
+  RootProvider: FileUploadRootProvider,
   Trigger: FileUploadTrigger
 });
 
@@ -1989,20 +2207,20 @@ const [HoverCardProvider, useHoverCardContext] = createContext({
 
 const HoverCardArrow = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = mergeProps$1(() => hoverCard().arrowProps, props);
+  const mergedProps = mergeProps$1(() => hoverCard().getArrowProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const HoverCardArrowTip = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = mergeProps$1(() => hoverCard().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => hoverCard().getArrowTipProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const HoverCardContent = props => {
   const api = useHoverCardContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2018,7 +2236,7 @@ const HoverCardContext = props => props.children(useHoverCardContext());
 const HoverCardPositioner = props => {
   const api = useHoverCardContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2067,9 +2285,28 @@ const HoverCardRoot = props => {
   });
 };
 
+const HoverCardRootProvider = props => {
+  const [presenceProps, {
+    value: hoverCard,
+    children
+  }] = splitPresenceProps(props);
+  const presence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: hoverCard().open
+  })));
+  return createComponent(HoverCardProvider, {
+    value: hoverCard,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presence,
+        children: children
+      });
+    }
+  });
+};
+
 const HoverCardTrigger = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = mergeProps$1(() => hoverCard().triggerProps, props);
+  const mergedProps = mergeProps$1(() => hoverCard().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -2081,6 +2318,7 @@ var hoverCard = /*#__PURE__*/Object.freeze({
   Context: HoverCardContext,
   Positioner: HoverCardPositioner,
   Root: HoverCardRoot,
+  RootProvider: HoverCardRootProvider,
   Trigger: HoverCardTrigger
 });
 
@@ -2092,13 +2330,13 @@ const [MenuProvider, useMenuContext] = createContext({
 
 const MenuArrow = props => {
   const context = useMenuContext();
-  const mergedProps = mergeProps$1(() => context().arrowProps, props);
+  const mergedProps = mergeProps$1(() => context().getArrowProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const MenuArrowTip = props => {
   const context = useMenuContext();
-  const mergedProps = mergeProps$1(() => context().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => context().getArrowTipProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2136,7 +2374,7 @@ const MenuCheckboxItem = props => {
 const MenuContent = props => {
   const context = useMenuContext();
   const presenceContext = usePresenceContext();
-  const mergedProps = mergeProps$1(() => context().contentProps, () => presenceContext().presenceProps, props);
+  const mergedProps = mergeProps$1(() => context().getContentProps(), () => presenceContext().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceContext().unmounted;
@@ -2151,13 +2389,13 @@ const MenuContext = props => props.children(useMenuContext());
 
 const MenuContextTrigger = props => {
   const context = useMenuContext();
-  const mergedProps = mergeProps$1(() => context().contextTriggerProps, props);
+  const mergedProps = mergeProps$1(() => context().getContextTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const MenuIndicator = props => {
   const context = useMenuContext();
-  const mergedProps = mergeProps$1(() => context().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => context().getIndicatorProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2222,7 +2460,7 @@ const MenuItemText = props => {
 const MenuPositioner = props => {
   const context = useMenuContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps$1(() => context().positionerProps, props);
+  const mergedProps = mergeProps$1(() => context().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presence().unmounted;
@@ -2350,16 +2588,57 @@ const MenuRoot = props => {
   });
 };
 
+const MenuRootProvider = props => {
+  const parentApi = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const [presenceProps, {
+    value: menu,
+    children
+  }] = splitPresenceProps(props);
+  const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
+    present: menu.api().open
+  })));
+  createEffect(() => {
+    if (!parentMachine) return;
+    parentApi?.().setChild(menu.machine);
+    menu.api().setParent(parentMachine);
+  });
+  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu.api());
+  return createComponent(MenuTriggerItemProvider, {
+    value: triggerItemContext,
+    get children() {
+      return createComponent(MenuMachineProvider, {
+        get value() {
+          return menu.machine;
+        },
+        get children() {
+          return createComponent(MenuProvider, {
+            get value() {
+              return menu.api;
+            },
+            get children() {
+              return createComponent(PresenceProvider, {
+                value: presenceApi,
+                children: children
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const MenuSeparator = props => {
   const menu = useMenuContext();
-  const mergedProps = mergeProps$1(() => menu().separatorProps, props);
+  const mergedProps = mergeProps$1(() => menu().getSeparatorProps(), props);
   return createComponent(ark.hr, mergedProps);
 };
 
 const MenuTrigger = props => {
   const api = useMenuContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), () => ({
     'aria-controls': presenceApi().unmounted && null
   }), props);
   return createComponent(ark.button, mergedProps);
@@ -2390,6 +2669,7 @@ var menu = /*#__PURE__*/Object.freeze({
   RadioItem: MenuRadioItem,
   RadioItemGroup: MenuRadioItemGroup,
   Root: MenuRoot,
+  RootProvider: MenuRootProvider,
   Separator: MenuSeparator,
   Trigger: MenuTrigger,
   TriggerItem: MenuTriggerItem
@@ -2404,31 +2684,31 @@ const NumberInputContext = props => props.children(useNumberInputContext());
 
 const NumberInputControl = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const NumberInputDecrementTrigger = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$1(() => api().decrementTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getDecrementTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const NumberInputIncrementTrigger = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$1(() => api().incrementTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getIncrementTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const NumberInputInput = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().getInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
 const NumberInputLabel = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -2452,7 +2732,7 @@ const useNumberInput = props => {
 const NumberInputRoot = props => {
   const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'defaultValue', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(NumberInputProvider, {
     value: api,
     get children() {
@@ -2461,9 +2741,22 @@ const NumberInputRoot = props => {
   });
 };
 
+const NumberInputRootProvider = props => {
+  const [{
+    value: numberInput
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => numberInput().getRootProps(), localProps);
+  return createComponent(NumberInputProvider, {
+    value: numberInput,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const NumberInputScrubber = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$1(() => api().scrubberProps, props);
+  const mergedProps = mergeProps$1(() => api().getScrubberProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2502,13 +2795,13 @@ const PaginationItem = props => {
 
 const PaginationNextTrigger = props => {
   const api = usePaginationContext();
-  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getNextTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const PaginationPrevTrigger = props => {
   const api = usePaginationContext();
-  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPrevTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -2532,7 +2825,7 @@ const usePagination = props => {
 const PaginationRoot = props => {
   const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'defaultPage', 'id', 'ids', 'onPageChange', 'onPageSizeChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const api = usePagination(usePaginationProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(PaginationProvider, {
     value: api,
     get children() {
@@ -2541,6 +2834,19 @@ const PaginationRoot = props => {
   });
 };
 
+const PaginationRootProvider = props => {
+  const [{
+    value: pagination
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => pagination().getRootProps(), localProps);
+  return createComponent(PaginationProvider, {
+    value: pagination,
+    get children() {
+      return createComponent(ark.nav, mergedProps);
+    }
+  });
+};
+
 var pagination = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: PaginationContext,
@@ -2548,7 +2854,8 @@ var pagination = /*#__PURE__*/Object.freeze({
   Item: PaginationItem,
   NextTrigger: PaginationNextTrigger,
   PrevTrigger: PaginationPrevTrigger,
-  Root: PaginationRoot
+  Root: PaginationRoot,
+  RootProvider: PaginationRootProvider
 });
 
 const [PinInputProvider, usePinInputContext] = createContext({
@@ -2560,10 +2867,16 @@ const PinInputContext = props => props.children(usePinInputContext());
 
 const PinInputControl = props => {
   const api = usePinInputContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
+const PinInputHiddenInput = props => {
+  const pinInput = usePinInputContext();
+  const mergedProps = mergeProps$1(() => pinInput().getHiddenInputProps(), props);
+  return createComponent(ark.input, mergedProps);
+};
+
 const PinInputInput = props => {
   const [inputProps, localProps] = createSplitProps()(props, ['index']);
   const api = usePinInputContext();
@@ -2573,7 +2886,7 @@ const PinInputInput = props => {
 
 const PinInputLabel = props => {
   const api = usePinInputContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -2597,7 +2910,7 @@ const usePinInput = props => {
 const PinInputRoot = props => {
   const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const pinInput = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps$1(() => pinInput().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => pinInput().getRootProps(), localProps);
   return createComponent(PinInputProvider, {
     value: pinInput,
     get children() {
@@ -2606,10 +2919,17 @@ const PinInputRoot = props => {
   });
 };
 
-const PinInputHiddenInput = props => {
-  const pinInput = usePinInputContext();
-  const mergedProps = mergeProps$1(() => pinInput().hiddenInputProps, props);
-  return createComponent(ark.input, mergedProps);
+const PinInputRootProvider = props => {
+  const [{
+    value: pinInput
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => pinInput().getRootProps(), localProps);
+  return createComponent(PinInputProvider, {
+    value: pinInput,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 var pinInput = /*#__PURE__*/Object.freeze({
@@ -2619,7 +2939,8 @@ var pinInput = /*#__PURE__*/Object.freeze({
   HiddenInput: PinInputHiddenInput,
   Input: PinInputInput,
   Label: PinInputLabel,
-  Root: PinInputRoot
+  Root: PinInputRoot,
+  RootProvider: PinInputRootProvider
 });
 
 const [PopoverProvider, usePopoverContext] = createContext({
@@ -2629,32 +2950,32 @@ const [PopoverProvider, usePopoverContext] = createContext({
 
 const PopoverAnchor = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$1(() => api().anchorProps, props);
+  const mergedProps = mergeProps$1(() => api().getAnchorProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrow = props => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps$1(() => popover().arrowProps, props);
+  const mergedProps = mergeProps$1(() => popover().getArrowProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrowTip = props => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps$1(() => popover().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => popover().getArrowTipProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverCloseTrigger = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$1(() => api().closeTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getCloseTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const PopoverContent = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2669,20 +2990,20 @@ const PopoverContext = props => props.children(usePopoverContext());
 
 const PopoverDescription = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
+  const mergedProps = mergeProps$1(() => api().getDescriptionProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverIndicator = props => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps$1(() => popover().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => popover().getIndicatorProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverPositioner = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2731,16 +3052,35 @@ const PopoverRoot = props => {
   });
 };
 
+const PopoverRootProvider = props => {
+  const [presenceProps, {
+    value: popover,
+    children
+  }] = splitPresenceProps(props);
+  const presence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: popover().open
+  })));
+  return createComponent(PopoverProvider, {
+    value: popover,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presence,
+        children: children
+      });
+    }
+  });
+};
+
 const PopoverTitle = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$1(() => api().titleProps, props);
+  const mergedProps = mergeProps$1(() => api().getTitleProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverTrigger = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), () => ({
     'aria-controls': presenceApi().unmounted && null
   }), props);
   return createComponent(ark.button, mergedProps);
@@ -2758,6 +3098,7 @@ var popover = /*#__PURE__*/Object.freeze({
   Indicator: PopoverIndicator,
   Positioner: PopoverPositioner,
   Root: PopoverRoot,
+  RootProvider: PopoverRootProvider,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
 });
@@ -2769,19 +3110,19 @@ const [ProgressProvider, useProgressContext] = createContext({
 
 const ProgressCircle = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().circleProps, props);
+  const mergedProps = mergeProps$1(() => api().getCircleProps(), props);
   return createComponent(ark.svg, mergedProps);
 };
 
 const ProgressCircleRange = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().circleRangeProps, props);
+  const mergedProps = mergeProps$1(() => api().getCircleRangeProps(), props);
   return createComponent(ark.circle, mergedProps);
 };
 
 const ProgressCircleTrack = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().circleTrackProps, props);
+  const mergedProps = mergeProps$1(() => api().getCircleTrackProps(), props);
   return createComponent(ark.circle, mergedProps);
 };
 
@@ -2789,13 +3130,13 @@ const ProgressContext = props => props.children(useProgressContext());
 
 const ProgressLabel = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
 const ProgressRange = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().rangeProps, props);
+  const mergedProps = mergeProps$1(() => api().getRangeProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2818,7 +3159,7 @@ const useProgress = props => {
 const ProgressRoot = props => {
   const [progressProps, localProps] = createSplitProps()(props, ['id', 'ids', 'max', 'min', 'orientation', 'translations', 'value']);
   const api = useProgress(progressProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(ProgressProvider, {
     value: api,
     get children() {
@@ -2827,15 +3168,28 @@ const ProgressRoot = props => {
   });
 };
 
+const ProgressRootProvider = props => {
+  const [{
+    value: progress
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => progress().getRootProps(), localProps);
+  return createComponent(ProgressProvider, {
+    value: progress,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ProgressTrack = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().trackProps, props);
+  const mergedProps = mergeProps$1(() => api().getTrackProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ProgressValueText = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$1(() => api().valueTextProps, props);
+  const mergedProps = mergeProps$1(() => api().getValueTextProps(), props);
   return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
       return props.children || api().valueAsString;
@@ -2859,6 +3213,7 @@ var progress = /*#__PURE__*/Object.freeze({
   Label: ProgressLabel,
   Range: ProgressRange,
   Root: ProgressRoot,
+  RootProvider: ProgressRootProvider,
   Track: ProgressTrack,
   ValueText: ProgressValueText,
   View: ProgressView
@@ -2873,7 +3228,7 @@ const RadioGroupContext = props => props.children(useRadioGroupContext());
 
 const RadioGroupIndicator = props => {
   const radioGroup = useRadioGroupContext();
-  const mergedProps = mergeProps$1(() => radioGroup().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => radioGroup().getIndicatorProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2930,7 +3285,7 @@ const RadioGroupItemText = props => {
 
 const RadioGroupLabel = props => {
   const radioGroup = useRadioGroupContext();
-  const mergedProps = mergeProps$1(() => radioGroup().labelProps, props);
+  const mergedProps = mergeProps$1(() => radioGroup().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -2954,7 +3309,20 @@ const useRadioGroup = props => {
 const RadioGroupRoot = props => {
   const [useRadioGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
   const radioGroup = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps$1(() => radioGroup().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => radioGroup().getRootProps(), localProps);
+  return createComponent(RadioGroupProvider, {
+    value: radioGroup,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const RadioGroupRootProvider = props => {
+  const [{
+    value: radioGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => radioGroup().getRootProps(), localProps);
   return createComponent(RadioGroupProvider, {
     value: radioGroup,
     get children() {
@@ -2973,7 +3341,8 @@ var radioGroup = /*#__PURE__*/Object.freeze({
   ItemHiddenInput: RadioGroupItemHiddenInput,
   ItemText: RadioGroupItemText,
   Label: RadioGroupLabel,
-  Root: RadioGroupRoot
+  Root: RadioGroupRoot,
+  RootProvider: RadioGroupRootProvider
 });
 
 const [RatingGroupProvider, useRatingGroupContext] = createContext({
@@ -2985,10 +3354,16 @@ const RatingGroupContext = props => props.children(useRatingGroupContext());
 
 const RatingGroupControl = props => {
   const ratingGroup = useRatingGroupContext();
-  const mergedProps = mergeProps$1(() => ratingGroup().controlProps, props);
+  const mergedProps = mergeProps$1(() => ratingGroup().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
+const RatingGroupHiddenInput = props => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => ratingGroup().getHiddenInputProps(), props);
+  return createComponent(ark.input, mergedProps);
+};
+
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
   hookName: 'useRatingGroupItemContext',
   providerName: '<RatingGroupItemProvider />'
@@ -3011,7 +3386,7 @@ const RatingGroupItemContext = props => props.children(useRatingGroupItemContext
 
 const RatingGroupLabel = props => {
   const api = useRatingGroupContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -3035,7 +3410,7 @@ const useRatingGroup = props => {
 const RatingGroupRoot = props => {
   const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
   const api = useRatingGroup(useRatingProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(RatingGroupProvider, {
     value: api,
     get children() {
@@ -3044,10 +3419,17 @@ const RatingGroupRoot = props => {
   });
 };
 
-const RatingGroupHiddenInput = props => {
-  const ratingGroup = useRatingGroupContext();
-  const mergedProps = mergeProps$1(() => ratingGroup().hiddenInputProps, props);
-  return createComponent(ark.input, mergedProps);
+const RatingGroupRootProvider = props => {
+  const [{
+    value: ratingGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => ratingGroup().getRootProps(), localProps);
+  return createComponent(RatingGroupProvider, {
+    value: ratingGroup,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 var ratingGroup = /*#__PURE__*/Object.freeze({
@@ -3070,7 +3452,7 @@ const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const SegmentGroupIndicator = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = mergeProps$1(() => segmentGroup().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+  const mergedProps = mergeProps$1(() => segmentGroup().getIndicatorProps(), segmentGroupAnatomy.build().indicator.attrs, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3127,7 +3509,7 @@ const SegmentGroupItemText = props => {
 
 const SegmentGroupLabel = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = mergeProps$1(() => segmentGroup().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  const mergedProps = mergeProps$1(() => segmentGroup().getLabelProps(), segmentGroupAnatomy.build().label.attrs, props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -3151,7 +3533,20 @@ const useSegmentGroup = props => {
 const SegmentGroupRoot = props => {
   const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = mergeProps$1(() => segmentGroup().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = mergeProps$1(() => segmentGroup().getRootProps(), segmentGroupAnatomy.build().root.attrs, localProps);
+  return createComponent(SegmentGroupProvider, {
+    value: segmentGroup,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SegmentGroupRootProvider = props => {
+  const [{
+    value: segmentGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => segmentGroup().getRootProps(), segmentGroupAnatomy.build().root.attrs, localProps);
   return createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -3181,14 +3576,14 @@ const [SelectProvider, useSelectContext] = createContext({
 
 const SelectClearTrigger = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => select().getClearTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const SelectContent = props => {
   const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => select().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => select().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -3203,7 +3598,7 @@ const SelectContext = props => props.children(useSelectContext());
 
 const SelectControl = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().controlProps, props);
+  const mergedProps = mergeProps$1(() => select().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3211,7 +3606,7 @@ var _tmpl$$1 = /*#__PURE__*/template(`<option value="">`),
   _tmpl$2 = /*#__PURE__*/template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().controlProps, props);
+  const mergedProps = mergeProps$1(() => select().getControlProps(), props);
   const isValueEmpty = createMemo(() => select().value.length === 0);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
@@ -3239,7 +3634,7 @@ const SelectHiddenSelect = props => {
 
 const SelectIndicator = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => select().getIndicatorProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3318,14 +3713,14 @@ const SelectItemText = props => {
 
 const SelectLabel = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().labelProps, props);
+  const mergedProps = mergeProps$1(() => select().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
 const SelectPositioner = props => {
   const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => select().positionerProps, props);
+  const mergedProps = mergeProps$1(() => select().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -3365,7 +3760,7 @@ const SelectRoot = props => {
   const presenceApi = usePresence(mergeProps$1(() => ({
     present: select().open
   }), presenceProps));
-  const mergedProps = mergeProps$1(() => select().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => select().getRootProps(), localProps);
   return createComponent(SelectProvider, {
     value: select,
     get children() {
@@ -3379,9 +3774,31 @@ const SelectRoot = props => {
   });
 };
 
+const SelectRootProvider = props => {
+  const [presenceProps, selectProps] = splitPresenceProps(props);
+  const [{
+    value: select
+  }, localProps] = createSplitProps()(selectProps, ['value']);
+  const presence = usePresence(mergeProps$1(() => ({
+    present: select().open
+  }), presenceProps));
+  const mergedProps = mergeProps$1(() => select().getRootProps(), localProps);
+  return createComponent(SelectProvider, {
+    value: select,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const SelectTrigger = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().triggerProps, props);
+  const mergedProps = mergeProps$1(() => select().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -3412,6 +3829,7 @@ var select = /*#__PURE__*/Object.freeze({
   Label: SelectLabel,
   Positioner: SelectPositioner,
   Root: SelectRoot,
+  RootProvider: SelectRootProvider,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
 });
@@ -3425,7 +3843,7 @@ const SliderContext = props => props.children(useSliderContext());
 
 const SliderControl = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3443,7 +3861,7 @@ const SliderHiddenInput = props => {
 
 const SliderLabel = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -3456,13 +3874,13 @@ const SliderMarker = props => {
 
 const SliderMarkerGroup = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$1(() => api().markerGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().getMarkerGroupProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SliderRange = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$1(() => api().rangeProps, props);
+  const mergedProps = mergeProps$1(() => api().getRangeProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3486,7 +3904,7 @@ const useSlider = props => {
 const SliderRoot = props => {
   const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'defaultValue', 'disabled', 'form', 'getAriaValueText', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useSlider(useSliderProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(SliderProvider, {
     value: api,
     get children() {
@@ -3495,6 +3913,19 @@ const SliderRoot = props => {
   });
 };
 
+const SliderRootProvider = props => {
+  const [{
+    value: slider
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => slider().getRootProps(), localProps);
+  return createComponent(SliderProvider, {
+    value: slider,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const SliderThumb = props => {
   const [thumbProps, localProps] = createSplitProps()(props, ['index', 'name']);
   const slider = useSliderContext();
@@ -3509,13 +3940,13 @@ const SliderThumb = props => {
 
 const SliderTrack = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$1(() => api().trackProps, props);
+  const mergedProps = mergeProps$1(() => api().getTrackProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SliderValueText = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$1(() => api().valueTextProps, props);
+  const mergedProps = mergeProps$1(() => api().getValueTextProps(), props);
   return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
       return props.children || api().value.join(',');
@@ -3533,6 +3964,7 @@ var slider = /*#__PURE__*/Object.freeze({
   MarkerGroup: SliderMarkerGroup,
   Range: SliderRange,
   Root: SliderRoot,
+  RootProvider: SliderRootProvider,
   Thumb: SliderThumb,
   Track: SliderTrack,
   ValueText: SliderValueText
@@ -3579,7 +4011,7 @@ const useSplitter = props => {
 const SplitterRoot = props => {
   const [useSplitterProps, localProps] = createSplitProps()(props, ['defaultSize', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
   const api = useSplitter(useSplitterProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(SplitterProvider, {
     value: api,
     get children() {
@@ -3588,12 +4020,26 @@ const SplitterRoot = props => {
   });
 };
 
+const SplitterRootProvider = props => {
+  const [{
+    value: splitter
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => splitter().getRootProps(), localProps);
+  return createComponent(SplitterProvider, {
+    value: splitter,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 var splitter = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: SplitterContext,
   Panel: SplitterPanel,
   ResizeTrigger: SplitterResizeTrigger,
-  Root: SplitterRoot
+  Root: SplitterRoot,
+  RootProvider: SplitterRootProvider
 });
 
 const [SwitchProvider, useSwitchContext] = createContext({
@@ -3605,19 +4051,19 @@ const SwitchContext = props => props.children(useSwitchContext());
 
 const SwitchControl = props => {
   const api = useSwitchContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const SwitchHiddenInput = props => {
   const api = useSwitchContext();
-  const mergedProps = mergeProps$1(() => api().hiddenInputProps, props);
+  const mergedProps = mergeProps$1(() => api().getHiddenInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
 const SwitchLabel = props => {
   const api = useSwitchContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.span, mergedProps);
 };
 
@@ -3641,7 +4087,20 @@ const useSwitch = props => {
 const SwitchRoot = props => {
   const [switchProps, localProps] = createSplitProps()(props, ['checked', 'defaultChecked', 'disabled', 'form', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
   const api = useSwitch(switchProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
+  return createComponent(SwitchProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const SwitchRootProvider = props => {
+  const [{
+    value: api
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(SwitchProvider, {
     value: api,
     get children() {
@@ -3652,7 +4111,7 @@ const SwitchRoot = props => {
 
 const SwitchThumb = props => {
   const api = useSwitchContext();
-  const mergedProps = mergeProps$1(() => api().thumbProps, props);
+  const mergedProps = mergeProps$1(() => api().getThumbProps(), props);
   return createComponent(ark.span, mergedProps);
 };
 
@@ -3663,6 +4122,7 @@ var _switch = /*#__PURE__*/Object.freeze({
   HiddenInput: SwitchHiddenInput,
   Label: SwitchLabel,
   Root: SwitchRoot,
+  RootProvider: SwitchRootProvider,
   Thumb: SwitchThumb
 });
 
@@ -3696,13 +4156,13 @@ const TabContent = props => {
 
 const TabIndicator = props => {
   const api = useTabsContext();
-  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => api().getIndicatorProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TabList = props => {
   const api = useTabsContext();
-  const mergedProps = mergeProps$1(() => api().listProps, props);
+  const mergedProps = mergeProps$1(() => api().getListProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3736,7 +4196,7 @@ const TabsRoot = props => {
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
   const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'composite', 'defaultValue', 'id', 'ids', 'loopFocus', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(useTabsProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), restProps);
   return createComponent(TabsProvider, {
     value: api,
     get children() {
@@ -3750,6 +4210,25 @@ const TabsRoot = props => {
   });
 };
 
+const TabsRootProvider = props => {
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
+  const [{
+    value: tabs
+  }, localprops] = createSplitProps()(tabsProps, ['value']);
+  const mergedProps = mergeProps$1(() => tabs().getRootProps(), localprops);
+  return createComponent(TabsProvider, {
+    value: tabs,
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 var tabs = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: TabContent,
@@ -3757,6 +4236,7 @@ var tabs = /*#__PURE__*/Object.freeze({
   Indicator: TabIndicator,
   List: TabList,
   Root: TabsRoot,
+  RootProvider: TabsRootProvider,
   Trigger: TabTrigger
 });
 
@@ -3767,7 +4247,7 @@ const [TagsInputProvider, useTagsInputContext] = createContext({
 
 const TagsInputClearTrigger = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getClearTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -3775,13 +4255,19 @@ const TagsInputContext = props => props.children(useTagsInputContext());
 
 const TagsInputControl = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().getControlProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
+const TagsInputHiddenInput = props => {
+  const tagsInput = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => tagsInput().getHiddenInputProps(), props);
+  return createComponent(ark.input, mergedProps);
+};
+
 const TagsInputInput = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().getInputProps(), props);
   return createComponent(ark.input, mergedProps);
 };
 
@@ -3829,12 +4315,6 @@ const TagsInputItemInput = props => {
   return createComponent(ark.input, mergedProps);
 };
 
-const TagsInputHiddenInput = props => {
-  const tagsInput = useTagsInputContext();
-  const mergedProps = mergeProps$1(() => tagsInput().hiddenInputProps, props);
-  return createComponent(ark.input, mergedProps);
-};
-
 const TagsInputItemPreview = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemPropsContext();
@@ -3851,7 +4331,7 @@ const TagsInputItemText = props => {
 
 const TagsInputLabel = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -3875,7 +4355,7 @@ const useTagsInput = props => {
 const TagsInputRoot = props => {
   const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'defaultValue', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(useTagsInputProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(TagsInputProvider, {
     value: api,
     get children() {
@@ -3884,6 +4364,19 @@ const TagsInputRoot = props => {
   });
 };
 
+const TagsInputRootProvider = props => {
+  const [{
+    value: tagsInput
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => tagsInput().getRootProps(), localProps);
+  return createComponent(TagsInputProvider, {
+    value: tagsInput,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 var tagsInput = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ClearTrigger: TagsInputClearTrigger,
@@ -3898,7 +4391,8 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   ItemPreview: TagsInputItemPreview,
   ItemText: TagsInputItemText,
   Label: TagsInputLabel,
-  Root: TagsInputRoot
+  Root: TagsInputRoot,
+  RootProvider: TagsInputRootProvider
 });
 
 const createToaster = props => {
@@ -3920,13 +4414,13 @@ const [ToastProvider, useToastContext] = createContext({
 
 const ToastActionTrigger = props => {
   const toast = useToastContext();
-  const mergedProps = mergeProps$1(() => toast().actionTriggerProps, props);
+  const mergedProps = mergeProps$1(() => toast().getActionTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ToastCloseTrigger = props => {
   const toast = useToastContext();
-  const mergedProps = mergeProps$1(() => toast().closeTriggerProps, props);
+  const mergedProps = mergeProps$1(() => toast().getCloseTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -3934,7 +4428,7 @@ const ToastContext = props => props.children(useToastContext());
 
 const ToastDescription = props => {
   const toast = useToastContext();
-  const mergedProps = mergeProps$1(() => toast().descriptionProps, props);
+  const mergedProps = mergeProps$1(() => toast().getDescriptionProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3945,17 +4439,17 @@ const ToastRoot = props => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
-    spread(_el$, mergeProps(() => toast().rootProps), false, true);
-    spread(_el$2, mergeProps(() => toast().ghostBeforeProps), false, false);
+    spread(_el$, mergeProps(() => toast().getRootProps()), false, true);
+    spread(_el$2, mergeProps(() => toast().getGhostBeforeProps()), false, false);
     insert(_el$, () => props.children, _el$3);
-    spread(_el$3, mergeProps(() => toast().ghostAfterProps), false, false);
+    spread(_el$3, mergeProps(() => toast().getGhostAfterProps()), false, false);
     return _el$;
   })();
 };
 
 const ToastTitle = props => {
   const toast = useToastContext();
-  const mergedProps = mergeProps$1(() => toast().titleProps, props);
+  const mergedProps = mergeProps$1(() => toast().getTitleProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -4038,7 +4532,7 @@ const useToggleGroup = props => {
 const ToggleGroupRoot = props => {
   const [useToggleGroupProps, restProps] = createSplitProps()(props, ['defaultValue', 'disabled', 'id', 'ids', 'loopFocus', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
   const api = useToggleGroup(useToggleGroupProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), restProps);
   return createComponent(ToggleGroupProvider, {
     value: api,
     get children() {
@@ -4047,6 +4541,19 @@ const ToggleGroupRoot = props => {
   });
 };
 
+const ToggleGroupRootProvider = props => {
+  const [{
+    value: toggleGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => toggleGroup().getRootProps(), localProps);
+  return createComponent(ToggleGroupProvider, {
+    value: toggleGroup,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 var toggleGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: ToggleGroupContext,
@@ -4061,20 +4568,20 @@ const [TooltipProvider, useTooltipContext] = createContext({
 
 const TooltipArrow = props => {
   const tooltip = useTooltipContext();
-  const mergedProps = mergeProps$1(() => tooltip().arrowProps, props);
+  const mergedProps = mergeProps$1(() => tooltip().getArrowProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TooltipArrowTip = props => {
   const api = useTooltipContext();
-  const mergedProps = mergeProps$1(() => api().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => api().getArrowTipProps(), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TooltipContent = props => {
   const api = useTooltipContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -4090,7 +4597,7 @@ const TooltipContext = props => props.children(useTooltipContext());
 const TooltipPositioner = props => {
   const api = useTooltipContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().getPositionerProps(), props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -4139,9 +4646,28 @@ const TooltipRoot = props => {
   });
 };
 
+const TooltipRootProvider = props => {
+  const [presenceProps, {
+    value: tooltip,
+    children
+  }] = splitPresenceProps(props);
+  const presence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: tooltip().open
+  })));
+  return createComponent(TooltipProvider, {
+    value: tooltip,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presence,
+        children: children
+      });
+    }
+  });
+};
+
 const TooltipTrigger = props => {
   const api = useTooltipContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(), props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -4153,6 +4679,7 @@ var tooltip = /*#__PURE__*/Object.freeze({
   Context: TooltipContext,
   Positioner: TooltipPositioner,
   Root: TooltipRoot,
+  RootProvider: TooltipRootProvider,
   Trigger: TooltipTrigger
 });
 
@@ -4279,7 +4806,7 @@ const TreeViewItemText = props => {
 
 const TreeViewLabel = props => {
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().getLabelProps(), props);
   return createComponent(ark.label, mergedProps);
 };
 
@@ -4304,7 +4831,7 @@ const useTreeView = props => {
 const TreeViewRoot = props => {
   const [useTreeViewProps, localProps] = createSplitProps()(props, ['defaultExpandedValue', 'defaultSelectedValue', 'expandedValue', 'expandOnClick', 'focusedValue', 'id', 'ids', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'selectedValue', 'selectionMode', 'typeahead']);
   const api = useTreeView(useTreeViewProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(TreeViewProvider, {
     value: api,
     get children() {
@@ -4313,9 +4840,22 @@ const TreeViewRoot = props => {
   });
 };
 
+const TreeViewRootProvider = props => {
+  const [{
+    value: treeView
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => treeView().getRootProps(), localProps);
+  return createComponent(TreeViewProvider, {
+    value: treeView,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const TreeViewTree = props => {
   const api = useTreeViewContext();
-  const mergedProps = mergeProps$1(() => api().treeProps, props);
+  const mergedProps = mergeProps$1(() => api().getTreeProps(), props);
   return createComponent(TreeViewDepthProvider, {
     value: 1,
     get children() {
@@ -4339,8 +4879,9 @@ var treeView = /*#__PURE__*/Object.freeze({
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
   Root: TreeViewRoot,
+  RootProvider: TreeViewRootProvider,
   Tree: TreeViewTree
 });
 
-export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, EnvironmentProvider, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputContext, PinInputControl, PinInputHiddenInput, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupHiddenInput, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemHiddenInput, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderContext, SliderControl, SliderHiddenInput, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchContext, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputHiddenInput, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemContext, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useClipboardContext, useCollapsibleContext, useColorPickerContext, useComboboxContext, useComboboxItemContext, useDatePickerContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useLocaleContext, useMenuContext, useMenuItemContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, useTreeViewItemContext };
+export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, AccordionRootProvider, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, AvatarRootProvider, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselRootProvider, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, CheckboxRootProvider, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardRootProvider, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxRootProvider, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerRootProvider, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogRootProvider, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableRootProvider, EditableSubmitTrigger, EnvironmentProvider, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadRootProvider, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardRootProvider, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuRootProvider, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputRootProvider, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, PaginationRootProvider, pinInput as PinInput, PinInputContext, PinInputControl, PinInputHiddenInput, PinInputInput, PinInputLabel, PinInputRoot, PinInputRootProvider, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressRootProvider, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RadioGroupRootProvider, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupHiddenInput, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, RatingGroupRootProvider, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemHiddenInput, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, SegmentGroupRootProvider, select as Select, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectRootProvider, SelectTrigger, SelectValueText, slider as Slider, SliderContext, SliderControl, SliderHiddenInput, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderRootProvider, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, SplitterRootProvider, _switch as Switch, SwitchContext, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchRootProvider, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, TabsRootProvider, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputHiddenInput, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, TagsInputRootProvider, toast as Toast, ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, ToggleGroupRootProvider, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipRootProvider, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemContext, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewRootProvider, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordion, useAccordionContext, useAccordionItemContext, useAvatar, useAvatarContext, useCarousel, useCarouselContext, useCheckbox, useCheckboxContext, useClipboard, useClipboardContext, useCollapsible, useCollapsibleContext, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useComboboxItemContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useEditable, useEditableContext, useEnvironmentContext, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useLocaleContext, useMenu, useMenuContext, useMenuItemContext, useNumberInput, useNumberInputContext, usePagination, usePaginationContext, usePinInput, usePinInputContext, usePopover, usePopoverContext, usePresence, usePresenceContext, useProgress, useProgressContext, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext, useSelect, useSelectContext, useSelectItemContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwitch, useSwitchContext, useTabs, useTabsContext, useTagsInput, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTreeView, useTreeViewContext, useTreeViewItemContext };
 //# sourceMappingURL=index.js.map