ui-ingredients 0.0.38 → 0.0.40

package/dist/time-picker/positioner.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerPositionerProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerPositionerProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTimePickerProps,
     CreateTimePickerReturn,
   } from './create-time-picker.svelte.js';
 
   export interface TimePickerProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTimePickerProps> {
-    asChild?: AsChild<CreateTimePickerReturn>;
-    children?: Snippet<[CreateTimePickerReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateTimePickerReturn>,
+      CreateTimePickerProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/second-cell.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
   export interface TimePickerSecondCellProps
-    extends Assign<HTMLProps<'div'>, CellProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, CellProps> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/spacer.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerSpacerProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerSpacerProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/timer/action-trigger.svelte

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

package/dist/timer/item-label.svelte

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

package/dist/timer/item-value.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimerItemValueProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TimerItemValueProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/timer/item.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps} from '@zag-js/timer';
 
-  export interface TimerItemProps extends Assign<HTMLProps<'div'>, ItemProps> {
-    asChild?: AsChild;
-  }
+  export interface TimerItemProps
+    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/timer/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTimerProps,
     CreateTimerReturn,
   } from './create-timer.svelte.js';
 
   export interface TimerProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTimerProps> {
-    asChild?: AsChild<CreateTimerReturn>;
-    children?: Snippet<[CreateTimerReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateTimerReturn>,
+      CreateTimerProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/timer/separator.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimerSeparatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TimerSeparatorProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/action-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ToastActionTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface ToastActionTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/close-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ToastCloseTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface ToastCloseTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/description.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ToastDescriptionProps extends HTMLProps<'p'> {
-    asChild?: AsChild;
-  }
+  export interface ToastDescriptionProps extends HtmlIngredientProps<'p'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/ghost-after.svelte

@@ -1,19 +1,24 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ToastGhostAfterProps
-    extends Omit<HTMLProps<'span'>, 'children'> {}
+  export interface ToastGhostAfterProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getToastContext} from './context.svelte.js';
 
-  let {...props}: ToastGhostAfterProps = $props();
+  let {asChild, children, ...props}: ToastGhostAfterProps = $props();
 
   let context = getToastContext();
 
   let mergedProps = $derived(mergeProps(props, context.getGhostAfterProps()));
 </script>
 
-<span {...mergedProps}></span>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/toast/ghost-before.svelte

@@ -1,19 +1,24 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ToastGhostBeforeProps
-    extends Omit<HTMLProps<'span'>, 'children'> {}
+  export interface ToastGhostBeforeProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getToastContext} from './context.svelte.js';
 
-  let {...props}: ToastGhostBeforeProps = $props();
+  let {asChild, children, ...props}: ToastGhostBeforeProps = $props();
 
   let context = getToastContext();
 
   let mergedProps = $derived(mergeProps(props, context.getGhostBeforeProps()));
 </script>
 
-<span {...mergedProps}></span>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/toast/root.svelte

@@ -1,12 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {HtmlIngredientProps} from '../types.js';
   import type {CreateToastReturn} from './create-toast.svelte.js';
 
-  export interface ToastProps extends Omit<HTMLProps<'div'>, 'children'> {
-    asChild?: AsChild<CreateToastReturn>;
-    children?: Snippet<[CreateToastReturn]>;
-  }
+  export interface ToastProps
+    extends HtmlIngredientProps<'div', CreateToastReturn> {}
 </script>
 
 <script lang="ts">

package/dist/toast/title.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ToastTitleProps extends HTMLProps<'h2'> {
-    asChild?: AsChild;
-  }
+  export interface ToastTitleProps extends HtmlIngredientProps<'h2'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/toaster.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {HtmlIngredientProps} from '../types.js';
   import type {CreateToastReturn} from './create-toast.svelte.js';
   import type {CreateToasterReturn} from './create-toaster.svelte.js';
 
