@ark-ui/solid 3.0.0-3 → 3.0.0-5

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { createContext as createContext$1, useContext, splitProps, Show, createSignal, createMemo, createEffect, onCleanup, createUniqueId, mergeProps as mergeProps$2, children, Index, For } from 'solid-js';
+import { createContext as createContext$1, useContext, splitProps, Show, createSignal, createMemo, createUniqueId, createEffect, children, Index, For } from 'solid-js';
 import { memo, createComponent, Dynamic, mergeProps, use, template, insert, effect, spread } from 'solid-js/web';
 import { mergeProps as mergeProps$1, useMachine, normalizeProps, useActor } from '@zag-js/solid';
 import * as collapsible$1 from '@zag-js/collapsible';
@@ -15,7 +15,7 @@ import * as datePicker$1 from '@zag-js/date-picker';
 import * as dialog$1 from '@zag-js/dialog';
 import * as editable$1 from '@zag-js/editable';
 import * as fileUpload$1 from '@zag-js/file-upload';
-import { trackLocale, isRTL, formatBytes, formatNumber } from '@zag-js/i18n-utils';
+import { isRTL, formatBytes, formatNumber } from '@zag-js/i18n-utils';
 import * as hoverCard$1 from '@zag-js/hover-card';
 import * as menu$1 from '@zag-js/menu';
 import * as numberInput$1 from '@zag-js/number-input';
@@ -191,27 +191,14 @@ const [LocaleContextProvider, useLocaleContext] = createContext({
 });
 
 const LocaleProvider = props => {
-  const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
-  const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
-  const environment = useEnvironmentContext();
-  createEffect(() => {
-    const cleanup = trackLocale({
-      locale: localeProps.locale,
-      getRootNode: environment().getRootNode,
-      onLocaleChange(locale) {
-        setLocale(locale.locale);
-      }
-    });
-    onCleanup(cleanup);
-  });
   const context = createMemo(() => ({
-    locale: locale(),
-    dir: isRTL(locale()) ? 'rtl' : 'ltr'
+    locale: props.locale,
+    dir: isRTL(props.locale) ? 'rtl' : 'ltr'
   }));
   return createComponent(LocaleContextProvider, {
     value: context,
     get children() {
-      return restProps.children;
+      return props.children;
     }
   });
 };
@@ -220,13 +207,16 @@ const useCollapsible = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, collapsibleProps);
-  const [state, send] = useMachine(collapsible$1.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...collapsibleProps
+  }));
+  const [state, send] = useMachine(collapsible$1.machine(context()), {
     context
   });
   const [wasVisible, setWasVisible] = createSignal(false);
@@ -242,7 +232,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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(CollapsibleProvider, {
@@ -306,12 +296,13 @@ const AccordionItem = props => {
   });
 };
 
