@casinogate/ui 1.11.10 → 1.11.12

package/dist/assets/css/root.css

@@ -2593,6 +2593,12 @@
       height: calc(var(--cgui-spacing) * 3.5);
     }
   }
+  .cgui\:\[\&\>svg\]\:size-4 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 4);
+      height: calc(var(--cgui-spacing) * 4);
+    }
+  }
   .cgui\:\[\&\>svg\]\:size-5 {
     &>svg {
       width: calc(var(--cgui-spacing) * 5);

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

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

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

@@ -4,7 +4,15 @@
 
   const { children }: FileUploadPrimitiveContextProps = $props();
 
-  const context = FileUploadRootContext.get();
+  const context$ = FileUploadRootContext.get();
 </script>
 
-{@render children?.(context)}
+{@render children?.({
+  acceptedFiles: () => context$.opts.acceptedFiles.current,
+  rejectedFiles: () => context$.opts.rejectedFiles.current,
+  dragging: () => context$.dragging,
+  addFiles: context$.addFiles,
+  removeFile: context$.removeFile,
+  clearFiles: context$.clearFiles,
+  openFilePicker: context$.openFilePicker,
+})}

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

@@ -1,72 +1,44 @@
 <script lang="ts">
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
   import { fileUploadPrimitiveDropzoneStyles } from '../styles.js';
   import type { FileUploadPrimitiveDropzoneProps } from '../types.js';
-  import { FileUploadRootContext } from './file-upload.svelte.js';
+  import { FileUploadDropzoneState } from './file-upload.svelte.js';
+
+  const uid = $props.id();
 
   let {
     ref = $bindable(null),
+    id = useId(uid),
     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);
-    }
-  }
+  const state$ = FileUploadDropzoneState.create({
+    disabledClick: boxWith(() => disableClick),
+    id: boxWith(() => id),
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+  });
 
-  function handleClick() {
-    if (!disableClick) {
-      rootState.openFilePicker();
-    }
-  }
+  const mergedProps = $derived(mergeProps(restProps, state$.props));
 </script>
 
 <div
   bind:this={ref}
-  role="presentation"
   class={cn(
     fileUploadPrimitiveDropzoneStyles({
-      dragging: rootState.dragging,
-      invalid: rootState.opts.invalid.current,
-      disabled: rootState.opts.disabled.current,
+      dragging: state$.root$.dragging,
+      invalid: state$.root$.opts.invalid.current,
+      disabled: state$.root$.opts.disabled.current,
     }),
-    className,
+    className
   )}
-  data-slot="file-upload-dropzone"
-  data-dragging={rootState.dragging || undefined}
-  ondragenter={handleDragEnter}
-  ondragleave={handleDragLeave}
-  ondragover={handleDragOver}
-  ondrop={handleDrop}
-  onclick={handleClick}
-  {...restProps}
+  {...mergedProps}
 >
   {@render children?.()}
 </div>

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

@@ -1,35 +1,39 @@
 <script lang="ts">
+  import type { Attachment } from 'svelte/attachments';
   import type { FileUploadPrimitiveHiddenInputProps } from '../types.js';
   import { FileUploadRootContext } from './file-upload.svelte.js';
 
   let { ref = $bindable(null), ...restProps }: FileUploadPrimitiveHiddenInputProps = $props();
 
-  const rootState = FileUploadRootContext.get();
+  const root$ = FileUploadRootContext.get();
 
-  let inputEl = $state<HTMLInputElement | null>(null);
+  const attachEl: Attachment<HTMLInputElement> = (el) => {
+    root$.setHiddenInput(el);
 
-  $effect(() => {
-    rootState.setHiddenInput(inputEl);
-  });
+    return () => {
+      root$.setHiddenInput(null);
+    };
+  };
 
   function handleChange(e: Event) {
     const input = e.target as HTMLInputElement;
     if (input.files) {
-      rootState.addFiles(input.files);
+      root$.addFiles(input.files);
       input.value = '';
     }
   }
 </script>
 
 <input
