@casinogate/ui 1.11.6 → 1.11.8

package/dist/assets/css/root.css

@@ -248,6 +248,9 @@
   .cgui\:\!m-0 {
     margin: calc(var(--cgui-spacing) * 0) !important;
   }
+  .cgui\:m-0 {
+    margin: calc(var(--cgui-spacing) * 0);
+  }
   .cgui\:mx-1 {
     margin-inline: calc(var(--cgui-spacing) * 1);
   }
@@ -454,6 +457,9 @@
   .cgui\:h-34 {
     height: calc(var(--cgui-spacing) * 34);
   }
+  .cgui\:h-40 {
+    height: calc(var(--cgui-spacing) * 40);
+  }
   .cgui\:h-100 {
     height: calc(var(--cgui-spacing) * 100);
   }
@@ -712,6 +718,9 @@
   .cgui\:scroll-py-1 {
     scroll-padding-block: calc(var(--cgui-spacing) * 1);
   }
+  .cgui\:list-none {
+    list-style-type: none;
+  }
   .cgui\:flex-col {
     flex-direction: column;
   }
@@ -1020,6 +1029,12 @@
   .cgui\:bg-surface-primary-light-active {
     background-color: var(--cg-ui-color-surface-primary-light-active);
   }
+  .cgui\:bg-surface-primary\/5 {
+    background-color: var(--cg-ui-color-surface-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-surface-primary) 5%, transparent);
+    }
+  }
   .cgui\:bg-surface-regular {
     background-color: var(--cg-ui-color-surface-regular);
   }
@@ -1053,6 +1068,12 @@
   .cgui\:bg-clip-padding {
     background-clip: padding-box;
   }
+  .cgui\:object-contain {
+    object-fit: contain;
+  }
+  .cgui\:object-cover {
+    object-fit: cover;
+  }
   .cgui\:p-0 {
     padding: calc(var(--cgui-spacing) * 0);
   }

package/dist/components/combobox/presets/async/combobox.async.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TItem extends CommandItem">
   import type { CommandCollection, CommandItem } from '../../../command/index.js';
   import type { ComboboxAsyncProps } from '../../types.js';
 
@@ -35,6 +35,7 @@
     portalDisabled = false,
     allowDeselect = true,
     triggerClass,
+    contentClass,
     size = 'default',
     variant = 'default',
     rounded = 'default',
@@ -56,7 +57,7 @@
     onSelect = noop,
 
     ...restProps
-  }: ComboboxAsyncProps = $props();
+  }: ComboboxAsyncProps<TItem> = $props();
 
   const isMultiple = type === 'multiple';
 
@@ -267,7 +268,7 @@
       behavior: 'smooth',
     });
   };
