svelora 2.1.0

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

@@ -0,0 +1,316 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            root: string;
+            icon: string;
+        };
+        '2xs': {
+            root: string;
+            icon: string;
+        };
+        xs: {
+            root: string;
+            icon: string;
+        };
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+        xl: {
+            root: string;
+            icon: string;
+        };
+        '2xl': {
+            root: string;
+            icon: string;
+        };
+        '3xl': {
+            root: string;
+            icon: string;
+        };
+    };
+    rounded: {
+        full: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        none: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, undefined, {
+    size: {
+        '3xs': {
+            root: string;
+            icon: string;
+        };
+        '2xs': {
+            root: string;
+            icon: string;
+        };
+        xs: {
+            root: string;
+            icon: string;
+        };
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+        xl: {
+            root: string;
+            icon: string;
+        };
+        '2xl': {
+            root: string;
+            icon: string;
+        };
+        '3xl': {
+            root: string;
+            icon: string;
+        };
+    };
+    rounded: {
+        full: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        none: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            root: string;
+            icon: string;
+        };
+        '2xs': {
+            root: string;
+            icon: string;
+        };
+        xs: {
+            root: string;
+            icon: string;
+        };
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+        xl: {
+            root: string;
+            icon: string;
+        };
+        '2xl': {
+            root: string;
+            icon: string;
+        };
+        '3xl': {
+            root: string;
+            icon: string;
+        };
+    };
+    rounded: {
+        full: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        none: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+export type AvatarSize = NonNullable<AvatarVariantProps['size']>;
+export type AvatarSlots = keyof ReturnType<typeof avatarVariants>;
+/** Tailwind size-4 through size-12 → (4 + index) × 4 pixels */
+export declare const avatarSizePx: Record<AvatarSize, number>;
+export declare const avatarDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            '3xs': {
+                root: string;
+                icon: string;
+            };
+            '2xs': {
+                root: string;
+                icon: string;
+            };
+            xs: {
+                root: string;
+                icon: string;
+            };
+            sm: {
+                root: string;
+                icon: string;
+            };
+            md: {
+                root: string;
+                icon: string;
+            };
+            lg: {
+                root: string;
+                icon: string;
+            };
+            xl: {
+                root: string;
+                icon: string;
+            };
+            '2xl': {
+                root: string;
+                icon: string;
+            };
+            '3xl': {
+                root: string;
+                icon: string;
+            };
+        };
+        rounded: {
+            full: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            none: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        image: string;
+        fallback: string;
+        icon: string;
+    }, {
+        size: {
+            '3xs': {
+                root: string;
+                icon: string;
+            };
+            '2xs': {
+                root: string;
+                icon: string;
+            };
+            xs: {
+                root: string;
+                icon: string;
+            };
+            sm: {
+                root: string;
+                icon: string;
+            };
+            md: {
+                root: string;
+                icon: string;
+            };
+            lg: {
+                root: string;
+                icon: string;
+            };
+            xl: {
+                root: string;
+                icon: string;
+            };
+            '2xl': {
+                root: string;
+                icon: string;
+            };
+            '3xl': {
+                root: string;
+                icon: string;
+            };
+        };
+        rounded: {
+            full: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            none: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        image: string;
+        fallback: string;
+        icon: string;
+    }>;
+    slots: Partial<Record<AvatarSlots, string>>;
+};

package/dist/Avatar/avatar.variants.js

@@ -0,0 +1,39 @@
+import { tv } from 'tailwind-variants';
+export const avatarVariants = tv({
+    slots: {
+        root: 'inline-flex items-center justify-center shrink-0 select-none align-middle bg-surface-container-highest',
+        image: 'h-full w-full rounded-[inherit] object-cover',
+        fallback: 'font-medium leading-none truncate text-on-surface-variant',
+        icon: 'text-on-surface-variant'
+    },
+    variants: {
+        size: {
+            '3xs': { root: 'size-4 text-[8px]', icon: 'size-2.5' },
+            '2xs': { root: 'size-5 text-[10px]', icon: 'size-3' },
+            xs: { root: 'size-6 text-xs', icon: 'size-3.5' },
+            sm: { root: 'size-7 text-sm', icon: 'size-4' },
+            md: { root: 'size-8 text-base', icon: 'size-5' },
+            lg: { root: 'size-9 text-lg', icon: 'size-5' },
+            xl: { root: 'size-10 text-xl', icon: 'size-6' },
+            '2xl': { root: 'size-11 text-[22px]', icon: 'size-7' },
+            '3xl': { root: 'size-12 text-2xl', icon: 'size-8' }
+        },
+        rounded: {
+            full: { root: 'rounded-full' },
+            lg: { root: 'rounded-lg' },
+            md: { root: 'rounded-md' },
+            sm: { root: 'rounded-sm' },
+            none: { root: 'rounded-none' }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        rounded: 'full'
+    }
+});
+/** Tailwind size-4 through size-12 → (4 + index) × 4 pixels */
+export const avatarSizePx = Object.fromEntries(Object.keys(avatarVariants.variants.size).map((key, i) => [key, (4 + i) * 4]));
+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, AvatarSize } 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,71 @@
+<script lang="ts" module>
+    import type { AvatarGroupProps } from './avatar-group.types.js'
+
+    export type Props = AvatarGroupProps
+</script>
+
+<script lang="ts">
+    import { setContext } from 'svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarRounded, AvatarSize } from '../Avatar/avatar.types.js'
+    import { getComponentConfig } from '../config.js'
+    import { avatarGroupDefaults, avatarGroupVariants } from './avatar-group.variants.js'
+
+    const config = getComponentConfig('avatarGroup', avatarGroupDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        size = config.defaultVariants.size ?? 'md',
+        rounded = config.defaultVariants.rounded ?? 'full',
+        avatars,
+        max,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const classes = $derived.by(() => {
+        const slots = avatarGroupVariants({ size, rounded })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            base: slots.base({ class: [config.slots.base, ui?.base] })
+        }
+    })
+
+    setContext<{ size: AvatarSize; rounded: AvatarRounded; baseClass: string }>('avatarGroup', {
+        get size() {
+            return size
+        },
+        get rounded() {
+            return rounded
+        },
+        get baseClass() {
+            return classes.base
+        }
+    })
+
+    const visibleAvatars = $derived.by(() => {
+        if (!avatars) return []
+        const shown = max && max > 0 ? avatars.slice(0, max) : avatars
+        return [...shown].reverse()
+    })
+
+    const overflowCount = $derived(
+        avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0
+    )
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if avatars}
+        {#if overflowCount > 0}
+            <Avatar text={`+${overflowCount}`} />
+        {/if}
+        {#each visibleAvatars as avatar, index (index)}
+            <Avatar {...avatar} />
+        {/each}
+    {:else if children}
+        {@render children()}
+    {/if}
+</svelte:element>

package/dist/AvatarGroup/AvatarGroup.svelte.d.ts

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

package/dist/AvatarGroup/avatar-group.types.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarProps, AvatarRounded, AvatarSize } from '../Avatar/avatar.types.js';
+import type { AvatarGroupSlots } from './avatar-group.variants.js';
+export type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Controls the size of all avatars in the group.
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Controls the border radius of all avatars in the group.
+     * @default 'full'
+     */
+    rounded?: AvatarRounded;
+    /**
+     * Array of avatar props to render.
+     * Use with `max` to limit visible count.
+     */
+    avatars?: Omit<AvatarProps, 'size' | 'rounded' | 'children'>[];
+    /**
+     * Maximum visible avatars.
+     * Excess displayed as a "+N" indicator.
+     */
+    max?: number;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific avatar group slots.
+     */
+    ui?: Partial<Record<AvatarGroupSlots, ClassNameValue>>;
+    /**
+     * Custom content to render inside the group.
+     * When provided, overrides the `avatars` prop.
+     */
+    children?: Snippet;
+};

package/dist/AvatarGroup/avatar-group.types.js

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