ui-ingredients 0.0.8 → 0.0.9

package/dist/timer/separator.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface TimerSeparatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTimerContext} from './context.svelte.js';
-
-  let {children, ...props}: TimerSeparatorProps = $props();
-
-  let context = useTimerContext();
-
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface TimerSeparatorProps extends SvelteHtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTimerContext} from './context.svelte.js';
+
+  let {children, ...props}: TimerSeparatorProps = $props();
+
+  let context = useTimerContext();
+
+  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TimerSeparatorProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TimerSeparatorProps 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/toast/action-trigger.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ToastActionTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface ToastActionTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import {useToastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastActionTriggerProps = $props();

package/dist/toast/action-trigger.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
-export interface ToastActionTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ToastActionTriggerProps extends SvelteHtmlProps<'button'> {
 }
-import type { SvelteHTMLElements } from 'svelte/elements';
 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> & {
         $$bindings?: Bindings;

package/dist/toast/close-trigger.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ToastCloseTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface ToastCloseTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import {useToastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastCloseTriggerProps = $props();

package/dist/toast/close-trigger.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
-export interface ToastCloseTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ToastCloseTriggerProps extends SvelteHtmlProps<'button'> {
 }
-import type { SvelteHTMLElements } from 'svelte/elements';
 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> & {
         $$bindings?: Bindings;

package/dist/toast/description.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ToastDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ToastDescriptionProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import {useToastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastDescriptionProps = $props();

package/dist/toast/description.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
-export interface ToastDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ToastDescriptionProps extends SvelteHtmlProps<'div'> {
 }
-import type { SvelteHTMLElements } from 'svelte/elements';
 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> & {
         $$bindings?: Bindings;

package/dist/toast/root.svelte

@@ -1,12 +1,15 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {SvelteHtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateToastContextReturn} from './context.svelte.js';
 
-  export interface ToastProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ToastProps extends Omit<SvelteHtmlProps<'div'>, 'children'> {
+    children?: Snippet<[context: CreateToastContextReturn]>;
+  }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import {useToastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastProps = $props();
@@ -19,7 +22,7 @@
 <div {...attrs}>
   <div {...context.getGhostBeforeProps()}></div>
 
-  {@render children?.()}
+  {@render children?.(context)}
 
   <div {...context.getGhostAfterProps()}></div>
 </div>

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

@@ -1,7 +1,9 @@
-import type { Assign } from '../types.js';
-export interface ToastProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { CreateToastContextReturn } from './context.svelte.js';
+export interface ToastProps extends Omit<SvelteHtmlProps<'div'>, 'children'> {
+    children?: Snippet<[context: CreateToastContextReturn]>;
 }
-import type { SvelteHTMLElements } from 'svelte/elements';
 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> & {
         $$bindings?: Bindings;

package/dist/toast/title.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ToastTitleProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ToastTitleProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import {useToastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastTitleProps = $props();

package/dist/toast/title.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
-export interface ToastTitleProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ToastTitleProps extends SvelteHtmlProps<'div'> {
 }
-import type { SvelteHTMLElements } from 'svelte/elements';
 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> & {
         $$bindings?: Bindings;

package/dist/toast/toast.d.ts

@@ -1,5 +1,5 @@
-export { default as ActionTrigger, type ToastActionTriggerProps } from './action-trigger.svelte';
-export { default as CloseTrigger, type ToastCloseTriggerProps } from './close-trigger.svelte';
-export { default as Description, type ToastDescriptionProps } from './description.svelte';
+export { default as ActionTrigger, type ToastActionTriggerProps, } from './action-trigger.svelte';
+export { default as CloseTrigger, type ToastCloseTriggerProps, } from './close-trigger.svelte';
+export { default as Description, type ToastDescriptionProps, } from './description.svelte';
 export { default as Root, type ToastProps } from './root.svelte';
 export { default as Title, type ToastTitleProps } from './title.svelte';

package/dist/toast/toast.js

@@ -1,5 +1,5 @@
-export { default as ActionTrigger } from './action-trigger.svelte';
-export { default as CloseTrigger } from './close-trigger.svelte';
-export { default as Description } from './description.svelte';
+export { default as ActionTrigger, } from './action-trigger.svelte';
+export { default as CloseTrigger, } from './close-trigger.svelte';
+export { default as Description, } from './description.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';

package/dist/toast/toaster.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" context="module">
-  import type {WithoutChildren} from '../types.js';
+  import type {SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import type {CreateToastContextReturn} from './context.svelte.js';
   import type {CreateToasterReturn} from './create-toaster.svelte.js';
 
-  export interface ToasterProps extends WithoutChildren<SvelteHTMLElements['div']> {
+  export interface ToasterProps
+    extends Omit<SvelteHtmlProps<'div'>, 'children'> {
     toaster: CreateToasterReturn;
     children: Snippet<[CreateToastContextReturn]>;
   }

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

@@ -1,9 +1,8 @@
-import type { WithoutChildren } from '../types.js';
+import type { SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateToastContextReturn } from './context.svelte.js';
 import type { CreateToasterReturn } from './create-toaster.svelte.js';
-export interface ToasterProps extends WithoutChildren<SvelteHTMLElements['div']> {
+export interface ToasterProps extends Omit<SvelteHtmlProps<'div'>, 'children'> {
     toaster: CreateToasterReturn;
     children: Snippet<[CreateToastContextReturn]>;
 }

package/dist/toggle-group/item.svelte

@@ -1,22 +1,29 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/toggle-group';
+  import type {Snippet} from 'svelte';
 
-  export interface ToggleGroupItemProps extends Assign<SvelteHTMLElements['button'], ItemProps> {}
+  export interface ToggleGroupItemProps
+    extends Assign<Omit<SvelteHtmlProps<'button'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import type {ItemProps} from '@zag-js/toggle-group';
   import {useToggleGroupContext} from './context.svelte.js';
 
   let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
 
   let context = useToggleGroupContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemProps({value, disabled})));
+  let state = $derived(context.getItemState({value}));
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemProps({value, disabled})),
+  );
 </script>
 
 <button type="button" {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </button>

package/dist/toggle-group/item.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ToggleGroupItemProps extends Assign<SvelteHTMLElements['button'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/toggle-group';
+import type { Snippet } from 'svelte';
+export interface ToggleGroupItemProps extends Assign<Omit<SvelteHtmlProps<'button'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
-import type { ItemProps } from '@zag-js/toggle-group';
 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> & {
         $$bindings?: Bindings;

package/dist/toggle-group/root.svelte

@@ -1,7 +1,6 @@
 <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 {
     CreateToggleGroupContextProps,
     CreateToggleGroupContextReturn,
@@ -9,20 +8,23 @@
 
   export interface ToggleGroupProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateToggleGroupContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateToggleGroupContextProps, 'id'>
     > {
-    children?: Snippet<[CreateToggleGroupContextReturn]>;
+    children?: Snippet<[context: CreateToggleGroupContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createToggleGroupContext, setToggleGroupContext} from './context.svelte.js';
+  import {
+    createToggleGroupContext,
+    setToggleGroupContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     value,
@@ -38,7 +40,7 @@
   }: ToggleGroupProps = $props();
 
   let context = createToggleGroupContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     value: $state.snapshot(value),

package/dist/toggle-group/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 { CreateToggleGroupContextProps, CreateToggleGroupContextReturn } from './context.svelte.js';
-export interface ToggleGroupProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateToggleGroupContextProps>> {
-    children?: Snippet<[CreateToggleGroupContextReturn]>;
+export interface ToggleGroupProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateToggleGroupContextProps, 'id'>> {
+    children?: Snippet<[context: CreateToggleGroupContextReturn]>;
 }
 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/tooltip/arrow-tip.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 TooltipArrowTipProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface TooltipArrowTipProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/arrow-tip.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TooltipArrowTipProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TooltipArrowTipProps 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/tooltip/arrow.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 TooltipArrowProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface TooltipArrowProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/arrow.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TooltipArrowProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TooltipArrowProps 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/tooltip/content.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 TooltipContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface TooltipContentProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TooltipContentProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TooltipContentProps 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/tooltip/index.d.ts

@@ -1,6 +1,6 @@
-export { default as ArrowTip, type TooltipArrowTipProps } from './arrow-tip.svelte';
+export { default as ArrowTip, type TooltipArrowTipProps, } from './arrow-tip.svelte';
 export { default as Arrow, type TooltipArrowProps } from './arrow.svelte';
 export { default as Content, type TooltipContentProps } from './content.svelte';
-export { default as Positioner, type TooltipPositionerProps } from './positioner.svelte';
+export { default as Positioner, type TooltipPositionerProps, } from './positioner.svelte';
 export { default as Root, type TooltipProps } from './root.svelte';
 export { default as Trigger, type TooltipTriggerProps } from './trigger.svelte';

package/dist/tooltip/index.js

@@ -1,6 +1,6 @@
-export { default as ArrowTip } from './arrow-tip.svelte';
+export { default as ArrowTip, } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';
-export { default as Positioner } from './positioner.svelte';
+export { default as Positioner, } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Trigger } from './trigger.svelte';

package/dist/tooltip/positioner.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 TooltipPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface TooltipPositionerProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/positioner.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TooltipPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TooltipPositionerProps 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/tooltip/root.svelte

@@ -1,9 +1,12 @@
 <script lang="ts" context="module">
-  import type {OptionalId} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {CreateTooltipContextProps, CreateTooltipContextReturn} from './context.svelte.js';
+  import type {
+    CreateTooltipContextProps,
+    CreateTooltipContextReturn,
+  } from './context.svelte.js';
 
-  export interface TooltipProps extends OptionalId<CreateTooltipContextProps> {
+  export interface TooltipProps extends Omit<CreateTooltipContextProps, 'id'> {
+    id?: string | null;
     children?: Snippet<[CreateTooltipContextReturn]>;
   }
 </script>
@@ -12,9 +15,12 @@
   import {uuid} from '../utils.svelte.js';
   import {createTooltipContext, setTooltipContext} from './context.svelte.js';
 
-  let {id = uuid(), children, ...props}: TooltipProps = $props();
+  let {id, children, ...props}: TooltipProps = $props();
 
-  let context = createTooltipContext({id, ...props});
+  let context = createTooltipContext({
+    id: id ?? uuid(),
+    ...props,
+  });
 
   setTooltipContext(context);
 </script>

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

@@ -1,7 +1,7 @@
-import type { OptionalId } from '../types.js';
 import type { Snippet } from 'svelte';
 import type { CreateTooltipContextProps, CreateTooltipContextReturn } from './context.svelte.js';
-export interface TooltipProps extends OptionalId<CreateTooltipContextProps> {
+export interface TooltipProps extends Omit<CreateTooltipContextProps, 'id'> {
+    id?: string | null;
     children?: Snippet<[CreateTooltipContextReturn]>;
 }
 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> {

package/dist/tooltip/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 TooltipTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface TooltipTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface TooltipTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface TooltipTriggerProps 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/types.d.ts

@@ -1,5 +1,8 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
 export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
-export type OptionalId<T> = Assign<T, {
-    id?: string;
-}>;
-export type WithoutChildren<T> = Omit<T, 'children'>;
+type KnownKeys<T> = keyof {
+    [K in keyof T as string extends K ? never : number extends K ? never : K]: string;
+};
+type SvelteHtmlPropKeys = KnownKeys<SvelteHTMLElements>;
+export type SvelteHtmlProps<T extends SvelteHtmlPropKeys> = Assign<SvelteHTMLElements[T], {}>;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",