sv5ui 2.1.0 → 2.2.0

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>

package/dist/Card/Card.svelte

@@ -1,54 +0,0 @@
-<script lang="ts" module>
-    import type { CardProps } from './card.types.js'
-
-    export type Props = CardProps
-</script>
-
-<script lang="ts">
-    import { cardVariants, cardDefaults } from './card.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('card', cardDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        variant = config.defaultVariants.variant,
-        class: className,
-        header,
-        children,
-        footer,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = cardVariants({ variant })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            header: slots.header({ class: [config.slots.header, ui?.header] }),
-            body: slots.body({ class: [config.slots.body, ui?.body] }),
-            footer: slots.footer({ class: [config.slots.footer, ui?.footer] })
-        }
-    })
-</script>
-
-<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
-    {#if header}
-        <div class={classes.header}>
-            {@render header()}
-        </div>
-    {/if}
-
-    {#if children}
-        <div class={classes.body}>
-            {@render children()}
-        </div>
-    {/if}
-
-    {#if footer}
-        <div class={classes.footer}>
-            {@render footer()}
-        </div>
-    {/if}
-</svelte:element>

package/dist/Carousel/Carousel.svelte

@@ -1,279 +0,0 @@
-<script lang="ts" module>
-    import type { CarouselAutoplayOptions, CarouselProps } from './carousel.types.js'
-
-    export type Props<T = unknown> = CarouselProps<T>
-</script>
-
-<script lang="ts" generics="T = unknown">
-    import useEmblaCarousel from 'embla-carousel-svelte'
-    import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
-    import Autoplay from 'embla-carousel-autoplay'
-    import Fade from 'embla-carousel-fade'
-    import ClassNames from 'embla-carousel-class-names'
-    import { untrack } from 'svelte'
-    import { carouselVariants, carouselDefaults } from './carousel.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('carousel', carouselDefaults)
-
-    let {
-        ref = $bindable(null),
-        api = $bindable<EmblaCarouselType | undefined>(),
-        items,
-        index = $bindable(0),
-        onIndexChange,
-        onSettle,
-        slidesToShow = 1,
-        loop = false,
-        align = 'start',
-        orientation = 'horizontal',
-        draggable = true,
-        dragFree = false,
-        slidesToScroll = 1,
-        autoplay = false,
-        fade = false,
-        classNames = false,
-        breakpoints,
-        plugins: extraPlugins,
-        options: optionsOverride,
-        arrows = true,
-        dots = true,
-        prevIcon,
-        nextIcon,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        variant = config.defaultVariants.variant,
-        class: className,
-        ui,
-        slide: slideSnippet,
-        dot: dotSnippet,
-        prevSlot,
-        nextSlot,
-        children
-    }: Props<T> = $props()
-
-    let selectedIndex = $state(0)
-    let scrollSnaps = $state<number[]>([])
-    let canScrollPrev = $state(false)
-    let canScrollNext = $state(false)
-
-    const resolvedPrevIcon = $derived(
-        prevIcon ?? (orientation === 'vertical' ? 'lucide:chevron-up' : 'lucide:chevron-left')
-    )
-    const resolvedNextIcon = $derived(
-        nextIcon ?? (orientation === 'vertical' ? 'lucide:chevron-down' : 'lucide:chevron-right')
-    )
-
-    function buildAutoplay(opts: CarouselAutoplayOptions) {
-        return Autoplay({
-            delay: opts.delay ?? 4000,
-            stopOnInteraction: opts.stopOnInteraction ?? false,
-            stopOnMouseEnter: opts.stopOnMouseEnter ?? true,
-            stopOnFocusIn: opts.stopOnFocusIn ?? true,
-            stopOnLastSnap: opts.stopOnLastSnap ?? false,
-            playOnInit: opts.playOnInit ?? true
-        })
-    }
-
-    const plugins = $derived.by<EmblaPluginType[]>(() => {
-        const list: EmblaPluginType[] = []
-        if (autoplay) list.push(buildAutoplay(typeof autoplay === 'object' ? autoplay : {}))
-        if (fade) list.push(Fade())
-        if (classNames) list.push(ClassNames())
-        if (extraPlugins) list.push(...extraPlugins)
-        return list
-    })
-
-    const emblaOptions = $derived.by<EmblaOptionsType>(() => ({
-        loop,
-        align,
-        axis: orientation === 'vertical' ? 'y' : 'x',
-        watchDrag: draggable,
-        dragFree,
-        slidesToScroll,
-        breakpoints,
-        ...optionsOverride
-    }))
-
-    const dotIndices = $derived(scrollSnaps.map((_, i) => i))
-
-    function classListHas(cls: unknown, re: RegExp): boolean {
-        if (typeof cls === 'string') return re.test(cls)
-        if (Array.isArray(cls)) return cls.some((c) => classListHas(c, re))
-        return false
-    }
-
-    const userOverridesBasis = $derived(classListHas(ui?.slide, /\bbasis-/))
-    const containerStyle = $derived(
-        orientation === 'vertical'
-            ? 'display: flex; flex-direction: column; touch-action: pan-x;'
-            : 'display: flex; flex-direction: row; touch-action: pan-y;'
-    )
-    const slideStyle = $derived.by(() => {
-        if (userOverridesBasis) return undefined
-        const minDim = orientation === 'vertical' ? 'min-height' : 'min-width'
-        return `flex: 0 0 calc(100% / ${slidesToShow}); ${minDim}: 0;`
-    })
-
-    const variantSlots = $derived(carouselVariants({ orientation, size, color, variant }))
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        viewport: variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] }),
-        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
-        slide: variantSlots.slide({ class: [config.slots.slide, ui?.slide] }),
-        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
-        arrowPrev: variantSlots.arrowPrev({ class: [config.slots.arrowPrev, ui?.arrowPrev] }),
-        arrowNext: variantSlots.arrowNext({ class: [config.slots.arrowNext, ui?.arrowNext] }),
-        dots: variantSlots.dots({ class: [config.slots.dots, ui?.dots] }),
-        dot: variantSlots.dot({ class: [config.slots.dot, ui?.dot] })
-    })
-
-    function syncFromApi(embla: EmblaCarouselType) {
-        const newIndex = embla.selectedScrollSnap()
-        selectedIndex = newIndex
-        scrollSnaps = embla.scrollSnapList()
-        canScrollPrev = embla.canScrollPrev()
-        canScrollNext = embla.canScrollNext()
-        if (newIndex !== index) {
-            index = newIndex
-            onIndexChange?.(newIndex)
-        }
-    }
-
-    function handleEmblaInit(event: CustomEvent<EmblaCarouselType>) {
-        const embla = event.detail
-        api = embla
-        syncFromApi(embla)
-        embla.on('select', () => syncFromApi(embla))
-        embla.on('reInit', () => syncFromApi(embla))
-        if (onSettle) embla.on('settle', () => onSettle(embla))
-    }
-
-    $effect(() => {
-        if (!api) return
-        const desired = index
-        if (desired !== untrack(() => selectedIndex)) {
-            api.scrollTo(desired)
-        }
-    })
-
-    function scrollPrev() {
-        if (!api) return
-        api.scrollPrev()
-        syncFromApi(api)
-    }
-
-    function scrollNext() {
-        if (!api) return
-        api.scrollNext()
-        syncFromApi(api)
-    }
-
-    function scrollTo(i: number) {
-        if (!api) return
-        api.scrollTo(i)
-        syncFromApi(api)
-    }
-</script>
-
-{#snippet defaultPrev()}
-    <Button
-        {color}
-        {size}
-        {variant}
-        icon={resolvedPrevIcon}
-        square
-        disabled={!canScrollPrev}
-        aria-label="Previous slide"
-        class={[classes.arrow, classes.arrowPrev]}
-        onclick={scrollPrev}
-    />
-{/snippet}
-
-{#snippet defaultNext()}
-    <Button
-        {color}
-        {size}
-        {variant}
-        icon={resolvedNextIcon}
-        square
-        disabled={!canScrollNext}
-        aria-label="Next slide"
-        class={[classes.arrow, classes.arrowNext]}
-        onclick={scrollNext}
-    />
-{/snippet}
-
-{#snippet defaultDot(i: number, selected: boolean)}
-    <button
-        type="button"
-        class={classes.dot}
-        data-selected={selected ? '' : undefined}
-        aria-label={`Go to slide ${i + 1}`}
-        aria-current={selected ? 'true' : undefined}
-        onclick={() => scrollTo(i)}
-    ></button>
-{/snippet}
-
-<div
-    bind:this={ref}
-    class={classes.root}
-    data-orientation={orientation}
-    style:--sv-slides={slidesToShow}
->
-    <div
-        class={classes.viewport}
-        use:useEmblaCarousel={{ options: emblaOptions, plugins }}
-        onemblaInit={handleEmblaInit}
-    >
-        <div class={classes.container} style={containerStyle}>
-            {#if items}
-                {#each items as item, i (i)}
-                    <div class={classes.slide} style={slideStyle} data-index={i}>
-                        {#if slideSnippet}
-                            {@render slideSnippet({
-                                item,
-                                index: i,
-                                selected: i === selectedIndex
-                            })}
-                        {:else}
-                            {String(item)}
-                        {/if}
-                    </div>
-                {/each}
-            {:else if children}
-                {@render children()}
-            {/if}
-        </div>
-    </div>
-
-    {#if arrows}
-        {#if prevSlot}
-            {@render prevSlot({ canScroll: canScrollPrev, scroll: scrollPrev })}
-        {:else}
-            {@render defaultPrev()}
-        {/if}
-        {#if nextSlot}
-            {@render nextSlot({ canScroll: canScrollNext, scroll: scrollNext })}
-        {:else}
-            {@render defaultNext()}
-        {/if}
-    {/if}
-
-    {#if dots && scrollSnaps.length > 1}
-        <div class={classes.dots} role="tablist">
-            {#each dotIndices as i (i)}
-                {#if dotSnippet}
-                    {@render dotSnippet({
-                        index: i,
-                        selected: i === selectedIndex,
-                        select: () => scrollTo(i)
-                    })}
-                {:else}
-                    {@render defaultDot(i, i === selectedIndex)}
-                {/if}
-            {/each}
-        </div>
-    {/if}
-</div>