ui-ingredients 0.0.25 → 0.0.27

package/dist/date-picker/view-control.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DatePickerViewControlProps extends HtmlProps<'div'> {}
+  export interface DatePickerViewControlProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerViewControlProps = $props();
+  let {asChild, children, ...props}: DatePickerViewControlProps = $props();
 
   let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getViewControlProps(viewProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/view-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 DatePickerViewTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerViewTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerViewTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerViewTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getViewTriggerProps(viewProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/date-picker/view.svelte

@@ -1,24 +1,36 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ViewProps} from '@zag-js/date-picker';
 
-  export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {}
+  export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {parts} from './anatomy.js';
   import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
 
-  let {view = 'day', children, ...props}: DatePickerViewProps = $props();
+  let {view, asChild, children, ...props}: DatePickerViewProps = $props();
 
   let datePicker = datePickerContext.get();
 
-  let attrs = $derived(mergeProps(props, parts.view.attrs));
+  let viewProps: ViewProps = $derived({
+    view: view ?? 'day',
+  });
 
-  datePickerViewPropsContext.set(() => ({view}));
+  let attrs = $derived(
+    mergeProps(props, datePicker.getViewProps(viewProps), parts.view.attrs as Record<string, any>),
+  );
+
+  datePickerViewPropsContext.set(() => viewProps);
 </script>
 
-<div hidden={datePicker.view !== view} {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div hidden={datePicker.view !== view} {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/year-select.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DatePickerYearSelectProps extends HtmlProps<'select'> {}
+  export interface DatePickerYearSelectProps extends HtmlProps<'select'> {
+    asChild?: AsChild<HtmlProps<'select'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerYearSelectProps = $props();
+  let {asChild, children, ...props}: DatePickerYearSelectProps = $props();
 
   let datePicker = datePickerContext.get();
 
@@ -30,12 +32,16 @@
   }
 </script>
 
-<select {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {#each getYears() as year}
-      <option value={year}>{year}</option>
-    {/each}
-  {/if}
-</select>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <select {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {#each getYears() as year}
+        <option value={year}>{year}</option>
+      {/each}
+    {/if}
+  </select>
+{/if}

package/dist/date-picker/year-table-cell-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 DatePickerYearTableCellTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerYearTableCellTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerYearTableCellTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerYearTableCellTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps = datePickerTableCellPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getYearTableCellTriggerProps(tableCellProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/date-picker/year-table-cell.svelte

@@ -1,26 +1,21 @@
 <script lang="ts" module>
-  import type {Assign, 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> {
+    extends Assign<Omit<HtmlProps<'td'>, 'children'>, TableCellProps> {
+    asChild?: AsChild<GenericHtmlProps, TableCellState>;
     children?: Snippet<[state: TableCellState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    value,
-    disabled,
-    columns,
-    children,
-    ...props
-  }: DatePickerYearTableCellProps = $props();
+  let {value, disabled, columns, asChild, children, ...props}: DatePickerYearTableCellProps =
+    $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps: TableCellProps = $derived({
@@ -35,6 +30,10 @@
   datePickerTableCellPropsContext.set(() => tableCellProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <td {...attrs}>
+    {@render children?.(state)}
+  </td>
+{/if}

package/dist/dialog/backdrop.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DialogBackdropProps extends HtmlProps<'div'> {}
+  export interface DialogBackdropProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
 
-  let {children, ...props}: DialogBackdropProps = $props();
+  let {asChild, children, ...props}: DialogBackdropProps = $props();
 
   let dialog = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, dialog.getBackdropProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/dialog/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 DialogCloseTriggerProps extends HtmlProps<'button'> {}
+  export interface DialogCloseTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
 
-  let {children, ...props}: DialogCloseTriggerProps = $props();
+  let {asChild, children, ...props}: DialogCloseTriggerProps = $props();
 
   let dialog = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, dialog.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/dialog/content.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DialogContentProps extends HtmlProps<'div'> {}
+  export interface DialogContentProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
 
-  let {children, ...props}: DialogContentProps = $props();
+  let {asChild, children, ...props}: DialogContentProps = $props();
 
   let dialog = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, dialog.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/dialog/description.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DialogDescriptionProps extends HtmlProps<'div'> {}
+  export interface DialogDescriptionProps extends HtmlProps<'p'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
 
-  let {children, ...props}: DialogDescriptionProps = $props();
+  let {asChild, children, ...props}: DialogDescriptionProps = $props();
 
   let dialog = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, dialog.getDescriptionProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <p {...attrs}>
+    {@render children?.()}
+  </p>
+{/if}

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

package/dist/dialog/title.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DialogTitleProps extends HtmlProps<'div'> {}
+  export interface DialogTitleProps extends HtmlProps<'h2'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
 
-  let {children, ...props}: DialogTitleProps = $props();
+  let {asChild, children, ...props}: DialogTitleProps = $props();
 
   let dialog = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, dialog.getTitleProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <h2 {...attrs}>
+    {@render children?.()}
+  </h2>
+{/if}

package/dist/dialog/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 DialogTriggerProps extends HtmlProps<'button'> {}
+  export interface DialogTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
 
-  let {children, ...props}: DialogTriggerProps = $props();
+  let {asChild, children, ...props}: DialogTriggerProps = $props();
 
   let dialog = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, dialog.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/editable/area.svelte

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

package/dist/editable/cancel-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 EditableCancelTriggerProps extends HtmlProps<'button'> {}
+  export interface EditableCancelTriggerProps 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}: EditableCancelTriggerProps = $props();
+  let {asChild, children, ...props}: EditableCancelTriggerProps = $props();
 
   let editable = editableContext.get();
 
   let attrs = $derived(mergeProps(props, editable.getCancelTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/editable/control.svelte

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

package/dist/editable/edit-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 EditableEditTriggerProps extends HtmlProps<'button'> {}
+  export interface EditableEditTriggerProps 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}: EditableEditTriggerProps = $props();
+  let {asChild, children, ...props}: EditableEditTriggerProps = $props();
 
   let editable = editableContext.get();
 
   let attrs = $derived(mergeProps(props, editable.getEditTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/editable/input.svelte

@@ -1,18 +1,24 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface EditableInputProps extends HtmlProps<'input'> {}
+  export interface EditableInputProps extends HtmlProps<'input'> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {editableContext} from './context.svelte.js';
 
-  let {...props}: EditableInputProps = $props();
+  let {asChild, ...props}: EditableInputProps = $props();
 
   let editable = editableContext.get();
 
   let attrs = $derived(mergeProps(props, editable.getInputProps()));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}