sv5ui 1.1.3 → 1.2.0

package/dist/Button/Button.svelte

@@ -5,13 +5,13 @@
 </script>
 
 <script lang="ts">
-    import { Button } from 'bits-ui'
     import { buttonVariants, buttonDefaults } from './button.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
     import { getContext } from 'svelte'
     import { fieldGroupVariant } from '../FieldGroup/field-group.variants.js'
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.svelte'
+    import Link from '../Link/Link.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
     import type { FieldGroupVariantProps } from '../FieldGroup/field-group.variants.js'
 
@@ -26,6 +26,7 @@
         size,
         label,
         loading = false,
+        loadingAuto = false,
         loadingIcon = icons.loading,
         disabled = false,
         block = false,
@@ -35,10 +36,20 @@
         trailingIcon,
         trailing = false,
         avatar,
+        href,
+        type,
+        external,
+        active,
+        exact = false,
+        activeColor,
+        activeVariant,
+        activeClass,
+        inactiveClass,
         leadingSlot,
         trailingSlot,
         children,
         class: className,
+        onclick,
         ...restProps
     }: Props = $props()
 
@@ -57,27 +68,34 @@
             : undefined
     )
 
+    let autoLoading = $state(false)
+    let pendingPromise: Promise<unknown> | null = null
+    const isLoading = $derived(loading || autoLoading)
+
     const isIconOnly = $derived(square || (!label && !children))
-    const isLeading = $derived((!!icon && !trailing) || (loading && !trailing) || !!leadingIcon)
-    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
+    const isLeading = $derived((!!icon && !trailing) || (isLoading && !trailing) || !!leadingIcon)
+    const isTrailing = $derived((!!icon && trailing) || (isLoading && trailing) || !!trailingIcon)
 
     const leadingIconName = $derived(
-        loading && isLeading
+        isLoading && isLeading
             ? loadingIcon
             : leadingIcon || (isLeading && !trailing ? icon : undefined)
     )
     const trailingIconName = $derived(
-        loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
+        isLoading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
     )
 
+    const resolvedColor = $derived(active && activeColor ? activeColor : color)
+    const resolvedVariant = $derived(active && activeVariant ? activeVariant : variant)
+
     const classes = $derived.by(() => {
         const slots = buttonVariants({
-            variant,
-            color,
+            variant: resolvedVariant,
+            color: resolvedColor,
             size: resolvedSize,
             block,
             square: isIconOnly,
-            loading,
+            loading: isLoading,
             leading: isLeading,
             trailing: isTrailing
         })
@@ -94,9 +112,48 @@
             leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize
         }
     })
+
+    function handleClick(e: MouseEvent) {
+        if (disabled || isLoading) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+        }
+
+        if (typeof onclick === 'function') {
+            const result = (onclick as (e: MouseEvent) => unknown)(e)
+
+            if (loadingAuto && result instanceof Promise) {
+                autoLoading = true
+                pendingPromise = result
+                result.then(
+                    () => {
+                        if (pendingPromise === result) autoLoading = false
+                    },
+                    () => {
+                        if (pendingPromise === result) autoLoading = false
+                    }
+                )
+            }
+        }
+    }
 </script>
 
