@ark-ui/react 4.9.2 → 5.0.1

package/dist/components/date-picker/use-date-picker.d.cts

@@ -1,19 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as datePicker from '@zag-js/date-picker';
-export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the date picker when it is first rendered.
-     */
-    defaultOpen?: datePicker.Context['open'];
-    /**
-     * The initial value of the date picker when it is first rendered.
-     */
-    defaultValue?: datePicker.Context['value'];
-    /**
-     * The initial view of the date picker when it is first rendered.
-     */
-    defaultView?: datePicker.Context['view'];
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseDatePickerReturn extends datePicker.Api<PropTypes> {
 }

package/dist/components/date-picker/use-date-picker.d.ts

@@ -1,19 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as datePicker from '@zag-js/date-picker';
-export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the date picker when it is first rendered.
-     */
-    defaultOpen?: datePicker.Context['open'];
-    /**
-     * The initial value of the date picker when it is first rendered.
-     */
-    defaultValue?: datePicker.Context['value'];
-    /**
-     * The initial view of the date picker when it is first rendered.
-     */
-    defaultView?: datePicker.Context['view'];
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseDatePickerReturn extends datePicker.Api<PropTypes> {
 }

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

@@ -4,34 +4,20 @@ 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 useDatePicker = (props = {}) => {
+const useDatePicker = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
-  const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const { dir, locale } = useLocaleContext();
+  const machineProps = {
+    id,
     dir,
+    locale,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
-    view: props.defaultView,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    view: props.view,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onFocusChange: useEvent(props.onFocusChange),
-    onViewChange: useEvent(props.onViewChange),
-    onOpenChange: useEvent(props.onOpenChange)
-  };
-  const [state, send] = useMachine(datePicker.machine(initialContext), {
-    context
-  });
-  return datePicker.connect(state, send, normalizeProps);
+  const service = useMachine(datePicker.machine, machineProps);
+  return datePicker.connect(service, normalizeProps);
 };
 
 export { useDatePicker };

package/dist/components/dialog/dialog-close-trigger.cjs

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

package/dist/components/dialog/dialog-close-trigger.js

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

package/dist/components/dialog/dialog-description.cjs

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

package/dist/components/dialog/dialog-description.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useDialogContext } from './use-dialog-context.js';
 
