@ark-ui/solid 3.0.0-4 → 3.0.0-6

package/dist/cjs/index.js

@@ -10,8 +10,8 @@ var anatomy = require('@ark-ui/anatomy');
 var carousel$1 = require('@zag-js/carousel');
 var checkbox$1 = require('@zag-js/checkbox');
 var clipboard$1 = require('@zag-js/clipboard');
-var presence = require('@zag-js/presence');
 var colorPicker$1 = require('@zag-js/color-picker');
+var presence = require('@zag-js/presence');
 var combobox$1 = require('@zag-js/combobox');
 var datePicker$1 = require('@zag-js/date-picker');
 var dialog$1 = require('@zag-js/dialog');
@@ -62,8 +62,8 @@ var avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar$1);
 var carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel$1);
 var checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox$1);
 var clipboard__namespace = /*#__PURE__*/_interopNamespaceDefault(clipboard$1);
-var presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 var colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker$1);
+var presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox$1);
 var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker$1);
 var dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog$1);
@@ -131,27 +131,22 @@ const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount'
 
 const withAsProp = Component => {
   const ArkComponent = props => {
-    const [localProps, otherProps] = solidJs.splitProps(props, ['asChild']);
+    const [localProps, parentProps] = solidJs.splitProps(props, ['asChild']);
     if (localProps.asChild) {
-      if (typeof otherProps.children !== 'function') {
-        throw new Error('Children must be a function');
-      }
-
-      // @ts-expect-error TODO improve
-      const fn = userProps => {
-        const [, restProps] = solidJs.splitProps(otherProps, ['children', 'ref']);
+      // @ts-expect-error
+      const propsFn = userProps => {
+        const [, restProps] = solidJs.splitProps(parentProps, ['ref']);
         return {
-          ref: otherProps.ref,
+          ref: parentProps.ref,
           ...solid.mergeProps(restProps, userProps)
         };
       };
-      return web.memo(() => otherProps.children(fn));
+      return localProps.asChild(propsFn);
     }
-
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    // @ts-expect-error
     return web.createComponent(web.Dynamic, web.mergeProps({
       component: Component
-    }, otherProps));
+    }, parentProps));
   };
   return ArkComponent;
 };
@@ -195,7 +190,7 @@ const CollapsibleContext = props => props.children(useCollapsibleContext());
 const isFunction = value => typeof value === 'function';
 const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
-const [EnvironmentProvider, useEnvironmentContext] = createContext({
+const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
   providerName: '<EnvironmentProvider />',
   strict: false,
@@ -207,7 +202,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
 });
 
 var _tmpl$$6 = /*#__PURE__*/web.template(`<span hidden>`);
