ui-ingredients 0.0.26 → 0.0.27

package/dist/date-picker/year-table-cell.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 {TableCellProps, TableCellState} from '@zag-js/date-picker';
   import type {Snippet} from 'svelte';
 
   export interface DatePickerYearTableCellProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, TableCellProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: TableCellState]>;
+    extends Assign<Omit<HtmlProps<'td'>, 'children'>, TableCellProps> {
+    asChild?: AsChild<GenericHtmlProps, TableCellState>;
     children?: Snippet<[state: TableCellState]>;
   }
 </script>
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(attrs, state)}
 {:else}
-  <div {...attrs}>
+  <td {...attrs}>
     {@render children?.(state)}
-  </div>
+  </td>
 {/if}

package/dist/dialog/backdrop.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 DialogBackdropProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/dialog/close-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 DialogCloseTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/dialog/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 DialogContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/dialog/description.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 DialogDescriptionProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface DialogDescriptionProps extends HtmlProps<'p'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <p {...attrs}>
     {@render children?.()}
-  </div>
+  </p>
 {/if}

package/dist/dialog/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 DialogTitleProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface DialogTitleProps extends HtmlProps<'h2'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <h2 {...attrs}>
     {@render children?.()}
-  </div>
+  </h2>
 {/if}

package/dist/dialog/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 DialogTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/editable/area.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 EditableAreaProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/editable/cancel-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 EditableCancelTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/editable/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 EditableControlProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/editable/edit-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 EditableEditTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/editable/input.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 EditableInputProps extends HtmlProps<'input'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'input'>>;
   }
 </script>
 

package/dist/editable/label.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 EditableLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/editable/preview.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 EditablePreviewProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

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,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 EditableSubmitTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <button type="submit" {...attrs}>
+  <button type="button" {...attrs}>
     {@render children?.()}
   </button>
 {/if}

package/dist/file-upload/dropzone.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 FileUploadDropzoneProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/file-upload/item-delete-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 FileUploadItemDeleteTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/file-upload/item-group.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 FileUploadItemGroupProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/file-upload/item-name.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 FileUploadItemNameProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface FileUploadItemNameProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,11 +21,11 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {#if children}
       {@render children()}
     {:else}
       {itemProps.file.name}
     {/if}
-  </div>
+  </span>
 {/if}

package/dist/file-upload/item-preview-image.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 FileUploadItemPreviewImageProps extends HtmlProps<'img'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'img'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'img'>>;
   }
 </script>
 

package/dist/file-upload/item-preview.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 FileUploadItemPreviewProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/file-upload/item-size-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 FileUploadItemSizeTextProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface FileUploadItemSizeTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,11 +21,11 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {#if children}
       {@render children()}
     {:else}
       {fileUpload.getFileSize(itemProps.file)}
     {/if}
-  </div>
+  </span>
 {/if}

package/dist/file-upload/item.svelte

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

package/dist/file-upload/label.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 FileUploadLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/file-upload/root.svelte

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

package/dist/hover-card/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 HoverCardArrowTipProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface HoverCardArrowTipProps 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/hover-card/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 HoverCardArrowProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface HoverCardArrowProps 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/hover-card/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 HoverCardContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/hover-card/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 HoverCardPositionerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/hover-card/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 HoverCardTriggerProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface HoverCardTriggerProps extends HtmlProps<'a'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <a {...attrs}>
     {@render children?.()}
-  </div>
+  </a>
 {/if}

package/dist/menu/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 MenuArrowTipProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface MenuArrowTipProps 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}