sv5ui 1.1.3 → 1.3.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'