feat: Add Image Cropper to ui & storybook (#607)

* feat: add image cropper * installation * chore: add max width for dialogue container --------- Co-authored-by: Rotimi Best <[email protected]>
2025-12-04 01:51:58 +01:00
parent 9a5aee1ee0
commit ce216b1ade
19 changed files with 681 additions and 1 deletions
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { box } from 'svelte-toolbelt';
+	import { useImageCropperRoot } from './image-cropper.svelte.js';
+	import type { ImageCropperRootProps } from './types';
+	import { onDestroy } from 'svelte';
+	import { useId } from 'bits-ui';
+
+	let {
+		id = useId(),
+		src = $bindable(''),
+		onCropped = () => {},
+		onUnsupportedFile = () => {},
+		children,
+		...rest
+	}: ImageCropperRootProps = $props();
+
+	const rootState = useImageCropperRoot({
+		id: box.with(() => id),
+		src: box.with(
+			() => src,
+			(v) => (src = v)
+		),
+		onCropped: box.with(() => onCropped),
+		onUnsupportedFile: box.with(() => onUnsupportedFile)
+	});
+
+	onDestroy(() => rootState.dispose());
+</script>
+
+{@render children?.()}
+<input
+	{...rest}
+	onchange={(e) => {
+		const file = e.currentTarget.files?.[0];
+		if (!file) return;
+		rootState.onUpload(file);
+		// reset so that we can reupload the same file
+		(e.target! as HTMLInputElement).value = '';
+	}}
+	type="file"
+	{id}
+	style="display: none;"
+/>