compote-ui 0.5.7 → 0.7.0

package/dist/components/dialog/alert-dialog.svelte

@@ -2,18 +2,7 @@
 	import PhX from '../../icons/PhX.svelte';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
-
-	type Variant = 'default' | 'destructive';
-
-	type Props = {
-		open: boolean;
-		title: string;
-		description?: string | string[];
-		confirmLabel?: string;
-		cancelLabel?: string;
-		onConfirm?: () => void;
-		variant?: Variant;
-	};
+	import type { AlertDialogProps } from './dialog.types';
 
 	let {
 		open = $bindable(),
@@ -22,8 +11,12 @@
 		confirmLabel = 'Confirm',
 		cancelLabel = 'Cancel',
 		onConfirm,
-		variant = 'default'
-	}: Props = $props();
+		onCancel,
+		variant = 'default',
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: AlertDialogProps = $props();
 
 	const confirmClass = $derived(
 		variant === 'destructive'
@@ -32,7 +25,7 @@
 	);
 </script>
 
-<Dialog.Root role="alertdialog" bind:open>
+<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
 	<Portal>
 		<Dialog.Backdrop
 			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
@@ -54,6 +47,7 @@
 				<div class="mt-6 flex justify-end gap-3">
 					<Dialog.CloseTrigger
 						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none"
+						onclick={onCancel}
 					>
 						{cancelLabel}
 					</Dialog.CloseTrigger>

package/dist/components/dialog/alert-dialog.svelte.d.ts

@@ -1,13 +1,4 @@
-type Variant = 'default' | 'destructive';
-type Props = {
-    open: boolean;
-    title: string;
-    description?: string | string[];
-    confirmLabel?: string;
-    cancelLabel?: string;
-    onConfirm?: () => void;
-    variant?: Variant;
-};
-declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+import type { AlertDialogProps } from './dialog.types';
+declare const AlertDialog: import("svelte").Component<AlertDialogProps, {}, "open">;
 type AlertDialog = ReturnType<typeof AlertDialog>;
 export default AlertDialog;

package/dist/components/dialog/dialog.svelte

@@ -1,19 +1,9 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
 	import PhX from '../../icons/PhX.svelte';
-
-	interface Props {
-		open: boolean;
-		title: string;
-		description?: string;
-		children: Snippet;
-		footer?: Snippet;
-		onClose?: () => void;
-		contentClass?: string;
-	}
+	import type { DialogProps } from './dialog.types';
 
 	let {
 		open = $bindable(),
@@ -21,12 +11,14 @@
 		description,
 		children,
 		footer,
-		onClose,
-		contentClass
-	}: Props = $props();
+		contentClass,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: DialogProps = $props();
 </script>
 
-<Dialog.Root bind:open lazyMount unmountOnExit>
+<Dialog.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
 	<Portal>
 		<Dialog.Backdrop
 			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
@@ -57,7 +49,6 @@
 
 				<Dialog.CloseTrigger
 					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
-					onclick={onClose}
 				>
 					<PhX class="size-4" />
 					<span class="sr-only">Close</span>

package/dist/components/dialog/dialog.svelte.d.ts

@@ -1,14 +1,5 @@
-import type { Snippet } from 'svelte';
 import { Dialog } from '@ark-ui/svelte/dialog';
-interface Props {
-    open: boolean;
-    title: string;
-    description?: string;
-    children: Snippet;
-    footer?: Snippet;
-    onClose?: () => void;
-    contentClass?: string;
-}
-declare const Dialog: import("svelte").Component<Props, {}, "open">;
+import type { DialogProps } from './dialog.types';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

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

