ui-ingredients 0.0.44 → 0.0.46

package/dist/radio-group/create-radio-group.svelte.js

@@ -7,13 +7,12 @@ export function createRadioGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(radioGroup.machine(context), { context });
-    const api = $derived(reflect(() => radioGroup.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => radioGroup.connect(state, send, normalizeProps));
 }

package/dist/radio-group/indicator.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getRadioGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: RadioGroupIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: RadioGroupIndicatorProps = $props();
 
   let radioGroup = getRadioGroupContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

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

@@ -12,7 +12,12 @@
     getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: RadioGroupItemControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: RadioGroupItemControlProps = $props();
 
   let radioGroup = getRadioGroupContext();
   let itemProps = getRadioGroupItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -12,7 +12,7 @@
     getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: RadioGroupItemHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: RadioGroupItemHiddenInputProps = $props();
 
   let radioGroup = getRadioGroupContext();
   let itemProps = getRadioGroupItemPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

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

@@ -12,7 +12,12 @@
     getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: RadioGroupItemTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: RadioGroupItemTextProps = $props();
 
   let radioGroup = getRadioGroupContext();
   let itemProps = getRadioGroupItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/radio-group/item.svelte

@@ -14,18 +14,18 @@
     setRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {children, asChild, ...props}: RadioGroupItemProps = $props();
+  let {this: e, children, asChild, ...props}: RadioGroupItemProps = $props();
 
   let radioGroup = getRadioGroupContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['value', 'invalid', 'disabled'])(props),
   );
 
   let itemState = $derived(radioGroup.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, radioGroup.getItemProps(itemProps)),
+    mergeProps(localProps, radioGroup.getItemProps(itemProps)),
   );
 
   setRadioGroupItemPropsContext(() => itemProps);
@@ -34,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </label>
 {/if}

package/dist/radio-group/label.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getRadioGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: RadioGroupLabelProps = $props();
+  let {this: e, asChild, children, ...props}: RadioGroupLabelProps = $props();
 
   let radioGroup = getRadioGroupContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/radio-group/root.svelte

