ui-ingredients 0.0.17 → 0.0.18

package/dist/steps/root.svelte

@@ -1,18 +1,14 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateStepsProps, CreateStepsReturn} from './create-steps.svelte.js';
 
-  export interface StepsProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateStepsProps, 'id'>> {
+  export interface StepsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateStepsProps> {
     children?: Snippet<[api: CreateStepsReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {stepsContext} from './context.svelte.js';
   import {createSteps} from './create-steps.svelte.js';
@@ -20,33 +16,25 @@
   let {
     id,
     ids,
-    dir,
     step,
     count,
     linear,
     orientation,
     onStepChange,
     onStepComplete,
-    getRootNode,
     children,
     ...props
   }: StepsProps = $props();
 
-  let localeContext = getLocaleContext();
-
-  let uid = createUniqueId();
-
   let context = createSteps({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     step,
     count,
     linear,
     orientation,
     onStepChange,
     onStepComplete,
-    getRootNode: getRootNode ?? getEnvironmentContext()?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/steps/separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsSeparatorProps extends HtmlIngredientProps<'div'> {}
+  export interface StepsSeparatorProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface StepsTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface StepsTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SwitchControlProps extends HtmlIngredientProps<'div'> {}
+  export interface SwitchControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as switch$ from '@zag-js/switch';
 export function createSwitch(props) {
-    const [state, send] = useMachine(switch$.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(switch$.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => switch$.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/switch/hidden-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SwitchHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface SwitchHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SwitchLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface SwitchLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSwitchProps, CreateSwitchReturn} from './create-switch.svelte.js';
 
   export interface SwitchProps
-    extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, Omit<CreateSwitchProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateSwitchProps> {
     children?: Snippet<[api: CreateSwitchReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {switchContext} from './context.svelte.js';
   import {createSwitch} from './create-switch.svelte.js';
@@ -20,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     form,
     name,
     label,
@@ -31,20 +27,13 @@
     readOnly,
     required,
     onCheckedChange,
-    getRootNode,
     children,
     ...props
   }: SwitchProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createSwitch({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     form,
     name,
     label,
@@ -55,7 +44,6 @@
     readOnly,
     required,
     onCheckedChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/switch/thumb.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
+  export interface SwitchThumbProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/content.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ContentProps} from '@zag-js/tabs';
 
-  export interface TabsContentProps extends Assign<HtmlIngredientProps<'div'>, ContentProps> {}
+  export interface TabsContentProps extends Assign<HtmlProps<'div'>, ContentProps> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tabs from '@zag-js/tabs';
 export function createTabs(props) {
-    const [state, send] = useMachine(tabs.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(tabs.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => tabs.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/tabs/list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TabsListProps extends HtmlIngredientProps<'div'> {}
+  export interface TabsListProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/root.svelte

@@ -1,18 +1,14 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateTabsProps, CreateTabsReturn} from './create-tabs.svelte.js';
 
-  export interface TabsProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateTabsProps, 'id'>> {
+  export interface TabsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTabsProps> {
     children?: Snippet<[api: CreateTabsReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {tabsContext} from './context.svelte.js';
   import {createTabs} from './create-tabs.svelte.js';
@@ -20,7 +16,6 @@
   let {
     id,
     ids,
-    dir,
     value,
     loopFocus,
     composite,
@@ -29,20 +24,13 @@
     activationMode,
     onFocusChange,
     onValueChange,
-    getRootNode,
     children,
     ...props
   }: TabsProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createTabs({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),
     loopFocus,
     composite,
@@ -51,7 +39,6 @@
     activationMode,
     onFocusChange,
     onValueChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/tabs/trigger.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {TriggerProps} from '@zag-js/tabs';
 
-  export interface TabsTriggerProps extends Assign<HtmlIngredientProps<'button'>, TriggerProps> {}
+  export interface TabsTriggerProps extends Assign<HtmlProps<'button'>, TriggerProps> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/clear-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputClearTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface TagsInputClearTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputControlProps extends HtmlIngredientProps<'div'> {}
+  export interface TagsInputControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
 export function createTagsInputt(props) {
-    const [state, send] = useMachine(tagsInput.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(tagsInput.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => tagsInput.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/tags-input/hidden-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface TagsInputHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputInputProps extends HtmlIngredientProps<'input'> {}
+  export interface TagsInputInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/item-delete-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputItemDeleteTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface TagsInputItemDeleteTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/item-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputItemInputProps extends HtmlIngredientProps<'input'> {}
+  export interface TagsInputItemInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/item-preview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputItemPreviewProps extends HtmlIngredientProps<'div'> {}
+  export interface TagsInputItemPreviewProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/item-text.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputItemTextProps extends HtmlIngredientProps<'span'> {}
+  export interface TagsInputItemTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/tags-input';
   import type {Snippet} from 'svelte';
 
   export interface TagsInputItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/tags-input/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TagsInputLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface TagsInputLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateTagsInputProps, CreateTagsInputReturn} from './create-tags-input.svelte.js';
 
   export interface TagsInputProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateTagsInputProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTagsInputProps> {
     children?: Snippet<[api: CreateTagsInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {tagsInputContext} from './context.svelte.js';
   import {createTagsInputt} from './create-tags-input.svelte.js';
@@ -20,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     max,
     form,
     name,
@@ -46,20 +42,13 @@
     onHighlightChange,
     onInputValueChange,
     onPointerDownOutside,
-    getRootNode,
     children,
     ...props
   }: TagsInputProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createTagsInputt({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     max,
     form,
     name,
@@ -85,7 +74,6 @@
     onHighlightChange,
     onInputValueChange,
     onPointerDownOutside,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/timer/action-trigger.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ActionTriggerProps} from '@zag-js/timer';
 
   export interface TimerActionTriggerProps
-    extends Assign<HtmlIngredientProps<'button'>, ActionTriggerProps> {}
+    extends Assign<HtmlProps<'button'>, ActionTriggerProps> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,14 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
 export function createTimer(props) {
-    const [state, send] = useMachine(timer.machine(props));
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(timer.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/timer/item-label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TimerItemLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface TimerItemLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/timer/item-value.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TimerItemValueProps extends HtmlIngredientProps<'span'> {}
+  export interface TimerItemValueProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/timer/item.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/timer';
 
-  export interface TimerItemProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
+  export interface TimerItemProps extends Assign<HtmlProps<'div'>, ItemProps> {}
 </script>
 
 <script lang="ts">