fluid-ui-svelte 0.2.4 → 0.3.0

package/dist/components/Calendar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import Container from '../base/Container.svelte';
+	import Button from '../base/Button.svelte';
+	import Text from '../base/Text.svelte';
+	import {
+		applyDate,
+		generateCalendarCellStyles,
+		generateDaysOfTheMonthFromDate
+	} from '../utilities/calendar.js';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+
+	let {
+		variant = '',
+		currentDate = new Date().toISOString(),
+		startDate = $bindable(),
+		endDate = $bindable(),
+		hideRollingDays = false
+	}: {
+		variant?: string;
+		currentDate?: string;
+		startDate?: string;
+		endDate?: string;
+		hideRollingDays?: boolean;
+	} = $props();
+
+	const componentState = $state({
+		weekDays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		calendarDays: generateDaysOfTheMonthFromDate(new Date().toISOString())
+	});
+
+	function dateSelectionHandler(selectedDate: string) {
+		const result = applyDate({ startDate, endDate: endDate }, selectedDate);
+		startDate = result.startDate;
+		endDate = result.endDate;
+	}
+
+	$effect(() => {
+		componentState.calendarDays = generateDaysOfTheMonthFromDate(currentDate);
+	});
+</script>
+
+<Container class={mergeClasses('fluid-calendar-wrapper', variant)}>
+	<Container class={mergeClasses('fluid-calendar-header', variant)}>
+		<Text>{new Date(currentDate).toLocaleString('default', { month: 'long' })}</Text>
+	</Container>
+	<Container class={mergeClasses('fluid-calendar-body', variant)}>
+		{#each componentState.weekDays as day}
+			<Text>{day}</Text>
+		{/each}
+
+		{#each componentState.calendarDays as cellDay}
+			<Button
+				onclick={async () => dateSelectionHandler(cellDay)}
+				class={mergeClasses(
+					variant,
+					generateCalendarCellStyles(currentDate, cellDay, startDate, endDate, hideRollingDays)
+				)}
+			>
+				{new Date(cellDay).getDate()}
+			</Button>
+		{/each}
+	</Container>
+</Container>

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

@@ -1,26 +1,10 @@
-export default Calendar;
-type Calendar = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type $$ComponentProps = {
+    variant?: string;
+    currentDate?: string;
+    startDate?: string;
+    endDate?: string;
+    hideRollingDays?: boolean;
 };
-declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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 Calendar: import("svelte").Component<$$ComponentProps, {}, "startDate" | "endDate">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/{Badge.svelte.d.ts → Carousel.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default Badge;
-type Badge = SvelteComponent<{
+export default Carousel;
+type Carousel = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const Badge: $$__sveltets_2_IsomorphicComponent<{
+declare const Carousel: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/CodeBlock.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Container from '../base/Container.svelte';
+	import Text from '../base/Text.svelte';
+
+	const {
+		variation,
+		code = '',
+		language = ''
+	}: {
+		variation?: string;
+		code?: string;
+		language?: string;
+	} = $props();
+</script>
+
+<Container class="fluid-code-block-container">
+	{#each code.split('\n') as line, index}
+		<Container class="fluid-code-block-row">
+			<Container class="fluid-code-block-index"><Text class="select-none">{index}</Text></Container>
+			<Container class="fluid-code-block-content">
+				<Text type="pre">
+					<Text type="code" class={'language-' + language}>{line}</Text>
+				</Text>
+			</Container>
+		</Container>
+	{/each}
+</Container>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    variation?: string;
+    code?: string;
+    language?: string;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/ImageCrop.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Container from '../base/Container.svelte';
+	import { onMount } from 'svelte';
+	import { Text } from '../base/index.js';
+	import {
+		draw,
+		generateCropAreaState,
+		handleMouseDown,
+		handleMouseMove,
+		handleMouseUp
+	} from '../utilities/imageCrop.js';
+	const {
+		imageFile,
+		cropAreaShape = 'rectangle'
+	}: { imageFile: File; cropAreaShape?: 'rectangle' | 'circle' } = $props();
+
+	let canvasElement: HTMLCanvasElement;
+	let image: HTMLImageElement | undefined = $state();
+
+	const cropAreaState = $state(generateCropAreaState(cropAreaShape));
+
+	onMount(() => {
+		const fileReader = new FileReader();
+		fileReader.readAsDataURL(imageFile);
+		fileReader.onload = () => {
+			const loadedImage = new Image();
+			loadedImage.src = fileReader.result as string;
+			loadedImage.onload = () => {
+				// Set the reactive image state once it's fully loaded
+				image = loadedImage;
+			};
+		};
+	});
+
+	$effect(() => {
+		// Only run if the canvas and image are ready
+		if (canvasElement && image) {
+			// This block performs the ONE-TIME setup when the image first loads.
+			if (canvasElement.width !== image.naturalWidth) {
+				canvasElement.width = image.naturalWidth;
+				canvasElement.height = image.naturalHeight;
+				cropAreaState.cropArea.width = canvasElement.width / 2;
+				cropAreaState.cropArea.height = canvasElement.height / 2;
+				cropAreaState.cropArea.x = (canvasElement.width - cropAreaState.cropArea.width) / 2;
+				cropAreaState.cropArea.y = (canvasElement.height - cropAreaState.cropArea.height) / 2;
+			}
+
+			// This will now run on the initial setup AND any time cropAreaState changes.
+			draw(canvasElement, image, cropAreaState);
+		}
+	});
+</script>
+
+<Container>
+	<Text>Canvas to Draw On</Text>
+	<canvas
+		class="size-full"
+		bind:this={canvasElement}
+		onpointerdown={(event) => handleMouseDown(event, cropAreaState, canvasElement)}
+		onpointermove={(event) => handleMouseMove(event, cropAreaState, canvasElement)}
+		onpointerup={() => handleMouseUp(cropAreaState)}
+		onpointercancel={() => handleMouseUp(cropAreaState)}
+		onpointerleave={() => handleMouseUp(cropAreaState)}
+	></canvas>
+</Container>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    imageFile: File;
+    cropAreaShape?: 'rectangle' | 'circle';
+};
+declare const ImageCrop: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageCrop = ReturnType<typeof ImageCrop>;
+export default ImageCrop;

package/dist/components/Page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import Container from '../base/Container.svelte';
+
+	const {
+		title = '',
+		description = '',
+		children,
+		...rest
+	}: {
+		class?: string;
+		title: string;
+		description: string;
+		children?: Snippet;
+	} & HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+</svelte:head>
+
+<Container class="fluid-page" type="section">
+	{@render children?.()}
+</Container>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    class?: string;
+    title: string;
+    description: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const Page: import("svelte").Component<$$ComponentProps, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/components/Switch.svelte

@@ -1,32 +1,34 @@
 <script lang="ts">
-	import Label from "../primitives/Label.svelte";
-	import Input from "../primitives/Input.svelte";
-	import Button from "../primitives/Button.svelte";
-	import Container from "../primitives/Container.svelte";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button } from '../base/index.js';
 
 	let {
-		class: className,
+		onswitch,
 		checked = $bindable(false),
-		overrideDefaultStyling = false,
+		disabled = false,
+		class: className = '',
+		...rest
 	}: {
-		class?: string;
+		onswitch: (event: Event, checked: boolean) => Promise<void>;
 		checked?: boolean;
-		overrideDefaultStyling?: boolean;
-	} = $props();
+		disabled?: boolean;
+		class?: string;
+		id?: string;
+	} & Omit<HTMLAttributes<HTMLButtonElement>, 'onclick'> = $props();
 </script>
 
 <Button
-	onclick={() => {
-		checked = !checked;
+	role="switch"
+	aria-checked={checked}
+	class={'fluid-switch-button' + (checked ? ' checked' : '')}
+	onclick={async (event) => {
+		if (!disabled) {
+			await onswitch(event, checked);
+			checked = !checked;
+		}
 	}}
-	overrideDefaultStyling={true}
-	class="w-full h-full cursor-pointer"
+	{...rest}
+	overrideDefaultStyling
 >
-	<Container
-		overrideDefaultStyling={true}
-		class={(overrideDefaultStyling ? "" : "fluid-switch" + (checked ? " fluid-switch-checked" : "")) + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}
-	>
-		<Input bind:checked type="checkbox" class="sr-only peer"></Input>
-		<div class="fluid-switch-slider"></div>
-	</Container>
+	<span class="fluid-switch-circle"></span>
 </Button>

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

@@ -1,6 +1,11 @@
-declare const Switch: import("svelte").Component<{
-    class?: string;
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    onswitch: (event: Event, checked: boolean) => Promise<void>;
     checked?: boolean;
-    overrideDefaultStyling?: boolean;
-}, {}, "checked">;
+    disabled?: boolean;
+    class?: string;
+    id?: string;
+} & Omit<HTMLAttributes<HTMLButtonElement>, 'onclick'>;
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as ImageCrop } from './ImageCrop.svelte';
+export { default as Page } from './Page.svelte';
+export { default as Switch } from './Switch.svelte';

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as ImageCrop } from './ImageCrop.svelte';
+export { default as Page } from './Page.svelte';
+export { default as Switch } from './Switch.svelte';

package/dist/index.d.ts

@@ -1,33 +1,2 @@
-export type { DropdownOptions as DropdownOptions } from "./types.ts";
-export { default as Link } from "./primitives/Link.svelte";
-export { default as Button } from "./primitives/Button.svelte";
-export { default as Container } from "./primitives/Container.svelte";
-export { default as Dialog } from "./primitives/Dialog.svelte";
-export { default as Form } from "./primitives/Form.svelte";
-export { default as Image } from "./primitives/Image.svelte";
-export { default as Input } from "./primitives/Input.svelte";
-export { default as Label } from "./primitives/Label.svelte";
-export { default as Table } from "./primitives/Table.svelte";
-export { default as TableBody } from "./primitives/TableBody.svelte";
-export { default as TableData } from "./primitives/TableData.svelte";
-export { default as TableFooter } from "./primitives/TableFooter.svelte";
-export { default as TableHead } from "./primitives/TableHead.svelte";
-export { default as TableHeader } from "./primitives/TableHeader.svelte";
-export { default as TableRow } from "./primitives/TableRow.svelte";
-export { default as Text } from "./primitives/Text.svelte";
-export { default as TextArea } from "./primitives/TextArea.svelte";
-export { default as Accordion } from "./components/Accordion.svelte";
-export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
-export { default as Drawer } from "./components/Drawer.svelte";
-export { default as Dropdown } from "./components/Dropdown.svelte";
-export { default as NotificationArea } from "./components/notification/NotificationArea.svelte";
-export { default as Pagination } from "./components/Pagination.svelte";
-export { default as Progress } from "./components/Progress.svelte";
-export { default as Switch } from "./components/Switch.svelte";
-export { default as Tabs } from "./components/Tabs.svelte";
-export { default as Dropzone } from "./components/Dropzone.svelte";
-export { default as FormBuilder } from "./prebuilt/FormBuilder.svelte";
-export { default as InteractiveScrollArea } from "./components/InteractiveScrollArea.svelte";
-export { default as Document } from "./prebuilt/document/Document.svelte";
-export { default as DocumentBlock } from "./prebuilt/document/DocumentBlock.svelte";
-export { default as DocumentPage } from "./prebuilt/document/DocumentPage.svelte";
+export * from './base/index.js';
+export * from './components/index.js';

package/dist/index.js

@@ -1,36 +1,2 @@
-//Types
-// Primitives 
-export { default as Link } from "./primitives/Link.svelte";
-export { default as Button } from "./primitives/Button.svelte";
-export { default as Container } from "./primitives/Container.svelte";
-export { default as Dialog } from "./primitives/Dialog.svelte";
-export { default as Form } from "./primitives/Form.svelte";
-export { default as Image } from "./primitives/Image.svelte";
-export { default as Input } from "./primitives/Input.svelte";
-export { default as Label } from "./primitives/Label.svelte";
-export { default as Table } from "./primitives/Table.svelte";
-export { default as TableBody } from "./primitives/TableBody.svelte";
-export { default as TableData } from "./primitives/TableData.svelte";
-export { default as TableFooter } from "./primitives/TableFooter.svelte";
-export { default as TableHead } from "./primitives/TableHead.svelte";
-export { default as TableHeader } from "./primitives/TableHeader.svelte";
-export { default as TableRow } from "./primitives/TableRow.svelte";
-export { default as Text } from "./primitives/Text.svelte";
-export { default as TextArea } from "./primitives/TextArea.svelte";
-// Components
-export { default as Accordion } from "./components/Accordion.svelte";
-export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
-export { default as Drawer } from "./components/Drawer.svelte";
-export { default as Dropdown } from "./components/Dropdown.svelte";
-export { default as NotificationArea } from "./components/notification/NotificationArea.svelte";
-export { default as Pagination } from "./components/Pagination.svelte";
-export { default as Progress } from "./components/Progress.svelte";
-export { default as Switch } from "./components/Switch.svelte";
-export { default as Tabs } from "./components/Tabs.svelte";
-export { default as Dropzone } from "./components/Dropzone.svelte";
-// Prebuilt
-export { default as FormBuilder } from "./prebuilt/FormBuilder.svelte";
-export { default as InteractiveScrollArea } from "./components/InteractiveScrollArea.svelte";
-export { default as Document } from "./prebuilt/document/Document.svelte";
-export { default as DocumentBlock } from "./prebuilt/document/DocumentBlock.svelte";
-export { default as DocumentPage } from "./prebuilt/document/DocumentPage.svelte";
+export * from './base/index.js';
+export * from './components/index.js';

package/dist/utilities/applyCharacterFilter.d.ts

@@ -0,0 +1 @@
+export declare function applyCharacterFilter(keys: Array<string>, value: string): string;

package/dist/utilities/applyCharacterFilter.js

@@ -0,0 +1,6 @@
+export function applyCharacterFilter(keys, value) {
+    return value
+        .split('')
+        .filter((char) => keys.includes(char))
+        .join('');
+}

package/dist/utilities/calendar.d.ts

@@ -0,0 +1,10 @@
+export declare function applyDate(currentDates: {
+    startDate?: string;
+    endDate?: string;
+}, selectedDate: string): {
+    startDate?: string;
+    endDate?: string;
+};
+export declare function generateDaysOfTheMonthFromDate(date: string): string[];
+export declare function isBetweenDateRange(selectedDate: string, startDate?: string, endDate?: string): boolean;
+export declare function generateCalendarCellStyles(currentDate: string, cellDate: string, startDate?: string, endDate?: string, hideRollingDays?: boolean): string;

package/dist/utilities/calendar.js

@@ -0,0 +1,112 @@
+export function applyDate(currentDates, selectedDate) {
+    // If selected already, second click action is to remove selection.
+    if (currentDates.endDate && currentDates.endDate === selectedDate) {
+        currentDates.endDate = undefined;
+        return currentDates;
+    }
+    // If selected already, second click action is to remove selection.
+    if (currentDates.startDate && currentDates.startDate === selectedDate) {
+        currentDates.startDate = undefined;
+        return currentDates;
+    }
+    // Nothing is selected, set start date.
+    if (!currentDates.startDate) {
+        currentDates.startDate = selectedDate;
+    }
+    // If start date is already there, apply range by setting end date.
+    else if (!currentDates.endDate) {
+        // If newly selected date earlier swap with start date..
+        if (selectedDate < currentDates.startDate) {
+            currentDates.endDate = currentDates.startDate;
+            currentDates.startDate = selectedDate;
+        }
+        else {
+            currentDates.endDate = selectedDate;
+        }
+    }
+    // If both exists, rearrange the range based on the selected date.
+    else {
+        // If newly selected date is smaller than start date, reset start date to selected date.
+        if (selectedDate < currentDates.startDate) {
+            currentDates.startDate = selectedDate;
+        }
+        // If newly selected date is bigger than start date, extend the range.
+        else {
+            currentDates.endDate = selectedDate;
+        }
+    }
+    return currentDates;
+}
+export function generateDaysOfTheMonthFromDate(date) {
+    const dateInstance = new Date(date);
+    // Get year and month for active date.
+    const year = dateInstance.getFullYear();
+    const month = dateInstance.getMonth();
+    // Get first day, last day and total number of days of active month.
+    const firstDayOfMonth = new Date(year, month, 1);
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    // Get day of the week for first day of the month and remove 1 for 0 indexed array.
+    let startDayOfWeek = firstDayOfMonth.getDay() - 1;
+    // If day of the week is Sunday index will be -1 because Sunday's index is 0.
+    // Our array has 6 as Sunday so we "roll over".
+    if (startDayOfWeek === -1) {
+        startDayOfWeek = 6; // Sunday
+    }
+    const days = [];
+    // Get last day of the previous month.
+    // Date constructors 'date' parameter starts from 1 so if we give 0 we go last day of previous month.
+    const prevMonthLastDay = new Date(year, month, 0).getDate();
+    // Go to previous month's first day.
+    const prevMonth = new Date(year, month - 1, 1);
+    // Add rolling over days of the last month to current array which will be used to render the current month's grid.
+    // This is reversed because it adds rollover days by subtracting it one by one.
+    // If start day of the week is Wednesday then it is equal to 4, basically adding 28th, 29th, 30th and 31st to first row as rolling over days.
+    for (let i = startDayOfWeek; i > 0; i--) {
+        const day = prevMonthLastDay - i + 1;
+        days.push(new Date(prevMonth.getFullYear(), prevMonth.getMonth(), day).toISOString());
+    }
+    // Adding days of the current month on top of rolled over days from last month.
+    for (let i = 1; i <= daysInMonth; i++) {
+        days.push(new Date(year, month, i).toISOString());
+    }
+    // Adding rolling back days of the next month to current grid if month is not ending at Sunday.
+    const remainingDays = (startDayOfWeek + daysInMonth > 35 ? 42 : 35) - days.length; // 42 cells for a 6x7 grid
+    const nextMonth = new Date(year, month + 1, 1);
+    for (let i = 1; i <= remainingDays; i++) {
+        days.push(new Date(nextMonth.getFullYear(), nextMonth.getMonth(), i).toISOString());
+    }
+    return days;
+}
+export function isBetweenDateRange(selectedDate, startDate, endDate) {
+    if (!startDate || !endDate) {
+        return false;
+    }
+    const startDateObj = new Date(startDate);
+    const endDateObj = new Date(endDate);
+    const selectedDateObj = new Date(selectedDate);
+    // Normalize all dates to midnight to compare only the date part.
+    const start = new Date(startDateObj.getFullYear(), startDateObj.getMonth(), startDateObj.getDate());
+    const end = new Date(endDateObj.getFullYear(), endDateObj.getMonth(), endDateObj.getDate());
+    const current = new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), selectedDateObj.getDate());
+    // Determine the actual earlier and later dates to handle incorrect order.
+    const earlierDate = start < end ? start : end;
+    const laterDate = start < end ? end : start;
+    // Perform the check to see if the current date is within the range .
+    return current > earlierDate && current < laterDate;
+}
+export function generateCalendarCellStyles(currentDate, cellDate, startDate, endDate, hideRollingDays = false) {
+    const styles = ['fluid-calendar-cell'];
+    if (new Date(currentDate).getMonth() !== new Date(cellDate).getMonth()) {
+        styles.push('fluid-calendar-cell-rolling-day');
+        if (hideRollingDays) {
+            styles.push('invisible');
+        }
+    }
+    if (startDate === cellDate || endDate === cellDate) {
+        styles.push('fluid-calendar-cell-selected');
+    }
+    if (isBetweenDateRange(cellDate, startDate, endDate)) {
+        styles.push('fluid-calendar-cell-in-range');
+    }
+    return styles.join(' ');
+}

