ui-ingredients 0.0.44 → 0.0.46

package/dist/editable/submit-trigger.svelte

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

@@ -3,4 +3,4 @@ export interface Environment {
     getDocument: () => Document;
     getWindow: () => Window & typeof globalThis;
 }
-export declare const getEnvironmentContext: () => Environment, setEnvironmentContext: (context: Environment | (() => Environment)) => void;
+export declare const getEnvironmentContext: () => Environment, setEnvironmentContext: (context: Environment | (() => Environment)) => Environment;

package/dist/environment-provider/root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import {type Environment} from './context.svelte.js';
 
   export interface EnvironmentProviderProps {
     rootNode?:
@@ -20,21 +19,19 @@
 
   let elem: HTMLSpanElement | null = $state(null);
 
-  let getRootNode = $derived.by(() => {
+  function getRootNode() {
     if (rootNode) {
-      return typeof rootNode === 'function' ? rootNode : () => rootNode;
+      return typeof rootNode === 'function' ? rootNode() : rootNode;
     } else {
-      return () => elem?.ownerDocument ?? document;
+      return elem?.ownerDocument ?? document;
     }
-  });
+  }
 
-  let environment: Environment = $derived({
+  setEnvironmentContext({
     getRootNode,
     getDocument: () => getDocument(getRootNode()),
     getWindow: () => getWindow(getRootNode()),
   });
-
-  setEnvironmentContext(() => environment);
 </script>
 
 {@render children()}

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

@@ -1,2 +1,2 @@
 import type { CreateFieldReturn } from './create-field.svelte.js';
-export declare const getFieldContext: () => CreateFieldReturn, setFieldContext: (context: CreateFieldReturn | (() => CreateFieldReturn)) => void;
+export declare const getFieldContext: () => CreateFieldReturn, setFieldContext: (context: CreateFieldReturn | (() => CreateFieldReturn)) => CreateFieldReturn;

package/dist/field/create-field.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { HtmlProps } from '../types.js';
 interface ElementIds {
     root?: string;
     label?: string;
@@ -16,25 +15,5 @@ export interface CreateFieldProps {
 }
 export interface CreateFieldReturn extends ReturnType<typeof createField> {
 }
-export declare function createField(props: CreateFieldProps): {
-    readonly ids: {
-        root: string;
-        label: string;
-        control: string;
-        errorText: string;
-        helperText: string;
-    };
-    readonly disabled: boolean;
-    readonly required: boolean;
-    readonly readOnly: boolean;
-    readonly invalid: boolean;
-    readonly 'aria-describedby': string;
-    getRootProps: () => HtmlProps<"div">;
-    getLabelProps: () => HtmlProps<"label">;
-    getErrorTextProps: () => HtmlProps<"div">;
-    getHelperTextProps: () => HtmlProps<"div">;
-    getInputProps: () => HtmlProps<"input">;
-    getSelectProps: () => HtmlProps<"select">;
-    getTextareaProps: () => HtmlProps<"textarea">;
-};
+export declare function createField(props: CreateFieldProps): any;
 export {};

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

@@ -1,5 +1,6 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
+import { reflect } from '@zag-js/svelte';
 import { uid } from 'uid';
 import { parts } from './anatomy.js';
 export function createField(props) {
@@ -136,25 +137,13 @@ export function createField(props) {
             'data-readonly': dataAttr(readOnly),
         };
     }
-    return {
-        get ids() {
-            return ids;
-        },
-        get disabled() {
-            return disabled;
-        },
-        get required() {
-            return required;
-        },
-        get readOnly() {
-            return readOnly;
-        },
-        get invalid() {
-            return invalid;
-        },
-        get 'aria-describedby'() {
-            return ariaDescribedby;
-        },
+    return reflect(() => ({
+        ids,
+        disabled,
+        required,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedby,
         getRootProps,
         getLabelProps,
         getErrorTextProps,
@@ -162,5 +151,5 @@ export function createField(props) {
         getInputProps,
         getSelectProps,
         getTextareaProps,
-    };
+    }));
 }

package/dist/field/error-text.svelte

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

package/dist/field/helper-text.svelte

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

package/dist/field/input.svelte

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

package/dist/field/label.svelte

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

package/dist/field/root.svelte

@@ -19,9 +19,9 @@
   import {setFieldContext} from './context.svelte.js';
   import {createField} from './create-field.svelte.js';
 
-  let {asChild, children, ...props}: FieldProps = $props();
+  let {this: e, asChild, children, ...props}: FieldProps = $props();
 
-  let [fieldProps, otherProps] = $derived(
+  let [fieldProps, localProps] = $derived(
     createSplitProps<CreateFieldProps>([
       'id',
       'ids',
@@ -34,7 +34,7 @@
 
   let field = createField(reflect(() => fieldProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, field.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, field.getRootProps()));
 
   setFieldContext(field);
 </script>
@@ -42,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, field)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(field)}
   </div>
 {/if}

package/dist/field/select.svelte

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

package/dist/field/textarea.svelte

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

package/dist/file-upload/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/file-upload';
 import type { CreateFileUploadReturn } from './create-file-upload.svelte.js';
-export declare const getFileUploadContext: () => CreateFileUploadReturn, setFileUploadContext: (context: CreateFileUploadReturn | (() => CreateFileUploadReturn)) => void;
-export declare const getFileUploadItemPropsContext: () => ItemProps, setFileUploadItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getFileUploadContext: () => CreateFileUploadReturn, setFileUploadContext: (context: CreateFileUploadReturn | (() => CreateFileUploadReturn)) => CreateFileUploadReturn;
+export declare const getFileUploadItemPropsContext: () => ItemProps, setFileUploadItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/file-upload/create-file-upload.svelte.js

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

package/dist/file-upload/dropzone.svelte

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

package/dist/file-upload/hidden-input.svelte

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

package/dist/file-upload/item-delete-trigger.svelte

@@ -12,8 +12,12 @@
     getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadItemDeleteTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FileUploadItemDeleteTriggerProps = $props();
 
   let fileUpload = getFileUploadContext();
   let itemProps = getFileUploadItemPropsContext();
@@ -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/file-upload/item-group.svelte

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

package/dist/file-upload/item-name.svelte

@@ -12,7 +12,12 @@
     getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadItemNameProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FileUploadItemNameProps = $props();
 
   let fileUpload = getFileUploadContext();
   let itemProps = getFileUploadItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/file-upload/item-preview-image.svelte

@@ -12,7 +12,7 @@
     getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, ...props}: FileUploadItemPreviewImageProps = $props();
+  let {this: e, asChild, ...props}: FileUploadItemPreviewImageProps = $props();
 
   let url = $state('');
 
@@ -33,5 +33,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <img {...mergedProps} />
+  <img bind:this={e} {...mergedProps} />
 {/if}

package/dist/file-upload/item-preview.svelte

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

package/dist/file-upload/item-size-text.svelte

@@ -12,7 +12,12 @@
     getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadItemSizeTextProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FileUploadItemSizeTextProps = $props();
 
   let fileUpload = getFileUploadContext();
   let itemProps = getFileUploadItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/file-upload/item.svelte

@@ -14,16 +14,16 @@
     setFileUploadItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadItemProps = $props();
+  let {this: e, asChild, children, ...props}: FileUploadItemProps = $props();
 
   let fileUpload = getFileUploadContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['file'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, fileUpload.getItemProps(itemProps)),
+    mergeProps(localProps, fileUpload.getItemProps(itemProps)),
   );
 
   setFileUploadItemPropsContext(() => itemProps);
@@ -32,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/file-upload/label.svelte

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

package/dist/file-upload/root.svelte

@@ -19,9 +19,9 @@
   import {setFileUploadContext} from './context.svelte.js';
   import {createFileUpload} from './create-file-upload.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadProps = $props();
+  let {this: e, asChild, children, ...props}: FileUploadProps = $props();
 
-  let [fileUploadProps, otherProps] = $derived(
+  let [fileUploadProps, localProps] = $derived(
     createSplitProps<CreateFileUploadProps>([
       'id',
       'ids',
@@ -47,7 +47,7 @@
 
   let fileUpload = createFileUpload(reflect(() => fileUploadProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, fileUpload.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, fileUpload.getRootProps()));
 
   setFileUploadContext(fileUpload);
 </script>
@@ -55,7 +55,7 @@
 {#if asChild}
   {@render asChild(mergedProps, fileUpload)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(fileUpload)}
   </div>
 {/if}

package/dist/file-upload/trigger.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getFileUploadContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FileUploadTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: FileUploadTriggerProps = $props();
 
   let fileUpload = getFileUploadContext();
 
@@ -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/floating-panel/body.svelte

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

package/dist/floating-panel/close-trigger.svelte

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

@@ -11,7 +11,12 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelContentProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
   let presence = getPresenceContext();
@@ -29,7 +34,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/floating-panel/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateFloatingPanelReturn } from './create-floating-panel.svelte.js';
-export declare const getFloatingPanelContext: () => CreateFloatingPanelReturn, setFloatingPanelContext: (context: CreateFloatingPanelReturn | (() => CreateFloatingPanelReturn)) => void;
+export declare const getFloatingPanelContext: () => CreateFloatingPanelReturn, setFloatingPanelContext: (context: CreateFloatingPanelReturn | (() => CreateFloatingPanelReturn)) => CreateFloatingPanelReturn;