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

package/dist/source/components/accordion/accordion-item-content.jsx

@@ -1,14 +1,19 @@
 import { mergeProps } from '@zag-js/solid';
 import { createMemo } from 'solid-js';
+import { createSplitProps } from '../../utils/create-split-props';
 import { Collapsible } from '../collapsible';
 import { useAccordionContext } from './use-accordion-context';
 import { useAccordionItemPropsContext } from './use-accordion-item-props-context';
+const splitVisibilityProps = createSplitProps();
 export 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(itemContentProps, props);

package/dist/source/components/accordion/accordion-root.jsx

@@ -8,6 +8,7 @@ export const AccordionRoot = (props) => {
     const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
     const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
         'collapsible',
+        'defaultValue',
         'disabled',
         'id',
         'ids',

package/dist/source/components/accordion/use-accordion.js

@@ -1,11 +1,20 @@
 import * as accordion from '@zag-js/accordion';
 import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo, createUniqueId, mergeProps } from 'solid-js';
+import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useAccordion = (props) => {
+    const id = createUniqueId();
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(accordion.machine(context), { context });
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        value: props.defaultValue,
+        getRootNode: environment().getRootNode,
+        ...props,
+    }));
+    const [state, send] = useMachine(accordion.machine(context()), {
+        context,
+    });
     return createMemo(() => accordion.connect(state, send, normalizeProps));
 };

package/dist/source/components/avatar/use-avatar.js

@@ -1,11 +1,17 @@
 import * as avatar from '@zag-js/avatar';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useAvatar = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(avatar.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        ...props,
+    }));
+    const [state, send] = useMachine(avatar.machine(context()), { context });
     return createMemo(() => avatar.connect(state, send, normalizeProps));
 };

package/dist/source/components/carousel/carousel-root.jsx

@@ -6,6 +6,7 @@ import { CarouselProvider } from './use-carousel-context';
 export const CarouselRoot = (props) => {
     const [useCarouselProps, localProps] = createSplitProps()(props, [
         'align',
+        'defaultIndex',
         'id',
         'ids',
         'index',

package/dist/source/components/carousel/use-carousel.js

@@ -1,11 +1,18 @@
 import * as carousel from '@zag-js/carousel';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useCarousel = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(carousel.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        index: props.defaultIndex,
+        ...props,
+    }));
+    const [state, send] = useMachine(carousel.machine(context()), { context });
     return createMemo(() => carousel.connect(state, send, normalizeProps));
 };

package/dist/source/components/checkbox/checkbox-root.jsx

@@ -6,6 +6,7 @@ import { CheckboxProvider } from './use-checkbox-context';
 export const CheckboxRoot = (props) => {
     const [useCheckboxProps, labelprops] = createSplitProps()(props, [
         'checked',
+        'defaultChecked',
         'disabled',
         'form',
         'id',

package/dist/source/components/checkbox/use-checkbox.js

@@ -1,11 +1,18 @@
 import * as checkbox from '@zag-js/checkbox';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useCheckbox = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(checkbox.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        checked: props.defaultChecked,
+        ...props,
+    }));
+    const [state, send] = useMachine(checkbox.machine(context()), { context });
     return createMemo(() => checkbox.connect(state, send, normalizeProps));
 };

package/dist/source/components/clipboard/clipboard-indicator.jsx

@@ -7,7 +7,6 @@ export const ClipboardIndicator = (props) => {
     const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
     const api = useClipboardContext();
     const mergedProps = mergeProps(api().getIndicatorProps({ copied: api().copied }), localProps);
-    // @ts-expect-error TODO fix
     const getChildren = children(() => localProps.children);
     return (<ark.div {...mergedProps}>
       <Show when={api().copied} fallback={getChildren()}>

package/dist/source/components/clipboard/use-clipboard.js

@@ -1,10 +1,15 @@
 import * as clipboard from '@zag-js/clipboard';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../../providers';
 export const useClipboard = (props) => {
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(clipboard.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        getRootNode: environment().getRootNode,
+        ...props,
+    }));
+    const [state, send] = useMachine(clipboard.machine(context()), { context });
     return createMemo(() => clipboard.connect(state, send, normalizeProps));
 };

