sv5ui 2.1.0 → 2.3.0

package/dist/Separator/Separator.svelte

@@ -1,77 +0,0 @@
-<script lang="ts" module>
-    import type { SeparatorProps } from './separator.types.js'
-
-    export type Props = SeparatorProps
-</script>
-
-<script lang="ts">
-    import { Separator } from 'bits-ui'
-    import { separatorVariants, separatorDefaults } from './separator.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('separator', separatorDefaults)
-
-    let {
-        ref = $bindable(null),
-        ui,
-        label,
-        icon,
-        avatar,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        type = config.defaultVariants.type,
-        orientation = config.defaultVariants.orientation,
-        position = config.defaultVariants.position,
-        decorative = false,
-        class: className,
-        content,
-        ...restProps
-    }: Props = $props()
-
-    const hasContent = $derived(!!label || !!icon || !!avatar || !!content)
-
-    const classes = $derived.by(() => {
-        const slots = separatorVariants({ color, size, type, orientation })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            border: slots.border({ class: [config.slots.border, ui?.border] }),
-            container: slots.container({ class: [config.slots.container, ui?.container] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
-            label: slots.label({ class: [config.slots.label, ui?.label] })
-        }
-    })
-</script>
-
-<Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>
-    {#if hasContent}
-        {#if position !== 'start'}
-            <div class={classes.border}></div>
-        {/if}
-
-        <div class={classes.container}>
-            {#if content}
-                {@render content()}
-            {:else if avatar}
-                <Avatar
-                    {...avatar}
-                    size={avatar.size ?? (config.avatarSize as AvatarSize)}
-                    class={classes.avatar}
-                />
-            {:else if icon}
-                <Icon name={icon} class={classes.icon} />
-            {:else if label}
-                <span class={classes.label}>{label}</span>
-            {/if}
-        </div>
-
-        {#if position !== 'end'}
-            <div class={classes.border}></div>
-        {/if}
-    {:else}
-        <div class={classes.border}></div>
-    {/if}
-</Separator.Root>

package/dist/Skeleton/Skeleton.svelte

@@ -1,39 +0,0 @@
-<script lang="ts" module>
-    import type { SkeletonProps } from './skeleton.types.js'
-
-    export type Props = SkeletonProps
-</script>
-
-<script lang="ts">
-    import { skeletonVariants, skeletonDefaults } from './skeleton.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('skeleton', skeletonDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const slots = skeletonVariants()
-    const classes = $derived({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] })
-    })
-</script>
-
-<svelte:element
-    this={as}
-    bind:this={ref}
-    class={classes.root}
-    role="alert"
-    aria-busy="true"
-    aria-label="loading"
-    aria-live="polite"
-    {...restProps}
->
-    {@render children?.()}
-</svelte:element>

package/dist/Slider/Slider.svelte

@@ -1,129 +0,0 @@
-<script lang="ts" module>
-    import type { SliderProps } from './slider.types.js'
-
-    export type Props = SliderProps
-</script>
-
-<script lang="ts">
-    import { Slider, useId } from 'bits-ui'
-    import { sliderVariants, sliderDefaults } from './slider.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('slider', sliderDefaults)
-
-    let {
-        ref = $bindable(null),
-        id,
-        value = $bindable(0),
-        onValueChange,
-        onValueCommit,
-        min = 0,
-        max = 100,
-        step = 1,
-        orientation = config.defaultVariants.orientation,
-        disabled = false,
-        autoSort = true,
-        dir,
-        thumbPositioning,
-        trackPadding,
-        color = config.defaultVariants.color,
-        size,
-        tooltip = false,
-        name,
-        class: className,
-        ui,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const autoId = useId()
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const asArray = $derived(Array.isArray(value) ? value : [value ?? min])
-    const isMultiple = $derived(Array.isArray(value))
-
-    function handleValueChange(v: number[]) {
-        value = isMultiple ? v : (v[0] ?? min)
-        emit.onInput()
-        onValueChange?.(value)
-    }
-
-    function handleValueCommit(v: number[]) {
-        emit.onChange()
-        onValueCommit?.(isMultiple ? v : (v[0] ?? min))
-    }
-
-    const slots = $derived(
-        sliderVariants({ color: resolvedColor, size: resolvedSize, orientation, disabled })
-    )
-
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            base: slots.base({ class: [config.slots.base, u.base] }),
-            track: slots.track({ class: [config.slots.track, u.track] }),
-            range: slots.range({ class: [config.slots.range, u.range] }),
-            thumb: slots.thumb({ class: [config.slots.thumb, u.thumb] }),
-            tooltip: slots.tooltip({ class: [config.slots.tooltip, u.tooltip] })
-        }
-    })
-</script>
-
-<div bind:this={ref} class={classes.root} {...restProps}>
-    {#if resolvedName}
-        {#each asArray as v, i (i)}
-            <input type="hidden" name={resolvedName} value={v} />
-        {/each}
-    {/if}
-
-    <Slider.Root
-        type="multiple"
-        id={resolvedId}
-        value={asArray}
-        {min}
-        {max}
-        {step}
-        {disabled}
-        {orientation}
-        {autoSort}
-        {dir}
-        {thumbPositioning}
-        {trackPadding}
-        aria-describedby={ariaDescribedBy}
-        onValueChange={handleValueChange}
-        onValueCommit={handleValueCommit}
-        class={classes.base}
-    >
-        {#snippet children({ thumbItems })}
-            <span data-slider-track class={classes.track}>
-                <Slider.Range class={classes.range} />
-            </span>
-
-            {#each thumbItems as item (item.index)}
-                <Slider.Thumb index={item.index} class={classes.thumb} />
-                {#if tooltip}
-                    <Slider.ThumbLabel index={item.index} class={classes.tooltip}>
-                        {item.value}
-                    </Slider.ThumbLabel>
-                {/if}
-            {/each}
-        {/snippet}
-    </Slider.Root>
-</div>

package/dist/Stepper/Stepper.svelte

@@ -1,290 +0,0 @@
-<script lang="ts" module>
-    import type { StepperProps } from './stepper.types.js'
-
-    export type Props = StepperProps
-</script>
-
-<script lang="ts">
-    import type { ClassNameValue } from 'tailwind-merge'
-    import { untrack } from 'svelte'
-    import { stepperVariants, stepperDefaults } from './stepper.variants.js'
-    import type { StepperItem, StepperItemState, StepperApi } from './stepper.types.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-
-    const config = getComponentConfig('stepper', stepperDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        items = [],
-        value = $bindable(),
-        defaultValue,
-        onValueChange,
-        api = $bindable(),
-        linear = true,
-        disabled = false,
-        orientation = config.defaultVariants.orientation ?? 'horizontal',
-        size = config.defaultVariants.size ?? 'md',
-        color = config.defaultVariants.color ?? 'primary',
-        content: showContent = true,
-        class: className,
-        ui,
-        indicator: indicatorSlot,
-        titleSlot,
-        descriptionSlot,
-        body,
-        ...restProps
-    }: Props = $props()
-
-    if (value === undefined) {
-        value = untrack(() => defaultValue ?? items[0]?.value ?? 0)
-    }
-
-    let triggers: (HTMLButtonElement | null)[] = $state([])
-
-    function getItemValue(item: StepperItem, index: number): string | number {
-        return item.value ?? index
-    }
-
-    const activeIndex = $derived(items.findIndex((item, i) => getItemValue(item, i) === value))
-
-    function getState(index: number): StepperItemState {
-        if (activeIndex === -1) return 'pending'
-        if (index === activeIndex) return 'active'
-        return index < activeIndex ? 'completed' : 'pending'
-    }
-
-    function canActivate(index: number): boolean {
-        if (disabled || items[index]?.disabled) return false
-        if (!linear) return true
-        return index <= activeIndex + 1
-    }
-
-    function setValue(next: string | number) {
-        if (next === value) return
-        value = next
-        onValueChange?.(next)
-    }
-
-    function handleClick(item: StepperItem, index: number) {
-        if (!canActivate(index)) return
-        setValue(getItemValue(item, index))
-    }
-
-    function findEnabled(start: number, dir: 1 | -1): number {
-        for (let i = start; i >= 0 && i < items.length; i += dir) {
-            if (!items[i]?.disabled) return i
-        }
-        return -1
-    }
-
-    function handleKeydown(e: KeyboardEvent, index: number) {
-        const horizontal = orientation === 'horizontal'
-        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown'
-        const prevKey = horizontal ? 'ArrowLeft' : 'ArrowUp'
-
-        let target = -1
-        if (e.key === nextKey) target = findEnabled(index + 1, 1)
-        else if (e.key === prevKey) target = findEnabled(index - 1, -1)
-        else if (e.key === 'Home') target = findEnabled(0, 1)
-        else if (e.key === 'End') target = findEnabled(items.length - 1, -1)
-        else return
-
-        e.preventDefault()
-        if (target >= 0) triggers[target]?.focus()
-    }
-
-    const apiInstance: StepperApi = {
-        next() {
-            if (activeIndex >= items.length - 1) return
-            const target = items[activeIndex + 1]
-            if (!target) return
-            setValue(getItemValue(target, activeIndex + 1))
-        },
-        prev() {
-            if (activeIndex <= 0) return
-            const target = items[activeIndex - 1]
-            if (!target) return
-            setValue(getItemValue(target, activeIndex - 1))
-        },
-        goTo(next) {
-            setValue(next)
-        },
-        get hasNext() {
-            return activeIndex >= 0 && activeIndex < items.length - 1
-        },
-        get hasPrev() {
-            return activeIndex > 0
-        },
-        get activeIndex() {
-            return activeIndex
-        }
-    }
-
-    api = apiInstance
-
-    const variantSlots = $derived(stepperVariants({ orientation, size, color }))
-
-    type ItemUi = StepperItem['ui']
-
-    const classes = $derived.by(() => {
-        const c = config.slots
-        const slots = variantSlots
-        const u = ui ?? {}
-
-        const _item = slots.item({ class: [c.item, u.item] })
-        const _trigger = slots.trigger({ class: [c.trigger, u.trigger] })
-        const _container = slots.container({ class: [c.container, u.container] })
-        const _indicator = slots.indicator({ class: [c.indicator, u.indicator] })
-        const _separator = slots.separator({ class: [c.separator, u.separator] })
-        const _wrapper = slots.wrapper({ class: [c.wrapper, u.wrapper] })
-        const _title = slots.title({ class: [c.title, u.title] })
-        const _description = slots.description({ class: [c.description, u.description] })
-        const _content = slots.content({ class: [c.content, u.content] })
-
-        return {
-            root: slots.root({ class: [c.root, className, u.root] }),
-            list: slots.list({ class: [c.list, u.list] }),
-            item: (itemClass?: ClassNameValue, itemUi?: ItemUi) =>
-                itemClass || itemUi
-                    ? slots.item({ class: [c.item, u.item, itemUi?.item, itemClass] })
-                    : _item,
-            trigger: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.trigger({ class: [c.trigger, u.trigger, itemUi.trigger] })
-                    : _trigger,
-            container: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.container({ class: [c.container, u.container, itemUi.container] })
-                    : _container,
-            indicator: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.indicator({ class: [c.indicator, u.indicator, itemUi.indicator] })
-                    : _indicator,
-            separator: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.separator({ class: [c.separator, u.separator, itemUi.separator] })
-                    : _separator,
-            wrapper: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.wrapper({ class: [c.wrapper, u.wrapper, itemUi.wrapper] })
-                    : _wrapper,
-            title: (itemUi?: ItemUi) =>
-                itemUi ? slots.title({ class: [c.title, u.title, itemUi.title] }) : _title,
-            description: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.description({
-                          class: [c.description, u.description, itemUi.description]
-                      })
-                    : _description,
-            content: (itemUi?: ItemUi) =>
-                itemUi ? slots.content({ class: [c.content, u.content, itemUi.content] }) : _content
-        }
-    })
-</script>
-
-<svelte:element
-    this={as}
-    bind:this={ref}
-    class={classes.root}
-    data-orientation={orientation}
-    {...restProps}
->
-    <ol class={classes.list}>
-        {#each items as item, index (item.value ?? index)}
-            {@const state = getState(index)}
-            {@const number = index + 1}
-            {@const active = state === 'active'}
-            {@const itemDisabled = disabled || item.disabled || !canActivate(index)}
-            {@const slotProps = { item, index, number, state, active }}
-            {@const hasVisibleText = !!(
-                titleSlot ||
-                descriptionSlot ||
-                item.title ||
-                item.description
-            )}
-            <li
-                class={classes.item(item.class, item.ui)}
-                data-state={state}
-                data-orientation={orientation}
-                data-stepper-item=""
-            >
-                <button
-                    type="button"
-                    bind:this={triggers[index]}
-                    class={classes.trigger(item.ui)}
-                    disabled={itemDisabled}
-                    aria-current={active ? 'step' : undefined}
-                    aria-label={hasVisibleText ? undefined : `Step ${number}`}
-                    tabindex={active ? 0 : -1}
-                    onclick={() => handleClick(item, index)}
-                    onkeydown={(e) => handleKeydown(e, index)}
-                >
-                    <span class={classes.container(item.ui)}>
-                        {#if indicatorSlot}
-                            {@render indicatorSlot(slotProps)}
-                        {:else}
-                            <span
-                                class={classes.indicator(item.ui)}
-                                data-stepper-indicator=""
-                                aria-hidden="true"
-                            >
-                                {#if item.icon}
-                                    <Icon name={item.icon} />
-                                {:else if state === 'completed'}
-                                    <Icon name="lucide:check" />
-                                {:else}
-                                    {number}
-                                {/if}
-                            </span>
-                        {/if}
-
-                        {#if index < items.length - 1}
-                            <span
-                                class={classes.separator(item.ui)}
-                                data-stepper-separator=""
-                                aria-hidden="true"
-                            ></span>
-                        {/if}
-                    </span>
-
-                    {#if hasVisibleText}
-                        <span class={classes.wrapper(item.ui)}>
-                            {#if titleSlot}
-                                {@render titleSlot(slotProps)}
-                            {:else if item.title}
-                                <span class={classes.title(item.ui)}>{item.title}</span>
-                            {/if}
-
-                            {#if descriptionSlot}
-                                {@render descriptionSlot(slotProps)}
-                            {:else if item.description}
-                                <span class={classes.description(item.ui)}>
-                                    {item.description}
-                                </span>
-                            {/if}
-                        </span>
-                    {/if}
-                </button>
-            </li>
-        {/each}
-    </ol>
-
-    {#if showContent}
-        {#each items as item, index (item.value ?? index)}
-            {@const state = getState(index)}
-            {#if state === 'active' && (body || item.content !== undefined)}
-                {@const number = index + 1}
-                {@const slotProps = { item, index, number, state, active: true }}
-                <div class={classes.content(item.ui)} role="region" data-stepper-content="">
-                    {#if body}
-                        {@render body(slotProps)}
-                    {:else}
-                        {item.content}
-                    {/if}
-                </div>
-            {/if}
-        {/each}
-    {/if}
-</svelte:element>

package/dist/Switch/Switch.svelte

@@ -1,150 +0,0 @@
-<script lang="ts" module>
-    import type { SwitchProps } from './switch.types.js'
-
-    export type Props = SwitchProps
-</script>
-
-<script lang="ts">
-    import { Switch, Label, useId } from 'bits-ui'
-    import { switchVariants, switchDefaults } from './switch.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('switch', switchDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        onCheckedChange,
-        ui,
-        id,
-        name,
-        value,
-        color = config.defaultVariants.color,
-        size,
-        disabled = false,
-        required = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        checkedIcon,
-        uncheckedIcon,
-        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 hasCheckedIcon = $derived(loading || !!checkedIcon)
-    const hasUncheckedIcon = $derived(loading || !!uncheckedIcon)
-    const checkedIconName = $derived(loading ? loadingIcon : checkedIcon)
-    const uncheckedIconName = $derived(loading ? loadingIcon : uncheckedIcon)
-
-    const variantOpts = $derived({
-        color: resolvedColor,
-        size: resolvedSize,
-        loading,
-        required,
-        disabled: isDisabled ? true : undefined
-    })
-
-    const slots = $derived(switchVariants(variantOpts))
-
-    const classes = $derived({
-        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] }),
-        thumb: slots.thumb({ class: [config.slots.thumb, ui?.thumb] }),
-        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] })
-    })
-
-    const iconClasses = $derived.by(() => {
-        if (!hasCheckedIcon && !hasUncheckedIcon)
-            return { checked: undefined, unchecked: undefined }
-        const iconUiClass = [config.slots.icon, ui?.icon]
-        return {
-            checked: hasCheckedIcon
-                ? slots.icon({ class: iconUiClass, checked: true, unchecked: loading })
-                : undefined,
-            unchecked:
-                hasUncheckedIcon && !loading
-                    ? slots.icon({ class: iconUiClass, unchecked: true })
-                    : undefined
-        }
-    })
-</script>
-
-<div {...restProps} bind:this={ref} class={classes.root}>
-    <div class={classes.container}>
-        <Switch.Root
-            bind:checked
-            onCheckedChange={(val) => {
-                emit.onChange()
-                onCheckedChange?.(val)
-            }}
-            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}
-        >
-            <Switch.Thumb class={classes.thumb}>
-                {#if hasCheckedIcon && checkedIconName}
-                    <Icon name={checkedIconName} class={iconClasses.checked} />
-                {/if}
-                {#if hasUncheckedIcon && uncheckedIconName && !loading}
-                    <Icon name={uncheckedIconName} class={iconClasses.unchecked} />
-                {/if}
-            </Switch.Thumb>
-        </Switch.Root>
-    </div>
-
-    {#if label || description || labelSlot || descriptionSlot}
-        <div class={classes.wrapper}>
-            {#if labelSlot}
-                {@render labelSlot({ label })}
-            {:else if label}
-                <Label.Root for={resolvedId} class={classes.label}>
-                    {label}
-                </Label.Root>
-            {/if}
-
-            {#if descriptionSlot}
-                {@render descriptionSlot({ description })}
-            {:else if description}
-                <p class={classes.description}>{description}</p>
-            {/if}
-        </div>
-    {/if}
-</div>