@casinogate/ui 1.11.7 → 1.11.9

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);
   }
@@ -493,12 +499,21 @@
   .cgui\:max-h-80 {
     max-height: calc(var(--cgui-spacing) * 80);
   }
+  .cgui\:min-h-6 {
+    min-height: calc(var(--cgui-spacing) * 6);
+  }
   .cgui\:min-h-7\.5 {
     min-height: calc(var(--cgui-spacing) * 7.5);
   }
+  .cgui\:min-h-8 {
+    min-height: calc(var(--cgui-spacing) * 8);
+  }
   .cgui\:min-h-9 {
     min-height: calc(var(--cgui-spacing) * 9);
   }
+  .cgui\:min-h-10 {
+    min-height: calc(var(--cgui-spacing) * 10);
+  }
   .cgui\:min-h-11 {
     min-height: calc(var(--cgui-spacing) * 11);
   }
@@ -625,6 +640,18 @@
   .cgui\:min-w-5 {
     min-width: calc(var(--cgui-spacing) * 5);
   }
+  .cgui\:min-w-6 {
+    min-width: calc(var(--cgui-spacing) * 6);
+  }
+  .cgui\:min-w-8 {
+    min-width: calc(var(--cgui-spacing) * 8);
+  }
+  .cgui\:min-w-10 {
+    min-width: calc(var(--cgui-spacing) * 10);
+  }
+  .cgui\:min-w-15 {
+    min-width: calc(var(--cgui-spacing) * 15);
+  }
   .cgui\:min-w-35 {
     min-width: calc(var(--cgui-spacing) * 35);
   }
@@ -712,6 +739,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 +1050,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 +1089,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);
   }
@@ -1837,6 +1879,21 @@
       padding-right: calc(var(--cgui-spacing) * 14);
     }
   }
+  .cgui\:data-\[has-chevron\]\:pr-8 {
+    &[data-has-chevron] {
+      padding-right: calc(var(--cgui-spacing) * 8);
+    }
+  }
+  .cgui\:data-\[has-chevron\]\:pr-10 {
+    &[data-has-chevron] {
+      padding-right: calc(var(--cgui-spacing) * 10);
+    }
+  }
+  .cgui\:data-\[has-chevron\]\:pr-14 {
+    &[data-has-chevron] {
+      padding-right: calc(var(--cgui-spacing) * 14);
+    }
+  }
   .cgui\:data-\[highlighted\]\:bg-surface-lightest {
     &[data-highlighted] {
       background-color: var(--cg-ui-color-surface-lightest);

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 {};