svelora 3.0.0 → 3.0.2

package/dist/Banner/Banner.svelte

@@ -1,57 +1,62 @@
-<script lang="ts" module>import type { BannerProps } from './banner.types.js';
-export type Props = BannerProps;
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { useId } from 'bits-ui';
-import Button from '../Button/Button.svelte';
-import { getComponentConfig, iconsDefaults } from '../config.js';
-import Icon from '../Icon/Icon.svelte';
-import { bannerDefaults, bannerVariants } from './banner.variants.js';
-
-const config = getComponentConfig('banner', bannerDefaults);
-const icons = getComponentConfig('icons', iconsDefaults);
-let { ref = $bindable(null), as = 'div', id, title, icon, color = config.defaultVariants.color, to, target, close = false, closeIcon, actions, open = $bindable(true), onClose, class: className, ui, leading, titleSlot, actionsSlot, closeSlot, ...restProps }: Props = $props();
-const fallbackId = useId('banner-');
+<script lang="ts">import { useId } from "bits-ui";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { bannerDefaults, bannerVariants } from "./banner.variants.js";
+const config = getComponentConfig("banner", bannerDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), as = "div", id, title, icon, color = config.defaultVariants.color, to, target, close = false, closeIcon, actions, open = $bindable(true), onClose, class: className, ui, leading, titleSlot, actionsSlot, closeSlot, ...restProps } = $props();
+const fallbackId = useId("banner-");
 const effectiveId = $derived(id ?? fallbackId);
 let dismissed = $state(false);