-<Button.Root bind:ref class={classes.base} disabled={disabled || loading} {...restProps}>
+<Link
+    {...restProps}
+    bind:ref
+    {href}
+    {type}
+    {external}
+    {active}
+    {exact}
+    {activeClass}
+    {inactiveClass}
+    raw
+    disabled={disabled || isLoading}
+    class={classes.base}
+    onclick={handleClick}
+>
     {#if leadingSlot}
         {@render leadingSlot()}
     {:else if isLeading && leadingIconName}
@@ -105,12 +162,10 @@
         <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
     {/if}
 
-    {#if !isIconOnly}
-        {#if label}
-            <span class={classes.label}>{label}</span>
-        {:else if children}
-            <span class={classes.label}>{@render children()}</span>
-        {/if}
+    {#if label}
+        <span class={classes.label}>{label}</span>
+    {:else if children}
+        <span class={classes.label}>{@render children()}</span>
     {/if}
 
     {#if trailingSlot}
@@ -118,4 +173,4 @@
     {:else if isTrailing && trailingIconName}
         <Icon name={trailingIconName} class={classes.trailingIcon} />
     {/if}
-</Button.Root>
+</Link>

package/dist/Button/Button.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { ButtonProps } from './button.types.js';
 export type Props = ButtonProps;
-import { Button } from 'bits-ui';
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/Button/button.types.d.ts

@@ -1,9 +1,13 @@
 import type { Snippet } from 'svelte';
-import type { Button } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { ButtonVariantProps, ButtonSlots } from './button.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-export type ButtonProps = Button.RootProps & {
+export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Controls the visual style of the button.
      * @default 'solid'
@@ -29,12 +33,22 @@ export type ButtonProps = Button.RootProps & {
      * @default false
      */
     loading?: boolean;
+    /**
+     * Automatically shows loading state while the onclick handler's Promise is pending.
+     * @default false
+     */
+    loadingAuto?: boolean;
     /**
      * Icon displayed as the loading indicator.
      * Supports any valid Iconify icon name.
      * @default Uses `icons.loading` from app config
      */
     loadingIcon?: string;
+    /**
+     * Disables the button and prevents interaction.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Stretches the button to fill the full width of its container.
      * @default false
@@ -71,6 +85,47 @@ export type ButtonProps = Button.RootProps & {
      * Takes precedence over `leadingIcon`.
      */
     avatar?: AvatarProps;
+    /**
+     * The destination URL. When provided, renders as an anchor element.
+     */
+    href?: string;
+    /**
+     * The button type attribute. Only applies when rendering as `<button>`.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Treats the link as external, adding `rel="noopener noreferrer"` and `target="_blank"`.
+     * Auto-detected from the `href` when omitted.
+     */
+    external?: boolean;
+    /**
+     * Overrides the auto-detected active state.
+     */
+    active?: boolean;
+    /**
+     * Requires an exact pathname match for active state detection.
+     * @default false
+     */
+    exact?: boolean;
+    /**
+     * Color scheme applied when the button is active.
+     * Falls back to the `color` prop when omitted.
+     */
+    activeColor?: NonNullable<ButtonVariantProps['color']>;
+    /**
+     * Visual style applied when the button is active.
+     * Falls back to the `variant` prop when omitted.
+     */
+    activeVariant?: NonNullable<ButtonVariantProps['variant']>;
+    /**
+     * Additional CSS class applied when the button link is active.
+     */
+    activeClass?: string;
+    /**
+     * Additional CSS class applied when the button link is inactive.
+     */
+    inactiveClass?: string;
     /**
      * Custom content rendered before the label.
      * Takes precedence over `avatar` and `leadingIcon`.
@@ -81,6 +136,10 @@ export type ButtonProps = Button.RootProps & {
      * Takes precedence over `trailingIcon`.
      */
     trailingSlot?: Snippet;
+    /**
+     * Custom content for the button label area.
+     */
+    children?: Snippet;
     /**
      * Additional CSS classes for the root element.
      */

package/dist/Calendar/Calendar.svelte

@@ -20,6 +20,7 @@
     const config = getComponentConfig('calendar', calendarDefaults)
 
     let {
+        ref = $bindable(null),
         value = $bindable(),
         onValueChange,
         placeholder = $bindable(),
@@ -245,6 +246,7 @@
         | 'weekNumbers'
     >}
     <RangeCalendar.Root
+        bind:ref
         bind:value={value as CalendarRangeProps['value']}
         onValueChange={onValueChange as CalendarRangeProps['onValueChange']}
         {...commonProps}
@@ -264,6 +266,7 @@
     {@const calInitialFocus = (restProps as { initialFocus?: boolean }).initialFocus}
     {#if calType === 'multiple'}
         <Calendar.Root
+            bind:ref
             bind:value={value as CalendarMultipleProps['value']}
             onValueChange={onValueChange as CalendarMultipleProps['onValueChange']}
             {...commonProps}
@@ -277,6 +280,7 @@
         </Calendar.Root>
     {:else}
         <Calendar.Root
+            bind:ref
             bind:value={value as CalendarSingleProps['value']}
             onValueChange={onValueChange as CalendarSingleProps['onValueChange']}
             {...commonProps}

package/dist/Calendar/Calendar.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { CalendarProps } from './calendar.types.js';
 export type Props = CalendarProps;
 import { Calendar } from 'bits-ui';
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "placeholder" | "value">;
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "placeholder" | "ref" | "value">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/Calendar/calendar.types.d.ts

@@ -44,6 +44,10 @@ type SharedCalendarRootProps = {
     disableDaysOutsideMonth?: boolean;
 };
 type BaseCalendarProps = {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /** @default 'lucide:chevron-left' */
     prevMonthIcon?: string;
     /** @default 'lucide:chevron-right' */

package/dist/Card/Card.svelte

@@ -11,6 +11,7 @@
     const config = getComponentConfig('card', cardDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         ui,
         variant = config.defaultVariants.variant,
@@ -25,14 +26,14 @@
         const slots = cardVariants({ variant })
         return {
             root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            header: header ? slots.header({ class: [config.slots.header, ui?.header] }) : '',
-            body: children ? slots.body({ class: [config.slots.body, ui?.body] }) : '',
-            footer: footer ? slots.footer({ class: [config.slots.footer, ui?.footer] }) : ''
+            header: slots.header({ class: [config.slots.header, ui?.header] }),
+            body: slots.body({ class: [config.slots.body, ui?.body] }),
+            footer: slots.footer({ class: [config.slots.footer, ui?.footer] })
         }
     })
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
     {#if header}
         <div class={classes.header}>
             {@render header()}

package/dist/Card/Card.svelte.d.ts

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

package/dist/Card/card.types.d.ts

@@ -2,7 +2,11 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { CardVariantProps, CardSlots } from './card.variants.js';
-export type CardProps = HTMLAttributes<HTMLDivElement> & {
+export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Renders the card as a different HTML element.
      * @default 'div'

package/dist/Checkbox/Checkbox.svelte

@@ -16,6 +16,7 @@
     const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
+        ref = $bindable(null),
         checked = $bindable(false),
         onCheckedChange,
         indeterminate = $bindable(false),
@@ -26,6 +27,8 @@
         value,
         color = config.defaultVariants.color,
         size,
+        variant = config.defaultVariants.variant,
+        indicator = config.defaultVariants.indicator,
         disabled = false,
         required = false,
         loading = false,
@@ -36,7 +39,8 @@
         description,
         labelSlot,
         descriptionSlot,
-        class: className
+        class: className,
+        ...restProps
     }: Props = $props()
 
     const formFieldContext = getContext<
@@ -59,18 +63,31 @@
     const resolvedName = $derived(name ?? formFieldContext?.name)
     const isDisabled = $derived(disabled || loading)
 
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const fid = formFieldContext.ariaId
-        return hasError ? `${fid}-error` : `${fid}-description ${fid}-help`
-    })
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
 
     const resolvedIcon = $derived(loading ? loadingIcon : indeterminate ? indeterminateIcon : icon)
 
+    let containerRef: HTMLElement | null = null
+
+    function handleCardClick(e: MouseEvent) {
+        if (isDisabled) return
+        // Don't re-click when the event originated from the checkbox button itself
+        if ((e.target as Element).closest('button')) return
+        containerRef?.querySelector('button')?.click()
+    }
+
     const classes = $derived.by(() => {
         const slots = checkboxVariants({
             color: resolvedColor,
             size: resolvedSize,
+            variant,
+            indicator,
             loading,
             required,
             disabled: isDisabled ? true : undefined
@@ -90,8 +107,13 @@
     })
 </script>
 
-<div class={classes.root}>
-    <div class={classes.container}>
+<div
+    {...restProps}
+    bind:this={ref}
+    class={classes.root}
+    onclick={variant === 'card' ? handleCardClick : undefined}
+>
+    <div bind:this={containerRef} class={classes.container}>
         <Checkbox.Root
             bind:checked
             {onCheckedChange}
@@ -123,9 +145,13 @@
             {#if labelSlot}
                 {@render labelSlot({ label })}
             {:else if label}
-                <Label.Root for={resolvedId} class={classes.label}>
-                    {label}
-                </Label.Root>
+                {#if variant === 'card'}
+                    <span class={classes.label}>{label}</span>
+                {:else}
+                    <Label.Root for={resolvedId} class={classes.label}>
+                        {label}
+                    </Label.Root>
+                {/if}
             {/if}
 
             {#if descriptionSlot}

package/dist/Checkbox/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxProps } from './checkbox.types.js';
 export type Props = CheckboxProps;
 import { Checkbox } from 'bits-ui';
-declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "indeterminate" | "checked">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "ref" | "indeterminate" | "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/Checkbox/checkbox.types.d.ts

@@ -1,8 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { CheckboxVariantProps, CheckboxSlots } from './checkbox.variants.js';
-export type CheckboxProps = Pick<CheckboxPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & {
+export type CheckboxProps = Pick<CheckboxPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The checked state of the checkbox. Supports two-way binding with `bind:checked`.
      * @default false
@@ -31,6 +36,16 @@ export type CheckboxProps = Pick<CheckboxPrimitive.RootProps, 'disabled' | 'name
      * @default 'md'
      */
     size?: NonNullable<CheckboxVariantProps['size']>;
+    /**
+     * Controls the visual style of the checkbox.
+     * @default 'list'
+     */
+    variant?: NonNullable<CheckboxVariantProps['variant']>;
+    /**
+     * Controls the position of the checkbox indicator.
+     * @default 'start'
+     */
+    indicator?: NonNullable<CheckboxVariantProps['indicator']>;
     /**
      * Renders a loading spinner inside the checkbox.
      * @default false

package/dist/Checkbox/checkbox.variants.d.ts

@@ -42,6 +42,24 @@ export declare const checkboxVariants: import("tailwind-variants").TVReturnType<
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            root: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            root: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     loading: {
         true: {
             icon: string;
@@ -112,6 +130,24 @@ export declare const checkboxVariants: import("tailwind-variants").TVReturnType<
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            root: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            root: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     loading: {
         true: {
             icon: string;
@@ -182,6 +218,24 @@ export declare const checkboxVariants: import("tailwind-variants").TVReturnType<
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            root: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            root: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     loading: {
         true: {
             icon: string;
@@ -256,6 +310,24 @@ export declare const checkboxDefaults: {
                 wrapper: string;
             };
         };
+        variant: {
+            list: string;
+            card: {
+                root: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                root: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
         loading: {
             true: {
                 icon: string;
@@ -326,6 +398,24 @@ export declare const checkboxDefaults: {
                 wrapper: string;
             };
         };
+        variant: {
+            list: string;
+            card: {
+                root: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                root: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
         loading: {
             true: {
                 icon: string;