@casinogate/ui 1.11.7 → 1.11.9

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/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
+export * from './file-upload/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';

package/dist/components/index.js

@@ -12,6 +12,7 @@ export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
+export * from './file-upload/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';

package/dist/components/pagination/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Ellipsis } from './pagination.ellipsis.svelte';
+export { default as Item } from './pagination.item.svelte';
+export { default as NextButton } from './pagination.next-button.svelte';
+export { default as PageSize } from './pagination.page-size.svelte';
+export { default as PrevButton } from './pagination.prev-button.svelte';
+export { default as Root } from './pagination.root.svelte';

package/dist/components/pagination/components/index.js

@@ -0,0 +1,6 @@
+export { default as Ellipsis } from './pagination.ellipsis.svelte';
+export { default as Item } from './pagination.item.svelte';
+export { default as NextButton } from './pagination.next-button.svelte';
+export { default as PageSize } from './pagination.page-size.svelte';
+export { default as PrevButton } from './pagination.prev-button.svelte';
+export { default as Root } from './pagination.root.svelte';

package/dist/components/pagination/components/pagination.ellipsis.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-  import { PaginationStylesContext } from '../styles.js';
-
   import { Icon } from '../../icons/index.js';
   import { cn } from '../../../internal/utils/common.js';
+  import { paginationEllipsisStyles } from '../styles.js';
   import type { PaginationEllipsisProps } from '../types.js';
 
   let { class: className, ref = $bindable(null), child, ...restProps }: PaginationEllipsisProps = $props();
 
-  const variants = PaginationStylesContext.get();
-
-  const classNames = $derived(cn(variants.current.ellipsis(), className));
+  const classNames = $derived(cn(paginationEllipsisStyles(), className));
 </script>
 
 {#if child}

package/dist/components/pagination/components/pagination.item.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/common.js';
-  import { PaginationStylesContext } from '../styles.js';
-  import type { PaginationItemProps } from '../types.js';
-
   import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import { PaginationContext, paginationItemStyles } from '../styles.js';
+  import type { PaginationItemProps } from '../types.js';
 
   let { page, class: className, ...props }: PaginationItemProps = $props();
 
-  const variants = PaginationStylesContext.get();
+  const ctx = PaginationContext.get();
 </script>
 
-<PaginationPrimitive.Page {page} class={cn(variants.current.item(), className)} {...props} />
+<PaginationPrimitive.Page {page} class={cn(paginationItemStyles({ size: ctx.current.size }), className)} {...props} />

package/dist/components/pagination/components/pagination.next-button.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
-  import { cn } from '../../../internal/utils/common.js';
-  import { PaginationStylesContext } from '../styles.js';
-
   import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
   import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import { paginationButtonStyles } from '../styles.js';
   import type { PaginationNextButtonProps } from '../types.js';
 
   let { class: className, children, ref = $bindable(null), ...props }: PaginationNextButtonProps = $props();
 
-  const variants = PaginationStylesContext.get();
-
-  const classNames = $derived(cn(variants.current.button(), className));
+  const classNames = $derived(cn(paginationButtonStyles(), className));
 </script>
 
 <PaginationPrimitive.NextButton bind:ref class={classNames} {...props}>

package/dist/components/pagination/components/pagination.page-size.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Select, type SelectCollection } from '../../select/index.js';
+  import { createSelectCollection } from '../../select/select.svelte';
+  import type { PaginationPageSizeProps } from '../types.js';
+
+  let { perPage = $bindable(10), perPageItems = [10, 20, 50, 100], ...restProps }: PaginationPageSizeProps = $props();
+
+  let value = $state(String(perPage));
+
+  const collection: SelectCollection = $derived(
+    createSelectCollection({
+      items: perPageItems.map((item) => ({
+        value: String(item),
+        label: String(item),
+      })),
+    })
+  );
+
+  $effect(() => {
+    value = String(perPage);
+  });
+
+  function onSelect(newValue: string | string[]) {
+    if (typeof newValue === 'string' && newValue) {
+      perPage = Number(newValue);
+    }
+  }
+</script>
+
+<Select.Root
+  {collection}
+  bind:value
+  type="single"
+  {onSelect}
+  triggerClass="cgui:min-w-15"
+  triggerProps={{
+    fullWidth: false,
+  }}
+  {...restProps}
+/>

package/dist/components/pagination/components/pagination.page-size.svelte.d.ts

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

package/dist/components/pagination/components/pagination.prev-button.svelte

@@ -2,14 +2,12 @@
   import { Icon } from '../../icons/index.js';
   import { cn } from '../../../internal/utils/common.js';
   import { Pagination as PaginationPrimitive } from 'bits-ui';
-  import { PaginationStylesContext } from '../styles.js';
+  import { paginationButtonStyles } from '../styles.js';
   import type { PaginationPrevButtonProps } from '../types.js';
 
   let { class: className, children, ref = $bindable(null), ...props }: PaginationPrevButtonProps = $props();
 
-  const variants = PaginationStylesContext.get();
-
-  const classNames = $derived(cn(variants.current.button(), className));
+  const classNames = $derived(cn(paginationButtonStyles(), className));
 </script>
 
 <PaginationPrimitive.PrevButton bind:ref class={classNames} {...props}>