ui-ingredients 0.0.25 → 0.0.27

package/dist/timer/action-trigger.svelte

@@ -1,22 +1,27 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ActionTriggerProps} from '@zag-js/timer';
 
-  export interface TimerActionTriggerProps
-    extends Assign<HtmlProps<'button'>, ActionTriggerProps> {}
+  export interface TimerActionTriggerProps extends Assign<HtmlProps<'button'>, ActionTriggerProps> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timerContext} from './context.svelte.js';
 
-  let {action, children, ...props}: TimerActionTriggerProps = $props();
+  let {action, asChild, children, ...props}: TimerActionTriggerProps = $props();
 
   let timer = timerContext.get();
 
   let attrs = $derived(mergeProps(props, timer.getActionTriggerProps({action})));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/timer/item-label.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TimerItemLabelProps extends HtmlProps<'span'> {}
+  export interface TimerItemLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timerContext, timerItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: TimerItemLabelProps = $props();
+  let {asChild, children, ...props}: TimerItemLabelProps = $props();
 
   let timer = timerContext.get();
   let itemProps = timerItemPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, timer.getItemLabelProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/timer/item-value.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TimerItemValueProps extends HtmlProps<'span'> {}
+  export interface TimerItemValueProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timerContext, timerItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: TimerItemValueProps = $props();
+  let {asChild, children, ...props}: TimerItemValueProps = $props();
 
   let timer = timerContext.get();
   let itemProps = timerItemPropsContext.get();
@@ -16,10 +18,14 @@
   let attrs = $derived(mergeProps(props, timer.getItemValueProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {timer.formattedTime[itemProps.type]}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {timer.formattedTime[itemProps.type]}
+    {/if}
+  </div>
+{/if}

package/dist/timer/item.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/timer';
 
-  export interface TimerItemProps extends Assign<HtmlProps<'div'>, ItemProps> {}
+  export interface TimerItemProps extends Assign<HtmlProps<'div'>, ItemProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timerContext, timerItemPropsContext} from './context.svelte.js';
 
-  let {type, children, ...props}: TimerItemProps = $props();
+  let {type, asChild, children, ...props}: TimerItemProps = $props();
 
   let timer = timerContext.get();
   let itemProps = $derived({
@@ -21,6 +23,10 @@
   timerItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/timer/root.svelte

@@ -1,15 +1,16 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateTimerProps, CreateTimerReturn} from './create-timer.svelte.js';
 
   export interface TimerProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimerProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateTimerReturn>;
     children?: Snippet<[timer: CreateTimerReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timerContext} from './context.svelte.js';
   import {createTimer} from './create-timer.svelte.js';
 
@@ -22,6 +23,7 @@
     countdown,
     onTick,
     onComplete,
+    asChild,
     children,
     ...props
   }: TimerProps = $props();
@@ -42,6 +44,10 @@
   timerContext.set(timer);
 </script>
 
-<div {...attrs}>
-  {@render children?.(timer)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, timer)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(timer)}
+  </div>
+{/if}

package/dist/timer/separator.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TimerSeparatorProps extends HtmlProps<'span'> {}
+  export interface TimerSeparatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/toast/action-trigger.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ToastActionTriggerProps extends HtmlProps<'button'> {}
+  export interface ToastActionTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ToastCloseTriggerProps extends HtmlProps<'button'> {}
+  export interface ToastCloseTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ToastDescriptionProps extends HtmlProps<'div'> {}
+  export interface ToastDescriptionProps extends HtmlProps<'p'> {
+    asChild?: AsChild;
+  }
 </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}
+  <p {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {context.description}
+    {/if}
+  </p>
+{/if}

package/dist/toast/ghost-after.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ToastGhostAfterProps extends Omit<HtmlProps<'span'>, 'children'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {toastContext} from './context.svelte.js';
+
+  let {...props}: ToastGhostAfterProps = $props();
+
+  let context = toastContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getGhostAfterProps()));
+</script>
+
+<span {...attrs}></span>

package/dist/toast/ghost-after.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GhostAfter: $$__sveltets_2_IsomorphicComponent<ToastGhostAfterProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type GhostAfter = InstanceType<typeof GhostAfter>;
+export default GhostAfter;

package/dist/toast/ghost-before.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ToastGhostBeforeProps extends Omit<HtmlProps<'span'>, 'children'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {toastContext} from './context.svelte.js';
+
+  let {...props}: ToastGhostBeforeProps = $props();
+
+  let context = toastContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getGhostBeforeProps()));
+</script>
+
+<span {...attrs}></span>

package/dist/toast/ghost-before.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GhostBefore: $$__sveltets_2_IsomorphicComponent<ToastGhostBeforeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type GhostBefore = InstanceType<typeof GhostBefore>;
+export default GhostBefore;

package/dist/toast/index.d.ts

@@ -2,6 +2,8 @@ export * as Toast from './toast.js';
 export type { ToastActionTriggerProps } from './action-trigger.svelte';
 export type { ToastCloseTriggerProps } from './close-trigger.svelte';
 export type { ToastDescriptionProps } from './description.svelte';
+export type { ToastGhostAfterProps } from './ghost-after.svelte';
+export type { ToastGhostBeforeProps } from './ghost-before.svelte';
 export type { ToastProps } from './root.svelte';
 export type { ToastTitleProps } from './title.svelte';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';

package/dist/toast/root.svelte

@@ -1,28 +1,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, 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?: AsChild<GenericHtmlProps, 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,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ToastTitleProps extends HtmlProps<'div'> {}
+  export interface ToastTitleProps extends HtmlProps<'h2'> {
+    asChild?: AsChild;
+  }
 </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}
+  <h2 {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {context.title}
+    {/if}
+  </h2>
+{/if}

package/dist/toast/toast.d.ts

@@ -2,5 +2,7 @@ export { anatomy } from '@zag-js/toast';
 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 GhostAfter } from './ghost-after.svelte';
+export { default as GhostBefore } from './ghost-before.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';

package/dist/toast/toast.js

@@ -2,5 +2,7 @@ export { anatomy } from '@zag-js/toast';
 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 GhostAfter } from './ghost-after.svelte';
+export { default as GhostBefore } from './ghost-before.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';

package/dist/toast/toaster.svelte

@@ -6,22 +6,23 @@
 
   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';
 
   let {toaster, children, ...props}: ToasterProps = $props();
 
-  let [state, send] = useMachine(toaster.machine);
+  let [snapshot, send] = useMachine(toaster.machine);
 
-  let placement = $derived(state.context.placement);
-  let api = $derived(toast.group.connect(state, send, normalizeProps));
+  let placement = $derived(snapshot.context.placement);
+  let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
   let toasts = $derived(api.getToastsByPlacement(placement));
   let attrs = $derived(mergeProps(props, api.getGroupProps({placement})));
 </script>

package/dist/toggle-group/item.svelte

@@ -1,19 +1,20 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} 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<HtmlProps<'button'>>;
     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}