ui-ingredients 0.0.39 → 0.0.41

package/dist/qr-code/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateQrCodeProps,
     CreateQrCodeReturn,
   } from './create-qr-code.svelte.js';
 
   export interface QrCodeProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateQrCodeProps> {
-    asChild?: AsChild<CreateQrCodeReturn>;
-    children?: Snippet<[CreateQrCodeReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateQrCodeReturn>,
+      CreateQrCodeProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/radio-group/indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RadioGroupIndicatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface RadioGroupIndicatorProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RadioGroupItemControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface RadioGroupItemControlProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RadioGroupItemHiddenInputProps extends HTMLProps<'input'> {}
+  export interface RadioGroupItemHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
@@ -11,7 +12,7 @@
     getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {...props}: RadioGroupItemHiddenInputProps = $props();
+  let {asChild, ...props}: RadioGroupItemHiddenInputProps = $props();
 
   let radioGroup = getRadioGroupContext();
   let itemProps = getRadioGroupItemPropsContext();
@@ -21,4 +22,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RadioGroupItemTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface RadioGroupItemTextProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/radio-group/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} 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<ItemState>;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'label', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/radio-group/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RadioGroupLabelProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface RadioGroupLabelProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/radio-group/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateRadioGroupProps,
     CreateRadioGroupReturn,
   } from './create-radio-group.svelte.js';
 
   export interface RadioGroupProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateRadioGroupProps> {
-    asChild?: AsChild<CreateRadioGroupReturn>;
-    children?: Snippet<[CreateRadioGroupReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateRadioGroupReturn>,
+      CreateRadioGroupProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/rating-group/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RatingGroupControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface RatingGroupControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,14 +1,15 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RatingGroupHiddenInputProps extends HTMLProps<'input'> {}
+  export interface RatingGroupHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './context.svelte.js';
 
-  let {...props}: RatingGroupHiddenInputProps = $props();
+  let {asChild, ...props}: RatingGroupHiddenInputProps = $props();
 
   let radioGroup = getRatingGroupContext();
 
@@ -17,4 +18,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/rating-group/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} 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<ItemState>;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/rating-group/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface RatingGroupLabelProps extends HTMLProps<'label'> {
-    asChild?: AsChild;
-  }
+  export interface RatingGroupLabelProps extends HtmlIngredientProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/rating-group/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateRatingGroupProps,
     CreateRatingGroupReturn,
   } from './create-rating-group.svelte.js';
 
   export interface RatingGroupProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateRatingGroupProps> {
-    asChild?: AsChild<CreateRatingGroupReturn>;
-    children?: Snippet<[CreateRatingGroupReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateRatingGroupReturn>,
+      CreateRatingGroupProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/segment-group/indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SegmentGroupIndicatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SegmentGroupIndicatorProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SegmentGroupItemControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SegmentGroupItemControlProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
   export interface SegmentGroupItemHiddenInputProps
-    extends HTMLProps<'input'> {}
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
@@ -12,7 +12,7 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {...props}: SegmentGroupItemHiddenInputProps = $props();
+  let {asChild, ...props}: SegmentGroupItemHiddenInputProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -22,4 +22,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SegmentGroupItemTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SegmentGroupItemTextProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/segment-group/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} 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<ItemState>;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'label', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/segment-group/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SegmentGroupLabelProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SegmentGroupLabelProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/segment-group/root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateSegmentGroupProps,
     CreateSegmentGroupReturn,
@@ -8,12 +7,9 @@
 
   export interface SegmentGroupProps
     extends Assign<
-      Omit<HTMLProps<'div'>, 'children'>,
+      HtmlIngredientProps<'div', CreateSegmentGroupReturn>,
       CreateSegmentGroupProps
-    > {
-    asChild?: AsChild<CreateSegmentGroupReturn>;
-    children?: Snippet<[CreateSegmentGroupReturn]>;
-  }
+    > {}
 </script>
 
 <script lang="ts">

package/dist/select/clear-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectClearTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface SelectClearTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/select/content.svelte

@@ -1,26 +1,30 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface SelectContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSelectContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SelectContentProps = $props();
-
-  let select = getSelectContext();
-
-  let mergedProps = $derived(mergeProps(props, select.getContentProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface SelectContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SelectContentProps = $props();
+
+  let select = getSelectContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, select.getContentProps(), presence.getPresenceProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(presence.ref, mergedProps)}
+{:else}
+  <div use:presence.ref {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SelectControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/select/hidden-select.svelte

@@ -1,20 +1,25 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectHiddenSelectProps extends HTMLProps<'select'> {}
+  export interface SelectHiddenSelectProps
+    extends HtmlIngredientProps<'select'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {children, ...props}: SelectHiddenSelectProps = $props();
+  let {asChild, children, ...props}: SelectHiddenSelectProps = $props();
 
   let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getHiddenSelectProps()));
 </script>
 
-<select {...mergedProps}>
-  {@render children?.()}
-</select>
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <select {...mergedProps}>
+    {@render children?.()}
+  </select>
+{/if}

package/dist/select/indicator.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectIndicatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SelectIndicatorProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item-group-label.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectItemGroupLabelProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SelectItemGroupLabelProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item-group.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectItemGroupProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SelectItemGroupProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item-indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectItemIndicatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SelectItemIndicatorProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item-text.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectItemTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SelectItemTextProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} 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<ItemState>;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/select/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectLabelProps extends HTMLProps<'label'> {
-    asChild?: AsChild;
-  }
+  export interface SelectLabelProps extends HtmlIngredientProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/select/list.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SelectListProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SelectListProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">