package/dist/source/components/collapsible/collapsible-root.jsx

@@ -5,6 +5,7 @@ import { useCollapsible } from './use-collapsible';
 import { CollapsibleProvider } from './use-collapsible-context';
 export const CollapsibleRoot = (props) => {
     const [useCollapsibleProps, localProps] = createSplitProps()(props, [
+        'defaultOpen',
         'disabled',
         'id',
         'ids',

package/dist/source/components/collapsible/use-collapsible.js

@@ -1,5 +1,5 @@
 import * as collapsible from '@zag-js/collapsible';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createEffect, createMemo, createSignal, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 import { splitRenderStrategyProps } from '../../utils/render-strategy';
@@ -7,13 +7,16 @@ export const useCollapsible = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
-    const context = mergeProps({
-        id: createUniqueId(),
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
+        open: props.defaultOpen,
         'open.controlled': props.open !== undefined,
-    }, collapsibleProps);
-    const [state, send] = useMachine(collapsible.machine(context), { context });
+        ...collapsibleProps,
+    }));
+    const [state, send] = useMachine(collapsible.machine(context()), { context });
     const [wasVisible, setWasVisible] = createSignal(false);
     createEffect(() => {
         const isPresent = api().visible;

package/dist/source/components/color-picker/color-picker-root.jsx

@@ -8,6 +8,8 @@ export const ColorPickerRoot = (props) => {
     const [presenceProps, colorPickerProps] = splitPresenceProps(props);
     const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
         'closeOnSelect',
+        'defaultOpen',
+        'defaultValue',
         'disabled',
         'format',
         'id',

package/dist/source/components/color-picker/use-color-picker.js

@@ -1,18 +1,24 @@
 import * as colorPicker from '@zag-js/color-picker';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo, createUniqueId, splitProps } from 'solid-js';
+import { normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useColorPicker = (props) => {
-    const [local, rest] = splitProps(props, ['value']);
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps(() => ({
-        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.parse(local.value) : undefined,
-    }), rest);
-    const [state, send] = useMachine(colorPicker.machine(context), { context });
+        ...props,
+        value: props.value
+            ? colorPicker.parse(props.value)
+            : props.defaultValue
+                ? colorPicker.parse(props.defaultValue)
+                : undefined,
+    }));
+    const [state, send] = useMachine(colorPicker.machine(context()), { context });
     return createMemo(() => colorPicker.connect(state, send, normalizeProps));
 };

package/dist/source/components/combobox/combobox-root.jsx