-function storageKey(rawId: string) {
-    return `ps-banner-${rawId.replace(/[^\w-]/g, '-')}`;
+function storageKey(rawId) {
+	return `ps-banner-${rawId.replace(/[^\w-]/g, "-")}`;
 }
 $effect(() => {
-    void open;
-    if (!id || typeof window === 'undefined') {
-        dismissed = false;
-        return;
-    }
-    dismissed = localStorage.getItem(storageKey(id)) === '1';
+	void open;
+	if (!id || typeof window === "undefined") {
+		dismissed = false;
+		return;
+	}
+	dismissed = localStorage.getItem(storageKey(id)) === "1";
 });
 const visible = $derived(open && !dismissed);
 const isClickable = $derived(!!to);
 const resolvedCloseIcon = $derived(closeIcon ?? icons.close);
 const closeButtonProps = $derived(!close ? null : close === true ? {} : close);
 const classes = $derived.by(() => {
-    const slots = bannerVariants({ color, to: isClickable });
-    const c = config.slots;
-    const u = ui ?? {};
-    return {
-        root: slots.root({ class: [c.root, className, u.root] }),
-        container: slots.container({ class: [c.container, u.container] }),
-        left: slots.left({ class: [c.left, u.left] }),
-        center: slots.center({ class: [c.center, u.center] }),
-        right: slots.right({ class: [c.right, u.right] }),
-        icon: slots.icon({ class: [c.icon, u.icon] }),
-        title: slots.title({ class: [c.title, u.title] }),
-        actions: slots.actions({ class: [c.actions, u.actions] }),
-        close: slots.close({ class: [c.close, u.close] })
-    };
+	const slots = bannerVariants({
+		color,
+		to: isClickable
+	});
+	const c = config.slots;
+	const u = ui ?? {};
+	return {
+		root: slots.root({ class: [
+			c.root,
+			className,
+			u.root
+		] }),
+		container: slots.container({ class: [c.container, u.container] }),
+		left: slots.left({ class: [c.left, u.left] }),
+		center: slots.center({ class: [c.center, u.center] }),
+		right: slots.right({ class: [c.right, u.right] }),
+		icon: slots.icon({ class: [c.icon, u.icon] }),
+		title: slots.title({ class: [c.title, u.title] }),
+		actions: slots.actions({ class: [c.actions, u.actions] }),
+		close: slots.close({ class: [c.close, u.close] })
+	};
 });
-function handleClose(event: Event | undefined) {
-    event?.stopPropagation();
-    if (id && typeof window !== 'undefined') {
-        localStorage.setItem(storageKey(id), '1');
-    }
-    open = false;
-    onClose?.();
+function handleClose(event) {
+	event?.stopPropagation();
+	if (id && typeof window !== "undefined") {
+		localStorage.setItem(storageKey(id), "1");
+	}
+	open = false;
+	onClose?.();
 }
 </script>
 

package/dist/Banner/Banner.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BannerProps } from './banner.types.js';
 export type Props = BannerProps;
-declare const Banner: import("svelte").Component<BannerProps, {}, "ref" | "open">;
+declare const Banner: import("svelte").Component<BannerProps, {}, "open" | "ref">;
 type Banner = ReturnType<typeof Banner>;
 export default Banner;

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -1,34 +1,40 @@
-<script lang="ts" module>import type { BreadcrumbProps } from './breadcrumb.types.js';
-export type Props = BreadcrumbProps;
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import type { ClassNameValue } from 'tailwind-merge';
-import { getComponentConfig } from '../config.js';
-import Icon from '../Icon/Icon.svelte';
-import Link from '../Link/Link.svelte';
-import { breadcrumbDefaults, breadcrumbVariants } from './breadcrumb.variants.js';
-
-const config = getComponentConfig('breadcrumb', breadcrumbDefaults);
-let { ref = $bindable(null), as = 'nav', items, separatorIcon = 'lucide:chevron-right', class: className, ui, item: itemSnippet, separator: separatorSnippet, ...restProps }: Props = $props();
+<script lang="ts">import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Link from "../Link/Link.svelte";
+import { breadcrumbDefaults, breadcrumbVariants } from "./breadcrumb.variants.js";
+const config = getComponentConfig("breadcrumb", breadcrumbDefaults);
+let { ref = $bindable(null), as = "nav", items, separatorIcon = "lucide:chevron-right", class: className, ui, item: itemSnippet, separator: separatorSnippet, ...restProps } = $props();
 const variantSlots = $derived(breadcrumbVariants(config.defaultVariants));
 const classes = $derived({
-    root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-    list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
-    separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
-    separatorIcon: variantSlots.separatorIcon({
-        class: [config.slots.separatorIcon, ui?.separatorIcon]
-    })
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+	separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+	separatorIcon: variantSlots.separatorIcon({ class: [config.slots.separatorIcon, ui?.separatorIcon] })
 });
-function getLinkClasses(active: boolean, disabled: boolean, to: boolean, itemClass: ClassNameValue | undefined) {
-    const slots = breadcrumbVariants({ ...config.defaultVariants, active, disabled, to });
-    return {
-        item: slots.item({ class: [config.slots.item, ui?.item] }),
-        link: slots.link({ class: [config.slots.link, itemClass, ui?.link] }),
-        linkLeadingIcon: slots.linkLeadingIcon({
-            class: [config.slots.linkLeadingIcon, ui?.linkLeadingIcon]
-        }),
-        linkLabel: slots.linkLabel({ class: [config.slots.linkLabel, ui?.linkLabel] })
-    };
+function getLinkClasses(active, disabled, to, itemClass) {
+	const slots = breadcrumbVariants({
+		...config.defaultVariants,
+		active,
+		disabled,
+		to
+	});
+	return {
+		item: slots.item({ class: [config.slots.item, ui?.item] }),
+		link: slots.link({ class: [
+			config.slots.link,
+			itemClass,
+			ui?.link
+		] }),
+		linkLeadingIcon: slots.linkLeadingIcon({ class: [config.slots.linkLeadingIcon, ui?.linkLeadingIcon] }),
+		linkLabel: slots.linkLabel({ class: [config.slots.linkLabel, ui?.linkLabel] })
+	};
 }
 </script>
 

package/dist/Button/Button.svelte

@@ -1,143 +1,75 @@
-<script lang="ts" module>
-    import type { ButtonProps } from './button.types.js'
-
-    export type Props = ButtonProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    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 } from '../FieldGroup/field-group.variants.js'
-    import { fieldGroupVariant } from '../FieldGroup/field-group.variants.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Link from '../Link/Link.svelte'
-    import { buttonDefaults, buttonVariants } from './button.variants.js'
-
-    const config = getComponentConfig('button', buttonDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        ui,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        label,
-        loading = false,
-        loadingAuto = false,
-        loadingIcon = icons.loading,
-        disabled = false,
-        block = false,
-        square = false,
-        icon,
-        leadingIcon,
-        trailingIcon,
-        trailing = false,
-        avatar,
-        href,
-        type,
-        external,
-        active,
-        exact = false,
-        activeColor,
-        activeVariant,
-        activeClass,
-        inactiveClass,
-        leadingSlot,
-        trailingSlot,
-        children,
-        class: className,
-        onclick,
-        ...restProps
-    }: Props = $props()
-
-    const fieldGroupContext = getContext<
-        | {
-              orientation: NonNullable<FieldGroupVariantProps['orientation']>
-              size: NonNullable<FieldGroupVariantProps['size']>
-          }
-        | undefined
-    >('fieldGroup')
-
-    const resolvedSize = $derived(size ?? fieldGroupContext?.size ?? config.defaultVariants.size)
-    const fieldGroupClass = $derived(
-        fieldGroupContext
-            ? fieldGroupVariant.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
-            : undefined
-    )
-
-    let autoLoading = $state(false)
-    let pendingPromise: Promise<unknown> | null = null
-    const isLoading = $derived(loading || autoLoading)
-
-    const isIconOnly = $derived(square || (!label && !children))
-    const isLeading = $derived((!!icon && !trailing) || (isLoading && !trailing) || !!leadingIcon)
-    const isTrailing = $derived((!!icon && trailing) || (isLoading && trailing) || !!trailingIcon)
-
-    const spinLeading = $derived(isLoading && !trailing)
-    const spinTrailing = $derived(isLoading && trailing)
-
-    const leadingIconName = $derived(
-        spinLeading ? loadingIcon : leadingIcon || (!trailing ? icon : undefined)
-    )
-    const trailingIconName = $derived(
-        spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
-    )
-
-    const resolvedColor = $derived(active && activeColor ? activeColor : color)
-    const resolvedVariant = $derived(active && activeVariant ? activeVariant : variant)
-
-    const classes = $derived.by(() => {
-        const slots = buttonVariants({
-            variant: resolvedVariant,
-            color: resolvedColor,
-            size: resolvedSize,
-            block,
-            square: isIconOnly,
-            loading: isLoading,
-            leading: spinLeading,
-            trailing: spinTrailing
-        })
-        return {
-            base: slots.base({ class: [config.slots.base, fieldGroupClass, className, ui?.base] }),
-            label: slots.label({ class: [config.slots.label, ui?.label] }),
-            leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
-            trailingIcon: slots.trailingIcon({
-                class: [config.slots.trailingIcon, ui?.trailingIcon]
-            }),
-            leadingAvatar: slots.leadingAvatar({
-                class: [config.slots.leadingAvatar, ui?.leadingAvatar]
-            }),
-            leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize
-        }
-    })
-
-    function handleClick(e: MouseEvent) {
-        if (disabled || isLoading) {
-            e.preventDefault()
-            e.stopPropagation()
-            return
-        }
-
-        if (typeof onclick === 'function') {
-            const result = (onclick as (e: MouseEvent) => unknown)(e)
-
-            if (loadingAuto && result instanceof Promise) {
-                autoLoading = true
-                pendingPromise = result
-                result.then(
-                    () => {
-                        if (pendingPromise === result) autoLoading = false
-                    },
-                    () => {
-                        if (pendingPromise === result) autoLoading = false
-                    }
-                )
-            }
-        }
-    }
+<script lang="ts">import { getContext } from "svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { fieldGroupVariant } from "../FieldGroup/field-group.variants.js";
+import Icon from "../Icon/Icon.svelte";
+import Link from "../Link/Link.svelte";
+import { buttonDefaults, buttonVariants } from "./button.variants.js";
+const config = getComponentConfig("button", buttonDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), ui, color = config.defaultVariants.color, variant = config.defaultVariants.variant, size, label, loading = false, loadingAuto = false, loadingIcon = icons.loading, disabled = false, block = false, square = false, icon, leadingIcon, trailingIcon, trailing = false, avatar, href, type, external, active, exact = false, activeColor, activeVariant, activeClass, inactiveClass, leadingSlot, trailingSlot, children, class: className, onclick, ...restProps } = $props();
+const fieldGroupContext = getContext("fieldGroup");
+const resolvedSize = $derived(size ?? fieldGroupContext?.size ?? config.defaultVariants.size);
+const fieldGroupClass = $derived(fieldGroupContext ? fieldGroupVariant.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : undefined);
+let autoLoading = $state(false);
+let pendingPromise = null;
+const isLoading = $derived(loading || autoLoading);
+const isIconOnly = $derived(square || !label && !children);
+const isLeading = $derived(!!icon && !trailing || isLoading && !trailing || !!leadingIcon);
+const isTrailing = $derived(!!icon && trailing || isLoading && trailing || !!trailingIcon);
+const spinLeading = $derived(isLoading && !trailing);
+const spinTrailing = $derived(isLoading && trailing);
+const leadingIconName = $derived(spinLeading ? loadingIcon : leadingIcon || (!trailing ? icon : undefined));
+const trailingIconName = $derived(spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined));
+const resolvedColor = $derived(active && activeColor ? activeColor : color);
+const resolvedVariant = $derived(active && activeVariant ? activeVariant : variant);
+const classes = $derived.by(() => {
+	const slots = buttonVariants({
+		variant: resolvedVariant,
+		color: resolvedColor,
+		size: resolvedSize,
+		block,
+		square: isIconOnly,
+		loading: isLoading,
+		leading: spinLeading,
+		trailing: spinTrailing
+	});
+	return {
+		base: slots.base({ class: [
+			config.slots.base,
+			fieldGroupClass,
+			className,
+			ui?.base
+		] }),
+		label: slots.label({ class: [config.slots.label, ui?.label] }),
+		leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+		trailingIcon: slots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] }),
+		leadingAvatar: slots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] }),
+		leadingAvatarSize: slots.leadingAvatarSize()
+	};
+});
+function handleClick(e) {
+	if (disabled || isLoading) {
+		e.preventDefault();
+		e.stopPropagation();
+		return;
+	}
+	if (typeof onclick === "function") {
+		const result = onclick(e);
+		if (loadingAuto && result instanceof Promise) {
+			autoLoading = true;
+			pendingPromise = result;
+			result.then(() => {
+				if (pendingPromise === result) autoLoading = false;
+			}, () => {
+				if (pendingPromise === result) autoLoading = false;
+			});
+		}
+	}
+}
 </script>
 
 <Link