ui-ingredients 0.0.26 → 0.0.27

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,10 +1,10 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, 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'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, toast: CreateToastReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateToastReturn>;
     children?: Snippet<[toast: CreateToastReturn]>;
   }
 </script>

package/dist/toast/title.svelte

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

@@ -19,10 +19,10 @@
 
   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,11 +1,11 @@
 <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?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/toggle-group/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateToggleGroupProps,
@@ -8,9 +8,7 @@
 
   export interface ToggleGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateToggleGroupProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, toggleGroup: CreateToggleGroupReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateToggleGroupReturn>;
     children?: Snippet<[toggleGroup: CreateToggleGroupReturn]>;
   }
 </script>

package/dist/tooltip/arrow-tip.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TooltipArrowTipProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TooltipArrowTipProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/tooltip/arrow.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TooltipArrowProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TooltipArrowProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/tooltip/content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TooltipContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tooltip/positioner.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TooltipPositionerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tooltip/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TooltipTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TreeViewBranchContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TreeViewBranchControlProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TreeViewBranchIndicatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TreeViewBranchIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TreeViewBranchTextProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TreeViewBranchTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/tree-view/branch.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {BranchProps, BranchState} from '@zag-js/tree-view';
   import type {Snippet} from 'svelte';
 
   export interface TreeViewBranchProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, BranchProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: BranchState]>;
+    asChild?: AsChild<GenericHtmlProps, BranchState>;
     children?: Snippet<[state: BranchState]>;
   }
 </script>

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TreeViewItemIndicatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TreeViewItemTextProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TreeViewItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/tree-view/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/tree-view';
   import type {Snippet} from 'svelte';
 
   export interface TreeViewItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
+    asChild?: AsChild<GenericHtmlProps, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/tree-view/label.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TreeViewLabelProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface TreeViewLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/tree-view/root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateTreeViewProps, CreateTreeViewReturn} from './create-tree-view.svelte.js';
 
   export interface TreeViewProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTreeViewProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, treeView: CreateTreeViewReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateTreeViewReturn>;
     children?: Snippet<[treeView: CreateTreeViewReturn]>;
   }
 </script>

package/dist/tree-view/tree.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface TreeViewTreeProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
 type IntrinsicElements = keyof {
@@ -5,4 +6,9 @@ type IntrinsicElements = keyof {
 };
 export type HtmlProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
 export type GenericHtmlProps = HTMLAttributes<HTMLElement>;
+type GenericObject = Record<string, any>;
+type WithoutChildren<T> = Assign<T, {
+    children?: never;
+}>;
+export type AsChild<T extends GenericObject = GenericHtmlProps, C = never> = [C] extends [never] ? Snippet<[attrs: WithoutChildren<T>]> : Snippet<[attrs: WithoutChildren<T>, context: C]>;
 export {};

package/package.json

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