@@ -10,8 +10,11 @@ export const ComboboxRoot = (props) => {
         'allowCustomValue',
         'autoFocus',
         'closeOnSelect',
+        'composite',
+        'defaultOpen',
+        'defaultValue',
         'disabled',
-        'dismissable',
+        'disableLayer',
         'form',
         'getSelectionValue',
         'highlightedValue',
@@ -40,7 +43,6 @@ export const ComboboxRoot = (props) => {
         'openOnClick',
         'openOnKeyPress',
         'placeholder',
-        'popup',
         'positioning',
         'readOnly',
         'scrollToIndexFn',

package/dist/source/components/combobox/combobox-trigger.jsx

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
 import { ark } from '../factory';
 import { useComboboxContext } from './use-combobox-context';
 export const ComboboxTrigger = (props) => {
+    const [triggerProps, localProps] = createSplitProps()(props, ['focusable']);
     const combobox = useComboboxContext();
-    const mergedProps = mergeProps(() => combobox().triggerProps, props);
+    const mergedProps = mergeProps(() => combobox().getTriggerProps(triggerProps), localProps);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/combobox/use-combobox.js

@@ -1,28 +1,30 @@
 import * as combobox from '@zag-js/combobox';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 import { createSplitProps } from '../../utils/create-split-props';
 export const useCombobox = (props) => {
-    const [collectionOptions, rest] = createSplitProps()(props, [
+    const [collectionOptions, comboboxProps] = createSplitProps()(props, [
         'isItemDisabled',
         'itemToValue',
         'itemToString',
         'items',
     ]);
-    const collection = createMemo(() => combobox.collection(collectionOptions));
+    const collection = () => combobox.collection(collectionOptions);
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({
-        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,
-        get collection() {
-            return collection();
-        },
-    }, rest);
-    const [state, send] = useMachine(combobox.machine(context), {
+        ...comboboxProps,
+    }));
+    const [state, send] = useMachine(combobox.machine(context()), {
         context,
     });
     return createMemo(() => combobox.connect(state, send, normalizeProps));

package/dist/source/components/date-picker/date-picker-root.jsx

@@ -8,6 +8,8 @@ export const DatePickerRoot = (props) => {
     const [presenceProps, datePickerProps] = splitPresenceProps(props);
     const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
         'closeOnSelect',
+        'defaultOpen',
+        'defaultValue',
         'disabled',
         'fixedWeeks',
         'focusedValue',

package/dist/source/components/date-picker/use-date-picker.js

@@ -1,21 +1,27 @@
 import * as datePicker from '@zag-js/date-picker';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo, createUniqueId, splitProps } from 'solid-js';
+import { normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useDatePicker = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
-    const context = mergeProps(() => ({
-        id: createUniqueId(),
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
         'open.controlled': props.open !== undefined,
-        focusedValue: localProps.focusedValue ? datePicker.parse(localProps.focusedValue) : undefined,
-        value: localProps.value ? datePicker.parse(localProps.value) : undefined,
-        max: localProps.max ? datePicker.parse(localProps.max) : undefined,
-        min: localProps.min ? datePicker.parse(localProps.min) : undefined,
-    }), restProps);
-    const [state, send] = useMachine(datePicker.machine(context), { context });
+        open: props.defaultOpen,
+        ...props,
+        focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
+        value: props.value
+            ? datePicker.parse(props.value)
+            : props.defaultValue
+                ? datePicker.parse(props.defaultValue)
+                : undefined,
+        max: props.max ? datePicker.parse(props.max) : undefined,
+        min: props.min ? datePicker.parse(props.min) : undefined,
+    }));
+    const [state, send] = useMachine(datePicker.machine(context()), { context });
     return createMemo(() => datePicker.connect(state, send, normalizeProps));
 };

package/dist/source/components/dialog/dialog-root.jsx

@@ -11,6 +11,7 @@ export const DialogRoot = (props) => {
         'aria-label',
         'closeOnEscape',
         'closeOnInteractOutside',
+        'defaultOpen',
         'finalFocusEl',
         'id',
         'ids',
@@ -22,6 +23,7 @@ export const DialogRoot = (props) => {
         'onOpenChange',
         'onPointerDownOutside',
         'open',
+        'persistentElements',
         'preventScroll',
         'restoreFocus',
         'role',

package/dist/source/components/dialog/use-dialog.js

@@ -1,16 +1,19 @@
 import * as dialog from '@zag-js/dialog';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useDialog = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({
-        id: createUniqueId(),
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
+        open: props.defaultOpen,
         'open.controlled': props.open !== undefined,
-    }, props);
-    const [state, send] = useMachine(dialog.machine(context), { context });
+        ...props,
+    }));
+    const [state, send] = useMachine(dialog.machine(context()), { context });
     return createMemo(() => dialog.connect(state, send, normalizeProps));
 };

package/dist/source/components/editable/editable-root.jsx

@@ -7,6 +7,7 @@ export const EditableRoot = (props) => {
     const [useEditableProps, localProps] = createSplitProps()(props, [
         'activationMode',
         'autoResize',
+        'defaultValue',
         'disabled',
         'finalFocusEl',
         'form',

package/dist/source/components/editable/use-editable.js

@@ -1,11 +1,18 @@
 import * as editable from '@zag-js/editable';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useEditable = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(editable.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        value: props.defaultValue,
+        ...props,
+    }));
+    const [state, send] = useMachine(editable.machine(context()), { context });
     return createMemo(() => editable.connect(state, send, normalizeProps));
 };

package/dist/source/components/factory.jsx

