svelora 3.0.1 → 3.0.2

package/dist/Accordion/Accordion.svelte

@@ -1,102 +1,71 @@
-<script lang="ts" module>
-    import type { AccordionItem, AccordionProps } from './accordion.types.js'
-
-    export type Props = AccordionProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Accordion } from 'bits-ui'
-    import { slide } from 'svelte/transition'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { accordionDefaults, accordionVariants } from './accordion.variants.js'
-
-    const config = getComponentConfig('accordion', accordionDefaults)
-
-    let {
-        items = [],
-        type = 'single',
-        value = $bindable(),
-        onValueChange,
-        disabled = false,
-        loop = false,
-        orientation = 'vertical',
-        forceMount = false,
-        trailingIcon = 'lucide:chevron-down',
-        ui,
-        class: className,
-        leading,
-        label: labelSlot,
-        trailing,
-        content: contentSlot,
-        body: bodySlot
-    }: Props = $props()
-
-    const variantSlots = $derived(accordionVariants({ disabled }))
-    const rootClass = $derived(
-        variantSlots.root({ class: [config.slots.root, ui?.root, className] })
-    )
-
-    const singleValue = $derived(typeof value === 'string' ? value : undefined)
-    const multipleValue = $derived(Array.isArray(value) ? value : undefined)
-
-    const slotNames = [
-        'item',
-        'header',
-        'trigger',
-        'content',
-        'body',
-        'leadingIcon',
-        'trailingIcon',
-        'label'
-    ] as const
-
-    type SlotName = (typeof slotNames)[number]
-
-    const itemDefaults = $derived.by(() => {
-        const result = {} as Record<SlotName, string>
-        for (const slot of slotNames) {
-            result[slot] = variantSlots[slot]({ class: [config.slots[slot], ui?.[slot]] })
-        }
-        return result
-    })
-
-    function getItemClasses(item: AccordionItem) {
-        if (!item.ui && item.class === undefined && item.disabled === undefined) {
-            return itemDefaults
-        }
-        const result = {} as Record<SlotName, string>
-        for (const slot of slotNames) {
-            const baseClass = [
-                config.slots[slot],
-                ui?.[slot],
-                item.ui?.[slot],
-                slot === 'item' ? item.class : undefined
-            ]
-            const opts =
-                slot === 'trigger'
-                    ? { class: baseClass, disabled: item.disabled }
-                    : { class: baseClass }
-            result[slot] = variantSlots[slot](opts)
-        }
-        return result
-    }
-
-    function isOpen(itemValue: string): boolean {
-        if (!value) return false
-        if (Array.isArray(value)) return value.includes(itemValue)
-        return value === itemValue
-    }
-
-    function handleSingleValueChange(newValue: string) {
-        value = newValue
-        onValueChange?.(newValue)
-    }
-
-    function handleMultipleValueChange(newValue: string[]) {
-        value = newValue
-        onValueChange?.(newValue)
-    }
+<script lang="ts">import { Accordion } from "bits-ui";
+import { slide } from "svelte/transition";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { accordionDefaults, accordionVariants } from "./accordion.variants.js";
+const config = getComponentConfig("accordion", accordionDefaults);
+let { items = [], type = "single", value = $bindable(), onValueChange, disabled = false, loop = false, orientation = "vertical", forceMount = false, trailingIcon = "lucide:chevron-down", ui, class: className, leading, label: labelSlot, trailing, content: contentSlot, body: bodySlot } = $props();
+const variantSlots = $derived(accordionVariants({ disabled }));
+const rootClass = $derived(variantSlots.root({ class: [
+	config.slots.root,
+	ui?.root,
+	className
+] }));
+const singleValue = $derived(typeof value === "string" ? value : undefined);
+const multipleValue = $derived(Array.isArray(value) ? value : undefined);
+const slotNames = [
+	"item",
+	"header",
+	"trigger",
+	"content",
+	"body",
+	"leadingIcon",
+	"trailingIcon",
+	"label"
+];
+const itemDefaults = $derived.by(() => {
+	const result = {};
+	for (const slot of slotNames) {
+		result[slot] = variantSlots[slot]({ class: [config.slots[slot], ui?.[slot]] });
+	}
+	return result;
+});
+function getItemClasses(item) {
+	if (!item.ui && item.class === undefined && item.disabled === undefined) {
+		return itemDefaults;
+	}
+	const result = {};
+	for (const slot of slotNames) {
+		const baseClass = [
+			config.slots[slot],
+			ui?.[slot],
+			item.ui?.[slot],
+			slot === "item" ? item.class : undefined
+		];
+		const opts = slot === "trigger" ? {
+			class: baseClass,
+			disabled: item.disabled
+		} : { class: baseClass };
+		result[slot] = variantSlots[slot](opts);
+	}
+	return result;
+}
+function isOpen(itemValue) {
+	if (!value) return false;
+	if (Array.isArray(value)) return value.includes(itemValue);
+	return value === itemValue;
+}
+function handleSingleValueChange(newValue) {
+	value = newValue;
+	onValueChange?.(newValue);
+}
+function handleMultipleValueChange(newValue) {
+	value = newValue;
+	onValueChange?.(newValue);
+}
 </script>
 
 {#snippet accordionItem(item: AccordionItem, index: number)}

package/dist/Alert/Alert.svelte

@@ -1,69 +1,44 @@
-<script lang="ts" module>
-    import type { AlertProps } from './alert.types.js'
-
-    export type Props = AlertProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Button from '../Button/Button.svelte'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { alertDefaults, alertVariants } from './alert.variants.js'
-
-    const config = getComponentConfig('alert', alertDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        title,
-        description,
-        icon,
-        avatar,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        orientation = config.defaultVariants.orientation,
-        open = $bindable(true),
-        close = false,
-        closeIcon,
-        actions,
-        class: className,
-        leading,
-        titleSlot,
-        descriptionSlot,
-        actionsSlot,
-        closeSlot,
-        onClose,
-        ...restProps
-    }: Props = $props()
-
-    const resolvedCloseIcon = $derived(closeIcon ?? icons.close)
-
-    const classes = $derived.by(() => {
-        const slots = alertVariants({ variant, color, orientation, title: !!title })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-            title: slots.title({ class: [config.slots.title, ui?.title] }),
-            description: slots.description({ class: [config.slots.description, ui?.description] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
-            actions: slots.actions({ class: [config.slots.actions, ui?.actions] }),
-            close: slots.close({ class: [config.slots.close, ui?.close] })
-        }
-    })
-
-    const closeButtonProps = $derived(!close ? null : close === true ? {} : close)
-
-    const isVertical = $derived(orientation === 'vertical')
-    const hasActions = $derived(!!actionsSlot || (actions && actions.length > 0))
-
-    function handleClose() {
-        open = false
-        onClose?.()
-    }
+<script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { alertDefaults, alertVariants } from "./alert.variants.js";
+const config = getComponentConfig("alert", alertDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), as = "div", ui, title, description, icon, avatar, color = config.defaultVariants.color, variant = config.defaultVariants.variant, orientation = config.defaultVariants.orientation, open = $bindable(true), close = false, closeIcon, actions, class: className, leading, titleSlot, descriptionSlot, actionsSlot, closeSlot, onClose, ...restProps } = $props();
+const resolvedCloseIcon = $derived(closeIcon ?? icons.close);
+const classes = $derived.by(() => {
+	const slots = alertVariants({
+		variant,
+		color,
+		orientation,
+		title: !!title
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+		title: slots.title({ class: [config.slots.title, ui?.title] }),
+		description: slots.description({ class: [config.slots.description, ui?.description] }),
+		icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+		avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
+		actions: slots.actions({ class: [config.slots.actions, ui?.actions] }),
+		close: slots.close({ class: [config.slots.close, ui?.close] })
+	};
+});
+const closeButtonProps = $derived(!close ? null : close === true ? {} : close);
+const isVertical = $derived(orientation === "vertical");
+const hasActions = $derived(!!actionsSlot || actions && actions.length > 0);
+function handleClose() {
+	open = false;
+	onClose?.();
+}
 </script>
 
 {#snippet actionsContent()}

package/dist/Alert/Alert.svelte.d.ts

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

package/dist/Avatar/Avatar.svelte

@@ -1,80 +1,40 @@
-<script lang="ts" module>
-    import type { AvatarProps, AvatarRounded, AvatarSize } from './avatar.types.js'
-
-    export type Props = AvatarProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Avatar } from 'bits-ui'
-    import { getContext } from 'svelte'
-    import Chip from '../Chip/Chip.svelte'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { avatarDefaults, avatarSizePx, avatarVariants } from './avatar.variants.js'
-
-    const config = getComponentConfig('avatar', avatarDefaults)
-
-    let {
-        ref = $bindable(null),
-        src,
-        alt,
-        size,
-        rounded,
-        text,
-        icon,
-        chip,
-        loading,
-        delayMs = 0,
-        class: className,
-        ui,
-        fallback: fallbackSnippet,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const groupContext = getContext<
-        { size: AvatarSize; rounded: AvatarRounded; baseClass: string } | undefined
-    >('avatarGroup')
-
-    const resolvedSize = $derived(size ?? groupContext?.size ?? config.defaultVariants.size ?? 'md')
-    const resolvedRounded = $derived(
-        rounded ?? groupContext?.rounded ?? config.defaultVariants.rounded ?? 'full'
-    )
-    const sizePx = $derived(avatarSizePx[resolvedSize])
-
-    const initials = $derived(
-        text !== undefined
-            ? text
-            : alt
-              ? alt
-                    .split(' ')
-                    .filter(Boolean)
-                    .slice(0, 2)
-                    .map((w) => w[0])
-                    .join('')
-                    .toUpperCase()
-              : ''
-    )
-
-    const chipProps = $derived(
-        chip === true
-            ? { inset: true as const }
-            : chip
-              ? { inset: true as const, ...chip }
-              : undefined
-    )
-
-    const classes = $derived.by(() => {
-        const slots = avatarVariants({ size: resolvedSize, rounded: resolvedRounded })
-        return {
-            root: slots.root({
-                class: [config.slots.root, groupContext?.baseClass, className, ui?.root]
-            }),
-            image: slots.image({ class: [config.slots.image, ui?.image] }),
-            fallback: slots.fallback({ class: [config.slots.fallback, ui?.fallback] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] })
-        }
-    })
+<script lang="ts">import { Avatar } from "bits-ui";
+import { getContext } from "svelte";
+import Chip from "../Chip/Chip.svelte";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { avatarDefaults, avatarSizePx, avatarVariants } from "./avatar.variants.js";
+const config = getComponentConfig("avatar", avatarDefaults);
+let { ref = $bindable(null), src, alt, size, rounded, text, icon, chip, loading, delayMs = 0, class: className, ui, fallback: fallbackSnippet, children, ...restProps } = $props();
+const groupContext = getContext("avatarGroup");
+const resolvedSize = $derived(size ?? groupContext?.size ?? config.defaultVariants.size ?? "md");
+const resolvedRounded = $derived(rounded ?? groupContext?.rounded ?? config.defaultVariants.rounded ?? "full");
+const sizePx = $derived(avatarSizePx[resolvedSize]);
+const initials = $derived(text !== undefined ? text : alt ? alt.split(" ").filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase() : "");
+const chipProps = $derived(chip === true ? { inset: true } : chip ? {
+	inset: true,
+	...chip
+} : undefined);
+const classes = $derived.by(() => {
+	const slots = avatarVariants({
+		size: resolvedSize,
+		rounded: resolvedRounded
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			groupContext?.baseClass,
+			className,
+			ui?.root
+		] }),
+		image: slots.image({ class: [config.slots.image, ui?.image] }),
+		fallback: slots.fallback({ class: [config.slots.fallback, ui?.fallback] }),
+		icon: slots.icon({ class: [config.slots.icon, ui?.icon] })
+	};
+});
 </script>
 
 {#snippet avatarContent()}

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -1,60 +1,43 @@
-<script lang="ts" module>
-    import type { AvatarGroupProps } from './avatar-group.types.js'
-
-    export type Props = AvatarGroupProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { setContext } from 'svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarRounded, AvatarSize } from '../Avatar/avatar.types.js'
-    import { getComponentConfig } from '../config.js'
-    import { avatarGroupDefaults, avatarGroupVariants } from './avatar-group.variants.js'
-
-    const config = getComponentConfig('avatarGroup', avatarGroupDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        size = config.defaultVariants.size ?? 'md',
-        rounded = config.defaultVariants.rounded ?? 'full',
-        avatars,
-        max,
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = avatarGroupVariants({ size, rounded })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] })
-        }
-    })
-
-    setContext<{ size: AvatarSize; rounded: AvatarRounded; baseClass: string }>('avatarGroup', {
-        get size() {
-            return size
-        },
-        get rounded() {
-            return rounded
-        },
-        get baseClass() {
-            return classes.base
-        }
-    })
-
-    const visibleAvatars = $derived.by(() => {
-        if (!avatars) return []
-        const shown = max && max > 0 ? avatars.slice(0, max) : avatars
-        return [...shown].reverse()
-    })
-
-    const overflowCount = $derived(
-        avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0
-    )
+<script lang="ts">import { setContext } from "svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig } from "../config.js";
+import { avatarGroupDefaults, avatarGroupVariants } from "./avatar-group.variants.js";
+const config = getComponentConfig("avatarGroup", avatarGroupDefaults);
+let { ref = $bindable(null), as = "div", ui, size = config.defaultVariants.size ?? "md", rounded = config.defaultVariants.rounded ?? "full", avatars, max, class: className, children, ...restProps } = $props();
+const classes = $derived.by(() => {
+	const slots = avatarGroupVariants({
+		size,
+		rounded
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		base: slots.base({ class: [config.slots.base, ui?.base] })
+	};
+});
+setContext("avatarGroup", {
+	get size() {
+		return size;
+	},
+	get rounded() {
+		return rounded;
+	},
+	get baseClass() {
+		return classes.base;
+	}
+});
+const visibleAvatars = $derived.by(() => {
+	if (!avatars) return [];
+	const shown = max && max > 0 ? avatars.slice(0, max) : avatars;
+	return [...shown].reverse();
+});
+const overflowCount = $derived(avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0);
 </script>
 
 <svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>

package/dist/Badge/Badge.svelte

@@ -1,55 +1,33 @@
-<script lang="ts" module>
-    import type { BadgeProps } from './badge.types.js'
-
-    export type Props = BadgeProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { badgeDefaults, badgeVariants } from './badge.variants.js'
-
-    const config = getComponentConfig('badge', badgeDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'span',
-        ui,
-        label,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size = config.defaultVariants.size,
-        square = false,
-        icon,
-        leadingIcon,
-        trailingIcon,
-        avatar,
-        class: className,
-        leading,
-        children,
-        trailing,
-        ...restProps
-    }: Props = $props()
-
-    const isIconOnly = $derived(!!icon || (square && label === undefined && !children))
-
-    const classes = $derived.by(() => {
-        const slots = badgeVariants({ variant, color, size, square: isIconOnly || square })
-        return {
-            base: slots.base({ class: [config.slots.base, 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
-        }
-    })
+<script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { badgeDefaults, badgeVariants } from "./badge.variants.js";
+const config = getComponentConfig("badge", badgeDefaults);
+let { ref = $bindable(null), as = "span", ui, label, color = config.defaultVariants.color, variant = config.defaultVariants.variant, size = config.defaultVariants.size, square = false, icon, leadingIcon, trailingIcon, avatar, class: className, leading, children, trailing, ...restProps } = $props();
+const isIconOnly = $derived(!!icon || square && label === undefined && !children);
+const classes = $derived.by(() => {
+	const slots = badgeVariants({
+		variant,
+		color,
+		size,
+		square: isIconOnly || square
+	});
+	return {
+		base: slots.base({ class: [
+			config.slots.base,
+			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()
+	};
+});
 </script>
 
 <svelte:element this={as} bind:this={ref} class={classes.base} {...restProps}>