-  bind:this={inputEl}
+  bind:this={ref}
+  {@attach attachEl}
   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}
+  accept={root$.opts.accept.current}
+  multiple={root$.opts.maxFiles.current > 1}
+  disabled={root$.opts.disabled.current}
   onchange={handleChange}
   {...restProps}
 />

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

@@ -1,31 +1,41 @@
 <script lang="ts">
-  import { cn } from '../../../internal/utils/common.js';
+  import { Icon } from '../../icons/index.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
   import { fileUploadPrimitiveItemDeleteTriggerStyles } from '../styles.js';
   import type { FileUploadPrimitiveItemDeleteTriggerProps } from '../types.js';
-  import { FileUploadItemContext, FileUploadRootContext } from './file-upload.svelte.js';
+  import { FileUploadDeleteTriggerState } from './file-upload.svelte.js';
+
+  const uid = $props.id();
 
   let {
     ref = $bindable(null),
+    id = useId(uid),
     children,
     class: className,
     ...restProps
   }: FileUploadPrimitiveItemDeleteTriggerProps = $props();
 
-  const rootState = FileUploadRootContext.get();
-  const itemState = FileUploadItemContext.get();
+  const state$ = FileUploadDeleteTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
 
-  function handleClick() {
-    rootState.removeFile(itemState.opts.file.current);
-  }
+  const mergedProps = $derived(mergeProps(restProps, state$.props));
 </script>
 
 <button
   bind:this={ref}
   type="button"
   class={cn(fileUploadPrimitiveItemDeleteTriggerStyles(), className)}
-  data-slot="file-upload-item-delete-trigger"
-  onclick={handleClick}
-  {...restProps}
+  {...mergedProps}
 >
-  {@render children?.()}
+  {#if children}
+    {@render children()}
+  {:else}
+    <Icon.Cross />
+  {/if}
 </button>

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

@@ -4,14 +4,9 @@
   import type { FileUploadPrimitiveItemNameProps } from '../types.js';
   import { FileUploadItemContext } from './file-upload.svelte.js';
 
-  let {
-    ref = $bindable(null),
-    children,
-    class: className,
-    ...restProps
-  }: FileUploadPrimitiveItemNameProps = $props();
+  let { ref = $bindable(null), children, class: className, ...restProps }: FileUploadPrimitiveItemNameProps = $props();
 
-  const itemState = FileUploadItemContext.get();
+  const item$ = FileUploadItemContext.get();
 </script>
 
 <div
@@ -23,6 +18,6 @@
   {#if children}
     {@render children()}
   {:else}
-    {itemState.opts.file.current.name}
+    {item$.opts.file.current.name}
   {/if}
 </div>

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

@@ -2,30 +2,18 @@
   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';
+  import { FileUploadPreviewImageState } 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);
-    };
-  });
+  const state$ = FileUploadPreviewImageState.create();
 </script>
 
-{#if url}
+{#if state$.imageUrl}
   <img
     bind:this={ref}
-    src={url}
-    alt={itemState.opts.file.current.name}
+    src={state$.imageUrl}
+    alt={state$.item$.opts.file.current.name}
     class={cn(fileUploadPrimitiveItemPreviewImageStyles(), className)}
     data-slot="file-upload-item-preview-image"
     {...restProps}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Icon } from '../../icons/index.js';
   import { cn } from '../../../internal/utils/common.js';
   import { fileUploadPrimitiveItemPreviewStyles } from '../styles.js';
   import type { FileUploadPrimitiveItemPreviewProps } from '../types.js';
@@ -12,9 +13,9 @@
     ...restProps
   }: FileUploadPrimitiveItemPreviewProps = $props();
 
-  const itemState = FileUploadItemContext.get();
+  const item$ = FileUploadItemContext.get();
 
