sv5ui 2.1.0 → 2.3.0

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>

package/dist/Checkbox/Checkbox.svelte

@@ -1,161 +0,0 @@
-<script lang="ts" module>
-    import type { CheckboxProps } from './checkbox.types.js'
-
-    export type Props = CheckboxProps
-</script>
-
-<script lang="ts">
-    import { Checkbox, Label, useId } from 'bits-ui'
-    import { checkboxVariants, checkboxDefaults } from './checkbox.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('checkbox', checkboxDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        onCheckedChange,
-        indeterminate = $bindable(false),
-        onIndeterminateChange,
-        ui,
-        id,
-        name,
-        value,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        indicator = config.defaultVariants.indicator,
-        disabled = false,
-        required = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        icon = icons.check,
-        indeterminateIcon = 'lucide:minus',
-        label,
-        description,
-        labelSlot,
-        descriptionSlot,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const autoId = useId()
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const isDisabled = $derived(disabled || loading)
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const resolvedIcon = $derived(loading ? loadingIcon : indeterminate ? indeterminateIcon : icon)
-
-    let containerRef: HTMLElement | null = null
-
-    function handleCardClick(e: MouseEvent) {
-        if (isDisabled) return
-        // Don't re-click when the event originated from the checkbox button itself
-        if ((e.target as Element).closest('button')) return
-        containerRef?.querySelector('button')?.click()
-    }
-
-    const classes = $derived.by(() => {
-        const slots = checkboxVariants({
-            color: resolvedColor,
-            size: resolvedSize,
-            variant,
-            indicator,
-            loading,
-            required,
-            disabled: isDisabled ? true : undefined
-        })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] }),
-            container: slots.container({ class: [config.slots.container, ui?.container] }),
-            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-            label: slots.label({ class: [config.slots.label, ui?.label] }),
-            description: slots.description({
-                class: [config.slots.description, ui?.description]
-            })
-        }
-    })
-</script>
-
-<div
-    {...restProps}
-    bind:this={ref}
-    class={classes.root}
-    onclick={variant === 'card' ? handleCardClick : undefined}
->
-    <div bind:this={containerRef} class={classes.container}>
-        <Checkbox.Root
-            bind:checked
-            onCheckedChange={(val) => {
-                emit.onChange()
-                onCheckedChange?.(val)
-            }}
-            bind:indeterminate
-            {onIndeterminateChange}
-            onblur={() => emit.onBlur()}
-            onfocus={() => emit.onFocus()}
-            id={resolvedId}
-            name={resolvedName}
-            {value}
-            disabled={isDisabled}
-            {required}
-            aria-describedby={ariaDescribedBy}
-            aria-invalid={hasError ? true : undefined}
-            class={classes.base}
-        >
-            {#snippet children({ checked: isChecked, indeterminate: isIndeterminate })}
-                {#if isChecked || isIndeterminate || loading}
-                    <span class={classes.indicator}>
-                        {#if resolvedIcon}
-                            <Icon name={resolvedIcon} class={classes.icon} />
-                        {/if}
-                    </span>
-                {/if}
-            {/snippet}
-        </Checkbox.Root>
-    </div>
-
-    {#if label || description || labelSlot || descriptionSlot}
-        <div class={classes.wrapper}>
-            {#if labelSlot}
-                {@render labelSlot({ label })}
-            {:else if label}
-                {#if variant === 'card'}
-                    <span class={classes.label}>{label}</span>
-                {:else}
-                    <Label.Root for={resolvedId} class={classes.label}>
-                        {label}
-                    </Label.Root>
-                {/if}
-            {/if}
-
-            {#if descriptionSlot}
-                {@render descriptionSlot({ description })}
-            {:else if description}
-                <p class={classes.description}>{description}</p>
-            {/if}
-        </div>
-    {/if}
-</div>

package/dist/Chip/Chip.svelte

@@ -1,51 +0,0 @@
-<script lang="ts" module>
-    import type { ChipProps } from './chip.types.js'
-
-    export type Props = ChipProps
-</script>
-
-<script lang="ts">
-    import { chipVariants, chipDefaults } from './chip.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('chip', chipDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        text,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        position = config.defaultVariants.position,
-        inset = false,
-        standalone = false,
-        show = $bindable(true),
-        class: className,
-        children,
-        content,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = chipVariants({ color, size, position, inset, standalone })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] })
-        }
-    })
-</script>
-
-<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
-    {@render children?.()}
-
-    {#if show}
-        <span class={classes.base}>
-            {#if content}
-                {@render content()}
-            {:else if text !== undefined}
-                {text}
-            {/if}
-        </span>
-    {/if}
-</svelte:element>

package/dist/Collapsible/Collapsible.svelte

@@ -1,69 +0,0 @@
-<script lang="ts" module>
-    import type { CollapsibleProps } from './collapsible.types.js'
-
-    export type Props = CollapsibleProps
-</script>
-
-<script lang="ts">
-    import { Collapsible } from 'bits-ui'
-    import { collapsibleVariants, collapsibleDefaults } from './collapsible.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('collapsible', collapsibleDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        disabled = false,
-        trigger: triggerSlot,
-        content: contentSlot,
-        children,
-        ui,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const slots = $derived(collapsibleVariants({ disabled }))
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            content: slots.content({ class: [config.slots.content, u.content] })
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
-</script>
-
-<Collapsible.Root
-    {...restProps}
-    bind:ref
-    {open}
-    onOpenChange={handleOpenChange}
-    {onOpenChangeComplete}
-    {disabled}
-    class={classes.root}
->
-    {#if triggerSlot}
-        <Collapsible.Trigger>
-            {#snippet child({ props })}
-                {@render triggerSlot({ open, props })}
-            {/snippet}
-        </Collapsible.Trigger>
-    {/if}
-
-    {#if contentSlot}
-        <Collapsible.Content class={classes.content}>
-            {@render contentSlot()}
-        </Collapsible.Content>
-    {/if}
-
-    {#if children}
-        {@render children()}
-    {/if}
-</Collapsible.Root>

package/dist/Command/CommandTestWrapper.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-    import Command from './Command.svelte'
-    import type { CommandProps } from './command.types.js'
-
-    let {
-        ...props
-    }: Omit<
-        CommandProps,
-        'item' | 'itemLeading' | 'itemLabel' | 'itemTrailing' | 'empty' | 'footer'
-    > = $props()
-</script>
-
-<Command {...props} />

package/dist/Container/Container.svelte

@@ -1,21 +0,0 @@
-<script lang="ts" module>
-    import type { ContainerProps } from './container.types.js'
-
-    export type Props = ContainerProps
-</script>
-
-<script lang="ts">
-    import { containerVariants, containerDefaults } from './container.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('container', containerDefaults)
-    const slots = containerVariants()
-
-    let { as = 'div', ui, class: className, children, ...restProps }: Props = $props()
-
-    const rootClass = $derived(slots.root({ class: [config.slots.root, className, ui?.root] }))
-</script>
-
-<svelte:element this={as} class={rootClass} {...restProps}>
-    {@render children?.()}
-</svelte:element>