npm - sv5ui - Versions diffs - 1.5.1 → 1.7.0 - Mend

sv5ui 1.5.1 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/Calendar/Calendar.svelte +48 -6
package/dist/Calendar/calendar.types.d.ts +19 -0
package/dist/Calendar/calendar.variants.js +2 -1
package/dist/Carousel/Carousel.svelte +279 -0
package/dist/Carousel/Carousel.svelte.d.ts +26 -0
package/dist/Carousel/carousel.types.d.ts +242 -0
package/dist/Carousel/carousel.types.js +1 -0
package/dist/Carousel/carousel.variants.d.ts +408 -0
package/dist/Carousel/carousel.variants.js +88 -0
package/dist/Carousel/index.d.ts +2 -0
package/dist/Carousel/index.js +1 -0
package/dist/Checkbox/Checkbox.svelte +8 -2
package/dist/CheckboxGroup/CheckboxGroup.svelte +15 -2
package/dist/FileUpload/FileUpload.svelte +81 -10
package/dist/FileUpload/file-upload.types.d.ts +39 -0
package/dist/FileUpload/index.d.ts +1 -1
package/dist/Form/Form.svelte +203 -0
package/dist/Form/Form.svelte.d.ts +26 -0
package/dist/Form/form.context.svelte.d.ts +64 -0
package/dist/Form/form.context.svelte.js +478 -0
package/dist/Form/form.types.d.ts +164 -0
package/dist/Form/form.types.js +12 -0
package/dist/Form/form.variants.d.ts +39 -0
package/dist/Form/form.variants.js +17 -0
package/dist/Form/index.d.ts +4 -0
package/dist/Form/index.js +6 -0
package/dist/Form/validate-schema.d.ts +13 -0
package/dist/Form/validate-schema.js +113 -0
package/dist/FormField/FormField.svelte +71 -8
package/dist/FormField/form-field.types.d.ts +15 -0
package/dist/Input/Input.svelte +31 -5
package/dist/Input/Input.svelte.d.ts +25 -4
package/dist/Input/input.types.d.ts +24 -3
package/dist/Modal/Modal.svelte +14 -3
package/dist/Modal/modal.types.d.ts +15 -4
package/dist/Modal/modal.variants.d.ts +110 -20
package/dist/Modal/modal.variants.js +27 -9
package/dist/PinInput/PinInput.svelte +27 -6
package/dist/PinInput/pin-input.types.d.ts +11 -0
package/dist/RadioGroup/RadioGroup.svelte +17 -3
package/dist/Select/Select.svelte +100 -19
package/dist/Select/select.types.d.ts +44 -2
package/dist/SelectMenu/SelectMenu.svelte +215 -23
package/dist/SelectMenu/select-menu.types.d.ts +62 -1
package/dist/SelectMenu/select-menu.variants.d.ts +26 -0
package/dist/SelectMenu/select-menu.variants.js +34 -6
package/dist/Slideover/Slideover.svelte +13 -2
package/dist/Slideover/slideover.types.d.ts +14 -3
package/dist/Slideover/slideover.variants.d.ts +85 -5
package/dist/Slideover/slideover.variants.js +42 -12
package/dist/Slider/Slider.svelte +4 -1
package/dist/Switch/Switch.svelte +8 -2
package/dist/Textarea/Textarea.svelte +27 -1
package/dist/hooks/index.d.ts +1 -1
package/dist/hooks/index.js +1 -1
package/dist/hooks/useFormField.svelte.d.ts +64 -0
package/dist/hooks/useFormField.svelte.js +70 -1
package/dist/index.d.ts +2 -0
package/dist/index.js +2 -0
package/package.json +31 -3

package/dist/Modal/Modal.svelte CHANGED Viewed

@@ -28,8 +28,9 @@
         description,
         overlay: showOverlay = config.defaultVariants.overlay ?? true,
         scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? true,