package/dist/utilities/imageCrop.d.ts

@@ -0,0 +1,33 @@
+export declare function generateCropAreaState(shape?: 'circle' | 'rectangle', aspectRatio?: {
+    w: number;
+    h: number;
+}): {
+    cropArea: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    shape: "circle" | "rectangle";
+    aspectRatio: {
+        w: number;
+        h: number;
+    };
+    activeAction: string;
+    lastMousePosition: {
+        x: number;
+        y: number;
+    };
+};
+export declare function draw(canvasElement: HTMLCanvasElement, image: HTMLImageElement, cropAreaState: ReturnType<typeof generateCropAreaState>): void;
+export declare function handleMouseDown(event: PointerEvent | MouseEvent, cropAreaState: ReturnType<typeof generateCropAreaState>, canvasElement?: HTMLCanvasElement): void;
+export declare function handleMouseMove(event: PointerEvent | MouseEvent, cropAreaState: ReturnType<typeof generateCropAreaState>, canvasElement?: HTMLCanvasElement): void;
+export declare function handleMouseUp(cropAreaState: ReturnType<typeof generateCropAreaState>): void;
+/**
+ * Export the currently selected crop as a PNG Blob.
+ * - If shape === 'rectangle' exports the rectangular region.
+ * - If shape === 'circle' exports a square canvas with a circular alpha mask (transparent outside circle).
+ *
+ * Returns Promise<Blob | null>.
+ */
+export declare function exportSelectionAsPNG(canvasElement: HTMLCanvasElement, image: HTMLImageElement, cropAreaState: ReturnType<typeof generateCropAreaState>): Promise<Blob | null>;