sv5ui 1.5.1 → 1.7.0

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.

package/dist/SelectMenu/SelectMenu.svelte

@@ -6,6 +6,8 @@
     } from './select-menu.types.js'
 
     export type Props = SelectMenuProps
+
+    const CREATE_ITEM_VALUE = '@@sv5ui/select-menu/create-item'
 </script>
 
 <script lang="ts">
@@ -21,7 +23,7 @@
     import Avatar from '../Avatar/Avatar.svelte'
     import Input from '../Input/Input.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('selectMenu', selectMenuDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -37,6 +39,8 @@
         name,
         required = false,
         disabled = false,
+        multiple = false,
+        separator = ', ',
         ui,
         id,
         color = config.defaultVariants.color,
@@ -53,6 +57,10 @@
         filterFields = ['label', 'value'] as string[],
         ignoreFilter = false,
         emptyText = 'No results found.',
+        createItem = false,
+        createItemLabel = (value: string) => `Create "${value}"`,
+        createItemIcon,
+        onCreate,
         transition = config.defaultVariants.transition ?? true,
         portal = true,
         side = config.defaultVariants.side ?? 'bottom',
@@ -72,12 +80,14 @@
         itemLeading,
         itemLabel: itemLabelSlot,
         itemTrailing,
+        selected: selectedSlot,
         empty: emptySlot,
         content: contentSlot
     }: Props = $props()
 
     // ---- Form context ----
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const fieldGroupContext = getContext<
         | {
@@ -112,25 +122,70 @@
               : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
     )
 
+    // ---- Created items (internal state for createItem) ----
+    let createdItems = $state<SelectMenuItem[]>([])
+
+    const combinedItems = $derived.by(() => {
+        const propValues = new Set(
+            (items as SelectMenuItemType[])
+                .filter((i): i is SelectMenuItem => !('type' in i))
+                .map((i) => i.value)
+        )
+        const extras = createdItems.filter((c) => !propValues.has(c.value))
+        return [...(items as SelectMenuItemType[]), ...extras]
+    })
+
     // ---- Items lookup (O(1) via Map) ----
     const itemsMap = $derived(
         new Map(
-            (items as SelectMenuItemType[])
+            combinedItems
                 .filter((i): i is SelectMenuItem => !('type' in i))
                 .map((i) => [i.value, i])
         )
     )
 
