ui-ingredients 0.0.25 → 0.0.27

package/dist/rating-group/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 {
     CreateRatingGroupProps,
@@ -8,12 +8,13 @@
 
   export interface RatingGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRatingGroupProps> {
-    children?: Snippet<[radioGroup: CreateRatingGroupReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateRatingGroupReturn>;
+    children?: Snippet<[ratingGroup: CreateRatingGroupReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {ratingGroupContext} from './context.svelte.js';
   import {createRatingGroup} from './create-rating-group.svelte.js';
 
@@ -32,11 +33,12 @@
     translations,
     onHoverChange,
     onValueChange,
+    asChild,
     children,
     ...props
   }: RatingGroupProps = $props();
 
-  let radioGroup = createRatingGroup({
+  let ratingGroup = createRatingGroup({
     id,
     ids,
     form,
@@ -53,11 +55,15 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, radioGroup.getRootProps()));
+  let attrs = $derived(mergeProps(props, ratingGroup.getRootProps()));
 
-  ratingGroupContext.set(radioGroup);
+  ratingGroupContext.set(ratingGroup);
 </script>
 
-<div {...attrs}>
-  {@render children?.(radioGroup)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, ratingGroup)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(ratingGroup)}
+  </div>
+{/if}

package/dist/segment-group/indicator.svelte

@@ -1,22 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SegmentGroupIndicatorProps extends HtmlProps<'span'> {}
+  export interface SegmentGroupIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}: SegmentGroupIndicatorProps = $props();
+  let {asChild, children, ...props}: SegmentGroupIndicatorProps = $props();
 
   let segmentGroup = segmentGroupContext.get();
 
   let attrs = $derived(mergeProps(props, segmentGroup.getIndicatorProps(), parts.indicator.attrs));
 </script>
 
-<span {...ensureStyleIsString(attrs)}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/segment-group/item-control.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SegmentGroupItemControlProps extends HtmlProps<'div'> {}
+  export interface SegmentGroupItemControlProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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, segmentGroupItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: SegmentGroupItemControlProps = $props();
+  let {asChild, children, ...props}: SegmentGroupItemControlProps = $props();
 
   let segmentGroup = segmentGroupContext.get();
   let itemProps = segmentGroupItemPropsContext.get();
@@ -20,6 +21,10 @@
   );
 </script>
 
-<div {...ensureStyleIsString(attrs)}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/segment-group/item-hidden-input.svelte

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

package/dist/segment-group/item-text.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SegmentGroupItemTextProps extends HtmlProps<'span'> {}
+  export interface SegmentGroupItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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, segmentGroupItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: SegmentGroupItemTextProps = $props();
+  let {asChild, children, ...props}: SegmentGroupItemTextProps = $props();
 
   let segmentGroup = segmentGroupContext.get();
   let itemProps = segmentGroupItemPropsContext.get();
@@ -20,6 +21,10 @@
   );
 </script>
 
-<span {...ensureStyleIsString(attrs)}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/segment-group/item.svelte

@@ -1,17 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/radio-group';
   import type {Snippet} from 'svelte';
 
   export interface SegmentGroupItemProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, ItemProps> {
+    asChild?: AsChild<HtmlProps<'label'>, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </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, segmentGroupItemPropsContext} from './context.svelte.js';
 
@@ -21,6 +21,7 @@
     invalid,
     disabled,
     children,
+    asChild,
     ...props
   }: SegmentGroupItemProps = $props();
 
@@ -37,6 +38,10 @@
   segmentGroupItemPropsContext.set(() => itemProps);
 </script>
 
-<label {...ensureStyleIsString(attrs)}>
-  {@render children?.(state)}
-</label>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <label {...attrs}>
+    {@render children?.(state)}
+  </label>
+{/if}

package/dist/segment-group/label.svelte

@@ -1,22 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SegmentGroupLabelProps extends HtmlProps<'span'> {}
+  export interface SegmentGroupLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/segment-group/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 {
     CreateSegmentGroupProps,
@@ -8,13 +8,13 @@
 
   export interface SegmentGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSegmentGroupProps> {
+    asChild?: AsChild<GenericHtmlProps, 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 +29,7 @@
     readOnly,
     orientation,
     onValueChange,
+    asChild,
     children,
     ...props
   }: SegmentGroupProps = $props();
@@ -50,6 +51,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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SelectClearTriggerProps extends HtmlProps<'button'> {}
+  export interface SelectClearTriggerProps 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}: 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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SelectContentProps extends HtmlProps<'div'> {}
+  export interface SelectContentProps 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}: 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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SelectControlProps extends HtmlProps<'div'> {}
+  export interface SelectControlProps 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}: 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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SelectIndicatorProps extends HtmlProps<'span'> {}
+  export interface SelectIndicatorProps 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, ...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}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/select/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 SelectItemGroupLabelProps extends HtmlProps<'span'> {}
+  export interface SelectItemGroupLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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 +20,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/select/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/select';
 
   export interface SelectItemGroupProps
-    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 {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 +27,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,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SelectItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface SelectItemIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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 +18,10 @@
   let attrs = $derived(mergeProps(props, select.getItemIndicatorProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/select/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 SelectItemTextProps extends HtmlProps<'span'> {}
+  export interface SelectItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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 +18,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}
+  <span {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {select.collection.stringifyItem(itemProps.item)}
+    {/if}
+  </span>
+{/if}

package/dist/select/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/select';
   import type {Snippet} from 'svelte';
 
   export interface SelectItemProps 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 {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}