ui-ingredients 0.31.2 → 1.0.0

package/dist/steps/steps-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 {
     CreateStepsProps,
     CreateStepsReturn,
@@ -9,7 +9,7 @@
   export interface StepsProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateStepsReturn>,
-        CreateStepsProps
+        Optional<CreateStepsProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -23,32 +23,38 @@
   import {setStepsContext} from './steps-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: StepsProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, stepsProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
   let [createStepsProps, localProps] = $derived(
-    createSplitProps<CreateStepsProps>([
+    createSplitProps<Omit<CreateStepsProps, 'id'>>([
       'count',
-      'id',
+      'defaultStep',
       'ids',
       'linear',
       'onStepChange',
       'onStepComplete',
       'orientation',
       'step',
-    ])(rest),
+    ])(stepsProps),
+  );
+
+  let steps = createSteps(
+    reflect(() => ({...createStepsProps, id: id ?? uid})),
   );
 
-  let steps = createSteps(reflect(() => createStepsProps));
   let mergedProps = $derived(mergeProps(steps.getRootProps(), localProps));
 
   setStepsContext(steps);

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

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

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

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

@@ -1,16 +1,13 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as switch_ from '@zag-js/switch';
-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 createSwitch(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(switch_.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -23,15 +20,14 @@ export function createSwitch(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(switch_.machine(context), { context });
     return reflect(() => {
-        const o = switch_.connect(state, send, normalizeProps);
+        const api = switch_.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getHiddenInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenInputProps(),
+                    ...api.getHiddenInputProps(),
                 };
             },
         };

package/dist/switch/switch-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 {
     CreateSwitchProps,
     CreateSwitchReturn,
@@ -8,7 +8,7 @@
   export interface SwitchProps
     extends Assign<
       HtmlIngredientProps<'label', HTMLLabelElement, CreateSwitchReturn>,
-      CreateSwitchProps
+      Optional<CreateSwitchProps, 'id'>
     > {}
 </script>
 
@@ -20,18 +20,21 @@
   import {setSwitchContext} from './switch-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: SwitchProps = $props();
 
+  let uid = $props.id();
+
   let [createSwitchProps, localProps] = $derived(
-    createSplitProps<CreateSwitchProps>([
+    createSplitProps<Omit<CreateSwitchProps, 'id'>>([
       'checked',
+      'defaultChecked',
       'disabled',
       'form',
-      'id',
       'ids',
       'invalid',
       'label',
@@ -43,7 +46,10 @@
     ])(props),
   );
 
-  let switch_ = createSwitch(reflect(() => createSwitchProps));
+  let switch_ = createSwitch(
+    reflect(() => ({...createSwitchProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(switch_.getRootProps(), localProps));
 
   setSwitchContext(switch_);

package/dist/switch/switch-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 { CreateSwitchProps, CreateSwitchReturn } from './create-switch.svelte.js';
-export interface SwitchProps extends Assign<HtmlIngredientProps<'label', HTMLLabelElement, CreateSwitchReturn>, CreateSwitchProps> {
+export interface SwitchProps extends Assign<HtmlIngredientProps<'label', HTMLLabelElement, CreateSwitchReturn>, Optional<CreateSwitchProps, 'id'>> {
 }
 declare const SwitchRoot: import("svelte").Component<SwitchProps, {}, "ref">;
 type SwitchRoot = ReturnType<typeof SwitchRoot>;

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

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

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

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

package/dist/tabs/tabs-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 {
     CreateTabsProps,
     CreateTabsReturn,
@@ -8,7 +8,7 @@
   export interface TabsProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateTabsReturn>,
-      CreateTabsProps
+      Optional<CreateTabsProps, 'id'>
     > {}
 </script>
 
@@ -20,18 +20,21 @@
   import {setTabsContext} from './tabs-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: TabsProps = $props();
 
+  let uid = $props.id();
+
   let [createTabsProps, localProps] = $derived(
-    createSplitProps<CreateTabsProps>([
+    createSplitProps<Omit<CreateTabsProps, 'id'>>([
       'activationMode',
       'composite',
+      'defaultValue',
       'deselectable',
-      'id',
       'ids',
       'loopFocus',
       'navigate',
@@ -43,7 +46,8 @@
     ])(props),
   );
 
-  let tabs = createTabs(reflect(() => createTabsProps));
+  let tabs = createTabs(reflect(() => ({...createTabsProps, id: id ?? uid})));
+
   let mergedProps = $derived(mergeProps(tabs.getRootProps(), localProps));
 
   setTabsContext(tabs);

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

package/dist/tabs/tabs-trigger.svelte

@@ -2,9 +2,15 @@
   import type {TriggerProps} from '@zag-js/tabs';
   import type {Assign, HtmlIngredientProps} from '../types.js';
 
+  interface TriggerState {
+    selected: boolean;
+    focused: boolean;
+    disabled: boolean;
+  }
+
   export interface TabsTriggerProps
     extends Assign<
-      HtmlIngredientProps<'button', HTMLButtonElement>,
+      HtmlIngredientProps<'button', HTMLButtonElement, TriggerState>,
       TriggerProps
     > {}
 </script>
@@ -26,15 +32,16 @@
   );
 
   let tabs = getTabsContext();
+  let triggerState = $derived(tabs.getTriggerState(triggerProps));
   let mergedProps = $derived(
     mergeProps(tabs.getTriggerProps(triggerProps), localProps),
   );
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps)}
+  {@render asChild(mergedProps, triggerState)}
 {:else}
   <button bind:this={ref} {...mergedProps}>
-    {@render children?.()}
+    {@render children?.(triggerState)}
   </button>
 {/if}

package/dist/tabs/tabs-trigger.svelte.d.ts

@@ -1,6 +1,11 @@
 import type { TriggerProps } from '@zag-js/tabs';
 import type { Assign, HtmlIngredientProps } from '../types.js';
-export interface TabsTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, TriggerProps> {
+interface TriggerState {
+    selected: boolean;
+    focused: boolean;
+    disabled: boolean;
+}
+export interface TabsTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement, TriggerState>, TriggerProps> {
 }
 declare const TabsTrigger: import("svelte").Component<TabsTriggerProps, {}, "ref">;
 type TabsTrigger = ReturnType<typeof TabsTrigger>;

package/dist/tags-input/create-tags-input.svelte.d.ts

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

package/dist/tags-input/create-tags-input.svelte.js

@@ -1,16 +1,13 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
-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 createTagsInput(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(tagsInput.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -23,15 +20,14 @@ export function createTagsInput(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(tagsInput.machine(context), { context });
     return reflect(() => {
-        const o = tagsInput.connect(state, send, normalizeProps);
+        const api = tagsInput.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getHiddenInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenInputProps(),
+                    ...api.getHiddenInputProps(),
                 };
             },
         };

package/dist/tags-input/tags-input-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 {
     CreateTagsInputProps,
     CreateTagsInputReturn,
@@ -8,7 +8,7 @@
   export interface TagsInputProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateTagsInputReturn>,
-      CreateTagsInputProps
+      Optional<CreateTagsInputProps, 'id'>
     > {}
 </script>
 
@@ -20,23 +20,27 @@
   import {setTagsInputContext} from './tags-input-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: TagsInputProps = $props();
 
+  let uid = $props.id();
+
   let [createTagsInputProps, localProps] = $derived(
-    createSplitProps<CreateTagsInputProps>([
+    createSplitProps<Omit<CreateTagsInputProps, 'id'>>([
       'addOnPaste',
       'allowOverflow',
       'autoFocus',
       'blurBehavior',
+      'defaultInputValue',
+      'defaultValue',
       'delimiter',
       'disabled',
       'editable',
       'form',
-      'id',
       'ids',
       'inputValue',
       'invalid',
@@ -58,7 +62,9 @@
     ])(props),
   );
 
-  let tagsInput = createTagsInput(reflect(() => createTagsInputProps));
+  let tagsInput = createTagsInput(
+    reflect(() => ({...createTagsInputProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(tagsInput.getRootProps(), localProps));
 

package/dist/tags-input/tags-input-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 { CreateTagsInputProps, CreateTagsInputReturn } from './create-tags-input.svelte.js';
-export interface TagsInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTagsInputReturn>, CreateTagsInputProps> {
+export interface TagsInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTagsInputReturn>, Optional<CreateTagsInputProps, 'id'>> {
 }
 declare const TagsInputRoot: import("svelte").Component<TagsInputProps, {}, "ref">;
 type TagsInputRoot = ReturnType<typeof TagsInputRoot>;

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

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

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

@@ -1,20 +1,15 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timePicker from '@zag-js/time-picker';
-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 createTimePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(timePicker.machine, () => ({
         dir: locale?.dir,
         locale: locale?.locale,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(timePicker.machine(context), { context });
-    return reflect(() => timePicker.connect(state, send, normalizeProps));
+    return reflect(() => timePicker.connect(service, normalizeProps));
 }

package/dist/time-picker/time-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 {
     CreateTimePickerProps,
     CreateTimePickerReturn,
@@ -9,7 +9,7 @@
   export interface TimePickerProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateTimePickerReturn>,
-        CreateTimePickerProps
+        Optional<CreateTimePickerProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -24,18 +24,22 @@
   import {setTimePickerContext} from './time-picker-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: TimePickerProps = $props();
 
-  let [createTimePickerProps, rest] = $derived(
-    createSplitProps<CreateTimePickerProps>([
+  let uid = $props.id();
+
+  let [createTimePickerProps, timePickerProps] = $derived(
+    createSplitProps<Omit<CreateTimePickerProps, 'id'>>([
       'allowSeconds',
+      'defaultOpen',
+      'defaultValue',
       'disableLayer',
       'disabled',
-      'id',
       'ids',
       'locale',
       'max',
@@ -45,7 +49,6 @@
       'onOpenChange',
       'onValueChange',
       'open',
-      'openControlled',
       'placeholder',
       'positioning',
       'readOnly',
@@ -55,10 +58,15 @@
   );
 
   let [presenceStrategyProps, localProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      timePickerProps,
+    ),
+  );
+
+  let timePicker = createTimePicker(
+    reflect(() => ({...createTimePickerProps, id: id ?? uid})),
   );
 
-  let timePicker = createTimePicker(reflect(() => createTimePickerProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

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

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

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

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

@@ -1,15 +1,11 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 export function createTimer(props) {
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(timer.machine, () => ({
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(timer.machine(context), { context });
-    return reflect(() => timer.connect(state, send, normalizeProps));
+    return reflect(() => timer.connect(service, normalizeProps));
 }

package/dist/timer/timer-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 {
     CreateTimerProps,
     CreateTimerReturn,
@@ -8,7 +8,7 @@
   export interface TimerProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateTimerReturn>,
-      CreateTimerProps
+      Optional<CreateTimerProps, 'id'>
     > {}
 </script>
 
@@ -20,17 +20,19 @@
   import {setTimerContext} from './timer-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: TimerProps = $props();
 
+  let uid = $props.id();
+
   let [createTimerProps, localProps] = $derived(
-    createSplitProps<CreateTimerProps>([
+    createSplitProps<Omit<CreateTimerProps, 'id'>>([
       'autoStart',
       'countdown',
-      'id',
       'ids',
       'interval',
       'onComplete',
@@ -40,7 +42,10 @@
     ])(props),
   );
 
-  let timer = createTimer(reflect(() => createTimerProps));
+  let timer = createTimer(
+    reflect(() => ({...createTimerProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(timer.getRootProps(), localProps));
 
   setTimerContext(timer);

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

package/dist/toast/create-toaster.svelte.d.ts

@@ -1,9 +1,6 @@
-import * as toast from 'zagjs-legacy-toast';
-export interface CreateToasterProps extends Omit<Partial<toast.GroupMachineContext>, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
-    placement?: toast.Placement;
+import * as toast from '@zag-js/toast';
+export interface CreateToasterProps extends toast.StoreProps {
 }
-export interface CreateToasterReturn extends toast.GroupApi {
-    machine: toast.GroupService;
+export interface CreateToasterReturn extends toast.Store {
 }
-export declare function createToaster(props?: CreateToasterProps): CreateToasterReturn;
+export declare function createToaster(props: CreateToasterProps): CreateToasterReturn;