ui-ingredients 0.0.44 → 0.0.46

package/dist/pin-input/hidden-input.svelte

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

package/dist/pin-input/input.svelte

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

package/dist/pin-input/label.svelte

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

package/dist/pin-input/root.svelte

@@ -19,9 +19,9 @@
   import {setPinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
 
-  let {asChild, children, ...props}: PinInputProps = $props();
+  let {this: e, asChild, children, ...props}: PinInputProps = $props();
 
-  let [pinInputProps, otherProps] = $derived(
+  let [pinInputProps, localProps] = $derived(
     createSplitProps<CreatePinInputProps>([
       'id',
       'ids',
@@ -49,7 +49,7 @@
 
   let pinInput = createPinInputContext(reflect(() => pinInputProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, pinInput.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, pinInput.getRootProps()));
 
   setPinInputContext(pinInput);
 </script>
@@ -57,7 +57,7 @@
 {#if asChild}
   {@render asChild(mergedProps, pinInput)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(pinInput)}
   </div>
 {/if}

package/dist/popover/arrow-tip.svelte

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

package/dist/popover/arrow.svelte

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

package/dist/popover/close-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getPopoverContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PopoverCloseTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: PopoverCloseTriggerProps = $props();
 
   let popover = getPopoverContext();
 
@@ -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/popover/content.svelte

@@ -11,7 +11,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getPopoverContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: PopoverContentProps = $props();
+  let {this: e, asChild, children, ...props}: PopoverContentProps = $props();
 
   let popover = getPopoverContext();
   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/popover/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePopoverReturn } from './create-popover.svelte.js';
-export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => void;
+export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => CreatePopoverReturn;

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

@@ -7,15 +7,14 @@ export function createPopover(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,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(popover.machine(context), { context });
-    const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => popover.connect(state, send, normalizeProps));
 }

package/dist/popover/description.svelte

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

package/dist/popover/positioner.svelte

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

package/dist/popover/root.svelte

@@ -46,17 +46,12 @@
   );
 
   let popover = createPopover(reflect(() => popoverProps));
-  let presence = createPresence({
-    get present() {
-      return popover.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: popover.open,
+    })),
+  );
 
   setPopoverContext(popover);
   setPresenceContext(presence);

package/dist/popover/title.svelte

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

package/dist/popover/trigger.svelte

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

@@ -1,3 +1,3 @@
 import type { CreatePresenceReturn, PresenceStrategyProps } from './create-presence.svelte.js';
-export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;
-export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => void;
+export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => CreatePresenceReturn;
+export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => PresenceStrategyProps;

package/dist/presence/root.svelte

@@ -18,7 +18,7 @@
 
   let {asChild, children, ...props}: PresenceProps = $props();
 
-  let [presenceProps, otherProps] = $derived(
+  let [presenceProps, localProps] = $derived(
     createSplitProps<CreatePresenceProps>([
       'present',
       'lazyMount',
@@ -29,7 +29,7 @@
   let presence = createPresence(reflect(() => presenceProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, presence.getPresenceProps()),
+    mergeProps(localProps, presence.getPresenceProps()),
   );
 </script>
 

package/dist/progress/circle-range.svelte

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

package/dist/progress/circle-track.svelte

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

package/dist/progress/circle.svelte

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

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

@@ -1,2 +1,2 @@
 import type { CreateProgressReturn } from './create-progress.svelte.js';
-export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => void;
+export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => CreateProgressReturn;

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

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

package/dist/progress/label.svelte

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

package/dist/progress/range.svelte

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

package/dist/progress/root.svelte

@@ -19,9 +19,9 @@
   import {setProgressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
 
-  let {asChild, children, ...props}: ProgressProps = $props();
+  let {this: e, asChild, children, ...props}: ProgressProps = $props();
 
-  let [progressProps, otherProps] = $derived(
+  let [progressProps, localProps] = $derived(
     createSplitProps<CreateProgressProps>([
       'id',
       'ids',
@@ -35,7 +35,7 @@
 
   let progress = createProgress(reflect(() => progressProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, progress.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, progress.getRootProps()));
 
   setProgressContext(progress);
 </script>
@@ -43,7 +43,7 @@
 {#if asChild}
   {@render asChild(mergedProps, progress)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(progress)}
   </div>
 {/if}

package/dist/progress/track.svelte

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

package/dist/progress/value-text.svelte

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

package/dist/progress/view.svelte

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

package/dist/qr-code/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateQrCodeReturn } from './create-qr-code.svelte.js';
-export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => void;
+export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => CreateQrCodeReturn;

package/dist/qr-code/create-qr-code.svelte.js

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

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/root.svelte

@@ -19,9 +19,9 @@
   import {setQrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
 
-  let {asChild, children, ...props}: QrCodeProps = $props();
+  let {this: e, asChild, children, ...props}: QrCodeProps = $props();
 
-  let [qrCodeProps, otherProps] = $derived(
+  let [qrCodeProps, localProps] = $derived(
     createSplitProps<CreateQrCodeProps>(['id', 'ids', 'value', 'encoding'])(
       props,
     ),
@@ -29,7 +29,7 @@
 
   let qrCode = createQRCode(reflect(() => qrCodeProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, qrCode.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, qrCode.getRootProps()));
 
   setQrCodeContext(qrCode);
 </script>
@@ -37,7 +37,7 @@
 {#if asChild}
   {@render asChild(mergedProps, qrCode)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(qrCode)}
   </div>
 {/if}

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateRadioGroupReturn } from './create-radio-group.svelte.js';
-export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => void;
-export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => CreateRadioGroupReturn;
+export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;