@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/toast/ToasterModal.svelte

@@ -1,180 +1,114 @@
 <script lang="ts" module>
-// Import Toast Component from UI Folder
-import { toast, Toaster } from '../ui/sonner';
-
-// Import Icons from Icons Folder
-import Exclamation from '../../icons/Exclamation.svelte';
-import Checked from '../../icons/Checked.svelte';
-
-// Where the toasters are drawn (the page's document, or a shadow root): see ./toasterRoots.ts
-import { toastLookupRoots } from './toasterRoots';
-
-// Import Toast Types directly from the svelte-sonner module
-// import type { ToastTypes } from 'svelte-sonner';
-// Define the ToastTypes type
-type ToastTypes = 'success' | 'error' | 'warning' | 'info' | 'loading';
-
-/* COMPONENT PROPS */
-let className = '';
-export { className as class };
-export let style: string = '';
-// Default Duration
-export let defaultDuration: number = 3000;
-// root element reference
-export let element: HTMLElement | null = null;
-
-
-/* STATE VARIABLES */
-let toastMainClass = 'toast-modal';
-// Track toast visibility to prevent multiple toasts
-let isToastVisible = false;
-
-/**
- * Shows a toast notification with consistent styling and positioning
- * @param type Type of toast message (success, error, warning)
- * @param title Main message text
- * @param options Additional options including description
- */
-export function showToast(type: string = 'success', title: string, options: any = null) {
-  
-
-  // Prevent multiple toasts from appearing simultaneously
-  // if (isToastVisible) return;
-  
-  // Set the toast visibility to true
-  isToastVisible = true;
-
-  // If options is null, set it to an empty object
-  if (options === null) {
-    options = {};
-  }
-
-  // Get the duration from the options or use the default duration
-  const duration = options?.duration || defaultDuration;
-
-  // set close icon - not working !!!
-  options.closeIcon = Exclamation;
-
-  // Get the title color from the options or use the default color
-  const titleColor = type === 'success' ? '--grey7' : type === 'error' ? '--error' : '--dark';
-
-  // set icon depending on the type of toast
-  if(type === 'error') options.icon = Exclamation;
-  if(type === 'success') options.icon = Checked;
-
-  // set icon background fill color
-  if(type === 'success') options.iconBgFillColor = '--icon-success';
-  if(type === 'error')   options.iconBgFillColor = '--icon-error';
-  if(type === 'warning') options.iconBgFillColor = '--sunny-yellow';
-  // console.log('showToast:', type, title, titleColor, duration);
-
-  // set style of the data-icon element
-  setTimeout(() => {
-    // The elements are looked for in the root the toaster is drawn in: `document.querySelector` does not look inside
-    // a shadow root, so for a toaster in a module's shadow root the icon and the title kept the library's colours.
-    for (const lookupRoot of toastLookupRoots(document)) {
-      // set the close button color
-      let closeButtonElement = lookupRoot.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
-      // if(closeButtonElement) closeButtonElement.style.backgroundColor = 'hsl(var(' + options.closeBgFillColor + '))';
-
-      // set icon background fill color
-      let iconElement = lookupRoot.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
-      if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
-
-      // set the title color
-      let titleElement = lookupRoot.querySelector('.' + toastMainClass + '-title') as HTMLElement; //console.log('titleElement:', titleElement);
-      if(titleElement) titleElement.style.color = 'hsl(var(' + titleColor + '))';
-    }
-  }, 20);
-  
-  // Call toast with custom styling
-  return toast[type as ToastTypes](title, {
-    ...options,
-    duration,
-    unstyled: true,
-    onAutoClose: () => {
-      isToastVisible = false;
-    },
-    onDismiss: () => {
-      isToastVisible = false;
-    }
-  });
-} 
-
+	import { toast, Toaster } from '../ui/sonner';
+	import IconAlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import IconCircleCheck from '@tabler/icons-svelte/icons/circle-check';
+	import IconExclamationCircle from '@tabler/icons-svelte/icons/exclamation-circle';
+	import IconInfoCircle from '@tabler/icons-svelte/icons/info-circle';
+	import { toastLookupRoots } from './toasterRoots';
+
+	type ToastTypes = 'success' | 'error' | 'warning' | 'info' | 'loading';
+
+	// Icon of each tone: the same glyphs as the Tone variants of the Toast in Figma (135:87).
+	// `info` is the Default tone of Figma. `loading` keeps the spinner of the library.
+	const toneIcons: Partial<Record<ToastTypes, typeof IconInfoCircle>> = {
+		info: IconInfoCircle,
+		success: IconCircleCheck,
+		warning: IconExclamationCircle,
+		error: IconAlertTriangle
+	};
+
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	export let defaultDuration: number = 3000;
+	export let element: HTMLElement | null = null;
+
+	let toastMainClass = 'toast-modal';
+	let isToastVisible = false;
+
+	export function showToast(
+		type: string = 'success',
+		title: string,
+		options: Record<string, unknown> | null = null
+	) {
+		isToastVisible = true;
+
+		if (options === null) {
+			options = {};
+		}
+
+		const duration = (options?.duration as number | undefined) || defaultDuration;
+
+		// Every tone has its own icon, the same one as in Figma, so a caller does not swap it.
+		const toneIcon = toneIcons[type as ToastTypes];
+		if (toneIcon) options.icon = toneIcon;
+
+		// A type the library does not know is shown as info instead of throwing, and says so once.
+		let toastKey: ToastTypes = type as ToastTypes;
+		if (typeof toast[toastKey] !== 'function') {
+			console.warn(`[showToast] Unknown toast type "${type}", showing it as info.`);
+			toastKey = 'info';
+		}
+
+		return toast[toastKey](title, {
+			...options,
+			duration,
+			unstyled: true,
+			onAutoClose: () => {
+				isToastVisible = false;
+			},
+			onDismiss: () => {
+				isToastVisible = false;
+			}
+		});
+	}
 </script>
 
 <script lang="ts">