-  const isMatch = $derived(Boolean(itemState.opts.file.current.type.match(type)));
+  const isMatch = $derived(Boolean(item$.opts.file.current.type.match(type)));
 </script>
 
 {#if isMatch}
@@ -24,6 +25,10 @@
     data-slot="file-upload-item-preview"
     {...restProps}
   >
-    {@render children?.()}
+    {#if children}
+      {@render children?.()}
+    {:else}
+      <Icon.File />
+    {/if}
   </div>
 {/if}

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

@@ -11,7 +11,7 @@
     ...restProps
   }: FileUploadPrimitiveItemSizeTextProps = $props();
 
-  const itemState = FileUploadItemContext.get();
+  const item$ = FileUploadItemContext.get();
 </script>
 
 <div
@@ -23,6 +23,6 @@
   {#if children}
     {@render children()}
   {:else}
-    {formatFileSize(itemState.opts.file.current.size)}
+    {formatFileSize(item$.opts.file.current.size)}
   {/if}
 </div>

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

@@ -1,37 +1,49 @@
 <script lang="ts">
-  import { cn } from '../../../internal/utils/common.js';
-  import { box } from 'svelte-toolbelt';
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn, noop } from '../../../internal/utils/common.js';
+  import { boxWith } from 'svelte-toolbelt';
   import { fileUploadPrimitiveRootStyles } from '../styles.js';
   import type { FileUploadPrimitiveRootProps } from '../types.js';
   import { FileUploadRootState } from './file-upload.svelte.js';
 
   let {
     ref = $bindable(null),
+    acceptedFiles = $bindable([]),
+    rejectedFiles = $bindable([]),
     accept,
     maxFiles = 1,
     maxFileSize = Infinity,
     disabled = false,
     invalid = false,
-    onFileAccept,
-    onFileReject,
-    onFileChange,
+    onFileAccept = noop,
+    onFileReject = noop,
+    onFileChange = noop,
     children,
     class: className,
     ...restProps
   }: FileUploadPrimitiveRootProps = $props();
 
-  const rootState = FileUploadRootState.create({
-    accept: box.with(() => accept),
-    maxFiles: box.with(() => maxFiles),
-    maxFileSize: box.with(() => maxFileSize),
-    disabled: box.with(() => disabled),
-    invalid: box.with(() => invalid),
-  });
-
-  $effect(() => {
-    rootState.onFileAccept = onFileAccept;
-    rootState.onFileReject = onFileReject;
-    rootState.onFileChange = onFileChange;
+  const state$ = FileUploadRootState.create({
+    acceptedFiles: boxWith(
+      () => acceptedFiles,
+      (v) => {
+        acceptedFiles = v;
+      }
+    ),
+    rejectedFiles: boxWith(
+      () => rejectedFiles,
+      (v) => {
+        rejectedFiles = v;
+      }
+    ),
+    accept: boxWith(() => accept),
+    maxFiles: boxWith(() => maxFiles),
+    maxFileSize: boxWith(() => maxFileSize),
+    disabled: boxWith(() => disabled),
+    invalid: boxWith(() => invalid),
+    onFileAccept: boxWith(() => onFileAccept),
+    onFileReject: boxWith(() => onFileReject),
+    onFileChange: boxWith(() => onFileChange),
   });
 </script>
 
@@ -39,8 +51,8 @@
   bind:this={ref}
   class={cn(fileUploadPrimitiveRootStyles({ disabled }), className)}
   data-slot="file-upload-root"
-  data-disabled={disabled || undefined}
-  data-dragging={rootState.dragging || undefined}
+  data-disabled={boolAttr(disabled)}
+  data-dragging={boolAttr(state$.dragging)}
   {...restProps}
 >
   {@render children?.()}

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

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

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

@@ -1,5 +1,6 @@
+import type { RefAttachment } from '../../../internal/types/common.js';
 import { Context } from 'runed';
-import type { ReadableBoxedValues } from 'svelte-toolbelt';
+import { type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
 import type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, RejectedFile } from '../types.js';
 export declare const FileUploadRootContext: Context<FileUploadRootState>;
 type FileUploadRootStateOpts = ReadableBoxedValues<{
@@ -8,13 +9,17 @@ type FileUploadRootStateOpts = ReadableBoxedValues<{
     maxFileSize: number;
     disabled: boolean;
     invalid: boolean;
+    onFileAccept: (details: FileAcceptDetails) => void;
+    onFileReject: (details: FileRejectDetails) => void;
+    onFileChange: (details: FileChangeDetails) => void;
+}> & WritableBoxedValues<{
+    acceptedFiles: File[];
+    rejectedFiles: RejectedFile[];
 }>;
 export declare class FileUploadRootState {
+    #private;
     static create(opts: FileUploadRootStateOpts): FileUploadRootState;
     readonly opts: FileUploadRootStateOpts;
-    acceptedFiles: File[];
-    rejectedFiles: RejectedFile[];
-    dragging: boolean;
     onFileAccept?: (details: FileAcceptDetails) => void;
     onFileReject?: (details: FileRejectDetails) => void;
     onFileChange?: (details: FileChangeDetails) => void;
@@ -27,6 +32,34 @@ export declare class FileUploadRootState {
     clearFiles(): void;
     private validateFile;
     private matchesAccept;
+    get dragging(): boolean;
+    set dragging(value: boolean);
+}
+type FileUploadDropzoneStateOpts = WithRefProps<ReadableBoxedValues<{
+    disabledClick: boolean;
+}>>;
+export declare class FileUploadDropzoneState {
+    static create(opts: FileUploadDropzoneStateOpts): FileUploadDropzoneState;
+    readonly root$: FileUploadRootState;
+    readonly opts: FileUploadDropzoneStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: FileUploadDropzoneStateOpts, root$: FileUploadRootState);
+    onDragEnter(e: DragEvent): void;
+    onDragLeave(e: DragEvent): void;
+    onDragOver(e: DragEvent): void;
+    onDrop(e: DragEvent): void;
+    onClick(): void;
+    readonly props: {
+        readonly id: string;
+        readonly ondragenter: (e: DragEvent) => void;
+        readonly ondragleave: (e: DragEvent) => void;
+        readonly ondragover: (e: DragEvent) => void;
+        readonly ondrop: (e: DragEvent) => void;
+        readonly onclick: () => void;
+        readonly 'data-dragging': "" | undefined;
+        readonly 'data-slot': "file-upload-dropzone";
+        readonly role: "presentation";
+    };
 }
 export declare const FileUploadItemContext: Context<FileUploadItemState>;
 type FileUploadItemStateOpts = ReadableBoxedValues<{
@@ -37,5 +70,43 @@ export declare class FileUploadItemState {
     readonly opts: FileUploadItemStateOpts;
     constructor(opts: FileUploadItemStateOpts);
 }
+export declare class FileUploadPreviewImageState {
+    #private;
+    static create(): FileUploadPreviewImageState;
+    readonly item$: FileUploadItemState;
+    constructor(item$: FileUploadItemState);
+    get imageUrl(): string | null;
+    set imageUrl(value: string | null);
+}
+type FileUploadDeleteTriggerStateOpts = WithRefProps<ReadableBoxedValues<{}>>;
+export declare class FileUploadDeleteTriggerState {
+    static create(opts: FileUploadDeleteTriggerStateOpts): FileUploadDeleteTriggerState;
+    readonly root$: FileUploadRootState;
+    readonly item$: FileUploadItemState;
+    readonly opts: FileUploadDeleteTriggerStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: FileUploadDeleteTriggerStateOpts, root$: FileUploadRootState, item$: FileUploadItemState);
+    onClick(): void;
+    readonly props: {
+        readonly id: string;
+        readonly onclick: () => void;
+        readonly 'data-slot': "file-upload-delete-trigger";
+        readonly role: "presentation";
+    };
+}
+type FileUploadClearTriggerStateOpts = WithRefProps<ReadableBoxedValues<{}>>;
+export declare class FileUploadClearTriggerState {
+    static create(opts: FileUploadClearTriggerStateOpts): FileUploadClearTriggerState;
+    readonly root$: FileUploadRootState;
+    readonly opts: FileUploadClearTriggerStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: FileUploadClearTriggerStateOpts, root$: FileUploadRootState);
+    onClick(): void;
+    readonly props: {
+        readonly id: string;
+        readonly onclick: () => void;
+        readonly 'data-slot': "file-upload-clear-trigger";
+    };
+}
 export declare function formatFileSize(bytes: number): string;
 export {};

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

@@ -1,21 +1,27 @@
-import { keyWithPrefix } from '../../../internal/utils/common.js';
-import { Context } from 'runed';
+import { boolAttr } from '../../../internal/utils/attrs.js';
+import { Context, watch } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
 // --- Root State ---
-export const FileUploadRootContext = new Context(keyWithPrefix('file-upload-root'));
+export const FileUploadRootContext = new Context('file-upload-root');
 export class FileUploadRootState {
     static create(opts) {
         return FileUploadRootContext.set(new FileUploadRootState(opts));
     }
     opts;
-    acceptedFiles = $state([]);
-    rejectedFiles = $state([]);
-    dragging = $state(false);
+    #dragging = $state(false);
     onFileAccept;
     onFileReject;
     onFileChange;
     hiddenInputRef = null;
     constructor(opts) {
         this.opts = opts;
+        this.addFiles = this.addFiles.bind(this);
+        this.removeFile = this.removeFile.bind(this);
+        this.clearFiles = this.clearFiles.bind(this);
+        this.openFilePicker = this.openFilePicker.bind(this);
+        this.onFileAccept = opts.onFileAccept.current;
+        this.onFileReject = opts.onFileReject.current;
+        this.onFileChange = opts.onFileChange.current;
     }
     setHiddenInput(input) {
         this.hiddenInputRef = input;
@@ -43,31 +49,34 @@ export class FileUploadRootState {
             for (const file of overLimit) {
                 rejected.push({ file, errors: ['TOO_MANY_FILES'] });
             }
-            this.acceptedFiles = this.acceptedFiles.length + incoming.length > maxFiles ? incoming : [...this.acceptedFiles, ...incoming];
+            this.opts.acceptedFiles.current =
+                this.opts.acceptedFiles.current.length + incoming.length > maxFiles
+                    ? incoming
+                    : [...this.opts.acceptedFiles.current, ...incoming];
             this.onFileAccept?.({ files: incoming });
         }
         if (rejected.length > 0) {
-            this.rejectedFiles = [...this.rejectedFiles, ...rejected];
+            this.opts.rejectedFiles.current = [...this.opts.rejectedFiles.current, ...rejected];
             this.onFileReject?.({ files: rejected });
         }
         this.onFileChange?.({
-            acceptedFiles: this.acceptedFiles,
-            rejectedFiles: this.rejectedFiles,
+            acceptedFiles: this.opts.acceptedFiles.current,
+            rejectedFiles: this.opts.rejectedFiles.current,
         });
     }
     removeFile(file) {
-        this.acceptedFiles = this.acceptedFiles.filter((f) => f !== file);
+        this.opts.acceptedFiles.current = this.opts.acceptedFiles.current.filter((f) => f !== file);
         this.onFileChange?.({
-            acceptedFiles: this.acceptedFiles,
-            rejectedFiles: this.rejectedFiles,
+            acceptedFiles: this.opts.acceptedFiles.current,
+            rejectedFiles: this.opts.rejectedFiles.current,
         });
     }
     clearFiles() {
-        this.acceptedFiles = [];
-        this.rejectedFiles = [];
+        this.opts.acceptedFiles.current = [];
+        this.opts.rejectedFiles.current = [];
         this.onFileChange?.({
-            acceptedFiles: this.acceptedFiles,
-            rejectedFiles: this.rejectedFiles,
+            acceptedFiles: this.opts.acceptedFiles.current,
+            rejectedFiles: this.opts.rejectedFiles.current,
         });
     }
     validateFile(file) {
@@ -98,9 +107,73 @@ export class FileUploadRootState {
             return file.type === token;
         });
     }
+    get dragging() {
+        return this.#dragging;
+    }
+    set dragging(value) {
+        this.#dragging = value;
+    }
+}
+export class FileUploadDropzoneState {
+    static create(opts) {
+        return new FileUploadDropzoneState(opts, FileUploadRootContext.get());
+    }
+    root$;
+    opts;
+    attachment;
+    constructor(opts, root$) {
+        this.onDragEnter = this.onDragEnter.bind(this);
+        this.onDragLeave = this.onDragLeave.bind(this);
+        this.onDragOver = this.onDragOver.bind(this);
+        this.onDrop = this.onDrop.bind(this);
+        this.onClick = this.onClick.bind(this);
+        this.root$ = root$;
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    onDragEnter(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.root$.dragging = true;
+    }
+    onDragLeave(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.root$.dragging = false;
+    }
+    onDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    onDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.root$.dragging = false;
+        if (e.dataTransfer?.files) {
+            this.root$.addFiles(e.dataTransfer.files);
+        }
+    }
+    onClick() {
+        if (this.opts.disabledClick.current) {
+            return;
+        }
+        this.root$.openFilePicker();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        ondragenter: this.onDragEnter,
+        ondragleave: this.onDragLeave,
+        ondragover: this.onDragOver,
+        ondrop: this.onDrop,
+        onclick: this.onClick,
+        'data-dragging': boolAttr(this.root$.dragging),
+        'data-slot': 'file-upload-dropzone',
+        role: 'presentation',
+        ...this.attachment,
+    }));
 }
 // --- Item State ---
