svelora 3.0.0 → 3.0.2

package/dist/Input/Input.svelte

@@ -1,146 +1,76 @@
-<script lang="ts" module>
-    import type { InputProps, InputValue } from './input.types.js'
-
-    export type Props<T extends InputValue = InputValue> = InputProps<T>
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T extends InputValue = InputValue">
-    import { getContext } from 'svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import {
-        type FieldGroupVariantProps, 
-        fieldGroupVariantWithRoot
-    } from '../FieldGroup/field-group.variants.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { inputDefaults, inputVariants } from './input.variants.js'
-
-    const config = getComponentConfig('input', inputDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        type = 'text',
-        highlight,
-        loading = false,
-        loadingIcon = icons.loading,
-        disabled = false,
-        icon,
-        leadingIcon,
-        trailingIcon,
-        trailing = false,
-        avatar,
-        leadingSlot,
-        trailingSlot,
-        class: className,
-        onblur,
-        oninput,
-        onchange,
-        onfocus,
-        ...restProps
-    }: Props<T> = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    function handleBlur(event: FocusEvent & { currentTarget: HTMLInputElement }) {
-        emit.onBlur()
-        onblur?.(event)
-    }
-    function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
-        emit.onInput()
-        oninput?.(event)
-    }
-    function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
-        emit.onChange()
-        onchange?.(event)
-    }
-    function handleFocus(event: FocusEvent & { currentTarget: HTMLInputElement }) {
-        emit.onFocus()
-        onfocus?.(event)
-    }
-
-    const fieldGroupContext = getContext<
-        | {
-              orientation: NonNullable<FieldGroupVariantProps['orientation']>
-              size: NonNullable<FieldGroupVariantProps['size']>
-          }
-        | undefined
-    >('fieldGroup')
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(
-        size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(highlight ?? hasError)
-    const fieldGroupClass = $derived(
-        fieldGroupContext
-            ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
-            : undefined
-    )
-
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-
-    const loadingLeading = $derived(loading && !trailing)
-    const loadingTrailing = $derived(loading && trailing)
-
-    const isLeading = $derived((!!icon && !trailing) || !!leadingIcon || !!avatar || loadingLeading)
-    const isTrailing = $derived((!!icon && trailing) || !!trailingIcon || loadingTrailing)
-
-    const leadingIconName = $derived(leadingIcon || (icon && !trailing ? icon : undefined))
-    const trailingIconName = $derived(trailingIcon || (icon && trailing ? icon : undefined))
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const variantSlots = $derived(
-        inputVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: isTrailing,
-            highlight: resolvedHighlight
-        })
-    )
-    const classes = $derived({
-        root: variantSlots.root({
-            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-        }),
-        base: variantSlots.base({
-            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-        }),
-        leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
-        leadingIcon: variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon]
-        }),
-        leadingAvatar: variantSlots.leadingAvatar({
-            class: [config.slots.leadingAvatar, ui?.leadingAvatar]
-        }),
-        leadingAvatarSize: variantSlots.leadingAvatarSize() as AvatarSize,
-        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
-        trailingIcon: variantSlots.trailingIcon({
-            class: [config.slots.trailingIcon, ui?.trailingIcon]
-        })
-    })
+<script lang="ts" generics="T extends InputValue = InputValue">import { getContext } from "svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { fieldGroupVariantWithRoot } from "../FieldGroup/field-group.variants.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { inputDefaults, inputVariants } from "./input.variants.js";
+const config = getComponentConfig("input", inputDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable(), ui, id, name, color = config.defaultVariants.color, variant = config.defaultVariants.variant, size, type = "text", highlight, loading = false, loadingIcon = icons.loading, disabled = false, icon, leadingIcon, trailingIcon, trailing = false, avatar, leadingSlot, trailingSlot, class: className, onblur, oninput, onchange, onfocus, ...restProps } = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+function handleBlur(event) {
+	emit.onBlur();
+	onblur?.(event);
+}
+function handleInput(event) {
+	emit.onInput();
+	oninput?.(event);
+}
+function handleChange(event) {
+	emit.onChange();
+	onchange?.(event);
+}
+function handleFocus(event) {
+	emit.onFocus();
+	onfocus?.(event);
+}
+const fieldGroupContext = getContext("fieldGroup");
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(highlight ?? hasError);
+const fieldGroupClass = $derived(fieldGroupContext ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : undefined);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const loadingLeading = $derived(loading && !trailing);
+const loadingTrailing = $derived(loading && trailing);
+const isLeading = $derived(!!icon && !trailing || !!leadingIcon || !!avatar || loadingLeading);
+const isTrailing = $derived(!!icon && trailing || !!trailingIcon || loadingTrailing);
+const leadingIconName = $derived(leadingIcon || (icon && !trailing ? icon : undefined));
+const trailingIconName = $derived(trailingIcon || (icon && trailing ? icon : undefined));
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+const variantSlots = $derived(inputVariants({
+	variant,
+	color: resolvedColor,
+	size: resolvedSize,
+	leading: isLeading,
+	trailing: isTrailing,
+	highlight: resolvedHighlight
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		fieldGroupClass?.root,
+		className,
+		ui?.root
+	] }),
+	base: variantSlots.base({ class: [
+		config.slots.base,
+		fieldGroupClass?.base,
+		ui?.base
+	] }),
+	leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
+	leadingIcon: variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+	leadingAvatar: variantSlots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] }),
+	leadingAvatarSize: variantSlots.leadingAvatarSize(),
+	trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+	trailingIcon: variantSlots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] })
+});
 </script>
 
 <div class={classes.root}>