-import { onMount } from 'svelte';
-import { registerToasterRoot } from './toasterRoots';
-import { useTextDirection } from '../textDirection.js';
+	import { onMount } from 'svelte';
+	import { registerToasterRoot } from './toasterRoots';
+	import { useTextDirection } from '../textDirection.js';
 
-/**
- * The words a screen reader hears: the region that holds the toasts ("Notifications", read with the key that moves
- * focus to it) and the button that closes one ("Close toast"). A page in another language gives its own words;
- * left out, the English ones of the library are used.
- */
-export let containerAriaLabel: string | undefined = undefined;
-export let closeButtonAriaLabel: string | undefined = undefined;
+	export let containerAriaLabel: string | undefined = undefined;
+	export let closeButtonAriaLabel: string | undefined = undefined;
 
-// An element with no size that is only here to ask which root (the page's document, or a shadow root) this toaster is
-// drawn in, so that `showToast` looks for the toast's icon and title there.
-let rootMarker: HTMLElement;
-onMount(() => registerToasterRoot(rootMarker.getRootNode() as Document | ShadowRoot));
+	let rootMarker: HTMLElement;
+	onMount(() => registerToasterRoot(rootMarker.getRootNode() as Document | ShadowRoot));
 
-// The toaster reads the direction of the PAGE's <html> unless it is told, and a module on a left to right page that
-// speaks Arabic (or the other way around) must follow its own screen. The toasts sit in the corner at the end of the
-// line: the right in a left to right screen, the left in a right to left one.
-const textDirection = useTextDirection();
+	const textDirection = useTextDirection();
 </script>
 
-<!-- HTML Template -->
 <span hidden bind:this={rootMarker}></span>
 <Toaster
