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

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/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,10 +1,10 @@
 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',
@@ -13,14 +13,18 @@ export const useCombobox = (props) => {
     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,
-        collection: 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/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',

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

@@ -1,11 +1,18 @@
 import * as pagination from '@zag-js/pagination';
-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 usePagination = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(pagination.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        page: props.defaultPage,
+        ...props,
+    }));
+    const [state, send] = useMachine(pagination.machine(context()), { context });
     return createMemo(() => pagination.connect(state, send, normalizeProps));
 };

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

@@ -7,6 +7,7 @@ export const PinInputRoot = (props) => {
     const [usePinInputProps, localProps] = createSplitProps()(props, [
         'autoFocus',
         'blurOnComplete',
+        'defaultValue',
         'disabled',
         'form',
         'id',

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

@@ -1,11 +1,18 @@
 import * as pinInput from '@zag-js/pin-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 usePinInput = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode: environment().getRootNode }, props);
-    const [state, send] = useMachine(pinInput.machine(context), { context });
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        value: props.defaultValue,
+        ...props,
+    }));
+    const [state, send] = useMachine(pinInput.machine(context()), { context });
     return createMemo(() => pinInput.connect(state, send, normalizeProps));
 };