@@ -3,20 +3,17 @@ import { splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 const withAsProp = (Component) => {
     const ArkComponent = (props) => {
-        const [localProps, otherProps] = splitProps(props, ['asChild']);
+        const [localProps, parentProps] = 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] = splitProps(otherProps, ['children', 'ref']);
-                return { ref: otherProps.ref, ...mergeProps(restProps, userProps) };
+            // @ts-expect-error
+            const propsFn = (userProps) => {
+                const [, restProps] = splitProps(parentProps, ['ref']);
+                return { ref: parentProps.ref, ...mergeProps(restProps, userProps) };
             };
-            return <>{otherProps.children(fn)}</>;
+            return localProps.asChild(propsFn);
         }
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        return <Dynamic component={Component} {...otherProps}/>;
+        // @ts-expect-error
+        return <Dynamic component={Component} {...parentProps}/>;
     };
     return ArkComponent;
 };

package/dist/source/components/file-upload/use-file-upload.js

@@ -1,11 +1,17 @@
 import * as fileUpload from '@zag-js/file-upload';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useFileUpload = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(fileUpload.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        ...props,
+    }));
+    const [state, send] = useMachine(fileUpload.machine(context()), { context });
     return createMemo(() => fileUpload.connect(state, send, normalizeProps));
 };

package/dist/source/components/hover-card/hover-card-root.jsx

@@ -7,6 +7,7 @@ export const HoverCardRoot = (props) => {
     const [presenceProps, hoverCardProps] = splitPresenceProps(props);
     const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, [
         'closeDelay',
+        'defaultOpen',
         'id',
         'ids',
         'onOpenChange',

package/dist/source/components/hover-card/use-hover-card.js

@@ -1,16 +1,19 @@
 import * as hoverCard from '@zag-js/hover-card';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useHoverCard = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({
-        id: createUniqueId(),
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
+        open: props.defaultOpen,
         'open.controlled': props.open !== undefined,
-    }, props);
-    const [state, send] = useMachine(hoverCard.machine(context), { context });
+        ...props,
+    }));
+    const [state, send] = useMachine(hoverCard.machine(context()), { context });
     return createMemo(() => hoverCard.connect(state, send, normalizeProps));
 };

package/dist/source/components/menu/menu-root.jsx

@@ -12,6 +12,8 @@ export const MenuRoot = (props) => {
         'anchorPoint',
         'aria-label',
         'closeOnSelect',
+        'composite',
+        'defaultOpen',
         'highlightedValue',
         'id',
         'ids',

package/dist/source/components/menu/use-menu.js

@@ -1,17 +1,20 @@
 import * as menu from '@zag-js/menu';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useMenu = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({
-        id: createUniqueId(),
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
+        open: props.defaultOpen,
         'open.controlled': props.open !== undefined,
-    }, props);
-    const [state, send, machine] = useMachine(menu.machine(context), { context });
+        ...props,
+    }));
+    const [state, send, machine] = useMachine(menu.machine(context()), { context });
     const api = createMemo(() => menu.connect(state, send, normalizeProps));
     return {
         api,

package/dist/source/components/number-input/number-input-root.jsx

@@ -8,6 +8,7 @@ export const NumberInputRoot = (props) => {
         'allowMouseWheel',
         'allowOverflow',
         'clampValueOnBlur',
+        'defaultValue',
         'disabled',
         'focusInputOnChange',
         'form',

package/dist/source/components/number-input/use-number-input.js

@@ -1,11 +1,18 @@
 import * as numberInput from '@zag-js/number-input';
-import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 export const useNumberInput = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(numberInput.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        value: props.defaultValue,
+        ...props,
+    }));
+    const [state, send] = useMachine(numberInput.machine(context()), { context });
     return createMemo(() => numberInput.connect(state, send, normalizeProps));
 };

package/dist/source/components/pagination/pagination-root.jsx

@@ -6,6 +6,7 @@ import { PaginationProvider } from './use-pagination-context';
 export const PaginationRoot = (props) => {
     const [usePaginationProps, localProps] = createSplitProps()(props, [
         'count',
+        'defaultPage',
         'id',
         'ids',
         'onPageChange',