ui-ingredients 0.0.8 → 0.0.9

package/dist/steps/index.js

@@ -1,10 +1,10 @@
 export { default as Content } from './content.svelte';
-export { default as Indicator } from './indicator.svelte';
+export { default as Indicator, } from './indicator.svelte';
 export { default as Item } from './item.svelte';
 export { default as List } from './list.svelte';
-export { default as NextTrigger } from './next-trigger.svelte';
-export { default as PrevTrigger } from './prev-trigger.svelte';
+export { default as NextTrigger, } from './next-trigger.svelte';
+export { default as PrevTrigger, } from './prev-trigger.svelte';
 export { default as Progress } from './progress.svelte';
 export { default as Root } from './root.svelte';
-export { default as Separator } from './separator.svelte';
+export { default as Separator, } from './separator.svelte';
 export { default as Trigger } from './trigger.svelte';

package/dist/steps/indicator.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsIndicatorProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface StepsIndicatorProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
@@ -14,7 +13,9 @@
   let context = useStepsContext();
   let itemContext = useStepsItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getIndicatorProps(itemContext)),
+  );
 </script>
 
 <div {...attrs}>

package/dist/steps/indicator.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsIndicatorProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsIndicatorProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/item.svelte

@@ -1,9 +1,12 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/steps';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/steps';
+  import type {Snippet} from 'svelte';
 
-  export interface StepsItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+  export interface StepsItemProps
+    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
@@ -14,11 +17,13 @@
 
   let context = useStepsContext();
 
