sv5ui 1.1.3 → 1.3.0

package/dist/FileUpload/file-upload.variants.js

@@ -0,0 +1,224 @@
+import { tv } from 'tailwind-variants';
+export const fileUploadVariants = tv({
+    slots: {
+        root: 'relative flex flex-col',
+        base: [
+            'w-full bg-surface-container border border-outline-variant select-none',
+            'flex flex-col items-stretch justify-center rounded-lg',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200'
+        ],
+        wrapper: 'flex flex-col items-center justify-center text-center',
+        icon: 'shrink-0 text-on-surface-variant',
+        label: 'font-medium text-on-surface mt-2',
+        description: 'text-on-surface-variant mt-1',
+        actions: 'flex flex-wrap gap-1.5 shrink-0 mt-4',
+        files: '',
+        file: 'relative',
+        fileLeading: 'shrink-0',
+        fileWrapper: 'flex flex-col min-w-0',
+        fileName: 'text-on-surface truncate',
+        fileSize: 'text-on-surface-variant truncate',
+        fileTrailing: '',
+        previewContent: '',
+        previewBody: ''
+    },
+    variants: {
+        color: {
+            primary: { base: 'focus-visible:outline-primary' },
+            secondary: { base: 'focus-visible:outline-secondary' },
+            tertiary: { base: 'focus-visible:outline-tertiary' },
+            success: { base: 'focus-visible:outline-success' },
+            warning: { base: 'focus-visible:outline-warning' },
+            error: { base: 'focus-visible:outline-error' },
+            info: { base: 'focus-visible:outline-info' },
+            surface: { base: 'focus-visible:outline-outline' }
+        },
+        variant: {
+            area: {
+                base: 'p-4 min-h-[120px]',
+                wrapper: 'py-6'
+            },
+            button: {}
+        },
+        size: {
+            xs: {
+                base: 'text-xs',
+                icon: 'size-5',
+                label: 'text-xs',
+                description: 'text-xs',
+                file: 'text-xs px-2 py-1 gap-1',
+                fileWrapper: 'flex-row gap-1'
+            },
+            sm: {
+                base: 'text-xs',
+                icon: 'size-6',
+                label: 'text-sm',
+                description: 'text-xs',
+                file: 'text-xs px-2.5 py-1.5 gap-1.5',
+                fileWrapper: 'flex-row gap-1'
+            },
+            md: {
+                base: 'text-sm',
+                icon: 'size-8',
+                label: 'text-sm',
+                description: 'text-sm',
+                file: 'text-xs px-2.5 py-1.5 gap-1.5'
+            },
+            lg: {
+                base: 'text-sm',
+                icon: 'size-10',
+                label: 'text-base',
+                description: 'text-sm',
+                file: 'text-sm px-3 py-2 gap-2',
+                fileSize: 'text-xs'
+            },
+            xl: {
+                base: 'text-base',
+                icon: 'size-12',
+                label: 'text-base',
+                description: 'text-base',
+                file: 'text-sm px-3 py-2 gap-2'
+            }
+        },
+        layout: {
+            list: {
+                root: 'gap-2 items-start',
+                files: 'flex flex-col w-full gap-1.5',
+                file: 'min-w-0 flex items-center bg-surface-container border border-outline-variant rounded-md w-full',
+                fileTrailing: 'ms-auto'
+            },
+            grid: {
+                root: 'gap-2',
+                files: 'grid grid-cols-2 gap-3 w-full',
+                file: 'relative aspect-square rounded-lg border border-outline-variant',
+                fileWrapper: 'hidden',
+                fileLeading: 'size-full',
+                fileTrailing: ''
+            }
+        },
+        dropzone: {
+            true: {
+                base: 'border-dashed data-[dragging=true]:bg-surface-container-high data-[dragging=true]:border-solid'
+            }
+        },
+        interactive: {
+            true: {
+                base: 'cursor-pointer hover:bg-surface-container-high'
+            }
+        },
+        highlight: {
+            true: {}
+        },
+        multiple: {
+            true: {}
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-75 hover:bg-surface-container'
+            }
+        }
+    },
+    compoundVariants: [
+        // Highlight: colored border
+        { color: 'primary', highlight: true, class: { base: 'border-primary' } },
+        { color: 'secondary', highlight: true, class: { base: 'border-secondary' } },
+        { color: 'tertiary', highlight: true, class: { base: 'border-tertiary' } },
+        { color: 'success', highlight: true, class: { base: 'border-success' } },
+        { color: 'warning', highlight: true, class: { base: 'border-warning' } },
+        { color: 'error', highlight: true, class: { base: 'border-error' } },
+        { color: 'info', highlight: true, class: { base: 'border-info' } },
+        { color: 'surface', highlight: true, class: { base: 'border-outline' } },
+        // Dragging: colored border per color
+        {
+            color: 'primary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-primary' }
+        },
+        {
+            color: 'secondary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-secondary' }
+        },
+        {
+            color: 'tertiary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-tertiary' }
+        },
+        {
+            color: 'success',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-success' }
+        },
+        {
+            color: 'warning',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-warning' }
+        },
+        { color: 'error', dropzone: true, class: { base: 'data-[dragging=true]:border-error' } },
+        { color: 'info', dropzone: true, class: { base: 'data-[dragging=true]:border-info' } },
+        // Button variant size padding
+        { variant: 'button', size: 'xs', class: { base: 'p-1' } },
+        { variant: 'button', size: 'sm', class: { base: 'p-1.5' } },
+        { variant: 'button', size: 'md', class: { base: 'p-1.5' } },
+        { variant: 'button', size: 'lg', class: { base: 'p-2' } },
+        { variant: 'button', size: 'xl', class: { base: 'p-2' } },
+        // Grid + multiple: 3 cols on larger screens, remove button outside top-right corner
+        {
+            layout: 'grid',
+            multiple: true,
+            class: { files: 'sm:grid-cols-3', fileTrailing: 'absolute -top-1.5 -end-1.5' }
+        },
+        // Grid + single: file overlays the base, remove button top-right inside
+        // variant:'area' guard is required — without it, variant='button' would also get
+        // absolute inset-0 on the external file item, making it invisible.
+        {
+            layout: 'grid',
+            multiple: false,
+            variant: 'area',
+            class: {
+                base: 'relative overflow-hidden',
+                file: 'absolute inset-0 p-0 border-0 rounded-none aspect-auto',
+                fileTrailing: 'absolute top-2 end-2'
+            }
+        },
+        // List size trailing adjustments
+        { size: 'xs', layout: 'list', class: { fileTrailing: '-me-1' } },
+        { size: 'sm', layout: 'list', class: { fileTrailing: '-me-1.5' } },
+        { size: 'md', layout: 'list', class: { fileTrailing: '-me-1.5' } },
+        { size: 'lg', layout: 'list', class: { fileTrailing: '-me-2' } },
+        { size: 'xl', layout: 'list', class: { fileTrailing: '-me-2' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'area',
+        size: 'md',
+        layout: 'list'
+    }
+});
+export const fileUploadDefaults = {
+    defaultVariants: {
+        color: 'primary',
+        variant: 'area',
+        size: 'md',
+        layout: 'list'
+    },
+    slots: {
+        root: '',
+        base: '',
+        wrapper: '',
+        icon: '',
+        label: '',
+        description: '',
+        actions: '',
+        files: '',
+        file: '',
+        fileLeading: '',
+        fileWrapper: '',
+        fileName: '',
+        fileSize: '',
+        fileTrailing: '',
+        previewContent: '',
+        previewBody: ''
+    }
+};