-export const FileUploadItemContext = new Context(keyWithPrefix('file-upload-item'));
+export const FileUploadItemContext = new Context('file-upload-item');
 export class FileUploadItemState {
     static create(opts) {
         return FileUploadItemContext.set(new FileUploadItemState(opts));
@@ -110,6 +183,79 @@ export class FileUploadItemState {
         this.opts = opts;
     }
 }
+// -- Preview Image State --
+export class FileUploadPreviewImageState {
+    static create() {
+        return new FileUploadPreviewImageState(FileUploadItemContext.get());
+    }
+    item$;
+    #imageUrl = $state(null);
+    constructor(item$) {
+        this.item$ = item$;
+        watch(() => this.item$.opts.file.current, (file) => {
+            const objectUrl = URL.createObjectURL(file);
+            this.imageUrl = objectUrl;
+            return () => {
+                URL.revokeObjectURL(objectUrl);
+            };
+        });
+    }
+    get imageUrl() {
+        return this.#imageUrl;
+    }
+    set imageUrl(value) {
+        this.#imageUrl = value;
+    }
+}
+export class FileUploadDeleteTriggerState {
+    static create(opts) {
+        return new FileUploadDeleteTriggerState(opts, FileUploadRootContext.get(), FileUploadItemContext.get());
+    }
+    root$;
+    item$;
+    opts;
+    attachment;
+    constructor(opts, root$, item$) {
+        this.onClick = this.onClick.bind(this);
+        this.root$ = root$;
+        this.item$ = item$;
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    onClick() {
+        this.root$.removeFile(this.item$.opts.file.current);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        onclick: this.onClick,
+        'data-slot': 'file-upload-delete-trigger',
+        role: 'presentation',
+        ...this.attachment,
+    }));
+}
+export class FileUploadClearTriggerState {
+    static create(opts) {
+        return new FileUploadClearTriggerState(opts, FileUploadRootContext.get());
+    }
+    root$;
+    opts;
+    attachment;
+    constructor(opts, root$) {
+        this.onClick = this.onClick.bind(this);
+        this.root$ = root$;
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    onClick() {
+        this.root$.clearFiles();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        onclick: this.onClick,
+        'data-slot': 'file-upload-clear-trigger',
+        ...this.attachment,
+    }));
+}
 // --- Utils ---
 export function formatFileSize(bytes) {
     if (bytes < 1024)

package/dist/components/file-upload/composed/root/file-upload.root.svelte

@@ -4,6 +4,8 @@
 
   let {
     ref = $bindable(null),
+    acceptedFiles = $bindable([]),
+    rejectedFiles = $bindable([]),
     accept,
     maxFiles = 1,
     maxFileSize = Infinity,
@@ -20,6 +22,8 @@
 
 <FileUploadPrimitive.Root
   bind:ref
+  bind:acceptedFiles
+  bind:rejectedFiles
   {accept}
   {maxFiles}
   {maxFileSize}

package/dist/components/file-upload/composed/root/file-upload.root.svelte.d.ts

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

package/dist/components/file-upload/styles.js

@@ -9,7 +9,7 @@ export const fileUploadPrimitiveRootStyles = tv({
 });
 export const fileUploadPrimitiveDropzoneStyles = tv({
     base: [
-        'cgui:flex cgui:flex-col cgui:items-center cgui:justify-center cgui:gap-2',
+        'cgui:flex cgui:flex-col cgui:items-center cgui:justify-center cgui:gap-2 cgui:p-4',
         'cgui:rounded-md cgui:border cgui:border-dashed cgui:border-stroke-default',
         'cgui:cursor-pointer',
         'cgui:transition-colors cgui:duration-200',
@@ -43,7 +43,7 @@ export const fileUploadPrimitiveItemStyles = tv({
 });
 export const fileUploadPrimitiveItemPreviewStyles = tv({
     base: [
-        'cgui:size-10 cgui:shrink-0 cgui:flex cgui:items-center cgui:justify-center cgui:overflow-hidden cgui:rounded-xs',
+        'cgui:size-10 cgui:shrink-0 cgui:flex cgui:items-center cgui:text-icon-regular cgui:[&>svg]:size-6 cgui:justify-center cgui:overflow-hidden cgui:rounded-xs',
     ],
 });
 export const fileUploadPrimitiveItemPreviewImageStyles = tv({
@@ -61,8 +61,9 @@ export const fileUploadPrimitiveItemDeleteTriggerStyles = tv({
         'cgui:rounded-xs cgui:cursor-pointer',
         'cgui:text-fg-regular cgui:hover:text-fg-darkest',
         'cgui:transition-colors cgui:duration-200',
+        'cgui:[&>svg]:size-4 cgui:text-icon-regular',
     ],
 });
 export const fileUploadPrimitiveClearTriggerStyles = tv({
-    base: ['cgui:cursor-pointer'],
+    base: ['cgui:cursor-pointer cgui:[&>svg]:size-4 cgui:text-icon-regular'],
 });

package/dist/components/file-upload/types.d.ts

@@ -1,6 +1,7 @@
 import type { Without } from '../../internal/types/common.js';
 import type { WithVariants } from '../../internal/types/composition.js';
 import type { PrimitiveButtonAttributes, PrimitiveDivAttributes, PrimitiveImgAttributes, PrimitiveInputAttributes, PrimitiveLiAttributes, PrimitiveUListAttributes } from '../../internal/types/html-attributes.js';
+import type { Snippet } from 'svelte';
 import type { WithChildren, WithElementRef } from 'svelte-toolbelt';
 import type { FileUploadPrimitiveClearTriggerVariants, FileUploadPrimitiveDropzoneVariants, FileUploadPrimitiveItemDeleteTriggerVariants, FileUploadPrimitiveItemGroupVariants, FileUploadPrimitiveItemNameVariants, FileUploadPrimitiveItemPreviewImageVariants, FileUploadPrimitiveItemPreviewVariants, FileUploadPrimitiveItemSizeTextVariants, FileUploadPrimitiveItemVariants, FileUploadPrimitiveTriggerVariants } from './styles.js';
 export type FileError = 'TOO_MANY_FILES' | 'FILE_INVALID_TYPE' | 'FILE_TOO_LARGE';
@@ -19,6 +20,8 @@ export type FileChangeDetails = {
     rejectedFiles: RejectedFile[];
 };
 type FileUploadPrimitiveRootPropsWithoutHTML = WithElementRef<WithChildren<{
+    acceptedFiles?: File[];
+    rejectedFiles?: RejectedFile[];
     accept?: string;
     maxFiles?: number;
     maxFileSize?: number;
@@ -58,26 +61,16 @@ export type FileUploadPrimitiveItemDeleteTriggerProps = FileUploadPrimitiveItemD
 type FileUploadPrimitiveClearTriggerPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{}>>, FileUploadPrimitiveClearTriggerVariants>;
 export type FileUploadPrimitiveClearTriggerProps = FileUploadPrimitiveClearTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, FileUploadPrimitiveClearTriggerPropsWithoutHTML>;
 export type FileUploadContext = {
-    readonly acceptedFiles: File[];
-    readonly rejectedFiles: RejectedFile[];
-    readonly dragging: boolean;
+    readonly acceptedFiles: () => File[];
+    readonly rejectedFiles: () => RejectedFile[];
+    readonly dragging: () => boolean;
     addFiles(files: FileList | File[]): void;
     removeFile(file: File): void;
     clearFiles(): void;
     openFilePicker(): void;
 };
 export type FileUploadPrimitiveContextProps = {
-    children?: import('svelte').Snippet<[FileUploadContext]>;
+    children?: Snippet<[FileUploadContext]>;
 };
-type FileUploadRootPropsWithoutHTML = WithElementRef<WithChildren<{
-    accept?: string;
-    maxFiles?: number;
-    maxFileSize?: number;
-    disabled?: boolean;
-    invalid?: boolean;
-    onFileAccept?: (details: FileAcceptDetails) => void;
-    onFileReject?: (details: FileRejectDetails) => void;
-    onFileChange?: (details: FileChangeDetails) => void;
-}>>;
-export type FileUploadRootProps = FileUploadRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FileUploadRootPropsWithoutHTML>;
+export type FileUploadRootProps = FileUploadPrimitiveRootProps;
 export {};

package/dist/components/icons/exports.d.ts

@@ -16,6 +16,7 @@ export { default as Dots } from './dots.svelte';
 export { default as Error } from './error.svelte';
 export { default as EyeCrossed } from './eye-crossed.svelte';
 export { default as Eye } from './eye.svelte';
+export { default as File } from './file.svelte';
 export { default as Info } from './info.svelte';
 export { default as Magnifier } from './magnifier.svelte';
 export { default as Minus } from './minus.svelte';

package/dist/components/icons/exports.js

@@ -16,6 +16,7 @@ export { default as Dots } from './dots.svelte';
 export { default as Error } from './error.svelte';
 export { default as EyeCrossed } from './eye-crossed.svelte';
 export { default as Eye } from './eye.svelte';
+export { default as File } from './file.svelte';
 export { default as Info } from './info.svelte';
 export { default as Magnifier } from './magnifier.svelte';
 export { default as Minus } from './minus.svelte';

package/dist/components/icons/file.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  ><path
+    fill="currentColor"
+    fill-rule="evenodd"
+    d="M12 2H6a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-8h-6a3 3 0 0 1-3-3zm9 7v-.172a3 3 0 0 0-.879-2.12l-3.828-3.83A3 3 0 0 0 14.172 2H14v6a1 1 0 0 0 1 1z"
+    clip-rule="evenodd"
+  /></svg
+>

package/dist/components/icons/file.svelte.d.ts

@@ -0,0 +1,26 @@
+export default File;
+type File = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const File: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.11.10",
+  "version": "1.11.12",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",