sv5ui 2.1.0 → 2.3.0

package/dist/Alert/Alert.svelte

@@ -1,131 +0,0 @@
-<script lang="ts" module>
-    import type { AlertProps } from './alert.types.js'
-
-    export type Props = AlertProps
-</script>
-
-<script lang="ts">
-    import { alertVariants, alertDefaults } from './alert.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Button from '../Button/Button.svelte'
-
-    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>
-
-{#snippet actionsContent()}
-    {#if actionsSlot}
-        {@render actionsSlot()}
-    {:else if actions && actions.length > 0}
-        <div class={classes.actions}>
-            {#each actions as action, index (index)}
-                <Button size="xs" {...action} />
-            {/each}
-        </div>
-    {/if}
-{/snippet}
-
-{#if open}
-    <svelte:element this={as} bind:this={ref} class={classes.root} role="alert" {...restProps}>
-        {#if leading}
-            {@render leading()}
-        {:else if icon}
-            <Icon name={icon} class={classes.icon} />
-        {:else if avatar}
-            <Avatar {...avatar} class={classes.avatar} />
-        {/if}
-
-        {#if title || description || titleSlot || descriptionSlot || (isVertical && hasActions)}
-            <div class={classes.wrapper}>
-                {#if titleSlot}
-                    {@render titleSlot()}
-                {:else if title}
-                    <div class={classes.title}>{title}</div>
-                {/if}
-
-                {#if descriptionSlot}
-                    {@render descriptionSlot()}
-                {:else if description}
-                    <div class={classes.description}>{description}</div>
-                {/if}
-
-                {#if isVertical}
-                    {@render actionsContent()}
-                {/if}
-            </div>
-        {/if}
-
-        {#if !isVertical}
-            {@render actionsContent()}
-        {/if}
-
-        {#if closeSlot}
-            <div class={classes.close}>
-                {@render closeSlot()}
-            </div>
-        {:else if closeButtonProps}
-            <Button
-                {...closeButtonProps}
-                icon={closeButtonProps.icon ?? resolvedCloseIcon}
-                variant={closeButtonProps.variant ?? 'link'}
-                color={closeButtonProps.color ?? 'surface'}
-                class={classes.close}
-                onclick={handleClose}
-                aria-label={closeButtonProps['aria-label'] ?? 'Close alert'}
-            />
-        {/if}
-    </svelte:element>
-{/if}

package/dist/Avatar/Avatar.svelte

@@ -1,114 +0,0 @@
-<script lang="ts" module>
-    import type { AvatarProps, AvatarSize, AvatarRounded } from './avatar.types.js'
-
-    export type Props = AvatarProps
-</script>
-
-<script lang="ts">
-    import { Avatar } from 'bits-ui'
-    import { avatarVariants, avatarDefaults, avatarSizePx } from './avatar.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { getContext } from 'svelte'
-    import Icon from '../Icon/Icon.svelte'
-    import Chip from '../Chip/Chip.svelte'
-
-    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>
-
-{#snippet avatarContent()}
-    <Avatar.Root {...restProps} bind:ref class={classes.root} {delayMs}>
-        {#if children}
-            {@render children()}
-        {:else}
-            {#if src}
-                <Avatar.Image
-                    {src}
-                    alt={alt ?? ''}
-                    class={classes.image}
-                    width={sizePx}
-                    height={sizePx}
-                    {loading}
-                />
-            {/if}
-            <Avatar.Fallback class={classes.fallback}>
-                {#if fallbackSnippet}
-                    {@render fallbackSnippet()}
-                {:else if initials}
-                    {initials}
-                {:else if icon}
-                    <Icon name={icon} class={classes.icon} />
-                {/if}
-            </Avatar.Fallback>
-        {/if}
-    </Avatar.Root>
-{/snippet}
-
-{#if chipProps}
-    <Chip {...chipProps}>
-        {@render avatarContent()}
-    </Chip>
-{:else}
-    {@render avatarContent()}
-{/if}

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -1,71 +0,0 @@
-<script lang="ts" module>
-    import type { AvatarGroupProps } from './avatar-group.types.js'
-
-    export type Props = AvatarGroupProps
-</script>
-
-<script lang="ts">
-    import { avatarGroupVariants, avatarGroupDefaults } from './avatar-group.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { setContext } from 'svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize, AvatarRounded } from '../Avatar/avatar.types.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>
-
-<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
-    {#if avatars}
-        {#if overflowCount > 0}
-            <Avatar text={`+${overflowCount}`} />
-        {/if}
-        {#each visibleAvatars as avatar, index (index)}
-            <Avatar {...avatar} />
-        {/each}
-    {:else if children}
-        {@render children()}
-    {/if}
-</svelte:element>

package/dist/Badge/Badge.svelte

@@ -1,79 +0,0 @@
-<script lang="ts" module>
-    import type { BadgeProps } from './badge.types.js'
-
-    export type Props = BadgeProps
-</script>
-
-<script lang="ts">
-    import { badgeVariants, badgeDefaults } from './badge.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.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>
-
-<svelte:element this={as} bind:this={ref} class={classes.base} {...restProps}>
-    {#if leading}
-        {@render leading()}
-    {:else if avatar}
-        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
-    {:else if leadingIcon}
-        <Icon name={leadingIcon} class={classes.leadingIcon} />
-    {/if}
-
-    {#if icon}
-        <Icon name={icon} class={classes.leadingIcon} />
-    {:else if !isIconOnly}
-        {#if label !== undefined}
-            <span class={classes.label}>{label}</span>
-        {:else if children}
-            <span class={classes.label}>{@render children()}</span>
-        {/if}
-    {/if}
-
-    {#if trailing}
-        {@render trailing()}
-    {:else if trailingIcon}
-        <Icon name={trailingIcon} class={classes.trailingIcon} />
-    {/if}
-</svelte:element>

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -1,101 +0,0 @@
-<script lang="ts" module>
-    import type { BreadcrumbProps } from './breadcrumb.types.js'
-
-    export type Props = BreadcrumbProps
-</script>
-
-<script lang="ts">
-    import type { ClassNameValue } from 'tailwind-merge'
-    import { breadcrumbVariants, breadcrumbDefaults } from './breadcrumb.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Link from '../Link/Link.svelte'
-
-    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()
-
-    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]
-        })
-    })
-
-    function getLinkClasses(
-        active: boolean,
-        disabled: boolean,
-        to: boolean,
-        itemClass?: ClassNameValue
-    ) {
-        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>
-
-<svelte:element
-    this={as}
-    bind:this={ref}
-    aria-label={as === 'nav' ? 'Breadcrumb' : undefined}
-    class={classes.root}
-    {...restProps}
->
-    <ol class={classes.list}>
-        {#each items as item, index (item.label ?? index)}
-            {@const active = index === items.length - 1}
-            {@const disabled = item.disabled ?? false}
-            {@const itemClasses = getLinkClasses(active, disabled, !!item.href, item.class)}
-
-            <li class={itemClasses.item}>
-                {#if itemSnippet}
-                    {@render itemSnippet({ item, index, active })}
-                {:else if active || !item.href}
-                    <span class={itemClasses.link} aria-current={active ? 'page' : undefined}>
-                        {#if item.icon}
-                            <Icon name={item.icon} class={itemClasses.linkLeadingIcon} />
-                        {/if}
-                        <span class={itemClasses.linkLabel}>{item.label}</span>
-                    </span>
-                {:else}
-                    <Link href={item.href} raw {disabled} class={itemClasses.link}>
-                        {#if item.icon}
-                            <Icon name={item.icon} class={itemClasses.linkLeadingIcon} />
-                        {/if}
-                        <span class={itemClasses.linkLabel}>{item.label}</span>
-                    </Link>
-                {/if}
-            </li>
-
-            {#if index < items.length - 1}
-                <li role="presentation" aria-hidden="true" class={classes.separator}>
-                    {#if separatorSnippet}
-                        {@render separatorSnippet()}
-                    {:else}
-                        <Icon name={separatorIcon} class={classes.separatorIcon} />
-                    {/if}
-                </li>
-            {/if}
-        {/each}
-    </ol>
-</svelte:element>

package/dist/Button/Button.svelte

@@ -1,177 +0,0 @@
-<script lang="ts" module>
-    import type { ButtonProps } from './button.types.js'
-
-    export type Props = ButtonProps
-</script>
-
-<script lang="ts">
-    import { buttonVariants, buttonDefaults } from './button.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { getContext } from 'svelte'
-    import { fieldGroupVariant } from '../FieldGroup/field-group.variants.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Link from '../Link/Link.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import type { FieldGroupVariantProps } from '../FieldGroup/field-group.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>
-
-<Link
-    {...restProps}
-    bind:ref
-    {href}
-    {type}
-    {external}
-    {active}
-    {exact}
-    {activeClass}
-    {inactiveClass}
-    raw
-    disabled={disabled || isLoading}
-    class={classes.base}
-    onclick={handleClick}
->
-    {#if leadingSlot}
-        {@render leadingSlot()}
-    {:else if isLeading && leadingIconName}
-        <Icon name={leadingIconName} class={classes.leadingIcon} />
-    {:else if avatar}
-        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
-    {/if}
-
-    {#if label}
-        <span class={classes.label}>{label}</span>
-    {:else if children}
-        <span class={classes.label}>{@render children()}</span>
-    {/if}
-
-    {#if trailingSlot}
-        {@render trailingSlot()}
-    {:else if isTrailing && trailingIconName}
-        <Icon name={trailingIconName} class={classes.trailingIcon} />
-    {/if}
-</Link>