ui-ingredients 0.0.25 → 0.0.27

package/dist/date-picker/input.svelte

@@ -1,19 +1,25 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {InputProps} from '@zag-js/date-picker';
 
-  export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
+  export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {index, children, ...props}: DatePickerInputProps = $props();
+  let {index, asChild, children, ...props}: DatePickerInputProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getInputProps({index})));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/date-picker/label.svelte

@@ -1,21 +1,27 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {LabelProps} from '@zag-js/date-picker';
 
-  export interface DatePickerLabelProps extends Assign<HtmlProps<'label'>, LabelProps> {}
+  export interface DatePickerLabelProps extends Assign<HtmlProps<'label'>, LabelProps> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {index, children, ...props}: DatePickerLabelProps = $props();
+  let {index, asChild, children, ...props}: DatePickerLabelProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getLabelProps({index})));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/date-picker/month-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 DatePickerMonthSelectProps extends HtmlProps<'select'> {}
+  export interface DatePickerMonthSelectProps 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}: DatePickerMonthSelectProps = $props();
+  let {asChild, children, ...props}: DatePickerMonthSelectProps = $props();
 
   let datePicker = datePickerContext.get();
 
@@ -30,12 +32,16 @@
   ];
 </script>
 
-<select {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {#each months as month, index}
-      <option value={index}>{month}</option>
-    {/each}
-  {/if}
-</select>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <select {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {#each months as month, index}
+        <option value={index}>{month}</option>
+      {/each}
+    {/if}
+  </select>
+{/if}

package/dist/date-picker/month-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 DatePickerMonthTableCellTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerMonthTableCellTriggerProps 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}: DatePickerMonthTableCellTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerMonthTableCellTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps = datePickerTableCellPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getMonthTableCellTriggerProps(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/month-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 DatePickerMonthTableCellProps
-    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
-  }: DatePickerMonthTableCellProps = $props();
+  let {value, disabled, columns, asChild, children, ...props}: DatePickerMonthTableCellProps =
+    $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/date-picker/next-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 DatePickerNextTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerNextTriggerProps 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}: DatePickerNextTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerNextTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getNextTriggerProps(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/positioner.svelte

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

package/dist/date-picker/preset-trigger.svelte

@@ -1,22 +1,28 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {PresetTriggerProps} from '@zag-js/date-picker';
 
   export interface DatePickerPresetTriggerProps
-    extends Assign<HtmlProps<'button'>, PresetTriggerProps> {}
+    extends Assign<HtmlProps<'button'>, PresetTriggerProps> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {value, children, ...props}: DatePickerPresetTriggerProps = $props();
+  let {value, asChild, children, ...props}: DatePickerPresetTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getPresetTriggerProps({value})));
 </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/prev-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 DatePickerPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerPrevTriggerProps 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}: DatePickerPrevTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerPrevTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getPrevTriggerProps(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/range-text.svelte

@@ -1,24 +1,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface DatePickerRangeTextProps extends HtmlProps<'div'> {}
+  export interface DatePickerRangeTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}: DatePickerRangeTextProps = $props();
+  let {asChild, children, ...props}: DatePickerRangeTextProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getRangeTextProps()));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {datePicker.visibleRangeText.formatted}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {datePicker.visibleRangeText.formatted}
+    {/if}
+  </span>
+{/if}

package/dist/date-picker/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 {CreateDatePickerProps, CreateDatePickerReturn} from './create-date-picker.svelte.js';
 
   export interface DatePickerProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateDatePickerProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateDatePickerReturn>;
     children?: Snippet<[datePicker: CreateDatePickerReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
   import {createDatePicker} from './create-date-picker.svelte.js';
 
@@ -43,6 +44,7 @@
     onValueChange,
     onFocusChange,
     isDateUnavailable,
+    asChild,
     children,
     ...props
   }: DatePickerProps = $props();
@@ -83,6 +85,10 @@
   datePickerContext.set(datePicker);
 </script>
 
-<div {...attrs}>
-  {@render children?.(datePicker)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, datePicker)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(datePicker)}
+  </div>
+{/if}

package/dist/date-picker/table-body.svelte

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

package/dist/date-picker/table-head.svelte

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

package/dist/date-picker/table-header.svelte

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

package/dist/date-picker/table-row.svelte

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

package/dist/date-picker/table.svelte

@@ -1,20 +1,22 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {TableProps} from '@zag-js/date-picker';
 
   export interface DatePickerTableProps
-    extends Assign<HtmlProps<'div'>, Omit<TableProps, 'view'>> {}
+    extends Assign<HtmlProps<'table'>, Omit<TableProps, 'view'>> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {
     datePickerContext,
     datePickerTablePropsContext,
     datePickerViewPropsContext,
   } from './context.svelte.js';
 
-  let {id, columns, children, ...props}: DatePickerTableProps = $props();
+  let {id, columns, asChild, children, ...props}: DatePickerTableProps = $props();
 
   let datePicker = datePickerContext.get();
   let viewProps = datePickerViewPropsContext.get();
@@ -25,6 +27,10 @@
   datePickerTablePropsContext.set(() => tableProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <table {...attrs}>
+    {@render children?.()}
+  </table>
+{/if}

package/dist/date-picker/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 DatePickerTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerTriggerProps 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} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}