sv5ui 1.6.0 → 1.7.0

package/dist/Modal/modal.variants.js

@@ -14,17 +14,35 @@ export const modalVariants = tv({
     },
     variants: {
         transition: {
-            true: {
+            none: {},
+            fade: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            slide: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[slide-in-from-top_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-top_150ms_ease-in]'
+            },
+            scale: {
                 overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
                 content: 'data-[state=open]:animate-[scale-in_200ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[scale-out_150ms_cubic-bezier(0.32,0.72,0,1)]'
             }
         },
-        fullscreen: {
-            true: {
-                content: 'inset-0'
+        size: {
+            sm: {
+                content: 'w-[calc(100vw-2rem)] max-w-md rounded-lg shadow-lg ring ring-outline-variant'
             },
-            false: {
+            md: {
                 content: 'w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-outline-variant'
+            },
+            lg: {
+                content: 'w-[calc(100vw-2rem)] max-w-2xl rounded-lg shadow-lg ring ring-outline-variant'
+            },
+            xl: {
+                content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-outline-variant'
+            },
+            full: {
+                content: 'inset-0'
             }
         },
         overlay: {
@@ -46,22 +64,22 @@ export const modalVariants = tv({
     compoundVariants: [
         {
             scrollable: true,
-            fullscreen: false,
+            size: ['sm', 'md', 'lg', 'xl'],
             class: {
                 overlay: 'grid place-items-center p-4 sm:py-8'
             }
         },
         {
             scrollable: false,
-            fullscreen: false,
+            size: ['sm', 'md', 'lg', 'xl'],
             class: {
                 content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden'
             }
         }
     ],
     defaultVariants: {
-        transition: true,
-        fullscreen: false,
+        transition: 'scale',
+        size: 'md',
         overlay: true,
         scrollable: false
     }

package/dist/PinInput/PinInput.svelte

@@ -7,10 +7,12 @@
 <script lang="ts">
     import { PinInput, useId } from 'bits-ui'
     import { pinInputVariants, pinInputDefaults } from './pin-input.variants.js'
-    import { getComponentConfig } from '../config.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
     import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import Icon from '../Icon/Icon.svelte'
 
     const config = getComponentConfig('pinInput', pinInputDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
         ref = $bindable(null),
@@ -33,6 +35,8 @@
         autofocus = false,
         autofocusDelay = 0,
         highlight = false,
+        loading = false,
+        loadingIcon = icons.loading,
         fixed = false,
         color = config.defaultVariants.color,
         size,
@@ -45,6 +49,8 @@
     const formFieldContext = useFormField()
     const emit = useFormFieldEmit()
 
+    const isDisabled = $derived(disabled || loading)
+
     const autoInputId = useId()
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
@@ -86,7 +92,7 @@
             size: resolvedSize,
             highlight: resolvedHighlight,
             fixed,
-            disabled
+            disabled: isDisabled
         })
     )
 
@@ -107,15 +113,23 @@
     })
 </script>
 
-<div class="contents" {...restProps}>
+<div class="relative inline-flex" {...restProps}>
     {#if resolvedName}
         <input type="hidden" name={resolvedName} {value} />
     {/if}
+    {#if loading}
+        <span
+            class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-surface/60"
+            aria-hidden="true"
+        >
+            <Icon name={loadingIcon} class="size-5 animate-spin text-on-surface-variant" />
+        </span>
+    {/if}
     <PinInput.Root
         bind:ref
         {value}
         maxlength={length}
-        {disabled}
+        disabled={isDisabled}
         {textalign}
         onComplete={handleComplete}
         pasteTransformer={resolvedPasteTransformer}

package/dist/PinInput/pin-input.types.d.ts

@@ -68,6 +68,17 @@ export type PinInputProps = Pick<PinInputPrimitive.RootProps, 'disabled' | 'text
      * @default false
      */
     highlight?: boolean;
+    /**
+     * Show a loading spinner over the cells and disable interaction.
+     * Useful when verifying an OTP code against a backend.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon displayed as the loading indicator. Defaults to `icons.loading`
+     * from the global app config (`lucide:loader-circle`).
+     */
+    loadingIcon?: string;
     /**
      * Prevent responsive text size changes on mobile.
      * @default false

package/dist/Select/Select.svelte

@@ -31,6 +31,8 @@
         name,
         required = false,
         disabled = false,
+        multiple = false,
+        separator = ', ',
         ui,
         id,
         color = config.defaultVariants.color,
@@ -64,6 +66,7 @@
         itemLeading,
         itemLabel: itemLabelSlot,
         itemTrailing,
+        selected: selectedSlot,
         content: contentSlot
     }: Props = $props()
 
@@ -113,12 +116,44 @@
         )
     )
 
-    const selectedItem = $derived(value ? itemsMap.get(value) : undefined)
-    const displayLabel = $derived(selectedItem?.label ?? selectedItem?.value ?? '')
+    // ---- 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(selectedItem?.avatar ?? avatar)
-    const displayIcon = $derived(selectedItem?.icon ?? leadingIcon ?? icon)
+    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
@@ -236,7 +271,7 @@
 </script>
 
 {#snippet renderItem(item: SelectItem, index: number)}
-    {@const isSelected = value === item.value}
+    {@const isSelected = selectedValues.includes(item.value)}
     <Select.Item
         value={item.value}
         label={item.label ?? item.value}
@@ -303,7 +338,7 @@
                             {@render itemSlot({
                                 item: selectItem,
                                 index,
-                                selected: value === selectItem.value
+                                selected: selectedValues.includes(selectItem.value)
                             })}
                         {:else}
                             {@render renderItem(selectItem, index)}
@@ -315,26 +350,7 @@
     </Select.Content>
 {/snippet}
 
-<Select.Root
-    type="single"
-    bind:open
-    onOpenChange={(val) => {
-        if (val) {
-            emit.onFocus()
-        } else {
-            emit.onBlur()
-        }
-        onOpenChange?.(val)
-    }}
-    {disabled}
-    {required}
-    items={bitsItems}
-    {value}
-    onValueChange={(val) => {
-        value = val
-        emit.onChange()
-    }}
->
+{#snippet rootChildren()}
     <div bind:this={ref} class={rootClass}>
         {#if leadingSlot}
             <span class={leadingClass}>
@@ -361,7 +377,13 @@
             aria-invalid={resolvedHighlight ? true : undefined}
             class={baseClass}
         >
-            {#if value && displayLabel}
+            {#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>
@@ -386,4 +408,52 @@
     {:else}
         {@render selectContentEl()}
     {/if}
-</Select.Root>
+{/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.types.d.ts

@@ -3,6 +3,12 @@ import type { ClassNameValue } from 'tailwind-merge';
 import type { SelectVariantProps, SelectSlots } from './select.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
 import type { SelectRootPropsWithoutHTML, SelectContentPropsWithoutHTML } from 'bits-ui';
+/**
+ * The value shape for the Select.
+ * - When `multiple` is `false` (or omitted), the value is a single string (or undefined).
+ * - When `multiple` is `true`, the value is an array of strings.
+ */
+export type SelectValue<Multiple extends boolean = false> = Multiple extends true ? string[] : string | undefined;
 /**
  * A single selectable option within the Select.
  */
@@ -67,6 +73,17 @@ export interface SelectItemSlotProps {
     /** Whether the item is currently selected */
     selected?: boolean;
 }
+/**
+ * Props passed to the `selected` snippet when `multiple` is true.
+ */
+export interface SelectSelectedSlotProps {
+    /** The full list of currently selected items resolved from values. */
+    items: SelectItem[];
+    /** Remove a value from the current selection. */
+    remove: (value: string) => void;
+    /** Clear all selected values. */
+    clear: () => void;
+}
 type RootProps = Pick<SelectRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'name' | 'required' | 'disabled'>;
 type ContentProps = Pick<SelectContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount' | 'loop'>;
 /**
@@ -92,12 +109,31 @@ export interface SelectProps extends RootProps, ContentProps {
     ref?: HTMLElement | null;
     /**
      * The currently selected value. Supports two-way binding with `bind:value`.
+     *
+     * - When `multiple` is `false`/omitted, this is a `string`.
+     * - When `multiple` is `true`, this is a `string[]`.
      */
-    value?: string;
+    value?: string | string[];
     /**
      * The default selected value when uncontrolled.
+     *
+     * - When `multiple` is `false`/omitted, this is a `string`.
+     * - When `multiple` is `true`, this is a `string[]`.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Whether multiple items can be selected at once.
+     * When `true`, `value` becomes a `string[]` and the trigger displays
+     * a comma-separated list of selected labels by default.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Separator used to join selected labels in the trigger when `multiple` is `true`.
+     * Ignored when the `selected` snippet is provided.
+     * @default ', '
      */
-    defaultValue?: string;
+    separator?: string;
     /**
      * Array of items to display in the select dropdown.
      */
@@ -194,6 +230,12 @@ export interface SelectProps extends RootProps, ContentProps {
      * Takes precedence over `trailingIcon`.
      */
     trailingSlot?: Snippet;
+    /**
+     * Custom rendering for the selected value(s) displayed in the trigger.
+     * Useful in `multiple` mode to render chips/tags instead of the default
+     * comma-separated label list.
+     */
+    selected?: Snippet<[SelectSelectedSlotProps]>;
     /**
      * Custom snippet for rendering individual items in the dropdown.
      * When provided, replaces the default item rendering.