@casinogate/ui 1.11.7 → 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/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>

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

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

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { box } 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),
+    accept,
+    maxFiles = 1,
+    maxFileSize = Infinity,
+    disabled = false,
+    invalid = false,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    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;
+  });
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fileUploadPrimitiveRootStyles({ disabled }), className)}
+  data-slot="file-upload-root"
+  data-disabled={disabled || undefined}
+  data-dragging={rootState.dragging || undefined}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,41 @@
+import { Context } from 'runed';
+import type { ReadableBoxedValues } from 'svelte-toolbelt';
+import type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, RejectedFile } from '../types.js';
+export declare const FileUploadRootContext: Context<FileUploadRootState>;
+type FileUploadRootStateOpts = ReadableBoxedValues<{
+    accept: string | undefined;
+    maxFiles: number;
+    maxFileSize: number;
+    disabled: boolean;
+    invalid: boolean;
+}>;
+export declare class FileUploadRootState {
+    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;
+    private hiddenInputRef;
+    constructor(opts: FileUploadRootStateOpts);
+    setHiddenInput(input: HTMLInputElement | null): void;
+    openFilePicker(): void;
+    addFiles(files: FileList | File[]): void;
+    removeFile(file: File): void;
+    clearFiles(): void;
+    private validateFile;
+    private matchesAccept;
+}
+export declare const FileUploadItemContext: Context<FileUploadItemState>;
+type FileUploadItemStateOpts = ReadableBoxedValues<{
+    file: File;
+}>;
+export declare class FileUploadItemState {
+    static create(opts: FileUploadItemStateOpts): FileUploadItemState;
+    readonly opts: FileUploadItemStateOpts;
+    constructor(opts: FileUploadItemStateOpts);
+}
+export declare function formatFileSize(bytes: number): string;
+export {};

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

@@ -0,0 +1,120 @@
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context } from 'runed';
+// --- Root State ---
+export const FileUploadRootContext = new Context(keyWithPrefix('file-upload-root'));
+export class FileUploadRootState {
+    static create(opts) {
+        return FileUploadRootContext.set(new FileUploadRootState(opts));
+    }
+    opts;
+    acceptedFiles = $state([]);
+    rejectedFiles = $state([]);
+    dragging = $state(false);
+    onFileAccept;
+    onFileReject;
+    onFileChange;
+    hiddenInputRef = null;
+    constructor(opts) {
+        this.opts = opts;
+    }
+    setHiddenInput(input) {
+        this.hiddenInputRef = input;
+    }
+    openFilePicker() {
+        this.hiddenInputRef?.click();
+    }
+    addFiles(files) {
+        const fileArray = Array.from(files);
+        const maxFiles = this.opts.maxFiles.current;
+        const accepted = [];
+        const rejected = [];
+        for (const file of fileArray) {
+            const errors = this.validateFile(file);
+            if (errors.length > 0) {
+                rejected.push({ file, errors });
+            }
+            else {
+                accepted.push(file);
+            }
+        }
+        if (accepted.length > 0) {
+            const incoming = accepted.slice(0, maxFiles);
+            const overLimit = accepted.slice(maxFiles);
+            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.onFileAccept?.({ files: incoming });
+        }
+        if (rejected.length > 0) {
+            this.rejectedFiles = [...this.rejectedFiles, ...rejected];
+            this.onFileReject?.({ files: rejected });
+        }
+        this.onFileChange?.({
+            acceptedFiles: this.acceptedFiles,
+            rejectedFiles: this.rejectedFiles,
+        });
+    }
+    removeFile(file) {
+        this.acceptedFiles = this.acceptedFiles.filter((f) => f !== file);
+        this.onFileChange?.({
+            acceptedFiles: this.acceptedFiles,
+            rejectedFiles: this.rejectedFiles,
+        });
+    }
+    clearFiles() {
+        this.acceptedFiles = [];
+        this.rejectedFiles = [];
+        this.onFileChange?.({
+            acceptedFiles: this.acceptedFiles,
+            rejectedFiles: this.rejectedFiles,
+        });
+    }
+    validateFile(file) {
+        const errors = [];
+        const maxFileSize = this.opts.maxFileSize.current;
+        if (file.size > maxFileSize) {
+            errors.push('FILE_TOO_LARGE');
+        }
+        const accept = this.opts.accept.current;
+        if (accept && !this.matchesAccept(file, accept)) {
+            errors.push('FILE_INVALID_TYPE');
+        }
+        return errors;
+    }
+    matchesAccept(file, accept) {
+        const acceptTokens = accept
+            .split(',')
+            .map((t) => t.trim())
+            .filter(Boolean);
+        return acceptTokens.some((token) => {
+            if (token.startsWith('.')) {
+                return file.name.toLowerCase().endsWith(token.toLowerCase());
+            }
+            if (token.endsWith('/*')) {
+                const prefix = token.slice(0, -1);
+                return file.type.startsWith(prefix);
+            }
+            return file.type === token;
+        });
+    }
+}
+// --- Item State ---
+export const FileUploadItemContext = new Context(keyWithPrefix('file-upload-item'));
+export class FileUploadItemState {
+    static create(opts) {
+        return FileUploadItemContext.set(new FileUploadItemState(opts));
+    }
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+    }
+}
+// --- Utils ---
+export function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+export { default as Root } from './file-upload.root.svelte';
+export { default as Context } from './file-upload.context.svelte';
+export { default as Dropzone } from './file-upload.dropzone.svelte';
+export { default as Trigger } from './file-upload.trigger.svelte';
+export { default as HiddenInput } from './file-upload.hidden-input.svelte';
+export { default as ItemGroup } from './file-upload.item-group.svelte';
+export { default as Item } from './file-upload.item.svelte';
+export { default as ItemPreview } from './file-upload.item-preview.svelte';
+export { default as ItemPreviewImage } from './file-upload.item-preview-image.svelte';
+export { default as ItemName } from './file-upload.item-name.svelte';
+export { default as ItemSizeText } from './file-upload.item-size-text.svelte';
+export { default as ItemDeleteTrigger } from './file-upload.item-delete-trigger.svelte';
+export { default as ClearTrigger } from './file-upload.clear-trigger.svelte';

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