@@ -19,9 +19,9 @@
   import {setRadioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
 
-  let {asChild, children, ...props}: RadioGroupProps = $props();
+  let {this: e, asChild, children, ...props}: RadioGroupProps = $props();
 
-  let [radioGroupProps, otherProps] = $derived(
+  let [radioGroupProps, localProps] = $derived(
     createSplitProps<CreateRadioGroupProps>([
       'id',
       'ids',
@@ -37,7 +37,7 @@
 
   let radioGroup = createRadioGroup(reflect(() => radioGroupProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, radioGroup.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, radioGroup.getRootProps()));
 
   setRadioGroupContext(radioGroup);
 </script>
@@ -45,7 +45,7 @@
 {#if asChild}
   {@render asChild(mergedProps, radioGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(radioGroup)}
   </div>
 {/if}

package/dist/rating-group/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateRatingGroupReturn } from './create-rating-group.svelte.js';
-export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => void;
+export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => CreateRatingGroupReturn;

package/dist/rating-group/control.svelte

@@ -8,7 +8,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: RatingGroupControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: RatingGroupControlProps = $props();
 
   let ratingGroup = getRatingGroupContext();
 
@@ -18,7 +23,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/rating-group/create-rating-group.svelte.js

@@ -9,7 +9,7 @@ export function createRatingGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -21,9 +21,9 @@ export function createRatingGroup(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(ratingGroup.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = ratingGroup.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -34,6 +34,5 @@ export function createRatingGroup(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

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

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './context.svelte.js';
 
-  let {asChild, ...props}: RatingGroupHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: RatingGroupHiddenInputProps = $props();
 
   let radioGroup = getRatingGroupContext();
 
@@ -21,5 +21,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/rating-group/item.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './context.svelte.js';
 
-  let {index, asChild, children, ...props}: RatingGroupItemProps = $props();
+  let {
+    this: e,
+    index,
+    asChild,
+    children,
+    ...props
+  }: RatingGroupItemProps = $props();
 
   let ratingGroup = getRatingGroupContext();
 
@@ -23,7 +29,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/rating-group/label.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: RatingGroupLabelProps = $props();
+  let {this: e, asChild, children, ...props}: RatingGroupLabelProps = $props();
 
   let ratingGroup = getRatingGroupContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

package/dist/rating-group/root.svelte

@@ -19,9 +19,9 @@
   import {setRatingGroupContext} from './context.svelte.js';
   import {createRatingGroup} from './create-rating-group.svelte.js';
 
-  let {asChild, children, ...props}: RatingGroupProps = $props();
+  let {this: e, asChild, children, ...props}: RatingGroupProps = $props();
 
-  let [ratingGroupProps, otherProps] = $derived(
+  let [ratingGroupProps, localProps] = $derived(
     createSplitProps<CreateRatingGroupProps>([
       'id',
       'ids',
@@ -43,7 +43,7 @@
   let ratingGroup = createRatingGroup(reflect(() => ratingGroupProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, ratingGroup.getRootProps()),
+    mergeProps(localProps, ratingGroup.getRootProps()),
   );
 
   setRatingGroupContext(ratingGroup);
@@ -52,7 +52,7 @@
 {#if asChild}
   {@render asChild(mergedProps, ratingGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(ratingGroup)}
   </div>
 {/if}

package/dist/segment-group/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateSegmentGroupReturn } from './create-segment-group.svelte.js';
-export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => void;
-export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => CreateSegmentGroupReturn;
+export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/segment-group/create-segment-group.svelte.js

@@ -7,13 +7,12 @@ export function createSegmentGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(segmentGroup.machine(context));
-    const api = $derived(reflect(() => segmentGroup.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => segmentGroup.connect(state, send, normalizeProps));
 }

package/dist/segment-group/indicator.svelte

@@ -10,7 +10,12 @@
   import {parts} from './anatomy.js';
   import {getSegmentGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SegmentGroupIndicatorProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
 
@@ -22,7 +27,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

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

@@ -13,7 +13,12 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupItemControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SegmentGroupItemControlProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -12,7 +12,7 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: SegmentGroupItemHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: SegmentGroupItemHiddenInputProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

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

@@ -13,7 +13,12 @@
     getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupItemTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SegmentGroupItemTextProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
   let itemProps = getSegmentGroupItemPropsContext();
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/segment-group/item.svelte

@@ -15,18 +15,18 @@
     setSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
-  let {children, asChild, ...props}: SegmentGroupItemProps = $props();
+  let {this: e, children, asChild, ...props}: SegmentGroupItemProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['value', 'invalid', 'disabled'])(props),
   );
 
   let itemState = $derived(segmentGroup.getItemState(itemProps));
   let mergedProps = $derived(
     mergeProps(
-      otherProps,
+      localProps,
       segmentGroup.getItemProps(itemProps),
       parts.item.attrs,
     ),
@@ -38,7 +38,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </label>
 {/if}

package/dist/segment-group/label.svelte

@@ -9,7 +9,7 @@
   import {parts} from './anatomy.js';
   import {getSegmentGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupLabelProps = $props();
+  let {this: e, asChild, children, ...props}: SegmentGroupLabelProps = $props();
 
   let segmentGroup = getSegmentGroupContext();
 
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/segment-group/root.svelte

@@ -20,9 +20,9 @@
   import {setSegmentGroupContext} from './context.svelte.js';
   import {createSegmentGroup} from './create-segment-group.svelte.js';
 
-  let {asChild, children, ...props}: SegmentGroupProps = $props();
+  let {this: e, asChild, children, ...props}: SegmentGroupProps = $props();
 
-  let [segmentGroupProps, otherProps] = $derived(
+  let [segmentGroupProps, localProps] = $derived(
     createSplitProps<CreateSegmentGroupProps>([
       'id',
       'ids',
@@ -39,7 +39,7 @@
   let segmentGroup = createSegmentGroup(reflect(() => segmentGroupProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, segmentGroup.getRootProps(), parts.root.attrs),
+    mergeProps(localProps, segmentGroup.getRootProps(), parts.root.attrs),
   );
 
   setSegmentGroupContext(segmentGroup);
@@ -48,7 +48,7 @@
 {#if asChild}
   {@render asChild(mergedProps, segmentGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(segmentGroup)}
   </div>
 {/if}

package/dist/select/clear-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectClearTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectClearTriggerProps = $props();
 
   let select = getSelectContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/select/content.svelte

@@ -11,7 +11,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectContentProps = $props();
+  let {this: e, asChild, children, ...props}: SelectContentProps = $props();
 
   let select = getSelectContext();
   let presence = getPresenceContext();
@@ -25,7 +25,7 @@
   {#if asChild}
     {@render asChild(presence.ref, mergedProps)}
   {:else}
-    <div use:presence.ref {...mergedProps}>
+    <div bind:this={e} use:presence.ref {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/select/context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ItemGroupProps, ItemProps } from '@zag-js/select';
 import type { CreateSelectReturn } from './create-select.svelte.js';
-export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => void;
-export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
-export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;
+export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => CreateSelectReturn;
+export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => ItemProps<any>;
+export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => ItemGroupProps;

package/dist/select/control.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectControlProps = $props();
+  let {this: e, asChild, children, ...props}: SelectControlProps = $props();
 
   let select = getSelectContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/select/create-select.svelte.js

@@ -17,7 +17,7 @@ export function createSelect(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenSelect: field?.ids.control,
@@ -33,9 +33,9 @@ export function createSelect(props) {
         'open.controlled': props.open != null,
         getRootNode: environment?.getRootNode,
         collection,
-    });
+    }));
     const [state, send] = useMachine(select.machine(context));
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = select.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -46,6 +46,5 @@ export function createSelect(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/select/hidden-select.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectHiddenSelectProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectHiddenSelectProps = $props();
 
   let select = getSelectContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <select {...mergedProps}>
+  <select bind:this={e} {...mergedProps}>
     {@render children?.()}
   </select>
 {/if}