@ark-ui/react 4.9.2 → 5.0.1

package/dist/components/number-input/number-input-root-provider.cjs

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
-const NumberInputRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: numberInput }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(numberInput.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useNumberInputContext.NumberInputProvider, { value: numberInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const NumberInputRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: numberInput }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(numberInput.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useNumberInputContext.NumberInputProvider, { value: numberInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 NumberInputRootProvider.displayName = "NumberInputRootProvider";
 
 exports.NumberInputRootProvider = NumberInputRootProvider;

package/dist/components/number-input/number-input-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { NumberInputProvider } from './use-number-input-context.js';
 
-const NumberInputRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: numberInput }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(numberInput.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(NumberInputProvider, { value: numberInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const NumberInputRootProvider = forwardRef((props, ref) => {
+  const [{ value: numberInput }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(numberInput.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(NumberInputProvider, { value: numberInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 NumberInputRootProvider.displayName = "NumberInputRootProvider";
 
 export { NumberInputRootProvider };

package/dist/components/number-input/number-input-scrubber.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
-const NumberInputScrubber = react.forwardRef(
-  (props, ref) => {
-    const numberInput = useNumberInputContext.useNumberInputContext();
-    const mergedProps = react$1.mergeProps(numberInput.getScrubberProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const NumberInputScrubber = react.forwardRef((props, ref) => {
+  const numberInput = useNumberInputContext.useNumberInputContext();
+  const mergedProps = react$1.mergeProps(numberInput.getScrubberProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 NumberInputScrubber.displayName = "NumberInputScrubber";
 
 exports.NumberInputScrubber = NumberInputScrubber;

package/dist/components/number-input/number-input-scrubber.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useNumberInputContext } from './use-number-input-context.js';
 
-const NumberInputScrubber = forwardRef(
-  (props, ref) => {
-    const numberInput = useNumberInputContext();
-    const mergedProps = mergeProps(numberInput.getScrubberProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const NumberInputScrubber = forwardRef((props, ref) => {
+  const numberInput = useNumberInputContext();
+  const mergedProps = mergeProps(numberInput.getScrubberProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 NumberInputScrubber.displayName = "NumberInputScrubber";
 
 export { NumberInputScrubber };

package/dist/components/number-input/number-input-value-text.cjs

@@ -9,14 +9,12 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
-const NumberInputValueText = react.forwardRef(
-  (props, ref) => {
-    const { children, ...localProps } = props;
-    const numberInput = useNumberInputContext.useNumberInputContext();
-    const mergedProps = react$1.mergeProps(numberInput.getValueTextProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || numberInput.value });
-  }
-);
+const NumberInputValueText = react.forwardRef((props, ref) => {
+  const { children, ...localProps } = props;
+  const numberInput = useNumberInputContext.useNumberInputContext();
+  const mergedProps = react$1.mergeProps(numberInput.getValueTextProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || numberInput.value });
+});
 NumberInputValueText.displayName = "NumberInputValueText";
 
 exports.NumberInputValueText = NumberInputValueText;

package/dist/components/number-input/number-input-value-text.js

@@ -5,14 +5,12 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useNumberInputContext } from './use-number-input-context.js';
 
-const NumberInputValueText = forwardRef(
-  (props, ref) => {
-    const { children, ...localProps } = props;
-    const numberInput = useNumberInputContext();
-    const mergedProps = mergeProps(numberInput.getValueTextProps(), localProps);
-    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || numberInput.value });
-  }
-);
+const NumberInputValueText = forwardRef((props, ref) => {
+  const { children, ...localProps } = props;
+  const numberInput = useNumberInputContext();
+  const mergedProps = mergeProps(numberInput.getValueTextProps(), localProps);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || numberInput.value });
+});
 NumberInputValueText.displayName = "NumberInputValueText";
 
 export { NumberInputValueText };

package/dist/components/number-input/number-input.d.cts

@@ -1,5 +1,5 @@
-export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails, } from '@zag-js/number-input';
-export { NumberInputContext as Context, type NumberInputContextProps as ContextProps, } from './number-input-context';
+export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails } from '@zag-js/number-input';
+export { NumberInputContext as Context, type NumberInputContextProps as ContextProps } from './number-input-context';
 export { NumberInputControl as Control, type NumberInputControlBaseProps as ControlBaseProps, type NumberInputControlProps as ControlProps, } from './number-input-control';
 export { NumberInputDecrementTrigger as DecrementTrigger, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, type NumberInputDecrementTriggerProps as DecrementTriggerProps, } from './number-input-decrement-trigger';
 export { NumberInputIncrementTrigger as IncrementTrigger, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, type NumberInputIncrementTriggerProps as IncrementTriggerProps, } from './number-input-increment-trigger';

package/dist/components/number-input/number-input.d.ts

@@ -1,5 +1,5 @@
-export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails, } from '@zag-js/number-input';
-export { NumberInputContext as Context, type NumberInputContextProps as ContextProps, } from './number-input-context';
+export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails } from '@zag-js/number-input';
+export { NumberInputContext as Context, type NumberInputContextProps as ContextProps } from './number-input-context';
 export { NumberInputControl as Control, type NumberInputControlBaseProps as ControlBaseProps, type NumberInputControlProps as ControlProps, } from './number-input-control';
 export { NumberInputDecrementTrigger as DecrementTrigger, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, type NumberInputDecrementTriggerProps as DecrementTriggerProps, } from './number-input-decrement-trigger';
 export { NumberInputIncrementTrigger as IncrementTrigger, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, type NumberInputIncrementTriggerProps as IncrementTriggerProps, } from './number-input-increment-trigger';

package/dist/components/number-input/use-number-input.cjs

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,12 +29,13 @@ function _interopNamespaceDefault(e) {
 
 const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
 
-const useNumberInput = (props = {}) => {
+const useNumberInput = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir, locale } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       input: field?.ids.control
@@ -47,18 +47,10 @@ const useNumberInput = (props = {}) => {
     dir,
     locale,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onValueInvalid: useEvent.useEvent(props.onValueInvalid),
-    onFocusChange: useEvent.useEvent(props.onFocusChange)
-  };
-  const [state, send] = react$1.useMachine(numberInput__namespace.machine(initialContext), { context });
-  return numberInput__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(numberInput__namespace.machine, machineProps);
+  return numberInput__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useNumberInput = useNumberInput;

package/dist/components/number-input/use-number-input.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as numberInput from '@zag-js/number-input';
-export interface UseNumberInputProps extends Optional<Omit<numberInput.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the number input when it is first rendered.
-     * Use when you do not need to control the state of the number input.
-     */
-    defaultValue?: numberInput.Context['value'];
+export interface UseNumberInputProps extends Optional<Omit<numberInput.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseNumberInputReturn extends numberInput.Api<PropTypes> {
 }

package/dist/components/number-input/use-number-input.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as numberInput from '@zag-js/number-input';
-export interface UseNumberInputProps extends Optional<Omit<numberInput.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the number input when it is first rendered.
-     * Use when you do not need to control the state of the number input.
-     */
-    defaultValue?: numberInput.Context['value'];
+export interface UseNumberInputProps extends Optional<Omit<numberInput.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseNumberInputReturn extends numberInput.Api<PropTypes> {
 }

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

@@ -4,15 +4,15 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 import { useFieldContext } from '../field/use-field-context.js';
 
-const useNumberInput = (props = {}) => {
+const useNumberInput = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir, locale } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       input: field?.ids.control
@@ -24,18 +24,10 @@ const useNumberInput = (props = {}) => {
     dir,
     locale,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onValueInvalid: useEvent(props.onValueInvalid),
-    onFocusChange: useEvent(props.onFocusChange)
-  };
-  const [state, send] = useMachine(numberInput.machine(initialContext), { context });
-  return numberInput.connect(state, send, normalizeProps);
+  const service = useMachine(numberInput.machine, machineProps);
+  return numberInput.connect(service, normalizeProps);
 };
 
 export { useNumberInput };

package/dist/components/pagination/index.d.cts

@@ -1,10 +1,10 @@
 export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisBaseProps, type PaginationEllipsisProps, } from './pagination-ellipsis';
-export { PaginationItem, type PaginationItemBaseProps, type PaginationItemProps, } from './pagination-item';
+export { PaginationItem, type PaginationItemBaseProps, type PaginationItemProps } from './pagination-item';
 export { PaginationNextTrigger, type PaginationNextTriggerBaseProps, type PaginationNextTriggerProps, } from './pagination-next-trigger';
 export { PaginationPrevTrigger, type PaginationPrevTriggerBaseProps, type PaginationPrevTriggerProps, } from './pagination-prev-trigger';
-export { PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps, } from './pagination-root';
+export { PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps } from './pagination-root';
 export { PaginationRootProvider, type PaginationRootProviderBaseProps, type PaginationRootProviderProps, } from './pagination-root-provider';
 export { paginationAnatomy } from './pagination.anatomy';
 export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination';

package/dist/components/pagination/index.d.ts

@@ -1,10 +1,10 @@
 export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisBaseProps, type PaginationEllipsisProps, } from './pagination-ellipsis';
-export { PaginationItem, type PaginationItemBaseProps, type PaginationItemProps, } from './pagination-item';
+export { PaginationItem, type PaginationItemBaseProps, type PaginationItemProps } from './pagination-item';
 export { PaginationNextTrigger, type PaginationNextTriggerBaseProps, type PaginationNextTriggerProps, } from './pagination-next-trigger';
 export { PaginationPrevTrigger, type PaginationPrevTriggerBaseProps, type PaginationPrevTriggerProps, } from './pagination-prev-trigger';
-export { PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps, } from './pagination-root';
+export { PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps } from './pagination-root';
 export { PaginationRootProvider, type PaginationRootProviderBaseProps, type PaginationRootProviderProps, } from './pagination-root-provider';
 export { paginationAnatomy } from './pagination.anatomy';
 export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination';

package/dist/components/pagination/pagination-ellipsis.cjs

@@ -10,14 +10,12 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
-const PaginationEllipsis = react.forwardRef(
-  (props, ref) => {
-    const [ellipsisProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
-    const pagination = usePaginationContext.usePaginationContext();
-    const mergedProps = react$1.mergeProps(pagination.getEllipsisProps(ellipsisProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const PaginationEllipsis = react.forwardRef((props, ref) => {
+  const [ellipsisProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const pagination = usePaginationContext.usePaginationContext();
+  const mergedProps = react$1.mergeProps(pagination.getEllipsisProps(ellipsisProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 exports.PaginationEllipsis = PaginationEllipsis;

package/dist/components/pagination/pagination-ellipsis.js

@@ -6,14 +6,12 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { usePaginationContext } from './use-pagination-context.js';
 
-const PaginationEllipsis = forwardRef(
-  (props, ref) => {
-    const [ellipsisProps, localProps] = createSplitProps()(props, ["index"]);
-    const pagination = usePaginationContext();
-    const mergedProps = mergeProps(pagination.getEllipsisProps(ellipsisProps), localProps);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const PaginationEllipsis = forwardRef((props, ref) => {
+  const [ellipsisProps, localProps] = createSplitProps()(props, ["index"]);
+  const pagination = usePaginationContext();
+  const mergedProps = mergeProps(pagination.getEllipsisProps(ellipsisProps), localProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export { PaginationEllipsis };

package/dist/components/pagination/pagination-next-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
-const PaginationNextTrigger = react.forwardRef(
-  (props, ref) => {
-    const pagination = usePaginationContext.usePaginationContext();
-    const mergedProps = react$1.mergeProps(pagination.getNextTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const PaginationNextTrigger = react.forwardRef((props, ref) => {
+  const pagination = usePaginationContext.usePaginationContext();
+  const mergedProps = react$1.mergeProps(pagination.getNextTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 PaginationNextTrigger.displayName = "PaginationNextTrigger";
 
 exports.PaginationNextTrigger = PaginationNextTrigger;

package/dist/components/pagination/pagination-next-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { usePaginationContext } from './use-pagination-context.js';
 
-const PaginationNextTrigger = forwardRef(
-  (props, ref) => {
-    const pagination = usePaginationContext();
-    const mergedProps = mergeProps(pagination.getNextTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const PaginationNextTrigger = forwardRef((props, ref) => {
+  const pagination = usePaginationContext();
+  const mergedProps = mergeProps(pagination.getNextTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 PaginationNextTrigger.displayName = "PaginationNextTrigger";
 
 export { PaginationNextTrigger };

package/dist/components/pagination/pagination-prev-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
-const PaginationPrevTrigger = react.forwardRef(
-  (props, ref) => {
-    const pagination = usePaginationContext.usePaginationContext();
-    const mergedProps = react$1.mergeProps(pagination.getPrevTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const PaginationPrevTrigger = react.forwardRef((props, ref) => {
+  const pagination = usePaginationContext.usePaginationContext();
+  const mergedProps = react$1.mergeProps(pagination.getPrevTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
 
 exports.PaginationPrevTrigger = PaginationPrevTrigger;

package/dist/components/pagination/pagination-prev-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { usePaginationContext } from './use-pagination-context.js';
 
-const PaginationPrevTrigger = forwardRef(
-  (props, ref) => {
-    const pagination = usePaginationContext();
-    const mergedProps = mergeProps(pagination.getPrevTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const PaginationPrevTrigger = forwardRef((props, ref) => {
+  const pagination = usePaginationContext();
+  const mergedProps = mergeProps(pagination.getPrevTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
 
 export { PaginationPrevTrigger };

package/dist/components/pagination/pagination-root-provider.cjs

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
-const PaginationRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: pagination }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(pagination.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(usePaginationContext.PaginationProvider, { value: pagination, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref }) });
-  }
-);
+const PaginationRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: pagination }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(pagination.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(usePaginationContext.PaginationProvider, { value: pagination, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref }) });
+});
 PaginationRootProvider.displayName = "PaginationRootProvider";
 
 exports.PaginationRootProvider = PaginationRootProvider;

package/dist/components/pagination/pagination-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { PaginationProvider } from './use-pagination-context.js';
 
-const PaginationRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: pagination }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(pagination.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(PaginationProvider, { value: pagination, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref }) });
-  }
-);
+const PaginationRootProvider = forwardRef((props, ref) => {
+  const [{ value: pagination }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(pagination.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(PaginationProvider, { value: pagination, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref }) });
+});
 PaginationRootProvider.displayName = "PaginationRootProvider";
 
 export { PaginationRootProvider };

package/dist/components/pagination/pagination-root.cjs

@@ -15,6 +15,7 @@ const PaginationRoot = react.forwardRef((props, ref) => {
   const [paginationProps, localProps] = createSplitProps.createSplitProps()(props, [
     "count",
     "defaultPage",
+    "defaultPageSize",
     "id",
     "ids",
     "onPageChange",

package/dist/components/pagination/pagination-root.js

@@ -11,6 +11,7 @@ const PaginationRoot = forwardRef((props, ref) => {
   const [paginationProps, localProps] = createSplitProps()(props, [
     "count",
     "defaultPage",
+    "defaultPageSize",
     "id",
     "ids",
     "onPageChange",

package/dist/components/pagination/pagination.d.cts

@@ -1,5 +1,5 @@
 export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails } from '@zag-js/pagination';
-export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
+export { PaginationContext as Context, type PaginationContextProps as ContextProps } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisBaseProps as EllipsisBaseProps, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemBaseProps as ItemBaseProps, type PaginationItemProps as ItemProps, } from './pagination-item';
 export { PaginationNextTrigger as NextTrigger, type PaginationNextTriggerBaseProps as NextTriggerBaseProps, type PaginationNextTriggerProps as NextTriggerProps, } from './pagination-next-trigger';

package/dist/components/pagination/pagination.d.ts

@@ -1,5 +1,5 @@
 export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails } from '@zag-js/pagination';
-export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
+export { PaginationContext as Context, type PaginationContextProps as ContextProps } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisBaseProps as EllipsisBaseProps, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemBaseProps as ItemBaseProps, type PaginationItemProps as ItemProps, } from './pagination-item';
 export { PaginationNextTrigger as NextTrigger, type PaginationNextTriggerBaseProps as NextTriggerBaseProps, type PaginationNextTriggerProps as NextTriggerProps, } from './pagination-next-trigger';

package/dist/components/pagination/use-pagination.cjs

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,22 +29,17 @@ function _interopNamespaceDefault(e) {
 const pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
 
 const usePagination = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    page: props.defaultPage,
     ...props
   };
-  const context = {
-    ...initialContext,
-    page: props.page,
-    onPageChange: useEvent.useEvent(props.onPageChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(pagination__namespace.machine(initialContext), { context });
-  return pagination__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(pagination__namespace.machine, machineProps);
+  return pagination__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.usePagination = usePagination;

package/dist/components/pagination/use-pagination.d.cts

@@ -1,13 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as pagination from '@zag-js/pagination';
-export interface UsePaginationProps extends Optional<Omit<pagination.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial page of the pagination when it is first rendered.
-     * Use when you do not need to control the state of the pagination.
-     */
-    defaultPage?: pagination.Context['page'];
+export interface UsePaginationProps extends Optional<Omit<pagination.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePaginationReturn extends pagination.Api<PropTypes> {
 }
-export declare const usePagination: (props: UsePaginationProps) => UsePaginationReturn;
+export declare const usePagination: (props?: UsePaginationProps) => UsePaginationReturn;

package/dist/components/pagination/use-pagination.d.ts

@@ -1,13 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as pagination from '@zag-js/pagination';
-export interface UsePaginationProps extends Optional<Omit<pagination.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial page of the pagination when it is first rendered.
-     * Use when you do not need to control the state of the pagination.
-     */
-    defaultPage?: pagination.Context['page'];
+export interface UsePaginationProps extends Optional<Omit<pagination.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UsePaginationReturn extends pagination.Api<PropTypes> {
 }
-export declare const usePagination: (props: UsePaginationProps) => UsePaginationReturn;
+export declare const usePagination: (props?: UsePaginationProps) => UsePaginationReturn;

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

@@ -4,25 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const usePagination = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    page: props.defaultPage,
     ...props
   };
-  const context = {
-    ...initialContext,
-    page: props.page,
-    onPageChange: useEvent(props.onPageChange, { sync: true })
-  };
-  const [state, send] = useMachine(pagination.machine(initialContext), { context });
-  return pagination.connect(state, send, normalizeProps);
+  const service = useMachine(pagination.machine, machineProps);
+  return pagination.connect(service, normalizeProps);
 };
 
 export { usePagination };

package/dist/components/pin-input/index.d.cts

@@ -1,9 +1,9 @@
 export type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails, } from '@zag-js/pin-input';
 export { PinInputContext, type PinInputContextProps } from './pin-input-context';
-export { PinInputControl, type PinInputControlBaseProps, type PinInputControlProps, } from './pin-input-control';
+export { PinInputControl, type PinInputControlBaseProps, type PinInputControlProps } from './pin-input-control';
 export { PinInputHiddenInput, type PinInputHiddenInputBaseProps, type PinInputHiddenInputProps, } from './pin-input-hidden-input';
-export { PinInputInput, type PinInputInputBaseProps, type PinInputInputProps, } from './pin-input-input';
-export { PinInputLabel, type PinInputLabelBaseProps, type PinInputLabelProps, } from './pin-input-label';
+export { PinInputInput, type PinInputInputBaseProps, type PinInputInputProps } from './pin-input-input';
+export { PinInputLabel, type PinInputLabelBaseProps, type PinInputLabelProps } from './pin-input-label';
 export { PinInputRoot, type PinInputRootBaseProps, type PinInputRootProps } from './pin-input-root';
 export { PinInputRootProvider, type PinInputRootProviderBaseProps, type PinInputRootProviderProps, } from './pin-input-root-provider';
 export { pinInputAnatomy } from './pin-input.anatomy';