ui-ingredients 0.0.44 → 0.0.46

package/dist/tooltip/positioner.svelte

@@ -9,7 +9,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getTooltipContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TooltipPositionerProps = $props();
+  let {this: e, asChild, children, ...props}: TooltipPositionerProps = $props();
 
   let tooltip = getTooltipContext();
   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/tooltip/root.svelte

@@ -30,18 +30,12 @@
   );
 
   let tooltip = createTooltip(reflect(() => tooltipProps));
-
-  let presence = createPresence({
-    get present() {
-      return tooltip.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: tooltip.open,
+    })),
+  );
 
   setTooltipContext(tooltip);
   setPresenceContext(presence);

package/dist/tooltip/trigger.svelte

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

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

package/dist/tour/arrow.svelte

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

package/dist/tour/close-trigger.svelte

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

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

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

@@ -1,2 +1,2 @@
 import { type CreateTourReturn } from './create-tour.svelte.js';
-export declare const getTourContext: () => CreateTourReturn, setTourContext: (context: CreateTourReturn | (() => CreateTourReturn)) => void;
+export declare const getTourContext: () => CreateTourReturn, setTourContext: (context: CreateTourReturn | (() => CreateTourReturn)) => CreateTourReturn;

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

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

package/dist/tour/description.svelte

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

package/dist/tour/next-trigger.svelte

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

@@ -8,24 +8,19 @@
   import {mergeProps} from '../merge-props.js';
   import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {getTourContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TourOverlayProps = $props();
+  let {this: e, asChild, children, ...props}: TourOverlayProps = $props();
 
   let tour = getTourContext();
-
   let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence({
-    get present() {
-      return tour.currentStep != null;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: tour.currentStep != null,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(props, tour.getOverlayProps(), presence.getPresenceProps()),
@@ -36,7 +31,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div use:presence.ref {...mergedProps}>
+    <div bind:this={e} use:presence.ref {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/tour/positioner.svelte

@@ -9,7 +9,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getTourContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TourPositionerProps = $props();
+  let {this: e, asChild, children, ...props}: TourPositionerProps = $props();
 
   let tour = getTourContext();
   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/tour/prev-trigger.svelte

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

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

package/dist/tour/root.svelte

@@ -32,17 +32,12 @@
 
   let tour = createTour(reflect(() => tourProps));
 
-  let presence = createPresence({
-    get present() {
-      return tour.currentStep != null;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: tour.currentStep != null,
+    })),
+  );
 
   setTourContext(tour);
   setPresenceContext(presence);

package/dist/tour/skip-trigger.svelte

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

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

package/dist/tour/title.svelte

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

package/dist/tree-view/branch-content.svelte

@@ -12,7 +12,12 @@
     getTreeViewContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewBranchContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TreeViewBranchContentProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/tree-view/branch-control.svelte

@@ -12,7 +12,12 @@
     getTreeViewContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewBranchControlProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TreeViewBranchControlProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/tree-view/branch-indicator.svelte

@@ -12,7 +12,12 @@
     getTreeViewContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewBranchIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TreeViewBranchIndicatorProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/tree-view/branch-text.svelte

@@ -12,7 +12,12 @@
     getTreeViewContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewBranchTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TreeViewBranchTextProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/tree-view/branch-trigger.svelte

@@ -12,7 +12,12 @@
     getTreeViewContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewBranchTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TreeViewBranchTriggerProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/tree-view/branch.svelte

@@ -14,18 +14,18 @@
     setTreeViewBranchPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewBranchProps = $props();
+  let {this: e, asChild, children, ...props}: TreeViewBranchProps = $props();
 
   let treeView = getTreeViewContext();
 
-  let [branchProps, otherProps] = $derived(
+  let [branchProps, localProps] = $derived(
     createSplitProps<BranchProps>(['depth', 'value', 'disabled'])(props),
   );
 
   let branchState = $derived(treeView.getBranchState(branchProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, treeView.getBranchProps(branchProps)),
+    mergeProps(localProps, treeView.getBranchProps(branchProps)),
   );
 
   setTreeViewBranchPropsContext(() => branchProps);
@@ -34,7 +34,7 @@
 {#if asChild}
   {@render asChild(mergedProps, branchState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(branchState)}
   </div>
 {/if}

package/dist/tree-view/context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BranchProps, ItemProps } from '@zag-js/tree-view';
 import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
-export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
-export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
-export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;
+export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => CreateTreeViewReturn;
+export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => BranchProps;

package/dist/tree-view/create-tree-view.svelte.js

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

package/dist/tree-view/item-indicator.svelte

@@ -12,7 +12,12 @@
     getTreeViewItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewItemIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TreeViewItemIndicatorProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/tree-view/item-text.svelte

@@ -11,7 +11,7 @@
     getTreeViewItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TreeViewItemTextProps = $props();
+  let {this: e, asChild, children, ...props}: TreeViewItemTextProps = $props();
 
   let treeView = getTreeViewContext();
 
@@ -25,7 +25,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/tree-view/item.svelte

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

package/dist/tree-view/label.svelte

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