ui-ingredients 0.31.2 → 1.0.0

package/dist/combobox/combobox-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateComboboxProps,
     CreateComboboxReturn,
@@ -9,7 +9,7 @@
   export interface ComboboxProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>,
-        CreateComboboxProps
+        Optional<CreateComboboxProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -24,30 +24,36 @@
   import {createCombobox} from './create-combobox.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: ComboboxProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, comboboxProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
   let [createComboboxProps, localProps] = $derived(
-    createSplitProps<CreateComboboxProps>([
+    createSplitProps<Omit<CreateComboboxProps, 'id'>>([
       'allowCustomValue',
       'autoFocus',
       'closeOnSelect',
       'collection',
       'composite',
+      'defaultHighlightedValue',
+      'defaultInputValue',
+      'defaultOpen',
+      'defaultValue',
       'disableLayer',
       'disabled',
       'form',
       'highlightedValue',
-      'id',
       'ids',
       'inputBehavior',
       'inputValue',
@@ -64,7 +70,6 @@
       'onPointerDownOutside',
       'onValueChange',
       'open',
-      'openControlled',
       'openOnChange',
       'openOnClick',
       'openOnKeyPress',
@@ -76,10 +81,13 @@
       'selectionBehavior',
       'translations',
       'value',
-    ])(rest),
+    ])(comboboxProps),
+  );
+
+  let combobox = createCombobox(
+    reflect(() => ({...createComboboxProps, id: id ?? uid})),
   );
 
-  let combobox = createCombobox(reflect(() => createComboboxProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/combobox/combobox-root.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateComboboxProps, CreateComboboxReturn } from './create-combobox.svelte.js';
-export interface ComboboxProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>, CreateComboboxProps>, PresenceStrategyProps {
+export interface ComboboxProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>, Optional<CreateComboboxProps, 'id'>>, PresenceStrategyProps {
 }
 declare const ComboboxRoot: import("svelte").Component<ComboboxProps, {}, "ref">;
 type ComboboxRoot = ReturnType<typeof ComboboxRoot>;

package/dist/combobox/create-combobox.svelte.d.ts

@@ -1,10 +1,6 @@
 import * as combobox from '@zag-js/combobox';
-type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
-export interface CreateComboboxProps extends Omit<combobox.Context, Omitted> {
-    id?: string;
-    openControlled?: boolean;
+export interface CreateComboboxProps extends Omit<combobox.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateComboboxReturn extends combobox.Api {
 }
 export declare function createCombobox(props: CreateComboboxProps): CreateComboboxReturn;
-export {};

package/dist/combobox/create-combobox.svelte.js

@@ -1,16 +1,13 @@
 import * as combobox from '@zag-js/combobox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCombobox(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(combobox.machine, () => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -20,22 +17,17 @@ export function createCombobox(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
+        ...props,
     }));
-    const [state, send, service] = useMachine(combobox.machine(context));
-    $effect(() => {
-        service.setContext(context);
-    });
     return reflect(() => {
-        const o = combobox.connect(state, send, normalizeProps);
+        const api = combobox.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getInputProps(),
+                    ...api.getInputProps(),
                 };
             },
         };

package/dist/date-picker/create-date-picker.svelte.d.ts

@@ -1,12 +1,6 @@
 import * as datePicker from '@zag-js/date-picker';
-import type { HTMLAttributes } from 'svelte/elements';
-type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
-export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
-    id?: string;
-    openControlled?: boolean;
+export interface CreateDatePickerProps extends Omit<datePicker.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateDatePickerReturn extends datePicker.Api {
-    getViewProps(props: datePicker.ViewProps): HTMLAttributes<HTMLElement>;
 }
 export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
-export {};

package/dist/date-picker/create-date-picker.svelte.js

@@ -1,35 +1,15 @@
 import * as datePicker from '@zag-js/date-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
-import { parts } from './date-picker-anatomy.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createDatePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = $derived.by(() => ({
-        id,
+    const service = useMachine(datePicker.machine, () => ({
         dir: locale?.dir,
         locale: locale?.locale,
-        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
+        ...props,
     }));
