ui-ingredients 0.0.25 → 0.0.26

package/dist/qr-code/pattern.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface QRCodePatternProps extends HtmlProps<'path'> {}
+  export interface QRCodePatternProps extends HtmlProps<'path'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'path'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {qrCodeContext} from './context.svelte.js';
 
-  let {children, ...props}: QRCodePatternProps = $props();
+  let {asChild, children, ...props}: QRCodePatternProps = $props();
 
   let qrCode = qrCodeContext.get();
 
   let attrs = $derived(mergeProps(props, qrCode.getPatternProps()));
 </script>
 
-<path {...attrs}>
-  {@render children?.()}
-</path>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <path {...attrs}>
+    {@render children?.()}
+  </path>
+{/if}

package/dist/qr-code/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 {CreateQRCodeProps, CreateQRCodeReturn} from './create-qr-code.svelte.js';
 
   export interface QRCodeProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateQRCodeProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, qrCode: CreateQRCodeReturn]>;
     children?: Snippet<[qrCode: CreateQRCodeReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {qrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
 
@@ -20,6 +21,7 @@
     ids,
     value,
     encoding,
+    asChild,
     children,
     ...props
   }: QRCodeProps = $props();
@@ -36,6 +38,10 @@
   qrCodeContext.set(qrCode);
 </script>
 
-<div {...attrs}>
-  {@render children?.(qrCode)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, qrCode)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(qrCode)}
+  </div>
+{/if}

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

package/dist/radio-group/item-control.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 RadioGroupItemControlProps extends HtmlProps<'div'> {}
+  export interface RadioGroupItemControlProps 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 {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: RadioGroupItemControlProps = $props();
+  let {asChild, children, ...props}: RadioGroupItemControlProps = $props();
 
   let radioGroup = radioGroupContext.get();
   let itemProps = radioGroupItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, radioGroup.getItemControlProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/radio-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 {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
 
   let {...props}: RadioGroupItemHiddenInputProps = $props();

package/dist/radio-group/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 RadioGroupItemTextProps extends HtmlProps<'span'> {}
+  export interface RadioGroupItemTextProps 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 {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: RadioGroupItemTextProps = $props();
+  let {asChild, children, ...props}: RadioGroupItemTextProps = $props();
 
   let radioGroup = radioGroupContext.get();
   let itemProps = radioGroupItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, radioGroup.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/radio-group/item.svelte

@@ -5,22 +5,16 @@
 
   export interface RadioGroupItemProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>, state: ItemState]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    value,
-    invalid,
-    disabled,
-    children,
-    ...props
-  }: RadioGroupItemProps = $props();
+  let {value, invalid, disabled, children, asChild, ...props}: RadioGroupItemProps = $props();
 
   let radioGroup = radioGroupContext.get();
   let itemProps = $derived({
@@ -35,6 +29,10 @@
   radioGroupItemPropsContext.set(() => itemProps);
 </script>
 
-<label {...attrs}>
-  {@render children?.(state)}
-</label>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <label {...attrs}>
+    {@render children?.(state)}
+  </label>
+{/if}

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

package/dist/radio-group/root.svelte

@@ -1,16 +1,19 @@
 <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 {CreateRadioGroupProps, CreateRadioGroupReturn} from './create-radio-group.svelte.js';
 
   export interface RadioGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRadioGroupProps> {
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, radioGroup: CreateRadioGroupReturn]
+    >;
     children?: Snippet<[radioGroup: CreateRadioGroupReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {radioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
 
@@ -24,6 +27,7 @@
     readOnly,
     orientation,
     onValueChange,
+    asChild,
     children,
     ...props
   }: RadioGroupProps = $props();
@@ -45,6 +49,10 @@
   radioGroupContext.set(radioGroup);
 </script>
 
-<div {...attrs}>
-  {@render children?.(radioGroup)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, radioGroup)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(radioGroup)}
+  </div>
+{/if}

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

package/dist/rating-group/hidden-input.svelte

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

package/dist/rating-group/item.svelte

@@ -1,26 +1,31 @@
 <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/rating-group';
   import type {Snippet} from 'svelte';
 
   export interface RatingGroupItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
     children: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {ratingGroupContext} from './context.svelte.js';
 
-  let {index, children, ...props}: RatingGroupItemProps = $props();
+  let {index, asChild, children, ...props}: RatingGroupItemProps = $props();
 
-  let radioGroup = ratingGroupContext.get();
+  let ratingGroup = ratingGroupContext.get();
 
-  let state = $derived(radioGroup.getItemState({index}));
-  let attrs = $derived(mergeProps(props, radioGroup.getItemProps({index})));
+  let state = $derived(ratingGroup.getItemState({index}));
+  let attrs = $derived(mergeProps(props, ratingGroup.getItemProps({index})));
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children(state)}
+  </div>
+{/if}

package/dist/rating-group/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface RatingGroupLabelProps extends HtmlProps<'label'> {}
+  export interface RatingGroupLabelProps 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 {ratingGroupContext} from './context.svelte.js';
 
-  let {children, ...props}: RatingGroupLabelProps = $props();
+  let {asChild, children, ...props}: RatingGroupLabelProps = $props();
 
-  let radioGroup = ratingGroupContext.get();
+  let ratingGroup = ratingGroupContext.get();
 
-  let attrs = $derived(mergeProps(props, radioGroup.getLabelProps()));
+  let attrs = $derived(mergeProps(props, ratingGroup.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/rating-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 {
     CreateRatingGroupProps,
@@ -8,12 +8,15 @@
 
   export interface RatingGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRatingGroupProps> {
-    children?: Snippet<[radioGroup: CreateRatingGroupReturn]>;
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, ratingGroup: 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 +35,12 @@
     translations,
     onHoverChange,
     onValueChange,
+    asChild,
     children,
     ...props
   }: RatingGroupProps = $props();
 
-  let radioGroup = createRatingGroup({
+  let ratingGroup = createRatingGroup({
     id,
     ids,
     form,
@@ -53,11 +57,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,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 SegmentGroupIndicatorProps extends HtmlProps<'span'> {}
+  export interface SegmentGroupIndicatorProps 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}: 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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,16 +1,19 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SegmentGroupItemControlProps extends HtmlProps<'div'> {}
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+
+  export interface SegmentGroupItemControlProps 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, 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 +23,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,18 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SegmentGroupItemTextProps extends HtmlProps<'span'> {}
+  export interface SegmentGroupItemTextProps 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, 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 +22,10 @@
   );
 </script>
 
-<span {...ensureStyleIsString(attrs)}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/segment-group/item.svelte

@@ -5,13 +5,13 @@
 
   export interface SegmentGroupItemProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>, state: 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}