ui-ingredients 0.0.19 → 0.0.21

package/dist/dialog/title.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: DialogTitleProps = $props();
 
-  let context = dialogContext.get();
+  let dialog = dialogContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+  let attrs = $derived(mergeProps(props, dialog.getTitleProps()));
 </script>
 
 <div {...attrs}>

package/dist/dialog/trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: DialogTriggerProps = $props();
 
-  let context = dialogContext.get();
+  let dialog = dialogContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, dialog.getTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/editable/area.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableAreaProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getAreaProps()));
+  let attrs = $derived(mergeProps(props, editable.getAreaProps()));
 </script>
 
 <div {...attrs}>

package/dist/editable/cancel-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableCancelTriggerProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCancelTriggerProps()));
+  let attrs = $derived(mergeProps(props, editable.getCancelTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/editable/control.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableControlProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getControlProps()));
+  let attrs = $derived(mergeProps(props, editable.getControlProps()));
 </script>
 
 <div {...attrs}>

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

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as editable from '@zag-js/editable';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createEditable(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(editable.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         edit: props.defaultEdit,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         'edit.controlled': props.edit != null,
     }));
     const api = $derived(reflect(() => editable.connect(state, send, normalizeProps)));

package/dist/editable/edit-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableEditTriggerProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getEditTriggerProps()));
+  let attrs = $derived(mergeProps(props, editable.getEditTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/editable/input.svelte

@@ -10,9 +10,9 @@
 
   let {...props}: EditableInputProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getInputProps()));
+  let attrs = $derived(mergeProps(props, editable.getInputProps()));
 </script>
 
 <input {...attrs} />

package/dist/editable/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableLabelProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, editable.getLabelProps()));
 </script>
 
 <label {...attrs}>

package/dist/editable/preview.svelte

@@ -10,15 +10,15 @@
 
   let {children, ...props}: EditablePreviewProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPreviewProps()));
+  let attrs = $derived(mergeProps(props, editable.getPreviewProps()));
 </script>
 
 <div {...attrs}>
   {#if children}
     {@render children?.()}
   {:else}
-    {context.value}
+    {editable.value}
   {/if}
 </div>

package/dist/editable/root.svelte

@@ -3,7 +3,7 @@
   import type {CreateEditableProps, CreateEditableReturn} from './create-editable.svelte.js';
 
   export interface EditableProps extends CreateEditableProps {
-    children?: Snippet<[api: CreateEditableReturn]>;
+    children?: Snippet<[editable: CreateEditableReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: EditableProps = $props();
 
-  let context = createEditable(props);
+  let editable = createEditable(props);
 
-  editableContext.set(context);
+  editableContext.set(editable);
 </script>
 
-{@render children?.(context)}
+{@render children?.(editable)}

package/dist/editable/submit-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: EditableSubmitTriggerProps = $props();
 
-  let context = editableContext.get();
+  let editable = editableContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getSubmitTriggerProps()));
+  let attrs = $derived(mergeProps(props, editable.getSubmitTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/environment-provider/root.svelte

@@ -24,13 +24,13 @@
     }
   });
 
