sv5ui 1.1.3 → 1.3.0

package/dist/Link/link.types.d.ts

@@ -1,16 +1,17 @@
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-import type { LinkVariantProps, LinkSlots } from './link.variants.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LinkSlots } from './link.variants.js';
 import type { ClassNameValue } from 'tailwind-merge';
-export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
+export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     /**
-     * The destination URL for the anchor element.
+     * Bindable reference to the root DOM element.
      */
-    href: string;
+    ref?: HTMLElement | null;
     /**
-     * Sets the color scheme applied to the link.
-     * @default 'primary'
+     * The destination URL for the anchor element.
+     * When omitted, renders as a `<button>` element.
      */
-    color?: NonNullable<LinkVariantProps['color']>;
+    href?: string;
     /**
      * Overrides the auto-detected active state.
      * When omitted, the active state is inferred from the current route.
@@ -57,6 +58,19 @@ export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
      * Auto-detected from the `href` when omitted.
      */
     external?: boolean;
+    /**
+     * The button type attribute. Only applies when rendering as `<button>`.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * The link target attribute. Only applies when rendering as `<a>`.
+     */
+    target?: string;
+    /**
+     * The link rel attribute. Only applies when rendering as `<a>`.
+     */
+    rel?: string;
     /**
      * Additional CSS classes for the root element.
      */
@@ -65,4 +79,8 @@ export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
      * Override styles for specific link slots.
      */
     ui?: Partial<Record<LinkSlots, ClassNameValue>>;
+    /**
+     * Content rendered inside the link.
+     */
+    children?: Snippet;
 };

package/dist/Link/link.variants.d.ts