package/dist/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileUpload } from './FileUpload.svelte';
+export type { FileUploadProps } from './file-upload.types.js';

package/dist/FileUpload/index.js

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

package/dist/FormField/FormField.svelte

@@ -13,6 +13,7 @@
     const config = getComponentConfig('formField', formFieldDefaults)
 
     let {
+        ref = $bindable(null),
         ui,
         name,
         label,
@@ -36,23 +37,21 @@
     const id = useId()
     const ariaId = $derived(name ? `form-field-${name}` : id)
 
-    const classes = $derived.by(() => {
-        const slots = formFieldVariants({ size, required, orientation })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-            labelWrapper: slots.labelWrapper({
-                class: [config.slots.labelWrapper, ui?.labelWrapper]
-            }),
-            label: slots.label({ class: [config.slots.label, ui?.label] }),
-            container: slots.container({ class: [config.slots.container, ui?.container] }),
-            description: slots.description({
-                class: [config.slots.description, ui?.description]
-            }),
-            error: slots.error({ class: [config.slots.error, ui?.error] }),
-            hint: slots.hint({ class: [config.slots.hint, ui?.hint] }),
-            help: slots.help({ class: [config.slots.help, ui?.help] })
-        }
+    const variantSlots = $derived(formFieldVariants({ size, required, orientation }))
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+        labelWrapper: variantSlots.labelWrapper({
+            class: [config.slots.labelWrapper, ui?.labelWrapper]
+        }),
+        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+        description: variantSlots.description({
+            class: [config.slots.description, ui?.description]
+        }),
+        error: variantSlots.error({ class: [config.slots.error, ui?.error] }),
+        hint: variantSlots.hint({ class: [config.slots.hint, ui?.hint] }),
+        help: variantSlots.help({ class: [config.slots.help, ui?.help] })
     })
 
     const hasError = $derived(error !== undefined && error !== false)
@@ -79,7 +78,7 @@
     })
 </script>
 
-<div class={classes.root} {...restProps}>
+<div bind:this={ref} class={classes.root} {...restProps}>
     <div class={classes.wrapper}>
         {#if label || labelSlot || hint || hintSlot}
             <div class={classes.labelWrapper}>

package/dist/FormField/FormField.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldProps } from './form-field.types.js';
 export type Props = FormFieldProps;
-declare const FormField: import("svelte").Component<FormFieldProps, {}, "">;
+declare const FormField: import("svelte").Component<FormFieldProps, {}, "ref">;
 type FormField = ReturnType<typeof FormField>;
 export default FormField;

package/dist/FormField/form-field.types.d.ts

@@ -3,6 +3,10 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { FormFieldSlots, FormFieldVariantProps } from './form-field.variants.js';
 export type FormFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The name of the form field, used for matching form errors.
      */

package/dist/Icon/Icon.svelte

@@ -6,6 +6,7 @@
 
 <script lang="ts">
     import Icon from '@iconify/svelte'
+    import { twMerge } from 'tailwind-merge'
 
     let {
         name,
@@ -18,14 +19,19 @@
         ...restProps
     }: Props = $props()
 
-    const flip = $derived.by(() => {
-        if (flipH && flipV) return 'horizontal,vertical'
-        if (flipH) return 'horizontal'
-        if (flipV) return 'vertical'
-        return undefined
-    })
+    const flip = $derived(
+        flipH && flipV
+            ? 'horizontal,vertical'
+            : flipH
+              ? 'horizontal'
+              : flipV
+                ? 'vertical'
+                : undefined
+    )
 
     const rotateValue = $derived(rotate ? rotate / 90 : undefined)
+
+    const iconClass = $derived(twMerge('shrink-0', className))
 </script>
 
 <Icon
@@ -35,6 +41,6 @@
     {color}
     {flip}
     rotate={rotateValue}
-    class="shrink-0 {className ?? ''}"
+    class={iconClass}
     {...restProps}
 />

package/dist/Icon/icon.types.d.ts

@@ -1,7 +1,6 @@
 import type { IconProps as IconifyProps } from '@iconify/svelte';
+import type { ClassNameValue } from 'tailwind-merge';
 export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'> {
-    /** Additional CSS classes */
-    class?: string;
     /**
      * Icon name in Iconify format: "collection:icon-name"
      * @example "lucide:home", "mdi:account", "heroicons:star"
@@ -9,29 +8,39 @@ export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height
      */
     name: string;
     /**
-     * Icon size (applied to both width and height)
-     * @default "1em"
+     * Icon size (applied to both width and height).
+     * Accepts a number (pixels) or CSS string value.
+     * @default 24
      * @example 24, "1.5rem", "20px"
      */
     size?: number | string;
     /**
-     * Icon color (CSS color value)
-     * @example "red", "#ff0000", "rgb(255, 0, 0)", "currentColor"
+     * Icon color (CSS color value).
+     * Defaults to `currentColor`, inheriting the parent's text color.
+     * Use Tailwind `text-*` classes on the parent or via `class` prop as an alternative.
+     * @default "currentColor"
+     * @example "red", "#ff0000", "rgb(255, 0, 0)"
      */
     color?: string;
     /**
-     * Flip icon horizontally
+     * Flip icon horizontally.
      * @default false
      */
     flipH?: boolean;
     /**
-     * Flip icon vertically
+     * Flip icon vertically.
      * @default false
      */
     flipV?: boolean;
     /**
-     * Rotate icon by specified degrees
+     * Rotate icon by specified degrees (quarter turns only).
+     * For arbitrary rotation, use a CSS class like `rotate-45`.
      * @default 0
      */
     rotate?: 0 | 90 | 180 | 270;
+    /**
+     * Additional CSS classes for the icon.
+     * Merged with `shrink-0` via tailwind-merge, so conflicting utilities are resolved correctly.
+     */
+    class?: ClassNameValue;
 }

package/dist/Input/Input.svelte

@@ -94,15 +94,16 @@
         loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
     )
 
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const id = formFieldContext.ariaId
-        if (hasError) return `${id}-error`
-        return `${id}-description ${id}-help`
-    })
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
 