-  let context: Environment = $derived({
+  let environment: Environment = $derived({
     getRootNode,
     getDocument: () => getDocument(getRootNode()),
     getWindow: () => getWindow(getRootNode()),
   });
 
-  environmentContext.set(() => context);
+  environmentContext.set(() => environment);
 </script>
 
 {@render children()}

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

@@ -1,8 +1,5 @@
-import * as fileUpload from '@zag-js/file-upload';
-export interface CreateFileUploadContextProps extends fileUpload.Context {
-}
-export interface CreateFileUploadContextReturn extends ReturnType<typeof createFileUploadContext> {
-}
-export declare function createFileUploadContext(props: CreateFileUploadContextProps): fileUpload.Api<any>;
-export declare function setFileUploadContext(value: CreateFileUploadContextReturn): CreateFileUploadContextReturn;
-export declare function useFileUploadContext(): CreateFileUploadContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { ItemProps } from '@zag-js/file-upload';
+import type { CreateFileUploadReturn } from './create-file-upload.svelte.js';
+export declare const fileUploadContext: Context<CreateFileUploadReturn>;
+export declare const fileUploadItemPropsContext: Context<ItemProps>;

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

@@ -1,14 +1,3 @@
-import * as fileUpload from '@zag-js/file-upload';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createFileUploadContext(props) {
-    const [state, send] = useMachine(fileUpload.machine(props));
-    const api = $derived(reflect(() => fileUpload.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setFileUploadContext(value) {
-    return setContext('FileUpload', value);
-}
-export function useFileUploadContext() {
-    return getContext('FileUpload');
-}
+import { Context } from '../utils.svelte.js';
+export const fileUploadContext = new Context('FileUpload');
+export const fileUploadItemPropsContext = new Context('FileUploadItem');

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

@@ -0,0 +1,7 @@
+import * as fileUpload from '@zag-js/file-upload';
+export interface CreateFileUploadProps extends Omit<fileUpload.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateFileUploadReturn extends fileUpload.Api<any> {
+}
+export declare function createFileUpload(props: CreateFileUploadProps): CreateFileUploadReturn;

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

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as fileUpload from '@zag-js/file-upload';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createFileUpload(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const [state, send] = useMachine(fileUpload.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: locale?.dir,
+        locale: props.locale ?? locale?.locale,
+        getRootNode: environment?.getRootNode,
+    }));
+    const api = $derived(reflect(() => fileUpload.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/file-upload/dropzone.svelte

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadDropzoneProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadDropzoneProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getDropzoneProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Dropzone: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Dropzone: $$__sveltets_2_IsomorphicComponent<FileUploadDropzoneProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Dropzone = InstanceType<typeof Dropzone>;
 export default Dropzone;

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

@@ -1,3 +1,18 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadHiddenInputProps extends HtmlProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+
+  let {...props}: FileUploadHiddenInputProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HiddenInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const HiddenInput: $$__sveltets_2_IsomorphicComponent<FileUploadHiddenInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type HiddenInput = InstanceType<typeof HiddenInput>;
 export default HiddenInput;

package/dist/file-upload/index.d.ts

@@ -1 +1,14 @@
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
+export type { FileUploadDropzoneProps } from './dropzone.svelte';
 export * as FileUpload from './file-upload.js';
+export type { FileUploadHiddenInputProps } from './hidden-input.svelte';
+export type { FileUploadItemDeleteTriggerProps } from './item-delete-trigger.svelte';
+export type { FileUploadItemGroupProps } from './item-group.svelte';
+export type { FileUploadItemNameProps } from './item-name.svelte';
+export type { FileUploadItemPreviewImageProps } from './item-preview-image.svelte';
+export type { FileUploadItemPreviewProps } from './item-preview.svelte';
+export type { FileUploadItemSizeTextProps } from './item-size-text.svelte';
+export type { FileUploadItemProps } from './item.svelte';
+export type { FileUploadLabelProps } from './label.svelte';
+export type { FileUploadProps } from './root.svelte';
+export type { FileUploadTriggerProps } from './trigger.svelte';

package/dist/file-upload/index.js

@@ -1 +1,2 @@
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export * as FileUpload from './file-upload.js';

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

@@ -1,3 +1,21 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemDeleteTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemDeleteTriggerProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemDeleteTriggerProps(itemProps)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemDeleteTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemDeleteTrigger: $$__sveltets_2_IsomorphicComponent<FileUploadItemDeleteTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemDeleteTrigger = InstanceType<typeof ItemDeleteTrigger>;
 export default ItemDeleteTrigger;

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

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemGroupProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemGroupProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemGroupProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/file-upload/item-group.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemGroup: $$__sveltets_2_IsomorphicComponent<FileUploadItemGroupProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemGroup = InstanceType<typeof ItemGroup>;
 export default ItemGroup;

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

@@ -1,3 +1,25 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemNameProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemNameProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemNameProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {itemProps.file.name}
+  {/if}
+</div>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemName: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemName: $$__sveltets_2_IsomorphicComponent<FileUploadItemNameProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemName = InstanceType<typeof ItemName>;
 export default ItemName;

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

@@ -1,3 +1,27 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemPreviewImageProps extends HtmlProps<'img'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {...props}: FileUploadItemPreviewImageProps = $props();
+
+  let url = $state('');
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemPreviewImageProps({url, ...itemProps})));
+
+  $effect(() => {
+    fileUpload.createFileUrl(itemProps.file, (result) => {
+      url = result;
+    });
+  });
+</script>
+
+<img {...attrs} />

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemPreviewImage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemPreviewImage: $$__sveltets_2_IsomorphicComponent<FileUploadItemPreviewImageProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemPreviewImage = InstanceType<typeof ItemPreviewImage>;
 export default ItemPreviewImage;

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

@@ -1,3 +1,21 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemPreviewProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemPreviewProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemPreviewProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemPreview: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemPreview: $$__sveltets_2_IsomorphicComponent<FileUploadItemPreviewProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemPreview = InstanceType<typeof ItemPreview>;
 export default ItemPreview;

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

@@ -1,3 +1,25 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemSizeTextProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemSizeTextProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemSizeTextProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {fileUpload.getFileSize(itemProps.file)}
+  {/if}
+</div>