ui-ingredients 0.0.44 → 0.0.46

package/dist/time-picker/positioner.svelte

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

package/dist/time-picker/root.svelte

@@ -23,9 +23,9 @@
   import {setTimePickerContext} from './context.svelte.js';
   import {createTimePicker} from './create-time-picker.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerProps = $props();
 
-  let [timePickerProps, otherProps] = $derived(
+  let [timePickerProps, rest] = $derived(
     createSplitProps<CreateTimePickerProps>([
       'id',
       'ids',
@@ -49,30 +49,20 @@
     ])(props),
   );
 
-  let timePicker = createTimePicker(reflect(() => timePickerProps));
-
-  let [presenceStrategyProps, elementProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      otherProps,
-    ),
+  let [presenceStrategyProps, localProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
   );
 
-  let presence = createPresence({
-    get present() {
-      return timePicker.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
-
-  let mergedProps = $derived(
-    mergeProps(elementProps, timePicker.getRootProps()),
+  let timePicker = createTimePicker(reflect(() => timePickerProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: timePicker.open,
+    })),
   );
 
+  let mergedProps = $derived(mergeProps(localProps, timePicker.getRootProps()));
+
   setTimePickerContext(timePicker);
   setPresenceContext(presence);
 </script>
@@ -80,7 +70,7 @@
 {#if asChild}
   {@render asChild(mergedProps, timePicker)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(timePicker)}
   </div>
 {/if}

package/dist/time-picker/second-cell.svelte

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

package/dist/time-picker/spacer.svelte

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

package/dist/time-picker/trigger.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerTriggerProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -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/timer/action-trigger.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimerContext} from './context.svelte.js';
 
-  let {action, asChild, children, ...props}: TimerActionTriggerProps = $props();
+  let {
+    this: e,
+    action,
+    asChild,
+    children,
+    ...props
+  }: TimerActionTriggerProps = $props();
 
   let timer = getTimerContext();
 
@@ -22,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/timer';
 import type { CreateTimerReturn } from './create-timer.svelte.js';
-export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => void;
-export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => CreateTimerReturn;
+export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

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

@@ -5,12 +5,11 @@ import { uid } from 'uid';
 export function createTimer(props) {
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(timer.machine(context), { context });
-    const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => timer.connect(state, send, normalizeProps));
 }

package/dist/timer/item-label.svelte

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

package/dist/timer/item-value.svelte

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

package/dist/timer/item.svelte

@@ -11,16 +11,16 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getTimerContext, setTimerItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimerItemProps = $props();
+  let {this: e, asChild, children, ...props}: TimerItemProps = $props();
 
   let timer = getTimerContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['type'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, timer.getItemProps(itemProps)),
+    mergeProps(localProps, timer.getItemProps(itemProps)),
   );
 
   setTimerItemPropsContext(() => itemProps);
@@ -29,7 +29,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/timer/root.svelte

@@ -19,9 +19,9 @@
   import {setTimerContext} from './context.svelte.js';
   import {createTimer} from './create-timer.svelte.js';
 
-  let {asChild, children, ...props}: TimerProps = $props();
+  let {this: e, asChild, children, ...props}: TimerProps = $props();
 
-  let [timerProps, otherProps] = $derived(
+  let [timerProps, localProps] = $derived(
     createSplitProps<CreateTimerProps>([
       'id',
       'startMs',
@@ -36,7 +36,7 @@
 
   let timer = createTimer(reflect(() => timerProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, timer.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, timer.getRootProps()));
 
   setTimerContext(timer);
 </script>
@@ -44,7 +44,7 @@
 {#if asChild}
   {@render asChild(mergedProps, timer)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(timer)}
   </div>
 {/if}

package/dist/timer/separator.svelte

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

package/dist/toast/action-trigger.svelte

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

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

@@ -1,2 +1,2 @@
 import type { CreateToastReturn } from './create-toast.svelte.js';
-export declare const getToastContext: () => CreateToastReturn, setToastContext: (context: CreateToastReturn | (() => CreateToastReturn)) => void;
+export declare const getToastContext: () => CreateToastReturn, setToastContext: (context: CreateToastReturn | (() => CreateToastReturn)) => CreateToastReturn;

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

@@ -2,6 +2,5 @@ import { normalizeProps, reflect, useActor } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
 export function createToast(props) {
     const [state, send] = useActor(props);
-    const api = $derived(reflect(() => toast.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => toast.connect(state, send, normalizeProps));
 }

package/dist/toast/create-toaster.svelte.js

@@ -13,9 +13,8 @@ export function createToaster(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => ({
+    return reflect(() => ({
         machine,
         ...toast.group.connect(machine, machine.send, normalizeProps),
-    })));
-    return api;
+    }));
 }

package/dist/toast/description.svelte

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

package/dist/toast/ghost-after.svelte

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

package/dist/toast/ghost-before.svelte

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

package/dist/toast/root.svelte

@@ -10,7 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getToastContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: ToastProps = $props();
+  let {this: e, asChild, children, ...props}: ToastProps = $props();
 
   let toast = getToastContext();
 
@@ -20,7 +20,7 @@
 {#if asChild}
   {@render asChild(mergedProps, toast)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     <div {...toast.getGhostBeforeProps()}></div>
     {@render children?.(toast)}
     <div {...toast.getGhostAfterProps()}></div>

package/dist/toast/title.svelte

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

package/dist/toast/toaster.svelte

@@ -16,7 +16,7 @@
   import * as toast from '@zag-js/toast';
   import ToastActor from './actor.svelte';
 
-  let {toaster, children, ...props}: ToasterProps = $props();
+  let {this: e, toaster, children, ...props}: ToasterProps = $props();
 
   let [snapshot, send] = useMachine(toaster.machine);
 
@@ -27,7 +27,7 @@
 </script>
 
 <Portal>
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {#each toasts as toast (toast.id)}
       <ToastActor actor={toast}>
         {#snippet children$(ctx)}

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

@@ -1,2 +1,2 @@
 import type { CreateToggleGroupReturn } from './create-toggle-group.svelte.js';
-export declare const getToggleGroupContext: () => CreateToggleGroupReturn, setToggleGroupContext: (context: CreateToggleGroupReturn | (() => CreateToggleGroupReturn)) => void;
+export declare const getToggleGroupContext: () => CreateToggleGroupReturn, setToggleGroupContext: (context: CreateToggleGroupReturn | (() => CreateToggleGroupReturn)) => CreateToggleGroupReturn;

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

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

package/dist/toggle-group/item.svelte

@@ -11,25 +11,25 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getToggleGroupContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: ToggleGroupItemProps = $props();
+  let {this: e, asChild, children, ...props}: ToggleGroupItemProps = $props();
 
   let toggleGroup = getToggleGroupContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['value', 'disabled'])(props),
   );
 
   let itemState = $derived(toggleGroup.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, toggleGroup.getItemProps(itemProps)),
+    mergeProps(localProps, toggleGroup.getItemProps(itemProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.(itemState)}
   </button>
 {/if}

package/dist/toggle-group/root.svelte

@@ -19,9 +19,9 @@
   import {setToggleGroupContext} from './context.svelte.js';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
 
-  let {asChild, children, ...props}: ToggleGroupProps = $props();
+  let {this: e, asChild, children, ...props}: ToggleGroupProps = $props();
 
-  let [toggleGroupProps, otherProps] = $derived(
+  let [toggleGroupProps, localProps] = $derived(
     createSplitProps<CreateToggleGroupProps>([
       'id',
       'ids',
@@ -38,7 +38,7 @@
   let toggleGroup = createToggleGroup(reflect(() => toggleGroupProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, toggleGroup.getRootProps()),
+    mergeProps(localProps, toggleGroup.getRootProps()),
   );
 
   setToggleGroupContext(toggleGroup);
@@ -47,7 +47,7 @@
 {#if asChild}
   {@render asChild(mergedProps, toggleGroup)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(toggleGroup)}
   </div>
 {/if}

package/dist/tooltip/arrow-tip.svelte

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

package/dist/tooltip/arrow.svelte

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

package/dist/tooltip/content.svelte

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

@@ -1,2 +1,2 @@
 import type { CreateTooltipReturn } from './create-tooltip.svelte.js';
-export declare const getTooltipContext: () => CreateTooltipReturn, setTooltipContext: (context: CreateTooltipReturn | (() => CreateTooltipReturn)) => void;
+export declare const getTooltipContext: () => CreateTooltipReturn, setTooltipContext: (context: CreateTooltipReturn | (() => CreateTooltipReturn)) => CreateTooltipReturn;

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

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