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,28 @@
+<script lang="ts">
+  import Button, { type ButtonElementProps } from '../../base/button/button.svelte';
+  import { useImageCropperCancel } from './image-cropper.svelte.js';
+  import Trash2Icon from '@lucide/svelte/icons/trash-2';
+
+  let { ref = $bindable(null), variant = 'outline', size = 'sm', onclick, ...rest }: ButtonElementProps = $props();
+
+  const cancelState = useImageCropperCancel();
+</script>
+
+<Button
+  {...rest}
+  bind:ref
+  {size}
+  {variant}
+  onclick={(
+    e: MouseEvent & {
+      currentTarget: EventTarget & HTMLButtonElement;
+    }
+  ) => {
+    onclick?.(e);
+
+    cancelState.onclick();
+  }}
+>
+  <Trash2Icon />
+  <span>Cancel</span>
+</Button>