svelora 3.0.0 → 3.0.2

package/dist/FileUpload/FileUpload.svelte

@@ -1,325 +1,247 @@
-<script lang="ts" module>
-    import type { FileUploadProps, FileUploadRejection } from './file-upload.types.js'
-
-    export type Props = FileUploadProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { useId } from 'bits-ui'
-    import { untrack } from 'svelte'
-    import Button from '../Button/Button.svelte'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Modal from '../Modal/Modal.svelte'
-    import { fileUploadDefaults, fileUploadVariants } from './file-upload.variants.js'
-
-    const config = getComponentConfig('fileUpload', fileUploadDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable([]),
-        onValueChange,
-        multiple = false,
-        accept,
-        maxSize,
-        maxFiles,
-        onReject,
-        dropzone = true,
-        interactive = true,
-        label = 'Drop files here or click to upload',
-        description,
-        icon = icons.upload,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        variant = config.defaultVariants.variant,
-        layout = config.defaultVariants.layout,
-        disabled = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        preview = true,
-        highlight = false,
-        required = false,
-        fileIcon = icons.file,
-        imagePreview = true,
-        id,
-        name,
-        leadingSlot,
-        labelSlot,
-        descriptionSlot,
-        actionsSlot,
-        filesSlot,
-        fileSlot,
-        children,
-        class: className,
-        ui,
-        ...restProps
-    }: Props = $props()
-
-    const autoId = useId()
-
-    let inputRef = $state<HTMLInputElement | null>(null)
-    let dragCounter = $state(0)
-    let previewOpen = $state(false)
-    let previewFile = $state<File | null>(null)
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    // Stable file identity key with separator to avoid collisions
-    const fileKey = (f: File) => `${f.name}:${f.size}:${f.lastModified}`
-
-    // Plain Map intentionally — urlCache is an internal optimization cache, not reactive UI
-    // state. SvelteMap mutations would cascade re-renders every time a URL is cached/evicted.
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const urlCache = new Map<string, string>()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedHighlight = $derived(highlight || hasError)
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const isDisabled = $derived(disabled || loading)
-    const isDragging = $derived(dragCounter > 0)
-    const isFull = $derived(maxFiles !== undefined && value.length >= maxFiles)
-    const showFilesInside = $derived(
-        layout === 'grid' && !multiple && value.length > 0 && preview && variant === 'area'
-    )
-
-    // Pass booleans directly so compound variants with `false` values match correctly
-    const slots = $derived(
-        fileUploadVariants({
-            color: hasError ? 'error' : color,
-            size,
-            variant,
-            layout,
-            dropzone,
-            interactive: interactive && !isDisabled,
-            highlight: resolvedHighlight,
-            multiple,
-            disabled: isDisabled
-        })
-    )
-
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            base: slots.base({ class: [config.slots.base, u.base] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, u.wrapper] }),
-            icon: slots.icon({ class: [config.slots.icon, u.icon] }),
-            label: slots.label({ class: [config.slots.label, u.label] }),
-            description: slots.description({ class: [config.slots.description, u.description] }),
-            actions: slots.actions({ class: [config.slots.actions, u.actions] }),
-            files: slots.files({ class: [config.slots.files, u.files] }),
-            file: slots.file({ class: [config.slots.file, u.file] }),
-            fileLeading: slots.fileLeading({ class: [config.slots.fileLeading, u.fileLeading] }),
-            fileWrapper: slots.fileWrapper({ class: [config.slots.fileWrapper, u.fileWrapper] }),
-            fileName: slots.fileName({ class: [config.slots.fileName, u.fileName] }),
-            fileSize: slots.fileSize({ class: [config.slots.fileSize, u.fileSize] }),
-            fileTrailing: slots.fileTrailing({
-                class: [config.slots.fileTrailing, u.fileTrailing]
-            }),
-            previewContent: slots.previewContent({
-                class: [config.slots.previewContent, u.previewContent]
-            }),
-            previewBody: slots.previewBody({ class: [config.slots.previewBody, u.previewBody] })
-        }
-    })
-
-    // Revoke blob URLs for files no longer in value (handles external bind:value resets)
-    $effect(() => {
-        const current = new Set(value.map(fileKey))
-        // Close preview if its file was removed externally — untrack to avoid subscribing to previewFile
-        const pf = untrack(() => previewFile)
-        if (pf && !current.has(fileKey(pf))) {
-            previewOpen = false
-            previewFile = null
-        }
-        for (const [key, url] of urlCache) {
-            if (!current.has(key)) {
-                URL.revokeObjectURL(url)
-                urlCache.delete(key)
-            }
-        }
-    })
-
-    $effect(() => {
-        return () => {
-            for (const [, url] of urlCache) URL.revokeObjectURL(url)
-            urlCache.clear()
-        }
-    })
-
-    export function open() {
-        if (isDisabled) return
-        inputRef?.click()
-    }
-
-    function isFileAccepted(file: File): boolean {
-        if (!accept) return true
-        return accept
-            .split(',')
-            .map((s) => s.trim())
-            .some((token) => {
-                if (!token || token === '*') return true
-                if (token.startsWith('.'))
-                    return file.name.toLowerCase().endsWith(token.toLowerCase())
-                if (token.endsWith('/*')) return file.type.startsWith(token.slice(0, -1))
-                return file.type === token
-            })
-    }
-
-    function validateIngress(file: File): FileUploadRejection['reason'] | null {
-        if (accept && !isFileAccepted(file)) return 'accept'
-        if (maxSize !== undefined && file.size > maxSize) return 'maxSize'
-        return null
-    }
-
-    function applyMaxFiles(candidates: File[]): {
-        accepted: File[]
-        rejected: FileUploadRejection[]
-    } {
-        if (maxFiles === undefined) return { accepted: candidates, rejected: [] }
-        const remaining = Math.max(0, maxFiles - value.length)
-        if (candidates.length <= remaining) return { accepted: candidates, rejected: [] }
-        return {
-            accepted: candidates.slice(0, remaining),
-            rejected: candidates.slice(remaining).map((file) => ({ file, reason: 'maxFiles' }))
-        }
-    }
-
-    function addFiles(newFiles: File[]) {
-        if (isDisabled) return
-
-        const rejected: FileUploadRejection[] = []
-        const passed: File[] = []
-        for (const file of newFiles) {
-            const reason = validateIngress(file)
-            if (reason) rejected.push({ file, reason })
-            else passed.push(file)
-        }
-
-        let accepted: File[]
-        if (!multiple) {
-            accepted = passed.slice(0, 1)
-        } else {
-            const existing = new Set(value.map(fileKey))
-            const deduped = passed.filter((f) => !existing.has(fileKey(f)))
-            const result = applyMaxFiles(deduped)
-            accepted = result.accepted
-            rejected.push(...result.rejected)
-        }
-
-        if (accepted.length) {
-            value = multiple ? [...value, ...accepted] : accepted
-            onValueChange?.(value)
-            emit.onChange()
-        }
-        if (rejected.length) onReject?.(rejected)
-    }
-
-    function removeFile(index: number) {
-        const removed = value[index]
-        const key = fileKey(removed)
-        if (previewFile && fileKey(previewFile) === key) {
-            previewOpen = false
-            previewFile = null
-        }
-        if (urlCache.has(key)) {
-            URL.revokeObjectURL(urlCache.get(key)!)
-            urlCache.delete(key)
-        }
-        value = value.filter((_, i) => i !== index)
-        onValueChange?.(value)
-        emit.onChange()
-    }
-
-    export function clearAll() {
-        previewOpen = false
-        previewFile = null
-        for (const [, url] of urlCache) URL.revokeObjectURL(url)
-        urlCache.clear()
-        value = []
-        onValueChange?.(value)
-        emit.onChange()
-    }
-
-    function handleInputChange(e: Event) {
-        const input = e.target as HTMLInputElement
-        if (input.files?.length) {
-            addFiles(Array.from(input.files))
-            input.value = ''
-        }
-    }
-
-    function handleDrop(e: DragEvent) {
-        e.preventDefault()
-        dragCounter = 0
-        if (!dropzone || isDisabled) return
-        const files = e.dataTransfer?.files
-        if (files?.length) addFiles(Array.from(files))
-    }
-
-    function handleDragEnter(e: DragEvent) {
-        e.preventDefault()
-        if (dropzone && !isDisabled) dragCounter++
-    }
-
-    function handleDragOver(e: DragEvent) {
-        e.preventDefault()
-    }
-
-    function handleDragLeave() {
-        dragCounter = Math.max(0, dragCounter - 1)
-    }
-
-    function handleAreaClick() {
-        if (interactive && !isDisabled) open()
-    }
-
-    function handleKeydown(e: KeyboardEvent) {
-        if (!interactive) return
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            open()
-        }
-    }
-
-    function formatFileSize(bytes: number): string {
-        if (bytes === 0) return '0 B'
-        const k = 1024
-        const sizes = ['B', 'KB', 'MB', 'GB']
-        const i = Math.floor(Math.log(bytes) / Math.log(k))
-        return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`
-    }
-
-    function isImageFile(file: File): boolean {
-        return file.type.startsWith('image/')
-    }
-
-    function openPreview(file: File) {
-        previewFile = file
-        previewOpen = true
-    }
-
-    function getObjectUrl(file: File): string {
-        const key = fileKey(file)
-        if (!urlCache.has(key)) {
-            urlCache.set(key, URL.createObjectURL(file))
-        }
-        return urlCache.get(key)!
-    }
+<script lang="ts">import { useId } from "bits-ui";
+import { untrack } from "svelte";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import Modal from "../Modal/Modal.svelte";
+import { fileUploadDefaults, fileUploadVariants } from "./file-upload.variants.js";
+const config = getComponentConfig("fileUpload", fileUploadDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable([]), onValueChange, multiple = false, accept, maxSize, maxFiles, onReject, dropzone = true, interactive = true, label = "Drop files here or click to upload", description, icon = icons.upload, color = config.defaultVariants.color, size = config.defaultVariants.size, variant = config.defaultVariants.variant, layout = config.defaultVariants.layout, disabled = false, loading = false, loadingIcon = icons.loading, preview = true, highlight = false, required = false, fileIcon = icons.file, imagePreview = true, id, name, leadingSlot, labelSlot, descriptionSlot, actionsSlot, filesSlot, fileSlot, children, class: className, ui, ...restProps } = $props();
+const autoId = useId();
+let inputRef = $state(null);
+let dragCounter = $state(0);
+let previewOpen = $state(false);
+let previewFile = $state(null);
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+// Stable file identity key with separator to avoid collisions
+const fileKey = (f) => `${f.name}:${f.size}:${f.lastModified}`;
+// Plain Map intentionally — urlCache is an internal optimization cache, not reactive UI
+// state. SvelteMap mutations would cascade re-renders every time a URL is cached/evicted.
+// eslint-disable-next-line svelte/prefer-svelte-reactivity
+const urlCache = new Map();
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedHighlight = $derived(highlight || hasError);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+const isDisabled = $derived(disabled || loading);
+const isDragging = $derived(dragCounter > 0);
+const isFull = $derived(maxFiles !== undefined && value.length >= maxFiles);
+const showFilesInside = $derived(layout === "grid" && !multiple && value.length > 0 && preview && variant === "area");
+// Pass booleans directly so compound variants with `false` values match correctly
+const slots = $derived(fileUploadVariants({
+	color: hasError ? "error" : color,
+	size,
+	variant,
+	layout,
+	dropzone,
+	interactive: interactive && !isDisabled,
+	highlight: resolvedHighlight,
+	multiple,
+	disabled: isDisabled
+}));
+const classes = $derived.by(() => {
+	const u = ui ?? {};
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			u.root
+		] }),
+		base: slots.base({ class: [config.slots.base, u.base] }),
+		wrapper: slots.wrapper({ class: [config.slots.wrapper, u.wrapper] }),
+		icon: slots.icon({ class: [config.slots.icon, u.icon] }),
+		label: slots.label({ class: [config.slots.label, u.label] }),
+		description: slots.description({ class: [config.slots.description, u.description] }),
+		actions: slots.actions({ class: [config.slots.actions, u.actions] }),
+		files: slots.files({ class: [config.slots.files, u.files] }),
+		file: slots.file({ class: [config.slots.file, u.file] }),
+		fileLeading: slots.fileLeading({ class: [config.slots.fileLeading, u.fileLeading] }),
+		fileWrapper: slots.fileWrapper({ class: [config.slots.fileWrapper, u.fileWrapper] }),
+		fileName: slots.fileName({ class: [config.slots.fileName, u.fileName] }),
+		fileSize: slots.fileSize({ class: [config.slots.fileSize, u.fileSize] }),
+		fileTrailing: slots.fileTrailing({ class: [config.slots.fileTrailing, u.fileTrailing] }),
+		previewContent: slots.previewContent({ class: [config.slots.previewContent, u.previewContent] }),
+		previewBody: slots.previewBody({ class: [config.slots.previewBody, u.previewBody] })
+	};
+});
+// Revoke blob URLs for files no longer in value (handles external bind:value resets)
+$effect(() => {
+	const current = new Set(value.map(fileKey));
+	// Close preview if its file was removed externally — untrack to avoid subscribing to previewFile
+	const pf = untrack(() => previewFile);
+	if (pf && !current.has(fileKey(pf))) {
+		previewOpen = false;
+		previewFile = null;
+	}
+	for (const [key, url] of urlCache) {
+		if (!current.has(key)) {
+			URL.revokeObjectURL(url);
+			urlCache.delete(key);
+		}
+	}
+});
+$effect(() => {
+	return () => {
+		for (const [, url] of urlCache) URL.revokeObjectURL(url);
+		urlCache.clear();
+	};
+});
+export function open() {
+	if (isDisabled) return;
+	inputRef?.click();
+}
+function isFileAccepted(file) {
+	if (!accept) return true;
+	return accept.split(",").map((s) => s.trim()).some((token) => {
+		if (!token || token === "*") return true;
+		if (token.startsWith(".")) return file.name.toLowerCase().endsWith(token.toLowerCase());
+		if (token.endsWith("/*")) return file.type.startsWith(token.slice(0, -1));
+		return file.type === token;
+	});
+}
+function validateIngress(file) {
+	if (accept && !isFileAccepted(file)) return "accept";
+	if (maxSize !== undefined && file.size > maxSize) return "maxSize";
+	return null;
+}
+function applyMaxFiles(candidates) {
+	if (maxFiles === undefined) return {
+		accepted: candidates,
+		rejected: []
+	};
+	const remaining = Math.max(0, maxFiles - value.length);
+	if (candidates.length <= remaining) return {
+		accepted: candidates,
+		rejected: []
+	};
+	return {
+		accepted: candidates.slice(0, remaining),
+		rejected: candidates.slice(remaining).map((file) => ({
+			file,
+			reason: "maxFiles"
+		}))
+	};
+}
+function addFiles(newFiles) {
+	if (isDisabled) return;
+	const rejected = [];
+	const passed = [];
+	for (const file of newFiles) {
+		const reason = validateIngress(file);
+		if (reason) rejected.push({
+			file,
+			reason
+		});
+		else passed.push(file);
+	}
+	let accepted;
+	if (!multiple) {
+		accepted = passed.slice(0, 1);
+	} else {
+		const existing = new Set(value.map(fileKey));
+		const deduped = passed.filter((f) => !existing.has(fileKey(f)));
+		const result = applyMaxFiles(deduped);
+		accepted = result.accepted;
+		rejected.push(...result.rejected);
+	}
+	if (accepted.length) {
+		value = multiple ? [...value, ...accepted] : accepted;
+		onValueChange?.(value);
+		emit.onChange();
+	}
+	if (rejected.length) onReject?.(rejected);
+}
+function removeFile(index) {
+	const removed = value[index];
+	const key = fileKey(removed);
+	if (previewFile && fileKey(previewFile) === key) {
+		previewOpen = false;
+		previewFile = null;
+	}
+	if (urlCache.has(key)) {
+		URL.revokeObjectURL(urlCache.get(key));
+		urlCache.delete(key);
+	}
+	value = value.filter((_, i) => i !== index);
+	onValueChange?.(value);
+	emit.onChange();
+}
+export function clearAll() {
+	previewOpen = false;
+	previewFile = null;
+	for (const [, url] of urlCache) URL.revokeObjectURL(url);
+	urlCache.clear();
+	value = [];
+	onValueChange?.(value);
+	emit.onChange();
+}
+function handleInputChange(e) {
+	const input = e.target;
+	if (input.files?.length) {
+		addFiles(Array.from(input.files));
+		input.value = "";
+	}
+}
+function handleDrop(e) {
+	e.preventDefault();
+	dragCounter = 0;
+	if (!dropzone || isDisabled) return;
+	const files = e.dataTransfer?.files;
+	if (files?.length) addFiles(Array.from(files));
+}
+function handleDragEnter(e) {
+	e.preventDefault();
+	if (dropzone && !isDisabled) dragCounter++;
+}
+function handleDragOver(e) {
+	e.preventDefault();
+}
+function handleDragLeave() {
+	dragCounter = Math.max(0, dragCounter - 1);
+}
+function handleAreaClick() {
+	if (interactive && !isDisabled) open();
+}
+function handleKeydown(e) {
+	if (!interactive) return;
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		open();
+	}
+}
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 B";
+	const k = 1024;
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+}
+function isImageFile(file) {
+	return file.type.startsWith("image/");
+}
+function openPreview(file) {
+	previewFile = file;
+	previewOpen = true;
+}
+function getObjectUrl(file) {
+	const key = fileKey(file);
+	if (!urlCache.has(key)) {
+		urlCache.set(key, URL.createObjectURL(file));
+	}
+	return urlCache.get(key);
+}
 </script>
 
 <div {...restProps} bind:this={ref} class={classes.root} data-full={isFull ? '' : undefined}>

package/dist/FileUpload/FileUpload.svelte.d.ts

@@ -3,6 +3,6 @@ export type Props = FileUploadProps;
 declare const FileUpload: import("svelte").Component<FileUploadProps, {
     open: () => void;
     clearAll: () => void;
-}, "value" | "ref">;
+}, "ref" | "value">;
 type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

package/dist/Fonts/Fonts.svelte

@@ -1,40 +1,19 @@
-<script lang="ts" module>
-    import type { FontsProps } from './fonts.types.js'
-
-    export type Props = FontsProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { getConfig } from '../config.js'
-    import {
-        buildFontVariablesCss,
-        buildGoogleFontsUrl,
-        buildLocalFontFaceCss,
-        fontsDefaults,
-        resolveFontsOptions
-    } from './fonts.js'
-
-    const globalConfig = getConfig()
-    const config = resolveFontsOptions(globalConfig.fonts)
-
-    let {
-        fonts,
-        families,
-        display,
-        preconnect
-    }: Props = $props()
-
-    const resolvedFamilies = $derived(families ?? fonts ?? (config === false ? [] : config.families ?? []))
-    const resolvedDisplay = $derived(display ?? (config === false ? fontsDefaults.display : config.display))
-    const resolvedPreconnect = $derived(
-        preconnect ?? (config === false ? fontsDefaults.preconnect : config.preconnect)
-    )
-
-    const href = $derived(buildGoogleFontsUrl(resolvedFamilies, resolvedDisplay))
-    const localFontFaceCss = $derived(buildLocalFontFaceCss(resolvedFamilies, resolvedDisplay))
-    const variableCss = $derived(buildFontVariablesCss(resolvedFamilies))
-    const inlineCss = $derived([localFontFaceCss, variableCss].filter((value) => value.length > 0).join('\n\n'))
-    const hasFonts = $derived(href.length > 0 || inlineCss.length > 0)
+<script lang="ts">import { getConfig } from "../config.js";
+import { buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, fontsDefaults, resolveFontsOptions } from "./fonts.js";
+const globalConfig = getConfig();
+const config = resolveFontsOptions(globalConfig.fonts);
+let { fonts, families, display, preconnect } = $props();
+const resolvedFamilies = $derived(families ?? fonts ?? (config === false ? [] : config.families ?? []));
+const resolvedDisplay = $derived(display ?? (config === false ? fontsDefaults.display : config.display));
+const resolvedPreconnect = $derived(preconnect ?? (config === false ? fontsDefaults.preconnect : config.preconnect));
+const href = $derived(buildGoogleFontsUrl(resolvedFamilies, resolvedDisplay));
+const localFontFaceCss = $derived(buildLocalFontFaceCss(resolvedFamilies, resolvedDisplay));
+const variableCss = $derived(buildFontVariablesCss(resolvedFamilies));
+const inlineCss = $derived([localFontFaceCss, variableCss].filter((value) => value.length > 0).join("\n\n"));
+const hasFonts = $derived(href.length > 0 || inlineCss.length > 0);
 </script>
 
 <svelte:head>
@@ -47,8 +26,7 @@
             <link rel="stylesheet" href={href} />
         {/if}
         {#if inlineCss}
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            {@html `<style>${inlineCss}</style>`}
+            <svelte:element this={'style'}>{inlineCss}</svelte:element>
         {/if}
     {/if}
 </svelte:head>