ui-ingredients 0.0.25 → 0.0.27

package/dist/editable/label.svelte

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

package/dist/editable/preview.svelte

@@ -1,24 +1,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface EditablePreviewProps extends HtmlProps<'div'> {}
+  export interface EditablePreviewProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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/root.svelte

@@ -1,21 +1,90 @@
 <script lang="ts" module>
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateEditableProps, CreateEditableReturn} from './create-editable.svelte.js';
 
-  export interface EditableProps extends CreateEditableProps {
+  export interface EditableProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateEditableProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateEditableReturn>;
     children?: Snippet<[editable: CreateEditableReturn]>;
   }
 </script>
 
 <script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
   import {editableContext} from './context.svelte.js';
   import {createEditable} from './create-editable.svelte.js';
 
-  let {children, ...props}: EditableProps = $props();
+  let {
+    id,
+    ids,
+    name,
+    form,
+    edit,
+    value,
+    invalid,
+    readOnly,
+    required,
+    disabled,
+    maxLength,
+    submitMode,
+    autoResize,
+    defaultEdit,
+    placeholder,
+    finalFocusEl,
+    translations,
+    selectOnFocus,
+    onEditChange,
+    onValueChange,
+    onValueCommit,
+    onValueRevert,
+    activationMode,
+    onFocusOutside,
+    onInteractOutside,
+    onPointerDownOutside,
+    asChild,
+    children,
+    ...props
+  }: EditableProps = $props();
 
-  let editable = createEditable(props);
+  let editable = createEditable({
+    id,
+    ids,
+    name,
+    form,
+    edit,
+    value: $state.snapshot(value),
+    invalid,
+    readOnly,
+    required,
+    disabled,
+    maxLength,
+    submitMode,
+    autoResize,
+    defaultEdit,
+    placeholder,
+    finalFocusEl,
+    translations,
+    selectOnFocus,
+    onEditChange,
+    onValueChange,
+    onValueCommit,
+    onValueRevert,
+    activationMode,
+    onFocusOutside,
+    onInteractOutside,
+    onPointerDownOutside,
+  });
+
+  let attrs = $derived(mergeProps(props, editable.getRootProps()));
 
   editableContext.set(editable);
 </script>
 
-{@render children?.(editable)}
+{#if asChild}
+  {@render asChild(attrs, editable)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(editable)}
+  </div>
+{/if}

package/dist/editable/submit-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 EditableSubmitTriggerProps extends HtmlProps<'button'> {}
+  export interface EditableSubmitTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/file-upload/dropzone.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadDropzoneProps extends HtmlProps<'div'> {}
+  export interface FileUploadDropzoneProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadItemDeleteTriggerProps extends HtmlProps<'button'> {}
+  export interface FileUploadItemDeleteTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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 +18,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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadItemGroupProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemGroupProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadItemNameProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemNameProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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 +18,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}
+  <span {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {itemProps.file.name}
+    {/if}
+  </span>
+{/if}

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

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadItemPreviewImageProps extends HtmlProps<'img'> {}
+  export interface FileUploadItemPreviewImageProps extends HtmlProps<'img'> {
+    asChild?: AsChild<HtmlProps<'img'>>;
+  }
 </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 +26,8 @@
   });
 </script>
 
-<img {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <img {...attrs} />
+{/if}

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

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadItemPreviewProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemPreviewProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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 +18,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,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadItemSizeTextProps extends HtmlProps<'div'> {}
+  export interface FileUploadItemSizeTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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 +18,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}
+  <span {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {fileUpload.getFileSize(itemProps.file)}
+    {/if}
+  </span>
+{/if}

package/dist/file-upload/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/file-upload';
 
-  export interface FileUploadItemProps extends Assign<HtmlProps<'div'>, ItemProps> {}
+  export interface FileUploadItemProps extends Assign<HtmlProps<'div'>, ItemProps> {
+    asChild?: AsChild;
+  }
 </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 +23,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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface FileUploadLabelProps extends HtmlProps<'label'> {}
+  export interface FileUploadLabelProps extends HtmlProps<'label'> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </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

@@ -1,16 +1,17 @@
 <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 {CreateFileUploadProps, CreateFileUploadReturn} from './create-file-upload.svelte.js';
 
   export interface FileUploadProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateFileUploadProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateFileUploadReturn>;
     children?: Snippet<[fileUpload: CreateFileUploadReturn]>;
   }
 </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';
 
@@ -33,6 +34,7 @@
     onFileChange,
     onFileReject,
     translations,
+    asChild,
     children,
     ...props
   }: FileUploadProps = $props();
@@ -63,6 +65,10 @@
   fileUploadContext.set(fileUpload);
 </script>
 
-<div {...attrs}>
-  {@render children?.(fileUpload)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, fileUpload)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(fileUpload)}
+  </div>
+{/if}

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