ui-ingredients 0.0.25 → 0.0.27

package/dist/progress/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateProgressProps, CreateProgressReturn} from './create-progress.svelte.js';
 
   export interface ProgressProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateProgressProps> {
+    asChild?: AsChild;
     children?: Snippet<[progress: CreateProgressReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
 
@@ -23,6 +24,7 @@
     value,
     orientation,
     translations,
+    asChild,
     children,
     ...props
   }: ProgressProps = $props();
@@ -42,6 +44,10 @@
   progressContext.set(progress);
 </script>
 
-<div {...attrs}>
-  {@render children?.(progress)}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(progress)}
+  </div>
+{/if}

package/dist/progress/track.svelte

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

package/dist/progress/value-text.svelte

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

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

package/dist/qr-code/frame.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface QRCodeFrameProps extends HtmlProps<'svg'> {}
+  export interface QRCodeFrameProps extends HtmlProps<'svg'> {
+    asChild?: AsChild<HtmlProps<'svg'>>;
+  }
 </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}: QRCodeFrameProps = $props();
+  let {asChild, children, ...props}: QRCodeFrameProps = $props();
 
   let qrCode = qrCodeContext.get();
 
   let attrs = $derived(mergeProps(props, qrCode.getFrameProps()));
 </script>
 
-<svg {...attrs}>
-  {@render children?.()}
-</svg>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <svg {...attrs}>
+    {@render children?.()}
+  </svg>
+{/if}

package/dist/qr-code/overlay.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface QRCodeOverlayProps extends HtmlProps<'div'> {}
+  export interface QRCodeOverlayProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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}: QRCodeOverlayProps = $props();
+  let {asChild, children, ...props}: QRCodeOverlayProps = $props();
 
   let qrCode = qrCodeContext.get();
 
   let attrs = $derived(mergeProps(props, qrCode.getOverlayProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/qr-code/pattern.svelte

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

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

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface RadioGroupItemControlProps extends HtmlProps<'div'> {}
+  export interface RadioGroupItemControlProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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 +18,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,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface RadioGroupItemTextProps extends HtmlProps<'span'> {}
+  export interface RadioGroupItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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 +18,10 @@
   let attrs = $derived(mergeProps(props, radioGroup.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/radio-group/item.svelte

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

package/dist/radio-group/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 {CreateRadioGroupProps, CreateRadioGroupReturn} from './create-radio-group.svelte.js';
 
   export interface RadioGroupProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRadioGroupProps> {
+    asChild?: AsChild<GenericHtmlProps, 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 +25,7 @@
     readOnly,
     orientation,
     onValueChange,
+    asChild,
     children,
     ...props
   }: RadioGroupProps = $props();
@@ -45,6 +47,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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface RatingGroupControlProps extends HtmlProps<'div'> {}
+  export interface RatingGroupControlProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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 {AsChild, 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?: AsChild<GenericHtmlProps, 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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface RatingGroupLabelProps extends HtmlProps<'label'> {}
+  export interface RatingGroupLabelProps extends HtmlProps<'label'> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </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}