@@ -1,17 +1,12 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const linkVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
     active: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     disabled: {
         true: {
@@ -24,20 +19,15 @@ export declare const linkVariants: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    base: string[];
+    base: string;
 }, undefined, {
-    color: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
     active: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     disabled: {
         true: {
@@ -50,20 +40,15 @@ export declare const linkVariants: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    base: string[];
+    base: string;
 }, import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
     active: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     disabled: {
         true: {
@@ -76,24 +61,19 @@ export declare const linkVariants: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    base: string[];
+    base: string;
 }, undefined, unknown, unknown, undefined>>;
 export type LinkVariantProps = VariantProps<typeof linkVariants>;
 export type LinkSlots = keyof ReturnType<typeof linkVariants>;
 export declare const linkDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
-        color: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            success: string;
-            warning: string;
-            error: string;
-            info: string;
-        };
         active: {
-            true: string;
-            false: string;
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
         };
         disabled: {
             true: {
@@ -106,20 +86,15 @@ export declare const linkDefaults: {
             false: string;
         };
     }, {
-        base: string[];
+        base: string;
     }, {
-        color: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            success: string;
-            warning: string;
-            error: string;
-            info: string;
-        };
         active: {
-            true: string;
-            false: string;
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
         };
         disabled: {
             true: {
@@ -132,7 +107,7 @@ export declare const linkDefaults: {
             false: string;
         };
     }, {
-        base: string[];
+        base: string;
     }>;
     slots: Partial<Record<LinkSlots, string>>;
 };

package/dist/Link/link.variants.js

@@ -1,25 +1,16 @@
 import { tv } from 'tailwind-variants';
 export const linkVariants = tv({
     slots: {
-        base: [
-            'inline-flex items-center',
-            'transition-colors duration-200',
-            'focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
-        ]
+        base: 'focus-visible:outline-primary'
     },
     variants: {
-        color: {
-            primary: '',
-            secondary: '',
-            tertiary: '',
-            success: '',
-            warning: '',
-            error: '',
-            info: ''
-        },
         active: {
-            true: '',
-            false: ''
+            true: {
+                base: 'text-primary'
+            },
+            false: {
+                base: 'text-on-surface-variant'
+            }
         },
         disabled: {
             true: {
@@ -33,107 +24,14 @@ export const linkVariants = tv({
         }
     },
     compoundVariants: [
-        // ========== PRIMARY ==========
-        {
-            color: 'primary',
-            active: true,
-            raw: false,
-            class: { base: 'text-primary' }
-        },
-        {
-            color: 'primary',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-primary/80 hover:text-primary' }
-        },
-        // ========== SECONDARY ==========
-        {
-            color: 'secondary',
-            active: true,
-            raw: false,
-            class: { base: 'text-secondary' }
-        },
-        {
-            color: 'secondary',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-secondary/80 hover:text-secondary' }
-        },
-        // ========== TERTIARY ==========
-        {
-            color: 'tertiary',
-            active: true,
-            raw: false,
-            class: { base: 'text-tertiary' }
-        },
-        {
-            color: 'tertiary',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-tertiary/80 hover:text-tertiary' }
-        },
-        // ========== SUCCESS ==========
-        {
-            color: 'success',
-            active: true,
-            raw: false,
-            class: { base: 'text-success' }
-        },
-        {
-            color: 'success',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-success/80 hover:text-success' }
-        },
-        // ========== WARNING ==========
-        {
-            color: 'warning',
-            active: true,
-            raw: false,
-            class: { base: 'text-warning' }
-        },
-        {
-            color: 'warning',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-warning/80 hover:text-warning' }
-        },
-        // ========== ERROR ==========
-        {
-            color: 'error',
-            active: true,
-            raw: false,
-            class: { base: 'text-error' }
-        },
-        {
-            color: 'error',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-error/80 hover:text-error' }
-        },
-        // ========== INFO ==========
-        {
-            color: 'info',
-            active: true,
-            raw: false,
-            class: { base: 'text-info' }
-        },
         {
-            color: 'info',
             active: false,
             disabled: false,
             raw: false,
-            class: { base: 'text-info/80 hover:text-info' }
+            class: { base: 'hover:text-on-surface transition-colors' }
         }
     ],
     defaultVariants: {
-        color: 'primary',
         active: false,
         disabled: false,
         raw: false

package/dist/Modal/Modal.svelte

@@ -40,6 +40,7 @@
         header: headerSlot,
         titleSlot,
         descriptionSlot,
+        actions: actionsSlot,
         body: bodySlot,
         footer: footerSlot,
         closeSlot
@@ -51,7 +52,9 @@
     const hasTitle = $derived(!!title || !!titleSlot)
     const hasDescription = $derived(!!description || !!descriptionSlot)
     const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(!!headerSlot || hasHeading || showClose || !!closeSlot)
+    const hasHeader = $derived(
+        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+    )
 
     const variantSlots = $derived(
         modalVariants({ transition, fullscreen, overlay: showOverlay, scrollable })
@@ -66,6 +69,7 @@
         description: variantSlots.description({
             class: [config.slots.description, ui?.description]
         }),
+        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
         body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
         footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
         close: variantSlots.close({ class: [config.slots.close, ui?.close] })
@@ -132,6 +136,10 @@
                             {/if}
                         </div>
 
+                        {#if actionsSlot}
+                            <div class={classes.actions}>{@render actionsSlot()}</div>
+                        {/if}
+
                         {#if showClose || closeSlot}
                             <Dialog.Close>
                                 {#snippet child({ props })}

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

@@ -113,6 +113,11 @@ export interface ModalProps extends RootProps, ContentProps {
      * Custom description slot. Overrides the `description` prop when provided.
      */
     descriptionSlot?: Snippet;
+    /**
+     * Actions slot rendered between the title/description wrapper
+     * and the close button inside the header.
+     */
+    actions?: Snippet;
     /**
      * Body content rendered between the header and footer.
      */

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

@@ -38,6 +38,7 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, undefined, {
     transition: {
@@ -78,6 +79,7 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
@@ -118,6 +120,7 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ModalVariantProps = VariantProps<typeof modalVariants>;
@@ -162,6 +165,7 @@ export declare const modalDefaults: {
         footer: string;
         title: string;
         description: string;
+        actions: string;
         close: string;
     }, {
         transition: {
@@ -202,6 +206,7 @@ export declare const modalDefaults: {
         footer: string;
         title: string;
         description: string;
+        actions: string;
         close: string;
     }>;
     slots: Partial<Record<ModalSlots, string>>;

package/dist/Modal/modal.variants.js

@@ -9,6 +9,7 @@ export const modalVariants = tv({
         footer: 'flex items-center gap-1.5 p-4 sm:px-6',
         title: 'text-on-surface font-semibold',
         description: 'mt-1 text-on-surface-variant text-sm',
+        actions: 'flex items-center gap-1.5 shrink-0',
         close: 'absolute top-4 end-4'
     },
     variants: {