+const splitVisibilityProps = createSplitProps();
 const AccordionItemContent = props => {
   const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
   const itemContentProps = 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 = mergeProps$1(itemContentProps, props);
@@ -337,14 +328,17 @@ const AccordionItemTrigger = props => {
 };
 
 const useAccordion = props => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(accordion$1.machine(context), {
+    value: props.defaultValue,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = useMachine(accordion$1.machine(context()), {
     context
   });
   return createMemo(() => accordion$1.connect(state, send, normalizeProps));
@@ -352,7 +346,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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(AccordionProvider, {
@@ -401,12 +395,14 @@ const AvatarImage = props => {
 const useAvatar = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(avatar$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = useMachine(avatar$1.machine(context()), {
     context
   });
   return createMemo(() => avatar$1.connect(state, send, normalizeProps));
@@ -485,19 +481,22 @@ const CarouselPrevTrigger = props => {
 const useCarousel = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(carousel$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    index: props.defaultIndex,
+    ...props
+  }));
+  const [state, send] = useMachine(carousel$1.machine(context()), {
     context
   });
   return createMemo(() => carousel$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(CarouselProvider, {
@@ -567,19 +566,22 @@ const CheckboxLabel = props => {
 const useCheckbox = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(checkbox$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    checked: props.defaultChecked,
+    ...props
+  }));
+  const [state, send] = useMachine(checkbox$1.machine(context()), {
     context
   });
   return createMemo(() => checkbox$1.connect(state, send, 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 = mergeProps$1(() => checkbox().rootProps, labelprops);
   return createComponent(CheckboxProvider, {
@@ -652,11 +654,13 @@ const ClipboardLabel = props => {
 
 const useClipboard = props => {
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(clipboard$1.machine(context), {
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = useMachine(clipboard$1.machine(context()), {
     context
   });
   return createMemo(() => clipboard$1.connect(state, send, normalizeProps));
@@ -892,17 +896,19 @@ const ColorPickerPositioner = props => {
 };
 
 const useColorPicker = props => {
-  const [local, rest] = splitProps(props, ['value']);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1(() => ({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
+    open: props.defaultOpen,
     'open.controlled': props.open !== undefined,
-    value: local.value ? colorPicker$1.parse(local.value) : undefined
-  }), rest);
-  const [state, send] = useMachine(colorPicker$1.machine(context), {
+    ...props,
+    value: props.value ? colorPicker$1.parse(props.value) : props.defaultValue ? colorPicker$1.parse(props.defaultValue) : undefined
+  }));
+  const [state, send] = useMachine(colorPicker$1.machine(context()), {
     context
   });
   return createMemo(() => colorPicker$1.connect(state, send, normalizeProps));
@@ -910,7 +916,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -1171,18 +1177,22 @@ const ComboboxPositioner = props => {
 };
 
 const useCombobox = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const [collectionOptions, comboboxProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => combobox$1.collection(collectionOptions);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
+    collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
+    open: props.defaultOpen,
+    value: props.defaultValue,
     'open.controlled': props.open !== undefined,
-    collection: collection()
-  }, rest);
-  const [state, send] = useMachine(combobox$1.machine(context), {
+    ...comboboxProps
+  }));
+  const [state, send] = useMachine(combobox$1.machine(context()), {
     context
   });
   return createMemo(() => combobox$1.connect(state, send, normalizeProps));
@@ -1190,7 +1200,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -1210,8 +1220,9 @@ const ComboboxRoot = props => {
 };
 
 const ComboboxTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['focusable']);
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$1(() => combobox().triggerProps, props);
+  const mergedProps = mergeProps$1(() => combobox().getTriggerProps(triggerProps), localProps);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -1349,18 +1360,20 @@ const DatePickerRangeText = props => {
 const useDatePicker = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
-  const context = mergeProps$1(() => ({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     'open.controlled': props.open !== undefined,
-    focusedValue: localProps.focusedValue ? datePicker$1.parse(localProps.focusedValue) : undefined,
-    value: localProps.value ? datePicker$1.parse(localProps.value) : undefined,
-    max: localProps.max ? datePicker$1.parse(localProps.max) : undefined,
-    min: localProps.min ? datePicker$1.parse(localProps.min) : undefined
-  }), restProps);
-  const [state, send] = useMachine(datePicker$1.machine(context), {
+    open: props.defaultOpen,
+    ...props,
+    focusedValue: props.focusedValue ? datePicker$1.parse(props.focusedValue) : undefined,
+    value: props.value ? datePicker$1.parse(props.value) : props.defaultValue ? datePicker$1.parse(props.defaultValue) : undefined,
+    max: props.max ? datePicker$1.parse(props.max) : undefined,
+    min: props.min ? datePicker$1.parse(props.min) : undefined
+  }));
+  const [state, send] = useMachine(datePicker$1.machine(context()), {
     context
   });
   return createMemo(() => datePicker$1.connect(state, send, normalizeProps));
@@ -1368,7 +1381,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -1636,13 +1649,16 @@ const DialogPositioner = props => {
 const useDialog = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = useMachine(dialog$1.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = useMachine(dialog$1.machine(context()), {
     context
   });
   return createMemo(() => dialog$1.connect(state, send, normalizeProps));
@@ -1651,7 +1667,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -1754,19 +1770,22 @@ const EditablePreview = props => {
 const useEditable = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(editable$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(editable$1.machine(context()), {
     context
   });
   return createMemo(() => editable$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(EditableProvider, {
@@ -1891,12 +1910,14 @@ const FileUploadLabel = props => {
 const useFileUpload = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(fileUpload$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = useMachine(fileUpload$1.machine(context()), {
     context
   });
   return createMemo(() => fileUpload$1.connect(state, send, normalizeProps));
@@ -2013,13 +2034,16 @@ const HoverCardPositioner = props => {
 const useHoverCard = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = useMachine(hoverCard$1.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = useMachine(hoverCard$1.machine(context()), {
     context
   });
   return createMemo(() => hoverCard$1.connect(state, send, normalizeProps));
@@ -2027,7 +2051,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -2255,13 +2279,16 @@ const MenuRadioItemGroup = props => {
 const useMenu = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send, machine] = useMachine(menu$1.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send, machine] = useMachine(menu$1.machine(context()), {
     context
   });
   const api = createMemo(() => menu$1.connect(state, send, normalizeProps));
@@ -2285,7 +2312,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);
@@ -2410,19 +2437,22 @@ const NumberInputLabel = props => {
 const useNumberInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(numberInput$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(numberInput$1.machine(context()), {
     context
   });
   return createMemo(() => numberInput$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(NumberInputProvider, {
@@ -2487,19 +2517,22 @@ const PaginationPrevTrigger = props => {
 const usePagination = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(pagination$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    page: props.defaultPage,
+    ...props
+  }));
+  const [state, send] = useMachine(pagination$1.machine(context()), {
     context
   });
   return createMemo(() => pagination$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(PaginationProvider, {
@@ -2549,19 +2582,22 @@ const PinInputLabel = props => {
 const usePinInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(pinInput$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(pinInput$1.machine(context()), {
     context
   });
   return createMemo(() => pinInput$1.connect(state, send, 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 = mergeProps$1(() => pinInput().rootProps, localProps);
   return createComponent(PinInputProvider, {
@@ -2662,13 +2698,16 @@ const PopoverPositioner = props => {
 const usePopover = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = useMachine(popover$1.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = useMachine(popover$1.machine(context()), {
     context
   });
   return createMemo(() => popover$1.connect(state, send, normalizeProps));
@@ -2676,7 +2715,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -2765,12 +2804,14 @@ const ProgressRange = props => {
 const useProgress = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(progress$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = useMachine(progress$1.machine(context()), {
     context
   });
   return createMemo(() => progress$1.connect(state, send, normalizeProps));
@@ -2896,19 +2937,22 @@ const RadioGroupLabel = props => {
 const useRadioGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(radio.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(radio.machine(context()), {
     context
   });
   return createMemo(() => radio.connect(state, send, 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 = mergeProps$1(() => radioGroup().rootProps, localProps);
   return createComponent(RadioGroupProvider, {
@@ -2973,19 +3017,22 @@ const RatingGroupLabel = props => {
 const useRatingGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(rating.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(rating.machine(context()), {
     context
   });
   return createMemo(() => rating.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(RatingGroupProvider, {
@@ -3084,19 +3131,22 @@ const SegmentGroupLabel = props => {
 const useSegmentGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(radio.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(radio.machine(context()), {
     context
   });
   return createMemo(() => radio.connect(state, send, 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 = mergeProps$1(() => segmentGroup().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
   return createComponent(SegmentGroupProvider, {
@@ -3200,7 +3250,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 = mergeProps$1(() => select().getItemProps(itemProps), localProps);
   const itemState = createMemo(() => select().getItemState(itemProps));
@@ -3283,18 +3333,22 @@ const SelectPositioner = props => {
 };
 
 const useSelect = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => select$1.collection(collectionOptions);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
+    collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    collection: collection(),
-    'open.controlled': props.open !== undefined
-  }, rest);
-  const [state, send] = useMachine(select$1.machine(context), {
+    open: props.defaultOpen,
+    value: props.defaultValue,
+    'open.controlled': props.open !== undefined,
+    ...selectProps
+  }));
+  const [state, send] = useMachine(select$1.machine(context()), {
     context
   });
   return createMemo(() => select$1.connect(state, send, normalizeProps));
@@ -3302,7 +3356,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(mergeProps$1(() => ({
     present: select().open
@@ -3399,19 +3453,22 @@ const SliderRange = props => {
 const useSlider = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(slider$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(slider$1.machine(context()), {
     context
   });
   return createMemo(() => slider$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SliderProvider, {
@@ -3483,19 +3540,22 @@ const SplitterResizeTrigger = props => {
 const useSplitter = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(splitter$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    size: props.defaultSize,
+    ...props
+  }));
+  const [state, send] = useMachine(splitter$1.machine(context()), {
     context
   });
   return createMemo(() => splitter$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SplitterProvider, {
@@ -3542,19 +3602,22 @@ const SwitchLabel = props => {
 const useSwitch = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(zagSwitch.machine(context), {
+    getRootNode: environment().getRootNode,
+    checked: props.defaultChecked,
+    ...props
+  }));
+  const [state, send] = useMachine(zagSwitch.machine(context()), {
     context
   });
   return createMemo(() => zagSwitch.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SwitchProvider, {
@@ -3633,12 +3696,15 @@ const TabsContext = props => props.children(useTabsContext());
 const useTabs = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(tabs$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(tabs$1.machine(context()), {
     context
   });
   return createMemo(() => tabs$1.connect(state, send, normalizeProps));
@@ -3646,7 +3712,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 = mergeProps$1(() => api().rootProps, restProps);
   return createComponent(TabsProvider, {
@@ -3770,19 +3836,22 @@ const TagsInputLabel = props => {
 const useTagsInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(tagsInput$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(tagsInput$1.machine(context()), {
     context
   });
   return createMemo(() => tagsInput$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(TagsInputProvider, {
@@ -3930,19 +3999,22 @@ const ToggleGroupItem = props => {
 const useToggleGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(toggleGroup$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    value: props.defaultValue,
+    ...props
+  }));
+  const [state, send] = useMachine(toggleGroup$1.machine(context()), {
     context
   });
   return createMemo(() => toggleGroup$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, restProps);
   return createComponent(ToggleGroupProvider, {
@@ -4010,13 +4082,16 @@ const TooltipPositioner = props => {
 const useTooltip = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined
-  }, props);
-  const [state, send] = useMachine(tooltip$1.machine(context), {
+    open: props.defaultOpen,
+    'open.controlled': props.open !== undefined,
+    ...props
+  }));
+  const [state, send] = useMachine(tooltip$1.machine(context()), {
     context
   });
   return createMemo(() => tooltip$1.connect(state, send, normalizeProps));
@@ -4024,7 +4099,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(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -4189,19 +4264,23 @@ const TreeViewLabel = props => {
 const useTreeView = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const context = mergeProps$1({
-    id: createUniqueId(),
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
     dir: locale().dir,
-    getRootNode: environment().getRootNode
-  }, props);
-  const [state, send] = useMachine(treeView$1.machine(context), {
+    getRootNode: environment().getRootNode,
+    selectedValue: props.defaultSelectedValue,
+    expandedValue: props.defaultExpandedValue,
+    ...props
+  }));
+  const [state, send] = useMachine(treeView$1.machine(context()), {
     context
   });
   return createMemo(() => treeView$1.connect(state, send, 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 = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(TreeViewProvider, {