compote-ui 0.6.0 → 0.8.0

package/dist/components/combobox/combobox.svelte

@@ -105,7 +105,7 @@
 
 	<Combobox.Control
 		class={cn(
-			'rounded-ark flex min-h-9 items-center gap-1 border px-3 shadow-sm',
+			'flex min-h-9 items-center gap-1 rounded border px-3 shadow-sm',
 			'focus-within:ring-1 focus-within:ring-primary',
 			'data-invalid:border-danger data-invalid:focus-within:ring-danger',
 			multiple && 'flex-wrap py-1'

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,14 @@
 import type { FileUploadRootProps } from '@ark-ui/svelte/file-upload';
+export type { FileUploadFileChangeDetails } from '@ark-ui/svelte/file-upload';
 import type { FileType } from './utils';
-export interface Props extends FileUploadRootProps {
+export type { FileType } from './utils';
+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

@@ -47,7 +47,14 @@
 	}
 </script>
 
-<Dialog bind:open {title} {description} onOpenChange={(details) => { if (!details.open) onCancel(); }}>
+<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>

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

@@ -48,7 +48,8 @@
 	// 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);
+	getProcessedImage = (opts?: ProcessImageOptions) =>
+		cropImage(src, imageCropper().getCropData(), opts);
 
 	let cropData = $derived(imageCropper().getCropData());
 </script>

package/dist/index.d.ts

@@ -8,9 +8,9 @@ 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/dropzone.svelte';
-export { default as FileUploadBasicDocument } from './components/file-upload/basic-document.svelte';
-export type { FileType } from './components/file-upload/utils';
+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, FileUploadFileChangeDetails, FileType } from './components/file-upload/types';
 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';

package/dist/index.js

@@ -7,8 +7,8 @@ export { default as CheckboxGroup } from './components/checkbox/checkbox-group.s
 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/dropzone.svelte';
-export { default as FileUploadBasicDocument } from './components/file-upload/basic-document.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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.6.0",
+	"version": "0.8.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;