-    const [state, send, service] = useMachine(datePicker.machine(context));
-    $effect(() => {
-        service.setContext(context);
-    });
-    return reflect(() => {
-        const o = datePicker.connect(state, send, normalizeProps);
-        return {
-            ...o,
-            getViewProps(props) {
-                return {
-                    ...parts.view.attrs,
-                    hidden: o.view !== props.view,
-                };
-            },
-        };
-    });
+    return reflect(() => datePicker.connect(service, normalizeProps));
 }

package/dist/date-picker/date-picker-anatomy.d.ts

@@ -1,2 +1 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"content" | "trigger" | "positioner" | "root" | "label" | "control" | "view" | "table" | "input" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
-export declare const parts: Record<"content" | "trigger" | "positioner" | "root" | "label" | "control" | "view" | "table" | "input" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export { anatomy } from '@zag-js/date-picker';

package/dist/date-picker/date-picker-anatomy.js

@@ -1,3 +1 @@
-import { anatomy as _ } from '@zag-js/date-picker';
-export const anatomy = _.extendWith('view');
-export const parts = anatomy.build();
+export { anatomy } from '@zag-js/date-picker';

package/dist/date-picker/date-picker-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateDatePickerProps,
     CreateDatePickerReturn,
@@ -9,7 +9,7 @@
   export interface DatePickerProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateDatePickerReturn>,
-        CreateDatePickerProps
+        Optional<CreateDatePickerProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -24,29 +24,37 @@
   import {setDatePickerContext} from './date-picker-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: DatePickerProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, datePickerProps] = $derived(
     createSplitProps<PresenceStrategyProps>([])(props),
   );
 
   let [createDatePickerProps, localProps] = $derived(
-    createSplitProps<CreateDatePickerProps>([
+    createSplitProps<Omit<CreateDatePickerProps, 'id'>>([
       'closeOnSelect',
+      'defaultFocusedValue',
+      'defaultOpen',
+      'defaultValue',
+      'defaultView',
       'disabled',
       'fixedWeeks',
       'focusedValue',
       'format',
-      'id',
       'ids',
       'isDateUnavailable',
       'locale',
       'max',
+      'maxView',
       'min',
+      'minView',
       'name',
       'numOfMonths',
       'onFocusChange',
@@ -54,7 +62,8 @@
       'onValueChange',
       'onViewChange',
       'open',
-      'openControlled',
+      'parse',
+      'placeholder',
       'positioning',
       'readOnly',
       'selectionMode',
@@ -63,13 +72,13 @@
       'translations',
       'value',
       'view',
-      'minView',
-      'maxView',
-      'placeholder',
-    ])(rest),
+    ])(datePickerProps),
+  );
+
+  let datePicker = createDatePicker(
+    reflect(() => ({...createDatePickerProps, id: id ?? uid})),
   );
 
