fluid-ui-svelte 0.2.4 → 0.3.0

package/dist/utilities/imageCrop.js

@@ -0,0 +1,217 @@
+export function generateCropAreaState(shape = 'rectangle', aspectRatio = { w: 1, h: 1 }) {
+    return {
+        cropArea: { x: 0, y: 0, width: 0, height: 0 },
+        shape,
+        aspectRatio,
+        activeAction: 'idle',
+        lastMousePosition: { x: 0, y: 0 }
+    };
+}
+export function draw(canvasElement, image, cropAreaState) {
+    if (!image || !canvasElement)
+        return;
+    const context = canvasElement.getContext('2d');
+    // 1. Draw the base image
+    context.drawImage(image, 0, 0);
+    // 2. Draw the semi-transparent mask
+    context.fillStyle = 'rgba(0, 0, 0, 0.2)';
+    context.fillRect(0, 0, canvasElement.width, canvasElement.height);
+    // 3. Cut a "hole" for the crop area
+    drawCropArea(context, cropAreaState);
+    // 4. Draw the resize handles
+    drawHandles(context, cropAreaState);
+}
+function drawCropArea(context, cropAreaState) {
+    context.save(); // Save the current state
+    context.globalCompositeOperation = 'destination-out';
+    if (cropAreaState.shape === 'circle') {
+        const { x, y, width, height } = cropAreaState.cropArea;
+        // Use the smaller dimension so the circle always fits inside the bounding box
+        const radius = Math.min(width, height) / 2;
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        context.beginPath();
+        context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        context.fill();
+    }
+    else {
+        // Default to square/rectangle
+        context.fillRect(cropAreaState.cropArea.x, cropAreaState.cropArea.y, cropAreaState.cropArea.width, cropAreaState.cropArea.height);
+    }
+    context.restore(); // Restore to the previous state (resets globalCompositeOperation)
+}
+const HANDLE_SIZE = 24;
+function getHandles(cropAreaState) {
+    const { x, y, width, height } = cropAreaState.cropArea;
+    // If the crop shape is a circle, place handles around the actual circle (inscribed),
+    // with a small padding so they sit slightly outside the circle's edge.
+    if (cropAreaState.shape === 'circle') {
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        const radius = Math.min(width, height) / 2;
+        const padding = radius * 0.05; // 5% padding
+        const r = radius + padding;
+        const diagOffset = r / Math.sqrt(2); // 45° corner offset
+        return [
+            // corners (45° around circle)
+            { x: centerX - diagOffset, y: centerY - diagOffset, name: 'tl' },
+            { x: centerX + diagOffset, y: centerY - diagOffset, name: 'tr' },
+            { x: centerX + diagOffset, y: centerY + diagOffset, name: 'br' },
+            { x: centerX - diagOffset, y: centerY + diagOffset, name: 'bl' },
+            // sides (cardinal points on circle)
+            { x: centerX, y: centerY - r, name: 't' },
+            { x: centerX + r, y: centerY, name: 'r' },
+            { x: centerX, y: centerY + r, name: 'b' },
+            { x: centerX - r, y: centerY, name: 'l' }
+        ];
+    }
+    // Default rectangle handles (unchanged)
+    return [
+        // corners
+        { x: x, y: y, name: 'tl' }, // top-left
+        { x: x + width, y: y, name: 'tr' }, // top-right
+        { x: x + width, y: y + height, name: 'br' }, // bottom-right
+        { x: x, y: y + height, name: 'bl' }, // bottom-left
+        // sides
+        { x: x + width / 2, y: y, name: 't' }, // top
+        { x: x + width, y: y + height / 2, name: 'r' }, // right
+        { x: x + width / 2, y: y + height, name: 'b' }, // bottom
+        { x: x, y: y + height / 2, name: 'l' } // left
+    ];
+}
+function drawHandles(context, cropAreaState) {
+    context.fillStyle = 'white';
+    const handles = getHandles(cropAreaState);
+    for (const handle of handles) {
+        context.fillRect(handle.x - HANDLE_SIZE / 2, handle.y - HANDLE_SIZE / 2, HANDLE_SIZE, HANDLE_SIZE);
+    }
+}
+/**
+ * Map a PointerEvent/MouseEvent to canvas coordinate space (accounts for CSS scaling).
+ */
+function getCanvasCoords(event, canvas) {
+    // Use client coordinates and canvas bounding box to map to drawing buffer pixels
+    const rect = canvas.getBoundingClientRect();
+    const clientX = event.clientX ?? event.clientX;
+    const clientY = event.clientY ?? event.clientY;
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+        x: (clientX - rect.left) * scaleX,
+        y: (clientY - rect.top) * scaleY
+    };
+}
+function clampCropToCanvas(cropArea, canvas, shape = 'rectangle', minSize = 20) {
+    // Ensure positive sizes
+    cropArea.width = Math.max(minSize, cropArea.width);
+    cropArea.height = Math.max(minSize, cropArea.height);
+    if (shape === 'circle') {
+        // Force a square bounding box that stays centered on the current center.
+        const centerX = cropArea.x + cropArea.width / 2;
+        const centerY = cropArea.y + cropArea.height / 2;
+        const size = Math.max(minSize, Math.min(cropArea.width, cropArea.height));
+        cropArea.width = size;
+        cropArea.height = size;
+        cropArea.x = centerX - size / 2;
+        cropArea.y = centerY - size / 2;
+    }
+    // Keep position inside canvas
+    cropArea.x = Math.max(0, Math.min(cropArea.x, canvas.width - cropArea.width));
+    cropArea.y = Math.max(0, Math.min(cropArea.y, canvas.height - cropArea.height));
+}
+export function handleMouseDown(event, cropAreaState, canvasElement) {
+    if (!canvasElement)
+        return;
+    const { x: offsetX, y: offsetY } = getCanvasCoords(event, canvasElement);
+    const handles = getHandles(cropAreaState);
+    // Check if a handle was clicked (handles are in canvas coordinates)
+    for (const handle of handles) {
+        const handleX = handle.x - HANDLE_SIZE / 2;
+        const handleY = handle.y - HANDLE_SIZE / 2;
+        if (offsetX >= handleX &&
+            offsetX <= handleX + HANDLE_SIZE &&
+            offsetY >= handleY &&
+            offsetY <= handleY + HANDLE_SIZE) {
+            cropAreaState.activeAction = `resizing-${handle.name}`;
+            cropAreaState.lastMousePosition = { x: offsetX, y: offsetY };
+            return;
+        }
+    }
+    // If no handle was clicked, check if the main rectangle was clicked
+    const { x, y, width, height } = cropAreaState.cropArea;
+    if (offsetX >= x && offsetX <= x + width && offsetY >= y && offsetY <= y + height) {
+        cropAreaState.activeAction = 'moving';
+        cropAreaState.lastMousePosition = { x: offsetX, y: offsetY };
+        return;
+    }
+}
+export function handleMouseMove(event, cropAreaState, canvasElement) {
+    if (cropAreaState.activeAction === 'idle')
+        return;
+    if (!canvasElement)
+        return;
+    const { x: offsetX, y: offsetY } = getCanvasCoords(event, canvasElement);
+    const deltaX = offsetX - cropAreaState.lastMousePosition.x;
+    const deltaY = offsetY - cropAreaState.lastMousePosition.y;
+    const { cropArea } = cropAreaState;
+    if (cropAreaState.activeAction === 'moving') {
+        cropArea.x += deltaX;
+        cropArea.y += deltaY;
+    }
+    else if (cropAreaState.activeAction.startsWith('resizing-')) {
+        const handleName = cropAreaState.activeAction.split('-')[1];
+        if (handleName.includes('r'))
+            cropArea.width += deltaX;
+        if (handleName.includes('l')) {
+            cropArea.x += deltaX;
+            cropArea.width -= deltaX;
+        }
+        if (handleName.includes('b'))
+            cropArea.height += deltaY;
+        if (handleName.includes('t')) {
+            cropArea.y += deltaY;
+            cropArea.height -= deltaY;
+        }
+    }
+    // Prevent negative/too-small sizes and keep crop within canvas
+    // pass the current shape so a circle forces a square bounding box
+    clampCropToCanvas(cropArea, canvasElement, cropAreaState.shape, 20);
+    cropAreaState.lastMousePosition = { x: offsetX, y: offsetY };
+}
+export function handleMouseUp(cropAreaState) {
+    cropAreaState.activeAction = 'idle';
+}
+/**
+ * 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 async function exportSelectionAsPNG(canvasElement, image, cropAreaState) {
+    if (!canvasElement || !image)
+        return null;
+    const { x, y, width, height } = cropAreaState.cropArea;
+    if (width <= 0 || height <= 0)
+        return null;
+    // Create an offscreen canvas sized to the crop bounding box (square for circle)
+    const outCanvas = document.createElement('canvas');
+    outCanvas.width = Math.round(width);
+    outCanvas.height = Math.round(height);
+    const ctx = outCanvas.getContext('2d');
+    if (!ctx)
+        return null;
+    // Draw the corresponding portion of the source image
+    // coords are in canvas/image pixel space because the component sets canvas size to image.naturalWidth/Height
+    ctx.drawImage(image, x, y, width, height, 0, 0, outCanvas.width, outCanvas.height);
+    if (cropAreaState.shape === 'circle') {
+        // Mask to a circle (destination-in keeps the circular area)
+        ctx.globalCompositeOperation = 'destination-in';
+        ctx.beginPath();
+        const r = Math.min(outCanvas.width, outCanvas.height) / 2;
+        ctx.arc(outCanvas.width / 2, outCanvas.height / 2, r, 0, Math.PI * 2);
+        ctx.fill();
+    }
+    // Return a PNG Blob
+    return await new Promise((resolve) => outCanvas.toBlob((b) => resolve(b), 'image/png'));
+}

package/dist/utilities/mergeClasses.d.ts

@@ -0,0 +1 @@
+export declare function mergeClasses(classA: string, classB: string): string;

package/dist/utilities/mergeClasses.js

@@ -0,0 +1,3 @@
+export function mergeClasses(classA, classB) {
+    return [...new Set([...classA.split(' '), ...classB.split(' ')])].join(' ').trim();
+}

package/package.json

@@ -1,27 +1,27 @@
 {
 	"name": "fluid-ui-svelte",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"author": {
 		"name": "Emre Ayaz",
-		"email": "emreayaz@frostium.io",
-		"url": "https://emreayaz.com"
+		"email": "ayazthemre@gmail.com"
 	},
+	"license": "MIT",
+	"homepage": "https://github.com/ayazemre/fluid-ui-svelte",
 	"repository": {
-		"url": "https://github.com/ayazemre/fluid-ui"
+		"url": "git+https://github.com/ayazemre/fluid-ui-svelte.git"
 	},
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run package",
+		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright test"
+		"test": "npm run test:unit -- --run"
 	},
 	"files": [
 		"dist",
@@ -38,34 +38,51 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./base": {
+			"types": "./dist/base/index.d.ts",
+			"svelte": "./dist/base/index.js"
+		},
+		"./components": {
+			"types": "./dist/components/index.d.ts",
+			"svelte": "./dist/components/index.js"
 		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.45.3",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"@types/eslint": "^9.6.0",
-		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.6",
-		"publint": "^0.2.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.0.0",
-		"vite": "^5.0.11",
-		"vitest": "^2.0.4"
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.38.0",
+		"@iconify/svelte": "^5.1.0",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-node": "^5.4.0",
+		"@sveltejs/kit": "^2.47.1",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.14",
+		"@types/node": "^22",
+		"@vitest/browser": "^3.2.4",
+		"@vitest/ui": "^3.2.4",
+		"eslint": "^9.38.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
+		"playwright": "^1.56.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.7.1",
+		"publint": "^0.3.14",
+		"svelte": "^5.41.0",
+		"svelte-check": "^4.3.3",
+		"tailwindcss": "^4.1.14",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.1",
+		"vite": "^7.1.10",
+		"vitest": "^3.2.4",
+		"vitest-browser-svelte": "^1.1.0"
 	},
-	"dependencies": {
-		"@tailwindcss/vite": "^4.0.0-alpha.31",
-		"tailwindcss": "^4.0.0-alpha.31"
-	}
-}
+	"keywords": [
+		"svelte"
+	]
+}

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

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

package/dist/community/components/index.js

@@ -1 +0,0 @@
-"use strict";

package/dist/community/prebuilt/index.d.ts

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

package/dist/community/prebuilt/index.js

@@ -1 +0,0 @@
-"use strict";

package/dist/components/Breadcrumb.svelte

@@ -1 +0,0 @@
-<!-- TODO -->

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

@@ -1,26 +0,0 @@
-export default Breadcrumb;
-type Breadcrumb = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Breadcrumb: $$__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;
-}

package/dist/components/Drawer.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import Container from "../primitives/Container.svelte";
-	import Button from "../primitives/Button.svelte";
-	let {
-		class: className,
-		contentClass,
-		isOpen = $bindable(false),
-		children,
-		overrideDefaultStyling = false,
-	}: {
-		class?: string;
-		contentClass?: string;
-		isOpen?: boolean;
-		overrideDefaultStyling?: boolean;
-		children: Snippet;
-	} = $props();
-</script>
-
-<Container overrideDefaultStyling={true} class={overrideDefaultStyling ? "" + (className ? className : "") : "fluid-drawer" + (className ? ` ${className}` : "")}>
-	<Container class={overrideDefaultStyling ? "" + (contentClass ? `${contentClass}` : "") : "fluid-drawer-body" + (contentClass ? ` ${contentClass}` : "")}>
-		{@render children()}
-	</Container>
-	<Button
-		overrideDefaultStyling
-		class="fluid-drawer-backdrop"
-		onclick={(e: Event) => {
-			isOpen = false;
-		}}
-	>
-		<Container></Container>
-	</Button>
-</Container>

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

@@ -1,9 +0,0 @@
-import type { Snippet } from "svelte";
-declare const Drawer: import("svelte").Component<{
-    class?: string;
-    contentClass?: string;
-    isOpen?: boolean;
-    overrideDefaultStyling?: boolean;
-    children: Snippet;
-}, {}, "isOpen">;
-export default Drawer;

package/dist/components/Dropdown.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	import Container from "../primitives/Container.svelte";
-	import Button from "../primitives/Button.svelte";
-	import { onMount, type Snippet } from "svelte";
-	import type { DropdownOptions } from "../types.js";
-	let {
-		class: className,
-		triggerClass,
-		contentClass,
-		overrideDefaultStyling = false,
-		isOpen = $bindable(false),
-		shouldCloseOnClickOutside = true,
-		dropdownTrigger,
-		dropdownContent,
-		triggerRawElement,
-		contentRawElement,
-	}: {
-		class?: string;
-		triggerClass?: string;
-		contentClass?: string;
-		overrideDefaultStyling?: boolean;
-		isOpen?: boolean;
-		shouldCloseOnClickOutside?: boolean;
-		dropdownTrigger: Snippet<[options: { isOpen: boolean; toggleDropdown: Function }]>;
-		dropdownContent: Snippet<[options: { isOpen: boolean; toggleDropdown: Function }]>;
-		triggerRawElement?: HTMLElement;
-		contentRawElement?: HTMLElement;
-	} = $props();
-
-	const componentOptions: DropdownOptions = {
-		isOpen,
-		toggleDropdown: () => {
-			isOpen = !isOpen;
-		},
-	};
-
-	onMount(() => {
-		if (shouldCloseOnClickOutside) {
-			document.addEventListener("click", (e) => {
-				if (isOpen && contentRawElement && triggerRawElement) {
-					if (!triggerRawElement!.contains(e.target as HTMLElement) && !contentRawElement!.contains(e.target as HTMLElement)) {
-						isOpen = false;
-					}
-				}
-			});
-		}
-	});
-</script>
-
-<Container bind:rawElement={triggerRawElement} class={(overrideDefaultStyling ? "" : "fluid-dropdown") + (className ? ` ${className}` : "")} overrideDefaultStyling={true}>
-	<Container class={(overrideDefaultStyling ? "" : "fluid-dropdown-trigger") + (triggerClass ? ` ${triggerClass}` : "")} overrideDefaultStyling>
-		{@render dropdownTrigger(componentOptions)}
-	</Container>
-	<Container bind:rawElement={contentRawElement} overrideDefaultStyling class={(overrideDefaultStyling ? "" : "fluid-dropdown-content") + (contentClass ? ` ${contentClass}` : "")}>
-		{#if isOpen}
-			{@render dropdownContent(componentOptions)}
-		{/if}
-	</Container>
-</Container>

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

@@ -1,20 +0,0 @@
-import { type Snippet } from "svelte";
-declare const Dropdown: import("svelte").Component<{
-    class?: string;
-    triggerClass?: string;
-    contentClass?: string;
-    overrideDefaultStyling?: boolean;
-    isOpen?: boolean;
-    shouldCloseOnClickOutside?: boolean;
-    dropdownTrigger: Snippet<[options: {
-        isOpen: boolean;
-        toggleDropdown: Function;
-    }]>;
-    dropdownContent: Snippet<[options: {
-        isOpen: boolean;
-        toggleDropdown: Function;
-    }]>;
-    triggerRawElement?: HTMLElement;
-    contentRawElement?: HTMLElement;
-}, {}, "isOpen">;
-export default Dropdown;

package/dist/components/Dropzone.svelte

@@ -1 +0,0 @@
-<!-- TODO -->

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

@@ -1,26 +0,0 @@
-export default Dropzone;
-type Dropzone = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Dropzone: $$__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;
-}

package/dist/components/InteractiveScrollArea.svelte

@@ -1 +0,0 @@
-<!-- TODO -->

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

@@ -1,26 +0,0 @@
-export default InteractiveScrollArea;
-type InteractiveScrollArea = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const InteractiveScrollArea: $$__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;
-}

package/dist/components/Pagination.svelte

@@ -1 +0,0 @@
-<!-- TODO -->

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

@@ -1,26 +0,0 @@
-export default Pagination;
-type Pagination = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Pagination: $$__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;
-}

package/dist/components/Progress.svelte

@@ -1 +0,0 @@
-<!-- TODO -->

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

@@ -1,26 +0,0 @@
-export default Progress;
-type Progress = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Progress: $$__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;
-}

package/dist/components/Tabs.svelte

@@ -1 +0,0 @@
-<!-- TODO -->

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

@@ -1,26 +0,0 @@
-export default Tabs;
-type Tabs = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Tabs: $$__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;
-}

package/dist/components/Tooltip.svelte

@@ -1 +0,0 @@
-<!-- TODO -->