ui-ingredients 0.0.25 → 0.0.26

package/dist/timer/separator.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TimerSeparatorProps extends HtmlProps<'span'> {}
+  export interface TimerSeparatorProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timerContext} from './context.svelte.js';
 
-  let {children, ...props}: TimerSeparatorProps = $props();
+  let {asChild, children, ...props}: TimerSeparatorProps = $props();
 
   let timer = timerContext.get();
 
   let attrs = $derived(mergeProps(props, timer.getSeparatorProps()));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/toast/action-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ToastActionTriggerProps extends HtmlProps<'button'> {}
+  export interface ToastActionTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toastContext} from './context.svelte.js';
 
-  let {children, ...props}: ToastActionTriggerProps = $props();
+  let {asChild, children, ...props}: ToastActionTriggerProps = $props();
 
   let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getActionTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/toast/actor.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-  import * as toast from '@zag-js/toast';
+  import * as toast$ from '@zag-js/toast';
   import type {Snippet} from 'svelte';
   import {toastContext} from './context.svelte.js';
   import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
 
   interface Props {
-    actor: toast.Service;
-    children$: Snippet<[api: CreateToastReturn]>;
+    actor: toast$.Service;
+    children$: Snippet<[toast: CreateToastReturn]>;
   }
 
   let {actor, children$}: Props = $props();
 
-  let context = createToast(actor);
+  let toast = createToast(actor);
 
-  toastContext.set(context);
+  toastContext.set(toast);
 </script>
 
-{@render children$(context)}
+{@render children$(toast)}

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

@@ -1,4 +1,4 @@
-import * as toast from '@zag-js/toast';
+import * as toast$ from '@zag-js/toast';
 import type { Snippet } from 'svelte';
 import { type CreateToastReturn } from './create-toast.svelte.js';
 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> {
@@ -15,8 +15,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const Actor: $$__sveltets_2_IsomorphicComponent<{
-    actor: toast.Service;
-    children$: Snippet<[api: CreateToastReturn]>;
+    actor: toast$.Service;
+    children$: Snippet<[toast: CreateToastReturn]>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/dist/toast/close-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ToastCloseTriggerProps extends HtmlProps<'button'> {}
+  export interface ToastCloseTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toastContext} from './context.svelte.js';
 
-  let {children, ...props}: ToastCloseTriggerProps = $props();
+  let {asChild, children, ...props}: ToastCloseTriggerProps = $props();
 
   let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/toast/description.svelte

@@ -1,24 +1,31 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ToastDescriptionProps extends HtmlProps<'div'> {}
+  export interface ToastDescriptionProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toastContext} from './context.svelte.js';
 
-  let {children, ...props}: ToastDescriptionProps = $props();
+  let {asChild, children, ...props}: ToastDescriptionProps = $props();
 
   let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.description}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {context.description}
+    {/if}
+  </div>
+{/if}

package/dist/toast/root.svelte

@@ -1,28 +1,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateToastReturn} from './create-toast.svelte.js';
 
   export interface ToastProps extends Omit<HtmlProps<'div'>, 'children'> {
-    children?: Snippet<[api: CreateToastReturn]>;
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, toast: CreateToastReturn]>;
+    children?: Snippet<[toast: CreateToastReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toastContext} from './context.svelte.js';
 
-  let {children, ...props}: ToastProps = $props();
+  let {asChild, children, ...props}: ToastProps = $props();
 
-  let context = toastContext.get();
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let toast = toastContext.get();
+  let attrs = $derived(mergeProps(props, toast.getRootProps()));
 </script>
 
-<div {...attrs}>
-  <div {...context.getGhostBeforeProps()}></div>
-
-  {@render children?.(context)}
-
-  <div {...context.getGhostAfterProps()}></div>
-</div>
+{#if asChild}
+  {@render asChild(attrs, toast)}
+{:else}
+  <div {...attrs}>
+    <div {...toast.getGhostBeforeProps()}></div>
+    {@render children?.(toast)}
+    <div {...toast.getGhostAfterProps()}></div>
+  </div>
+{/if}

package/dist/toast/title.svelte

@@ -1,24 +1,31 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ToastTitleProps extends HtmlProps<'div'> {}
+  export interface ToastTitleProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toastContext} from './context.svelte.js';
 
-  let {children, ...props}: ToastTitleProps = $props();
+  let {asChild, children, ...props}: ToastTitleProps = $props();
 
   let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTitleProps()));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.title}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {context.title}
+    {/if}
+  </div>
+{/if}

package/dist/toast/toaster.svelte