@@ -0,0 +1,13 @@
+export { default as Root } from './file-upload.root.svelte';
+export { default as Context } from './file-upload.context.svelte';
+export { default as Dropzone } from './file-upload.dropzone.svelte';
+export { default as Trigger } from './file-upload.trigger.svelte';
+export { default as HiddenInput } from './file-upload.hidden-input.svelte';
+export { default as ItemGroup } from './file-upload.item-group.svelte';
+export { default as Item } from './file-upload.item.svelte';
+export { default as ItemPreview } from './file-upload.item-preview.svelte';
+export { default as ItemPreviewImage } from './file-upload.item-preview-image.svelte';
+export { default as ItemName } from './file-upload.item-name.svelte';
+export { default as ItemSizeText } from './file-upload.item-size-text.svelte';
+export { default as ItemDeleteTrigger } from './file-upload.item-delete-trigger.svelte';
+export { default as ClearTrigger } from './file-upload.clear-trigger.svelte';

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

@@ -0,0 +1 @@
+export { Root } from './root/index.js';

package/dist/components/file-upload/composed/index.js

@@ -0,0 +1 @@
+export { Root } from './root/index.js';

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import * as FileUploadPrimitive from '../../components/index.js';
+  import type { FileUploadRootProps } from '../../types.js';
+
+  let {
+    ref = $bindable(null),
+    accept,
+    maxFiles = 1,
+    maxFileSize = Infinity,
+    disabled = false,
+    invalid = false,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadRootProps = $props();
+</script>
+
+<FileUploadPrimitive.Root
+  bind:ref
+  {accept}
+  {maxFiles}
+  {maxFileSize}
+  {disabled}
+  {invalid}
+  {onFileAccept}
+  {onFileReject}
+  {onFileChange}
+  class={className}
+  {...restProps}
+>
+  <FileUploadPrimitive.HiddenInput />
+  {@render children?.()}
+</FileUploadPrimitive.Root>

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

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

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

@@ -0,0 +1 @@
+export { default as Root } from './file-upload.root.svelte';

package/dist/components/file-upload/composed/root/index.js

@@ -0,0 +1 @@
+export { default as Root } from './file-upload.root.svelte';

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

@@ -0,0 +1,3 @@
+export * as FileUploadPrimitive from './components/index.js';
+export * as FileUpload from './composed/index.js';
+export * from './types.js';

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

@@ -0,0 +1,3 @@
+export * as FileUploadPrimitive from './components/index.js';
+export * as FileUpload from './composed/index.js';
+export * from './types.js';

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

@@ -0,0 +1,80 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const fileUploadPrimitiveRootStyles: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+}, undefined, string[], {
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveDropzoneStyles: import("tailwind-variants").TVReturnType<{
+    dragging: {
+        true: string;
+    };
+    invalid: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, string[], {
+    dragging: {
+        true: string;
+    };
+    invalid: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    dragging: {
+        true: string;
+    };
+    invalid: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemGroupStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        clean: string;
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        clean: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        clean: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemPreviewStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemPreviewImageStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemNameStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemSizeTextStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveItemDeleteTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fileUploadPrimitiveClearTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type FileUploadPrimitiveRootVariants = VariantProps<typeof fileUploadPrimitiveRootStyles>;
+export type FileUploadPrimitiveDropzoneVariants = VariantProps<typeof fileUploadPrimitiveDropzoneStyles>;
+export type FileUploadPrimitiveTriggerVariants = VariantProps<typeof fileUploadPrimitiveTriggerStyles>;
+export type FileUploadPrimitiveItemGroupVariants = VariantProps<typeof fileUploadPrimitiveItemGroupStyles>;
+export type FileUploadPrimitiveItemVariants = VariantProps<typeof fileUploadPrimitiveItemStyles>;
+export type FileUploadPrimitiveItemPreviewVariants = VariantProps<typeof fileUploadPrimitiveItemPreviewStyles>;
+export type FileUploadPrimitiveItemPreviewImageVariants = VariantProps<typeof fileUploadPrimitiveItemPreviewImageStyles>;
+export type FileUploadPrimitiveItemNameVariants = VariantProps<typeof fileUploadPrimitiveItemNameStyles>;
+export type FileUploadPrimitiveItemSizeTextVariants = VariantProps<typeof fileUploadPrimitiveItemSizeTextStyles>;
+export type FileUploadPrimitiveItemDeleteTriggerVariants = VariantProps<typeof fileUploadPrimitiveItemDeleteTriggerStyles>;
+export type FileUploadPrimitiveClearTriggerVariants = VariantProps<typeof fileUploadPrimitiveClearTriggerStyles>;

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

@@ -0,0 +1,68 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const fileUploadPrimitiveRootStyles = tv({
+    base: ['cgui:flex cgui:flex-col cgui:gap-3'],
+    variants: {
+        disabled: {
+            true: 'cgui:opacity-50 cgui:pointer-events-none',
+        },
+    },
+});
+export const fileUploadPrimitiveDropzoneStyles = tv({
+    base: [
+        'cgui:flex cgui:flex-col cgui:items-center cgui:justify-center cgui:gap-2',
+        'cgui:rounded-md cgui:border cgui:border-dashed cgui:border-stroke-default',
+        'cgui:cursor-pointer',
+        'cgui:transition-colors cgui:duration-200',
+    ],
+    variants: {
+        dragging: {
+            true: 'cgui:border-stroke-primary cgui:bg-surface-primary/5',
+        },
+        invalid: {
+            true: 'cgui:border-stroke-error',
+        },
+        disabled: {
+            true: 'cgui:cursor-not-allowed',
+        },
+    },
+});
+export const fileUploadPrimitiveTriggerStyles = tv({
+    base: ['cgui:cursor-pointer'],
+});
+export const fileUploadPrimitiveItemGroupStyles = tv({
+    base: ['cgui:flex cgui:flex-col cgui:gap-2 cgui:list-none cgui:p-0 cgui:m-0'],
+});
+export const fileUploadPrimitiveItemStyles = tv({
+    base: ['cgui:flex cgui:items-center cgui:gap-3'],
+    variants: {
+        variant: {
+            default: 'cgui:rounded-sm cgui:border cgui:border-stroke-default cgui:p-2',
+            clean: '',
+        },
+    },
+});
+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',
+    ],
+});
+export const fileUploadPrimitiveItemPreviewImageStyles = tv({
+    base: ['cgui:size-full cgui:object-cover'],
+});
+export const fileUploadPrimitiveItemNameStyles = tv({
+    base: ['cgui:text-body-2 cgui:text-fg-darkest cgui:truncate cgui:flex-1'],
+});
+export const fileUploadPrimitiveItemSizeTextStyles = tv({
+    base: ['cgui:text-caption-2 cgui:text-fg-regular cgui:shrink-0'],
+});
+export const fileUploadPrimitiveItemDeleteTriggerStyles = tv({
+    base: [
+        'cgui:shrink-0 cgui:size-6 cgui:flex cgui:items-center cgui:justify-center',
+        'cgui:rounded-xs cgui:cursor-pointer',
+        'cgui:text-fg-regular cgui:hover:text-fg-darkest',
+        'cgui:transition-colors cgui:duration-200',
+    ],
+});
+export const fileUploadPrimitiveClearTriggerStyles = tv({
+    base: ['cgui:cursor-pointer'],
+});

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

