ui-ingredients 0.0.44 → 0.0.46

package/dist/select/indicator.svelte

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

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

@@ -12,7 +12,12 @@
     getSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectItemGroupLabelProps = $props();
 
   let select = getSelectContext();
 
@@ -29,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/select/item-group.svelte

@@ -12,7 +12,13 @@
     setSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
-  let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
+  let {
+    id,
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SelectItemGroupProps = $props();
 
   let select = getSelectContext();
 
@@ -32,7 +38,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/select/item-indicator.svelte

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

package/dist/select/item-text.svelte

@@ -11,7 +11,7 @@
     getSelectItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectItemTextProps = $props();
+  let {this: e, asChild, children, ...props}: SelectItemTextProps = $props();
 
   let select = getSelectContext();
   let itemProps = getSelectItemPropsContext();
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children?.()}
     {:else}

package/dist/select/item.svelte

@@ -14,17 +14,17 @@
     setSelectItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectItemProps = $props();
+  let {this: e, asChild, children, ...props}: SelectItemProps = $props();
 
   let select = getSelectContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
   );
 
   let itemState = $derived(select.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, select.getItemProps(itemProps)),
+    mergeProps(localProps, select.getItemProps(itemProps)),
   );
 
   setSelectItemPropsContext(() => itemProps);
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/select/label.svelte

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

package/dist/select/list.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectListProps = $props();
+  let {this: e, asChild, children, ...props}: SelectListProps = $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/positioner.svelte

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

package/dist/select/root.svelte

@@ -23,9 +23,9 @@
   import {setSelectContext} from './context.svelte.js';
   import {createSelect} from './create-select.svelte.js';
 
-  let {asChild, children, ...props}: SelectProps<T> = $props();
+  let {this: e, asChild, children, ...props}: SelectProps<T> = $props();
 
-  let [selectProps, otherProps] = $derived(
+  let [selectProps, rest] = $derived(
     createSplitProps<CreateSelectProps<T>>([
       'id',
       'ids',
@@ -58,27 +58,19 @@
     ])(props),
   );
 
-  let select = createSelect(reflect(() => selectProps));
-
-  let [presenceStrategyProps, elementProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      otherProps,
-    ),
+  let [presenceStrategyProps, localProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
   );
 
-  let presence = createPresence({
-    get present() {
-      return select.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let select = createSelect(reflect(() => selectProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: select.open,
+    })),
+  );
 
-  let mergedProps = $derived(mergeProps(elementProps, select.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, select.getRootProps()));
 
   setSelectContext(select);
   setPresenceContext(presence);
@@ -87,7 +79,7 @@
 {#if asChild}
   {@render asChild(mergedProps, select)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(select)}
   </div>
 {/if}

package/dist/select/trigger.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SelectTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: SelectTriggerProps = $props();
 
   let select = getSelectContext();
 
@@ -18,7 +18,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/value-text.svelte

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

package/dist/signature-pad/clear-trigger.svelte

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

package/dist/signature-pad/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
-export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => void;
+export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => CreateSignaturePadReturn;

package/dist/signature-pad/control.svelte

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

package/dist/signature-pad/create-signature-pad.svelte.js

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

package/dist/signature-pad/current-segment-path.svelte

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SignaturePadCurrentSegmentPathProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadCurrentSegmentPathProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -28,7 +32,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <path {...mergedProps}>
+    <path bind:this={e} {...mergedProps}>
       {@render children?.()}
     </path>
   {/if}

package/dist/signature-pad/guide.svelte

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

package/dist/signature-pad/hidden-input.svelte

@@ -10,7 +10,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {value, asChild, ...props}: SignaturePadHiddenInputProps = $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    ...props
+  }: SignaturePadHiddenInputProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -22,5 +27,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/signature-pad/label.svelte

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

package/dist/signature-pad/root.svelte

@@ -19,9 +19,9 @@
   import {setSignaturePadContext} from './context.svelte.js';
   import {createSignaturePad} from './create-signature-pad.svelte.js';
 
-  let {asChild, children, ...props}: SignaturePadProps = $props();
+  let {this: e, asChild, children, ...props}: SignaturePadProps = $props();
 
-  let [signaturePadProps, otherProps] = $derived(
+  let [signaturePadProps, localProps] = $derived(
     createSplitProps<CreateSignaturePadProps>([
       'id',
       'ids',
@@ -39,7 +39,7 @@
   let signaturePad = createSignaturePad(reflect(() => signaturePadProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, signaturePad.getRootProps()),
+    mergeProps(localProps, signaturePad.getRootProps()),
   );
 
   setSignaturePadContext(signaturePad);
@@ -48,7 +48,7 @@
 {#if asChild}
   {@render asChild(mergedProps, signaturePad)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(signaturePad)}
   </div>
 {/if}

package/dist/signature-pad/segment-path.svelte

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {path, asChild, children, ...props}: SignaturePadSegmentPathProps =
-    $props();
+  let {
+    this: e,
+    path,
+    asChild,
+    children,
+    ...props
+  }: SignaturePadSegmentPathProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -23,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <path {...mergedProps}>
+  <path bind:this={e} {...mergedProps}>
     {@render children?.()}
   </path>
 {/if}

package/dist/signature-pad/segment.svelte

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

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

@@ -1,4 +1,4 @@
 import type { ThumbProps } from '@zag-js/slider';
 import type { CreateSliderReturn } from './create-slider.svelte.js';
-export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => void;
-export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => void;
+export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => CreateSliderReturn;
+export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => ThumbProps;

package/dist/slider/control.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderControlProps = $props();
+  let {this: e, asChild, children, ...props}: SliderControlProps = $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/create-slider.svelte.js

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

package/dist/slider/hidden-input.svelte

@@ -12,7 +12,7 @@
     getSliderThumbPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: SliderHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: SliderHiddenInputProps = $props();
 
   let slider = getSliderContext();
   let thumbProps = getSliderThumbPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/slider/label.svelte

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

package/dist/slider/marker-group.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: SliderMarkerGroupProps = $props();
+  let {this: e, asChild, children, ...props}: SliderMarkerGroupProps = $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/marker.svelte

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