@ark-ui/react 4.9.1 → 5.0.0

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' } });
@@ -29,23 +28,18 @@ function _interopNamespaceDefault(e) {
 
 const pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
 
-const usePagination = (props) => {
+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 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';

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

@@ -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';

package/dist/components/pin-input/pin-input-hidden-input.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 
-const PinInputHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const pinInput = usePinInputContext.usePinInputContext();
-    const mergedProps = react$1.mergeProps(pinInput.getHiddenInputProps(), props);
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const PinInputHiddenInput = react.forwardRef((props, ref) => {
+  const pinInput = usePinInputContext.usePinInputContext();
+  const mergedProps = react$1.mergeProps(pinInput.getHiddenInputProps(), props);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 PinInputHiddenInput.displayName = "PinInputHiddenInput";
 
 exports.PinInputHiddenInput = PinInputHiddenInput;

package/dist/components/pin-input/pin-input-hidden-input.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { usePinInputContext } from './use-pin-input-context.js';
 
-const PinInputHiddenInput = forwardRef(
-  (props, ref) => {
-    const pinInput = usePinInputContext();
-    const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const PinInputHiddenInput = forwardRef((props, ref) => {
+  const pinInput = usePinInputContext();
+  const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 PinInputHiddenInput.displayName = "PinInputHiddenInput";
 
 export { PinInputHiddenInput };

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

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

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

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

package/dist/components/pin-input/pin-input-root.cjs

@@ -15,6 +15,7 @@ const PinInputRoot = react.forwardRef((props, ref) => {
   const [usePinInputProps, localProps] = createSplitProps.createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
+    "count",
     "defaultValue",
     "disabled",
     "form",

package/dist/components/pin-input/pin-input-root.js

@@ -11,6 +11,7 @@ const PinInputRoot = forwardRef((props, ref) => {
   const [usePinInputProps, localProps] = createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
+    "count",
     "defaultValue",
     "disabled",
     "form",

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

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails, ValueInvalidDetails } from '@zag-js/pin-input';
-export { PinInputContext as Context, type PinInputContextProps as ContextProps, } from './pin-input-context';
+export { PinInputContext as Context, type PinInputContextProps as ContextProps } from './pin-input-context';
 export { PinInputControl as Control, type PinInputControlBaseProps as ControlBaseProps, type PinInputControlProps as ControlProps, } from './pin-input-control';
 export { PinInputHiddenInput as HiddenInput, type PinInputHiddenInputBaseProps as HiddenInputBaseProps, type PinInputHiddenInputProps as HiddenInputProps, } from './pin-input-hidden-input';
 export { PinInputInput as Input, type PinInputInputBaseProps as InputBaseProps, type PinInputInputProps as InputProps, } from './pin-input-input';

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

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails, ValueInvalidDetails } from '@zag-js/pin-input';
-export { PinInputContext as Context, type PinInputContextProps as ContextProps, } from './pin-input-context';
+export { PinInputContext as Context, type PinInputContextProps as ContextProps } from './pin-input-context';
 export { PinInputControl as Control, type PinInputControlBaseProps as ControlBaseProps, type PinInputControlProps as ControlProps, } from './pin-input-control';
 export { PinInputHiddenInput as HiddenInput, type PinInputHiddenInputBaseProps as HiddenInputBaseProps, type PinInputHiddenInputProps as HiddenInputProps, } from './pin-input-hidden-input';
 export { PinInputInput as Input, type PinInputInputBaseProps as InputBaseProps, type PinInputInputProps as InputProps, } from './pin-input-input';

package/dist/components/pin-input/use-pin-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) {
@@ -31,11 +30,12 @@ function _interopNamespaceDefault(e) {
 const pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 
 const usePinInput = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -46,18 +46,10 @@ const usePinInput = (props = {}) => {
     invalid: field?.invalid,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onValueComplete: useEvent.useEvent(props.onValueComplete),
-    onValueInvalid: useEvent.useEvent(props.onValueInvalid)
-  };
-  const [state, send] = react$1.useMachine(pinInput__namespace.machine(initialContext), { context });
-  return pinInput__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(pinInput__namespace.machine, machineProps);
+  return pinInput__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.usePinInput = usePinInput;

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

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

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

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

package/dist/components/pin-input/use-pin-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 usePinInput = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -23,18 +23,10 @@ const usePinInput = (props = {}) => {
     invalid: field?.invalid,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onValueComplete: useEvent(props.onValueComplete),
-    onValueInvalid: useEvent(props.onValueInvalid)
-  };
-  const [state, send] = useMachine(pinInput.machine(initialContext), { context });
-  return pinInput.connect(state, send, normalizeProps);
+  const service = useMachine(pinInput.machine, machineProps);
+  return pinInput.connect(service, normalizeProps);
 };
 
 export { usePinInput };

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

@@ -1,17 +1,17 @@
 export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
-export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps, } from './popover-anchor';
+export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor';
 export { PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow';
-export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps, } from './popover-arrow-tip';
+export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps } from './popover-arrow-tip';
 export { PopoverCloseTrigger, type PopoverCloseTriggerBaseProps, type PopoverCloseTriggerProps, } from './popover-close-trigger';
-export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps, } from './popover-content';
+export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps } from './popover-content';
 export { PopoverContext, type PopoverContextProps } from './popover-context';
 export { PopoverDescription, type PopoverDescriptionBaseProps, type PopoverDescriptionProps, } from './popover-description';
-export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps, } from './popover-indicator';
-export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps, } from './popover-positioner';
+export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps } from './popover-indicator';
+export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps } from './popover-positioner';
 export { PopoverRoot, type PopoverRootBaseProps, type PopoverRootProps } from './popover-root';
 export { PopoverRootProvider, type PopoverRootProviderBaseProps, type PopoverRootProviderProps, } from './popover-root-provider';
 export { PopoverTitle, type PopoverTitleBaseProps, type PopoverTitleProps } from './popover-title';
-export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps, } from './popover-trigger';
+export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps } from './popover-trigger';
 export { popoverAnatomy } from './popover.anatomy';
 export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
 export { usePopoverContext, type UsePopoverContext } from './use-popover-context';

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

@@ -1,17 +1,17 @@
 export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
-export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps, } from './popover-anchor';
+export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor';
 export { PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow';
-export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps, } from './popover-arrow-tip';
+export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps } from './popover-arrow-tip';
 export { PopoverCloseTrigger, type PopoverCloseTriggerBaseProps, type PopoverCloseTriggerProps, } from './popover-close-trigger';
-export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps, } from './popover-content';
+export { PopoverContent, type PopoverContentBaseProps, type PopoverContentProps } from './popover-content';
 export { PopoverContext, type PopoverContextProps } from './popover-context';
 export { PopoverDescription, type PopoverDescriptionBaseProps, type PopoverDescriptionProps, } from './popover-description';
-export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps, } from './popover-indicator';
-export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps, } from './popover-positioner';
+export { PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps } from './popover-indicator';
+export { PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps } from './popover-positioner';
 export { PopoverRoot, type PopoverRootBaseProps, type PopoverRootProps } from './popover-root';
 export { PopoverRootProvider, type PopoverRootProviderBaseProps, type PopoverRootProviderProps, } from './popover-root-provider';
 export { PopoverTitle, type PopoverTitleBaseProps, type PopoverTitleProps } from './popover-title';
-export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps, } from './popover-trigger';
+export { PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps } from './popover-trigger';
 export { popoverAnatomy } from './popover.anatomy';
 export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
 export { usePopoverContext, type UsePopoverContext } from './use-popover-context';