ui-ingredients 0.0.44 → 0.0.46

package/dist/combobox/positioner.svelte

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

@@ -23,15 +23,15 @@
   import {setComboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
 
-  let {asChild, children, ...props}: ComboboxProps<T> = $props();
+  let {this: e, asChild, children, ...props}: ComboboxProps<T> = $props();
 
-  let [presenceStrategyProps, otherProps] = $derived(
+  let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
-  let [comboboxProps, elementProps] = $derived(
+  let [comboboxProps, localProps] = $derived(
     createSplitProps<CreateComboboxProps<T>>([
       'id',
       'ids',
@@ -74,24 +74,18 @@
       'onPointerDownOutside',
       'getSelectionValue',
       'scrollToIndexFn',
-    ])(otherProps),
+    ])(rest),
   );
 
   let combobox = createCombobox(reflect(() => comboboxProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: combobox.open,
+    })),
+  );
 
-  let presence = createPresence({
-    get present() {
-      return combobox.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
-
-  let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, combobox.getRootProps()));
 
   setComboboxContext(combobox);
   setPresenceContext(presence);
@@ -100,7 +94,7 @@
 {#if asChild}
   {@render asChild(mergedProps, combobox)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(combobox)}
   </div>
 {/if}

package/dist/combobox/trigger.svelte

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

@@ -1,5 +1,10 @@
 import type { GenericObject } from './types.js';
-type ContextGetter<T extends GenericObject> = () => T;
-type ContextSetter<T extends GenericObject> = (context: T | (() => T)) => void;
-export declare function createContext<T extends GenericObject>(key: string, strict?: boolean): [getContext: ContextGetter<T>, setContext: ContextSetter<T>];
+type GetContext<T extends GenericObject> = () => T;
+type SetContext<T extends GenericObject> = (context: T | (() => T)) => T;
+type HasContext = () => boolean;
+export declare function createContext<T extends GenericObject>(key: string, strict?: boolean): [
+    getContext: GetContext<T>,
+    setContext: SetContext<T>,
+    hasContext: HasContext
+];
 export {};

package/dist/create-context.svelte.js

@@ -1,25 +1,20 @@
 import { reflect } from '@zag-js/svelte';
 import { getContext, hasContext, setContext } from 'svelte';
 export function createContext(key, strict = true) {
-    function g() {
-        if (strict && !hasContext(key)) {
-            const e = new Error();
-            e.name = 'ContextError';
-            e.message = `No context found for '${key}'`;
-            throw e;
-        }
+    const has = () => hasContext(key);
+    const set = (context) => {
+        return setContext(key, typeof context === 'function' ? reflect(context) : context);
+    };
+    const get = () => {
+        if (strict && !has())
+            throw err(key);
         return getContext(key);
-    }
-    function s(context) {
-        const v = $derived.by(() => {
-            if (typeof context === 'function') {
-                return reflect(context);
-            }
-            else {
-                return context;
-            }
-        });
-        setContext(key, v);
-    }
-    return [g, s];
+    };
+    return [get, set, has];
+}
+function err(k) {
+    const e = new Error();
+    e.name = 'ContextError';
+    e.message = "No context found for '%s'".replace('%s', k);
+    throw e;
 }

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

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

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

@@ -1,7 +1,7 @@
 import type { DayTableCellProps, TableCellProps, TableProps, ViewProps } from '@zag-js/date-picker';
 import type { CreateDatePickerReturn } from './create-date-picker.svelte.js';
-export declare const getDatePickerContext: () => CreateDatePickerReturn, setDatePickerContext: (context: CreateDatePickerReturn | (() => CreateDatePickerReturn)) => void;
-export declare const getDatePickerViewPropsContext: () => ViewProps, setDatePickerViewPropsContext: (context: ViewProps | (() => ViewProps)) => void;
-export declare const getDatePickerTablePropsContext: () => TableProps, setDatePickerTablePropsContext: (context: TableProps | (() => TableProps)) => void;
-export declare const getDatePickerTableCellPropsContext: () => TableCellProps, setDatePickerTableCellPropsContext: (context: TableCellProps | (() => TableCellProps)) => void;
-export declare const getDatePickerDayTableCellPropsContext: () => DayTableCellProps, setDatePickerDayTableCellPropsContext: (context: DayTableCellProps | (() => DayTableCellProps)) => void;
+export declare const getDatePickerContext: () => CreateDatePickerReturn, setDatePickerContext: (context: CreateDatePickerReturn | (() => CreateDatePickerReturn)) => CreateDatePickerReturn;
+export declare const getDatePickerViewPropsContext: () => ViewProps, setDatePickerViewPropsContext: (context: ViewProps | (() => ViewProps)) => ViewProps;
+export declare const getDatePickerTablePropsContext: () => TableProps, setDatePickerTablePropsContext: (context: TableProps | (() => TableProps)) => TableProps;
+export declare const getDatePickerTableCellPropsContext: () => TableCellProps, setDatePickerTableCellPropsContext: (context: TableCellProps | (() => TableCellProps)) => TableCellProps;
+export declare const getDatePickerDayTableCellPropsContext: () => DayTableCellProps, setDatePickerDayTableCellPropsContext: (context: DayTableCellProps | (() => DayTableCellProps)) => DayTableCellProps;

package/dist/date-picker/control.svelte

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

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

@@ -24,7 +24,7 @@ export function createDatePicker(props) {
         getRootNode: environment?.getRootNode,
     });
     const [state, send] = useMachine(datePicker.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = datePicker.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createDatePicker(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/date-picker/day-table-cell-trigger.svelte

@@ -12,8 +12,12 @@
     getDatePickerDayTableCellPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerDayTableCellTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerDayTableCellTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
   let tableCellProps = getDatePickerDayTableCellPropsContext();
@@ -26,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/date-picker/day-table-cell.svelte

@@ -17,11 +17,16 @@
     setDatePickerDayTableCellPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerDayTableCellProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerDayTableCellProps = $props();
 
   let datePicker = getDatePickerContext();
 
-  let [tableCellProps, otherProps] = $derived(
+  let [tableCellProps, localProps] = $derived(
     createSplitProps<DayTableCellProps>(['value', 'disabled', 'visibleRange'])(
       props,
     ),
@@ -32,7 +37,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, datePicker.getDayTableCellProps(tableCellProps)),
+    mergeProps(localProps, datePicker.getDayTableCellProps(tableCellProps)),
   );
 
   setDatePickerDayTableCellPropsContext(() => tableCellProps);
@@ -41,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tableCellState)}
 {:else}
-  <td {...mergedProps}>
+  <td bind:this={e} {...mergedProps}>
     {@render children?.(tableCellState)}
   </td>
 {/if}

package/dist/date-picker/input.svelte

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

package/dist/date-picker/label.svelte

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

package/dist/date-picker/month-select.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getDatePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerMonthSelectProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerMonthSelectProps = $props();
 
   let datePicker = getDatePickerContext();
 
@@ -36,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <select {...mergedProps}>
+  <select bind:this={e} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/date-picker/month-table-cell-trigger.svelte

@@ -12,8 +12,12 @@
     getDatePickerTableCellPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerMonthTableCellTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerMonthTableCellTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
   let tableCellProps = getDatePickerTableCellPropsContext();
@@ -26,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/date-picker/month-table-cell.svelte

@@ -14,11 +14,16 @@
     setDatePickerTableCellPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerMonthTableCellProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerMonthTableCellProps = $props();
 
   let datePicker = getDatePickerContext();
 
-  let [tableCellProps, otherProps] = $derived(
+  let [tableCellProps, localProps] = $derived(
     createSplitProps<TableCellProps>(['value', 'disabled', 'columns'])(props),
   );
 
@@ -27,7 +32,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, datePicker.getMonthTableCellProps(tableCellProps)),
+    mergeProps(localProps, datePicker.getMonthTableCellProps(tableCellProps)),
   );
 
   setDatePickerTableCellPropsContext(() => tableCellProps);