-  function onSelectItem(item: Omit<CommandItem, 'onSelect'>) {
+  function onSelectItem(item: CommandItem) {
     if (Array.isArray(value)) {
       let result = value;
       if (value.includes(item.value)) {
@@ -275,7 +276,7 @@
       } else {
         result = [...value, item.value];
       }
-      onSelect(result, item);
+      onSelect(result, item as TItem);
       value = result;
     } else {
       let result = value;
@@ -284,7 +285,7 @@
       } else {
         result = item.value;
       }
-      onSelect(result, item);
+      onSelect(result, item as TItem);
       value = result;
     }
 
@@ -359,7 +360,7 @@
   {#if itemSnippet}
     <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
       {#snippet child({ props })}
-        {@render itemSnippet?.({ item, props })}
+        {@render itemSnippet?.({ item: item as TItem, props })}
       {/snippet}
     </CommandPrimitive.Item>
   {:else}
@@ -412,7 +413,7 @@
   {@render renderTrigger()}
 
   <PopoverPrimitive.Portal disabled={portalDisabled}>
-    <PopoverPrimitive.Content class="cgui:overflow-hidden cgui:rounded-md">
+    <PopoverPrimitive.Content class={cn('cgui:overflow-hidden cgui:rounded-md', contentClass)}>
       <CommandPrimitive.Root shouldFilter={false} class="cgui:max-h-80">
         <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
 

package/dist/components/combobox/presets/async/combobox.async.svelte.d.ts

@@ -1,4 +1,26 @@
+import type { CommandItem } from '../../../command/index.js';
 import type { ComboboxAsyncProps } from '../../types.js';
-declare const Combobox: import("svelte").Component<ComboboxAsyncProps, {}, "value" | "open" | "items" | "searchValue">;
-type Combobox = ReturnType<typeof Combobox>;
+declare function $$render<TItem extends CommandItem>(): {
+    props: ComboboxAsyncProps<TItem>;
+    exports: {};
+    bindings: "value" | "open" | "items" | "searchValue";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends CommandItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "value" | "open" | "items" | "searchValue";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends CommandItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends CommandItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<TItem extends CommandItem> = InstanceType<typeof Combobox<TItem>>;
 export default Combobox;

package/dist/components/combobox/presets/root/combobox.svelte

@@ -38,6 +38,7 @@
     fullWidth = true,
     closeOnSelect,
     maxContentHeight,
+    contentClass,
     onSelect = noop,
     ...restProps
   }: ComboboxProps = $props();
@@ -83,7 +84,7 @@
     return typeof value === 'string' && value.trim() !== '';
   });
 
-  function onSelectItem(item: Omit<CommandItem, 'onSelect'>) {
+  function onSelectItem(item: CommandItem) {
     if (Array.isArray(value)) {
       let result = value;
       if (value.includes(item.value)) {
@@ -208,7 +209,7 @@
   {@render renderTrigger()}
 
   <PopoverPrimitive.Portal disabled={portalDisabled}>
-    <PopoverPrimitive.Content class="cgui:overflow-hidden cgui:rounded-md">
+    <PopoverPrimitive.Content class={cn('cgui:overflow-hidden cgui:rounded-md', contentClass)}>
       <CommandPrimitive.Root>
         <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
 

package/dist/components/combobox/types.d.ts

@@ -16,6 +16,7 @@ type ComboboxBaseProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsProp
     portalDisabled?: boolean;
     allowDeselect?: boolean;
     triggerClass?: string;
+    contentClass?: string;
     closeOnSelect?: boolean;
     maxContentHeight?: string;
     clearable?: boolean;
@@ -50,13 +51,19 @@ export type ComboboxAsyncCallbackParams = {
     pageSize: number;
     search: string;
 };
-export type ComboboxAsyncCallbackResult = {
-    items: CommandItem[];
+export type ComboboxAsyncCallbackResult<TItem extends CommandItem> = {
+    items: TItem[];
     hasMore: boolean;
 };
-export type ComboboxAsyncCallback = (params: ComboboxAsyncCallbackParams) => Promise<ComboboxAsyncCallbackResult>;
-type ComboboxAsyncBaseProps = Omit<ComboboxBaseProps, 'collection'> & {
-    items?: CommandItem[];
+export type ComboboxAsyncCallback<TItem extends CommandItem = CommandItem> = (params: ComboboxAsyncCallbackParams) => Promise<ComboboxAsyncCallbackResult<TItem>>;
+type ComboboxAsyncBaseProps<TItem extends CommandItem> = Omit<ComboboxBaseProps, 'collection' | 'item' | 'onSelect'> & {
+    items?: TItem[];
+    item?: Snippet<[{
+        item: TItem;
+        props: Record<string, unknown>;
+    }]>;
+    /** Callback when selection changes */
+    onSelect?: (value: string | string[], item: TItem | null) => void;
     /** Loading state renderer */
     loading?: Snippet;
     /** Current page (default: 1) */
@@ -64,7 +71,7 @@ type ComboboxAsyncBaseProps = Omit<ComboboxBaseProps, 'collection'> & {
     /** Page size for pagination (default: 20) */
     pageSize?: number;
     /** Async data callback */
-    callback: ComboboxAsyncCallback;
+    callback: ComboboxAsyncCallback<TItem>;
     /** Load immediate data when combobox is mounted (default: true) */
     loadImmediate?: boolean;
     /** Group definitions (for labels/ordering) */
@@ -82,15 +89,15 @@ type ComboboxAsyncBaseProps = Omit<ComboboxBaseProps, 'collection'> & {
      */
     clearOnDependencyChange?: boolean;
 };
-type ComboboxAsyncSingleProps = ComboboxAsyncBaseProps & {
+type ComboboxAsyncSingleProps<TItem extends CommandItem> = ComboboxAsyncBaseProps<TItem> & {
     /** Selection mode (default: 'single') */
     type?: 'single';
     value?: string;
 };
-type ComboboxAsyncMultipleProps = ComboboxAsyncBaseProps & {
+type ComboboxAsyncMultipleProps<TItem extends CommandItem> = ComboboxAsyncBaseProps<TItem> & {
     /** Selection mode */
     type: 'multiple';
     value?: string[];
 };
-export type ComboboxAsyncProps = ComboboxAsyncSingleProps | ComboboxAsyncMultipleProps;
+export type ComboboxAsyncProps<TItem extends CommandItem> = ComboboxAsyncSingleProps<TItem> | ComboboxAsyncMultipleProps<TItem>;
 export {};

package/dist/components/command/types.d.ts

@@ -32,6 +32,7 @@ export type CommandItem = {
     /** Group key for grouping */
     group?: string;
     onSelect?: () => void;
+    [key: string]: unknown;
 };
 export type CommandGroup = {
     value: string;

package/dist/components/file-upload/components/file-upload.clear-trigger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveClearTriggerStyles } from '../styles.js';
+  import type { FileUploadPrimitiveClearTriggerProps } from '../types.js';
+  import { FileUploadRootContext } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveClearTriggerProps = $props();
+
+  const rootState = FileUploadRootContext.get();
+
+  function handleClick() {
+    rootState.clearFiles();
+  }
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  class={cn(fileUploadPrimitiveClearTriggerStyles(), className)}
+  data-slot="file-upload-clear-trigger"
+  onclick={handleClick}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

package/dist/components/file-upload/components/file-upload.clear-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveClearTriggerProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveClearTriggerProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { FileUploadPrimitiveContextProps } from '../types.js';
+  import { FileUploadRootContext } from './file-upload.svelte.js';
+
+  const { children }: FileUploadPrimitiveContextProps = $props();
+
+  const context = FileUploadRootContext.get();
+</script>
+
+{@render children?.(context)}

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveContextProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveContextProps, {}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/components/file-upload/components/file-upload.dropzone.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveDropzoneStyles } from '../styles.js';
+  import type { FileUploadPrimitiveDropzoneProps } from '../types.js';
+  import { FileUploadRootContext } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    disableClick = false,
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveDropzoneProps = $props();
+
+  const rootState = FileUploadRootContext.get();
+
+  function handleDragEnter(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    rootState.dragging = true;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    rootState.dragging = false;
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    rootState.dragging = false;
+
+    if (e.dataTransfer?.files) {
+      rootState.addFiles(e.dataTransfer.files);
+    }
+  }
+
+  function handleClick() {
+    if (!disableClick) {
+      rootState.openFilePicker();
+    }
+  }
+</script>
+
+<div
+  bind:this={ref}
+  role="presentation"
+  class={cn(
+    fileUploadPrimitiveDropzoneStyles({
+      dragging: rootState.dragging,
+      invalid: rootState.opts.invalid.current,
+      disabled: rootState.opts.disabled.current,
+    }),
+    className,
+  )}
+  data-slot="file-upload-dropzone"
+  data-dragging={rootState.dragging || undefined}
+  ondragenter={handleDragEnter}
+  ondragleave={handleDragLeave}
+  ondragover={handleDragOver}
+  ondrop={handleDrop}
+  onclick={handleClick}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveDropzoneProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveDropzoneProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { FileUploadPrimitiveHiddenInputProps } from '../types.js';
+  import { FileUploadRootContext } from './file-upload.svelte.js';
+
+  let { ref = $bindable(null), ...restProps }: FileUploadPrimitiveHiddenInputProps = $props();
+
+  const rootState = FileUploadRootContext.get();
+
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  $effect(() => {
+    rootState.setHiddenInput(inputEl);
+  });
+
+  function handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files) {
+      rootState.addFiles(input.files);
+      input.value = '';
+    }
+  }
+</script>
+
+<input
+  bind:this={inputEl}
+  type="file"
+  tabindex={-1}
+  style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;"
+  data-slot="file-upload-hidden-input"
+  accept={rootState.opts.accept.current}
+  multiple={rootState.opts.maxFiles.current > 1}
+  disabled={rootState.opts.disabled.current}
+  onchange={handleChange}
+  {...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveHiddenInputProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveHiddenInputProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveItemDeleteTriggerStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemDeleteTriggerProps } from '../types.js';
+  import { FileUploadItemContext, FileUploadRootContext } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveItemDeleteTriggerProps = $props();
+
+  const rootState = FileUploadRootContext.get();
+  const itemState = FileUploadItemContext.get();
+
+  function handleClick() {
+    rootState.removeFile(itemState.opts.file.current);
+  }
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  class={cn(fileUploadPrimitiveItemDeleteTriggerStyles(), className)}
+  data-slot="file-upload-item-delete-trigger"
+  onclick={handleClick}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveItemDeleteTriggerProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveItemDeleteTriggerProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveItemGroupStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemGroupProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveItemGroupProps = $props();
+</script>
+
+<ul
+  bind:this={ref}
+  class={cn(fileUploadPrimitiveItemGroupStyles(), className)}
+  data-slot="file-upload-item-group"
+  {...restProps}
+>
+  {@render children?.()}
+</ul>

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveItemGroupProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveItemGroupProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveItemNameStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemNameProps } from '../types.js';
+  import { FileUploadItemContext } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveItemNameProps = $props();
+
+  const itemState = FileUploadItemContext.get();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fileUploadPrimitiveItemNameStyles(), className)}
+  data-slot="file-upload-item-name"
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {itemState.opts.file.current.name}
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveItemNameProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveItemNameProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveItemPreviewImageStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemPreviewImageProps } from '../types.js';
+  import { FileUploadItemContext } from './file-upload.svelte.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: FileUploadPrimitiveItemPreviewImageProps = $props();
+
+  const itemState = FileUploadItemContext.get();
+
+  let url = $state<string | undefined>(undefined);
+
+  $effect(() => {
+    const file = itemState.opts.file.current;
+    const objectUrl = URL.createObjectURL(file);
+    url = objectUrl;
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  });
+</script>
+
+{#if url}
+  <img
+    bind:this={ref}
+    src={url}
+    alt={itemState.opts.file.current.name}
+    class={cn(fileUploadPrimitiveItemPreviewImageStyles(), className)}
+    data-slot="file-upload-item-preview-image"
+    {...restProps}
+  />
+{/if}

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveItemPreviewImageProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveItemPreviewImageProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveItemPreviewStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemPreviewProps } from '../types.js';
+  import { FileUploadItemContext } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    type = '.*',
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveItemPreviewProps = $props();
+
+  const itemState = FileUploadItemContext.get();
+
+  const isMatch = $derived(Boolean(itemState.opts.file.current.type.match(type)));
+</script>
+
+{#if isMatch}
+  <div
+    bind:this={ref}
+    class={cn(fileUploadPrimitiveItemPreviewStyles(), className)}
+    data-slot="file-upload-item-preview"
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveItemPreviewProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveItemPreviewProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadPrimitiveItemSizeTextStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemSizeTextProps } from '../types.js';
+  import { FileUploadItemContext, formatFileSize } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadPrimitiveItemSizeTextProps = $props();
+
+  const itemState = FileUploadItemContext.get();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fileUploadPrimitiveItemSizeTextStyles(), className)}
+  data-slot="file-upload-item-size-text"
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {formatFileSize(itemState.opts.file.current.size)}
+  {/if}
+</div>

package/dist/components/file-upload/components/file-upload.item-size-text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FileUploadPrimitiveItemSizeTextProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadPrimitiveItemSizeTextProps, {}, "ref">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { box } from 'svelte-toolbelt';
+  import { fileUploadPrimitiveItemStyles } from '../styles.js';
+  import type { FileUploadPrimitiveItemProps } from '../types.js';
+  import { FileUploadItemState } from './file-upload.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    file,
+    children,
+    class: className,
+    variant = 'default',
+    ...restProps
+  }: FileUploadPrimitiveItemProps = $props();
+
+  FileUploadItemState.create({
+    file: box.with(() => file),
+  });
+</script>
+
+<li
+  bind:this={ref}
+  class={cn(fileUploadPrimitiveItemStyles({ variant }), className)}
+  data-slot="file-upload-item"
+  {...restProps}
+>
+  {@render children?.()}
+</li>