+  let state = $derived(context.getItemState({index}));
+
   let attrs = $derived(mergeProps(props, context.getItemProps({index})));
 
   setStepsItemContext({index});
 </script>
 
 <div {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </div>

package/dist/steps/item.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/steps';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/steps';
+import type { Snippet } from 'svelte';
+export interface StepsItemProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/list.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsListProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface StepsListProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/list.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsListProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsListProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/next-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface StepsNextTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/next-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsNextTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/prev-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface StepsPrevTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/prev-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsPrevTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/progress.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsProgressProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface StepsProgressProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/progress.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsProgressProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsProgressProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/root.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import type {CreateStepsContextProps, CreateStepsContextReturn} from './context.svelte.js';
+  import type {
+    CreateStepsContextProps,
+    CreateStepsContextReturn,
+  } from './context.svelte.js';
 
   export interface StepsProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateStepsContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateStepsContextProps, 'id'>
     > {
-    children?: Snippet<[CreateStepsContextReturn]>;
+    children?: Snippet<[context: CreateStepsContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createStepsContext, setStepsContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     step,
@@ -34,7 +36,7 @@
   }: StepsProps = $props();
 
   let context = createStepsContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     step,

package/dist/steps/root.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateStepsContextProps, CreateStepsContextReturn } from './context.svelte.js';
-export interface StepsProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateStepsContextProps>> {
-    children?: Snippet<[CreateStepsContextReturn]>;
+export interface StepsProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateStepsContextProps, 'id'>> {
+    children?: Snippet<[context: CreateStepsContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/separator.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsSeparatorProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface StepsSeparatorProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
@@ -14,7 +13,9 @@
   let context = useStepsContext();
   let itemContext = useStepsItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getSeparatorProps(itemContext)),
+  );
 </script>
 
 <div {...attrs}>

package/dist/steps/separator.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsSeparatorProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsSeparatorProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/steps/trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface StepsTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface StepsTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface StepsTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface StepsTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/switch/control.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface SwitchControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface SwitchControlProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/control.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SwitchControlProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SwitchControlProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/switch/hidden-input.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface SwitchHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface SwitchHiddenInputProps extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/hidden-input.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SwitchHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SwitchHiddenInputProps extends SvelteHtmlProps<'input'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/switch/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Control, type SwitchControlProps } from './control.svelte';
-export { default as HiddenInput, type SwitchHiddenInputProps } from './hidden-input.svelte';
+export { default as HiddenInput, type SwitchHiddenInputProps, } from './hidden-input.svelte';
 export { default as Label, type SwitchLabelProps } from './label.svelte';
 export { default as Root, type SwitchProps } from './root.svelte';
 export { default as Thumb, type SwitchThumbProps } from './thumb.svelte';

package/dist/switch/index.js

@@ -1,5 +1,5 @@
 export { default as Control } from './control.svelte';
-export { default as HiddenInput } from './hidden-input.svelte';
+export { default as HiddenInput, } from './hidden-input.svelte';
 export { default as Label } from './label.svelte';
 export { default as Root } from './root.svelte';
 export { default as Thumb } from './thumb.svelte';

package/dist/switch/label.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface SwitchLabelProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface SwitchLabelProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/label.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SwitchLabelProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SwitchLabelProps extends SvelteHtmlProps<'span'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/switch/root.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import type {CreateSwitchContextProps, CreateSwitchContextReturn} from './context.svelte.js';
+  import type {
+    CreateSwitchContextProps,
+    CreateSwitchContextReturn,
+  } from './context.svelte.js';
 
   export interface SwitchProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['label']>,
-      OptionalId<CreateSwitchContextProps>
+      Omit<SvelteHtmlProps<'label'>, 'children'>,
+      Omit<CreateSwitchContextProps, 'id'>
     > {
-    children?: Snippet<[CreateSwitchContextReturn]>;
+    children?: Snippet<[context: CreateSwitchContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createSwitchContext, setSwitchContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     form,
@@ -38,7 +40,7 @@
   }: SwitchProps = $props();
 
   let context = createSwitchContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     form,

package/dist/switch/root.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateSwitchContextProps, CreateSwitchContextReturn } from './context.svelte.js';
-export interface SwitchProps extends Assign<WithoutChildren<SvelteHTMLElements['label']>, OptionalId<CreateSwitchContextProps>> {
-    children?: Snippet<[CreateSwitchContextReturn]>;
+export interface SwitchProps extends Assign<Omit<SvelteHtmlProps<'label'>, 'children'>, Omit<CreateSwitchContextProps, 'id'>> {
+    children?: Snippet<[context: CreateSwitchContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/switch/thumb.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface SwitchThumbProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface SwitchThumbProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/thumb.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SwitchThumbProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SwitchThumbProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tabs/content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {ContentProps} from '@zag-js/tabs';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
-  export interface TabsContentProps extends Assign<SvelteHTMLElements['div'], ContentProps> {}
+  export interface TabsContentProps
+    extends Assign<SvelteHtmlProps<'div'>, ContentProps> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/content.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { ContentProps } from '@zag-js/tabs';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TabsContentProps extends Assign<SvelteHTMLElements['div'], ContentProps> {
+export interface TabsContentProps extends Assign<SvelteHtmlProps<'div'>, ContentProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tabs/list.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface TabsListProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface TabsListProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/list.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TabsListProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TabsListProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tabs/root.svelte

@@ -1,12 +1,17 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import type {CreateTabsContextProps, CreateTabsContextReturn} from './context.svelte.js';
+  import type {
+    CreateTabsContextProps,
+    CreateTabsContextReturn,
+  } from './context.svelte.js';
 
   export interface TabsProps
-    extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateTabsContextProps>> {
-    children?: Snippet<[CreateTabsContextReturn]>;
+    extends Assign<
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateTabsContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateTabsContextReturn]>;
   }
 </script>
 
@@ -16,7 +21,7 @@
   import {createTabsContext, setTabsContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     value,
@@ -33,7 +38,7 @@
   }: TabsProps = $props();
 
   let context = createTabsContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     value: $state.snapshot(value),

package/dist/tabs/root.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateTabsContextProps, CreateTabsContextReturn } from './context.svelte.js';
-export interface TabsProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateTabsContextProps>> {
-    children?: Snippet<[CreateTabsContextReturn]>;
+export interface TabsProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateTabsContextProps, 'id'>> {
+    children?: Snippet<[context: CreateTabsContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tabs/trigger.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {TriggerProps} from '@zag-js/tabs';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
-  export interface TabsTriggerProps extends Assign<SvelteHTMLElements['button'], TriggerProps> {}
+  export interface TabsTriggerProps
+    extends Assign<SvelteHtmlProps<'button'>, TriggerProps> {}
 </script>
 
 <script lang="ts">
@@ -14,7 +14,9 @@
 
   let context = useTabsContext();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps({value, disabled})));
+  let attrs = $derived(
+    mergeProps(props, context.getTriggerProps({value, disabled})),
+  );
 </script>
 
 <button type="button" {...attrs}>

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

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { TriggerProps } from '@zag-js/tabs';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TabsTriggerProps extends Assign<SvelteHTMLElements['button'], TriggerProps> {
+export interface TabsTriggerProps extends Assign<SvelteHtmlProps<'button'>, TriggerProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {