sv5ui 0.0.1

package/dist/Alert/alert.variants.js

@@ -0,0 +1,293 @@
+import { tv } from 'tailwind-variants';
+export const alertVariants = tv({
+    slots: {
+        root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
+        wrapper: 'min-w-0 flex-1 flex flex-col',
+        title: 'text-sm font-medium',
+        description: 'text-sm opacity-90',
+        icon: 'shrink-0 size-5',
+        avatar: 'shrink-0',
+        actions: 'flex flex-wrap gap-1.5 shrink-0',
+        close: 'p-0'
+    },
+    variants: {
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: ''
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        orientation: {
+            horizontal: {
+                root: 'items-center',
+                actions: 'items-center'
+            },
+            vertical: {
+                root: 'items-start',
+                actions: 'items-start mt-2.5'
+            }
+        },
+        title: {
+            true: {
+                description: 'mt-1'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== SOLID VARIANT (button styling) ==========
+        {
+            variant: 'solid',
+            class: {
+                actions: '[&_button]:text-inherit [&_button]:border-current/30 [&_button]:hover:bg-current/10',
+                close: 'text-inherit hover:bg-current/10'
+            }
+        },
+        // ========== SOLID VARIANTS (colors) ==========
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: {
+                root: 'bg-primary text-on-primary'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary text-on-secondary'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: {
+                root: 'bg-success text-on-success'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: {
+                root: 'bg-warning text-on-warning'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'error',
+            class: {
+                root: 'bg-error text-on-error'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: {
+                root: 'bg-info text-on-info'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary text-on-tertiary'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'surface',
+            class: {
+                root: 'bg-inverse-surface text-inverse-on-surface'
+            }
+        },
+        // ========== OUTLINE VARIANTS ==========
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: {
+                root: 'text-primary ring ring-inset ring-primary/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: {
+                root: 'text-secondary ring ring-inset ring-secondary/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: {
+                root: 'text-success ring ring-inset ring-success/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: {
+                root: 'text-warning ring ring-inset ring-warning/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: {
+                root: 'text-error ring ring-inset ring-error/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: {
+                root: 'text-info ring ring-inset ring-info/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: {
+                root: 'text-tertiary ring ring-inset ring-tertiary/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: {
+                root: 'text-on-surface-variant ring ring-inset ring-outline-variant'
+            }
+        },
+        // ========== SOFT VARIANTS ==========
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: {
+                root: 'bg-primary/10 text-primary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary/10 text-secondary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: {
+                root: 'bg-success/10 text-success'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: {
+                root: 'bg-warning/10 text-warning'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'error',
+            class: {
+                root: 'bg-error/10 text-error'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: {
+                root: 'bg-info/10 text-info'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary/10 text-tertiary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'surface',
+            class: {
+                root: 'bg-surface-container-highest text-on-surface'
+            }
+        },
+        // ========== SUBTLE VARIANTS ==========
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary/10 text-secondary ring ring-inset ring-secondary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                root: 'bg-success/10 text-success ring ring-inset ring-success/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                root: 'bg-warning/10 text-warning ring ring-inset ring-warning/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                root: 'bg-error/10 text-error ring ring-inset ring-error/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: {
+                root: 'bg-info/10 text-info ring ring-inset ring-info/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary/10 text-tertiary ring ring-inset ring-tertiary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                root: 'bg-surface-container-highest text-on-surface ring ring-inset ring-outline-variant'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        color: 'primary',
+        orientation: 'horizontal'
+    }
+});
+export const alertDefaults = {
+    defaultVariants: alertVariants.defaultVariants,
+    slots: {}
+};

package/dist/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+export type { AlertProps } from './alert.types.js';

package/dist/Alert/index.js

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

package/dist/Avatar/Avatar.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+    import type { AvatarProps, AvatarSize } from './avatar.types.js'
+
+    export type Props = AvatarProps
+
+    const SIZE_PX: Record<AvatarSize, number> = {
+        '3xs': 16,
+        '2xs': 20,
+        xs: 24,
+        sm: 28,
+        md: 32,
+        lg: 36,
+        xl: 40,
+        '2xl': 44,
+        '3xl': 48
+    }
+</script>
+
+<script lang="ts">
+    import { Avatar } from 'bits-ui'
+    import { avatarVariants, avatarDefaults } from './avatar.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import { getContext } from 'svelte'
+
+    const config = getComponentConfig('avatar', avatarDefaults)
+
+    let {
+        ref = $bindable(null),
+        src,
+        alt,
+        size,
+        text,
+        delayMs = 0,
+        class: className,
+        ui,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const groupContext = getContext<{ size: AvatarSize; baseClass: string } | undefined>('avatarGroup')
+
+    const resolvedSize = $derived(size ?? groupContext?.size ?? config.defaultVariants.size ?? 'md')
+    const sizePx = $derived(SIZE_PX[resolvedSize])
+
+    const initials = $derived(
+        text || (alt ? alt.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase() : '')
+    )
+
+    const classes = $derived.by(() => {
+        const slots = avatarVariants({ size: resolvedSize })
+        return {
+            root: slots.root({ class: [config.slots.root, groupContext?.baseClass, className, ui?.root] }),
+            image: slots.image({ class: [config.slots.image, ui?.image] }),
+            fallback: slots.fallback({ class: [config.slots.fallback, ui?.fallback] })
+        }
+    })
+</script>
+
+<Avatar.Root bind:ref class={classes.root} {delayMs} {...restProps}>
+    {#if children}
+        {@render children()}
+    {:else}
+        {#if src}
+            <Avatar.Image {src} alt={alt ?? ''} class={classes.image} width={sizePx} height={sizePx} />
+        {/if}
+        <Avatar.Fallback class={classes.fallback}>
+            {initials}
+        </Avatar.Fallback>
+    {/if}
+</Avatar.Root>

package/dist/Avatar/Avatar.svelte.d.ts

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

package/dist/Avatar/avatar.types.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+import type { Avatar } from 'bits-ui';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarVariantProps, AvatarSlots } from './avatar.variants.js';
+export type AvatarSize = NonNullable<AvatarVariantProps['size']>;
+export type AvatarProps = Omit<Avatar.RootProps, 'children'> & {
+    /**
+     * Controls the dimensions of the avatar.
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * URL of the image to display.
+     * The image will be shown once it loads successfully.
+     */
+    src?: string;
+    /**
+     * Alternative text describing the avatar image.
+     * Used for accessibility and to auto-generate initials as fallback.
+     */
+    alt?: string;
+    /**
+     * Text to display when no image is available.
+     * Overrides auto-generated initials from `alt`.
+     */
+    text?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific avatar slots.
+     */
+    ui?: Partial<Record<AvatarSlots, ClassNameValue>>;
+    /**
+     * Custom content to render inside the avatar.
+     * When provided, overrides image, text, and icon.
+     */
+    children?: Snippet;
+};

package/dist/Avatar/avatar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Avatar/avatar.variants.d.ts

@@ -0,0 +1,178 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            root: string;
+        };
+        '2xs': {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+        '3xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+}, undefined, {
+    size: {
+        '3xs': {
+            root: string;
+        };
+        '2xs': {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+        '3xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            root: string;
+        };
+        '2xs': {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+        '3xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+export type AvatarSlots = keyof ReturnType<typeof avatarVariants>;
+export declare const avatarDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            '3xs': {
+                root: string;
+            };
+            '2xs': {
+                root: string;
+            };
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+            '2xl': {
+                root: string;
+            };
+            '3xl': {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        image: string;
+        fallback: string;
+    }, {
+        size: {
+            '3xs': {
+                root: string;
+            };
+            '2xs': {
+                root: string;
+            };
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+            '2xl': {
+                root: string;
+            };
+            '3xl': {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        image: string;
+        fallback: string;
+    }>;
+    slots: Partial<Record<AvatarSlots, string>>;
+};

package/dist/Avatar/avatar.variants.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+export const avatarVariants = tv({
+    slots: {
+        root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle overflow-hidden bg-surface-container-highest',
+        image: 'h-full w-full rounded-[inherit] object-cover',
+        fallback: 'font-medium leading-none truncate text-on-surface-variant'
+    },
+    variants: {
+        size: {
+            '3xs': { root: 'size-4 text-[8px]' },
+            '2xs': { root: 'size-5 text-[10px]' },
+            xs: { root: 'size-6 text-xs' },
+            sm: { root: 'size-7 text-sm' },
+            md: { root: 'size-8 text-base' },
+            lg: { root: 'size-9 text-lg' },
+            xl: { root: 'size-10 text-xl' },
+            '2xl': { root: 'size-11 text-[22px]' },
+            '3xl': { root: 'size-12 text-2xl' }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const avatarDefaults = {
+    defaultVariants: avatarVariants.defaultVariants,
+    slots: {}
+};

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarProps } from './avatar.types.js';

package/dist/Avatar/index.js

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

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+    import type { AvatarGroupProps } from './avatar-group.types.js'
+
+    export type Props = AvatarGroupProps
+</script>
+
+<script lang="ts">
+    import { avatarGroupVariants, avatarGroupDefaults } from './avatar-group.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import { setContext } from 'svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+
+    const config = getComponentConfig('avatarGroup', avatarGroupDefaults)
+
+    let {
+        as = 'div',
+        ui,
+        size = config.defaultVariants.size ?? 'md',
+        avatars,
+        max,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const classes = $derived.by(() => {
+        const slots = avatarGroupVariants({ size })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            base: slots.base({ class: [config.slots.base, ui?.base] })
+        }
+    })
+
+    setContext<{ size: AvatarSize; baseClass: string }>('avatarGroup', {
+        get size() {
+            return size
+        },
+        get baseClass() {
+            return classes.base
+        }
+    })
+
+    const visibleAvatars = $derived(
+        !avatars ? [] :
+        max && max > 0 && avatars.length > max ? avatars.slice(0, max) :
+        avatars
+    )
+
+    const overflowCount = $derived(
+        avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0
+    )
+</script>
+
+<svelte:element this={as} class={classes.root} {...restProps}>
+    {#if avatars}
+        {#if overflowCount > 0}
+            <Avatar text={`+${overflowCount}`} />
+        {/if}
+        {#each visibleAvatars as avatar}
+            <Avatar {...avatar} />
+        {/each}
+    {:else if children}
+        {@render children()}
+    {/if}
+</svelte:element>