ui-ingredients 0.31.2 → 1.0.0

package/dist/rating-group/rating-group-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateRatingGroupProps, CreateRatingGroupReturn } from './create-rating-group.svelte.js';
-export interface RatingGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateRatingGroupReturn>, CreateRatingGroupProps> {
+export interface RatingGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateRatingGroupReturn>, Optional<CreateRatingGroupProps, 'id'>> {
 }
 declare const RatingGroupRoot: import("svelte").Component<RatingGroupProps, {}, "ref">;
 type RatingGroupRoot = ReturnType<typeof RatingGroupRoot>;

package/dist/segment-group/create-segment-group.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as segmentGroup from '@zag-js/radio-group';
-export interface CreateSegmentGroupProps extends Omit<segmentGroup.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateSegmentGroupProps extends Omit<segmentGroup.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateSegmentGroupReturn extends segmentGroup.Api {
 }

package/dist/segment-group/create-segment-group.svelte.js

@@ -1,42 +1,55 @@
 import * as segmentGroup from '@zag-js/radio-group';
 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 './segment-group-anatomy.js';
 export function createSegmentGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(segmentGroup.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(segmentGroup.machine(context), { context });
     return reflect(() => {
-        const o = segmentGroup.connect(state, send, normalizeProps);
+        const api = segmentGroup.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getIndicatorProps() {
-                return mergeProps(o.getIndicatorProps(), parts.indicator.attrs);
+                return {
+                    ...api.getIndicatorProps(),
+                    ...parts.indicator.attrs,
+                };
             },
             getItemControlProps(props) {
-                return mergeProps(o.getItemControlProps(props), parts.itemControl.attrs);
+                return {
+                    ...api.getItemControlProps(props),
+                    ...parts.itemControl.attrs,
+                };
             },
             getItemProps(props) {
-                return mergeProps(o.getItemProps(props), parts.item.attrs);
+                return {
+                    ...api.getItemProps(props),
+                    ...parts.item.attrs,
+                };
             },
             getItemTextProps(props) {
-                return mergeProps(o.getItemTextProps(props), parts.itemText.attrs);
+                return {
+                    ...api.getItemTextProps(props),
+                    ...parts.itemText.attrs,
+                };
             },
             getLabelProps() {
-                return mergeProps(o.getLabelProps(), parts.label.attrs);
+                return {
+                    ...api.getLabelProps(),
+                    ...parts.label.attrs,
+                };
             },
             getRootProps() {
-                return mergeProps(o.getRootProps(), parts.root.attrs);
+                return {
+                    ...api.getRootProps(),
+                    ...parts.root.attrs,
+                };
             },
         };
     });

package/dist/segment-group/segment-group-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateSegmentGroupProps,
     CreateSegmentGroupReturn,
@@ -8,7 +8,7 @@
   export interface SegmentGroupProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateSegmentGroupReturn>,
-      CreateSegmentGroupProps
+      Optional<CreateSegmentGroupProps, 'id'>
     > {}
 </script>
 
@@ -20,17 +20,20 @@
   import {setSegmentGroupContext} from './segment-group-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: SegmentGroupProps = $props();
 
+  let uid = $props.id();
+
   let [createSegmentGroupProps, localProps] = $derived(
-    createSplitProps<CreateSegmentGroupProps>([
+    createSplitProps<Omit<CreateSegmentGroupProps, 'id'>>([
+      'defaultValue',
       'disabled',
       'form',
-      'id',
       'ids',
       'name',
       'onValueChange',
@@ -40,7 +43,10 @@
     ])(props),
   );
 
-  let segmentGroup = createSegmentGroup(reflect(() => createSegmentGroupProps));
+  let segmentGroup = createSegmentGroup(
+    reflect(() => ({...createSegmentGroupProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(
     mergeProps(segmentGroup.getRootProps(), localProps),
   );

package/dist/segment-group/segment-group-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateSegmentGroupProps, CreateSegmentGroupReturn } from './create-segment-group.svelte.js';
-export interface SegmentGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSegmentGroupReturn>, CreateSegmentGroupProps> {
+export interface SegmentGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSegmentGroupReturn>, Optional<CreateSegmentGroupProps, 'id'>> {
 }
 declare const SegmentGroupRoot: import("svelte").Component<SegmentGroupProps, {}, "ref">;
 type SegmentGroupRoot = ReturnType<typeof SegmentGroupRoot>;

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

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

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

@@ -1,16 +1,13 @@
 import * as select from '@zag-js/select';
 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 createSelect(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(select.machine, () => ({
         ids: {
             label: field?.ids.label,
             hiddenSelect: field?.ids.control,
@@ -20,19 +17,17 @@ export function createSelect(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
+        ...props,
     }));
-    const [state, send] = useMachine(select.machine(context), { context });
     return reflect(() => {
-        const o = select.connect(state, send, normalizeProps);
+        const api = select.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getHiddenSelectProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenSelectProps(),
+                    ...api.getHiddenSelectProps(),
                 };
             },
         };

package/dist/select/select-item-group.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
   import {
     getSelectContext,
@@ -21,9 +20,10 @@
     ...props
   }: SelectItemGroupProps = $props();
 
+  let uid = $props.id();
+
   let select = getSelectContext();
 
-  let uid = createUniqueId();
   let itemGroupProps = $derived({id: id ?? uid});
   let mergedProps = $derived(
     mergeProps(select.getItemGroupProps(itemGroupProps), props),

package/dist/select/select-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 {
     CreateSelectProps,
     CreateSelectReturn,
@@ -9,7 +9,7 @@
   export interface SelectProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>,
-        CreateSelectProps
+        Optional<CreateSelectProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -24,22 +24,27 @@
   import {setSelectContext} from './select-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: SelectProps = $props();
 
-  let [createSelectProps, rest] = $derived(
-    createSplitProps<CreateSelectProps>([
+  let uid = $props.id();
+
+  let [createSelectProps, selectProps] = $derived(
+    createSplitProps<Omit<CreateSelectProps, 'id'>>([
       'closeOnSelect',
       'collection',
       'composite',
+      'defaultHighlightedValue',
+      'defaultOpen',
+      'defaultValue',
       'deselectable',
       'disabled',
       'form',
       'highlightedValue',
-      'id',
       'ids',
       'invalid',
       'loopFocus',
@@ -52,7 +57,6 @@
       'onPointerDownOutside',
       'onValueChange',
       'open',
-      'openControlled',
       'positioning',
       'readOnly',
       'required',
@@ -62,10 +66,15 @@
   );
 
   let [presenceStrategyProps, localProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      selectProps,
+    ),
+  );
+
+  let select = createSelect(
+    reflect(() => ({...createSelectProps, id: id ?? uid})),
   );
 
-  let select = createSelect(reflect(() => createSelectProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/select/select-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 { CreateSelectProps, CreateSelectReturn } from './create-select.svelte.js';
-export interface SelectProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>, CreateSelectProps>, PresenceStrategyProps {
+export interface SelectProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>, Optional<CreateSelectProps, 'id'>>, PresenceStrategyProps {
 }
 declare const SelectRoot: import("svelte").Component<SelectProps, {}, "ref">;
 type SelectRoot = ReturnType<typeof SelectRoot>;

package/dist/signature-pad/create-signature-pad.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as signaturePad from '@zag-js/signature-pad';
-export interface CreateSignaturePadProps extends Omit<signaturePad.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateSignaturePadProps extends Omit<signaturePad.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateSignaturePadReturn extends signaturePad.Api {
 }

package/dist/signature-pad/create-signature-pad.svelte.js

@@ -1,18 +1,14 @@
 import * as signaturePad from '@zag-js/signature-pad';
 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 createSignaturePad(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(signaturePad.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(signaturePad.machine(context), { context });
-    return reflect(() => signaturePad.connect(state, send, normalizeProps));
+    return reflect(() => signaturePad.connect(service, normalizeProps));
 }

package/dist/signature-pad/signature-pad-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateSignaturePadProps,
     CreateSignaturePadReturn,
@@ -8,7 +8,7 @@
   export interface SignaturePadProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateSignaturePadReturn>,
-      CreateSignaturePadProps
+      Optional<CreateSignaturePadProps, 'id'>
     > {}
 </script>
 
@@ -20,17 +20,19 @@
   import {setSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: SignaturePadProps = $props();
 
+  let uid = $props.id();
+
   let [createSignaturePadProps, localProps] = $derived(
-    createSplitProps<CreateSignaturePadProps>([
+    createSplitProps<Omit<CreateSignaturePadProps, 'id'>>([
       'disabled',
       'drawing',
-      'id',
       'ids',
       'name',
       'onDraw',
@@ -41,7 +43,9 @@
     ])(props),
   );
 
-  let signaturePad = createSignaturePad(reflect(() => createSignaturePadProps));
+  let signaturePad = createSignaturePad(
+    reflect(() => ({...createSignaturePadProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(
     mergeProps(signaturePad.getRootProps(), localProps),

package/dist/signature-pad/signature-pad-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateSignaturePadProps, CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
-export interface SignaturePadProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSignaturePadReturn>, CreateSignaturePadProps> {
+export interface SignaturePadProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSignaturePadReturn>, Optional<CreateSignaturePadProps, 'id'>> {
 }
 declare const SignaturePadRoot: import("svelte").Component<SignaturePadProps, {}, "ref">;
 type SignaturePadRoot = ReturnType<typeof SignaturePadRoot>;

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

@@ -1,6 +1,5 @@
 import * as slider from '@zag-js/slider';
-export interface CreateSliderProps extends Omit<slider.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateSliderProps extends Omit<slider.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateSliderReturn extends slider.Api {
 }

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

@@ -1,18 +1,14 @@
 import * as slider from '@zag-js/slider';
 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 createSlider(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(slider.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(slider.machine(context), { context });
-    return reflect(() => slider.connect(state, send, normalizeProps));
+    return reflect(() => slider.connect(service, normalizeProps));
 }

package/dist/slider/slider-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateSliderProps,
     CreateSliderReturn,
@@ -8,7 +8,7 @@
   export interface SliderProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateSliderReturn>,
-      CreateSliderProps
+      Optional<CreateSliderProps, 'id'>
     > {}
 </script>
 
@@ -20,20 +20,23 @@
   import {setSliderContext} from './slider-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: SliderProps = $props();
 
+  let uid = $props.id();
+
   let [createSliderProps, localProps] = $derived(
-    createSplitProps<CreateSliderProps>([
+    createSplitProps<Omit<CreateSliderProps, 'id'>>([
       'aria-label',
       'aria-labelledby',
+      'defaultValue',
       'disabled',
       'form',
       'getAriaValueText',
-      'id',
       'ids',
       'invalid',
       'max',
@@ -53,7 +56,10 @@
     ])(props),
   );
 
-  let slider = createSlider(reflect(() => createSliderProps));
+  let slider = createSlider(
+    reflect(() => ({...createSliderProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(slider.getRootProps(), localProps));
 
   setSliderContext(slider);

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateSliderProps, CreateSliderReturn } from './create-slider.svelte.js';
-export interface SliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSliderReturn>, CreateSliderProps> {
+export interface SliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSliderReturn>, Optional<CreateSliderProps, 'id'>> {
 }
 declare const SliderRoot: import("svelte").Component<SliderProps, {}, "ref">;
 type SliderRoot = ReturnType<typeof SliderRoot>;

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

@@ -1,6 +1,5 @@
 import * as splitter from '@zag-js/splitter';
-export interface CreateSplitterProps extends Omit<splitter.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateSplitterProps extends Omit<splitter.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateSplitterReturn extends splitter.Api {
 }

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

@@ -1,18 +1,14 @@
 import * as splitter from '@zag-js/splitter';
 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 createSplitter(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(splitter.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(splitter.machine(context), { context });
-    return reflect(() => splitter.connect(state, send, normalizeProps));
+    return reflect(() => splitter.connect(service, normalizeProps));
 }

package/dist/splitter/splitter-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateSplitterProps,
     CreateSplitterReturn,
@@ -8,7 +8,7 @@
   export interface SplitterProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateSplitterReturn>,
-      CreateSplitterProps
+      Optional<CreateSplitterProps, 'id'>
     > {}
 </script>
 
@@ -20,15 +20,18 @@
   import {setSplitterContext} from './splitter-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: SplitterProps = $props();
 
+  let uid = $props.id();
+
   let [createSplitterProps, localProps] = $derived(
-    createSplitProps<CreateSplitterProps>([
-      'id',
+    createSplitProps<Omit<CreateSplitterProps, 'id'>>([
+      'defaultSize',
       'ids',
       'onSizeChange',
       'onSizeChangeEnd',
@@ -37,7 +40,10 @@
     ])(props),
   );
 
-  let splitter = createSplitter(reflect(() => createSplitterProps));
+  let splitter = createSplitter(
+    reflect(() => ({...createSplitterProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(splitter.getRootProps(), localProps));
 
   setSplitterContext(splitter);

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateSplitterProps, CreateSplitterReturn } from './create-splitter.svelte.js';
-export interface SplitterProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSplitterReturn>, CreateSplitterProps> {
+export interface SplitterProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSplitterReturn>, Optional<CreateSplitterProps, 'id'>> {
 }
 declare const SplitterRoot: import("svelte").Component<SplitterProps, {}, "ref">;
 type SplitterRoot = ReturnType<typeof SplitterRoot>;

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

@@ -1,6 +1,5 @@
 import * as steps from '@zag-js/steps';
-export interface CreateStepsProps extends Omit<steps.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateStepsProps extends Omit<steps.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateStepsReturn extends steps.Api {
 }

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

@@ -1,18 +1,14 @@
 import * as steps from '@zag-js/steps';
 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 createSteps(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(steps.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(steps.machine(context), { context });
-    return reflect(() => steps.connect(state, send, normalizeProps));
+    return reflect(() => steps.connect(service, normalizeProps));
 }