ui-ingredients 0.0.25 → 0.0.27

package/dist/tags-input/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 TagsInputItemTextProps extends HtmlProps<'span'> {}
+  export interface TagsInputItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: TagsInputItemTextProps = $props();
+  let {asChild, children, ...props}: TagsInputItemTextProps = $props();
 
   let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, tagsInput.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/tags-input/item.svelte

@@ -1,26 +1,20 @@
 <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/tags-input';
   import type {Snippet} from 'svelte';
 
   export interface TagsInputItemProps
     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 {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    index,
-    value,
-    disabled,
-    children,
-    ...props
-  }: TagsInputItemProps = $props();
+  let {index, value, disabled, asChild, children, ...props}: TagsInputItemProps = $props();
 
   let tagsInput = tagsInputContext.get();
   let itemProps = $derived({
@@ -35,6 +29,10 @@
   tagsInputItemPropsContext.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/tags-input/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 TagsInputLabelProps extends HtmlProps<'label'> {}
+  export interface TagsInputLabelProps extends HtmlProps<'label'> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
 
-  let {children, ...props}: TagsInputLabelProps = $props();
+  let {asChild, children, ...props}: TagsInputLabelProps = $props();
 
   let tagsInput = tagsInputContext.get();
 
   let attrs = $derived(mergeProps(props, tagsInput.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/tags-input/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 {CreateTagsInputProps, CreateTagsInputReturn} from './create-tags-input.svelte.js';
 
   export interface TagsInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTagsInputProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateTagsInputReturn>;
     children?: Snippet<[tagsInput: CreateTagsInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
   import {createTagsInputt} from './create-tags-input.svelte.js';
 
@@ -42,6 +43,7 @@
     onHighlightChange,
     onInputValueChange,
     onPointerDownOutside,
+    asChild,
     children,
     ...props
   }: TagsInputProps = $props();
@@ -76,11 +78,15 @@
     onPointerDownOutside,
   });
 
-  let attrs = $derived(mergeProps(props, tagsInput.getRootProps()));
+  let attrs = $derived<Record<string, any>>(mergeProps(props, tagsInput.getRootProps()));
 
   tagsInputContext.set(tagsInput);
 </script>
 
-<div {...attrs}>
-  {@render children?.(tagsInput)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, tagsInput)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(tagsInput)}
+  </div>
+{/if}

package/dist/time-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 TimePickerClearTriggerProps extends HtmlProps<'button'> {}
+  export interface TimePickerClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {children, ...props}: TimePickerClearTriggerProps = $props();
+  let {asChild, children, ...props}: TimePickerClearTriggerProps = $props();
 
   let timePicker = timePickerContext.get();
 
   let attrs = $derived(mergeProps(props, timePicker.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/time-picker/column.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 {ColumnProps} from '@zag-js/time-picker';
 
-  export interface TimePickerColumnProps extends Assign<HtmlProps<'div'>, ColumnProps> {}
+  export interface TimePickerColumnProps extends Assign<HtmlProps<'div'>, ColumnProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {unit, children, ...props}: TimePickerColumnProps = $props();
+  let {unit, asChild, children, ...props}: TimePickerColumnProps = $props();
 
   let timePicker = timePickerContext.get();
 
   let attrs = $derived(mergeProps(props, timePicker.getColumnProps({unit})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

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

package/dist/time-picker/hour-cell.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 {CellProps} from '@zag-js/time-picker';
 
-  export interface TimePickerHourCellProps extends Assign<HtmlProps<'div'>, CellProps> {}
+  export interface TimePickerHourCellProps extends Assign<HtmlProps<'div'>, CellProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {value, children, ...props}: TimePickerHourCellProps = $props();
+  let {value, asChild, children, ...props}: TimePickerHourCellProps = $props();
 
   let timePicker = timePickerContext.get();
 
   let attrs = $derived(mergeProps(props, timePicker.getHourCellProps({value})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

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

package/dist/time-picker/minute-cell.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 {CellProps} from '@zag-js/time-picker';
 
-  export interface TimePickerMinuteCellProps extends Assign<HtmlProps<'div'>, CellProps> {}
+  export interface TimePickerMinuteCellProps extends Assign<HtmlProps<'div'>, CellProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {value, children, ...props}: TimePickerMinuteCellProps = $props();
+  let {value, asChild, children, ...props}: TimePickerMinuteCellProps = $props();
 
   let timePicker = timePickerContext.get();
 
   let attrs = $derived(mergeProps(props, timePicker.getMinuteCellProps({value})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/time-picker/period-cell.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {PeriodCellProps} from '@zag-js/time-picker';
 
-  export interface TimePickerPeriodCellProps extends Assign<HtmlProps<'div'>, PeriodCellProps> {}
+  export interface TimePickerPeriodCellProps extends Assign<HtmlProps<'div'>, PeriodCellProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {value, children, ...props}: TimePickerPeriodCellProps = $props();
+  let {value, asChild, children, ...props}: TimePickerPeriodCellProps = $props();
 
   let timePicker = timePickerContext.get();
 
@@ -23,6 +25,10 @@
   );
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

package/dist/time-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 {CreateTimePickerProps, CreateTimePickerReturn} from './create-time-picker.svelte.js';
 
   export interface TimePickerProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimePickerProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateTimePickerReturn>;
     children?: Snippet<[timePicker: CreateTimePickerReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
   import {createTimePicker} from './create-time-picker.svelte.js';
 
@@ -34,6 +35,7 @@
     onOpenChange,
     onValueChange,
     onFocusChange,
+    asChild,
     children,
     ...props
   }: TimePickerProps = $props();
@@ -65,6 +67,10 @@
   timePickerContext.set(timePicker);
 </script>
 
-<div {...attrs}>
-  {@render children?.(timePicker)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, timePicker)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(timePicker)}
+  </div>
+{/if}

package/dist/time-picker/second-cell.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 {CellProps} from '@zag-js/time-picker';
 
-  export interface TimePickerSecondCellProps extends Assign<HtmlProps<'div'>, CellProps> {}
+  export interface TimePickerSecondCellProps extends Assign<HtmlProps<'div'>, CellProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {value, children, ...props}: TimePickerSecondCellProps = $props();
+  let {value, asChild, children, ...props}: TimePickerSecondCellProps = $props();
 
   let timePicker = timePickerContext.get();
 
   let attrs = $derived(mergeProps(props, timePicker.getSecondCellProps({value})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/time-picker/spacer.svelte

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

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