sv5ui 2.0.0 → 2.2.0

package/dist/Popover/Popover.svelte

@@ -1,122 +0,0 @@
-<script lang="ts" module>
-    import type { PopoverProps } from './popover.types.js'
-
-    export type Props = PopoverProps
-</script>
-
-<script lang="ts">
-    import { Popover } from 'bits-ui'
-    import { popoverVariants, popoverDefaults } from './popover.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('popover', popoverDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        side = 'bottom',
-        sideOffset = 8,
-        align = 'center',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        sticky = 'partial',
-        hideWhenDetached = false,
-        trapFocus = true,
-        preventScroll = false,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        arrow = false,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        ...restProps
-    }: Props = $props()
-
-    const variantSlots = $derived(popoverVariants({ transition }))
-    const classes = $derived({
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
-    })
-
-    const arrowProps = $derived.by(() => {
-        if (typeof arrow === 'object') {
-            return { width: 12, height: 6, ...arrow }
-        }
-        return { width: 12, height: 6 }
-    })
-
-    const dismissBehavior = $derived(dismissible ? ('close' as const) : ('ignore' as const))
-
-    function close() {
-        open = false
-    }
-</script>
-
-{#snippet popoverContentEl()}
-    <Popover.Content
-        bind:ref
-        {side}
-        {sideOffset}
-        {align}
-        {alignOffset}
-        {avoidCollisions}
-        {collisionBoundary}
-        {collisionPadding}
-        {sticky}
-        {hideWhenDetached}
-        {trapFocus}
-        {preventScroll}
-        escapeKeydownBehavior={dismissBehavior}
-        interactOutsideBehavior={dismissBehavior}
-        {onOpenAutoFocus}
-        {onCloseAutoFocus}
-        {onEscapeKeydown}
-        {onInteractOutside}
-        {forceMount}
-        class={[classes.content, !children ? className : undefined]}
-        {...restProps}
-    >
-        {#if contentSlot}
-            {@render contentSlot({ open, close })}
-        {/if}
-
-        {#if arrow}
-            <Popover.Arrow
-                width={arrowProps.width}
-                height={arrowProps.height}
-                class={classes.arrow}
-            />
-        {/if}
-    </Popover.Content>
-{/snippet}
-
-<Popover.Root bind:open {onOpenChange} {onOpenChangeComplete}>
-    {#if children}
-        <Popover.Trigger>
-            {#snippet child({ props })}
-                <span {...props} class={className as string}>
-                    {@render children({ open })}
-                </span>
-            {/snippet}
-        </Popover.Trigger>
-    {/if}
-
-    {#if portal}
-        <Popover.Portal>
-            {@render popoverContentEl()}
-        </Popover.Portal>
-    {:else}
-        {@render popoverContentEl()}
-    {/if}
-</Popover.Root>

package/dist/Progress/Progress.svelte

@@ -1,127 +0,0 @@
-<script lang="ts" module>
-    import type { ProgressProps } from './progress.types.js'
-
-    export type Props = ProgressProps
-</script>
-
-<script lang="ts">
-    import { Progress } from 'bits-ui'
-    import { progressVariants, progressDefaults } from './progress.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('progress', progressDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = null,
-        max = 100,
-        status = false,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        orientation = config.defaultVariants.orientation,
-        inverted = false,
-        animation = config.defaultVariants.animation,
-        ui,
-        class: className,
-        statusSlot,
-        stepSlot,
-        ...restProps
-    }: Props = $props()
-
-    const isIndeterminate = $derived(value === null)
-    const hasSteps = $derived(Array.isArray(max))
-
-    const realMax = $derived.by(() => {
-        if (isIndeterminate || !max) return undefined
-        if (Array.isArray(max)) return max.length - 1
-        return Number(max)
-    })
-
-    const percent = $derived.by(() => {
-        if (isIndeterminate) return undefined
-        if (value! < 0) return 0
-        if (value! > (realMax ?? 100)) return 100
-        return Math.round((value! / (realMax ?? 100)) * 100)
-    })
-
-    const indicatorStyle = $derived.by(() => {
-        if (percent === undefined) return ''
-        const offset = 100 - percent
-        if (orientation === 'vertical') {
-            return `transform: translateY(${inverted ? '' : '-'}${offset}%);`
-        }
-        return `transform: translateX(${inverted ? '' : '-'}${offset}%);`
-    })
-
-    const statusStyle = $derived.by(() => {
-        const val = `${Math.max(percent ?? 0, 0)}%`
-        return orientation === 'vertical' ? `height: ${val};` : `width: ${val};`
-    })
-
-    function stepVariant(index: number): 'active' | 'first' | 'last' | 'other' {
-        const isActive = index === Number(value)
-        const isFirst = index === 0
-        const isLast = index === realMax
-
-        if (isActive && !isFirst) return 'active'
-        if (isFirst && isActive) return 'first'
-        if (isLast && isActive) return 'last'
-        return 'other'
-    }
-
-    const classes = $derived.by(() => {
-        const slots = progressVariants({ animation, color, size, orientation, inverted })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] }),
-            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-            status: slots.status({ class: [config.slots.status, ui?.status] }),
-            steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
-        }
-    })
-
-    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
-</script>
-
-<Progress.Root
-    bind:ref
-    value={value ?? undefined}
-    max={realMax}
-    class={classes.root}
-    data-orientation={orientation}
-    {...restProps}
->
-    {#if !isIndeterminate && status}
-        <div class={classes.status} style={statusStyle}>
-            {#if statusSlot}
-                {@render statusSlot({ percent: percent ?? 0 })}
-            {:else}
-                {percent}%
-            {/if}
-        </div>
-    {/if}
-
-    <div class={classes.base}>
-        <div class={classes.indicator} data-state={state} style={indicatorStyle}></div>
-    </div>
-
-    {#if hasSteps && Array.isArray(max)}
-        <div class={classes.steps}>
-            {#each max as step, index (index)}
-                {@const stepClass = progressVariants({
-                    size,
-                    orientation,
-                    inverted,
-                    step: stepVariant(index)
-                }).step({ class: [config.slots.step, ui?.step] })}
-                <div class={stepClass}>
-                    {#if stepSlot}
-                        {@render stepSlot({ step, index })}
-                    {:else}
-                        {step}
-                    {/if}
-                </div>
-            {/each}
-        </div>
-    {/if}
-</Progress.Root>

package/dist/Select/Select.svelte

@@ -1,461 +0,0 @@
-<script lang="ts" module>
-    import type { SelectProps, SelectItem, SelectItemType } from './select.types.js'
-
-    export type Props = SelectProps
-</script>
-
-<script lang="ts">
-    import { Select } from 'bits-ui'
-    import { selectVariants, selectDefaults } from './select.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { getContext } from 'svelte'
-    import {
-        fieldGroupVariantWithRoot,
-        type FieldGroupVariantProps
-    } from '../FieldGroup/field-group.variants.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('select', selectDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        open = $bindable(false),
-        onOpenChange,
-        items = [],
-        placeholder,
-        name,
-        required = false,
-        disabled = false,
-        multiple = false,
-        separator = ', ',
-        ui,
-        id,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        highlight,
-        loading = false,
-        loadingIcon = icons.loading,
-        icon,
-        leadingIcon,
-        trailingIcon = icons.chevronDown,
-        selectedIcon = icons.check,
-        avatar,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        side = config.defaultVariants.side ?? 'bottom',
-        sideOffset = 4,
-        align = 'start',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        loop = true,
-        class: className,
-        leadingSlot,
-        trailingSlot,
-        item: itemSlot,
-        itemLeading,
-        itemLabel: itemLabelSlot,
-        itemTrailing,
-        selected: selectedSlot,
-        content: contentSlot,
-        ...restProps
-    }: Props = $props()
-
-    // ---- Form context ----
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const fieldGroupContext = getContext<
-        | {
-              orientation: NonNullable<FieldGroupVariantProps['orientation']>
-              size: NonNullable<FieldGroupVariantProps['size']>
-          }
-        | undefined
-    >('fieldGroup')
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(
-        size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(highlight ?? hasError)
-    const fieldGroupClass = $derived(
-        fieldGroupContext
-            ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
-            : undefined
-    )
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-
-    // ---- ARIA ----
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    // ---- Items lookup (O(1) via Map) ----
-    const itemsMap = $derived(
-        new Map(
-            (items as SelectItemType[])
-                .filter((i): i is SelectItem => !('type' in i))
-                .map((i) => [i.value, i])
-        )
-    )
-
-    // ---- Selection (single + multiple) ----
-    const selectedValues = $derived(
-        multiple
-            ? Array.isArray(value)
-                ? (value as string[])
-                : []
-            : typeof value === 'string' && value !== ''
-              ? [value]
-              : []
-    )
-    const selectedItems = $derived(
-        selectedValues.map((v) => itemsMap.get(v)).filter((i): i is SelectItem => i !== undefined)
-    )
-    const hasSelection = $derived(selectedValues.length > 0)
-    const singleSelectedItem = $derived(multiple ? undefined : selectedItems[0])
-    const displayLabel = $derived(
-        multiple
-            ? selectedItems.map((i) => i.label ?? i.value).join(separator)
-            : (singleSelectedItem?.label ?? singleSelectedItem?.value ?? '')
-    )
-
-    function removeValue(val: string) {
-        if (!multiple) return
-        value = selectedValues.filter((v) => v !== val)
-        emit.onChange()
-    }
-
-    function clearSelection() {
-        if (!multiple) return
-        value = []
-        emit.onChange()
-    }
-
-    // ---- Leading / trailing ----
-    const displayAvatar = $derived(multiple ? avatar : (singleSelectedItem?.avatar ?? avatar))
-    const displayIcon = $derived(
-        multiple ? (leadingIcon ?? icon) : (singleSelectedItem?.icon ?? leadingIcon ?? icon)
-    )
-    const isLeading = $derived(!!leadingSlot || !!displayAvatar || !!displayIcon)
-    const leadingIconName = $derived(
-        loading && isLeading ? loadingIcon : !displayAvatar ? displayIcon : undefined
-    )
-
-    // ---- bits-ui items for typeahead ----
-    const bitsItems = $derived(
-        [...itemsMap.values()].map((i) => ({
-            value: i.value,
-            label: i.label ?? i.value,
-            disabled: i.disabled
-        }))
-    )
-
-    // ---- Trailing icon ----
-    const trailingIconName = $derived(loading && !isLeading ? loadingIcon : trailingIcon)
-    const trailingIconClass = $derived(
-        `${loading && !isLeading ? 'animate-spin' : 'transition-transform'} ${open && !loading ? 'rotate-180' : ''}`
-    )
-
-    // ---- Variant slots ----
-    const variantSlots = $derived(
-        selectVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: true,
-            loading,
-            highlight: resolvedHighlight,
-            side,
-            transition
-        })
-    )
-
-    // ---- Trigger classes (root, base, leading, trailing, value, placeholder) ----
-    const rootClass = $derived(
-        variantSlots.root({
-            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-        })
-    )
-    const baseClass = $derived(
-        variantSlots.base({
-            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-        })
-    )
-    const leadingClass = $derived(
-        variantSlots.leading({ class: [config.slots.leading, ui?.leading] })
-    )
-    const leadingIconClass = $derived(
-        variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] })
-    )
-    const leadingAvatarClass = $derived(
-        variantSlots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] })
-    )
-    const leadingAvatarSizeClass = $derived(variantSlots.leadingAvatarSize() as AvatarSize)
-    const trailingClass = $derived(
-        variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] })
-    )
-    const trailingIconBaseClass = $derived(
-        variantSlots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] })
-    )
-    const valueClass = $derived(variantSlots.value({ class: [config.slots.value, ui?.value] }))
-    const placeholderClass = $derived(
-        variantSlots.placeholder({ class: [config.slots.placeholder, ui?.placeholder] })
-    )
-
-    // ---- Content classes ----
-    const contentClass = $derived(
-        variantSlots.content({ class: [config.slots.content, ui?.content] })
-    )
-    const viewportClass = $derived(
-        variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] })
-    )
-    const groupLabelClass = $derived(
-        variantSlots.groupLabel({ class: [config.slots.groupLabel, ui?.groupLabel] })
-    )
-    const separatorClass = $derived(
-        variantSlots.separator({ class: [config.slots.separator, ui?.separator] })
-    )
-
-    // ---- Item classes ----
-    const itemClass = $derived(variantSlots.item({ class: [config.slots.item, ui?.item] }))
-    const itemIconClass = $derived(
-        variantSlots.itemIcon({ class: [config.slots.itemIcon, ui?.itemIcon] })
-    )
-    const itemAvatarClass = $derived(
-        variantSlots.itemAvatar({ class: [config.slots.itemAvatar, ui?.itemAvatar] })
-    )
-    const itemAvatarSizeClass = $derived(variantSlots.itemAvatarSize() as AvatarSize)
-    const itemLabelClass = $derived(
-        variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] })
-    )
-    const itemDescriptionClass = $derived(
-        variantSlots.itemDescription({
-            class: [config.slots.itemDescription, ui?.itemDescription]
-        })
-    )
-    const itemIndicatorClass = $derived(
-        variantSlots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] })
-    )
-
-    // ---- Type guards ----
-    function isSelectItem(item: SelectItemType): item is SelectItem {
-        return !('type' in item)
-    }
-
-    function isSeparator(item: SelectItemType): item is { type: 'separator' } {
-        return 'type' in item && item.type === 'separator'
-    }
-
-    function isLabel(item: SelectItemType): item is { type: 'label'; label: string } {
-        return 'type' in item && item.type === 'label'
-    }
-</script>
-
-{#snippet renderItem(item: SelectItem, index: number)}
-    {@const isSelected = selectedValues.includes(item.value)}
-    <Select.Item
-        value={item.value}
-        label={item.label ?? item.value}
-        disabled={item.disabled}
-        class={itemClass}
-    >
-        {#if itemLeading}
-            {@render itemLeading({ item, index, selected: isSelected })}
-        {:else if item.avatar}
-            <Avatar {...item.avatar} size={itemAvatarSizeClass} class={itemAvatarClass} />
-        {:else if item.icon}
-            <Icon name={item.icon} class={itemIconClass} />
-        {/if}
-
-        {#if itemLabelSlot}
-            {@render itemLabelSlot({ item, index, selected: isSelected })}
-        {:else}
-            <div class={item.description ? 'flex flex-col' : undefined}>
-                <span class={itemLabelClass}>{item.label ?? item.value}</span>
-                {#if item.description}
-                    <span class={itemDescriptionClass}>{item.description}</span>
-                {/if}
-            </div>
-        {/if}
-
-        {#if itemTrailing}
-            {@render itemTrailing({ item, index, selected: isSelected })}
-        {:else if isSelected}
-            <Icon name={selectedIcon} class={itemIndicatorClass} />
-        {/if}
-    </Select.Item>
-{/snippet}
-
-{#snippet selectContentEl()}
-    <Select.Content
-        {side}
-        {sideOffset}
-        {align}
-        {alignOffset}
-        {avoidCollisions}
-        {collisionBoundary}
-        {collisionPadding}
-        {onEscapeKeydown}
-        {onInteractOutside}
-        {forceMount}
-        {loop}
-        class={contentClass}
-    >
-        <Select.Viewport class={viewportClass}>
-            {#if contentSlot}
-                {@render contentSlot({ open })}
-            {:else}
-                {#each items as selectItem, index (index)}
-                    {#if isSeparator(selectItem)}
-                        <div role="separator" class={separatorClass}></div>
-                    {:else if isLabel(selectItem)}
-                        <Select.Group>
-                            <Select.GroupHeading class={groupLabelClass}
-                                >{selectItem.label}</Select.GroupHeading
-                            >
-                        </Select.Group>
-                    {:else if isSelectItem(selectItem)}
-                        {#if itemSlot}
-                            {@render itemSlot({
-                                item: selectItem,
-                                index,
-                                selected: selectedValues.includes(selectItem.value)
-                            })}
-                        {:else}
-                            {@render renderItem(selectItem, index)}
-                        {/if}
-                    {/if}
-                {/each}
-            {/if}
-        </Select.Viewport>
-    </Select.Content>
-{/snippet}
-
-{#snippet rootChildren()}
-    <div bind:this={ref} class={rootClass}>
-        {#if leadingSlot}
-            <span class={leadingClass}>
-                {@render leadingSlot()}
-            </span>
-        {:else if isLeading && leadingIconName}
-            <span class={leadingClass}>
-                <Icon name={leadingIconName} class={leadingIconClass} />
-            </span>
-        {:else if displayAvatar}
-            <span class={leadingClass}>
-                <Avatar
-                    {...displayAvatar}
-                    size={leadingAvatarSizeClass}
-                    class={leadingAvatarClass}
-                />
-            </span>
-        {/if}
-
-        <Select.Trigger
-            {...restProps}
-            id={resolvedId}
-            name={resolvedName}
-            aria-describedby={ariaDescribedBy}
-            aria-invalid={resolvedHighlight ? true : undefined}
-            class={baseClass}
-        >
-            {#if selectedSlot && hasSelection}
-                {@render selectedSlot({
-                    items: selectedItems,
-                    remove: removeValue,
-                    clear: clearSelection
-                })}
-            {:else if hasSelection && displayLabel}
-                <span class={valueClass}>{displayLabel}</span>
-            {:else if placeholder}
-                <span class={placeholderClass}>{placeholder}</span>
-            {/if}
-        </Select.Trigger>
-
-        {#if trailingSlot}
-            <span class={trailingClass}>
-                {@render trailingSlot()}
-            </span>
-        {:else}
-            <span class={trailingClass}>
-                <Icon name={trailingIconName} class="{trailingIconBaseClass} {trailingIconClass}" />
-            </span>
-        {/if}
-    </div>
-
-    {#if portal}
-        <Select.Portal>
-            {@render selectContentEl()}
-        </Select.Portal>
-    {:else}
-        {@render selectContentEl()}
-    {/if}
-{/snippet}
-
-{#if multiple}
-    <Select.Root
-        type="multiple"
-        bind:open
-        onOpenChange={(val) => {
-            if (val) {
-                emit.onFocus()
-            } else {
-                emit.onBlur()
-            }
-            onOpenChange?.(val)
-        }}
-        {disabled}
-        {required}
-        items={bitsItems}
-        value={selectedValues}
-        onValueChange={(val) => {
-            value = val
-            emit.onChange()
-        }}
-    >
-        {@render rootChildren()}
-    </Select.Root>
-{:else}
-    <Select.Root
-        type="single"
-        bind:open
-        onOpenChange={(val) => {
-            if (val) {
-                emit.onFocus()
-            } else {
-                emit.onBlur()
-            }
-            onOpenChange?.(val)
-        }}
-        {disabled}
-        {required}
-        items={bitsItems}
-        value={selectedValues[0] ?? ''}
-        onValueChange={(val) => {
-            value = val
-            emit.onChange()
-        }}
-    >
-        {@render rootChildren()}
-    </Select.Root>
-{/if}