ui-ingredients 0.0.24 → 0.0.26

package/dist/editable/preview.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 EditablePreviewProps extends HtmlProps<'div'> {}
+  export interface EditablePreviewProps 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 {editableContext} from './context.svelte.js';
 
-  let {children, ...props}: EditablePreviewProps = $props();
+  let {asChild, children, ...props}: EditablePreviewProps = $props();
 
   let editable = editableContext.get();
 
   let attrs = $derived(mergeProps(props, editable.getPreviewProps()));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {editable.value}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {editable.value}
+    {/if}
+  </div>
+{/if}

package/dist/editable/submit-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface EditableSubmitTriggerProps extends HtmlProps<'button'> {}
+  export interface EditableSubmitTriggerProps 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 {editableContext} from './context.svelte.js';
 
-  let {children, ...props}: EditableSubmitTriggerProps = $props();
+  let {asChild, children, ...props}: EditableSubmitTriggerProps = $props();
 
   let editable = editableContext.get();
 
   let attrs = $derived(mergeProps(props, editable.getSubmitTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="submit" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/file-upload/dropzone.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 FileUploadDropzoneProps extends HtmlProps<'div'> {}
+  export interface FileUploadDropzoneProps 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 {fileUploadContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadDropzoneProps = $props();
+  let {asChild, children, ...props}: FileUploadDropzoneProps = $props();
 
   let fileUpload = fileUploadContext.get();
 
   let attrs = $derived(mergeProps(props, fileUpload.getDropzoneProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/file-upload/hidden-input.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {fileUploadContext} from './context.svelte.js';
 
   let {...props}: FileUploadHiddenInputProps = $props();

package/dist/file-upload/item-delete-trigger.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface FileUploadItemDeleteTriggerProps extends HtmlProps<'button'> {}
+  export interface FileUploadItemDeleteTriggerProps 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 {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadItemDeleteTriggerProps = $props();
+  let {asChild, children, ...props}: FileUploadItemDeleteTriggerProps = $props();
 
   let fileUpload = fileUploadContext.get();
   let itemProps = fileUploadItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, fileUpload.getItemDeleteTriggerProps(itemProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/file-upload/item-group.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 FileUploadItemGroupProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemGroupProps 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 {fileUploadContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadItemGroupProps = $props();
+  let {asChild, children, ...props}: FileUploadItemGroupProps = $props();
 
   let fileUpload = fileUploadContext.get();
 
   let attrs = $derived(mergeProps(props, fileUpload.getItemGroupProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/file-upload/item-name.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 FileUploadItemNameProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemNameProps 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 {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadItemNameProps = $props();
+  let {asChild, children, ...props}: FileUploadItemNameProps = $props();
 
   let fileUpload = fileUploadContext.get();
   let itemProps = fileUploadItemPropsContext.get();
@@ -16,10 +19,14 @@
   let attrs = $derived(mergeProps(props, fileUpload.getItemNameProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {itemProps.file.name}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {itemProps.file.name}
+    {/if}
+  </div>
+{/if}

package/dist/file-upload/item-preview-image.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface FileUploadItemPreviewImageProps extends HtmlProps<'img'> {}
+  export interface FileUploadItemPreviewImageProps extends HtmlProps<'img'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'img'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
 
-  let {...props}: FileUploadItemPreviewImageProps = $props();
+  let {asChild, ...props}: FileUploadItemPreviewImageProps = $props();
 
   let url = $state('');
 
@@ -24,4 +27,8 @@
   });
 </script>
 
-<img {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <img {...attrs} />
+{/if}

package/dist/file-upload/item-preview.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 FileUploadItemPreviewProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemPreviewProps 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 {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadItemPreviewProps = $props();
+  let {asChild, children, ...props}: FileUploadItemPreviewProps = $props();
 
   let fileUpload = fileUploadContext.get();
   let itemProps = fileUploadItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, fileUpload.getItemPreviewProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/file-upload/item-size-text.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 FileUploadItemSizeTextProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemSizeTextProps 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 {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadItemSizeTextProps = $props();
+  let {asChild, children, ...props}: FileUploadItemSizeTextProps = $props();
 
   let fileUpload = fileUploadContext.get();
   let itemProps = fileUploadItemPropsContext.get();
@@ -16,10 +19,14 @@
   let attrs = $derived(mergeProps(props, fileUpload.getItemSizeTextProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {fileUpload.getFileSize(itemProps.file)}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {fileUpload.getFileSize(itemProps.file)}
+    {/if}
+  </div>
+{/if}

package/dist/file-upload/item.svelte

@@ -1,15 +1,18 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/file-upload';
+  import type {Snippet} from 'svelte';
 
-  export interface FileUploadItemProps extends Assign<HtmlProps<'div'>, ItemProps> {}
+  export interface FileUploadItemProps extends Assign<HtmlProps<'div'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
 
-  let {file, children, ...props}: FileUploadItemProps = $props();
+  let {file, asChild, children, ...props}: FileUploadItemProps = $props();
 
   let fileUpload = fileUploadContext.get();
   let itemProps: ItemProps = $derived({
@@ -21,6 +24,10 @@
   fileUploadItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/file-upload/label.svelte

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

package/dist/file-upload/root.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {fileUploadContext} from './context.svelte.js';
   import {createFileUpload} from './create-file-upload.svelte.js';
 

package/dist/file-upload/trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface FileUploadTriggerProps extends HtmlProps<'button'> {}
+  export interface FileUploadTriggerProps 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 {fileUploadContext} from './context.svelte.js';
 
-  let {children, ...props}: FileUploadTriggerProps = $props();
+  let {asChild, children, ...props}: FileUploadTriggerProps = $props();
 
   let fileUpload = fileUploadContext.get();
 
   let attrs = $derived(mergeProps(props, fileUpload.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/hover-card/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 HoverCardArrowTipProps extends HtmlProps<'div'> {}
+  export interface HoverCardArrowTipProps 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 {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardArrowTipProps = $props();
+  let {asChild, children, ...props}: HoverCardArrowTipProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getArrowTipProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/hover-card/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 HoverCardArrowProps extends HtmlProps<'div'> {}
+  export interface HoverCardArrowProps 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 {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardArrowProps = $props();
+  let {asChild, children, ...props}: HoverCardArrowProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getArrowProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/hover-card/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 HoverCardContentProps extends HtmlProps<'div'> {}
+  export interface HoverCardContentProps 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 {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardContentProps = $props();
+  let {asChild, children, ...props}: HoverCardContentProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/hover-card/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 HoverCardPositionerProps extends HtmlProps<'div'> {}
+  export interface HoverCardPositionerProps 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 {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardPositionerProps = $props();
+  let {asChild, children, ...props}: HoverCardPositionerProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/hover-card/trigger.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 HoverCardTriggerProps extends HtmlProps<'a'> {}
+  export interface HoverCardTriggerProps 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 {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardTriggerProps = $props();
+  let {asChild, children, ...props}: HoverCardTriggerProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getTriggerProps()));
 </script>
 
-<a {...attrs}>
-  {@render children?.()}
-</a>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}