@@ -0,0 +1,83 @@
+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 { 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';
+export type RejectedFile = {
+    file: File;
+    errors: FileError[];
+};
+export type FileAcceptDetails = {
+    files: File[];
+};
+export type FileRejectDetails = {
+    files: RejectedFile[];
+};
+export type FileChangeDetails = {
+    acceptedFiles: File[];
+    rejectedFiles: RejectedFile[];
+};
+type FileUploadPrimitiveRootPropsWithoutHTML = 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 FileUploadPrimitiveRootProps = FileUploadPrimitiveRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FileUploadPrimitiveRootPropsWithoutHTML>;
+type FileUploadPrimitiveDropzonePropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{
+    disableClick?: boolean;
+}>>, FileUploadPrimitiveDropzoneVariants>;
+export type FileUploadPrimitiveDropzoneProps = FileUploadPrimitiveDropzonePropsWithoutHTML & Without<PrimitiveDivAttributes, FileUploadPrimitiveDropzonePropsWithoutHTML>;
+type FileUploadPrimitiveTriggerPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{}>>, FileUploadPrimitiveTriggerVariants>;
+export type FileUploadPrimitiveTriggerProps = FileUploadPrimitiveTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, FileUploadPrimitiveTriggerPropsWithoutHTML>;
+type FileUploadPrimitiveHiddenInputPropsWithoutHTML = WithElementRef<{}>;
+export type FileUploadPrimitiveHiddenInputProps = FileUploadPrimitiveHiddenInputPropsWithoutHTML & Without<PrimitiveInputAttributes, FileUploadPrimitiveHiddenInputPropsWithoutHTML>;
+type FileUploadPrimitiveItemGroupPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{}>>, FileUploadPrimitiveItemGroupVariants>;
+export type FileUploadPrimitiveItemGroupProps = FileUploadPrimitiveItemGroupPropsWithoutHTML & Without<PrimitiveUListAttributes, FileUploadPrimitiveItemGroupPropsWithoutHTML>;
+type FileUploadPrimitiveItemPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{
+    file: File;
+}>>, FileUploadPrimitiveItemVariants>;
+export type FileUploadPrimitiveItemProps = FileUploadPrimitiveItemPropsWithoutHTML & Without<PrimitiveLiAttributes, FileUploadPrimitiveItemPropsWithoutHTML>;
+type FileUploadPrimitiveItemPreviewPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{
+    type?: string;
+}>>, FileUploadPrimitiveItemPreviewVariants>;
+export type FileUploadPrimitiveItemPreviewProps = FileUploadPrimitiveItemPreviewPropsWithoutHTML & Without<PrimitiveDivAttributes, FileUploadPrimitiveItemPreviewPropsWithoutHTML>;
+type FileUploadPrimitiveItemPreviewImagePropsWithoutHTML = WithVariants<WithElementRef<{}>, FileUploadPrimitiveItemPreviewImageVariants>;
+export type FileUploadPrimitiveItemPreviewImageProps = FileUploadPrimitiveItemPreviewImagePropsWithoutHTML & Without<PrimitiveImgAttributes, FileUploadPrimitiveItemPreviewImagePropsWithoutHTML>;
+type FileUploadPrimitiveItemNamePropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{}>>, FileUploadPrimitiveItemNameVariants>;
+export type FileUploadPrimitiveItemNameProps = FileUploadPrimitiveItemNamePropsWithoutHTML & Without<PrimitiveDivAttributes, FileUploadPrimitiveItemNamePropsWithoutHTML>;
+type FileUploadPrimitiveItemSizeTextPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{}>>, FileUploadPrimitiveItemSizeTextVariants>;
+export type FileUploadPrimitiveItemSizeTextProps = FileUploadPrimitiveItemSizeTextPropsWithoutHTML & Without<PrimitiveDivAttributes, FileUploadPrimitiveItemSizeTextPropsWithoutHTML>;
+type FileUploadPrimitiveItemDeleteTriggerPropsWithoutHTML = WithVariants<WithElementRef<WithChildren<{}>>, FileUploadPrimitiveItemDeleteTriggerVariants>;
+export type FileUploadPrimitiveItemDeleteTriggerProps = FileUploadPrimitiveItemDeleteTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, FileUploadPrimitiveItemDeleteTriggerPropsWithoutHTML>;
+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;
+    addFiles(files: FileList | File[]): void;
+    removeFile(file: File): void;
+    clearFiles(): void;
+    openFilePicker(): void;
+};
+export type FileUploadPrimitiveContextProps = {
+    children?: import('svelte').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 {};

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

@@ -0,0 +1 @@
+export {};

package/package.json

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