ui-ingredients 0.0.25 → 0.0.26

package/dist/segment-group/label.svelte

@@ -1,22 +1,28 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SegmentGroupLabelProps extends HtmlProps<'span'> {}
+  export interface SegmentGroupLabelProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {ensureStyleIsString} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {parts} from './anatomy.js';
   import {segmentGroupContext} from './context.svelte.js';
 
-  let {children, ...props}: SegmentGroupLabelProps = $props();
+  let {asChild, children, ...props}: SegmentGroupLabelProps = $props();
 
   let segmentGroup = segmentGroupContext.get();
 
   let attrs = $derived(mergeProps(props, segmentGroup.getLabelProps(), parts.label.attrs));
 </script>
 
-<span {...ensureStyleIsString(attrs)}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/segment-group/root.svelte

@@ -1,5 +1,5 @@
 <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 {
     CreateSegmentGroupProps,
@@ -8,13 +8,15 @@
 
   export interface SegmentGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSegmentGroupProps> {
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, segmentGroup: CreateSegmentGroupReturn]
+    >;
     children?: Snippet<[segmentGroup: CreateSegmentGroupReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {ensureStyleIsString} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {parts} from './anatomy.js';
   import {segmentGroupContext} from './context.svelte.js';
   import {createSegmentGroup} from './create-segment-group.svelte.js';
@@ -29,6 +31,7 @@
     readOnly,
     orientation,
     onValueChange,
+    asChild,
     children,
     ...props
   }: SegmentGroupProps = $props();
@@ -50,6 +53,10 @@
   segmentGroupContext.set(segmentGroup);
 </script>
 
-<div {...ensureStyleIsString(attrs)}>
-  {@render children?.(segmentGroup)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, segmentGroup)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(segmentGroup)}
+  </div>
+{/if}

package/dist/select/clear-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SelectClearTriggerProps extends HtmlProps<'button'> {}
+  export interface SelectClearTriggerProps 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 {selectContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectClearTriggerProps = $props();
+  let {asChild, children, ...props}: SelectClearTriggerProps = $props();
 
   let select = selectContext.get();
 
   let attrs = $derived(mergeProps(props, select.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/select/content.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 SelectContentProps extends HtmlProps<'div'> {}
+  export interface SelectContentProps 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 {selectContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectContentProps = $props();
+  let {asChild, children, ...props}: SelectContentProps = $props();
 
   let select = selectContext.get();
 
   let attrs = $derived(mergeProps(props, select.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

package/dist/select/hidden-select.svelte

@@ -5,7 +5,7 @@
 </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}: SelectHiddenSelectProps = $props();

package/dist/select/indicator.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 SelectIndicatorProps extends HtmlProps<'span'> {}
+  export interface SelectIndicatorProps 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 {selectContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectIndicatorProps = $props();
+  let {asChild, children, ...props}: SelectIndicatorProps = $props();
 
   let select = selectContext.get();
 
   let attrs = $derived(mergeProps(props, select.getIndicatorProps()));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/item-group-label.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 SelectItemGroupLabelProps extends HtmlProps<'span'> {}
+  export interface SelectItemGroupLabelProps 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 {selectContext, selectItemGroupPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectItemGroupLabelProps = $props();
+  let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
 
   let select = selectContext.get();
   let itemGroupProps = selectItemGroupPropsContext.get();
@@ -18,6 +21,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/item-group.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/select';
+  import type {Snippet} from 'svelte';
 
   export interface SelectItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {createUniqueId, mergeProps} from '../utils.svelte.js';
   import {selectContext, selectItemGroupPropsContext} from './context.svelte.js';
 
-  let {id, children, ...props}: SelectItemGroupProps = $props();
+  let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
 
   let select = selectContext.get();
 
@@ -26,6 +28,10 @@
   selectItemGroupPropsContext.set(() => itemGroupProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/item-indicator.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 SelectItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface SelectItemIndicatorProps 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 {selectContext, selectItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectItemIndicatorProps = $props();
+  let {asChild, children, ...props}: SelectItemIndicatorProps = $props();
 
   let select = selectContext.get();
   let itemProps = selectItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, select.getItemIndicatorProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/item-text.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 SelectItemTextProps extends HtmlProps<'span'> {}
+  export interface SelectItemTextProps 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 {selectContext, selectItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectItemTextProps = $props();
+  let {asChild, children, ...props}: SelectItemTextProps = $props();
 
   let select = selectContext.get();
   let itemProps = selectItemPropsContext.get();
@@ -16,10 +19,14 @@
   let attrs = $derived(mergeProps(props, select.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {select.collection.stringifyItem(itemProps.item)}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {select.collection.stringifyItem(itemProps.item)}
+    {/if}
+  </div>
+{/if}

package/dist/select/item.svelte

@@ -1,18 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/select';
   import type {Snippet} from 'svelte';
 
   export interface SelectItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, sate: ItemState]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {selectContext, selectItemPropsContext} from './context.svelte.js';
 
-  let {item, persistFocus, children, ...props}: SelectItemProps = $props();
+  let {item, persistFocus, asChild, children, ...props}: SelectItemProps = $props();
 
   let select = selectContext.get();
   let itemProps = $derived({
@@ -26,6 +27,10 @@
   selectItemPropsContext.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/select/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SelectLabelProps extends HtmlProps<'label'> {}
+  export interface SelectLabelProps extends HtmlProps<'label'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
 </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,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 SelectListProps extends HtmlProps<'div'> {}
+  export interface SelectListProps 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 {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,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 SelectPositionerProps extends HtmlProps<'div'> {}
+  export interface SelectPositionerProps 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 {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 {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?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, select: 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,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SelectTriggerProps extends HtmlProps<'button'> {}
+  export interface SelectTriggerProps 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 {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,33 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SelectValueTextProps extends HtmlProps<'span'> {}
+  export interface SelectValueTextProps 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 {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}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else if select.value.length}
+      {select.valueAsString}
+    {:else}
+      {placeholder}
+    {/if}
+  </div>
+{/if}