ui-ingredients 0.0.44 → 0.0.46

package/dist/switch/thumb.svelte

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

package/dist/tabs/content.svelte

@@ -11,23 +11,23 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getTabsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TabsContentProps = $props();
+  let {this: e, asChild, children, ...props}: TabsContentProps = $props();
 
   let tabs = getTabsContext();
 
-  let [contentProps, otherProps] = $derived(
+  let [contentProps, localProps] = $derived(
     createSplitProps<ContentProps>(['value'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, tabs.getContentProps(contentProps)),
+    mergeProps(localProps, tabs.getContentProps(contentProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreateTabsReturn } from './create-tabs.svelte.js';
-export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => void;
+export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => CreateTabsReturn;

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

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

package/dist/tabs/list.svelte

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

package/dist/tabs/root.svelte

@@ -19,9 +19,9 @@
   import {setTabsContext} from './context.svelte.js';
   import {createTabs} from './create-tabs.svelte.js';
 
-  let {asChild, children, ...props}: TabsProps = $props();
+  let {this: e, asChild, children, ...props}: TabsProps = $props();
 
-  let [tabsProps, otherProps] = $derived(
+  let [tabsProps, localProps] = $derived(
     createSplitProps<CreateTabsProps>([
       'id',
       'ids',
@@ -38,7 +38,7 @@
 
   let tabs = createTabs(reflect(() => tabsProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, tabs.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, tabs.getRootProps()));
 
   setTabsContext(tabs);
 </script>
@@ -46,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tabs)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(tabs)}
   </div>
 {/if}

package/dist/tabs/trigger.svelte

@@ -11,23 +11,23 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getTabsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TabsTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: TabsTriggerProps = $props();
 
   let tabs = getTabsContext();
 
-  let [triggerProps, otherProps] = $derived(
+  let [triggerProps, localProps] = $derived(
     createSplitProps<TriggerProps>(['value', 'disabled'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, tabs.getTriggerProps(triggerProps)),
+    mergeProps(localProps, tabs.getTriggerProps(triggerProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/tags-input/clear-trigger.svelte

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/tags-input';
 import type { CreateTagsInputReturn } from './create-tags-input.svelte.js';
-export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => void;
-export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => CreateTagsInputReturn;
+export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/tags-input/control.svelte

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

package/dist/tags-input/create-tags-input.svelte.js

@@ -9,7 +9,7 @@ export function createTagsInput(props) {
     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,9 +22,9 @@ export function createTagsInput(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(tagsInput.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = tagsInput.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createTagsInput(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

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

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

package/dist/tags-input/input.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTagsInputContext} from './context.svelte.js';
 
-  let {asChild, ...props}: TagsInputInputProps = $props();
+  let {this: e, asChild, ...props}: TagsInputInputProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -18,5 +18,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/tags-input/item-delete-trigger.svelte

@@ -12,7 +12,12 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemDeleteTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TagsInputItemDeleteTriggerProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/tags-input/item-input.svelte

@@ -12,7 +12,7 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: TagsInputItemInputProps = $props();
+  let {this: e, asChild, ...props}: TagsInputItemInputProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -25,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/tags-input/item-preview.svelte

@@ -12,7 +12,12 @@
     getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemPreviewProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TagsInputItemPreviewProps = $props();
 
   let tagsInput = getTagsInputContext();
   let itemProps = getTagsInputItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/tags-input/item-text.svelte

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

package/dist/tags-input/item.svelte

@@ -14,18 +14,18 @@
     setTagsInputItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputItemProps = $props();
+  let {this: e, asChild, children, ...props}: TagsInputItemProps = $props();
 
   let tagsInput = getTagsInputContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index', 'value', 'disabled'])(props),
   );
 
   let itemState = $derived(tagsInput.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, tagsInput.getItemProps(itemProps)),
+    mergeProps(localProps, tagsInput.getItemProps(itemProps)),
   );
 
   setTagsInputItemPropsContext(() => 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/tags-input/label.svelte

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

package/dist/tags-input/root.svelte

@@ -19,9 +19,9 @@
   import {setTagsInputContext} from './context.svelte.js';
   import {createTagsInput} from './create-tags-input.svelte.js';
 
-  let {asChild, children, ...props}: TagsInputProps = $props();
+  let {this: e, asChild, children, ...props}: TagsInputProps = $props();
 
-  let [tagsInputProps, otherProps] = $derived(
+  let [tagsInputProps, localProps] = $derived(
     createSplitProps<CreateTagsInputProps>([
       'id',
       'ids',
@@ -55,7 +55,7 @@
 
   let tagsInput = createTagsInput(reflect(() => tagsInputProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, tagsInput.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, tagsInput.getRootProps()));
 
   setTagsInputContext(tagsInput);
 </script>
@@ -63,7 +63,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tagsInput)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(tagsInput)}
   </div>
 {/if}

package/dist/time-picker/clear-trigger.svelte

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

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

package/dist/time-picker/content.svelte

@@ -11,7 +11,7 @@
   import type {Action} from 'svelte/action';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerContentProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerContentProps = $props();
 
   let timePicker = getTimePickerContext();
   let presence = getPresenceContext();
@@ -28,7 +28,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/time-picker/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateTimePickerReturn } from './create-time-picker.svelte.js';
-export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => void;
+export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => CreateTimePickerReturn;

package/dist/time-picker/control.svelte

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

package/dist/time-picker/create-time-picker.svelte.js

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

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

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

package/dist/time-picker/input.svelte

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

package/dist/time-picker/label.svelte

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

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

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: TimePickerMinuteCellProps =
-    $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: TimePickerMinuteCellProps = $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/period-cell.svelte

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