ui-ingredients 0.0.25 → 0.0.27

package/dist/combobox/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 ComboboxControlProps extends HtmlProps<'div'> {}
+  export interface ComboboxControlProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxControlProps = $props();
+  let {asChild, children, ...props}: ComboboxControlProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getControlProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/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 ComboboxInputProps extends HtmlProps<'input'> {}
+  export interface ComboboxInputProps extends HtmlProps<'input'> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {...props}: ComboboxInputProps = $props();
+  let {asChild, ...props}: ComboboxInputProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getInputProps()));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/combobox/item-group-label.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ComboboxItemGroupLabelProps extends HtmlProps<'span'> {}
+  export interface ComboboxItemGroupLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxItemGroupLabelProps = $props();
+  let {asChild, children, ...props}: ComboboxItemGroupLabelProps = $props();
 
   let combobox = comboboxContext.get();
   let itemGroupProps = comboboxItemGroupPropsContext.get();
@@ -23,6 +25,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/combobox/item-group.svelte

@@ -1,17 +1,18 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/combobox';
 
   export interface ComboboxItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {createUniqueId, mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
 
-  let {id, children, ...props}: ComboboxItemGroupProps = $props();
+  let {id, asChild, children, ...props}: ComboboxItemGroupProps = $props();
 
   let combobox = comboboxContext.get();
 
@@ -26,6 +27,10 @@
   comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/item-indicator.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ComboboxItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface ComboboxItemIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxItemIndicatorProps = $props();
+  let {asChild, children, ...props}: ComboboxItemIndicatorProps = $props();
 
   let combobox = comboboxContext.get();
   let itemProps = comboboxItemPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, combobox.getItemIndicatorProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/combobox/item-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 ComboboxItemTextProps extends HtmlProps<'span'> {}
+  export interface ComboboxItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxItemTextProps = $props();
+  let {asChild, children, ...props}: ComboboxItemTextProps = $props();
 
   let combobox = comboboxContext.get();
   let itemProps = comboboxItemPropsContext.get();
@@ -16,10 +18,14 @@
   let attrs = $derived(mergeProps(props, combobox.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {combobox.collection.stringifyItem(itemProps.item)}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {combobox.collection.stringifyItem(itemProps.item)}
+    {/if}
+  </span>
+{/if}

package/dist/combobox/item.svelte

@@ -1,18 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/combobox';
   import type {Snippet} from 'svelte';
 
   export interface ComboboxItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: AsChild<GenericHtmlProps, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
-  let {children, item, persistFocus, ...props}: ComboboxItemProps = $props();
+  let {item, persistFocus, asChild, children, ...props}: ComboboxItemProps = $props();
 
   let combobox = comboboxContext.get();
   let itemProps = $derived({
@@ -26,6 +27,10 @@
   comboboxItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/combobox/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 ComboboxLabelProps extends HtmlProps<'label'> {}
+  export interface ComboboxLabelProps extends HtmlProps<'label'> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxLabelProps = $props();
+  let {asChild, children, ...props}: ComboboxLabelProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/combobox/list.svelte

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

package/dist/combobox/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 ComboboxPositionerProps extends HtmlProps<'div'> {}
+  export interface ComboboxPositionerProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxPositionerProps = $props();
+  let {asChild, children, ...props}: ComboboxPositionerProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/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 {CreateComboboxProps, CreateComboboxReturn} from './create-combobox.svelte.js';
 
   export interface ComboboxProps<T>
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateComboboxProps<T>> {
+    asChild?: AsChild<GenericHtmlProps, CreateComboboxReturn>;
     children?: Snippet<[combobox: CreateComboboxReturn]>;
   }
 </script>
 
 <script lang="ts" generics="T">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
 
@@ -56,6 +57,7 @@
     onPointerDownOutside,
     getSelectionValue,
     scrollToIndexFn,
+    asChild,
     children,
     ...props
   }: ComboboxProps<T> = $props();
@@ -109,6 +111,10 @@
   comboboxContext.set(combobox);
 </script>
 
-<div {...attrs}>
-  {@render children?.(combobox)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, combobox)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(combobox)}
+  </div>
+{/if}

package/dist/combobox/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 ComboboxTriggerProps extends HtmlProps<'button'> {}
+  export interface ComboboxTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxTriggerProps = $props();
+  let {asChild, children, ...props}: ComboboxTriggerProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.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/clear-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 DatePickerClearTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerClearTriggerProps 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}: DatePickerClearTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerClearTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getClearTriggerProps()));
 </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/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 DatePickerContentProps extends HtmlProps<'div'> {}
+  export interface DatePickerContentProps 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}: DatePickerContentProps = $props();
+  let {asChild, children, ...props}: DatePickerContentProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

package/dist/date-picker/create-date-picker.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { GenericHtmlProps } from '../types.js';
 import * as datePicker from '@zag-js/date-picker';
 type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
 export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
@@ -9,6 +10,7 @@ export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted>
     defaultOpen?: boolean;
 }
 export interface CreateDatePickerReturn extends datePicker.Api {
+    getViewProps(props: datePicker.ViewProps): GenericHtmlProps;
 }
 export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
 export {};

package/dist/date-picker/create-date-picker.svelte.js

@@ -19,6 +19,16 @@ export function createDatePicker(props) {
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = datePicker.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getViewProps(props) {
+                return {
+                    hidden: o.view !== props.view,
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/date-picker/day-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 DatePickerDayTableCellTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerDayTableCellTriggerProps 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, datePickerDayTableCellPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerDayTableCellTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerDayTableCellTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps = datePickerDayTableCellPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getDayTableCellTriggerProps(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/day-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 {DayTableCellProps, DayTableCellState} from '@zag-js/date-picker';
   import type {Snippet} from 'svelte';
 
   export interface DatePickerDayTableCellProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, DayTableCellProps> {
+    extends Assign<Omit<HtmlProps<'td'>, 'children'>, DayTableCellProps> {
+    asChild?: AsChild<GenericHtmlProps, DayTableCellState>;
     children?: Snippet<[state: DayTableCellState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    value,
-    disabled,
-    visibleRange,
-    children,
-    ...props
-  }: DatePickerDayTableCellProps = $props();
+  let {value, disabled, visibleRange, asChild, children, ...props}: DatePickerDayTableCellProps =
+    $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps: DayTableCellProps = $derived({
@@ -35,6 +30,10 @@
   datePickerDayTableCellPropsContext.set(() => tableCellProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <td {...attrs}>
+    {@render children?.(state)}
+  </td>
+{/if}