@ark-ui/solid 3.0.2 → 3.2.0

package/dist/cjs/index.js

@@ -136,10 +136,7 @@ const withAsProp = Component => {
       // @ts-expect-error
       const propsFn = userProps => {
         const [, restProps] = solidJs.splitProps(parentProps, ['ref']);
-        return {
-          ref: parentProps.ref,
-          ...solid.mergeProps(restProps, userProps)
-        };
+        return solid.mergeProps(restProps, userProps);
       };
       return localProps.asChild(propsFn);
     }
@@ -174,7 +171,7 @@ const [CollapsibleProvider, useCollapsibleContext] = createContext({
 
 const CollapsibleContent = props => {
   const api = useCollapsibleContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !api().unmounted;
@@ -281,7 +278,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(CollapsibleProvider, {
     value: api,
     get children() {
@@ -290,9 +287,22 @@ const CollapsibleRoot = props => {
   });
 };
 
+const CollapsibleRootProvider = props => {
+  const [{
+    value: collapsible
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => collapsible().getRootProps(), localProps);
+  return web.createComponent(CollapsibleProvider, {
+    value: collapsible,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const CollapsibleTrigger = props => {
   const api = useCollapsibleContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -301,6 +311,7 @@ var collapsible = /*#__PURE__*/Object.freeze({
   Content: CollapsibleContent,
   Context: CollapsibleContext,
   Root: CollapsibleRoot,
+  RootProvider: CollapsibleRootProvider,
   Trigger: CollapsibleTrigger
 });
 
@@ -395,7 +406,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(AccordionProvider, {
     value: api,
     get children() {
@@ -409,6 +420,25 @@ const AccordionRoot = props => {
   });
 };
 
+const AccordionRootProvider = props => {
+  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
+  const [{
+    value: accordion
+  }, localProps] = createSplitProps()(accordionProps, ['value']);
+  const mergedProps = solid.mergeProps(() => accordion().getRootProps(), localProps);
+  return web.createComponent(AccordionProvider, {
+    value: accordion,
+    get children() {
+      return web.createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 var accordion = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: AccordionContext,
@@ -417,7 +447,8 @@ var accordion = /*#__PURE__*/Object.freeze({
   ItemContext: AccordionItemContext,
   ItemIndicator: AccordionItemIndicator,
   ItemTrigger: AccordionItemTrigger,
-  Root: AccordionRoot
+  Root: AccordionRoot,
+  RootProvider: AccordionRootProvider
 });
 
 const [AvatarProvider, useAvatarContext] = createContext({
@@ -429,13 +460,13 @@ const AvatarContext = props => props.children(useAvatarContext());
 
 const AvatarFallback = props => {
   const context = useAvatarContext();
-  const mergedProps = solid.mergeProps(() => context().fallbackProps, props);
+  const mergedProps = solid.mergeProps(() => context().getFallbackProps(), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const AvatarImage = props => {
   const context = useAvatarContext();
-  const mergedProps = solid.mergeProps(() => context().imageProps, props);
+  const mergedProps = solid.mergeProps(() => context().getImageProps(), props);
   return web.createComponent(ark.img, mergedProps);
 };
 
@@ -458,7 +489,7 @@ const useAvatar = props => {
 const AvatarRoot = props => {
   const [useAvatarProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange']);
   const context = useAvatar(useAvatarProps);
-  const mergedProps = solid.mergeProps(() => context().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => context().getRootProps(), localProps);
   return web.createComponent(AvatarProvider, {
     value: context,
     get children() {
@@ -467,12 +498,26 @@ const AvatarRoot = props => {
   });
 };
 
+const AvatarRootProvider = props => {
+  const [{
+    value: avatar
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => avatar().getRootProps(), localProps);
+  return web.createComponent(AvatarProvider, {
+    value: avatar,
+    get children() {
+      return web.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({
@@ -496,7 +541,7 @@ const CarouselIndicator = props => {
 
 const CarouselIndicatorGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorGroupProps, props);
+  const mergedProps = solid.mergeProps(() => api().getIndicatorGroupProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -509,19 +554,19 @@ const CarouselItem = props => {
 
 const CarouselItemGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().itemGroupProps, props);
+  const mergedProps = solid.mergeProps(() => api().getItemGroupProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const CarouselNextTrigger = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().nextTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getNextTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const CarouselPrevTrigger = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().prevTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPrevTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -545,7 +590,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(CarouselProvider, {
     value: api,
     get children() {
@@ -554,9 +599,22 @@ const CarouselRoot = props => {
   });
 };
 
+const CarouselRootProvider = props => {
+  const [{
+    value: carousel
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => carousel().getRootProps(), localProps);
+  return web.createComponent(CarouselProvider, {
+    value: carousel,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const CarouselViewport = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().viewportProps, props);
+  const mergedProps = solid.mergeProps(() => api().getViewportProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -571,6 +629,7 @@ var carousel = /*#__PURE__*/Object.freeze({
   NextTrigger: CarouselNextTrigger,
   PrevTrigger: CarouselPrevTrigger,
   Root: CarouselRoot,
+  RootProvider: CarouselRootProvider,
   Viewport: CarouselViewport
 });
 
@@ -583,20 +642,20 @@ const CheckboxContext = props => props.children(useCheckboxContext());
 
 const CheckboxControl = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => checkbox().controlProps, props);
+  const mergedProps = solid.mergeProps(() => checkbox().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const CheckboxHiddenInput = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => checkbox().hiddenInputProps, props);
+  const mergedProps = solid.mergeProps(() => checkbox().getHiddenInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const CheckboxIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
   const checkbox = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => checkbox().indicatorProps, localProps);
+  const mergedProps = solid.mergeProps(() => checkbox().getIndicatorProps(), localProps);
   return web.createComponent(ark.div, web.mergeProps(mergedProps, {
     get hidden() {
       return !(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked);
@@ -606,7 +665,7 @@ const CheckboxIndicator = props => {
 
 const CheckboxLabel = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => checkbox().labelProps, props);
+  const mergedProps = solid.mergeProps(() => checkbox().getLabelProps(), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -630,7 +689,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 = solid.mergeProps(() => checkbox().rootProps, labelprops);
+  const mergedProps = solid.mergeProps(() => checkbox().getRootProps(), labelprops);
+  return web.createComponent(CheckboxProvider, {
+    value: checkbox,
+    get children() {
+      return web.createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const CheckboxRootProvider = props => {
+  const [{
+    value: checkbox
+  }, labelprops] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => checkbox().getRootProps(), labelprops);
   return web.createComponent(CheckboxProvider, {
     value: checkbox,
     get children() {
@@ -646,7 +718,8 @@ var checkbox = /*#__PURE__*/Object.freeze({
   HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
-  Root: CheckboxRoot
+  Root: CheckboxRoot,
+  RootProvider: CheckboxRootProvider
 });
 
 const [ClipboardProvider, useClipboardContext] = createContext({
@@ -658,7 +731,7 @@ const ClipboardContext = props => props.children(useClipboardContext());
 
 const ClipboardControl = props => {
   const api = useClipboardContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -688,13 +761,13 @@ const ClipboardIndicator = props => {
 
 const ClipboardInput = props => {
   const api = useClipboardContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const ClipboardLabel = props => {
   const api = useClipboardContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -715,7 +788,7 @@ const useClipboard = props => {
 const ClipboardRoot = props => {
   const [useClipboardProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange', 'timeout', 'value']);
   const api = useClipboard(useClipboardProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(ClipboardProvider, {
     value: api,
     get children() {
@@ -724,9 +797,22 @@ const ClipboardRoot = props => {
   });
 };
 
+const ClipboardRootProvider = props => {
+  const [{
+    value: clipboard
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => clipboard().getRootProps(), localProps);
+  return web.createComponent(ClipboardProvider, {
+    value: clipboard,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ClipboardTrigger = props => {
   const api = useClipboardContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -738,6 +824,7 @@ var clipboard = /*#__PURE__*/Object.freeze({
   Input: ClipboardInput,
   Label: ClipboardLabel,
   Root: ClipboardRoot,
+  RootProvider: ClipboardRootProvider,
   Trigger: ClipboardTrigger
 });
 
@@ -864,7 +951,7 @@ const [PresenceProvider, usePresenceContext] = createContext({
 const ColorPickerContent = props => {
   const api = useColorPickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -879,19 +966,19 @@ const ColorPickerContext = props => props.children(useColorPickerContext());
 
 const ColorPickerControl = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerEyeDropperTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().eyeDropperTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getEyeDropperTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerFormatSelect = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().formatSelectProps, props);
+  const mergedProps = solid.mergeProps(() => api().getFormatSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return web.createComponent(solidJs.Index, {
@@ -911,26 +998,26 @@ const ColorPickerFormatSelect = props => {
 
 const ColorPickerFormatTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().formatTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getFormatTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerHiddenInput = props => {
   const colorPicker = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => colorPicker().hiddenInputProps, props);
+  const mergedProps = solid.mergeProps(() => colorPicker().getHiddenInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const ColorPickerPositioner = props => {
   const api = useColorPickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -967,7 +1054,7 @@ const ColorPickerRoot = props => {
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
   })));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(ColorPickerProvider, {
     value: api,
     get children() {
@@ -981,6 +1068,28 @@ const ColorPickerRoot = props => {
   });
 };
 
+const ColorPickerRootProvider = props => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [{
+    value: colorPicker
+  }, localProps] = createSplitProps()(colorPickerProps, ['value']);
+  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: colorPicker().open
+  })));
+  const mergedProps = solid.mergeProps(() => colorPicker().getRootProps(), localProps);
+  return web.createComponent(ColorPickerProvider, {
+    value: colorPicker,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
@@ -1000,7 +1109,7 @@ const ColorPickerSwatch = props => {
 
 const ColorPickerSwatchGroup = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().swatchGroupProps, props);
+  const mergedProps = solid.mergeProps(() => api().getSwatchGroupProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -1027,7 +1136,7 @@ const ColorPickerTransparencyGrid = props => {
 
 const ColorPickerTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1095,14 +1204,14 @@ const [ComboboxProvider, useComboboxContext] = createContext({
 
 const ComboboxClearTrigger = props => {
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().clearTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => combobox().getClearTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const ComboboxContent = props => {
   const api = useComboboxContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1117,13 +1226,13 @@ const ComboboxContext = props => props.children(useComboboxContext());
 
 const ComboboxControl = props => {
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().controlProps, props);
+  const mergedProps = solid.mergeProps(() => combobox().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().inputProps, props);
+  const mergedProps = solid.mergeProps(() => combobox().getInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
@@ -1202,14 +1311,14 @@ const ComboboxItemText = props => {
 
 const ComboboxLabel = props => {
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().labelProps, props);
+  const mergedProps = solid.mergeProps(() => combobox().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const ComboboxPositioner = props => {
   const api = useComboboxContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1249,7 +1358,7 @@ const ComboboxRoot = props => {
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
   })));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(ComboboxProvider, {
     value: api,
     get children() {
@@ -1263,6 +1372,28 @@ const ComboboxRoot = props => {
   });
 };
 
+const ComboboxRootProvider = props => {
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
+  const [{
+    value: combobox
+  }, localProps] = createSplitProps()(comboboxProps, ['value']);
+  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: combobox().open
+  })));
+  const mergedProps = solid.mergeProps(() => combobox().getRootProps(), localProps);
+  return web.createComponent(ComboboxProvider, {
+    value: combobox,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const ComboboxTrigger = props => {
   const [triggerProps, localProps] = createSplitProps()(props, ['focusable']);
   const combobox = useComboboxContext();
@@ -1286,6 +1417,7 @@ var combobox = /*#__PURE__*/Object.freeze({
   Label: ComboboxLabel,
   Positioner: ComboboxPositioner,
   Root: ComboboxRoot,
+  RootProvider: ComboboxRootProvider,
   Trigger: ComboboxTrigger
 });
 
@@ -1296,14 +1428,14 @@ const [DatePickerProvider, useDatePickerContext] = createContext({
 
 const DatePickerClearTrigger = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getClearTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const DatePickerContent = props => {
   const api = useDatePickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1318,7 +1450,7 @@ const DatePickerContext = props => props.children(useDatePickerContext());
 
 const DatePickerControl = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -1331,14 +1463,14 @@ const DatePickerInput = props => {
 
 const DatePickerLabel = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 var _tmpl$$3 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
+  const mergedProps = solid.mergeProps(() => api().getMonthSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
@@ -1353,7 +1485,11 @@ const DatePickerMonthSelect = props => {
 
 const [DatePickerViewProvider, useDatePickerViewContext] = createContext({
   hookName: 'useDatePickerViewContext',
-  providerName: '<DatePickerViewProvider />'
+  providerName: '<DatePickerViewProvider />',
+  strict: false,
+  defaultValue: {
+    view: 'day'
+  }
 });
 
 const DatePickerNextTrigger = props => {
@@ -1366,7 +1502,7 @@ const DatePickerNextTrigger = props => {
 const DatePickerPositioner = props => {
   const api = useDatePickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1393,7 +1529,7 @@ const DatePickerPrevTrigger = props => {
 
 const DatePickerRangeText = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().rangeTextProps, props);
+  const mergedProps = solid.mergeProps(() => api().getRangeTextProps(), props);
   return web.createComponent(ark.div, web.mergeProps(mergedProps, {
     get children() {
       return api().visibleRangeText.start;
@@ -1430,7 +1566,7 @@ const DatePickerRoot = props => {
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
   })));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(DatePickerProvider, {
     value: api,
     get children() {
@@ -1444,6 +1580,28 @@ const DatePickerRoot = props => {
   });
 };
 
+const DatePickerRootProvider = props => {
+  const [presenceProps, datePickerProps] = splitPresenceProps(props);
+  const [{
+    value: datePicker
+  }, localProps] = createSplitProps()(datePickerProps, ['value']);
+  const presence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: datePicker().open
+  })));
+  const mergedProps = solid.mergeProps(() => datePicker().getRootProps(), localProps);
+  return web.createComponent(DatePickerProvider, {
+    value: datePicker,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: presence,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const [DatePickerTableProvider, useDatePickerTableContext] = createContext({
   hookName: 'useDatePickerTableContext',
   providerName: '<DatePickerTableProvider />'
@@ -1485,13 +1643,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 = solid.mergeProps(() => tableCellProps, localProps);
+  const tableCellProps = solidJs.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 = solid.mergeProps(tableCellProps, localProps);
   return web.createComponent(DatePickerTableCellProvider, {
     value: cellProps,
     get children() {
@@ -1504,14 +1667,19 @@ const DatePickerTableCellTrigger = props => {
   const api = useDatePickerContext();
   const cellProps = useDatePickerTableCellContext();
   const viewProps = useDatePickerViewContext();
-  const triggerProps = {
-    day: api().getDayTableCellTriggerProps,
-    month: api().getMonthTableCellTriggerProps,
-    year: api().getYearTableCellTriggerProps
-    // @ts-expect-error value is number filter
-  }[viewProps.view](cellProps);
-  const mergedProps = solid.mergeProps(() => triggerProps, props);
-  return web.createComponent(ark.button, mergedProps);
+  const triggerProps = solidJs.createMemo(() => {
+    const viewMap = {
+      day: api().getDayTableCellTriggerProps,
+      month: api().getMonthTableCellTriggerProps,
+      year: api().getYearTableCellTriggerProps
+    };
+    const viewFn = viewMap[viewProps.view];
+
+    // @ts-expect-error
+    return viewFn(cellProps);
+  });
+  const mergedProps = solid.mergeProps(triggerProps, props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const DatePickerTableHead = props => {
@@ -1537,7 +1705,7 @@ const DatePickerTableRow = props => {
 
 const DatePickerTrigger = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1574,7 +1742,7 @@ const DatePickerViewTrigger = props => {
 var _tmpl$$2 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
+  const mergedProps = solid.mergeProps(() => api().getYearSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return getYearsRange({
@@ -1612,6 +1780,7 @@ var datePicker = /*#__PURE__*/Object.freeze({
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
   Root: DatePickerRoot,
+  RootProvider: DatePickerRootProvider,
   Table: DatePickerTable,
   TableBody: DatePickerTableBody,
   TableCell: DatePickerTableCell,
@@ -1637,7 +1806,7 @@ const DialogBackdrop = props => {
   const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
     present: api().open
   })));
-  const mergedProps = solid.mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getBackdropProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1650,14 +1819,14 @@ const DialogBackdrop = props => {
 
 const DialogCloseTrigger = props => {
   const dialog = useDialogContext();
-  const mergedProps = solid.mergeProps(() => dialog().closeTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => dialog().getCloseTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const DialogContent = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1672,14 +1841,14 @@ const DialogContext = props => props.children(useDialogContext());
 
 const DialogDescription = props => {
   const dialog = useDialogContext();
-  const mergedProps = solid.mergeProps(() => dialog().descriptionProps, props);
+  const mergedProps = solid.mergeProps(() => dialog().getDescriptionProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const DialogPositioner = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -1734,16 +1903,42 @@ const DialogRoot = props => {
   });
 };
 
+const DialogRootProvider = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
+  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: localProps.value().open
+  })));
+  return web.createComponent(DialogProvider, {
+    get value() {
+      return localProps.value;
+    },
+    get children() {
+      return web.createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return web.createComponent(PresenceProvider, {
+            value: apiPresence,
+            get children() {
+              return localProps.children;
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const DialogTitle = props => {
   const dialog = useDialogContext();
-  const mergedProps = solid.mergeProps(() => dialog().titleProps, props);
+  const mergedProps = solid.mergeProps(() => dialog().getTitleProps(), props);
   return web.createComponent(ark.h2, mergedProps);
 };
 
 const DialogTrigger = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, () => ({
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), () => ({
     'aria-controls': presenceApi().unmounted && null
   }), props);
   return web.createComponent(ark.button, mergedProps);
@@ -1758,6 +1953,7 @@ var dialog = /*#__PURE__*/Object.freeze({
   Description: DialogDescription,
   Positioner: DialogPositioner,
   Root: DialogRoot,
+  RootProvider: DialogRootProvider,
   Title: DialogTitle,
   Trigger: DialogTrigger
 });
@@ -1769,13 +1965,13 @@ const [EditableProvider, useEditableContext] = createContext({
 
 const EditableArea = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().areaProps, props);
+  const mergedProps = solid.mergeProps(() => api().getAreaProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const EditableCancelTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().cancelTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getCancelTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1783,31 +1979,31 @@ const EditableContext = props => props.children(useEditableContext());
 
 const EditableControl = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const EditableEditTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().editTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getEditTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const EditableInput = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const EditableLabel = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const EditablePreview = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().previewProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPreviewProps(), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -1831,7 +2027,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(EditableProvider, {
     value: api,
     get children() {
@@ -1840,9 +2036,22 @@ const EditableRoot = props => {
   });
 };
 
+const EditableRootProvider = props => {
+  const [{
+    value: editable
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => editable().getRootProps(), localProps);
+  return web.createComponent(EditableProvider, {
+    value: editable,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const EditableSubmitTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().submitTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getSubmitTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1857,6 +2066,7 @@ var editable = /*#__PURE__*/Object.freeze({
   Label: EditableLabel,
   Preview: EditablePreview,
   Root: EditableRoot,
+  RootProvider: EditableRootProvider,
   SubmitTrigger: EditableSubmitTrigger
 });
 
@@ -1869,10 +2079,16 @@ const FileUploadContext = props => props.children(useFileUploadContext());
 
 const FileUploadDropzone = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => fileUpload().dropzoneProps, props);
+  const mergedProps = solid.mergeProps(() => fileUpload().getDropzoneProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+const FileUploadHiddenInput = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().getHiddenInputProps(), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
   hookName: 'useFileUploadItemPropsContext',
   providerName: '<FileUploadItemPropsProvider />'
@@ -1899,7 +2115,7 @@ const FileUploadItemDeleteTrigger = props => {
 
 const FileUploadItemGroup = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => fileUpload().itemGroupProps, props);
+  const mergedProps = solid.mergeProps(() => fileUpload().getItemGroupProps(), props);
   return web.createComponent(ark.ul, mergedProps);
 };
 
@@ -1947,7 +2163,7 @@ const FileUploadItemSizeText = props => {
 
 const FileUploadLabel = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => fileUpload().labelProps, props);
+  const mergedProps = solid.mergeProps(() => fileUpload().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -1970,7 +2186,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 = solid.mergeProps(() => fileUpload().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => fileUpload().getRootProps(), localProps);
   return web.createComponent(FileUploadProvider, {
     value: fileUpload,
     get children() {
@@ -1979,16 +2195,23 @@ const FileUploadRoot = props => {
   });
 };
 
-const FileUploadTrigger = props => {
-  const fileUpload = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => fileUpload().triggerProps, props);
-  return web.createComponent(ark.button, mergedProps);
+const FileUploadRootProvider = props => {
+  const [{
+    value: fileUpload
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => fileUpload().getRootProps(), localProps);
+  return web.createComponent(FileUploadProvider, {
+    value: fileUpload,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
-const FileUploadHiddenInput = props => {
+const FileUploadTrigger = props => {
   const fileUpload = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => fileUpload().hiddenInputProps, props);
-  return web.createComponent(ark.input, mergedProps);
+  const mergedProps = solid.mergeProps(() => fileUpload().getTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
 };
 
 var fileUpload = /*#__PURE__*/Object.freeze({
@@ -2005,6 +2228,7 @@ var fileUpload = /*#__PURE__*/Object.freeze({
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
   Root: FileUploadRoot,
+  RootProvider: FileUploadRootProvider,
   Trigger: FileUploadTrigger
 });
 
@@ -2035,20 +2259,20 @@ const [HoverCardProvider, useHoverCardContext] = createContext({
 
 const HoverCardArrow = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = solid.mergeProps(() => hoverCard().arrowProps, props);
+  const mergedProps = solid.mergeProps(() => hoverCard().getArrowProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const HoverCardArrowTip = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = solid.mergeProps(() => hoverCard().arrowTipProps, props);
+  const mergedProps = solid.mergeProps(() => hoverCard().getArrowTipProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const HoverCardContent = props => {
   const api = useHoverCardContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2064,7 +2288,7 @@ const HoverCardContext = props => props.children(useHoverCardContext());
 const HoverCardPositioner = props => {
   const api = useHoverCardContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2113,9 +2337,28 @@ const HoverCardRoot = props => {
   });
 };
 
+const HoverCardRootProvider = props => {
+  const [presenceProps, {
+    value: hoverCard,
+    children
+  }] = splitPresenceProps(props);
+  const presence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: hoverCard().open
+  })));
+  return web.createComponent(HoverCardProvider, {
+    value: hoverCard,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: presence,
+        children: children
+      });
+    }
+  });
+};
+
 const HoverCardTrigger = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = solid.mergeProps(() => hoverCard().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => hoverCard().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -2127,6 +2370,7 @@ var hoverCard = /*#__PURE__*/Object.freeze({
   Context: HoverCardContext,
   Positioner: HoverCardPositioner,
   Root: HoverCardRoot,
+  RootProvider: HoverCardRootProvider,
   Trigger: HoverCardTrigger
 });
 
@@ -2138,13 +2382,13 @@ const [MenuProvider, useMenuContext] = createContext({
 
 const MenuArrow = props => {
   const context = useMenuContext();
-  const mergedProps = solid.mergeProps(() => context().arrowProps, props);
+  const mergedProps = solid.mergeProps(() => context().getArrowProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const MenuArrowTip = props => {
   const context = useMenuContext();
-  const mergedProps = solid.mergeProps(() => context().arrowTipProps, props);
+  const mergedProps = solid.mergeProps(() => context().getArrowTipProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2182,7 +2426,7 @@ const MenuCheckboxItem = props => {
 const MenuContent = props => {
   const context = useMenuContext();
   const presenceContext = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => context().contentProps, () => presenceContext().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => context().getContentProps(), () => presenceContext().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceContext().unmounted;
@@ -2197,13 +2441,13 @@ const MenuContext = props => props.children(useMenuContext());
 
 const MenuContextTrigger = props => {
   const context = useMenuContext();
-  const mergedProps = solid.mergeProps(() => context().contextTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => context().getContextTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const MenuIndicator = props => {
   const context = useMenuContext();
-  const mergedProps = solid.mergeProps(() => context().indicatorProps, props);
+  const mergedProps = solid.mergeProps(() => context().getIndicatorProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2268,7 +2512,7 @@ const MenuItemText = props => {
 const MenuPositioner = props => {
   const context = useMenuContext();
   const presence = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => context().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => context().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presence().unmounted;
@@ -2396,16 +2640,57 @@ const MenuRoot = props => {
   });
 };
 
+const MenuRootProvider = props => {
+  const parentApi = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const [presenceProps, {
+    value: menu,
+    children
+  }] = splitPresenceProps(props);
+  const presenceApi = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: menu.api().open
+  })));
+  solidJs.createEffect(() => {
+    if (!parentMachine) return;
+    parentApi?.().setChild(menu.machine);
+    menu.api().setParent(parentMachine);
+  });
+  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu.api());
+  return web.createComponent(MenuTriggerItemProvider, {
+    value: triggerItemContext,
+    get children() {
+      return web.createComponent(MenuMachineProvider, {
+        get value() {
+          return menu.machine;
+        },
+        get children() {
+          return web.createComponent(MenuProvider, {
+            get value() {
+              return menu.api;
+            },
+            get children() {
+              return web.createComponent(PresenceProvider, {
+                value: presenceApi,
+                children: children
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const MenuSeparator = props => {
   const menu = useMenuContext();
-  const mergedProps = solid.mergeProps(() => menu().separatorProps, props);
+  const mergedProps = solid.mergeProps(() => menu().getSeparatorProps(), props);
   return web.createComponent(ark.hr, mergedProps);
 };
 
 const MenuTrigger = props => {
   const api = useMenuContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, () => ({
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), () => ({
     'aria-controls': presenceApi().unmounted && null
   }), props);
   return web.createComponent(ark.button, mergedProps);
@@ -2436,6 +2721,7 @@ var menu = /*#__PURE__*/Object.freeze({
   RadioItem: MenuRadioItem,
   RadioItemGroup: MenuRadioItemGroup,
   Root: MenuRoot,
+  RootProvider: MenuRootProvider,
   Separator: MenuSeparator,
   Trigger: MenuTrigger,
   TriggerItem: MenuTriggerItem
@@ -2450,31 +2736,31 @@ const NumberInputContext = props => props.children(useNumberInputContext());
 
 const NumberInputControl = props => {
   const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const NumberInputDecrementTrigger = props => {
   const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().decrementTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getDecrementTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const NumberInputIncrementTrigger = props => {
   const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().incrementTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getIncrementTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const NumberInputInput = props => {
   const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const NumberInputLabel = props => {
   const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -2498,7 +2784,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(NumberInputProvider, {
     value: api,
     get children() {
@@ -2507,9 +2793,22 @@ const NumberInputRoot = props => {
   });
 };
 
+const NumberInputRootProvider = props => {
+  const [{
+    value: numberInput
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => numberInput().getRootProps(), localProps);
+  return web.createComponent(NumberInputProvider, {
+    value: numberInput,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const NumberInputScrubber = props => {
   const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().scrubberProps, props);
+  const mergedProps = solid.mergeProps(() => api().getScrubberProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2548,13 +2847,13 @@ const PaginationItem = props => {
 
 const PaginationNextTrigger = props => {
   const api = usePaginationContext();
-  const mergedProps = solid.mergeProps(() => api().nextTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getNextTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const PaginationPrevTrigger = props => {
   const api = usePaginationContext();
-  const mergedProps = solid.mergeProps(() => api().prevTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPrevTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -2578,7 +2877,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(PaginationProvider, {
     value: api,
     get children() {
@@ -2587,6 +2886,19 @@ const PaginationRoot = props => {
   });
 };
 
+const PaginationRootProvider = props => {
+  const [{
+    value: pagination
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => pagination().getRootProps(), localProps);
+  return web.createComponent(PaginationProvider, {
+    value: pagination,
+    get children() {
+      return web.createComponent(ark.nav, mergedProps);
+    }
+  });
+};
+
 var pagination = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: PaginationContext,
@@ -2594,7 +2906,8 @@ var pagination = /*#__PURE__*/Object.freeze({
   Item: PaginationItem,
   NextTrigger: PaginationNextTrigger,
   PrevTrigger: PaginationPrevTrigger,
-  Root: PaginationRoot
+  Root: PaginationRoot,
+  RootProvider: PaginationRootProvider
 });
 
 const [PinInputProvider, usePinInputContext] = createContext({
@@ -2606,10 +2919,16 @@ const PinInputContext = props => props.children(usePinInputContext());
 
 const PinInputControl = props => {
   const api = usePinInputContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+const PinInputHiddenInput = props => {
+  const pinInput = usePinInputContext();
+  const mergedProps = solid.mergeProps(() => pinInput().getHiddenInputProps(), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const PinInputInput = props => {
   const [inputProps, localProps] = createSplitProps()(props, ['index']);
   const api = usePinInputContext();
@@ -2619,7 +2938,7 @@ const PinInputInput = props => {
 
 const PinInputLabel = props => {
   const api = usePinInputContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -2643,7 +2962,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 = solid.mergeProps(() => pinInput().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => pinInput().getRootProps(), localProps);
   return web.createComponent(PinInputProvider, {
     value: pinInput,
     get children() {
@@ -2652,10 +2971,17 @@ const PinInputRoot = props => {
   });
 };
 
-const PinInputHiddenInput = props => {
-  const pinInput = usePinInputContext();
-  const mergedProps = solid.mergeProps(() => pinInput().hiddenInputProps, props);
-  return web.createComponent(ark.input, mergedProps);
+const PinInputRootProvider = props => {
+  const [{
+    value: pinInput
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => pinInput().getRootProps(), localProps);
+  return web.createComponent(PinInputProvider, {
+    value: pinInput,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 var pinInput = /*#__PURE__*/Object.freeze({
@@ -2665,7 +2991,8 @@ var pinInput = /*#__PURE__*/Object.freeze({
   HiddenInput: PinInputHiddenInput,
   Input: PinInputInput,
   Label: PinInputLabel,
-  Root: PinInputRoot
+  Root: PinInputRoot,
+  RootProvider: PinInputRootProvider
 });
 
 const [PopoverProvider, usePopoverContext] = createContext({
@@ -2675,32 +3002,32 @@ const [PopoverProvider, usePopoverContext] = createContext({
 
 const PopoverAnchor = props => {
   const api = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => api().anchorProps, props);
+  const mergedProps = solid.mergeProps(() => api().getAnchorProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrow = props => {
   const popover = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => popover().arrowProps, props);
+  const mergedProps = solid.mergeProps(() => popover().getArrowProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrowTip = props => {
   const popover = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => popover().arrowTipProps, props);
+  const mergedProps = solid.mergeProps(() => popover().getArrowTipProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverCloseTrigger = props => {
   const api = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => api().closeTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getCloseTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const PopoverContent = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2715,20 +3042,20 @@ const PopoverContext = props => props.children(usePopoverContext());
 
 const PopoverDescription = props => {
   const api = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
+  const mergedProps = solid.mergeProps(() => api().getDescriptionProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverIndicator = props => {
   const popover = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => popover().indicatorProps, props);
+  const mergedProps = solid.mergeProps(() => popover().getIndicatorProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverPositioner = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -2777,16 +3104,35 @@ const PopoverRoot = props => {
   });
 };
 
+const PopoverRootProvider = props => {
+  const [presenceProps, {
+    value: popover,
+    children
+  }] = splitPresenceProps(props);
+  const presence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: popover().open
+  })));
+  return web.createComponent(PopoverProvider, {
+    value: popover,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: presence,
+        children: children
+      });
+    }
+  });
+};
+
 const PopoverTitle = props => {
   const api = usePopoverContext();
-  const mergedProps = solid.mergeProps(() => api().titleProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTitleProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverTrigger = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, () => ({
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), () => ({
     'aria-controls': presenceApi().unmounted && null
   }), props);
   return web.createComponent(ark.button, mergedProps);
@@ -2804,6 +3150,7 @@ var popover = /*#__PURE__*/Object.freeze({
   Indicator: PopoverIndicator,
   Positioner: PopoverPositioner,
   Root: PopoverRoot,
+  RootProvider: PopoverRootProvider,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
 });
@@ -2815,19 +3162,19 @@ const [ProgressProvider, useProgressContext] = createContext({
 
 const ProgressCircle = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().circleProps, props);
+  const mergedProps = solid.mergeProps(() => api().getCircleProps(), props);
   return web.createComponent(ark.svg, mergedProps);
 };
 
 const ProgressCircleRange = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().circleRangeProps, props);
+  const mergedProps = solid.mergeProps(() => api().getCircleRangeProps(), props);
   return web.createComponent(ark.circle, mergedProps);
 };
 
 const ProgressCircleTrack = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().circleTrackProps, props);
+  const mergedProps = solid.mergeProps(() => api().getCircleTrackProps(), props);
   return web.createComponent(ark.circle, mergedProps);
 };
 
@@ -2835,13 +3182,13 @@ const ProgressContext = props => props.children(useProgressContext());
 
 const ProgressLabel = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const ProgressRange = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().rangeProps, props);
+  const mergedProps = solid.mergeProps(() => api().getRangeProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2864,7 +3211,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(ProgressProvider, {
     value: api,
     get children() {
@@ -2873,15 +3220,28 @@ const ProgressRoot = props => {
   });
 };
 
+const ProgressRootProvider = props => {
+  const [{
+    value: progress
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => progress().getRootProps(), localProps);
+  return web.createComponent(ProgressProvider, {
+    value: progress,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ProgressTrack = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().trackProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTrackProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ProgressValueText = props => {
   const api = useProgressContext();
-  const mergedProps = solid.mergeProps(() => api().valueTextProps, props);
+  const mergedProps = solid.mergeProps(() => api().getValueTextProps(), props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return props.children || api().valueAsString;
@@ -2905,6 +3265,7 @@ var progress = /*#__PURE__*/Object.freeze({
   Label: ProgressLabel,
   Range: ProgressRange,
   Root: ProgressRoot,
+  RootProvider: ProgressRootProvider,
   Track: ProgressTrack,
   ValueText: ProgressValueText,
   View: ProgressView
@@ -2919,7 +3280,7 @@ const RadioGroupContext = props => props.children(useRadioGroupContext());
 
 const RadioGroupIndicator = props => {
   const radioGroup = useRadioGroupContext();
-  const mergedProps = solid.mergeProps(() => radioGroup().indicatorProps, props);
+  const mergedProps = solid.mergeProps(() => radioGroup().getIndicatorProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2976,7 +3337,7 @@ const RadioGroupItemText = props => {
 
 const RadioGroupLabel = props => {
   const radioGroup = useRadioGroupContext();
-  const mergedProps = solid.mergeProps(() => radioGroup().labelProps, props);
+  const mergedProps = solid.mergeProps(() => radioGroup().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3000,7 +3361,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 = solid.mergeProps(() => radioGroup().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => radioGroup().getRootProps(), localProps);
+  return web.createComponent(RadioGroupProvider, {
+    value: radioGroup,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const RadioGroupRootProvider = props => {
+  const [{
+    value: radioGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => radioGroup().getRootProps(), localProps);
   return web.createComponent(RadioGroupProvider, {
     value: radioGroup,
     get children() {
@@ -3019,7 +3393,8 @@ var radioGroup = /*#__PURE__*/Object.freeze({
   ItemHiddenInput: RadioGroupItemHiddenInput,
   ItemText: RadioGroupItemText,
   Label: RadioGroupLabel,
-  Root: RadioGroupRoot
+  Root: RadioGroupRoot,
+  RootProvider: RadioGroupRootProvider
 });
 
 const [RatingGroupProvider, useRatingGroupContext] = createContext({
@@ -3031,10 +3406,16 @@ const RatingGroupContext = props => props.children(useRatingGroupContext());
 
 const RatingGroupControl = props => {
   const ratingGroup = useRatingGroupContext();
-  const mergedProps = solid.mergeProps(() => ratingGroup().controlProps, props);
+  const mergedProps = solid.mergeProps(() => ratingGroup().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+const RatingGroupHiddenInput = props => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => ratingGroup().getHiddenInputProps(), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
   hookName: 'useRatingGroupItemContext',
   providerName: '<RatingGroupItemProvider />'
@@ -3057,7 +3438,7 @@ const RatingGroupItemContext = props => props.children(useRatingGroupItemContext
 
 const RatingGroupLabel = props => {
   const api = useRatingGroupContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3081,7 +3462,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(RatingGroupProvider, {
     value: api,
     get children() {
@@ -3090,10 +3471,17 @@ const RatingGroupRoot = props => {
   });
 };
 
-const RatingGroupHiddenInput = props => {
-  const ratingGroup = useRatingGroupContext();
-  const mergedProps = solid.mergeProps(() => ratingGroup().hiddenInputProps, props);
-  return web.createComponent(ark.input, mergedProps);
+const RatingGroupRootProvider = props => {
+  const [{
+    value: ratingGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => ratingGroup().getRootProps(), localProps);
+  return web.createComponent(RatingGroupProvider, {
+    value: ratingGroup,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 var ratingGroup = /*#__PURE__*/Object.freeze({
@@ -3116,7 +3504,7 @@ const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const SegmentGroupIndicator = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().indicatorProps, anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3173,7 +3561,7 @@ const SegmentGroupItemText = props => {
 
 const SegmentGroupLabel = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().labelProps, anatomy.segmentGroupAnatomy.build().label.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), anatomy.segmentGroupAnatomy.build().label.attrs, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3197,7 +3585,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 = solid.mergeProps(() => segmentGroup().rootProps, anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  return web.createComponent(SegmentGroupProvider, {
+    value: segmentGroup,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SegmentGroupRootProvider = props => {
+  const [{
+    value: segmentGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -3227,14 +3628,14 @@ const [SelectProvider, useSelectContext] = createContext({
 
 const SelectClearTrigger = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().clearTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => select().getClearTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const SelectContent = props => {
   const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => select().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => select().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -3249,7 +3650,7 @@ const SelectContext = props => props.children(useSelectContext());
 
 const SelectControl = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().controlProps, props);
+  const mergedProps = solid.mergeProps(() => select().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3257,7 +3658,7 @@ var _tmpl$$1 = /*#__PURE__*/web.template(`<option value="">`),
   _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().controlProps, props);
+  const mergedProps = solid.mergeProps(() => select().getControlProps(), props);
   const isValueEmpty = solidJs.createMemo(() => select().value.length === 0);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
@@ -3285,7 +3686,7 @@ const SelectHiddenSelect = props => {
 
 const SelectIndicator = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().indicatorProps, props);
+  const mergedProps = solid.mergeProps(() => select().getIndicatorProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3364,14 +3765,14 @@ const SelectItemText = props => {
 
 const SelectLabel = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().labelProps, props);
+  const mergedProps = solid.mergeProps(() => select().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const SelectPositioner = props => {
   const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => select().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => select().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -3411,7 +3812,7 @@ const SelectRoot = props => {
   const presenceApi = usePresence(solid.mergeProps(() => ({
     present: select().open
   }), presenceProps));
-  const mergedProps = solid.mergeProps(() => select().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => select().getRootProps(), localProps);
   return web.createComponent(SelectProvider, {
     value: select,
     get children() {
@@ -3425,9 +3826,31 @@ const SelectRoot = props => {
   });
 };
 
+const SelectRootProvider = props => {
+  const [presenceProps, selectProps] = splitPresenceProps(props);
+  const [{
+    value: select
+  }, localProps] = createSplitProps()(selectProps, ['value']);
+  const presence = usePresence(solid.mergeProps(() => ({
+    present: select().open
+  }), presenceProps));
+  const mergedProps = solid.mergeProps(() => select().getRootProps(), localProps);
+  return web.createComponent(SelectProvider, {
+    value: select,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: presence,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const SelectTrigger = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => select().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -3458,6 +3881,7 @@ var select = /*#__PURE__*/Object.freeze({
   Label: SelectLabel,
   Positioner: SelectPositioner,
   Root: SelectRoot,
+  RootProvider: SelectRootProvider,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
 });
@@ -3471,7 +3895,7 @@ const SliderContext = props => props.children(useSliderContext());
 
 const SliderControl = props => {
   const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3489,7 +3913,7 @@ const SliderHiddenInput = props => {
 
 const SliderLabel = props => {
   const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3502,13 +3926,13 @@ const SliderMarker = props => {
 
 const SliderMarkerGroup = props => {
   const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().markerGroupProps, props);
+  const mergedProps = solid.mergeProps(() => api().getMarkerGroupProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const SliderRange = props => {
   const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().rangeProps, props);
+  const mergedProps = solid.mergeProps(() => api().getRangeProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3532,7 +3956,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(SliderProvider, {
     value: api,
     get children() {
@@ -3541,6 +3965,19 @@ const SliderRoot = props => {
   });
 };
 
+const SliderRootProvider = props => {
+  const [{
+    value: slider
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => slider().getRootProps(), localProps);
+  return web.createComponent(SliderProvider, {
+    value: slider,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const SliderThumb = props => {
   const [thumbProps, localProps] = createSplitProps()(props, ['index', 'name']);
   const slider = useSliderContext();
@@ -3555,13 +3992,13 @@ const SliderThumb = props => {
 
 const SliderTrack = props => {
   const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().trackProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTrackProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const SliderValueText = props => {
   const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().valueTextProps, props);
+  const mergedProps = solid.mergeProps(() => api().getValueTextProps(), props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return props.children || api().value.join(',');
@@ -3579,6 +4016,7 @@ var slider = /*#__PURE__*/Object.freeze({
   MarkerGroup: SliderMarkerGroup,
   Range: SliderRange,
   Root: SliderRoot,
+  RootProvider: SliderRootProvider,
   Thumb: SliderThumb,
   Track: SliderTrack,
   ValueText: SliderValueText
@@ -3625,7 +4063,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(SplitterProvider, {
     value: api,
     get children() {
@@ -3634,12 +4072,26 @@ const SplitterRoot = props => {
   });
 };
 
+const SplitterRootProvider = props => {
+  const [{
+    value: splitter
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => splitter().getRootProps(), localProps);
+  return web.createComponent(SplitterProvider, {
+    value: splitter,
+    get children() {
+      return web.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({
@@ -3651,19 +4103,19 @@ const SwitchContext = props => props.children(useSwitchContext());
 
 const SwitchControl = props => {
   const api = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SwitchHiddenInput = props => {
   const api = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => api().hiddenInputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getHiddenInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const SwitchLabel = props => {
   const api = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -3687,7 +4139,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
+  return web.createComponent(SwitchProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const SwitchRootProvider = props => {
+  const [{
+    value: api
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(SwitchProvider, {
     value: api,
     get children() {
@@ -3698,7 +4163,7 @@ const SwitchRoot = props => {
 
 const SwitchThumb = props => {
   const api = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => api().thumbProps, props);
+  const mergedProps = solid.mergeProps(() => api().getThumbProps(), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -3709,6 +4174,7 @@ var _switch = /*#__PURE__*/Object.freeze({
   HiddenInput: SwitchHiddenInput,
   Label: SwitchLabel,
   Root: SwitchRoot,
+  RootProvider: SwitchRootProvider,
   Thumb: SwitchThumb
 });
 
@@ -3742,13 +4208,13 @@ const TabContent = props => {
 
 const TabIndicator = props => {
   const api = useTabsContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  const mergedProps = solid.mergeProps(() => api().getIndicatorProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TabList = props => {
   const api = useTabsContext();
-  const mergedProps = solid.mergeProps(() => api().listProps, props);
+  const mergedProps = solid.mergeProps(() => api().getListProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3782,7 +4248,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 = solid.mergeProps(() => api().rootProps, restProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), restProps);
   return web.createComponent(TabsProvider, {
     value: api,
     get children() {
@@ -3796,6 +4262,25 @@ const TabsRoot = props => {
   });
 };
 
+const TabsRootProvider = props => {
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
+  const [{
+    value: tabs
+  }, localprops] = createSplitProps()(tabsProps, ['value']);
+  const mergedProps = solid.mergeProps(() => tabs().getRootProps(), localprops);
+  return web.createComponent(TabsProvider, {
+    value: tabs,
+    get children() {
+      return web.createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 var tabs = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: TabContent,
@@ -3803,6 +4288,7 @@ var tabs = /*#__PURE__*/Object.freeze({
   Indicator: TabIndicator,
   List: TabList,
   Root: TabsRoot,
+  RootProvider: TabsRootProvider,
   Trigger: TabTrigger
 });
 
@@ -3813,7 +4299,7 @@ const [TagsInputProvider, useTagsInputContext] = createContext({
 
 const TagsInputClearTrigger = props => {
   const api = useTagsInputContext();
-  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getClearTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -3821,13 +4307,19 @@ const TagsInputContext = props => props.children(useTagsInputContext());
 
 const TagsInputControl = props => {
   const api = useTagsInputContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().getControlProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+const TagsInputHiddenInput = props => {
+  const tagsInput = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => tagsInput().getHiddenInputProps(), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const TagsInputInput = props => {
   const api = useTagsInputContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
   return web.createComponent(ark.input, mergedProps);
 };
 
@@ -3875,12 +4367,6 @@ const TagsInputItemInput = props => {
   return web.createComponent(ark.input, mergedProps);
 };
 
-const TagsInputHiddenInput = props => {
-  const tagsInput = useTagsInputContext();
-  const mergedProps = solid.mergeProps(() => tagsInput().hiddenInputProps, props);
-  return web.createComponent(ark.input, mergedProps);
-};
-
 const TagsInputItemPreview = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemPropsContext();
@@ -3897,7 +4383,7 @@ const TagsInputItemText = props => {
 
 const TagsInputLabel = props => {
   const api = useTagsInputContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3921,7 +4407,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(TagsInputProvider, {
     value: api,
     get children() {
@@ -3930,6 +4416,19 @@ const TagsInputRoot = props => {
   });
 };
 
+const TagsInputRootProvider = props => {
+  const [{
+    value: tagsInput
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => tagsInput().getRootProps(), localProps);
+  return web.createComponent(TagsInputProvider, {
+    value: tagsInput,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 var tagsInput = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ClearTrigger: TagsInputClearTrigger,
@@ -3944,7 +4443,8 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   ItemPreview: TagsInputItemPreview,
   ItemText: TagsInputItemText,
   Label: TagsInputLabel,
-  Root: TagsInputRoot
+  Root: TagsInputRoot,
+  RootProvider: TagsInputRootProvider
 });
 
 const createToaster = props => {
@@ -3966,13 +4466,13 @@ const [ToastProvider, useToastContext] = createContext({
 
 const ToastActionTrigger = props => {
   const toast = useToastContext();
-  const mergedProps = solid.mergeProps(() => toast().actionTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => toast().getActionTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const ToastCloseTrigger = props => {
   const toast = useToastContext();
-  const mergedProps = solid.mergeProps(() => toast().closeTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => toast().getCloseTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -3980,7 +4480,7 @@ const ToastContext = props => props.children(useToastContext());
 
 const ToastDescription = props => {
   const toast = useToastContext();
-  const mergedProps = solid.mergeProps(() => toast().descriptionProps, props);
+  const mergedProps = solid.mergeProps(() => toast().getDescriptionProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3991,17 +4491,17 @@ const ToastRoot = props => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
-    web.spread(_el$, web.mergeProps(() => toast().rootProps), false, true);
-    web.spread(_el$2, web.mergeProps(() => toast().ghostBeforeProps), false, false);
+    web.spread(_el$, web.mergeProps(() => toast().getRootProps()), false, true);
+    web.spread(_el$2, web.mergeProps(() => toast().getGhostBeforeProps()), false, false);
     web.insert(_el$, () => props.children, _el$3);
-    web.spread(_el$3, web.mergeProps(() => toast().ghostAfterProps), false, false);
+    web.spread(_el$3, web.mergeProps(() => toast().getGhostAfterProps()), false, false);
     return _el$;
   })();
 };
 
 const ToastTitle = props => {
   const toast = useToastContext();
-  const mergedProps = solid.mergeProps(() => toast().titleProps, props);
+  const mergedProps = solid.mergeProps(() => toast().getTitleProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -4084,7 +4584,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 = solid.mergeProps(() => api().rootProps, restProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), restProps);
   return web.createComponent(ToggleGroupProvider, {
     value: api,
     get children() {
@@ -4093,6 +4593,19 @@ const ToggleGroupRoot = props => {
   });
 };
 
+const ToggleGroupRootProvider = props => {
+  const [{
+    value: toggleGroup
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => toggleGroup().getRootProps(), localProps);
+  return web.createComponent(ToggleGroupProvider, {
+    value: toggleGroup,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 var toggleGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: ToggleGroupContext,
@@ -4107,20 +4620,20 @@ const [TooltipProvider, useTooltipContext] = createContext({
 
 const TooltipArrow = props => {
   const tooltip = useTooltipContext();
-  const mergedProps = solid.mergeProps(() => tooltip().arrowProps, props);
+  const mergedProps = solid.mergeProps(() => tooltip().getArrowProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TooltipArrowTip = props => {
   const api = useTooltipContext();
-  const mergedProps = solid.mergeProps(() => api().arrowTipProps, props);
+  const mergedProps = solid.mergeProps(() => api().getArrowTipProps(), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TooltipContent = props => {
   const api = useTooltipContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -4136,7 +4649,7 @@ const TooltipContext = props => props.children(useTooltipContext());
 const TooltipPositioner = props => {
   const api = useTooltipContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getPositionerProps(), props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return !presenceApi().unmounted;
@@ -4185,9 +4698,28 @@ const TooltipRoot = props => {
   });
 };
 
+const TooltipRootProvider = props => {
+  const [presenceProps, {
+    value: tooltip,
+    children
+  }] = splitPresenceProps(props);
+  const presence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: tooltip().open
+  })));
+  return web.createComponent(TooltipProvider, {
+    value: tooltip,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: presence,
+        children: children
+      });
+    }
+  });
+};
+
 const TooltipTrigger = props => {
   const api = useTooltipContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTriggerProps(), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -4199,6 +4731,7 @@ var tooltip = /*#__PURE__*/Object.freeze({
   Context: TooltipContext,
   Positioner: TooltipPositioner,
   Root: TooltipRoot,
+  RootProvider: TooltipRootProvider,
   Trigger: TooltipTrigger
 });
 
@@ -4325,7 +4858,7 @@ const TreeViewItemText = props => {
 
 const TreeViewLabel = props => {
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const mergedProps = solid.mergeProps(() => api().getLabelProps(), props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -4350,7 +4883,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 = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(TreeViewProvider, {
     value: api,
     get children() {
@@ -4359,9 +4892,22 @@ const TreeViewRoot = props => {
   });
 };
 
+const TreeViewRootProvider = props => {
+  const [{
+    value: treeView
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => treeView().getRootProps(), localProps);
+  return web.createComponent(TreeViewProvider, {
+    value: treeView,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const TreeViewTree = props => {
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().treeProps, props);
+  const mergedProps = solid.mergeProps(() => api().getTreeProps(), props);
   return web.createComponent(TreeViewDepthProvider, {
     value: 1,
     get children() {
@@ -4385,6 +4931,7 @@ var treeView = /*#__PURE__*/Object.freeze({
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
   Root: TreeViewRoot,
+  RootProvider: TreeViewRootProvider,
   Tree: TreeViewTree
 });
 
@@ -4396,11 +4943,13 @@ exports.AccordionItemContext = AccordionItemContext;
 exports.AccordionItemIndicator = AccordionItemIndicator;
 exports.AccordionItemTrigger = AccordionItemTrigger;
 exports.AccordionRoot = AccordionRoot;
+exports.AccordionRootProvider = AccordionRootProvider;
 exports.Avatar = avatar;
 exports.AvatarContext = AvatarContext;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
 exports.AvatarRoot = AvatarRoot;
+exports.AvatarRootProvider = AvatarRootProvider;
 exports.Carousel = carousel;
 exports.CarouselContext = CarouselContext;
 exports.CarouselControl = CarouselControl;
@@ -4411,6 +4960,7 @@ exports.CarouselItemGroup = CarouselItemGroup;
 exports.CarouselNextTrigger = CarouselNextTrigger;
 exports.CarouselPrevTrigger = CarouselPrevTrigger;
 exports.CarouselRoot = CarouselRoot;
+exports.CarouselRootProvider = CarouselRootProvider;
 exports.CarouselViewport = CarouselViewport;
 exports.Checkbox = checkbox;
 exports.CheckboxContext = CheckboxContext;
@@ -4419,6 +4969,7 @@ exports.CheckboxHiddenInput = CheckboxHiddenInput;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
 exports.CheckboxRoot = CheckboxRoot;
+exports.CheckboxRootProvider = CheckboxRootProvider;
 exports.Clipboard = clipboard;
 exports.ClipboardContext = ClipboardContext;
 exports.ClipboardControl = ClipboardControl;
@@ -4426,11 +4977,13 @@ exports.ClipboardIndicator = ClipboardIndicator;
 exports.ClipboardInput = ClipboardInput;
 exports.ClipboardLabel = ClipboardLabel;
 exports.ClipboardRoot = ClipboardRoot;
+exports.ClipboardRootProvider = ClipboardRootProvider;
 exports.ClipboardTrigger = ClipboardTrigger;
 exports.Collapsible = collapsible;
 exports.CollapsibleContent = CollapsibleContent;
 exports.CollapsibleContext = CollapsibleContext;
 exports.CollapsibleRoot = CollapsibleRoot;
+exports.CollapsibleRootProvider = CollapsibleRootProvider;
 exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.ColorPicker = colorPicker;
 exports.ColorPickerArea = ColorPickerArea;
@@ -4450,6 +5003,7 @@ exports.ColorPickerHiddenInput = ColorPickerHiddenInput;
 exports.ColorPickerLabel = ColorPickerLabel;
 exports.ColorPickerPositioner = ColorPickerPositioner;
 exports.ColorPickerRoot = ColorPickerRoot;
+exports.ColorPickerRootProvider = ColorPickerRootProvider;
 exports.ColorPickerSwatch = ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;
 exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;
@@ -4473,6 +5027,7 @@ exports.ComboboxItemText = ComboboxItemText;
 exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxPositioner = ComboboxPositioner;
 exports.ComboboxRoot = ComboboxRoot;
+exports.ComboboxRootProvider = ComboboxRootProvider;
 exports.ComboboxTrigger = ComboboxTrigger;
 exports.DatePicker = datePicker;
 exports.DatePickerClearTrigger = DatePickerClearTrigger;
@@ -4488,6 +5043,7 @@ exports.DatePickerPresetTrigger = DatePickerPresetTrigger;
 exports.DatePickerPrevTrigger = DatePickerPrevTrigger;
 exports.DatePickerRangeText = DatePickerRangeText;
 exports.DatePickerRoot = DatePickerRoot;
+exports.DatePickerRootProvider = DatePickerRootProvider;
 exports.DatePickerTable = DatePickerTable;
 exports.DatePickerTableBody = DatePickerTableBody;
 exports.DatePickerTableCell = DatePickerTableCell;
@@ -4508,6 +5064,7 @@ exports.DialogContext = DialogContext;
 exports.DialogDescription = DialogDescription;
 exports.DialogPositioner = DialogPositioner;
 exports.DialogRoot = DialogRoot;
+exports.DialogRootProvider = DialogRootProvider;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.Editable = editable;
@@ -4520,6 +5077,7 @@ exports.EditableInput = EditableInput;
 exports.EditableLabel = EditableLabel;
 exports.EditablePreview = EditablePreview;
 exports.EditableRoot = EditableRoot;
+exports.EditableRootProvider = EditableRootProvider;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
 exports.EnvironmentProvider = EnvironmentProvider;
 exports.FileUpload = fileUpload;
@@ -4535,6 +5093,7 @@ exports.FileUploadItemPreviewImage = FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = FileUploadItemSizeText;
 exports.FileUploadLabel = FileUploadLabel;
 exports.FileUploadRoot = FileUploadRoot;
+exports.FileUploadRootProvider = FileUploadRootProvider;
 exports.FileUploadTrigger = FileUploadTrigger;
 exports.Format = format;
 exports.FormatByte = FormatByte;
@@ -4546,6 +5105,7 @@ exports.HoverCardContent = HoverCardContent;
 exports.HoverCardContext = HoverCardContext;
 exports.HoverCardPositioner = HoverCardPositioner;
 exports.HoverCardRoot = HoverCardRoot;
+exports.HoverCardRootProvider = HoverCardRootProvider;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.LocaleProvider = LocaleProvider;
 exports.Menu = menu;
@@ -4566,6 +5126,7 @@ exports.MenuPositioner = MenuPositioner;
 exports.MenuRadioItem = MenuRadioItem;
 exports.MenuRadioItemGroup = MenuRadioItemGroup;
 exports.MenuRoot = MenuRoot;
+exports.MenuRootProvider = MenuRootProvider;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuTrigger = MenuTrigger;
 exports.MenuTriggerItem = MenuTriggerItem;
@@ -4577,6 +5138,7 @@ exports.NumberInputIncrementTrigger = NumberInputIncrementTrigger;
 exports.NumberInputInput = NumberInputInput;
 exports.NumberInputLabel = NumberInputLabel;
 exports.NumberInputRoot = NumberInputRoot;
+exports.NumberInputRootProvider = NumberInputRootProvider;
 exports.NumberInputScrubber = NumberInputScrubber;
 exports.Pagination = pagination;
 exports.PaginationContext = PaginationContext;
@@ -4585,6 +5147,7 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationNextTrigger = PaginationNextTrigger;
 exports.PaginationPrevTrigger = PaginationPrevTrigger;
 exports.PaginationRoot = PaginationRoot;
+exports.PaginationRootProvider = PaginationRootProvider;
 exports.PinInput = pinInput;
 exports.PinInputContext = PinInputContext;
 exports.PinInputControl = PinInputControl;
@@ -4592,6 +5155,7 @@ exports.PinInputHiddenInput = PinInputHiddenInput;
 exports.PinInputInput = PinInputInput;
 exports.PinInputLabel = PinInputLabel;
 exports.PinInputRoot = PinInputRoot;
+exports.PinInputRootProvider = PinInputRootProvider;
 exports.Popover = popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;
@@ -4603,6 +5167,7 @@ exports.PopoverDescription = PopoverDescription;
 exports.PopoverIndicator = PopoverIndicator;
 exports.PopoverPositioner = PopoverPositioner;
 exports.PopoverRoot = PopoverRoot;
+exports.PopoverRootProvider = PopoverRootProvider;
 exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
 exports.Presence = Presence;
@@ -4615,6 +5180,7 @@ exports.ProgressContext = ProgressContext;
 exports.ProgressLabel = ProgressLabel;
 exports.ProgressRange = ProgressRange;
 exports.ProgressRoot = ProgressRoot;
+exports.ProgressRootProvider = ProgressRootProvider;
 exports.ProgressTrack = ProgressTrack;
 exports.ProgressValueText = ProgressValueText;
 exports.ProgressView = ProgressView;
@@ -4628,6 +5194,7 @@ exports.RadioGroupItemHiddenInput = RadioGroupItemHiddenInput;
 exports.RadioGroupItemText = RadioGroupItemText;
 exports.RadioGroupLabel = RadioGroupLabel;
 exports.RadioGroupRoot = RadioGroupRoot;
+exports.RadioGroupRootProvider = RadioGroupRootProvider;
 exports.RatingGroup = ratingGroup;
 exports.RatingGroupContext = RatingGroupContext;
 exports.RatingGroupControl = RatingGroupControl;
@@ -4636,6 +5203,7 @@ exports.RatingGroupItem = RatingGroupItem;
 exports.RatingGroupItemContext = RatingGroupItemContext;
 exports.RatingGroupLabel = RatingGroupLabel;
 exports.RatingGroupRoot = RatingGroupRoot;
+exports.RatingGroupRootProvider = RatingGroupRootProvider;
 exports.SegmentGroup = segmentGroup;
 exports.SegmentGroupContext = SegmentGroupContext;
 exports.SegmentGroupIndicator = SegmentGroupIndicator;
@@ -4646,6 +5214,7 @@ exports.SegmentGroupItemHiddenInput = SegmentGroupItemHiddenInput;
 exports.SegmentGroupItemText = SegmentGroupItemText;
 exports.SegmentGroupLabel = SegmentGroupLabel;
 exports.SegmentGroupRoot = SegmentGroupRoot;
+exports.SegmentGroupRootProvider = SegmentGroupRootProvider;
 exports.Select = select;
 exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;
@@ -4662,6 +5231,7 @@ exports.SelectItemText = SelectItemText;
 exports.SelectLabel = SelectLabel;
 exports.SelectPositioner = SelectPositioner;
 exports.SelectRoot = SelectRoot;
+exports.SelectRootProvider = SelectRootProvider;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValueText = SelectValueText;
 exports.Slider = slider;
@@ -4673,6 +5243,7 @@ exports.SliderMarker = SliderMarker;
 exports.SliderMarkerGroup = SliderMarkerGroup;
 exports.SliderRange = SliderRange;
 exports.SliderRoot = SliderRoot;
+exports.SliderRootProvider = SliderRootProvider;
 exports.SliderThumb = SliderThumb;
 exports.SliderTrack = SliderTrack;
 exports.SliderValueText = SliderValueText;
@@ -4681,12 +5252,14 @@ exports.SplitterContext = SplitterContext;
 exports.SplitterPanel = SplitterPanel;
 exports.SplitterResizeTrigger = SplitterResizeTrigger;
 exports.SplitterRoot = SplitterRoot;
+exports.SplitterRootProvider = SplitterRootProvider;
 exports.Switch = _switch;
 exports.SwitchContext = SwitchContext;
 exports.SwitchControl = SwitchControl;
 exports.SwitchHiddenInput = SwitchHiddenInput;
 exports.SwitchLabel = SwitchLabel;
 exports.SwitchRoot = SwitchRoot;
+exports.SwitchRootProvider = SwitchRootProvider;
 exports.SwitchThumb = SwitchThumb;
 exports.TabContent = TabContent;
 exports.TabIndicator = TabIndicator;
@@ -4695,6 +5268,7 @@ exports.TabTrigger = TabTrigger;
 exports.Tabs = tabs;
 exports.TabsContext = TabsContext;
 exports.TabsRoot = TabsRoot;
+exports.TabsRootProvider = TabsRootProvider;
 exports.TagsInput = tagsInput;
 exports.TagsInputClearTrigger = TagsInputClearTrigger;
 exports.TagsInputContext = TagsInputContext;
@@ -4709,6 +5283,7 @@ exports.TagsInputItemPreview = TagsInputItemPreview;
 exports.TagsInputItemText = TagsInputItemText;
 exports.TagsInputLabel = TagsInputLabel;
 exports.TagsInputRoot = TagsInputRoot;
+exports.TagsInputRootProvider = TagsInputRootProvider;
 exports.Toast = toast;
 exports.ToastActionTrigger = ToastActionTrigger;
 exports.ToastCloseTrigger = ToastCloseTrigger;
@@ -4721,6 +5296,7 @@ exports.ToggleGroup = toggleGroup;
 exports.ToggleGroupContext = ToggleGroupContext;
 exports.ToggleGroupItem = ToggleGroupItem;
 exports.ToggleGroupRoot = ToggleGroupRoot;
+exports.ToggleGroupRootProvider = ToggleGroupRootProvider;
 exports.Tooltip = tooltip;
 exports.TooltipArrow = TooltipArrow;
 exports.TooltipArrowTip = TooltipArrowTip;
@@ -4728,6 +5304,7 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipContext = TooltipContext;
 exports.TooltipPositioner = TooltipPositioner;
 exports.TooltipRoot = TooltipRoot;
+exports.TooltipRootProvider = TooltipRootProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TreeView = treeView;
 exports.TreeViewBranch = TreeViewBranch;
@@ -4743,53 +5320,85 @@ exports.TreeViewItemIndicator = TreeViewItemIndicator;
 exports.TreeViewItemText = TreeViewItemText;
 exports.TreeViewLabel = TreeViewLabel;
 exports.TreeViewRoot = TreeViewRoot;
+exports.TreeViewRootProvider = TreeViewRootProvider;
 exports.TreeViewTree = TreeViewTree;
 exports.ark = ark;
 exports.createToaster = createToaster;
 exports.splitPresenceProps = splitPresenceProps;
+exports.useAccordion = useAccordion;
 exports.useAccordionContext = useAccordionContext;
 exports.useAccordionItemContext = useAccordionItemContext;
+exports.useAvatar = useAvatar;
 exports.useAvatarContext = useAvatarContext;
+exports.useCarousel = useCarousel;
 exports.useCarouselContext = useCarouselContext;
+exports.useCheckbox = useCheckbox;
 exports.useCheckboxContext = useCheckboxContext;
+exports.useClipboard = useClipboard;
 exports.useClipboardContext = useClipboardContext;
+exports.useCollapsible = useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext;
+exports.useColorPicker = useColorPicker;
 exports.useColorPickerContext = useColorPickerContext;
+exports.useCombobox = useCombobox;
 exports.useComboboxContext = useComboboxContext;
 exports.useComboboxItemContext = useComboboxItemContext;
+exports.useDatePicker = useDatePicker;
 exports.useDatePickerContext = useDatePickerContext;
+exports.useDialog = useDialog;
 exports.useDialogContext = useDialogContext;
+exports.useEditable = useEditable;
 exports.useEditableContext = useEditableContext;
 exports.useEnvironmentContext = useEnvironmentContext;
+exports.useFileUpload = useFileUpload;
 exports.useFileUploadContext = useFileUploadContext;
+exports.useHoverCard = useHoverCard;
 exports.useHoverCardContext = useHoverCardContext;
 exports.useLocaleContext = useLocaleContext;
+exports.useMenu = useMenu;
 exports.useMenuContext = useMenuContext;
 exports.useMenuItemContext = useMenuItemContext;
+exports.useNumberInput = useNumberInput;
 exports.useNumberInputContext = useNumberInputContext;
+exports.usePagination = usePagination;
 exports.usePaginationContext = usePaginationContext;
+exports.usePinInput = usePinInput;
 exports.usePinInputContext = usePinInputContext;
+exports.usePopover = usePopover;
 exports.usePopoverContext = usePopoverContext;
 exports.usePresence = usePresence;
 exports.usePresenceContext = usePresenceContext;
+exports.useProgress = useProgress;
 exports.useProgressContext = useProgressContext;
+exports.useRadioGroup = useRadioGroup;
 exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext;
+exports.useRatingGroup = useRatingGroup;
 exports.useRatingGroupContext = useRatingGroupContext;
 exports.useRatingGroupItemContext = useRatingGroupItemContext;
+exports.useSegmentGroup = useSegmentGroup;
 exports.useSegmentGroupContext = useSegmentGroupContext;
 exports.useSegmentGroupItemContext = useSegmentGroupItemContext;
+exports.useSelect = useSelect;
 exports.useSelectContext = useSelectContext;
 exports.useSelectItemContext = useSelectItemContext;
+exports.useSlider = useSlider;
 exports.useSliderContext = useSliderContext;
+exports.useSplitter = useSplitter;
 exports.useSplitterContext = useSplitterContext;
+exports.useSwitch = useSwitch;
 exports.useSwitchContext = useSwitchContext;
+exports.useTabs = useTabs;
 exports.useTabsContext = useTabsContext;
+exports.useTagsInput = useTagsInput;
 exports.useTagsInputContext = useTagsInputContext;
 exports.useTagsInputItemContext = useTagsInputItemContext;
 exports.useToastContext = useToastContext;
+exports.useToggleGroup = useToggleGroup;
 exports.useToggleGroupContext = useToggleGroupContext;
+exports.useTooltip = useTooltip;
 exports.useTooltipContext = useTooltipContext;
+exports.useTreeView = useTreeView;
 exports.useTreeViewContext = useTreeViewContext;
 exports.useTreeViewItemContext = useTreeViewItemContext;
 //# sourceMappingURL=index.js.map