ui-ingredients 0.0.44 → 0.0.46

package/dist/slider/range.svelte

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

package/dist/slider/root.svelte

@@ -19,9 +19,9 @@
   import {setSliderContext} from './context.svelte.js';
   import {createSlider} from './create-slider.svelte.js';
 
-  let {asChild, children, ...props}: SliderProps = $props();
+  let {this: e, asChild, children, ...props}: SliderProps = $props();
 
-  let [sliderProps, otherProps] = $derived(
+  let [sliderProps, localProps] = $derived(
     createSplitProps<CreateSliderProps>([
       'id',
       'ids',
@@ -50,7 +50,7 @@
 
   let slider = createSlider(reflect(() => sliderProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, slider.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, slider.getRootProps()));
 
   setSliderContext(slider);
 </script>
@@ -58,7 +58,7 @@
 {#if asChild}
   {@render asChild(mergedProps, slider)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(slider)}
   </div>
 {/if}

package/dist/slider/thumb.svelte

@@ -14,16 +14,16 @@
     setSliderThumbPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderThumbProps = $props();
+  let {this: e, asChild, children, ...props}: SliderThumbProps = $props();
 
   let slider = getSliderContext();
 
-  let [thumbProps, otherProps] = $derived(
+  let [thumbProps, localProps] = $derived(
     createSplitProps<ThumbProps>(['name', 'index'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, slider.getThumbProps(thumbProps)),
+    mergeProps(localProps, slider.getThumbProps(thumbProps)),
   );
 
   setSliderThumbPropsContext(() => thumbProps);
@@ -32,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/track.svelte

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

package/dist/slider/value-text.svelte

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

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

@@ -1,2 +1,2 @@
 import type { CreateSplitterReturn } from './create-splitter.svelte.js';
-export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => void;
+export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => CreateSplitterReturn;

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

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

package/dist/splitter/panel.svelte

@@ -11,23 +11,23 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SplitterPanelProps = $props();
+  let {this: e, asChild, children, ...props}: SplitterPanelProps = $props();
 
   let splitter = getSplitterContext();
 
-  let [panelProps, otherProps] = $derived(
+  let [panelProps, localProps] = $derived(
     createSplitProps<PanelProps>(['id', 'snapSize'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, splitter.getPanelProps(panelProps)),
+    mergeProps(localProps, splitter.getPanelProps(panelProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/splitter/resize-trigger.svelte

@@ -23,25 +23,30 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SplitterResizeTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SplitterResizeTriggerProps = $props();
 
   let splitter = getSplitterContext();
 
-  let [resizeTriggerProps, otherProps] = $derived(
+  let [resizeTriggerProps, localProps] = $derived(
     createSplitProps<ResizeTriggerProps>(['id', 'step', 'disabled'])(props),
   );
 
   let itemState = $derived(splitter.getResizeTriggerState(resizeTriggerProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, splitter.getResizeTriggerProps(resizeTriggerProps)),
+    mergeProps(localProps, splitter.getResizeTriggerProps(resizeTriggerProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/splitter/root.svelte

@@ -19,9 +19,9 @@
   import {setSplitterContext} from './context.svelte.js';
   import {createSplitter} from './create-splitter.svelte.js';
 
-  let {asChild, children, ...props}: SplitterProps = $props();
+  let {this: e, asChild, children, ...props}: SplitterProps = $props();
 
-  let [splitterProps, otherProps] = $derived(
+  let [splitterProps, localProps] = $derived(
     createSplitProps<CreateSplitterProps>([
       'id',
       'ids',
@@ -34,7 +34,7 @@
 
   let splitter = createSplitter(reflect(() => splitterProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, splitter.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, splitter.getRootProps()));
 
   setSplitterContext(splitter);
 </script>
@@ -42,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, splitter)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(splitter)}
   </div>
 {/if}

package/dist/steps/completed-content.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsCompletedContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: StepsCompletedContentProps = $props();
 
   let steps = getStepsContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/content.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './context.svelte.js';
 
-  let {index, asChild, children, ...props}: StepsContentProps = $props();
+  let {
+    this: e,
+    index,
+    asChild,
+    children,
+    ...props
+  }: StepsContentProps = $props();
 
   let steps = getStepsContext();
 
@@ -20,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/steps';
 import type { CreateStepsReturn } from './create-steps.svelte.js';
-export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => void;
-export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => CreateStepsReturn;
+export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

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

@@ -7,13 +7,12 @@ export function createSteps(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(steps.machine(context), { context });
-    const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => steps.connect(state, send, normalizeProps));
 }

package/dist/steps/indicator.svelte

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

package/dist/steps/item.svelte

@@ -11,18 +11,18 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getStepsContext, setStepsItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsItemProps = $props();
+  let {this: e, asChild, children, ...props}: StepsItemProps = $props();
 
   let steps = getStepsContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
   );
 
   let itemState = $derived(steps.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, steps.getItemProps(itemProps)),
+    mergeProps(localProps, steps.getItemProps(itemProps)),
   );
 
   setStepsItemPropsContext(() => itemProps);
@@ -31,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/steps/list.svelte

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

package/dist/steps/next-trigger.svelte

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

package/dist/steps/prev-trigger.svelte

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

package/dist/steps/progress.svelte

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

package/dist/steps/root.svelte

@@ -19,9 +19,9 @@
   import {setStepsContext} from './context.svelte.js';
   import {createSteps} from './create-steps.svelte.js';
 
-  let {asChild, children, ...props}: StepsProps = $props();
+  let {this: e, asChild, children, ...props}: StepsProps = $props();
 
-  let [stepsProps, otherProps] = $derived(
+  let [stepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
 
   let steps = createSteps(reflect(() => stepsProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, steps.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, steps.getRootProps()));
 
   setStepsContext(steps);
 </script>
@@ -44,7 +44,7 @@
 {#if asChild}
   {@render asChild(mergedProps, steps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(steps)}
   </div>
 {/if}

package/dist/steps/separator.svelte

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

package/dist/steps/trigger.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: StepsTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: StepsTriggerProps = $props();
 
   let steps = getStepsContext();
   let itemProps = getStepsItemPropsContext();
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreateSwitchReturn } from './create-switch.svelte.js';
-export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => void;
+export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => CreateSwitchReturn;

package/dist/switch/control.svelte

@@ -8,17 +8,17 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SwitchControlProps = $props();
+  let {this: e, asChild, children, ...props}: SwitchControlProps = $props();
 
-  let switch$ = getSwitchContext();
+  let switch_ = getSwitchContext();
 
-  let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
+  let mergedProps = $derived(mergeProps(props, switch_.getControlProps()));
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/switch/create-switch.svelte.d.ts

@@ -1,7 +1,7 @@
-import * as switch$ from '@zag-js/switch';
-export interface CreateSwitchProps extends Omit<switch$.Context, 'id' | 'dir' | 'getRootNode'> {
+import * as switch_ from '@zag-js/switch';
+export interface CreateSwitchProps extends Omit<switch_.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
-export interface CreateSwitchReturn extends switch$.Api {
+export interface CreateSwitchReturn extends switch_.Api {
 }
 export declare function createSwitch(props: CreateSwitchProps): any;

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

@@ -2,14 +2,14 @@ import { getEnvironmentContext } from '../environment-provider/context.svelte.js
 import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import * as switch$ from '@zag-js/switch';
+import * as switch_ from '@zag-js/switch';
 import { uid } from 'uid';
 export function createSwitch(props) {
     const field = getFieldContext();
     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,
@@ -22,10 +22,10 @@ export function createSwitch(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
-    const [state, send] = useMachine(switch$.machine(context), { context });
-    const api = $derived(reflect(() => {
-        const o = switch$.connect(state, send, normalizeProps);
+    }));
+    const [state, send] = useMachine(switch_.machine(context), { context });
+    return reflect(() => {
+        const o = switch_.connect(state, send, normalizeProps);
         return {
             ...o,
             getHiddenInputProps() {
@@ -35,6 +35,5 @@ export function createSwitch(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/switch/hidden-input.svelte

@@ -9,15 +9,15 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './context.svelte.js';
 
-  let {asChild, ...props}: SwitchHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: SwitchHiddenInputProps = $props();
 
-  let switch$ = getSwitchContext();
+  let switch_ = getSwitchContext();
 
-  let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
+  let mergedProps = $derived(mergeProps(props, switch_.getHiddenInputProps()));
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/switch/label.svelte

@@ -8,17 +8,17 @@
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SwitchLabelProps = $props();
+  let {this: e, asChild, children, ...props}: SwitchLabelProps = $props();
 
-  let switch$ = getSwitchContext();
+  let switch_ = getSwitchContext();
 
-  let mergedProps = $derived(mergeProps(props, switch$.getLabelProps()));
+  let mergedProps = $derived(mergeProps(props, switch_.getLabelProps()));
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/switch/root.svelte

@@ -19,9 +19,9 @@
   import {setSwitchContext} from './context.svelte.js';
   import {createSwitch} from './create-switch.svelte.js';
 
-  let {asChild, children, ...props}: SwitchProps = $props();
+  let {this: e, asChild, children, ...props}: SwitchProps = $props();
 
-  let [switchProps, otherProps] = $derived(
+  let [switchProps, localProps] = $derived(
     createSplitProps<CreateSwitchProps>([
       'id',
       'ids',
@@ -38,17 +38,17 @@
     ])(props),
   );
 
-  let switch$ = createSwitch(reflect(() => switchProps));
+  let switch_ = createSwitch(reflect(() => switchProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, switch_.getRootProps()));
 
-  setSwitchContext(switch$);
+  setSwitchContext(switch_);
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, switch$)}
+  {@render asChild(mergedProps, switch_)}
 {:else}
-  <label {...mergedProps}>
-    {@render children?.(switch$)}
+  <label bind:this={e} {...mergedProps}>
+    {@render children?.(switch_)}
   </label>
 {/if}