-  let datePicker = createDatePicker(reflect(() => createDatePickerProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/date-picker/date-picker-root.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateDatePickerProps, CreateDatePickerReturn } from './create-date-picker.svelte.js';
-export interface DatePickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateDatePickerReturn>, CreateDatePickerProps>, PresenceStrategyProps {
+export interface DatePickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateDatePickerReturn>, Optional<CreateDatePickerProps, 'id'>>, PresenceStrategyProps {
 }
 declare const DatePickerRoot: import("svelte").Component<DatePickerProps, {}, "ref">;
 type DatePickerRoot = ReturnType<typeof DatePickerRoot>;

package/dist/dialog/create-dialog.svelte.d.ts

@@ -1,7 +1,5 @@
 import * as dialog from '@zag-js/dialog';
-export interface CreateDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'role' | 'getRootNode' | 'open.controlled'> {
-    id?: string;
-    openControlled?: boolean;
+export interface CreateDialogProps extends Omit<dialog.Props, 'dir' | 'role' | 'getRootNode'> {
 }
 export interface CreateDialogReturn extends dialog.Api {
 }

package/dist/dialog/create-dialog.svelte.js

@@ -1,20 +1,15 @@
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createDialog(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(dialog.machine, () => ({
         dir: locale?.dir,
         role: 'dialog',
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(dialog.machine(context), { context });
-    return reflect(() => dialog.connect(state, send, normalizeProps));
+    return reflect(() => dialog.connect(service, normalizeProps));
 }

package/dist/dialog/dialog-root.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Optional} from '../types.js';
   import type {
     CreateDialogProps,
     CreateDialogReturn,
   } from './create-dialog.svelte.js';
 
   export interface DialogProps
-    extends CreateDialogProps,
+    extends Optional<CreateDialogProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateDialogReturn]>;
   }
@@ -24,7 +25,9 @@
   import {createDialog} from './create-dialog.svelte.js';
   import {setDialogContext} from './dialog-context.svelte.js';
 
-  let {children, ...props}: DialogProps = $props();
+  let {id, children, ...props}: DialogProps = $props();
+
+  let uid = $props.id();
 
   let [presenceStrategyProps, createDialogProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -32,7 +35,10 @@
     ),
   );
 
-  let dialog = createDialog(reflect(() => createDialogProps));
+  let dialog = createDialog(
+    reflect(() => ({...createDialogProps, id: id ?? uid})),
+  );
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/dialog/dialog-root.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Optional } from '../types.js';
 import type { CreateDialogProps, CreateDialogReturn } from './create-dialog.svelte.js';
-export interface DialogProps extends CreateDialogProps, PresenceStrategyProps {
+export interface DialogProps extends Optional<CreateDialogProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateDialogReturn]>;
 }
 declare const DialogRoot: import("svelte").Component<DialogProps, {}, "">;

package/dist/drawer/create-drawer.svelte.d.ts

@@ -1,8 +1,12 @@
 import * as dialog from '@zag-js/dialog';
 import type { HTMLAttributes } from 'svelte/elements';