@@ -36,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps, tableCellState)}
 {:else}
-  <td {...mergedProps}>
+  <td bind:this={e} {...mergedProps}>
     {@render children?.(tableCellState)}
   </td>
 {/if}

package/dist/date-picker/next-trigger.svelte

@@ -12,7 +12,12 @@
     getDatePickerViewPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerNextTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerNextTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
   let viewProps = getDatePickerViewPropsContext();
@@ -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/date-picker/positioner.svelte

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

package/dist/date-picker/preset-trigger.svelte

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getDatePickerContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: DatePickerPresetTriggerProps =
-    $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: DatePickerPresetTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
 
@@ -23,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/date-picker/prev-trigger.svelte

@@ -12,7 +12,12 @@
     getDatePickerViewPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerPrevTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerPrevTriggerProps = $props();
 
   let datePicker = getDatePickerContext();
   let viewProps = getDatePickerViewPropsContext();
@@ -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/date-picker/range-text.svelte

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

package/dist/date-picker/root.svelte

@@ -23,13 +23,13 @@
   import {setDatePickerContext} from './context.svelte.js';
   import {createDatePicker} from './create-date-picker.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerProps = $props();
+  let {this: e, asChild, children, ...props}: DatePickerProps = $props();
 
-  let [presenceStrategyProps, otherProps] = $derived(
+  let [presenceStrategyProps, rest] = $derived(
     createSplitProps<PresenceStrategyProps>([])(props),
   );
 
-  let [datePickerProps, elementProps] = $derived(
+  let [datePickerProps, localProps] = $derived(
     createSplitProps<CreateDatePickerProps>([
       'id',
       'ids',
@@ -59,27 +59,19 @@
       'onValueChange',
       'onFocusChange',
       'isDateUnavailable',
-    ])(otherProps),
+    ])(rest),
   );
 
   let datePicker = createDatePicker(reflect(() => datePickerProps));
-
-  let presence = createPresence({
-    get present() {
-      return datePicker.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
-
-  let mergedProps = $derived(
-    mergeProps(elementProps, datePicker.getRootProps()),
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: datePicker.open,
+    })),
   );
 
+  let mergedProps = $derived(mergeProps(localProps, datePicker.getRootProps()));
+
   setDatePickerContext(datePicker);
   setPresenceContext(presence);
 </script>
@@ -87,7 +79,7 @@
 {#if asChild}
   {@render asChild(mergedProps, datePicker)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(datePicker)}
   </div>
 {/if}

package/dist/date-picker/table-body.svelte

@@ -12,7 +12,12 @@
     getDatePickerTablePropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerTableBodyProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerTableBodyProps = $props();
 
   let datePicker = getDatePickerContext();
   let tableProps = getDatePickerTablePropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <tbody {...mergedProps}>
+  <tbody bind:this={e} {...mergedProps}>
     {@render children?.()}
   </tbody>
 {/if}

package/dist/date-picker/table-head.svelte

@@ -12,7 +12,12 @@
     getDatePickerTablePropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: DatePickerTableHeadProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: DatePickerTableHeadProps = $props();
 
   let datePicker = getDatePickerContext();
   let tableProps = getDatePickerTablePropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <thead {...mergedProps}>
+  <thead bind:this={e} {...mergedProps}>
     {@render children?.()}
   </thead>
 {/if}