sv5ui 1.1.2 → 1.2.0

package/dist/Empty/empty.variants.js

@@ -1,360 +1,69 @@
 import { tv } from 'tailwind-variants';
 export const emptyVariants = tv({
     slots: {
-        root: 'flex flex-col items-center justify-center rounded-lg text-center',
-        icon: 'shrink-0',
-        avatar: 'shrink-0',
-        title: 'font-medium',
-        description: '',
-        actions: 'flex flex-wrap items-center justify-center gap-2'
+        root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
+        header: 'flex flex-col items-center gap-2 max-w-sm text-center',
+        avatar: 'shrink-0 mb-2',
+        title: 'text-on-surface text-pretty font-medium',
+        description: 'text-balance text-center',
+        body: 'flex flex-col items-center gap-4 max-w-sm',
+        actions: 'flex flex-wrap justify-center gap-2 shrink-0',
+        footer: 'flex flex-col items-center gap-2 max-w-sm'
     },
     variants: {
-        variant: {
-            solid: '',
-            outline: '',
-            soft: '',
-            subtle: ''
-        },
-        color: {
-            primary: '',
-            secondary: '',
-            tertiary: '',
-            success: '',
-            warning: '',
-            error: '',
-            info: '',
-            surface: ''
-        },
         size: {
             xs: {
-                root: 'gap-2 p-4',
-                icon: 'size-8',
+                avatar: 'size-8 text-base',
                 title: 'text-sm',
                 description: 'text-xs'
             },
             sm: {
-                root: 'gap-2.5 p-5',
-                icon: 'size-10',
+                avatar: 'size-9 text-lg',
                 title: 'text-sm',
                 description: 'text-xs'
             },
             md: {
-                root: 'gap-3 p-6',
-                icon: 'size-12',
+                avatar: 'size-10 text-xl',
                 title: 'text-base',
                 description: 'text-sm'
             },
             lg: {
-                root: 'gap-4 p-8',
-                icon: 'size-14',
-                title: 'text-lg',
+                avatar: 'size-11 text-[22px]',
+                title: 'text-base',
                 description: 'text-sm'
             },
             xl: {
-                root: 'gap-5 p-10',
-                icon: 'size-16',
-                title: 'text-xl',
+                avatar: 'size-12 text-2xl',
+                title: 'text-lg',
                 description: 'text-base'
             }
-        }
-    },
-    compoundVariants: [
-        // ========== SOLID VARIANTS ==========
-        {
-            variant: 'solid',
-            color: 'primary',
-            class: {
-                root: 'bg-primary text-on-primary',
-                icon: 'text-on-primary/70',
-                description: 'text-on-primary/80'
-            }
-        },
-        {
-            variant: 'solid',
-            color: 'secondary',
-            class: {
-                root: 'bg-secondary text-on-secondary',
-                icon: 'text-on-secondary/70',
-                description: 'text-on-secondary/80'
-            }
-        },
-        {
-            variant: 'solid',
-            color: 'tertiary',
-            class: {
-                root: 'bg-tertiary text-on-tertiary',
-                icon: 'text-on-tertiary/70',
-                description: 'text-on-tertiary/80'
-            }
-        },
-        {
-            variant: 'solid',
-            color: 'success',
-            class: {
-                root: 'bg-success text-on-success',
-                icon: 'text-on-success/70',
-                description: 'text-on-success/80'
-            }
-        },
-        {
-            variant: 'solid',
-            color: 'warning',
-            class: {
-                root: 'bg-warning text-on-warning',
-                icon: 'text-on-warning/70',
-                description: 'text-on-warning/80'
-            }
-        },
-        {
-            variant: 'solid',
-            color: 'error',
-            class: {
-                root: 'bg-error text-on-error',
-                icon: 'text-on-error/70',
-                description: 'text-on-error/80'
-            }
         },
-        {
-            variant: 'solid',
-            color: 'info',
-            class: {
-                root: 'bg-info text-on-info',
-                icon: 'text-on-info/70',
-                description: 'text-on-info/80'
-            }
-        },
-        {
-            variant: 'solid',
-            color: 'surface',
-            class: {
-                root: 'bg-inverse-surface text-inverse-on-surface',
-                icon: 'text-inverse-on-surface/70',
+        variant: {
+            solid: {
+                root: 'bg-inverse-surface',
+                avatar: 'text-inverse-on-surface/70',
+                title: 'text-inverse-on-surface',
                 description: 'text-inverse-on-surface/80'
-            }
-        },
-        // ========== OUTLINE VARIANTS ==========
-        {
-            variant: 'outline',
-            color: 'primary',
-            class: {
-                root: 'ring ring-inset ring-primary/25 text-primary',
-                icon: 'text-primary/70',
-                description: 'text-primary/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'secondary',
-            class: {
-                root: 'ring ring-inset ring-secondary/25 text-secondary',
-                icon: 'text-secondary/70',
-                description: 'text-secondary/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'tertiary',
-            class: {
-                root: 'ring ring-inset ring-tertiary/25 text-tertiary',
-                icon: 'text-tertiary/70',
-                description: 'text-tertiary/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'success',
-            class: {
-                root: 'ring ring-inset ring-success/25 text-success',
-                icon: 'text-success/70',
-                description: 'text-success/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'warning',
-            class: {
-                root: 'ring ring-inset ring-warning/25 text-warning',
-                icon: 'text-warning/70',
-                description: 'text-warning/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'error',
-            class: {
-                root: 'ring ring-inset ring-error/25 text-error',
-                icon: 'text-error/70',
-                description: 'text-error/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'info',
-            class: {
-                root: 'ring ring-inset ring-info/25 text-info',
-                icon: 'text-info/70',
-                description: 'text-info/80'
-            }
-        },
-        {
-            variant: 'outline',
-            color: 'surface',
-            class: {
-                root: 'ring ring-inset ring-outline-variant text-on-surface',
-                icon: 'text-on-surface-variant',
+            },
+            outline: {
+                root: 'ring ring-outline-variant',
                 description: 'text-on-surface-variant'
-            }
-        },
-        // ========== SOFT VARIANTS ==========
-        {
-            variant: 'soft',
-            color: 'primary',
-            class: {
-                root: 'bg-primary-container text-on-primary-container',
-                icon: 'text-on-primary-container/70',
-                description: 'text-on-primary-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'secondary',
-            class: {
-                root: 'bg-secondary-container text-on-secondary-container',
-                icon: 'text-on-secondary-container/70',
-                description: 'text-on-secondary-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'tertiary',
-            class: {
-                root: 'bg-tertiary-container text-on-tertiary-container',
-                icon: 'text-on-tertiary-container/70',
-                description: 'text-on-tertiary-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'success',
-            class: {
-                root: 'bg-success-container text-on-success-container',
-                icon: 'text-on-success-container/70',
-                description: 'text-on-success-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'warning',
-            class: {
-                root: 'bg-warning-container text-on-warning-container',
-                icon: 'text-on-warning-container/70',
-                description: 'text-on-warning-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'error',
-            class: {
-                root: 'bg-error-container text-on-error-container',
-                icon: 'text-on-error-container/70',
-                description: 'text-on-error-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'info',
-            class: {
-                root: 'bg-info-container text-on-info-container',
-                icon: 'text-on-info-container/70',
-                description: 'text-on-info-container/80'
-            }
-        },
-        {
-            variant: 'soft',
-            color: 'surface',
-            class: {
-                root: 'bg-surface-container-highest text-on-surface',
-                icon: 'text-on-surface-variant',
+            },
+            soft: {
+                root: 'bg-surface-container-highest/50',
                 description: 'text-on-surface-variant'
-            }
-        },
-        // ========== SUBTLE VARIANTS ==========
-        {
-            variant: 'subtle',
-            color: 'primary',
-            class: {
-                root: 'bg-primary-container text-on-primary-container ring ring-inset ring-primary/25',
-                icon: 'text-on-primary-container/70',
-                description: 'text-on-primary-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'secondary',
-            class: {
-                root: 'bg-secondary-container text-on-secondary-container ring ring-inset ring-secondary/25',
-                icon: 'text-on-secondary-container/70',
-                description: 'text-on-secondary-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'tertiary',
-            class: {
-                root: 'bg-tertiary-container text-on-tertiary-container ring ring-inset ring-tertiary/25',
-                icon: 'text-on-tertiary-container/70',
-                description: 'text-on-tertiary-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'success',
-            class: {
-                root: 'bg-success-container text-on-success-container ring ring-inset ring-success/25',
-                icon: 'text-on-success-container/70',
-                description: 'text-on-success-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'warning',
-            class: {
-                root: 'bg-warning-container text-on-warning-container ring ring-inset ring-warning/25',
-                icon: 'text-on-warning-container/70',
-                description: 'text-on-warning-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'error',
-            class: {
-                root: 'bg-error-container text-on-error-container ring ring-inset ring-error/25',
-                icon: 'text-on-error-container/70',
-                description: 'text-on-error-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'info',
-            class: {
-                root: 'bg-info-container text-on-info-container ring ring-inset ring-info/25',
-                icon: 'text-on-info-container/70',
-                description: 'text-on-info-container/80'
-            }
-        },
-        {
-            variant: 'subtle',
-            color: 'surface',
-            class: {
-                root: 'bg-surface-container-highest text-on-surface ring ring-inset ring-outline-variant',
-                icon: 'text-on-surface-variant',
+            },
+            subtle: {
+                root: 'bg-surface-container-highest/50 ring ring-outline-variant',
+                description: 'text-on-surface-variant'
+            },
+            naked: {
                 description: 'text-on-surface-variant'
             }
         }
-    ],
+    },
     defaultVariants: {
         variant: 'outline',
-        color: 'surface',
         size: 'md'
     }
 });

package/dist/FieldGroup/FieldGroup.svelte

@@ -12,6 +12,7 @@
     const config = getComponentConfig('fieldGroup', fieldGroupDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         ui,
         size = config.defaultVariants.size ?? 'md',
@@ -21,11 +22,9 @@
         ...restProps
     }: Props = $props()
 
-    const classes = $derived.by(() => {
-        const slots = fieldGroupVariants({ size, orientation })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] })
-        }
+    const variantSlots = $derived(fieldGroupVariants({ size, orientation }))
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] })
     })
 
     setContext<{
@@ -41,7 +40,13 @@
     })
 </script>
 
-<svelte:element this={as} class={classes.root} data-orientation={orientation} {...restProps}>
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
     {#if children}
         {@render children()}
     {/if}

package/dist/FieldGroup/FieldGroup.svelte.d.ts

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

package/dist/FieldGroup/field-group.types.d.ts

@@ -3,6 +3,10 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { FieldGroupSlots, FieldGroupVariantProps } from './field-group.variants.js';
 export type FieldGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The HTML element to render as.
      * @default 'div'

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;
 }