-const DialogDescription = forwardRef(
-  (props, ref) => {
-    const dialog = useDialogContext();
-    const mergedProps = mergeProps(dialog.getDescriptionProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const DialogDescription = forwardRef((props, ref) => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps(dialog.getDescriptionProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 DialogDescription.displayName = "DialogDescription";
 
 export { DialogDescription };

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

@@ -1,14 +1,14 @@
 export type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
-export { DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps, } from './dialog-backdrop';
+export { DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps } from './dialog-backdrop';
 export { DialogCloseTrigger, type DialogCloseTriggerBaseProps, type DialogCloseTriggerProps, } from './dialog-close-trigger';
-export { DialogContent, type DialogContentBaseProps, type DialogContentProps, } from './dialog-content';
+export { DialogContent, type DialogContentBaseProps, type DialogContentProps } from './dialog-content';
 export { DialogContext, type DialogContextProps } from './dialog-context';
-export { DialogDescription, type DialogDescriptionBaseProps, type DialogDescriptionProps, } from './dialog-description';
-export { DialogPositioner, type DialogPositionerBaseProps, type DialogPositionerProps, } from './dialog-positioner';
+export { DialogDescription, type DialogDescriptionBaseProps, type DialogDescriptionProps } from './dialog-description';
+export { DialogPositioner, type DialogPositionerBaseProps, type DialogPositionerProps } from './dialog-positioner';
 export { DialogRoot, type DialogRootBaseProps, type DialogRootProps } from './dialog-root';
 export { DialogRootProvider, type DialogRootProviderBaseProps, type DialogRootProviderProps, } from './dialog-root-provider';
 export { DialogTitle, type DialogTitleBaseProps, type DialogTitleProps } from './dialog-title';
-export { DialogTrigger, type DialogTriggerBaseProps, type DialogTriggerProps, } from './dialog-trigger';
+export { DialogTrigger, type DialogTriggerBaseProps, type DialogTriggerProps } from './dialog-trigger';
 export { dialogAnatomy } from './dialog.anatomy';
 export { useDialog, type UseDialogProps, type UseDialogReturn } from './use-dialog';
 export { useDialogContext, type UseDialogContext } from './use-dialog-context';

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

@@ -1,14 +1,14 @@
 export type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
-export { DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps, } from './dialog-backdrop';
+export { DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps } from './dialog-backdrop';
 export { DialogCloseTrigger, type DialogCloseTriggerBaseProps, type DialogCloseTriggerProps, } from './dialog-close-trigger';
-export { DialogContent, type DialogContentBaseProps, type DialogContentProps, } from './dialog-content';
+export { DialogContent, type DialogContentBaseProps, type DialogContentProps } from './dialog-content';
 export { DialogContext, type DialogContextProps } from './dialog-context';
-export { DialogDescription, type DialogDescriptionBaseProps, type DialogDescriptionProps, } from './dialog-description';
-export { DialogPositioner, type DialogPositionerBaseProps, type DialogPositionerProps, } from './dialog-positioner';
+export { DialogDescription, type DialogDescriptionBaseProps, type DialogDescriptionProps } from './dialog-description';
+export { DialogPositioner, type DialogPositionerBaseProps, type DialogPositionerProps } from './dialog-positioner';
 export { DialogRoot, type DialogRootBaseProps, type DialogRootProps } from './dialog-root';
 export { DialogRootProvider, type DialogRootProviderBaseProps, type DialogRootProviderProps, } from './dialog-root-provider';
 export { DialogTitle, type DialogTitleBaseProps, type DialogTitleProps } from './dialog-title';
-export { DialogTrigger, type DialogTriggerBaseProps, type DialogTriggerProps, } from './dialog-trigger';
+export { DialogTrigger, type DialogTriggerBaseProps, type DialogTriggerProps } from './dialog-trigger';
 export { dialogAnatomy } from './dialog.anatomy';
 export { useDialog, type UseDialogProps, type UseDialogReturn } from './use-dialog';
 export { useDialogContext, type UseDialogContext } from './use-dialog-context';

package/dist/components/dialog/use-dialog.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,26 +28,18 @@ function _interopNamespaceDefault(e) {
 
 const dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
 
-const useDialog = (props = {}) => {
+const useDialog = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     getRootNode,
     dir,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true }),
-    onEscapeKeyDown: useEvent.useEvent(props.onEscapeKeyDown),
-    onInteractOutside: useEvent.useEvent(props.onInteractOutside)
-  };
-  const [state, send] = react$1.useMachine(dialog__namespace.machine(initialContext), { context });
-  return dialog__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(dialog__namespace.machine, machineProps);
+  return dialog__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useDialog = useDialog;

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

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

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

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

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

@@ -4,28 +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 useDialog = (props = {}) => {
+const useDialog = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     getRootNode,
     dir,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent(props.onOpenChange, { sync: true }),
-    onEscapeKeyDown: useEvent(props.onEscapeKeyDown),
-    onInteractOutside: useEvent(props.onInteractOutside)
-  };
-  const [state, send] = useMachine(dialog.machine(initialContext), { context });
-  return dialog.connect(state, send, normalizeProps);
+  const service = useMachine(dialog.machine, machineProps);
+  return dialog.connect(service, normalizeProps);
 };
 
 export { useDialog };

package/dist/components/editable/editable-cancel-trigger.cjs

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

package/dist/components/editable/editable-cancel-trigger.js

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

package/dist/components/editable/editable-edit-trigger.cjs

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

package/dist/components/editable/editable-edit-trigger.js

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

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

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

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

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

package/dist/components/editable/editable-submit-trigger.cjs

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

package/dist/components/editable/editable-submit-trigger.js

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

package/dist/components/editable/editable.d.cts

@@ -1,7 +1,7 @@
 export type { ValueChangeDetails } from '@zag-js/editable';
 export { EditableArea as Area, type EditableAreaBaseProps as AreaBaseProps, type EditableAreaProps as AreaProps, } from './editable-area';
 export { EditableCancelTrigger as CancelTrigger, type EditableCancelTriggerBaseProps as CancelTriggerBaseProps, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger';
-export { EditableContext as Context, type EditableContextProps as ContextProps, } from './editable-context';
+export { EditableContext as Context, type EditableContextProps as ContextProps } from './editable-context';
 export { EditableControl as Control, type EditableControlBaseProps as ControlBaseProps, type EditableControlProps as ControlProps, } from './editable-control';
 export { EditableEditTrigger as EditTrigger, type EditableEditTriggerBaseProps as EditTriggerBaseProps, type EditableEditTriggerProps as EditTriggerProps, } from './editable-edit-trigger';
 export { EditableInput as Input, type EditableInputBaseProps as InputBaseProps, type EditableInputProps as InputProps, } from './editable-input';

package/dist/components/editable/editable.d.ts

@@ -1,7 +1,7 @@
 export type { ValueChangeDetails } from '@zag-js/editable';
 export { EditableArea as Area, type EditableAreaBaseProps as AreaBaseProps, type EditableAreaProps as AreaProps, } from './editable-area';
 export { EditableCancelTrigger as CancelTrigger, type EditableCancelTriggerBaseProps as CancelTriggerBaseProps, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger';
-export { EditableContext as Context, type EditableContextProps as ContextProps, } from './editable-context';
+export { EditableContext as Context, type EditableContextProps as ContextProps } from './editable-context';
 export { EditableControl as Control, type EditableControlBaseProps as ControlBaseProps, type EditableControlProps as ControlProps, } from './editable-control';
 export { EditableEditTrigger as EditTrigger, type EditableEditTriggerBaseProps as EditTriggerBaseProps, type EditableEditTriggerProps as EditTriggerProps, } from './editable-edit-trigger';
 export { EditableInput as Input, type EditableInputBaseProps as InputBaseProps, type EditableInputProps as InputProps, } from './editable-input';

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

@@ -2,11 +2,11 @@ export type { EditChangeDetails as EditableEditChangeDetails, ValueChangeDetails
 export { EditableArea, type EditableAreaBaseProps, type EditableAreaProps } from './editable-area';
 export { EditableCancelTrigger, type EditableCancelTriggerBaseProps, type EditableCancelTriggerProps, } from './editable-cancel-trigger';
 export { EditableContext, type EditableContextProps } from './editable-context';
-export { EditableControl, type EditableControlBaseProps, type EditableControlProps, } from './editable-control';
+export { EditableControl, type EditableControlBaseProps, type EditableControlProps } from './editable-control';
 export { EditableEditTrigger, type EditableEditTriggerBaseProps, type EditableEditTriggerProps, } from './editable-edit-trigger';
-export { EditableInput, type EditableInputBaseProps, type EditableInputProps, } from './editable-input';
-export { EditableLabel, type EditableLabelBaseProps, type EditableLabelProps, } from './editable-label';
-export { EditablePreview, type EditablePreviewBaseProps, type EditablePreviewProps, } from './editable-preview';
+export { EditableInput, type EditableInputBaseProps, type EditableInputProps } from './editable-input';
+export { EditableLabel, type EditableLabelBaseProps, type EditableLabelProps } from './editable-label';
+export { EditablePreview, type EditablePreviewBaseProps, type EditablePreviewProps } from './editable-preview';
 export { EditableRoot, type EditableRootBaseProps, type EditableRootProps } from './editable-root';
 export { EditableRootProvider, type EditableRootProviderBaseProps, type EditableRootProviderProps, } from './editable-root-provider';
 export { EditableSubmitTrigger, type EditableSubmitTriggerBaseProps, type EditableSubmitTriggerProps, } from './editable-submit-trigger';

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

@@ -2,11 +2,11 @@ export type { EditChangeDetails as EditableEditChangeDetails, ValueChangeDetails
 export { EditableArea, type EditableAreaBaseProps, type EditableAreaProps } from './editable-area';
 export { EditableCancelTrigger, type EditableCancelTriggerBaseProps, type EditableCancelTriggerProps, } from './editable-cancel-trigger';
 export { EditableContext, type EditableContextProps } from './editable-context';
-export { EditableControl, type EditableControlBaseProps, type EditableControlProps, } from './editable-control';
+export { EditableControl, type EditableControlBaseProps, type EditableControlProps } from './editable-control';
 export { EditableEditTrigger, type EditableEditTriggerBaseProps, type EditableEditTriggerProps, } from './editable-edit-trigger';
-export { EditableInput, type EditableInputBaseProps, type EditableInputProps, } from './editable-input';
-export { EditableLabel, type EditableLabelBaseProps, type EditableLabelProps, } from './editable-label';
-export { EditablePreview, type EditablePreviewBaseProps, type EditablePreviewProps, } from './editable-preview';
+export { EditableInput, type EditableInputBaseProps, type EditableInputProps } from './editable-input';
+export { EditableLabel, type EditableLabelBaseProps, type EditableLabelProps } from './editable-label';
+export { EditablePreview, type EditablePreviewBaseProps, type EditablePreviewProps } from './editable-preview';
 export { EditableRoot, type EditableRootBaseProps, type EditableRootProps } from './editable-root';
 export { EditableRootProvider, type EditableRootProviderBaseProps, type EditableRootProviderProps, } from './editable-root-provider';
 export { EditableSubmitTrigger, type EditableSubmitTriggerBaseProps, type EditableSubmitTriggerProps, } from './editable-submit-trigger';

package/dist/components/editable/use-editable.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 editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
 
-const useEditable = (props = {}) => {
+const useEditable = (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,
       input: field?.ids.control
@@ -46,21 +46,10 @@ const useEditable = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
-    edit: props.defaultEdit,
-    value: props.defaultValue,
-    "edit.controlled": props.edit !== void 0,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onEditChange: useEvent.useEvent(props.onEditChange),
-    onValueCommit: useEvent.useEvent(props.onValueCommit),
-    onValueRevert: useEvent.useEvent(props.onValueRevert)
-  };
-  const [state, send] = react$1.useMachine(editable__namespace.machine(initialContext), { context });
-  return editable__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(editable__namespace.machine, machineProps);
+  return editable__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useEditable = useEditable;

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

@@ -1,17 +1,7 @@
 import { PropTypes } from '@zag-js/types';
 import { Optional } from '../../types';
 import * as editable from '@zag-js/editable';
-export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode' | 'edit.controlled'>, 'id'> {
-    /**
-     * The initial edit state of the editable when it is first rendered.
-     * Use when you do not need to control its edit state.
-     */
-    defaultEdit?: editable.Context['edit'];
-    /**
-     * The initial value of the editable when it is first rendered.
-     * Use when you do not need to control the state of the editable.
-     */
-    defaultValue?: editable.Context['value'];
+export interface UseEditableProps extends Optional<Omit<editable.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseEditableReturn extends editable.Api<PropTypes> {
 }