-const Environment = props => {
+const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
   const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
   const environment = solidJs.createMemo(() => ({
@@ -215,7 +210,7 @@ const Environment = props => {
     getDocument: () => domQuery.getDocument(getRootNode()),
     getWindow: () => domQuery.getWindow(getRootNode())
   }));
-  return web.createComponent(EnvironmentProvider, {
+  return web.createComponent(EnvironmentContextProvider, {
     value: environment,
     get children() {
       return [web.memo(() => props.children), web.createComponent(solidJs.Show, {
@@ -243,27 +238,14 @@ const [LocaleContextProvider, useLocaleContext] = createContext({
 });
 
 const LocaleProvider = props => {
-  const [localeProps, restProps] = solidJs.splitProps(props, ['locale', 'defaultLocale']);
-  const [locale, setLocale] = solidJs.createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
-  const environment = useEnvironmentContext();
-  solidJs.createEffect(() => {
-    const cleanup = i18nUtils.trackLocale({
-      locale: localeProps.locale,
-      getRootNode: environment().getRootNode,
-      onLocaleChange(locale) {
-        setLocale(locale.locale);
-      }
-    });
-    solidJs.onCleanup(cleanup);
-  });
   const context = solidJs.createMemo(() => ({
-    locale: locale(),
-    dir: i18nUtils.isRTL(locale()) ? 'rtl' : 'ltr'
+    locale: props.locale,
+    dir: i18nUtils.isRTL(props.locale) ? 'rtl' : 'ltr'
   }));
   return web.createComponent(LocaleContextProvider, {
     value: context,
     get children() {
-      return restProps.children;
+      return props.children;
     }
   });
 };
@@ -272,13 +254,16 @@ const useCollapsible = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, collapsibleProps);
-  const [state, send] = solid.useMachine(collapsible__namespace.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...collapsibleProps
+  }));
+  const [state, send] = solid.useMachine(collapsible__namespace.machine(context()), {
     context
   });
   const [wasVisible, setWasVisible] = solidJs.createSignal(false);
@@ -294,7 +279,7 @@ const useCollapsible = props => {
 };
 
 const CollapsibleRoot = props => {
-  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
+  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);
   return web.createComponent(CollapsibleProvider, {
@@ -358,12 +343,13 @@ const AccordionItem = props => {
   });
 };
 
+const splitVisibilityProps = createSplitProps();
 const AccordionItemContent = props => {
   const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
   const itemContentProps = solidJs.createMemo(() => {
-    const ownProps = accordion().getItemContentProps(itemProps);
-    ownProps.hidden = undefined;
+    const contentProps = accordion().getItemContentProps(itemProps);
+    const [, ownProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state']);
     return ownProps;
   });
   const mergedProps = solid.mergeProps(itemContentProps, props);
@@ -389,14 +375,17 @@ const AccordionItemTrigger = props => {
 };
 
 const useAccordion = props => {
+  const id = solidJs.createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solidJs.mergeProps({
-    id: solidJs.createUniqueId(),
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(accordion__namespace.machine(context), {
+    value: props.defaultValue,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(accordion__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => accordion__namespace.connect(state, send, solid.normalizeProps));
@@ -404,7 +393,7 @@ const useAccordion = props => {
 
 const AccordionRoot = props => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'disabled', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  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);
   return web.createComponent(AccordionProvider, {
@@ -453,12 +442,14 @@ const AvatarImage = props => {
 const useAvatar = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(avatar__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => avatar__namespace.connect(state, send, solid.normalizeProps));
@@ -537,19 +528,22 @@ const CarouselPrevTrigger = props => {
 const useCarousel = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    index: props.defaultIndex,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(carousel__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => carousel__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const CarouselRoot = props => {
-  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
+  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);
   return web.createComponent(CarouselProvider, {
@@ -619,19 +613,22 @@ const CheckboxLabel = props => {
 const useCheckbox = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    checked: props.defaultChecked,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(checkbox__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => checkbox__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const CheckboxRoot = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
+  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);
   return web.createComponent(CheckboxProvider, {
@@ -671,7 +668,6 @@ const ClipboardIndicator = props => {
   const mergedProps = solid.mergeProps(api().getIndicatorProps({
     copied: api().copied
   }), localProps);
-  // @ts-expect-error TODO fix
   const getChildren = solidJs.children(() => localProps.children);
   return web.createComponent(ark.div, web.mergeProps(mergedProps, {
     get children() {
@@ -704,11 +700,13 @@ const ClipboardLabel = props => {
 
 const useClipboard = props => {
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(clipboard__namespace.machine(context), {
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(clipboard__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => clipboard__namespace.connect(state, send, solid.normalizeProps));
@@ -944,17 +942,19 @@ const ColorPickerPositioner = props => {
 };
 
 const useColorPicker = props => {
-  const [local, rest] = solidJs.splitProps(props, ['value']);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps(() => ({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
+    open: props.defaultOpen,
     'open.controlled': props.open !== undefined,
-    value: local.value ? colorPicker__namespace.parse(local.value) : undefined
-  }), rest);
-  const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
+    ...props,
+    value: props.value ? colorPicker__namespace.parse(props.value) : props.defaultValue ? colorPicker__namespace.parse(props.defaultValue) : undefined
+  }));
+  const [state, send] = solid.useMachine(colorPicker__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
@@ -962,7 +962,7 @@ const useColorPicker = props => {
 
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'defaultOpen', 'defaultValue', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1223,20 +1223,22 @@ const ComboboxPositioner = props => {
 };
 
 const useCombobox = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = solidJs.createMemo(() => combobox__namespace.collection(collectionOptions));
+  const [collectionOptions, comboboxProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => combobox__namespace.collection(collectionOptions);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
+    open: props.defaultOpen,
+    value: props.defaultValue,
     'open.controlled': props.open !== undefined,
-    get collection() {
-      return collection();
-    }
-  }, rest);
-  const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
+    ...comboboxProps
+  }));
+  const [state, send] = solid.useMachine(combobox__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.normalizeProps));
@@ -1244,7 +1246,7 @@ const useCombobox = props => {
 
 const ComboboxRoot = props => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'disabled', 'dismissable', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'popup', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1264,8 +1266,9 @@ const ComboboxRoot = props => {
 };
 
 const ComboboxTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['focusable']);
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => combobox().getTriggerProps(triggerProps), localProps);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1403,18 +1406,20 @@ const DatePickerRangeText = props => {
 const useDatePicker = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const [localProps, restProps] = solidJs.splitProps(props, ['value', 'focusedValue', 'min', 'max']);
-  const context = solid.mergeProps(() => ({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined,
-    focusedValue: localProps.focusedValue ? datePicker__namespace.parse(localProps.focusedValue) : undefined,
-    value: localProps.value ? datePicker__namespace.parse(localProps.value) : undefined,
-    max: localProps.max ? datePicker__namespace.parse(localProps.max) : undefined,
-    min: localProps.min ? datePicker__namespace.parse(localProps.min) : undefined
-  }), restProps);
-  const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
+    open: props.defaultOpen,
+    ...props,
+    focusedValue: props.focusedValue ? datePicker__namespace.parse(props.focusedValue) : undefined,
+    value: props.value ? datePicker__namespace.parse(props.value) : props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : undefined,
+    max: props.max ? datePicker__namespace.parse(props.max) : undefined,
+    min: props.min ? datePicker__namespace.parse(props.min) : undefined
+  }));
+  const [state, send] = solid.useMachine(datePicker__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => datePicker__namespace.connect(state, send, solid.normalizeProps));
@@ -1422,7 +1427,7 @@ const useDatePicker = props => {
 
 const DatePickerRoot = props => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'defaultOpen', 'defaultValue', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
   const api = useDatePicker(useDatePickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1690,13 +1695,16 @@ const DialogPositioner = props => {
 const useDialog = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(dialog__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => dialog__namespace.connect(state, send, solid.normalizeProps));
@@ -1705,7 +1713,7 @@ const useDialog = props => {
 const DialogRoot = props => {
   const [presenceProps, dialogProps] = splitPresenceProps(props);
   const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
-  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscape', 'closeOnInteractOutside', 'finalFocusEl', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscape', 'closeOnInteractOutside', 'defaultOpen', 'finalFocusEl', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'persistentElements', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
   const api = useDialog(useDialogProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1808,19 +1816,22 @@ const EditablePreview = props => {
 const useEditable = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(editable__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(editable__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => editable__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const EditableRoot = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  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);
   return web.createComponent(EditableProvider, {
@@ -1945,12 +1956,14 @@ const FileUploadLabel = props => {
 const useFileUpload = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(fileUpload__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => fileUpload__namespace.connect(state, send, solid.normalizeProps));
@@ -2067,13 +2080,16 @@ const HoverCardPositioner = props => {
 const useHoverCard = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(hoverCard__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => hoverCard__namespace.connect(state, send, solid.normalizeProps));
@@ -2081,7 +2097,7 @@ const useHoverCard = props => {
 
 const HoverCardRoot = props => {
   const [presenceProps, hoverCardProps] = splitPresenceProps(props);
-  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'defaultOpen', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useHoverCard(useHoverCardProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -2309,13 +2325,16 @@ const MenuRadioItemGroup = props => {
 const useMenu = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send, machine] = solid.useMachine(menu__namespace.machine(context()), {
     context
   });
   const api = solidJs.createMemo(() => menu__namespace.connect(state, send, solid.normalizeProps));
@@ -2339,7 +2358,7 @@ const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
 
 const MenuRoot = props => {
   const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'highlightedValue', 'id', 'ids', 'loopFocus', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning', 'typeahead']);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'composite', 'defaultOpen', 'highlightedValue', 'id', 'ids', 'loopFocus', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning', 'typeahead']);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const menu = useMenu(useMenuProps);
@@ -2464,19 +2483,22 @@ const NumberInputLabel = props => {
 const useNumberInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(numberInput__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(numberInput__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => numberInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const NumberInputRoot = props => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  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);
   return web.createComponent(NumberInputProvider, {
@@ -2541,19 +2563,22 @@ const PaginationPrevTrigger = props => {
 const usePagination = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    page: props.defaultPage,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(pagination__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => pagination__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const PaginationRoot = props => {
-  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'defaultPage', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const api = usePagination(usePaginationProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(PaginationProvider, {
@@ -2603,19 +2628,22 @@ const PinInputLabel = props => {
 const usePinInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(pinInput__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const PinInputRoot = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  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);
   return web.createComponent(PinInputProvider, {
@@ -2716,13 +2744,16 @@ const PopoverPositioner = props => {
 const usePopover = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = solid.useMachine(popover__namespace.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(popover__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => popover__namespace.connect(state, send, solid.normalizeProps));
@@ -2730,7 +2761,7 @@ const usePopover = props => {
 
 const PopoverRoot = props => {
   const [presenceProps, popoverProps] = splitPresenceProps(props);
-  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEscape', 'closeOnInteractOutside', 'defaultOpen', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'persistentElements', 'portalled', 'positioning']);
   const api = usePopover(usePopoverProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -2819,12 +2850,14 @@ const ProgressRange = props => {
 const useProgress = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(progress__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(progress__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => progress__namespace.connect(state, send, solid.normalizeProps));
@@ -2950,19 +2983,22 @@ const RadioGroupLabel = props => {
 const useRadioGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(radio__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => radio__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const RadioGroupRoot = props => {
-  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  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);
   return web.createComponent(RadioGroupProvider, {
@@ -3027,19 +3063,22 @@ const RatingGroupLabel = props => {
 const useRatingGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(rating__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(rating__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => rating__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const RatingGroupRoot = props => {
-  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  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);
   return web.createComponent(RatingGroupProvider, {
@@ -3138,19 +3177,22 @@ const SegmentGroupLabel = props => {
 const useSegmentGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(radio__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => radio__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const SegmentGroupRoot = props => {
-  const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  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);
   return web.createComponent(SegmentGroupProvider, {
@@ -3254,7 +3296,7 @@ const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
 });
 
 const SelectItem = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const [itemProps, localProps] = createSplitProps()(props, ['item', 'persistFocus']);
   const select = useSelectContext();
   const mergedProps = solid.mergeProps(() => select().getItemProps(itemProps), localProps);
   const itemState = solidJs.createMemo(() => select().getItemState(itemProps));
@@ -3337,20 +3379,22 @@ const SelectPositioner = props => {
 };
 
 const useSelect = props => {
-  const [collectionOptions, localProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = solidJs.createMemo(() => select__namespace.collection(collectionOptions));
+  const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => select__namespace.collection(collectionOptions);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
+    open: props.defaultOpen,
+    value: props.defaultValue,
     'open.controlled': props.open !== undefined,
-    get collection() {
-      return collection();
-    }
-  }, localProps);
-  const [state, send] = solid.useMachine(select__namespace.machine(context), {
+    ...selectProps
+  }));
+  const [state, send] = solid.useMachine(select__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
@@ -3358,7 +3402,7 @@ const useSelect = props => {
 
 const SelectRoot = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
   const select = useSelect(useSelectProps);
   const presenceApi = usePresence(solid.mergeProps(() => ({
     present: select().open
@@ -3455,19 +3499,22 @@ const SliderRange = props => {
 const useSlider = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(slider__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(slider__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => slider__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const SliderRoot = props => {
-  const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'disabled', 'form', 'getAriaValueText', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  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);
   return web.createComponent(SliderProvider, {
@@ -3539,19 +3586,22 @@ const SplitterResizeTrigger = props => {
 const useSplitter = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(splitter__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    size: props.defaultSize,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(splitter__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => splitter__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const SplitterRoot = props => {
-  const [useSplitterProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
+  const [useSplitterProps, localProps] = createSplitProps()(props, ['defaultSize', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
   const api = useSplitter(useSplitterProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(SplitterProvider, {
@@ -3598,19 +3648,22 @@ const SwitchLabel = props => {
 const useSwitch = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    checked: props.defaultChecked,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => zagSwitch__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const SwitchRoot = props => {
-  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
+  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);
   return web.createComponent(SwitchProvider, {
@@ -3689,12 +3742,15 @@ const TabsContext = props => props.children(useTabsContext());
 const useTabs = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(tabs__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(tabs__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => tabs__namespace.connect(state, send, solid.normalizeProps));
@@ -3702,7 +3758,7 @@ const useTabs = props => {
 
 const TabsRoot = props => {
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
-  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'id', 'ids', 'loopFocus', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
+  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);
   return web.createComponent(TabsProvider, {
@@ -3826,19 +3882,22 @@ const TagsInputLabel = props => {
 const useTagsInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(tagsInput__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(tagsInput__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const TagsInputRoot = props => {
-  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  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);
   return web.createComponent(TagsInputProvider, {
@@ -3986,19 +4045,22 @@ const ToggleGroupItem = props => {
 const useToggleGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(toggleGroup__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(toggleGroup__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => toggleGroup__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const ToggleGroupRoot = props => {
-  const [useToggleGroupProps, restProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'loopFocus', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
+  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);
   return web.createComponent(ToggleGroupProvider, {
@@ -4066,13 +4128,16 @@ const TooltipPositioner = props => {
 const useTooltip = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(tooltip__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => tooltip__namespace.connect(state, send, solid.normalizeProps));
@@ -4080,7 +4145,7 @@ const useTooltip = props => {
 
 const TooltipRoot = props => {
   const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEscape', 'closeOnPointerDown', 'defaultOpen', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useTooltip(useTooltipProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -4245,19 +4310,23 @@ const TreeViewLabel = props => {
 const useTreeView = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(treeView__namespace.machine(context), {
+    getRootNode: environment().getRootNode,
+    selectedValue: props.defaultSelectedValue,
+    expandedValue: props.defaultExpandedValue,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(treeView__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => treeView__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const TreeViewRoot = props => {
-  const [useTreeViewProps, localProps] = createSplitProps()(props, ['expandedValue', 'focusedValue', 'id', 'ids', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedValue', 'selectionMode', 'typeahead']);
+  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);
   return web.createComponent(TreeViewProvider, {
@@ -4430,7 +4499,7 @@ exports.EditableLabel = EditableLabel;
 exports.EditablePreview = EditablePreview;
 exports.EditableRoot = EditableRoot;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
-exports.Environment = Environment;
+exports.EnvironmentProvider = EnvironmentProvider;
 exports.FileUpload = fileUpload;
 exports.FileUploadContext = FileUploadContext;
 exports.FileUploadDropzone = FileUploadDropzone;