-  theme="light"
-  dir={$textDirection}
-  position={$textDirection === 'rtl' ? 'bottom-left' : 'bottom-right'}
-  {containerAriaLabel}
-  {closeButtonAriaLabel}
-  richColors
-  closeButton
-  toastOptions={{
-    style: "box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); !important;",
-    classes: {
-      toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
-                              "!min-w-[334px] !max-w-[450px] " +
-                              "!fixed !top-auto !bottom-[20px] !end-[20px] " + 
-                              "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " + 
-                              // Icon Styling
-                              "*:data-icon:!w-[24px] *:data-icon:!h-[24px] *:data-icon:!m-0 " + 
-                              "[&>[data-icon]>svg]:!w-full [&>[data-icon]>svg]:!h-full " +
-                              // Content Styling
-                              "[&>[data-content]>svg]:flex [&>[data-content]>svg]:flex-col [&>[data-content]>svg]:gap-[2px]",
-      // Title Styling
-      title: toastMainClass + "-title body-medium",
-      // Description Styling
-      description: toastMainClass + "-description caption !text-[hsl(var(--grey5))]",
-      // Action Button Styling
-      actionButton: "",
-      // Cancel Button Styling
-      cancelButton: "",
-      // Close Button Styling
-      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[-4px] !start-[-4px] z-10 ' + 
-                                    '!flex !items-center !justify-center ' +
-                                    '!bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !rounded-full !text-white ' +
-                                    '[&_svg]:!text-white [&_svg]:!fill-white [&_svg]:!stroke-white'
-    }
-  }}
-  expand={false}
-  visibleToasts={1}
-  offset="1rem"
+	theme="light"
+	dir={$textDirection}
+	position={$textDirection === 'rtl' ? 'bottom-left' : 'bottom-right'}
+	{containerAriaLabel}
+	{closeButtonAriaLabel}
+	closeButton
+	toastOptions={{
+		classes: {
+			toast:
+				toastMainClass +
+				' !fixed !bottom-5 !end-5 !flex !min-w-[20rem] !max-w-[22.25rem] !items-start !gap-3 !rounded-xl !border !border-border !bg-popover !p-4 !text-popover-foreground !shadow-none [&>[data-icon]]:!mt-0.5 [&>[data-icon]]:!size-4 [&>[data-icon]_svg]:!size-4 [&>[data-icon]_svg]:!stroke-[1.333]',
+			title: toastMainClass + '-title text-body-medium text-foreground',
+			description: toastMainClass + '-description text-body text-muted-foreground',
+			actionButton:
+				'!h-8 !rounded-lg !border !border-input !bg-background !px-2 !text-label !text-foreground hover:!bg-accent',
+			cancelButton: '',
+			closeButton:
+				toastMainClass +
+				'-close-button !absolute !-start-2 !-top-2 !flex !size-5 !items-center !justify-center !rounded-full !border !border-border !bg-foreground !text-primary-foreground [&_svg]:!size-3 [&_svg]:!stroke-[1.333]',
+			// The icon takes the colour of its tone, the Icon modes of Figma: Muted for info (Default), Brand, Warning and Destructive.
+			info: '[&>[data-icon]]:!text-muted-foreground',
+			success: '[&>[data-icon]]:!text-brand',
+			warning: '[&>[data-icon]]:!text-warning',
+			error: '[&>[data-icon]]:!text-destructive'
+		}
+	}}
+	expand={false}
+	visibleToasts={1}
+	offset="1rem"
+	class={className}
+	{style}
 />
-
-<style>
-  /* svelte-sonner close SVG ignores button `color` / Tailwind text-white. */
-  :global(.toast-modal-close-button svg),
-  :global(.toast-modal-close-button path) {
-    color: #ffffff !important;
-    fill: #ffffff !important;
-    stroke: #ffffff !important;
-  }
-</style>

package/dist/components/toast/ToasterModal.svelte.d.ts

@@ -3,13 +3,7 @@ export { className as class };
 export declare let style: string;
 export declare let defaultDuration: number;
 export declare let element: HTMLElement | null;
-/**
- * Shows a toast notification with consistent styling and positioning
- * @param type Type of toast message (success, error, warning)
- * @param title Main message text
- * @param options Additional options including description
- */
-export declare function showToast(type: string | undefined, title: string, options?: any): string | number;
+export declare function showToast(type: string | undefined, title: string, options?: Record<string, unknown> | null): string | number;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -24,11 +18,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ToasterModal: $$__sveltets_2_IsomorphicComponent<{
-    /**
-     * The words a screen reader hears: the region that holds the toasts ("Notifications", read with the key that moves
-     * focus to it) and the button that closes one ("Close toast"). A page in another language gives its own words;
-     * left out, the English ones of the library are used.
-     */ containerAriaLabel?: string | undefined;
+    containerAriaLabel?: string | undefined;
     closeButtonAriaLabel?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/ui/accordion/accordion-content.svelte

@@ -13,12 +13,13 @@
 <AccordionPrimitive.Content
 	bind:ref
 	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		"text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden transition-all",
 		className
 	)}
 	{...restProps}
 >
-	<div class="pb-4 pt-0">
+	<!-- Figma "Accordion Item" body: 4 on top, 16 on the sides and below. -->
+	<div class="px-4 pt-1 pb-4">
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

package/dist/components/ui/accordion/accordion-item.svelte

@@ -9,4 +9,13 @@
 	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<!-- Figma "Accordion Item": a card (popover fill, 1px inside stroke, radius xl) that clips its trigger and body.