package/dist/Input/Input.svelte.d.ts

@@ -3,7 +3,7 @@ export type Props<T extends InputValue = InputValue> = InputProps<T>;
 declare function $$render<T extends InputValue = InputValue>(): {
     props: Props<T>;
     exports: {};
-    bindings: "value" | "ref";
+    bindings: "ref" | "value";
     slots: {};
     events: {};
 };
@@ -11,7 +11,7 @@ declare class __sveltets_Render<T extends InputValue = InputValue> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "value" | "ref";
+    bindings(): "ref" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/Kbd/Kbd.svelte

@@ -1,39 +1,23 @@
-<script lang="ts" module>
-    import type { KbdProps } from './kbd.types.js'
-    import { resolveKey } from './useKbd.svelte.js'
-
-    export type Props = KbdProps
+<script lang="ts" module>import { resolveKey } from "./useKbd.svelte.js";
 </script>
 
-<script lang="ts">
-    import { onMount } from 'svelte'
-    import { getComponentConfig } from '../config.js'
-    import { kbdDefaults, kbdVariants } from './kbd.variants.js'
-
-    const config = getComponentConfig('kbd', kbdDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'kbd',
-        value,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        variant = config.defaultVariants.variant,
-        ui,
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    let mounted = $state(false)
-    onMount(() => (mounted = true))
-
-    const displayValue = $derived(resolveKey(value, mounted))
-    const kbdClass = $derived(
-        kbdVariants({ color, size, variant }).base({
-            class: [config.slots.base, className, ui?.base]
-        })
-    )
+<script lang="ts">import { onMount } from "svelte";
+import { getComponentConfig } from "../config.js";
+import { kbdDefaults, kbdVariants } from "./kbd.variants.js";
+const config = getComponentConfig("kbd", kbdDefaults);
+let { ref = $bindable(null), as = "kbd", value, color = config.defaultVariants.color, size = config.defaultVariants.size, variant = config.defaultVariants.variant, ui, class: className, children, ...restProps } = $props();
+let mounted = $state(false);
+onMount(() => mounted = true);
+const displayValue = $derived(resolveKey(value, mounted));
+const kbdClass = $derived(kbdVariants({
+	color,
+	size,
+	variant
+}).base({ class: [
+	config.slots.base,
+	className,
+	ui?.base
+] }));
 </script>
 
 <svelte:element this={as} bind:this={ref} class={kbdClass} {...restProps}>

package/dist/Link/Link.svelte

@@ -1,201 +1,134 @@
-<script lang="ts" module>
-    import type { LinkProps } from './link.types.js'
-
-    const navigationEvent = 'svelora:navigation'
-    let isHistoryPatched = false
-
-    export type Props = LinkProps
-
-    function parseUrl(url: string, baseUrl: URL) {
-        try {
-            const parsed = new URL(url, baseUrl.origin)
-            return {
-                pathname: parsed.pathname,
-                query: parsed.searchParams,
-                hash: parsed.hash
-            }
-        } catch {
-            return {
-                pathname: url,
-                query: new URLSearchParams(),
-                hash: ''
-            }
-        }
-    }
-
-    function isQueryMatch(
-        linkQuery: URLSearchParams,
-        currentQuery: URLSearchParams,
-        mode: boolean | 'partial'
-    ): boolean {
-        if (mode === false) return true
-        if (mode === 'partial') {
-            for (const [key, value] of linkQuery) {
-                if (!currentQuery.getAll(key).includes(value)) return false
-            }
-            return true
-        }
-
-        // Exact: check size first (O(1) bail-out), then compare sorted strings
-        if (linkQuery.size !== currentQuery.size) return false
-        const sorted = (p: URLSearchParams) => new URLSearchParams([...p].sort()).toString()
-        return sorted(linkQuery) === sorted(currentQuery)
-    }
-
-    function isPathnameMatch(linkPath: string, currentPath: string, exactMatch: boolean): boolean {
-        if (exactMatch) return linkPath === currentPath
-
-        const link = linkPath.replace(/\/$/, '') || '/'
-        const current = currentPath.replace(/\/$/, '') || '/'
-
-        return link === '/' ? current === '/' : current === link || current.startsWith(`${link}/`)
-    }
-
-    function dispatchNavigationEvent() {
-        if (typeof window === 'undefined') {
-            return
-        }
-
-        window.dispatchEvent(new Event(navigationEvent))
-    }
-
-    function patchHistoryMethod(method: 'pushState' | 'replaceState') {
-        const historyMethod = window.history[method].bind(window.history) as (
-            ...args: Parameters<History['pushState']>
-        ) => void
-
-        Object.defineProperty(window.history, method, {
-            configurable: true,
-            value: (...args: Parameters<History['pushState']>) => {
-                historyMethod(...args)
-                dispatchNavigationEvent()
-            }
-        })
-    }
-
-    function ensureNavigationEvents() {
-        if (typeof window === 'undefined' || isHistoryPatched) {
-            return
-        }
-
-        isHistoryPatched = true
-        patchHistoryMethod('pushState')
-        patchHistoryMethod('replaceState')
-    }
-
-    function subscribeToLocation(callback: () => void) {
-        if (typeof window === 'undefined') {
-            return () => undefined
-        }
-
-        ensureNavigationEvents()
-
-        const handleLocationChange = () => callback()
-
-        handleLocationChange()
-        window.addEventListener('popstate', handleLocationChange)
-        window.addEventListener('hashchange', handleLocationChange)
-        window.addEventListener(navigationEvent, handleLocationChange)
-
-        return () => {
-            window.removeEventListener('popstate', handleLocationChange)
-            window.removeEventListener('hashchange', handleLocationChange)
-            window.removeEventListener(navigationEvent, handleLocationChange)
-        }
-    }
+<script lang="ts" module>const navigationEvent = "svelora:navigation";
+let isHistoryPatched = false;
+function parseUrl(url, baseUrl) {
+	try {
+		const parsed = new URL(url, baseUrl.origin);
+		return {
+			pathname: parsed.pathname,
+			query: parsed.searchParams,
+			hash: parsed.hash
+		};
+	} catch {
+		return {
+			pathname: url,
+			query: new URLSearchParams(),
+			hash: ""
+		};
+	}
+}
+function isQueryMatch(linkQuery, currentQuery, mode) {
+	if (mode === false) return true;
+	if (mode === "partial") {
+		for (const [key, value] of linkQuery) {
+			if (!currentQuery.getAll(key).includes(value)) return false;
+		}
+		return true;
+	}
+	// Exact: check size first (O(1) bail-out), then compare sorted strings
+	if (linkQuery.size !== currentQuery.size) return false;
+	const sorted = (p) => new URLSearchParams([...p].sort()).toString();
+	return sorted(linkQuery) === sorted(currentQuery);
+}
+function isPathnameMatch(linkPath, currentPath, exactMatch) {
+	if (exactMatch) return linkPath === currentPath;
+	const link = linkPath.replace(/\/$/, "") || "/";
+	const current = currentPath.replace(/\/$/, "") || "/";
+	return link === "/" ? current === "/" : current === link || current.startsWith(`${link}/`);
+}
+function dispatchNavigationEvent() {
+	if (typeof window === "undefined") {
+		return;
+	}
+	window.dispatchEvent(new Event(navigationEvent));
+}
+function patchHistoryMethod(method) {
+	const historyMethod = window.history[method].bind(window.history);
+	Object.defineProperty(window.history, method, {
+		configurable: true,
+		value: (...args) => {
+			historyMethod(...args);
+			dispatchNavigationEvent();
+		}
+	});
+}
+function ensureNavigationEvents() {
+	if (typeof window === "undefined" || isHistoryPatched) {
+		return;
+	}
+	isHistoryPatched = true;
+	patchHistoryMethod("pushState");
+	patchHistoryMethod("replaceState");
+}
+function subscribeToLocation(callback) {
+	if (typeof window === "undefined") {
+		return () => undefined;
+	}
+	ensureNavigationEvents();
+	const handleLocationChange = () => callback();
+	handleLocationChange();
+	window.addEventListener("popstate", handleLocationChange);
+	window.addEventListener("hashchange", handleLocationChange);
+	window.addEventListener(navigationEvent, handleLocationChange);
+	return () => {
+		window.removeEventListener("popstate", handleLocationChange);
+		window.removeEventListener("hashchange", handleLocationChange);
+		window.removeEventListener(navigationEvent, handleLocationChange);
+	};
+}
+export {};
 </script>
 
-<script lang="ts">
-    import { onMount } from 'svelte'
-    import { twMerge } from 'tailwind-merge'
-    import { getComponentConfig } from '../config.js'
-    import { linkDefaults, linkVariants } from './link.variants.js'
-
-    const config = getComponentConfig('link', linkDefaults)
-
-    let {
-        ref = $bindable(null),
-        href,
-        type,
-        active,
-        exact = false,
-        exactQuery = false,
-        exactHash = false,
-        activeClass,
-        inactiveClass,
-        disabled = false,
-        raw = false,
-        external,
-        children,
-        class: className,
-        ui,
-        target,
-        rel,
-        onclick,
-        ...restProps
-    }: Props = $props()
-
-    const isLink = $derived(!!href)
-    let currentUrl = $state<URL | undefined>(undefined)
-
-    onMount(() => {
-        return subscribeToLocation(() => {
-            currentUrl = new URL(window.location.href)
-        })
-    })
-
-    const isExternal = $derived(
-        isLink &&
-            (external ??
-                (href!.startsWith('http://') ||
-                    href!.startsWith('https://') ||
-                    href!.startsWith('//')))
-    )
-
-    const resolvedTarget = $derived(
-        isLink ? (target ?? (isExternal ? '_blank' : undefined)) : undefined
-    )
-
-    const resolvedRel = $derived(
-        isLink
-            ? (rel ??
-                  (isExternal || resolvedTarget === '_blank' ? 'noopener noreferrer' : undefined))
-            : undefined
-    )
-
-    const isActive = $derived.by(() => {
-        if (active !== undefined) return active
-        if (!isLink || !currentUrl || isExternal) return false
-
-        const link = parseUrl(href!, currentUrl)
-
-        if (exactHash && link.hash !== currentUrl.hash) return false
-        if (!isQueryMatch(link.query, currentUrl.searchParams, exactQuery)) return false
-
-        return isPathnameMatch(link.pathname, currentUrl.pathname, exact)
-    })
-
-    const baseClass = $derived.by(() => {
-        const stateClass = isActive ? activeClass : inactiveClass
-        if (raw) return twMerge(stateClass, className)
-
-        const slots = linkVariants({ active: isActive, disabled, raw })
-        return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] })
-    })
-
-    const ariaCurrent = $derived(isActive && exact ? ('page' as const) : undefined)
-
-    function handleClick(e: MouseEvent) {
-        if (disabled) {
-            e.preventDefault()
-            e.stopPropagation()
-            return
-        }
-
-        if (typeof onclick === 'function') {
-            ;(onclick as (e: MouseEvent) => void)(e)
-        }
-    }
+<script lang="ts">import { onMount } from "svelte";
+import { twMerge } from "tailwind-merge";
+import { getComponentConfig } from "../config.js";
+import { linkDefaults, linkVariants } from "./link.variants.js";
+const config = getComponentConfig("link", linkDefaults);
+let { ref = $bindable(null), href, type, active, exact = false, exactQuery = false, exactHash = false, activeClass, inactiveClass, disabled = false, raw = false, external, children, class: className, ui, target, rel, onclick, ...restProps } = $props();
+const isLink = $derived(!!href);
+let currentUrl = $state(undefined);
+onMount(() => {
+	return subscribeToLocation(() => {
+		currentUrl = new URL(window.location.href);
+	});
+});
+const isExternal = $derived(isLink && (external ?? (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//"))));
+const resolvedTarget = $derived(isLink ? target ?? (isExternal ? "_blank" : undefined) : undefined);
+const resolvedRel = $derived(isLink ? rel ?? (isExternal || resolvedTarget === "_blank" ? "noopener noreferrer" : undefined) : undefined);
+const isActive = $derived.by(() => {
+	if (active !== undefined) return active;
+	if (!isLink || !currentUrl || isExternal) return false;
+	const link = parseUrl(href, currentUrl);
+	if (exactHash && link.hash !== currentUrl.hash) return false;
+	if (!isQueryMatch(link.query, currentUrl.searchParams, exactQuery)) return false;
+	return isPathnameMatch(link.pathname, currentUrl.pathname, exact);
+});
+const baseClass = $derived.by(() => {
+	const stateClass = isActive ? activeClass : inactiveClass;
+	if (raw) return twMerge(stateClass, className);
+	const slots = linkVariants({
+		active: isActive,
+		disabled,
+		raw
+	});
+	return slots.base({ class: [
+		config.slots.base,
+		stateClass,
+		className,
+		ui?.base
+	] });
+});
+const ariaCurrent = $derived(isActive && exact ? "page" : undefined);
+function handleClick(e) {
+	if (disabled) {
+		e.preventDefault();
+		e.stopPropagation();
+		return;
+	}
+	if (typeof onclick === "function") {
+		;
+		onclick(e);
+	}
+}
 </script>
 
 {#if isLink}