-  export interface ToasterProps extends Omit<HTMLProps<'div'>, 'children'> {
+  export interface ToasterProps
+    extends HtmlIngredientProps<'div', CreateToastReturn> {
     toaster: CreateToasterReturn;
-    children: Snippet<[toast: CreateToastReturn]>;
   }
 </script>
 
@@ -32,7 +31,7 @@
     {#each toasts as toast (toast.id)}
       <ToastActor actor={toast}>
         {#snippet children$(ctx)}
-          {@render children(ctx)}
+          {@render children?.(ctx)}
         {/snippet}
       </ToastActor>
     {/each}

package/dist/toggle-group/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/toggle-group';
-  import type {Snippet} from 'svelte';
 
   export interface ToggleGroupItemProps
-    extends Assign<Omit<HTMLProps<'button'>, 'children'>, ItemProps> {
-    asChild?: AsChild;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'button', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">
@@ -31,7 +27,7 @@
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps)}
+  {@render asChild(mergedProps, itemState)}
 {:else}
   <button type="button" {...mergedProps}>
     {@render children?.(itemState)}

package/dist/toggle-group/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateToggleGroupProps,
     CreateToggleGroupReturn,
   } from './create-toggle-group.svelte.js';
 
   export interface ToggleGroupProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateToggleGroupProps> {
-    asChild?: AsChild<CreateToggleGroupReturn>;
-    children?: Snippet<[CreateToggleGroupReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateToggleGroupReturn>,
+      CreateToggleGroupProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/arrow-tip.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TooltipArrowTipProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TooltipArrowTipProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/arrow.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TooltipArrowProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TooltipArrowProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/content.svelte

@@ -1,26 +1,28 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface TooltipContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getTooltipContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: TooltipContentProps = $props();
-
-  let tooltip = getTooltipContext();
-
-  let mergedProps = $derived(mergeProps(props, tooltip.getContentProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TooltipContentProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getTooltipContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TooltipContentProps = $props();
+
+  let tooltip = getTooltipContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, tooltip.getContentProps(), presence.getPresenceProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div use:presence.ref {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tooltip/positioner.svelte

@@ -1,26 +1,32 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface TooltipPositionerProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getTooltipContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: TooltipPositionerProps = $props();
-
-  let tooltip = getTooltipContext();
-
-  let mergedProps = $derived(mergeProps(props, tooltip.getPositionerProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TooltipPositionerProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getTooltipContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TooltipPositionerProps = $props();
+
+  let tooltip = getTooltipContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      tooltip.getPositionerProps(),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tooltip/root.svelte

@@ -1,24 +1,32 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateTooltipProps,
-    CreateTooltipReturn,
-  } from './create-tooltip.svelte.js';
-
-  export interface TooltipProps extends CreateTooltipProps {
-    children?: Snippet<[tooltip: CreateTooltipReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {setTooltipContext} from './context.svelte.js';
-  import {createTooltip} from './create-tooltip.svelte.js';
-
-  let {children, ...props}: TooltipProps = $props();
-
-  let tooltip = createTooltip(props);
-
-  setTooltipContext(tooltip);
-</script>
-
-{@render children?.(tooltip)}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateTooltipProps,
+    CreateTooltipReturn,
+  } from './create-tooltip.svelte.js';
+
+  export interface TooltipProps extends CreateTooltipProps {
+    children?: Snippet<[CreateTooltipReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {setTooltipContext} from './context.svelte.js';
+  import {createTooltip} from './create-tooltip.svelte.js';
+
+  let {children, ...props}: TooltipProps = $props();
+
+  let tooltip = createTooltip(props);
+  let presence = createPresence({
+    get present() {
+      return tooltip.open;
+    },
+  });
+
+  setTooltipContext(tooltip);
+  setPresenceContext(presence);
+</script>
+
+{@render children?.(tooltip)}

package/dist/tooltip/trigger.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TooltipTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface TooltipTriggerProps extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/tree-view/branch-content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TreeViewBranchContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TreeViewBranchContentProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tree-view/branch-control.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TreeViewBranchControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TreeViewBranchControlProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tree-view/branch-indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TreeViewBranchIndicatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TreeViewBranchIndicatorProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/tree-view/branch-text.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TreeViewBranchTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TreeViewBranchTextProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">