svelora 2.1.0

package/dist/RadioGroup/radio-group.variants.js

@@ -0,0 +1,232 @@
+import { tv } from 'tailwind-variants';
+export const radioGroupVariants = tv({
+    slots: {
+        root: '',
+        fieldset: 'flex',
+        legend: 'block font-medium text-on-surface mb-1',
+        item: 'flex items-start',
+        container: 'flex items-center',
+        base: [
+            'inline-flex items-center justify-center shrink-0 rounded-full border',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200',
+            'border-outline-variant',
+            'data-[state=unchecked]:bg-transparent'
+        ],
+        indicator: [
+            'flex items-center justify-center rounded-full',
+            'after:content-[""] after:block after:rounded-full after:bg-surface'
+        ],
+        loadingIcon: 'shrink-0 animate-spin text-surface',
+        wrapper: '',
+        label: 'block font-medium text-on-surface',
+        description: 'text-on-surface-variant'
+    },
+    variants: {
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                fieldset: 'gap-2',
+                base: 'size-3.5',
+                container: 'h-4',
+                indicator: 'size-3.5 after:size-1',
+                loadingIcon: 'size-2',
+                wrapper: 'text-xs'
+            },
+            sm: {
+                fieldset: 'gap-2.5',
+                base: 'size-4',
+                container: 'h-4',
+                indicator: 'size-4 after:size-1.5',
+                loadingIcon: 'size-2.5',
+                wrapper: 'text-xs'
+            },
+            md: {
+                fieldset: 'gap-3',
+                base: 'size-4.5',
+                container: 'h-5',
+                indicator: 'size-4.5 after:size-1.5',
+                loadingIcon: 'size-3',
+                wrapper: 'text-sm'
+            },
+            lg: {
+                fieldset: 'gap-3.5',
+                base: 'size-5',
+                container: 'h-5',
+                indicator: 'size-5 after:size-2',
+                loadingIcon: 'size-3.5',
+                wrapper: 'text-sm'
+            },
+            xl: {
+                fieldset: 'gap-4',
+                base: 'size-5.5',
+                container: 'h-6',
+                indicator: 'size-5.5 after:size-2.5',
+                loadingIcon: 'size-4',
+                wrapper: 'text-base'
+            }
+        },
+        variant: {
+            list: '',
+            card: {
+                item: 'border border-outline-variant rounded-lg cursor-pointer select-none'
+            }
+        },
+        indicator: {
+            start: {
+                wrapper: 'ms-2'
+            },
+            end: {
+                item: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                container: 'sr-only'
+            }
+        },
+        orientation: {
+            horizontal: {
+                fieldset: 'flex-row'
+            },
+            vertical: {
+                fieldset: 'flex-col'
+            }
+        },
+        loading: {
+            true: ''
+        },
+        required: {
+            true: {
+                legend: "after:content-['*'] after:ms-0.5 after:text-error"
+            }
+        },
+        disabled: {
+            true: {
+                root: 'opacity-75',
+                base: 'cursor-not-allowed',
+                label: 'cursor-not-allowed',
+                description: 'cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== COLOR (checked bg + border + focus ring) ==========
+        {
+            color: 'primary',
+            class: {
+                base: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:outline-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            class: {
+                base: 'data-[state=checked]:bg-secondary data-[state=checked]:border-secondary focus-visible:outline-secondary'
+            }
+        },
+        {
+            color: 'tertiary',
+            class: {
+                base: 'data-[state=checked]:bg-tertiary data-[state=checked]:border-tertiary focus-visible:outline-tertiary'
+            }
+        },
+        {
+            color: 'success',
+            class: {
+                base: 'data-[state=checked]:bg-success data-[state=checked]:border-success focus-visible:outline-success'
+            }
+        },
+        {
+            color: 'warning',
+            class: {
+                base: 'data-[state=checked]:bg-warning data-[state=checked]:border-warning focus-visible:outline-warning'
+            }
+        },
+        {
+            color: 'error',
+            class: {
+                base: 'data-[state=checked]:bg-error data-[state=checked]:border-error focus-visible:outline-error'
+            }
+        },
+        {
+            color: 'info',
+            class: {
+                base: 'data-[state=checked]:bg-info data-[state=checked]:border-info focus-visible:outline-info'
+            }
+        },
+        {
+            color: 'surface',
+            class: {
+                base: 'data-[state=checked]:bg-on-surface data-[state=checked]:border-on-surface focus-visible:outline-outline'
+            }
+        },
+        // ========== CARD × SIZE (padding) ==========
+        { variant: 'card', size: 'xs', class: { item: 'p-2' } },
+        { variant: 'card', size: 'sm', class: { item: 'p-2.5' } },
+        { variant: 'card', size: 'md', class: { item: 'p-3' } },
+        { variant: 'card', size: 'lg', class: { item: 'p-3.5' } },
+        { variant: 'card', size: 'xl', class: { item: 'p-4' } },
+        // ========== CARD × COLOR (checked border) ==========
+        {
+            variant: 'card',
+            color: 'primary',
+            class: { item: 'has-[[data-state=checked]]:border-primary' }
+        },
+        {
+            variant: 'card',
+            color: 'secondary',
+            class: { item: 'has-[[data-state=checked]]:border-secondary' }
+        },
+        {
+            variant: 'card',
+            color: 'tertiary',
+            class: { item: 'has-[[data-state=checked]]:border-tertiary' }
+        },
+        {
+            variant: 'card',
+            color: 'success',
+            class: { item: 'has-[[data-state=checked]]:border-success' }
+        },
+        {
+            variant: 'card',
+            color: 'warning',
+            class: { item: 'has-[[data-state=checked]]:border-warning' }
+        },
+        {
+            variant: 'card',
+            color: 'error',
+            class: { item: 'has-[[data-state=checked]]:border-error' }
+        },
+        {
+            variant: 'card',
+            color: 'info',
+            class: { item: 'has-[[data-state=checked]]:border-info' }
+        },
+        {
+            variant: 'card',
+            color: 'surface',
+            class: { item: 'has-[[data-state=checked]]:border-on-surface' }
+        },
+        // ========== CARD × DISABLED ==========
+        { variant: 'card', disabled: true, class: { item: 'cursor-not-allowed' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        size: 'md',
+        variant: 'list',
+        indicator: 'start',
+        orientation: 'vertical'
+    }
+});
+export const radioGroupDefaults = {
+    defaultVariants: radioGroupVariants.defaultVariants,
+    slots: {}
+};

package/dist/Select/Select.svelte

@@ -0,0 +1,461 @@
+<script lang="ts" module>
+    import type { SelectItem, SelectItemType, SelectProps } from './select.types.js'
+
+    export type Props = SelectProps
+</script>
+
+<script lang="ts">
+    import { Select } from 'bits-ui'
+    import { getContext } from 'svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import {
+        type FieldGroupVariantProps, 
+        fieldGroupVariantWithRoot
+    } from '../FieldGroup/field-group.variants.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { selectDefaults, selectVariants } from './select.variants.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}

package/dist/Select/Select.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SelectProps } from './select.types.js';
+export type Props = SelectProps;
+import { Select } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "ref" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select.svelte';
+export type { SelectItem, SelectItemType, SelectProps } from './select.types.js';

package/dist/Select/index.js

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';