@@ -0,0 +1,24 @@
+import type { DialogRootBaseProps } from '@ark-ui/svelte/dialog';
+import type { Snippet } from 'svelte';
+export type { DialogRootBaseProps };
+type DialogSharedProps = Pick<DialogRootBaseProps, 'closeOnEscape' | 'closeOnInteractOutside' | 'onOpenChange' | 'lazyMount' | 'unmountOnExit'>;
+export interface DialogProps extends DialogSharedProps {
+    open: boolean;
+    title: string;
+    description?: string;
+    children: Snippet;
+    footer?: Snippet;
+    contentClass?: string;
+    initialFocusEl?: DialogRootBaseProps['initialFocusEl'];
+}
+export type AlertDialogVariant = 'default' | 'destructive';
+export interface AlertDialogProps extends DialogSharedProps {
+    open: boolean;
+    title: string;
+    description?: string | string[];
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: AlertDialogVariant;
+}

package/dist/components/dialog/dialog.types.js

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

package/dist/components/file-upload/{dropzone.svelte → file-upload-dropzone.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { FileUpload } from '@ark-ui/svelte/file-upload';
 	import { getAcceptAttribute } from './utils';
-	import type { Props } from './types';
+	import type { FileUploadDropzoneProps } from './types';
 	import PhUploadSimple from '../../icons/PhUploadSimple.svelte';
 
 	let {
@@ -10,7 +10,7 @@
 		maxFiles = 1,
 		onFileAccept,
 		...restProps
-	}: Props = $props();
+	}: FileUploadDropzoneProps = $props();
 
 	const accept = $derived(getAcceptAttribute(fileType));
 </script>

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

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

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { FileUpload, type FileUploadFileError } from '@ark-ui/svelte/file-upload';
+	import PhX from '../../icons/PhX.svelte';
+	import type { FileUploadProps } from './types';
+	import { getAcceptAttribute } from './utils';
+	import { getFileIcon } from './icons';
+
+	const errorMessages: Record<FileUploadFileError, string> = {
+		TOO_MANY_FILES: 'Too many files',
+		FILE_INVALID_TYPE: 'Invalid file type',
+		FILE_TOO_LARGE: 'File too large',
+		FILE_TOO_SMALL: 'File too small',
+		FILE_INVALID: 'Invalid file',
+		FILE_EXISTS: 'File already exists'
+	};
+
+	let {
+		fileType,
+		label,
+		triggerLabel = 'Choose file',
+		maxFiles = 1,
+		...restProps
+	}: FileUploadProps = $props();
+
+	const accept = $derived(getAcceptAttribute(fileType));
+</script>
+
+<FileUpload.Root {maxFiles} {accept} class="flex flex-col gap-1.5" {...restProps}>
+	{#if label}
+		<FileUpload.Label class="text-sm font-medium">{label}</FileUpload.Label>
+	{/if}
+
+	<FileUpload.Context>
+		{#snippet render(context)}
+			{@const ctx = context()}
+			{@const accepted = ctx.acceptedFiles}
+			{@const rejected = ctx.rejectedFiles}
+
+			{#if maxFiles === 1}
+				{#if accepted.length === 0}
+					<FileUpload.Trigger
+						class="inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm text-ink transition-colors hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-50"
+					>
+						{triggerLabel}
+					</FileUpload.Trigger>
+				{/if}
+			{:else}
+				<FileUpload.Trigger
+					disabled={accepted.length >= maxFiles}
+					class="inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm text-ink transition-colors hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-50"
+				>
+					{triggerLabel}
+				</FileUpload.Trigger>
+			{/if}
+
+			<FileUpload.ItemGroup class="flex flex-col gap-1">
+				{#each accepted as file (file.name)}
+					<FileUpload.Item {file} class="flex items-center gap-2 rounded border px-3 py-2 text-sm">
+						<FileUpload.ItemPreview type="image/*">
+							<FileUpload.ItemPreviewImage class="size-8 shrink-0 rounded object-cover" />
+						</FileUpload.ItemPreview>
+						{#if !file.type.startsWith('image/')}
+							{@const Icon = getFileIcon(file)}
+							<Icon class="size-4 shrink-0" />
+						{/if}
+						<FileUpload.ItemName class="flex-1 truncate" />
+						<FileUpload.ItemSizeText class="shrink-0 text-xs text-ink-dim" />
+						<FileUpload.ItemDeleteTrigger
+							class="ml-auto shrink-0 cursor-pointer text-ink-dim transition-colors hover:text-ink"
+						>
+							<PhX class="size-4" />
+						</FileUpload.ItemDeleteTrigger>
+					</FileUpload.Item>
+				{/each}
+			</FileUpload.ItemGroup>
+
+			{#if rejected.length > 0}
+				<div class="mt-1 flex flex-col gap-0.5">
+					{#each rejected as rejection (rejection.file.name)}
+						<p class="text-xs text-red-600">
+							{rejection.file.name}: {rejection.errors.map((e) => errorMessages[e]).join(', ')}
+						</p>
+					{/each}
+				</div>
+			{/if}
+		{/snippet}
+	</FileUpload.Context>
+
+	<FileUpload.HiddenInput />
+</FileUpload.Root>

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

@@ -0,0 +1,5 @@
+import { FileUpload } from '@ark-ui/svelte/file-upload';
+import type { FileUploadProps } from './types';
+declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -1,6 +1,12 @@
 import type { FileUploadRootProps } from '@ark-ui/svelte/file-upload';
 import type { FileType } from './utils';
-export interface Props extends FileUploadRootProps {
+export interface FileUploadDropzoneProps extends FileUploadRootProps {
     fileType: FileType;
     label: string;
 }
+export interface FileUploadProps extends Omit<FileUploadRootProps, 'accept'> {
+    fileType?: FileType;
+    label?: string;
+    triggerLabel?: string;
+    maxFiles?: number;
+}

package/dist/components/image-crop-dialog/image-crop-dialog.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Dialog from '../dialog/dialog.svelte';
+	import ImageCropper from '../image-cropper/image-cropper.svelte';
+	import { Button } from '../..';
+	import { cropImage, processImage } from '../../utils/image-processing';
+	import type { ImageCropperCropData } from '../image-cropper/types';
+	import type { ImageCropDialogProps } from './types';
+
+	let {
+		open = $bindable(),
+		imageSrc,
+		onConfirm,
+		onCancel,
+		title = 'Crop Image',
+		description = 'Adjust the crop area or skip to use the full image.',
+		aspectRatio = undefined,
+		processOptions = undefined,
+		showSkipCrop = true,
+		confirmLabel = 'Crop & Save',
+		skipLabel = 'Skip Crop'
+	}: ImageCropDialogProps = $props();
+
+	let getCropData = $state<(() => ImageCropperCropData) | undefined>(undefined);
+	let processing = $state(false);
+
+	async function handleCrop() {
+		processing = true;
+		try {
+			const cropData = getCropData?.();
+			if (cropData) {
+				const processed = await cropImage(imageSrc, cropData, processOptions);
+				onConfirm(processed);
+			}
+		} finally {
+			processing = false;
+		}
+	}
+
+	async function handleSkipCrop() {
+		processing = true;
+		try {
+			const processed = await processImage(imageSrc, processOptions);
+			onConfirm(processed);
+		} finally {
+			processing = false;
+		}
+	}
+</script>
+
+<Dialog
+	bind:open
+	{title}
+	{description}
+	onOpenChange={(details) => {
+		if (!details.open) onCancel();
+	}}
+>
+	<ImageCropper bind:getCropData src={imageSrc} alt="Crop preview" {aspectRatio} />
+	{#snippet footer()}
+		<Button variant="outline" onclick={onCancel} disabled={processing}>Cancel</Button>
+		{#if showSkipCrop}
+			<Button variant="outline" onclick={handleSkipCrop} disabled={processing}>
+				{processing ? 'Processing...' : skipLabel}
+			</Button>
+		{/if}
+		<Button onclick={handleCrop} disabled={processing}>
+			{processing ? 'Processing...' : confirmLabel}
+		</Button>
+	{/snippet}
+</Dialog>

package/dist/components/image-crop-dialog/image-crop-dialog.svelte.d.ts

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

package/dist/components/image-crop-dialog/types.d.ts

@@ -0,0 +1,25 @@
+import type { ProcessImageOptions } from '../../utils/image-processing';
+export interface ImageCropDialogProps {
+    /** Controls dialog open state */
+    open: boolean;
+    /** Source image (data URL, blob URL, or regular URL) */
+    imageSrc: string;
+    /** Called with the processed data URL on crop or skip */
+    onConfirm: (processedDataUrl: string) => void;
+    /** Called when the user cancels (Cancel button or clicking outside/Escape) */
+    onCancel: () => void;
+    /** Dialog title */
+    title?: string;
+    /** Dialog description */
+    description?: string;
+    /** Default aspect ratio for the cropper (undefined = free) */
+    aspectRatio?: number;
+    /** Processing options applied to both crop and skip paths */
+    processOptions?: ProcessImageOptions;
+    /** Whether to show the "Skip Crop" button (default: true) */
+    showSkipCrop?: boolean;
+    /** Label for the confirm button */
+    confirmLabel?: string;
+    /** Label for the skip button */
+    skipLabel?: string;
+}

package/dist/components/image-crop-dialog/types.js

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

package/dist/components/image-cropper/image-cropper.svelte

@@ -2,6 +2,8 @@
 	import { ImageCropper, useImageCropper } from '@ark-ui/svelte/image-cropper';
 	import type { ImageCropperProps } from './types';
 	import { Button } from '../..';
+	import { cropImage } from '../../utils/image-processing';
+	import type { ProcessImageOptions } from '../../utils/image-processing';
 
 	let {
 		src,
@@ -11,6 +13,8 @@
 		getCroppedImage = $bindable(),
 		// eslint-disable-next-line no-useless-assignment
 		getCropData = $bindable(),
+		// eslint-disable-next-line no-useless-assignment
+		getProcessedImage = $bindable(),
 		...cropperProps
 	}: ImageCropperProps = $props();
 
@@ -43,6 +47,9 @@
 	getCroppedImage = (options) => imageCropper().getCroppedImage(options);
 	// eslint-disable-next-line no-useless-assignment
 	getCropData = () => imageCropper().getCropData();
+	// eslint-disable-next-line no-useless-assignment
+	getProcessedImage = (opts?: ProcessImageOptions) =>
+		cropImage(src, imageCropper().getCropData(), opts);
 
 	let cropData = $derived(imageCropper().getCropData());
 </script>

package/dist/components/image-cropper/image-cropper.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ImageCropper } from '@ark-ui/svelte/image-cropper';
 import type { ImageCropperProps } from './types';
-declare const ImageCropper: import("svelte").Component<ImageCropperProps, {}, "getCropData" | "aspectRatio" | "getCroppedImage">;
+declare const ImageCropper: import("svelte").Component<ImageCropperProps, {}, "getCropData" | "aspectRatio" | "getCroppedImage" | "getProcessedImage">;
 type ImageCropper = ReturnType<typeof ImageCropper>;
 export default ImageCropper;

package/dist/components/image-cropper/types.d.ts

@@ -1,8 +1,11 @@
 import type { UseImageCropperProps, UseImageCropperReturn } from '@ark-ui/svelte/image-cropper';
+import type { ProcessImageOptions } from '../../utils/image-processing';
 export type ImageCropperCropData = ReturnType<ReturnType<UseImageCropperReturn>['getCropData']>;
 export interface ImageCropperProps extends UseImageCropperProps {
     src: string;
     alt?: string;
     getCroppedImage?: ReturnType<UseImageCropperReturn>['getCroppedImage'];
     getCropData?: ReturnType<UseImageCropperReturn>['getCropData'];
+    /** Bindable: returns a processed (cropped + resized + converted) data URL in one call */
+    getProcessedImage?: (opts?: ProcessImageOptions) => Promise<string>;
 }

package/dist/index.d.ts

@@ -1,12 +1,21 @@
 export { default as Button } from './components/button/button.svelte';
+export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
+export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
 export { default as Carousel } from './components/carousel/carousel.svelte';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export type { DialogProps, AlertDialogProps } from './components/dialog/dialog.types';
+export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
+export { default as FileUpload } from './components/file-upload/file-upload.svelte';
+export type { FileUploadProps } from './components/file-upload/types';
+export type { FileType } from './components/file-upload/utils';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
 export type { ImageCropperProps, ImageCropperCropData } from './components/image-cropper/types';
+export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
+export type { ImageCropDialogProps } from './components/image-crop-dialog/types';
 export { default as Listbox } from './components/listbox/listbox.svelte';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';

package/dist/index.js

@@ -1,12 +1,16 @@
 // Reexport your entry components here
 export { default as Button } from './components/button/button.svelte';
+export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export { default as Carousel } from './components/carousel/carousel.svelte';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
+export { default as FileUpload } from './components/file-upload/file-upload.svelte';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
+export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
 export { default as Listbox } from './components/listbox/listbox.svelte';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export { default as Select } from './components/select/select.svelte';

package/dist/utils/image-processing.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Client-side image processing utilities using the Canvas API.
+ * These are browser-only utilities — they will throw if called during SSR.
+ */
+export interface ProcessImageOptions {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+    format?: 'image/webp' | 'image/jpeg' | 'image/png';
+}
+export interface CropRegion {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Load an image element from a src URL (data URL, blob URL, or regular URL) */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+/** Convert a File to a base64 data URL */
+export declare function fileToDataUrl(file: File): Promise<string>;
+/**
+ * Crop a full-resolution source image using natural pixel coordinates, then resize and convert.
+ * Use this instead of getCroppedImage() from Ark UI which outputs at CSS/display resolution.
+ */
+export declare function cropImage(src: string, crop: CropRegion, opts?: ProcessImageOptions): Promise<string>;
+/** Resize and convert an image without cropping, returns a base64 data URL */
+export declare function processImage(src: string, opts?: ProcessImageOptions): Promise<string>;

package/dist/utils/image-processing.js

@@ -0,0 +1,66 @@
+/**
+ * Client-side image processing utilities using the Canvas API.
+ * These are browser-only utilities — they will throw if called during SSR.
+ */
+const defaults = {
+    maxWidth: 1000,
+    maxHeight: 1000,
+    quality: 0.85,
+    format: 'image/webp'
+};
+/** Load an image element from a src URL (data URL, blob URL, or regular URL) */
+export function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = src;
+    });
+}
+/** Convert a File to a base64 data URL */
+export function fileToDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(new Error('Failed to read file'));
+        reader.readAsDataURL(file);
+    });
+}
+/**
+ * Crop a full-resolution source image using natural pixel coordinates, then resize and convert.
+ * Use this instead of getCroppedImage() from Ark UI which outputs at CSS/display resolution.
+ */
+export async function cropImage(src, crop, opts) {
+    const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
+    const img = await loadImage(src);
+    let { width, height } = crop;
+    if (width > maxWidth || height > maxHeight) {
+        const ratio = Math.min(maxWidth / width, maxHeight / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);
+    return canvas.toDataURL(format, quality);
+}
+/** Resize and convert an image without cropping, returns a base64 data URL */
+export async function processImage(src, opts) {
+    const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
+    const img = await loadImage(src);
+    let { width, height } = img;
+    if (width > maxWidth || height > maxHeight) {
+        const ratio = Math.min(maxWidth / width, maxHeight / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas.toDataURL(format, quality);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.5.7",
+	"version": "0.7.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/file-upload/basic-document.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-	import { FileUpload } from '@ark-ui/svelte/file-upload';
-	import { Field } from '@ark-ui/svelte/field';
-
-	import { getFileIcon } from './icons';
-
-	import { getAcceptAttribute } from './utils';
-	import type { Props } from './types';
-	import PhFileText from '../../icons/PhFileText.svelte';
-
-	let {
-		fileType,
-		acceptedFiles,
-		onFileChange = $bindable(),
-		label,
-		...restProps
-	}: Props = $props();
-	const accept = $derived(getAcceptAttribute(fileType));
-	// const id = $props.id();
-</script>
-
-<!-- {id} -->
-
-<Field.Root class="w-full max-w-sm">
-	<FileUpload.Root
-		{...restProps}
-		maxFiles={1}
-		{accept}
-		{acceptedFiles}
-		{onFileChange}
-		class="flex flex-col items-start gap-3"
-	>
-		{#if label}
-			<Field.Label>
-				{label}
-			</Field.Label>
-		{/if}
-		<FileUpload.Context>
-			{#snippet render(context)}
-				<div class="flex items-center gap-3">
-					<!-- Image Preview / Placeholder -->
-					<div
-						class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border bg-surface-2"
-					>
-						{#if context().acceptedFiles.length > 0}
-							<FileUpload.ItemGroup>
-								{#each context().acceptedFiles as file (file.name)}
-									<FileUpload.Item file={context().acceptedFiles[0]}>
-										{#if file.type.startsWith('image/')}
-											<FileUpload.ItemPreview type="image/*">
-												<FileUpload.ItemPreviewImage class="h-full w-full object-cover" />
-											</FileUpload.ItemPreview>
-										{:else}
-											{@const IconComponent = getFileIcon(file)}
-											<IconComponent />
-										{/if}
-									</FileUpload.Item>
-								{/each}
-							</FileUpload.ItemGroup>
-						{:else}
-							<PhFileText class="h-5 w-5 text-ink-dim" />
-						{/if}
-					</div>
-
-					<!-- Upload/Change Button -->
-					<FileUpload.Trigger
-						class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-hidden"
-					>
-						{context().acceptedFiles.length > 0 ? 'Change image' : 'Upload image'}
-					</FileUpload.Trigger>
-				</div>
-
-				<!-- Filename and Remove -->
-				{#if context().acceptedFiles.length > 0}
-					<FileUpload.ItemGroup>
-						<FileUpload.Item file={context().acceptedFiles[0]} class="flex items-center gap-2">
-							<FileUpload.ItemName class="text-sm text-ink-dim" />
-							<FileUpload.ItemDeleteTrigger class="text-sm text-red-500 hover:text-red-600">
-								Remove
-							</FileUpload.ItemDeleteTrigger>
-						</FileUpload.Item>
-					</FileUpload.ItemGroup>
-				{/if}
-			{/snippet}
-		</FileUpload.Context>
-
-		<FileUpload.HiddenInput />
-	</FileUpload.Root>
-</Field.Root>

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

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

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

@@ -1,50 +0,0 @@
-<script lang="ts">
-	import PhUser from '../../icons/PhUser.svelte';
-	import { FileUpload } from '@ark-ui/svelte/file-upload';
-</script>
-
-<FileUpload.Root maxFiles={1} accept="image/*" class="flex flex-col items-start gap-3">
-	<FileUpload.Context>
-		{#snippet render(context)}
-			<div class="flex items-center gap-3">
-				<!-- Image Preview / Placeholder -->
-				<div
-					class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border bg-surface-2"
-				>
-					{#if context().acceptedFiles.length > 0}
-						<FileUpload.ItemGroup>
-							<FileUpload.Item file={context().acceptedFiles[0]}>
-								<FileUpload.ItemPreview type="image/*">
-									<FileUpload.ItemPreviewImage class="h-full w-full object-cover" />
-								</FileUpload.ItemPreview>
-							</FileUpload.Item>
-						</FileUpload.ItemGroup>
-					{:else}
-						<PhUser class="h-5 w-5 text-ink-dim" />
-					{/if}
-				</div>
-
-				<!-- Upload/Change Button -->
-				<FileUpload.Trigger
-					class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-hidden"
-				>
-					{context().acceptedFiles.length > 0 ? 'Change image' : 'Upload image'}
-				</FileUpload.Trigger>
-			</div>
-
-			<!-- Filename and Remove -->
-			{#if context().acceptedFiles.length > 0}
-				<FileUpload.ItemGroup>
-					<FileUpload.Item file={context().acceptedFiles[0]} class="flex items-center gap-2">
-						<FileUpload.ItemName class="text-sm text-ink-dim" />
-						<FileUpload.ItemDeleteTrigger class="text-sm text-red-500 hover:text-red-600">
-							Remove
-						</FileUpload.ItemDeleteTrigger>
-					</FileUpload.Item>
-				</FileUpload.ItemGroup>
-			{/if}
-		{/snippet}
-	</FileUpload.Context>
-
-	<FileUpload.HiddenInput />
-</FileUpload.Root>

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

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

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

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

package/dist/components/file-upload/files-list.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-	import { FileUpload } from '@ark-ui/svelte/file-upload';
-	import { getFileIcon } from './icons';
-	import PhFileText from '../../icons/PhFileText.svelte';
-	import PhX from '../../icons/PhX.svelte';
-
-	const defaultFiles = [
-		new File(['Welcome to Ark UI Svelte`'], 'document.pdf', {
-			type: 'text/plain'
-		}),
-		new File(['Welcome to Ark UI Svelte, this is a zip file`'], 'showcase.zip', {
-			type: 'application/zip'
-		}),
-		new File(['Welcome to Ark UI Svelte, this is an excel file`'], 'data.xlsx', {
-			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-		})
-	];
-</script>
-
-<FileUpload.Root
-	maxFiles={10}
-	maxFileSize={100 * 1024 * 1024}
-	class="w-full max-w-2xl space-y-4"
-	defaultAcceptedFiles={defaultFiles}
->
-	<FileUpload.Context>
-		{#snippet render(context)}
-			<!-- Dropzone -->
-			<FileUpload.Dropzone
-				class="flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-surface-3 bg-surface-2 px-6 py-12 transition-colors hover:bg-surface-3"
-			>
-				<!-- File Icon -->
-				<div
-					class="mb-4 flex h-12 w-12 items-center justify-center rounded-full border bg-surface-1"
-				>
-					<PhFileText class="h-5 w-5 text-ink-dim" />
-				</div>
-
-				<!-- Text -->
-				<div class="space-y-2 text-center">
-					<h3 class="text-sm font-medium text-ink">Upload files</h3>
-					<p class="text-sm text-ink-dim">Drag & drop or click to browse</p>
-					<p class="text-xs text-ink-dim">All files • Max 10 files • Up to 100MB</p>
-				</div>
-			</FileUpload.Dropzone>
-
-			<!-- Files List -->
-			{#if context().acceptedFiles.length > 0}
-				<div class="space-y-3">
-					<FileUpload.ItemGroup>
-						{#each context().acceptedFiles as file (file.name)}
-							<FileUpload.Item {file}>
-								<div class="flex items-center gap-3 rounded-lg border bg-surface-1 p-3">
-									<!-- File Icon/Preview -->
-									<div
-										class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border bg-surface-2"
-									>
-										{#if file.type.startsWith('image/')}
-											<FileUpload.ItemPreview type="image/*">
-												<FileUpload.ItemPreviewImage class="h-full w-full object-cover" />
-											</FileUpload.ItemPreview>
-										{:else}
-											{@const IconComponent = getFileIcon(file)}
-											<IconComponent class="h-4 w-4 opacity-60" />
-										{/if}
-									</div>
-
-									<!-- File Info -->
-									<div class="min-w-0 flex-1">
-										<FileUpload.ItemName class="truncate text-sm font-medium text-ink" />
-										<FileUpload.ItemSizeText class="text-xs text-ink-dim" />
-									</div>
-
-									<!-- Delete Button -->
-									<FileUpload.ItemDeleteTrigger
-										class="flex h-6 w-6 shrink-0 items-center justify-center text-ink-dim hover:text-ink"
-									>
-										<PhX class="h-4 w-4" />
-									</FileUpload.ItemDeleteTrigger>
-								</div>
-							</FileUpload.Item>
-						{/each}
-					</FileUpload.ItemGroup>
-
-					<!-- Remove All Button -->
-					<FileUpload.ClearTrigger
-						class="inline-flex items-center rounded-md border bg-surface-1 px-3 py-1.5 text-xs font-medium text-ink hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-hidden"
-					>
-						Remove all files
-					</FileUpload.ClearTrigger>
-				</div>
-			{/if}
-		{/snippet}
-	</FileUpload.Context>
-
-	<FileUpload.HiddenInput />
-</FileUpload.Root>

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

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