-    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 SelectMenuItem => 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()
+    }
 
     // ---- Search & filtering ----
     let searchTerm = $state('')
 
     const filteredItems = $derived(
         ignoreFilter || !searchTerm.trim()
-            ? items
-            : items.filter((item) => {
+            ? combinedItems
+            : combinedItems.filter((item) => {
                   if ('type' in item) return true
                   const query = searchTerm.toLowerCase()
                   return filterFields.some((field) => {
@@ -142,9 +197,73 @@
 
     const hasFilteredSelectItems = $derived(filteredItems.some((item) => !('type' in item)))
 
+    // ---- Create item ----
+    const trimmedSearch = $derived(searchTerm.trim())
+    const exactMatchExists = $derived.by(() => {
+        if (!trimmedSearch) return false
+        const query = trimmedSearch.toLowerCase()
+        for (const i of combinedItems) {
+            if ('type' in i) continue
+            if (i.value.toLowerCase() === query || (i.label ?? i.value).toLowerCase() === query) {
+                return true
+            }
+        }
+        return false
+    })
+    const showCreateItem = $derived.by(() => {
+        if (!createItem) return false
+        if (!trimmedSearch) return false
+        const mode = createItem === true ? 'lazy' : createItem
+        if (mode === 'always') return true
+        return !exactMatchExists
+    })
+    const resolvedCreateLabel = $derived(
+        typeof createItemLabel === 'function' ? createItemLabel(trimmedSearch) : createItemLabel
+    )
+
+    function findItemByCaseInsensitive(query: string): SelectMenuItem | undefined {
+        const q = query.toLowerCase()
+        for (const it of itemsMap.values()) {
+            if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) {
+                return it
+            }
+        }
+        return undefined
+    }
+
+    function selectValue(val: string) {
+        if (multiple) {
+            if (!selectedValues.includes(val)) {
+                value = [...selectedValues, val]
+            }
+        } else {
+            value = val
+        }
+    }
+
+    function handleCreate() {
+        if (!showCreateItem) return
+        const newValue = trimmedSearch
+        if (!newValue) return
+
+        const existing = findItemByCaseInsensitive(newValue)
+        if (existing) {
+            selectValue(existing.value)
+        } else {
+            createdItems = [...createdItems, { value: newValue, label: newValue }]
+            selectValue(newValue)
+            onCreate?.(newValue)
+        }
+
+        emit.onChange()
+        searchTerm = ''
+    }
+
     // ---- 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
@@ -218,6 +337,17 @@
         variantSlots.separator({ class: [config.slots.separator, ui?.separator] })
     )
     const emptyClass = $derived(variantSlots.empty({ class: [config.slots.empty, ui?.empty] }))
+    const createItemClass = $derived(
+        variantSlots.createItem({ class: [config.slots.createItem, ui?.createItem] })
+    )
+    const createItemIconClass = $derived(
+        variantSlots.createItemIcon({ class: [config.slots.createItemIcon, ui?.createItemIcon] })
+    )
+    const createItemLabelClass = $derived(
+        variantSlots.createItemLabel({
+            class: [config.slots.createItemLabel, ui?.createItemLabel]
+        })
+    )
 
     // ---- Item classes ----
     const itemClass = $derived(variantSlots.item({ class: [config.slots.item, ui?.item] }))
@@ -257,13 +387,16 @@
     function onUpdateOpen(val: boolean) {
         if (!val) {
             searchTerm = ''
+            emit.onBlur()
+        } else {
+            emit.onFocus()
         }
         onOpenChange?.(val)
     }
 </script>
 
 {#snippet renderItem(item: SelectMenuItem, index: number)}
-    {@const isSelected = value === item.value}
+    {@const isSelected = selectedValues.includes(item.value)}
     <Combobox.Item
         value={item.value}
         label={item.label ?? item.value}
@@ -316,6 +449,12 @@
             placeholder={searchPlaceholder}
             value={searchTerm}
             oninput={(e) => (searchTerm = (e.currentTarget as HTMLInputElement).value)}
+            onkeydown={(e: KeyboardEvent) => {
+                if (e.key !== 'Enter') return
+                if (!showCreateItem) return
+                e.preventDefault()
+                handleCreate()
+            }}
             variant="none"
             size={resolvedSize}
             class={inputClass}
@@ -339,7 +478,7 @@
                             {@render itemSlot({
                                 item: selectItem,
                                 index,
-                                selected: value === selectItem.value
+                                selected: selectedValues.includes(selectItem.value)
                             })}
                         {:else}
                             {@render renderItem(selectItem, index)}
@@ -347,28 +486,33 @@
                     {/if}
                 {/each}
 
-                {#if !hasFilteredSelectItems}
+                {#if !hasFilteredSelectItems && !showCreateItem}
                     {#if emptySlot}
                         {@render emptySlot({ searchTerm })}
                     {:else}
                         <div class={emptyClass}>{emptyText}</div>
                     {/if}
                 {/if}
+
+                {#if showCreateItem}
+                    <Combobox.Item
+                        value={CREATE_ITEM_VALUE}
+                        label={resolvedCreateLabel}
+                        {disabled}
+                        class={createItemClass}
+                    >
+                        {#if createItemIcon}
+                            <Icon name={createItemIcon} class={createItemIconClass} />
+                        {/if}
+                        <span class={createItemLabelClass}>{resolvedCreateLabel}</span>
+                    </Combobox.Item>
+                {/if}
             </div>
         {/if}
     </Combobox.Content>
 {/snippet}
 
-<Combobox.Root
-    type="single"
-    bind:open
-    onOpenChange={onUpdateOpen}
-    {disabled}
-    {required}
-    {value}
-    onValueChange={(val) => (value = val)}
-    name={resolvedName}
->
+{#snippet rootChildren()}
     <div bind:this={ref} class={rootClass}>
         {#if leadingSlot}
             <span class={leadingClass}>
@@ -400,7 +544,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>
@@ -425,4 +575,46 @@
     {:else}
         {@render contentEl()}
     {/if}
-</Combobox.Root>
+{/snippet}
+
+{#if multiple}
+    <Combobox.Root
+        type="multiple"
+        bind:open
+        onOpenChange={onUpdateOpen}
+        {disabled}
+        {required}
+        value={selectedValues}
+        onValueChange={(val) => {
+            if (Array.isArray(val) && val.includes(CREATE_ITEM_VALUE)) {
+                handleCreate()
+                return
+            }
+            value = val
+            emit.onChange()
+        }}
+        name={resolvedName}
+    >
+        {@render rootChildren()}
+    </Combobox.Root>
+{:else}
+    <Combobox.Root
+        type="single"
+        bind:open
+        onOpenChange={onUpdateOpen}
+        {disabled}
+        {required}
+        value={selectedValues[0] ?? ''}
+        onValueChange={(val) => {
+            if (val === CREATE_ITEM_VALUE) {
+                handleCreate()
+                return
+            }
+            value = val
+            emit.onChange()
+        }}
+        name={resolvedName}
+    >
+        {@render rootChildren()}
+    </Combobox.Root>
+{/if}

package/dist/SelectMenu/select-menu.types.d.ts

@@ -67,6 +67,17 @@ export interface SelectMenuItemSlotProps {
     /** Whether the item is currently selected */
     selected?: boolean;
 }
+/**
+ * Props passed to the `selected` snippet when `multiple` is true.
+ */
+export interface SelectMenuSelectedSlotProps {
+    /** The full list of currently selected items resolved from values. */
+    items: SelectMenuItem[];
+    /** Remove a value from the current selection. */
+    remove: (value: string) => void;
+    /** Clear all selected values. */
+    clear: () => void;
+}
 type ContentProps = Pick<ComboboxContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount'>;
 /**
  * Props for the SelectMenu component.
@@ -83,8 +94,25 @@ export interface SelectMenuProps extends 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 | string[];
+    /**
+     * Whether multiple items can be selected at once.
+     * When `true`, `value` becomes a `string[]` and the dropdown stays open
+     * after each selection. The trigger displays a comma-separated list of
+     * selected labels by default; use the `selected` snippet for chips/tags.
+     * @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 ', '
      */
-    value?: string;
+    separator?: string;
     /**
      * Whether the dropdown is open. Supports two-way binding with `bind:open`.
      * @default false
@@ -192,6 +220,33 @@ export interface SelectMenuProps extends ContentProps {
      * @default 'No results found.'
      */
     emptyText?: string;
+    /**
+     * Allow the user to create a new item by typing in the search input.
+     * - `false` (default): the feature is disabled.
+     * - `true` / `'lazy'`: the create option only appears when no existing item
+     *   matches the current search term (case-insensitive on `value` or `label`).
+     * - `'always'`: the create option is shown whenever the search term is
+     *   non-empty, regardless of existing matches.
+     * @default false
+     */
+    createItem?: boolean | 'always' | 'lazy';
+    /**
+     * Label rendered on the "create" option. Receives the trimmed search term.
+     * @default (value) => `Create "${value}"`
+     */
+    createItemLabel?: string | ((value: string) => string);
+    /**
+     * Icon shown before the create option label. Pass `false` (or omit) to
+     * render no icon.
+     * @default undefined
+     */
+    createItemIcon?: string | false;
+    /**
+     * Called when the user picks the "create" option. The new value is also
+     * tracked internally so the trigger can render its label even if the
+     * caller does not push it into `items`.
+     */
+    onCreate?: (value: string) => void;
     /**
      * Animate the dropdown on open and close.
      * @default true
@@ -224,6 +279,12 @@ export interface SelectMenuProps extends 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<[SelectMenuSelectedSlotProps]>;
     /**
      * Custom snippet for rendering individual items in the dropdown.
      * When provided, replaces the default item rendering.

package/dist/SelectMenu/select-menu.variants.d.ts

@@ -3,18 +3,28 @@ export declare const selectMenuVariants: import("tailwind-variants").TVReturnTyp
     size: {
         xs: {
             empty: string;
+            createItem: string;
+            createItemIcon: string;
         };
         sm: {
             empty: string;
+            createItem: string;
+            createItemIcon: string;
         };
         md: {
             empty: string;
+            createItem: string;
+            createItemIcon: string;
         };
         lg: {
             empty: string;
+            createItem: string;
+            createItemIcon: string;
         };
         xl: {
             empty: string;
+            createItem: string;
+            createItemIcon: string;
         };
     };
 }, {
@@ -22,6 +32,9 @@ export declare const selectMenuVariants: import("tailwind-variants").TVReturnTyp
     input: string;
     viewport: string;
     empty: string;
+    createItem: string[];
+    createItemIcon: string;
+    createItemLabel: string;
 }, undefined, {
     variant: {
         outline: string;
@@ -594,18 +607,28 @@ export declare const selectMenuDefaults: {
         size: {
             xs: {
                 empty: string;
+                createItem: string;
+                createItemIcon: string;
             };
             sm: {
                 empty: string;
+                createItem: string;
+                createItemIcon: string;
             };
             md: {
                 empty: string;
+                createItem: string;
+                createItemIcon: string;
             };
             lg: {
                 empty: string;
+                createItem: string;
+                createItemIcon: string;
             };
             xl: {
                 empty: string;
+                createItem: string;
+                createItemIcon: string;
             };
         };
     }, {
@@ -613,6 +636,9 @@ export declare const selectMenuDefaults: {
         input: string;
         viewport: string;
         empty: string;
+        createItem: string[];
+        createItemIcon: string;
+        createItemLabel: string;
     }, {
         variant: {
             outline: string;

package/dist/SelectMenu/select-menu.variants.js

@@ -15,15 +15,43 @@ export const selectMenuVariants = tv({
         ],
         input: 'border-b border-outline-variant',
         viewport: 'p-1 flex-1 overflow-y-auto scrollbar-thin',
-        empty: 'text-center text-on-surface-variant'
+        empty: 'text-center text-on-surface-variant',
+        createItem: [
+            'group relative flex items-center gap-2 w-full rounded-sm px-2 cursor-pointer select-none',
+            'focus:outline-none',
+            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'data-[highlighted]:bg-surface-container-highest'
+        ],
+        createItemIcon: 'shrink-0 text-primary',
+        createItemLabel: 'flex-1 truncate text-on-surface'
     },
     variants: {
         size: {
-            xs: { empty: 'p-2 text-xs' },
-            sm: { empty: 'p-2.5 text-xs' },
-            md: { empty: 'p-2.5 text-sm' },
-            lg: { empty: 'p-3 text-sm' },
-            xl: { empty: 'p-3 text-base' }
+            xs: {
+                empty: 'p-2 text-xs',
+                createItem: 'py-1 text-xs',
+                createItemIcon: 'size-3'
+            },
+            sm: {
+                empty: 'p-2.5 text-xs',
+                createItem: 'py-1.5 text-xs',
+                createItemIcon: 'size-3.5'
+            },
+            md: {
+                empty: 'p-2.5 text-sm',
+                createItem: 'py-1.5 text-sm',
+                createItemIcon: 'size-4'
+            },
+            lg: {
+                empty: 'p-3 text-sm',
+                createItem: 'py-2 text-sm',
+                createItemIcon: 'size-5'
+            },
+            xl: {
+                empty: 'p-3 text-base',
+                createItem: 'py-2.5 text-base',
+                createItemIcon: 'size-5'
+            }
         }
     }
 });

package/dist/Slideover/Slideover.svelte

@@ -28,7 +28,8 @@
         description,
         side = config.defaultVariants.side ?? 'right',
         overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        transition = config.defaultVariants.transition ?? true,
+        transition = config.defaultVariants.transition ?? 'slide',
+        size = config.defaultVariants.size ?? 'md',
         inset = config.defaultVariants.inset ?? false,
         portal = true,
         close: closeProp = true,
@@ -56,8 +57,18 @@
         !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
     )
 
+    const resolvedTransition = $derived(
+        transition === false ? 'none' : transition === true ? 'slide' : transition
+    )
+
     const variantSlots = $derived(
-        slideoverVariants({ transition, side, inset, overlay: showOverlay })
+        slideoverVariants({
+            transition: resolvedTransition,
+            side,
+            size,
+            inset,
+            overlay: showOverlay
+        })
     )
 
     const classes = $derived({