sv5ui 0.0.1

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, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

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

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarGroupSlots } from './avatar-group.variants.js';
+import type { AvatarProps, AvatarSize } from '../Avatar/avatar.types.js';
+export type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Controls the size of all avatars in the group.
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Array of avatar props to render.
+     * Use with `max` to limit visible count.
+     */
+    avatars?: Omit<AvatarProps, 'size' | '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>>;
+};

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

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

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

@@ -0,0 +1,173 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const avatarGroupVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, undefined, {
+    size: {
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarGroupVariantProps = VariantProps<typeof avatarGroupVariants>;
+export type AvatarGroupSlots = keyof ReturnType<typeof avatarGroupVariants>;
+export declare const avatarGroupDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            '3xs': {
+                base: string;
+            };
+            '2xs': {
+                base: string;
+            };
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+            '2xl': {
+                base: string;
+            };
+            '3xl': {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }, {
+        size: {
+            '3xs': {
+                base: string;
+            };
+            '2xs': {
+                base: string;
+            };
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+            '2xl': {
+                base: string;
+            };
+            '3xl': {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }>;
+    slots: Partial<Record<AvatarGroupSlots, string>>;
+};

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

@@ -0,0 +1,45 @@
+import { tv } from 'tailwind-variants';
+export const avatarGroupVariants = tv({
+    slots: {
+        root: 'inline-flex flex-row-reverse justify-end',
+        base: 'relative rounded-full ring-surface first:me-0'
+    },
+    variants: {
+        size: {
+            '3xs': {
+                base: 'ring -me-0.5'
+            },
+            '2xs': {
+                base: 'ring -me-0.5'
+            },
+            xs: {
+                base: 'ring -me-0.5'
+            },
+            sm: {
+                base: 'ring-2 -me-1.5'
+            },
+            md: {
+                base: 'ring-2 -me-1.5'
+            },
+            lg: {
+                base: 'ring-2 -me-1.5'
+            },
+            xl: {
+                base: 'ring-3 -me-2'
+            },
+            '2xl': {
+                base: 'ring-3 -me-2'
+            },
+            '3xl': {
+                base: 'ring-3 -me-2'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const avatarGroupDefaults = {
+    defaultVariants: avatarGroupVariants.defaultVariants,
+    slots: {}
+};

package/dist/AvatarGroup/index.d.ts

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

package/dist/AvatarGroup/index.js

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

package/dist/Badge/Badge.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+    import type { BadgeProps } from './badge.types.js'
+
+    export type Props = BadgeProps
+</script>
+
+<script lang="ts">
+    import { badgeVariants, badgeDefaults } from './badge.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+
+    const config = getComponentConfig('badge', badgeDefaults)
+
+    let {
+        as = 'span',
+        ui,
+        label,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        size = config.defaultVariants.size,
+        square = false,
+        icon,
+        leadingIcon,
+        trailingIcon,
+        avatar,
+        class: className,
+        leading,
+        children,
+        trailing,
+        ...restProps
+    }: Props = $props()
+
+    const isIconOnly = $derived(!!icon || (square && !label && !children))
+
+    const classes = $derived.by(() => {
+        const slots = badgeVariants({ variant, color, size, square: isIconOnly || square })
+        return {
+            base: slots.base({ class: [config.slots.base, className, ui?.base] }),
+            label: slots.label({ class: [config.slots.label, ui?.label] }),
+            leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+            trailingIcon: slots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] }),
+            leadingAvatar: slots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] }),
+            leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize
+        }
+    })
+</script>
+
+<svelte:element this={as} class={classes.base} {...restProps}>
+    {#if leading}
+        {@render leading()}
+    {:else if avatar}
+        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+    {:else if leadingIcon}
+        <Icon name={leadingIcon} class={classes.leadingIcon} />
+    {/if}
+
+    {#if icon}
+        <Icon name={icon} class={classes.leadingIcon} />
+    {:else if !isIconOnly}
+        {#if label != null}
+            <span class={classes.label}>{label}</span>
+        {:else if children}
+            <span class={classes.label}>{@render children()}</span>
+        {/if}
+    {/if}
+
+    {#if trailing}
+        {@render trailing()}
+    {:else if trailingIcon}
+        <Icon name={trailingIcon} class={classes.trailingIcon} />
+    {/if}
+</svelte:element>

package/dist/Badge/Badge.svelte.d.ts

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

package/dist/Badge/badge.types.d.ts

@@ -0,0 +1,74 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { BadgeVariantProps, BadgeSlots } from './badge.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+    /**
+     * Sets the HTML element type to render.
+     * @default 'span'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific badge slots.
+     * Available slots: base, label, leadingIcon, trailingIcon, leadingAvatar.
+     */
+    ui?: Partial<Record<BadgeSlots, ClassNameValue>>;
+    /**
+     * Sets the text content displayed inside the badge.
+     */
+    label?: string | number;
+    /**
+     * Sets the color scheme applied to the badge.
+     * @default 'primary'
+     */
+    color?: NonNullable<BadgeVariantProps['color']>;
+    /**
+     * Sets the visual style variant of the badge.
+     * @default 'solid'
+     */
+    variant?: NonNullable<BadgeVariantProps['variant']>;
+    /**
+     * Controls the size of the badge.
+     * @default 'md'
+     */
+    size?: NonNullable<BadgeVariantProps['size']>;
+    /**
+     * Renders the badge with equal padding for a square shape.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * Sets the icon for an icon-only badge.
+     * Accepts any Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Sets the icon displayed before the label.
+     * Accepts any Iconify icon name.
+     */
+    leadingIcon?: string;
+    /**
+     * Sets the icon displayed after the label.
+     * Accepts any Iconify icon name.
+     */
+    trailingIcon?: string;
+    /**
+     * Configures the avatar displayed on the leading side.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom leading content slot.
+     * Takes precedence over avatar and leadingIcon.
+     */
+    leading?: Snippet;
+    /**
+     * Custom trailing content slot.
+     * Takes precedence over trailingIcon.
+     */
+    trailing?: Snippet;
+};

package/dist/Badge/badge.types.js

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