@@ -6,13 +6,14 @@
 
   export interface ToasterProps extends Omit<HtmlProps<'div'>, 'children'> {
     toaster: CreateToasterReturn;
-    children: Snippet<[api: CreateToastReturn]>;
+    children: Snippet<[toast: CreateToastReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {Portal} from '../portal/index.js';
-  import {mergeProps, normalizeProps, useMachine} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
+  import {normalizeProps, useMachine} from '@zag-js/svelte';
   import * as toast from '@zag-js/toast';
   import ToastActor from './actor.svelte';
 

package/dist/toggle-group/item.svelte

@@ -5,15 +5,16 @@
 
   export interface ToggleGroupItemProps
     extends Assign<Omit<HtmlProps<'button'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toggleGroupContext} from './context.svelte.js';
 
-  let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
+  let {value, disabled, asChild, children, ...props}: ToggleGroupItemProps = $props();
 
   let toggleGroup = toggleGroupContext.get();
   let itemProps = $derived({
@@ -25,6 +26,10 @@
   let attrs = $derived(mergeProps(props, toggleGroup.getItemProps(itemProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.(state)}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.(state)}
+  </button>
+{/if}

package/dist/toggle-group/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateToggleGroupProps,
@@ -8,12 +8,15 @@
 
   export interface ToggleGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateToggleGroupProps> {
-    children?: Snippet<[api: CreateToggleGroupReturn]>;
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, toggleGroup: CreateToggleGroupReturn]
+    >;
+    children?: Snippet<[toggleGroup: CreateToggleGroupReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {toggleGroupContext} from './context.svelte.js';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
 
@@ -27,6 +30,7 @@
     rovingFocus,
     orientation,
     onValueChange,
+    asChild,
     children,
     ...props
   }: ToggleGroupProps = $props();
@@ -48,6 +52,10 @@
   toggleGroupContext.set(toggleGroup);
 </script>
 
-<div {...attrs}>
-  {@render children?.(toggleGroup)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, toggleGroup)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(toggleGroup)}
+  </div>
+{/if}

package/dist/tooltip/arrow-tip.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TooltipArrowTipProps extends HtmlProps<'div'> {}
+  export interface TooltipArrowTipProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tooltipContext} from './context.svelte.js';
 
-  let {children, ...props}: TooltipArrowTipProps = $props();
+  let {asChild, children, ...props}: TooltipArrowTipProps = $props();
 
   let tooltip = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, tooltip.getArrowTipProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tooltip/arrow.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TooltipArrowProps extends HtmlProps<'div'> {}
+  export interface TooltipArrowProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tooltipContext} from './context.svelte.js';
 
-  let {children, ...props}: TooltipArrowProps = $props();
+  let {asChild, children, ...props}: TooltipArrowProps = $props();
 
   let tooltip = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, tooltip.getArrowProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tooltip/content.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TooltipContentProps extends HtmlProps<'div'> {}
+  export interface TooltipContentProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tooltipContext} from './context.svelte.js';
 
-  let {children, ...props}: TooltipContentProps = $props();
+  let {asChild, children, ...props}: TooltipContentProps = $props();
 
   let tooltip = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, tooltip.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tooltip/positioner.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TooltipPositionerProps extends HtmlProps<'div'> {}
+  export interface TooltipPositionerProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tooltipContext} from './context.svelte.js';
 
-  let {children, ...props}: TooltipPositionerProps = $props();
+  let {asChild, children, ...props}: TooltipPositionerProps = $props();
 
   let tooltip = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, tooltip.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tooltip/trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TooltipTriggerProps extends HtmlProps<'button'> {}
+  export interface TooltipTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tooltipContext} from './context.svelte.js';
 
-  let {children, ...props}: TooltipTriggerProps = $props();
+  let {asChild, children, ...props}: TooltipTriggerProps = $props();
 
   let tooltip = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, tooltip.getTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewBranchContentProps extends HtmlProps<'div'> {}
+  export interface TreeViewBranchContentProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewBranchContentProps = $props();
+  let {asChild, children, ...props}: TreeViewBranchContentProps = $props();
 
   let treeView = treeViewContext.get();
   let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getBranchContentProps(branchProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewBranchControlProps extends HtmlProps<'div'> {}
+  export interface TreeViewBranchControlProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewBranchControlProps = $props();
+  let {asChild, children, ...props}: TreeViewBranchControlProps = $props();
 
   let treeView = treeViewContext.get();
   let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getBranchControlProps(branchProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}