-    const classes = $derived.by(() => {
-        const slots = inputVariants({
+    const variantSlots = $derived(
+        inputVariants({
             variant,
             color: resolvedColor,
             size: resolvedSize,
@@ -111,26 +112,26 @@
             loading,
             highlight: resolvedHighlight
         })
-        return {
-            root: slots.root({
-                class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-            }),
-            base: slots.base({
-                class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-            }),
-            leading: slots.leading({ class: [config.slots.leading, ui?.leading] }),
-            leadingIcon: slots.leadingIcon({
-                class: [config.slots.leadingIcon, ui?.leadingIcon]
-            }),
-            leadingAvatar: slots.leadingAvatar({
-                class: [config.slots.leadingAvatar, ui?.leadingAvatar]
-            }),
-            leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize,
-            trailing: slots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
-            trailingIcon: slots.trailingIcon({
-                class: [config.slots.trailingIcon, ui?.trailingIcon]
-            })
-        }
+    )
+    const classes = $derived({
+        root: variantSlots.root({
+            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
+        }),
+        base: variantSlots.base({
+            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
+        }),
+        leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
+        leadingIcon: variantSlots.leadingIcon({
+            class: [config.slots.leadingIcon, ui?.leadingIcon]
+        }),
+        leadingAvatar: variantSlots.leadingAvatar({
+            class: [config.slots.leadingAvatar, ui?.leadingAvatar]
+        }),
+        leadingAvatarSize: variantSlots.leadingAvatarSize() as AvatarSize,
+        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+        trailingIcon: variantSlots.trailingIcon({
+            class: [config.slots.trailingIcon, ui?.trailingIcon]
+        })
     })
 </script>
 
@@ -150,6 +151,7 @@
     {/if}
 
     <input
+        {...restProps}
         bind:this={ref}
         bind:value
         {type}
@@ -159,7 +161,6 @@
         aria-describedby={ariaDescribedBy}
         aria-invalid={resolvedHighlight ? true : undefined}
         class={classes.base}
-        {...restProps}
     />
 
     {#if trailingSlot}

package/dist/Kbd/Kbd.svelte

@@ -6,27 +6,37 @@
 </script>
 
 <script lang="ts">
+    import { onMount } from 'svelte'
     import { kbdVariants, kbdDefaults } from './kbd.variants.js'
     import { getComponentConfig } from '../config.js'
 
     const config = getComponentConfig('kbd', kbdDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'kbd',
         value,
         color = config.defaultVariants.color,
         size = config.defaultVariants.size,
         variant = config.defaultVariants.variant,
+        ui,
         class: className,
         children,
         ...restProps
     }: Props = $props()
 
-    const displayValue = $derived(resolveKey(value))
-    const kbdClass = $derived(kbdVariants({ color, size, variant, class: className }))
+    let mounted = $state(false)
+    onMount(() => (mounted = true))
+
+    const displayValue = $derived(resolveKey(value, mounted))
+    const kbdClass = $derived(
+        kbdVariants({ color, size, variant }).base({
+            class: [config.slots.base, className, ui?.base]
+        })
+    )
 </script>
 
-<svelte:element this={as} class={kbdClass} {...restProps}>
+<svelte:element this={as} bind:this={ref} class={kbdClass} {...restProps}>
     {#if children}
         {@render children()}
     {:else if displayValue}

package/dist/Kbd/Kbd.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { KbdProps } from './kbd.types.js';
 export type Props = KbdProps;
-declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+declare const Kbd: import("svelte").Component<KbdProps, {}, "ref">;
 type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;

package/dist/Kbd/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Kbd } from './Kbd.svelte';
-export type { KbdProps } from './kbd.types.js';
+export type { KbdProps, UseKbdOptions, UseKbdReturn } from './kbd.types.js';
 export { formatShortcut, useKbd } from './useKbd.svelte.js';

package/dist/Kbd/kbd.types.d.ts

@@ -1,6 +1,7 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { KbdVariantProps } from './kbd.variants.js';
+import type { KbdVariantProps, KbdSlots } from './kbd.variants.js';
 export type KeyboardShortcutCallback = (event: KeyboardEvent) => void;
 export interface UseKbdOptions {
     /**
@@ -43,6 +44,10 @@ export interface UseKbdReturn {
     readonly pressedKeys: ReadonlySet<string>;
 }
 export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Sets the HTML element type to render.
      * @default 'kbd'
@@ -70,8 +75,17 @@ export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
      * @default 'outline'
      */
     variant?: NonNullable<KbdVariantProps['variant']>;
+    /**
+     * Override styles for specific kbd slots.
+     * Available slots: base.
+     */
+    ui?: Partial<Record<KbdSlots, ClassNameValue>>;
     /**
      * Additional CSS classes for the root element.
      */
     class?: ClassNameValue;
+    /**
+     * Default content slot for custom key display.
+     */
+    children?: Snippet;
 };