compote-ui 0.3.0 → 0.5.1

package/dist/components/field/field-textarea.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { FieldTextareaProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, value = $bindable(), ...rest }: FieldTextareaProps = $props();
+</script>
+
+<Field.Textarea
+	{...rest}
+	{value}
+	class={cn(
+		'flex min-h-20 w-full resize-y rounded-md border bg-surface-1 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
+		className
+	)}
+/>

package/dist/components/field/field-textarea.svelte.d.ts

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

package/dist/components/field/field.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { FieldRootProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldRootProps = $props();
+</script>
+
+<Field.Root {...rest} class={cn('group flex flex-col gap-1.5', className)}>
+	{@render children?.()}
+</Field.Root>

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

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

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

@@ -0,0 +1,7 @@
+export { default as Root } from './field.svelte';
+export { default as Label } from './field-label.svelte';
+export { default as Input } from './field-input.svelte';
+export { default as Textarea } from './field-textarea.svelte';
+export { default as HelperText } from './field-helper-text.svelte';
+export { default as ErrorText } from './field-error-text.svelte';
+export type { FieldRootProps, FieldLabelProps, FieldInputProps, FieldTextareaProps, FieldHelperTextProps, FieldErrorTextProps } from './types';

package/dist/components/field/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './field.svelte';
+export { default as Label } from './field-label.svelte';
+export { default as Input } from './field-input.svelte';
+export { default as Textarea } from './field-textarea.svelte';
+export { default as HelperText } from './field-helper-text.svelte';
+export { default as ErrorText } from './field-error-text.svelte';

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { FieldRootBaseProps, FieldLabelBaseProps, FieldInputProps as ArkFieldInputProps, FieldTextareaProps as ArkFieldTextareaProps, FieldHelperTextBaseProps, FieldErrorTextBaseProps } from '@ark-ui/svelte/field';
+export interface FieldRootProps extends FieldRootBaseProps {
+    class?: string;
+}
+export interface FieldLabelProps extends FieldLabelBaseProps {
+    class?: string;
+}
+export interface FieldInputProps extends ArkFieldInputProps {
+    class?: string;
+    startIcon?: Snippet;
+    endIcon?: Snippet;
+}
+export interface FieldTextareaProps extends ArkFieldTextareaProps {
+    class?: string;
+}
+export interface FieldHelperTextProps extends FieldHelperTextBaseProps {
+    class?: string;
+}
+export interface FieldErrorTextProps extends FieldErrorTextBaseProps {
+    class?: string;
+}

package/dist/components/field/types.js

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

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

@@ -0,0 +1,89 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { FileUpload } from '@ark-ui/svelte/file-upload';
+	import { getAcceptAttribute } from './utils';
+	import type { Props } from './types';
+	import PhUploadSimple from '../../icons/PhUploadSimple.svelte';
+
+	let {
+		fileType,
+		label = 'Drag & drop or click to browse',
+		maxFiles = 1,
+		onFileAccept,
+		...restProps
+	}: Props = $props();
+
+	const accept = $derived(getAcceptAttribute(fileType));
+</script>
+
+<FileUpload.Root {maxFiles} {accept} {onFileAccept} {...restProps}>
+	<FileUpload.Dropzone
+		class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center text-ink-dim transition-colors hover:border-primary/50 data-dragging:border-primary data-dragging:bg-primary/5"
+	>
+		<PhUploadSimple class="size-8 opacity-60" />
+		<span class="text-sm">{label}</span>
+	</FileUpload.Dropzone>
+	<FileUpload.HiddenInput />
+</FileUpload.Root>

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,97 @@
+<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

@@ -0,0 +1,18 @@
+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;

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

@@ -0,0 +1,3 @@
+export declare const getFileIcon: (file: File) => import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;

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

@@ -0,0 +1,39 @@
+import PhFile from '../../icons/PhFile.svelte';
+import PhFileArchive from '../../icons/PhFileArchive.svelte';
+import PhFileText from '../../icons/PhFileText.svelte';
+import PhImage from '../../icons/PhImage.svelte';
+import PhMicrosoftExcelLogo from '../../icons/PhMicrosoftExcelLogo.svelte';
+import PhVideoCamera from '../../icons/PhVideoCamera.svelte';
+import PhHeadphones from '../../icons/PhHeadphones.svelte';
+export const getFileIcon = (file) => {
+    const fileType = file.type;
+    const fileName = file.name;
+    if (fileType.includes('pdf') ||
+        fileName.endsWith('.pdf') ||
+        fileType.includes('word') ||
+        fileName.endsWith('.doc') ||
+        fileName.endsWith('.docx')) {
+        return PhFileText;
+    }
+    else if (fileType.includes('zip') ||
+        fileType.includes('archive') ||
+        fileName.endsWith('.zip') ||
+        fileName.endsWith('.rar')) {
+        return PhFileArchive;
+    }
+    else if (fileType.includes('excel') ||
+        fileName.endsWith('.xls') ||
+        fileName.endsWith('.xlsx')) {
+        return PhMicrosoftExcelLogo;
+    }
+    else if (fileType.includes('video/')) {
+        return PhVideoCamera;
+    }
+    else if (fileType.includes('audio/')) {
+        return PhHeadphones;
+    }
+    else if (fileType.startsWith('image/')) {
+        return PhImage;
+    }
+    return PhFile;
+};

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

@@ -0,0 +1,6 @@
+import type { FileUploadRootProps } from '@ark-ui/svelte/file-upload';
+import type { FileType } from './utils';
+export interface Props extends FileUploadRootProps {
+    fileType: FileType;
+    label: string;
+}

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

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

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

@@ -0,0 +1,13 @@
+declare const fileTypeMap: {
+    excel: string;
+    word: string;
+    image: string;
+    pdf: string;
+    video: string;
+    audio: string;
+    text: string;
+    csv: string;
+};
+export type FileType = keyof typeof fileTypeMap;
+export declare const getAcceptAttribute: (fileType?: FileType) => string | undefined;
+export {};

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

@@ -0,0 +1,18 @@
+const fileTypeMap = {
+    excel: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    word: 'application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    image: 'image/*',
+    pdf: 'application/pdf',
+    video: 'video/*',
+    audio: 'audio/*',
+    text: 'text/plain',
+    csv: 'text/csv'
+};
+export const getAcceptAttribute = (fileType) => {
+    if (!fileType)
+        return undefined;
+    const accept = fileTypeMap[fileType];
+    if (!accept)
+        return undefined;
+    return accept;
+};

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { ImageCropper, useImageCropper } from '@ark-ui/svelte/image-cropper';
+	import type { ImageCropperProps } from './types';
+	import { Button } from '../..';
+
+	let {
+		src,
+		alt = 'Image',
+		aspectRatio = $bindable(),
+		// eslint-disable-next-line no-useless-assignment
+		getCroppedImage = $bindable(),
+		// eslint-disable-next-line no-useless-assignment
+		getCropData = $bindable(),
+		...cropperProps
+	}: ImageCropperProps = $props();
+
+	const ASPECT_RATIO_OPTIONS = [
+		{ label: 'Free', value: undefined as number | undefined },
+		{ label: '1:1', value: 1 },
+		{ label: '4:3', value: 4 / 3 },
+		{ label: '16:9', value: 16 / 9 },
+		{ label: '9:16', value: 9 / 16 }
+	];
+
+	let imageAspectRatio = $state<number | undefined>(undefined);
+
+	$effect(() => {
+		if (!src) return;
+		const img = new Image();
+		let cancelled = false;
+		img.onload = () => {
+			if (!cancelled) imageAspectRatio = img.naturalWidth / img.naturalHeight;
+		};
+		img.src = src;
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	const imageCropper = useImageCropper(() => ({ ...cropperProps, aspectRatio }));
+
+	// eslint-disable-next-line no-useless-assignment
+	getCroppedImage = (options) => imageCropper().getCroppedImage(options);
+	// eslint-disable-next-line no-useless-assignment
+	getCropData = () => imageCropper().getCropData();
+
+	let cropData = $derived(imageCropper().getCropData());
+</script>
+
+<div>
+	<div class="mb-2 flex flex-wrap items-center justify-between gap-1.5">
+		<div>
+			{#each ASPECT_RATIO_OPTIONS as option (option.label)}
+				<Button
+					variant={aspectRatio === option.value ? 'default' : 'outline'}
+					size="sm"
+					onclick={() => {
+						aspectRatio = option.value;
+					}}
+				>
+					{option.label}
+				</Button>
+			{/each}
+		</div>
+		<p>Width: {cropData.width}px / Height: {cropData.height}px</p>
+	</div>
+
+	<ImageCropper.RootProvider value={imageCropper}>
+		<ImageCropper.Viewport
+			class="relative overflow-hidden rounded-lg bg-surface-2"
+			style={imageAspectRatio ? `aspect-ratio: ${imageAspectRatio}` : 'aspect-ratio: 1'}
+		>
+			<ImageCropper.Image
+				{src}
+				{alt}
+				crossorigin="anonymous"
+				class="pointer-events-none absolute inset-0 h-full w-full object-fill select-none"
+			/>
+			<ImageCropper.Selection
+				class="cursor-move border-2 border-white/50 [box-shadow:0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:border-primary data-dragging:cursor-grabbing data-dragging:border-white/80"
+			>
+				{#each ImageCropper.handles as position (position)}
+					<ImageCropper.Handle
+						{position}
+						class="absolute flex touch-none items-center justify-center
+              data-[position=bottom]:cursor-ns-resize
+              data-[position=bottom-left]:cursor-nesw-resize
+              data-[position=bottom-right]:cursor-nwse-resize
+              data-[position=left]:cursor-ew-resize
+              data-[position=right]:cursor-ew-resize
+              data-[position=top]:cursor-ns-resize
+              data-[position=top-left]:cursor-nwse-resize
+              data-[position=top-right]:cursor-nesw-resize"
+					>
+						<div class="size-2 rounded-full bg-white shadow-md"></div>
+					</ImageCropper.Handle>
+				{/each}
+				<ImageCropper.Grid
+					axis="horizontal"
+					class="pointer-events-none absolute inset-[33.33%_0] border-y border-white/40 opacity-0 transition-opacity data-dragging:opacity-100 data-panning:opacity-100"
+				/>
+				<ImageCropper.Grid
+					axis="vertical"
+					class="pointer-events-none absolute inset-[0_33.33%] border-x border-white/40 opacity-0 transition-opacity data-dragging:opacity-100 data-panning:opacity-100"
+				/>
+			</ImageCropper.Selection>
+		</ImageCropper.Viewport>
+	</ImageCropper.RootProvider>
+</div>

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

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

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

@@ -0,0 +1,16 @@
+import type { UseImageCropperProps, ImageCropperGetCroppedImageOptions } from '@ark-ui/svelte/image-cropper';
+export interface CropData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+    flipX: boolean;
+    flipY: boolean;
+}
+export interface ImageCropperProps extends UseImageCropperProps {
+    src: string;
+    alt?: string;
+    getCroppedImage?: (options?: ImageCropperGetCroppedImageOptions) => Promise<string | Blob | null>;
+    getCropData?: () => CropData;
+}

package/dist/components/image-cropper/types.js

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