ui-ingredients 0.0.25 → 0.0.27

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

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

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

package/dist/select/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 {CreateSelectProps, CreateSelectReturn} from './create-select.svelte.js';
 
   export interface SelectProps<T>
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSelectProps<T>> {
+    asChild?: AsChild<GenericHtmlProps, CreateSelectReturn>;
     children?: Snippet<[select: CreateSelectReturn]>;
   }
 </script>
 
 <script lang="ts" generics="T">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {selectContext} from './context.svelte.js';
   import {createSelect} from './create-select.svelte.js';
 
@@ -43,6 +44,7 @@
     onInteractOutside,
     onPointerDownOutside,
     scrollToIndexFn,
+    asChild,
     children,
     ...props
   }: SelectProps<T> = $props();
@@ -78,11 +80,15 @@
     scrollToIndexFn,
   });
 
-  let attrs = $derived(mergeProps(props, select.getRootProps()));
+  let attrs = $derived(mergeProps<Record<string, any>>(props, select.getRootProps()));
 
   selectContext.set(select);
 </script>
 
-<div {...attrs}>
-  {@render children?.(select)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, select)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(select)}
+  </div>
+{/if}

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

@@ -1,26 +1,32 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SelectValueTextProps extends HtmlProps<'span'> {}
+  export interface SelectValueTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {selectContext} from './context.svelte.js';
 
-  let {children, placeholder, ...props}: SelectValueTextProps = $props();
+  let {asChild, children, placeholder, ...props}: SelectValueTextProps = $props();
 
   let select = selectContext.get();
 
   let attrs = $derived(mergeProps(props, select.getValueTextProps()));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else if select.value.length}
-    {select.valueAsString}
-  {:else}
-    {placeholder}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else if select.value.length}
+      {select.valueAsString}
+    {:else}
+      {placeholder}
+    {/if}
+  </span>
+{/if}

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

package/dist/signature-pad/current-segment-path.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SignaturePadCurrentSegmentPathProps extends HtmlProps<'path'> {}
+  export interface SignaturePadCurrentSegmentPathProps extends HtmlProps<'path'> {
+    asChild?: AsChild<HtmlProps<'path'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {signaturePadContext} from './context.svelte.js';
 
-  let {path, children, ...props}: SignaturePadCurrentSegmentPathProps = $props();
+  let {path, asChild, children, ...props}: SignaturePadCurrentSegmentPathProps = $props();
 
   let signaturePad = signaturePadContext.get();
 
@@ -23,7 +25,11 @@
 </script>
 
 {#if signaturePad.currentPath}
-  <path {...attrs}>
-    {@render children?.()}
-  </path>
+  {#if asChild}
+    {@render asChild(attrs)}
+  {:else}
+    <path {...attrs}>
+      {@render children?.()}
+    </path>
+  {/if}
 {/if}

package/dist/signature-pad/guide.svelte

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

package/dist/signature-pad/hidden-input.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {signaturePadContext} from './context.svelte.js';
 
   let {value, ...props}: SignaturePadHiddenInputProps = $props();

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

package/dist/signature-pad/root.svelte

@@ -1,5 +1,5 @@
 <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 {
     CreateSignaturePadProps,
@@ -8,12 +8,13 @@
 
   export interface SignaturePadProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSignaturePadProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateSignaturePadReturn>;
     children?: Snippet<[signaturePad: CreateSignaturePadReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {signaturePadContext} from './context.svelte.js';
   import {createSignaturePad} from './create-signature-pad.svelte.js';
 
@@ -28,6 +29,7 @@
     translations,
     onDraw,
     onDrawEnd,
+    asChild,
     children,
     ...props
   }: SignaturePadProps = $props();
@@ -50,6 +52,10 @@
   signaturePadContext.set(signaturePad);
 </script>
 
-<div {...attrs}>
-  {@render children?.(signaturePad)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, signaturePad)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(signaturePad)}
+  </div>
+{/if}

package/dist/signature-pad/segment-path.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 {SegmentPathProps} from '@zag-js/signature-pad';
 
   export interface SignaturePadSegmentPathProps
-    extends Assign<HtmlProps<'path'>, SegmentPathProps> {}
+    extends Assign<HtmlProps<'path'>, SegmentPathProps> {
+    asChild?: AsChild<HtmlProps<'path'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {signaturePadContext} from './context.svelte.js';
 
-  let {path, children, ...props}: SignaturePadSegmentPathProps = $props();
+  let {path, asChild, children, ...props}: SignaturePadSegmentPathProps = $props();
 
   let signaturePad = signaturePadContext.get();
 
   let attrs = $derived(mergeProps(props, signaturePad.getSegmentPathProps({path})));
 </script>
 
-<path {...attrs}>
-  {@render children?.()}
-</path>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <path {...attrs}>
+    {@render children?.()}
+  </path>
+{/if}

package/dist/signature-pad/segment.svelte

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

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

package/dist/slider/hidden-input.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
 
   let {...props}: SliderHiddenInputProps = $props();

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

package/dist/slider/marker-group.svelte

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