ui-ingredients 0.0.25 → 0.0.26

package/dist/date-picker/month-table-cell-trigger.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerMonthTableCellTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerMonthTableCellTriggerProps 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 {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 +19,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 {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> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: 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}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerNextTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerNextTriggerProps 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 {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 +19,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,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 DatePickerPositionerProps extends HtmlProps<'div'> {}
+  export interface DatePickerPositionerProps 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 {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,30 @@
 <script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
   import type {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?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </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,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerPrevTriggerProps 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 {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 +19,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,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 DatePickerRangeTextProps extends HtmlProps<'div'> {}
+  export interface DatePickerRangeTextProps 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 {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}
+  <div {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {datePicker.visibleRangeText.formatted}
+    {/if}
+  </div>
+{/if}

package/dist/date-picker/root.svelte

@@ -1,16 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {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?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, datePicker: 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 +46,7 @@
     onValueChange,
     onFocusChange,
     isDateUnavailable,
+    asChild,
     children,
     ...props
   }: DatePickerProps = $props();
@@ -83,6 +87,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,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 DatePickerTableBodyProps extends HtmlProps<'div'> {}
+  export interface DatePickerTableBodyProps 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 {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 +19,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getTableBodyProps(tableProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/table-head.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 DatePickerTableHeadProps extends HtmlProps<'div'> {}
+  export interface DatePickerTableHeadProps 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 {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 +19,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getTableHeadProps(tableProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/table-header.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 DatePickerTableHeaderProps extends HtmlProps<'div'> {}
+  export interface DatePickerTableHeaderProps 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 {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 +19,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getTableHeaderProps(tableProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/table-row.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 DatePickerTableRowProps extends HtmlProps<'div'> {}
+  export interface DatePickerTableRowProps 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 {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 +19,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getTableRowProps(tableProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/table.svelte

@@ -1,20 +1,22 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {TableProps} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerTableProps
-    extends Assign<HtmlProps<'div'>, Omit<TableProps, 'view'>> {}
+  export interface DatePickerTableProps extends Assign<HtmlProps<'div'>, Omit<TableProps, 'view'>> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerTriggerProps 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 {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}

package/dist/date-picker/view-control.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 DatePickerViewControlProps extends HtmlProps<'div'> {}
+  export interface DatePickerViewControlProps 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 {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 +19,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,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerViewTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerViewTriggerProps 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 {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 +19,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,37 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ViewProps} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {}
+  export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </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}