-export interface CreateDrawerProps extends Omit<dialog.Context, 'id' | 'dir' | 'role' | 'getRootNode' | 'open.controlled'> {
-    id?: string;
-    openControlled?: boolean;
+interface ElementIds extends dialog.ElementIds {
+    body?: string;
+    footer?: string;
+    header?: string;
+}
+export interface CreateDrawerProps extends Omit<dialog.Props, 'dir' | 'role' | 'getRootNode' | 'elementIds'> {
+    elementIds?: ElementIds;
 }
 export interface CreateDrawerReturn extends dialog.Api {
     getBodyProps(): HTMLAttributes<HTMLElement>;
@@ -10,3 +14,4 @@ export interface CreateDrawerReturn extends dialog.Api {
     getHeaderProps(): HTMLAttributes<HTMLElement>;
 }
 export declare function createDrawer(props: CreateDrawerProps): CreateDrawerReturn;
+export {};

package/dist/drawer/create-drawer.svelte.js

@@ -1,64 +1,82 @@
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
-import { mergeProps } from '../merge-props.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { parts } from './drawer-anatomy.js';
 export function createDrawer(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(dialog.machine, () => ({
         dir: locale?.dir,
         role: 'dialog',
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(dialog.machine(context), { context });
     return reflect(() => {
-        const o = dialog.connect(state, send, normalizeProps);
+        const api = dialog.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getBackdropProps() {
-                return mergeProps(o.getBackdropProps(), parts.backdrop.attrs);
+                return {
+                    ...api.getBackdropProps(),
+                    ...parts.backdrop.attrs,
+                };
             },
             getCloseTriggerProps() {
-                return mergeProps(o.getCloseTriggerProps(), parts.closeTrigger.attrs);
+                return {
+                    ...api.getCloseTriggerProps(),
+                    ...parts.closeTrigger.attrs,
+                };
             },
             getContentProps() {
-                return mergeProps(o.getContentProps(), parts.content.attrs);
+                return {
+                    ...api.getContentProps(),
+                    ...parts.content.attrs,
+                };
             },
             getDescriptionProps() {
-                return mergeProps(o.getDescriptionProps(), parts.description.attrs);
+                return {
+                    ...api.getDescriptionProps(),
+                    ...parts.description.attrs,
+                };
             },
             getPositionerProps() {
-                return mergeProps(o.getPositionerProps(), parts.positioner.attrs);
+                return {
+                    ...api.getPositionerProps(),
+                    ...parts.positioner.attrs,
+                };
             },
             getTitleProps() {
-                return mergeProps(o.getTitleProps(), parts.title.attrs);
+                return {
+                    ...api.getTitleProps(),
+                    ...parts.title.attrs,
+                };
             },
             getTriggerProps() {
-                return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
+                return {
+                    ...api.getTriggerProps(),
+                    ...parts.trigger.attrs,
+                };
             },
             getBodyProps() {
                 return {
+                    id: props.elementIds?.body ?? `drawer:${props.id}:body`,
+                    'data-state': api.open ? 'open' : 'closed',
                     ...parts.body.attrs,
-                    'data-state': o.open ? 'open' : 'closed',
                 };
             },
             getFooterProps() {
                 return {
+                    id: props.elementIds?.footer ?? `drawer:${props.id}:footer`,
+                    'data-state': api.open ? 'open' : 'closed',
                     ...parts.footer.attrs,
-                    'data-state': o.open ? 'open' : 'closed',
                 };
             },
             getHeaderProps() {
                 return {
+                    id: props.elementIds?.header ?? `drawer:${props.id}:header`,
+                    'data-state': api.open ? 'open' : 'closed',
                     ...parts.header.attrs,
-                    'data-state': o.open ? 'open' : 'closed',
                 };
             },
         };

package/dist/drawer/drawer-root.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Optional} from '../types.js';
   import type {
     CreateDrawerProps,
     CreateDrawerReturn,
   } from './create-drawer.svelte.js';
 
   export interface DrawerProps
-    extends CreateDrawerProps,
+    extends Optional<CreateDrawerProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateDrawerReturn]>;
   }
@@ -24,7 +25,9 @@
   import {createDrawer} from './create-drawer.svelte.js';
   import {setDrawerContext} from './drawer-context.svelte.js';
 
-  let {children, ...props}: DrawerProps = $props();
+  let {id, children, ...props}: DrawerProps = $props();
+
+  let uid = $props.id();
 
   let [presenceStrategyProps, createDialogProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -32,7 +35,10 @@
     ),
   );
 
-  let drawer = createDrawer(reflect(() => createDialogProps));
+  let drawer = createDrawer(
+    reflect(() => ({...createDialogProps, id: id ?? uid})),
+  );
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/drawer/drawer-root.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Optional } from '../types.js';
 import type { CreateDrawerProps, CreateDrawerReturn } from './create-drawer.svelte.js';
-export interface DrawerProps extends CreateDrawerProps, PresenceStrategyProps {
+export interface DrawerProps extends Optional<CreateDrawerProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateDrawerReturn]>;
 }
 declare const DrawerRoot: import("svelte").Component<DrawerProps, {}, "">;

package/dist/editable/create-editable.svelte.d.ts

@@ -1,7 +1,5 @@
 import * as editable from '@zag-js/editable';
-export interface CreateEditableProps extends Omit<editable.Context, 'id' | 'dir' | 'getRootNode' | 'edit.controlled'> {
-    id?: string;
-    editControlled?: boolean;
+export interface CreateEditableProps extends Omit<editable.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateEditableReturn extends editable.Api {
 }

package/dist/editable/create-editable.svelte.js

@@ -1,16 +1,13 @@
 import * as editable from '@zag-js/editable';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createEditable(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(editable.machine, () => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -21,18 +18,16 @@ export function createEditable(props) {
         readOnly: field?.readOnly,
         required: field?.required,
         getRootNode: environment?.getRootNode,
-        'edit.controlled': props.editControlled,
         ...props,
     }));
-    const [state, send] = useMachine(editable.machine(context), { context });
     return reflect(() => {
-        const o = editable.connect(state, send, normalizeProps);
+        const api = editable.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getInputProps(),
+                    ...api.getInputProps(),
                 };
             },
         };