-        fullscreen = config.defaultVariants.fullscreen ?? false,
+        transition = config.defaultVariants.transition ?? 'scale',
+        size = config.defaultVariants.size ?? 'md',
+        fullscreen = false,
         portal = true,
         close: closeProp = true,
         dismissible = true,
@@ -46,6 +47,11 @@
         closeSlot
     }: Props = $props()
+    const resolvedSize = $derived(fullscreen ? 'full' : size)
+    const resolvedTransition = $derived(
+        transition === false ? 'none' : transition === true ? 'scale' : transition
+    )
     const showClose = $derived(!!closeProp)
     const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
@@ -57,7 +63,12 @@
     )
     const variantSlots = $derived(
-        modalVariants({ transition, fullscreen, overlay: showOverlay, scrollable })
+        modalVariants({
+            transition: resolvedTransition,
+            size: resolvedSize,
+            overlay: showOverlay,
+            scrollable
+        })
     )
     const classes = $derived({

package/dist/Modal/modal.types.d.ts CHANGED Viewed

@@ -43,15 +43,26 @@ export interface ModalProps extends RootProps, ContentProps {
      */
     scrollable?: ModalVariantProps['scrollable'];
     /**
-     * Animate the modal on open and close.
-     * @default true
+     * Controls the entrance/exit animation.
+     * - `'none'` / `false`: no animation
+     * - `'fade'`: overlay + content fade
+     * - `'slide'`: overlay fade + content slide-in from top
+     * - `'scale'` / `true`: overlay fade + content scale-in (default)
+     * @default 'scale'
+     */
+    transition?: ModalVariantProps['transition'] | boolean;
+    /**
+     * Controls the modal width. The `'full'` value expands to fill the
+     * entire viewport (replaces the deprecated `fullscreen` prop).
+     * @default 'md'
      */
-    transition?: ModalVariantProps['transition'];
+    size?: ModalVariantProps['size'];
     /**
      * Expand the modal to fill the entire viewport.
+     * @deprecated Use `size="full"` instead. Retained as an alias for backward compatibility.
      * @default false
      */
-    fullscreen?: ModalVariantProps['fullscreen'];
+    fullscreen?: boolean;
     /**
      * Render the modal content in a portal appended to `<body>`.
      * @default true

package/dist/Modal/modal.variants.d.ts CHANGED Viewed

@@ -1,16 +1,34 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+            content: string;
+        };
+        scale: {
             overlay: string;
             content: string;
         };
     };
-    fullscreen: {
-        true: {
+    size: {
+        sm: {
             content: string;
         };
-        false: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+        full: {
             content: string;
         };
     };
@@ -42,16 +60,34 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     close: string;
 }, undefined, {
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+            content: string;
+        };
+        scale: {
             overlay: string;
             content: string;
         };
     };
-    fullscreen: {
-        true: {
+    size: {
+        sm: {
             content: string;
         };
-        false: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+        full: {
             content: string;
         };
     };
@@ -83,16 +119,34 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+            content: string;
+        };
+        scale: {
             overlay: string;
             content: string;
         };
     };
-    fullscreen: {
-        true: {
+    size: {
+        sm: {
             content: string;
         };
-        false: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+        full: {
             content: string;
         };
     };
@@ -128,16 +182,34 @@ export type ModalSlots = keyof ReturnType<typeof modalVariants>;
 export declare const modalDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+                content: string;
+            };
+            scale: {
                 overlay: string;
                 content: string;
             };
         };
-        fullscreen: {
-            true: {
+        size: {
+            sm: {
                 content: string;
             };
-            false: {
+            md: {
+                content: string;
+            };
+            lg: {
+                content: string;
+            };
+            xl: {
+                content: string;
+            };
+            full: {
                 content: string;
             };
         };
@@ -169,16 +241,34 @@ export declare const modalDefaults: {
         close: string;
     }, {
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+                content: string;
+            };
+            scale: {
                 overlay: string;
                 content: string;
             };
         };
-        fullscreen: {
-            true: {
+        size: {
+            sm: {
                 content: string;
             };
-            false: {
+            md: {
+                content: string;
+            };
+            lg: {
+                content: string;
+            };
+            xl: {
+                content: string;
+            };
+            full: {
                 content: string;
             };
         };

package/dist/Modal/modal.variants.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 { useFormField } from '../hooks/useFormField.svelte.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,
@@ -43,6 +47,9 @@
     }: Props = $props()
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+    const isDisabled = $derived(disabled || loading)
     const autoInputId = useId()
     const hasError = $derived(
@@ -69,9 +76,15 @@
     function handleValueChange(v: string) {
         const filtered = type === 'number' ? v.replace(/\D/g, '') : v
         value = filtered
+        emit.onInput()
         onValueChange?.(filtered)
     }
+    function handleComplete(v: string) {
+        emit.onChange()
+        onComplete?.(v)
+    }
     const slots = $derived(
         pinInputVariants({
             variant,
@@ -79,7 +92,7 @@
             size: resolvedSize,
             highlight: resolvedHighlight,
             fixed,
-            disabled
+            disabled: isDisabled
         })
     )
@@ -100,17 +113,25 @@
     })
 </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}
+        onComplete={handleComplete}
         pasteTransformer={resolvedPasteTransformer}
         {pushPasswordManagerStrategy}
         inputId={resolvedInputId}

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

@@ -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/RadioGroup/RadioGroup.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
     import { radioGroupVariants, radioGroupDefaults } from './radio-group.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
     import Icon from '../Icon/Icon.svelte'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
     import type { RadioGroupItem } from './radio-group.types.js'
     const config = getComponentConfig('radioGroup', radioGroupDefaults)
@@ -43,6 +43,7 @@
     }: Props = $props()
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
@@ -159,10 +160,23 @@
     {/if}
 {/snippet}
-<div {...restProps} bind:this={ref} class={layoutClasses.root}>
+<div
+    {...restProps}
+    bind:this={ref}
+    class={layoutClasses.root}
+    onfocusin={() => emit.onFocus()}
+    onfocusout={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+            emit.onBlur()
+        }
+    }}
+>
     <RadioGroup.Root
         bind:value
-        {onValueChange}
+        onValueChange={(val) => {
+            emit.onChange()
+            onValueChange?.(val)
+        }}
         id={resolvedId}
         name={resolvedName}
         disabled={isDisabled}

package/dist/Select/Select.svelte CHANGED Viewed

@@ -16,7 +16,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.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('select', selectDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -31,6 +31,8 @@
         name,
         required = false,
         disabled = false,
+        multiple = false,
+        separator = ', ',
         ui,
         id,
         color = config.defaultVariants.color,
@@ -64,11 +66,13 @@
         itemLeading,
         itemLabel: itemLabelSlot,
         itemTrailing,
+        selected: selectedSlot,
         content: contentSlot
     }: Props = $props()
     // ---- Form context ----
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
     const fieldGroupContext = getContext<
         | {
@@ -112,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
@@ -235,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}
@@ -302,7 +338,7 @@
                             {@render itemSlot({
                                 item: selectItem,
                                 index,
-                                selected: value === selectItem.value
+                                selected: selectedValues.includes(selectItem.value)
                             })}
                         {:else}
                             {@render renderItem(selectItem, index)}
@@ -314,16 +350,7 @@
     </Select.Content>
 {/snippet}
-<Select.Root
-    type="single"
-    bind:open
-    onOpenChange={(val) => onOpenChange?.(val)}
-    {disabled}
-    {required}
-    items={bitsItems}
-    {value}
-    onValueChange={(val) => (value = val)}
->
+{#snippet rootChildren()}
     <div bind:this={ref} class={rootClass}>
         {#if leadingSlot}
             <span class={leadingClass}>
@@ -350,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>
@@ -375,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}