+	The stroke is an inset ring, not a border, so it takes no room: the trigger and the rows keep the full 402px of the Figma frame. -->
+<AccordionPrimitive.Item
+	bind:ref
+	class={cn(
+		"bg-popover text-popover-foreground ring-border overflow-hidden rounded-xl ring-1 ring-inset",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/accordion/accordion-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -18,12 +18,13 @@
 	<AccordionPrimitive.Trigger
 		bind:ref
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			// Figma "Accordion Trigger": 48 high, 16 on the sides, 8 between the title and the chevron; hover = accent fill, focus = 2px ring inside.
+			"text-body-medium text-foreground focus-visible:ring-ring flex h-12 flex-1 items-center justify-between gap-2 px-4 text-start transition-colors duration-fast outline-none hover:bg-accent focus-visible:rounded-xl focus-visible:ring-2 focus-visible:ring-inset [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+		<IconChevronDown class="size-4 shrink-0 stroke-[1.333] transition-transform duration-base" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

package/dist/components/ui/alert/alert-description.svelte

@@ -8,6 +8,10 @@
 	export { className as class };
 </script>
 
-<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+<div
+	data-slot="alert-description"
+	class={cn("text-body text-muted-foreground [&_p]:leading-relaxed", className)}
+	{...$$restProps}
+>
 	<slot />
 </div>

package/dist/components/ui/alert/alert-title.svelte

@@ -14,7 +14,8 @@
 
 <svelte:element
 	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn("text-body-medium", className)}
 	{...$$restProps}
 >
 	<slot />

package/dist/components/ui/alert/index.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
@@ -7,27 +7,29 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
+}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        variant?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
     };
 }, {
     variant: {
         default: string;
         destructive: string;
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

package/dist/components/ui/alert/index.js

@@ -1,13 +1,13 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils.js";
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 export const alertVariants = tv({
-    base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4",
+    base: "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2",
     variants: {
         variant: {
-            default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+            default: "text-foreground [&>svg]:text-foreground",
+            destructive: "[&>svg]:text-destructive [&_[data-slot=alert-title]]:text-destructive [&_[data-slot=alert-description]]:text-destructive/90",
         },
     },
     defaultVariants: {

package/dist/components/ui/avatar/avatar-utils.d.ts

@@ -0,0 +1,2 @@
+/** Derive one or two letter initials from a display name (Figma Avatar / Type=Initials). */
+export declare function avatarInitials(name: string): string;

package/dist/components/ui/avatar/avatar-utils.js

@@ -0,0 +1,9 @@
+/** Derive one or two letter initials from a display name (Figma Avatar / Type=Initials). */
+export function avatarInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}

package/dist/components/ui/avatar/avatar.svelte

@@ -0,0 +1,63 @@
+<!-- Figma: Avatar (component set 50:17, node 50:3). -->
+<script lang="ts" module>
+	import type { VariantProps } from "tailwind-variants";
+
+	export const avatarVariants = tv({
+		base: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-subtle text-brand-foreground",
+		variants: {
+			size: {
+				sm: "size-6 text-caption-medium",
+				default: "size-8 text-caption-medium",
+				lg: "size-10 text-label-small",
+			},
+			type: {
+				initials: "bg-brand-subtle text-brand-foreground",
+				icon: "bg-muted text-foreground",
+			},
+		},
+		defaultVariants: {
+			size: "sm",
+			type: "initials",
+		},
+	});
+
+	export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+	export type AvatarType = VariantProps<typeof avatarVariants>["type"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import { cn, tv } from "../../../utils.js";
+	import { avatarInitials } from "./avatar-utils.js";
+
+	let {
+		class: className,
+		size = "sm",
+		type = "initials",
+		src = undefined,
+		alt = "",
+		name = "",
+		icon,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		size?: AvatarSize;
+		type?: AvatarType;
+		src?: string;
+		alt?: string;
+		name?: string;
+		icon?: Snippet;
+	} = $props();
+
+	const initials = $derived(avatarInitials(name || alt));
+</script>
+
+<span class={cn(avatarVariants({ size, type }), className)} {...restProps}>
+	{#if src}
+		<img {src} {alt} class="size-full object-cover" />
+	{:else if type === "icon" && icon}
+		<span class="flex items-center justify-center">{@render icon()}</span>
+	{:else}
+		<span aria-hidden="true">{initials}</span>
+	{/if}
+</span>

package/dist/components/ui/avatar/avatar.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, undefined, "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-subtle text-brand-foreground", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        type?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, undefined, "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-subtle text-brand-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+export type AvatarType = VariantProps<typeof avatarVariants>["type"];
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    size?: AvatarSize;
+    type?: AvatarType;
+    src?: string;
+    alt?: string;
+    name?: string;
+    icon?: Snippet;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/ui/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import Root from "./avatar.svelte";
+export { avatarInitials } from "./avatar-utils.js";
+export { avatarVariants, type AvatarSize } from "./avatar.svelte";
+export { Root, Root as Avatar };

package/dist/components/ui/avatar/index.js

@@ -0,0 +1,4 @@
+import Root from "./avatar.svelte";
+export { avatarInitials } from "./avatar-utils.js";
+export { avatarVariants } from "./avatar.svelte";
+export { Root, Root as Avatar };