@dryui/ui 0.0.1

package/dist/aurora/aurora.svelte

@@ -0,0 +1,443 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { BlendMode } from '@dryui/primitives/aurora';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
+		speed?: 'slow' | 'normal' | 'fast' | number;
+		intensity?: number;
+		waviness?: number;
+		colorSpace?: 'srgb' | 'oklch' | 'oklab';
+		blendMode?: BlendMode;
+		layerOpacity?: number;
+		children?: Snippet;
+	}
+
+	let {
+		palette = 'cosmic',
+		speed = 'normal',
+		intensity = 80,
+		waviness = 50,
+		colorSpace = 'srgb',
+		blendMode,
+		layerOpacity,
+		children: childSnippet,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let prefersReducedMotion = $state(false);
+	let animated = $state(false);
+
+	const speedDuration = $derived.by(() => {
+		if (typeof speed === 'number' && Number.isFinite(speed) && speed > 0) {
+			return `${(18 / speed).toFixed(2)}s`;
+		}
+		if (speed === 'fast') return '12s';
+		if (speed === 'slow') return '26s';
+		return '18s';
+	});
+
+	const paletteName = $derived(typeof palette === 'string' ? palette : 'custom');
+	const customPalette = $derived(Array.isArray(palette) ? palette : null);
+
+	onMount(() => {
+		const {
+			registerPropertyOnce,
+			supportsPropertyRegistration,
+			observeReducedMotionPreference,
+			getReducedMotionPreference
+		} = await_motion();
+		registerPropertyOnce({
+			name: '--dry-aurora-angle',
+			syntax: '<angle>',
+			inherits: false,
+			initialValue: '0deg'
+		});
+		registerPropertyOnce({
+			name: '--dry-aurora-shift',
+			syntax: '<percentage>',
+			inherits: false,
+			initialValue: '0%'
+		});
+
+		const updateAnimatedState = (matches: boolean) => {
+			prefersReducedMotion = matches;
+			animated = !matches && supportsPropertyRegistration();
+		};
+
+		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
+
+		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
+			animated = false;
+			return stopMotionObserver;
+		}
+
+		animated = true;
+		return stopMotionObserver;
+	});
+
+	function await_motion() {
+		// Dynamic import would be needed for the motion utils from primitives
+		// Instead, inline the logic since we're rendering directly
+		return {
+			registerPropertyOnce(opts: {
+				name: string;
+				syntax: string;
+				inherits: boolean;
+				initialValue: string;
+			}) {
+				try {
+					CSS.registerProperty(opts);
+				} catch {
+					// already registered or not supported
+				}
+			},
+			supportsPropertyRegistration() {
+				return typeof CSS !== 'undefined' && 'registerProperty' in CSS;
+			},
+			observeReducedMotionPreference(cb: (matches: boolean) => void) {
+				const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+				cb(mql.matches);
+				const handler = (e: MediaQueryListEvent) => cb(e.matches);
+				mql.addEventListener('change', handler);
+				return () => mql.removeEventListener('change', handler);
+			},
+			getReducedMotionPreference() {
+				return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			}
+		};
+	}
+
+	function applyRootStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			if (customPalette?.[0]) node.style.setProperty('--dry-aurora-color-1', customPalette[0]);
+			if (customPalette?.[1]) node.style.setProperty('--dry-aurora-color-2', customPalette[1]);
+			if (customPalette?.[2]) node.style.setProperty('--dry-aurora-color-3', customPalette[2]);
+			node.style.setProperty('--dry-aurora-duration', speedDuration);
+			node.style.setProperty(
+				'--dry-aurora-intensity',
+				String(Math.max(0, Math.min(100, intensity)))
+			);
+			node.style.setProperty('--dry-aurora-waviness', String(Math.max(0, Math.min(100, waviness))));
+		});
+	}
+
+	function applyBackdropStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('mix-blend-mode', blendMode ?? '');
+			node.style.setProperty('opacity', layerOpacity != null ? String(layerOpacity) : '');
+		});
+	}
+</script>
+
+<div
+	data-aurora
+	class={className}
+	data-palette={paletteName}
+	data-animated={animated || undefined}
+	data-reduced-motion={prefersReducedMotion || undefined}
+	data-color-space={colorSpace}
+	{...rest}
+	use:applyRootStyles
+>
+	<div data-aurora-backdrop aria-hidden="true" use:applyBackdropStyles>
+		<span data-aurora-layer data-layer="one"></span>
+		<span data-aurora-layer data-layer="two"></span>
+		<span data-aurora-layer data-layer="three"></span>
+	</div>
+
+	{#if childSnippet}
+		<div data-aurora-content>
+			{@render childSnippet()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-aurora] {
+		--dry-aurora-angle: 0deg;
+		--dry-aurora-shift: 0%;
+		--dry-aurora-duration: 18s;
+		--dry-aurora-surface: linear-gradient(
+			145deg,
+			color-mix(in srgb, var(--dry-color-bg-base) 84%, var(--dry-color-bg-overlay)),
+			color-mix(in srgb, var(--dry-color-bg-overlay) 92%, transparent)
+		);
+		--dry-aurora-color-1: rgba(120, 119, 255, 0.58);
+		--dry-aurora-color-2: rgba(56, 189, 248, 0.48);
+		--dry-aurora-color-3: rgba(244, 114, 182, 0.42);
+
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+		border-radius: inherit;
+		background: var(--dry-aurora-surface);
+	}
+
+	[data-aurora][data-palette='sunrise'] {
+		--dry-aurora-color-1: rgba(251, 146, 60, 0.58);
+		--dry-aurora-color-2: rgba(250, 204, 21, 0.45);
+		--dry-aurora-color-3: rgba(244, 114, 182, 0.42);
+	}
+
+	[data-aurora][data-palette='ocean'] {
+		--dry-aurora-color-1: rgba(34, 197, 94, 0.42);
+		--dry-aurora-color-2: rgba(14, 165, 233, 0.55);
+		--dry-aurora-color-3: rgba(59, 130, 246, 0.48);
+	}
+
+	[data-aurora][data-palette='forest'] {
+		--dry-aurora-color-1: rgba(34, 197, 94, 0.48);
+		--dry-aurora-color-2: rgba(132, 204, 22, 0.42);
+		--dry-aurora-color-3: rgba(16, 185, 129, 0.44);
+	}
+
+	[data-aurora][data-palette='cosmic'] {
+		--dry-aurora-color-1: rgba(167, 139, 250, 0.6);
+		--dry-aurora-color-2: rgba(56, 189, 248, 0.5);
+		--dry-aurora-color-3: rgba(236, 72, 153, 0.42);
+	}
+
+	[data-aurora][data-palette='custom'] {
+		--dry-aurora-color-1: rgba(56, 189, 248, 0.5);
+		--dry-aurora-color-2: rgba(99, 102, 241, 0.48);
+		--dry-aurora-color-3: rgba(20, 184, 166, 0.42);
+	}
+
+	[data-aurora-backdrop] {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+		border-radius: inherit;
+		z-index: 0;
+	}
+
+	[data-aurora-layer] {
+		position: absolute;
+		inset: -18%;
+		border-radius: 50%;
+		opacity: calc(0.92 * var(--dry-aurora-intensity, 80) / 80);
+		transform: translate3d(var(--dry-aurora-shift), 0, 0) rotate(var(--dry-aurora-angle));
+		transform-origin: center;
+		mix-blend-mode: screen;
+		will-change: transform, opacity;
+	}
+
+	[data-aurora-layer][data-layer='one'] {
+		background:
+			radial-gradient(ellipse 70% 28% at 20% 35%, var(--dry-aurora-color-1) 0, transparent 62%),
+			radial-gradient(ellipse 50% 40% at 45% 55%, var(--dry-aurora-color-1) 0, transparent 58%);
+		filter: blur(calc(40px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
+	}
+
+	[data-aurora-layer][data-layer='two'] {
+		background:
+			radial-gradient(ellipse 65% 32% at 72% 28%, var(--dry-aurora-color-2) 0, transparent 60%),
+			radial-gradient(ellipse 55% 36% at 38% 68%, var(--dry-aurora-color-2) 0, transparent 56%);
+		filter: blur(calc(64px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
+	}
+
+	[data-aurora-layer][data-layer='three'] {
+		background:
+			radial-gradient(ellipse 60% 30% at 58% 78%, var(--dry-aurora-color-3) 0, transparent 64%),
+			radial-gradient(ellipse 48% 38% at 25% 42%, var(--dry-aurora-color-3) 0, transparent 54%);
+		filter: blur(calc(52px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
+	}
+
+	[data-aurora][data-animated] [data-aurora-layer][data-layer='one'] {
+		animation: aurora-one var(--dry-aurora-duration) var(--dry-ease-spring-soft) infinite alternate;
+	}
+
+	[data-aurora][data-animated] [data-aurora-layer][data-layer='two'] {
+		animation: aurora-two calc(var(--dry-aurora-duration) * 1.37) var(--dry-ease-spring-soft)
+			infinite alternate;
+	}
+
+	[data-aurora][data-animated] [data-aurora-layer][data-layer='three'] {
+		animation: aurora-three calc(var(--dry-aurora-duration) * 0.79) var(--dry-ease-spring-soft)
+			infinite alternate;
+	}
+
+	[data-aurora][data-reduced-motion] [data-aurora-layer] {
+		animation: none;
+		transform: none;
+	}
+
+	[data-aurora-backdrop]::after {
+		content: '';
+		position: absolute;
+		inset: -10%;
+		border-radius: 50%;
+		pointer-events: none;
+		background: radial-gradient(
+			ellipse 80% 50% at 50% 50%,
+			var(--dry-aurora-color-1) 0,
+			transparent 70%
+		);
+		mix-blend-mode: soft-light;
+		filter: blur(60px);
+		opacity: calc(0.35 * var(--dry-aurora-intensity, 80) / 80);
+	}
+
+	[data-aurora][data-animated] [data-aurora-backdrop]::after {
+		animation: aurora-glow calc(var(--dry-aurora-duration) * 1.8) ease-in-out infinite alternate;
+	}
+
+	[data-aurora][data-reduced-motion] [data-aurora-backdrop]::after {
+		animation: none;
+	}
+
+	/* oklch color space */
+	[data-aurora][data-color-space='oklch'] [data-aurora-layer][data-layer='one'] {
+		background:
+			radial-gradient(
+				ellipse 70% 28% at 20% 35%,
+				color-mix(in oklch, var(--dry-aurora-color-1) 100%, transparent) 0,
+				transparent 62%
+			),
+			radial-gradient(
+				ellipse 50% 40% at 45% 55%,
+				color-mix(in oklch, var(--dry-aurora-color-1) 100%, transparent) 0,
+				transparent 58%
+			);
+	}
+
+	[data-aurora][data-color-space='oklch'] [data-aurora-layer][data-layer='two'] {
+		background:
+			radial-gradient(
+				ellipse 65% 32% at 72% 28%,
+				color-mix(in oklch, var(--dry-aurora-color-2) 100%, transparent) 0,
+				transparent 60%
+			),
+			radial-gradient(
+				ellipse 55% 36% at 38% 68%,
+				color-mix(in oklch, var(--dry-aurora-color-2) 100%, transparent) 0,
+				transparent 56%
+			);
+	}
+
+	[data-aurora][data-color-space='oklch'] [data-aurora-layer][data-layer='three'] {
+		background:
+			radial-gradient(
+				ellipse 60% 30% at 58% 78%,
+				color-mix(in oklch, var(--dry-aurora-color-3) 100%, transparent) 0,
+				transparent 64%
+			),
+			radial-gradient(
+				ellipse 48% 38% at 25% 42%,
+				color-mix(in oklch, var(--dry-aurora-color-3) 100%, transparent) 0,
+				transparent 54%
+			);
+	}
+
+	/* oklab color space */
+	[data-aurora][data-color-space='oklab'] [data-aurora-layer][data-layer='one'] {
+		background:
+			radial-gradient(
+				ellipse 70% 28% at 20% 35%,
+				color-mix(in oklab, var(--dry-aurora-color-1) 100%, transparent) 0,
+				transparent 62%
+			),
+			radial-gradient(
+				ellipse 50% 40% at 45% 55%,
+				color-mix(in oklab, var(--dry-aurora-color-1) 100%, transparent) 0,
+				transparent 58%
+			);
+	}
+
+	[data-aurora][data-color-space='oklab'] [data-aurora-layer][data-layer='two'] {
+		background:
+			radial-gradient(
+				ellipse 65% 32% at 72% 28%,
+				color-mix(in oklab, var(--dry-aurora-color-2) 100%, transparent) 0,
+				transparent 60%
+			),
+			radial-gradient(
+				ellipse 55% 36% at 38% 68%,
+				color-mix(in oklab, var(--dry-aurora-color-2) 100%, transparent) 0,
+				transparent 56%
+			);
+	}
+
+	[data-aurora][data-color-space='oklab'] [data-aurora-layer][data-layer='three'] {
+		background:
+			radial-gradient(
+				ellipse 60% 30% at 58% 78%,
+				color-mix(in oklab, var(--dry-aurora-color-3) 100%, transparent) 0,
+				transparent 64%
+			),
+			radial-gradient(
+				ellipse 48% 38% at 25% 42%,
+				color-mix(in oklab, var(--dry-aurora-color-3) 100%, transparent) 0,
+				transparent 54%
+			);
+	}
+
+	[data-aurora-content] {
+		position: relative;
+		z-index: 1;
+	}
+
+	@keyframes aurora-one {
+		0% {
+			transform: translate3d(-8%, -4%, 0) rotate(-6deg) scaleX(1);
+		}
+		50% {
+			transform: translate3d(2%, 3%, 0) rotate(1deg) scaleX(1.08);
+		}
+		100% {
+			transform: translate3d(10%, 7%, 0) rotate(7deg) scaleX(0.95);
+		}
+	}
+
+	@keyframes aurora-two {
+		0% {
+			transform: translate3d(6%, -8%, 0) rotate(4deg) scaleX(0.96);
+		}
+		50% {
+			transform: translate3d(-3%, 2%, 0) rotate(-2deg) scaleX(1.06);
+		}
+		100% {
+			transform: translate3d(-10%, 10%, 0) rotate(-8deg) scaleX(1.02);
+		}
+	}
+
+	@keyframes aurora-three {
+		0% {
+			transform: translate3d(-4%, 10%, 0) rotate(8deg) scaleX(1.04);
+		}
+		50% {
+			transform: translate3d(4%, -4%, 0) rotate(-1deg) scaleX(0.92);
+		}
+		100% {
+			transform: translate3d(8%, -10%, 0) rotate(-5deg) scaleX(1.1);
+		}
+	}
+
+	@keyframes aurora-glow {
+		0% {
+			opacity: 0.25;
+			transform: scale(0.95);
+		}
+		100% {
+			opacity: 0.45;
+			transform: scale(1.08);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-aurora-layer] {
+			animation: none;
+			transform: none;
+		}
+
+		[data-aurora-backdrop]::after {
+			animation: none;
+		}
+	}
+</style>

package/dist/aurora/aurora.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
+	speed?: 'slow' | 'normal' | 'fast' | number;
+	children?: Snippet;
+}
+declare const Aurora: import('svelte').Component<Props, {}, ''>;
+type Aurora = ReturnType<typeof Aurora>;
+export default Aurora;

package/dist/aurora/index.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BlendMode } from '@dryui/primitives/aurora';
+export type { BlendMode };
+export type AuroraNamedPalette = 'sunrise' | 'ocean' | 'forest' | 'cosmic';
+export type AuroraPalette = AuroraNamedPalette | readonly [string, string, string];
+export type AuroraSpeed = 'slow' | 'normal' | 'fast' | number;
+export type AuroraColorSpace = 'srgb' | 'oklch' | 'oklab';
+export interface AuroraProps extends HTMLAttributes<HTMLDivElement> {
+	palette?: AuroraPalette;
+	speed?: AuroraSpeed;
+	intensity?: number;
+	waviness?: number;
+	colorSpace?: AuroraColorSpace;
+	blendMode?: BlendMode;
+	layerOpacity?: number;
+	children?: Snippet;
+}
+export { default as Aurora } from './aurora.svelte';

package/dist/aurora/index.js

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

package/dist/avatar/avatar.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		src?: string;
+		alt?: string;
+		fallback?: string;
+		size?: 'sm' | 'md' | 'lg';
+		shape?: 'circle' | 'square';
+		status?: 'online' | 'offline' | 'busy' | 'away';
+		badge?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		src,
+		alt = '',
+		fallback,
+		size = 'md',
+		shape = 'circle',
+		status,
+		badge,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let failedSrc = $state<string | null>(null);
+	const showImage = $derived(Boolean(src) && src !== failedSrc);
+
+	function handleError() {
+		failedSrc = src ?? null;
+	}
+
+	function getFallbackText(): string {
+		const source = (fallback ?? alt).trim();
+		if (!source) return '';
+
+		const words = source.split(/\s+/).filter(Boolean);
+		if (words.length > 1) {
+			return words
+				.slice(0, 2)
+				.map((word) => Array.from(word)[0] ?? '')
+				.join('')
+				.toUpperCase();
+		}
+
+		const compact = source.replace(/[^\p{L}\p{N}]+/gu, '');
+		const characters = Array.from(compact || source);
+		return characters.slice(0, 2).join('').toUpperCase();
+	}
+
+	const hasOverlay = $derived(!!status || !!badge);
+</script>
+
+{#if hasOverlay}
+	<div data-avatar-wrapper>
+		<span
+			role="img"
+			aria-label={alt}
+			data-avatar
+			data-size={size}
+			data-shape={shape}
+			class={className}
+			{...rest}
+		>
+			{#if showImage}
+				<img {src} {alt} onerror={handleError} />
+			{:else if children}
+				{@render children()}
+			{:else}
+				<span aria-hidden="true">{getFallbackText()}</span>
+			{/if}
+		</span>
+		{#if status}
+			<span data-avatar-status data-status={status}></span>
+		{/if}
+		{#if badge}
+			<span data-avatar-badge>{@render badge()}</span>
+		{/if}
+	</div>
+{:else}
+	<span
+		role="img"
+		aria-label={alt}
+		data-avatar
+		data-size={size}
+		data-shape={shape}
+		class={className}
+		{...rest}
+	>
+		{#if showImage}
+			<img {src} {alt} onerror={handleError} />
+		{:else if children}
+			{@render children()}
+		{:else}
+			<span aria-hidden="true">{getFallbackText()}</span>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	[data-avatar-wrapper] {
+		position: relative;
+		display: inline-grid;
+	}
+
+	[data-avatar] {
+		--dry-avatar-size: 40px;
+		--dry-avatar-radius: var(--dry-radius-full);
+		--dry-avatar-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+
+		display: inline-grid;
+		place-items: center;
+		aspect-ratio: 1;
+		height: var(--dry-avatar-size);
+		border-radius: var(--dry-avatar-radius);
+		background: var(--dry-avatar-bg, var(--dry-color-fill));
+		color: var(--dry-avatar-color, var(--dry-color-text-weak));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-avatar-font-size);
+		font-weight: 600;
+		line-height: 1;
+		border: 1px solid var(--dry-color-stroke-weak);
+		overflow: hidden;
+		user-select: none;
+	}
+
+	[data-avatar] img {
+		object-fit: cover;
+		border-radius: inherit;
+	}
+
+	[data-avatar] > span {
+		display: grid;
+		place-items: center;
+	}
+
+	/* ── Shapes ───────────────────────────────────────────────────────────────── */
+
+	[data-shape='circle'] {
+		--dry-avatar-radius: var(--dry-radius-full);
+	}
+
+	[data-shape='square'] {
+		--dry-avatar-radius: var(--dry-radius-md);
+	}
+
+	/* ── Sizes ────────────────────────────────────────────────────────────────── */
+
+	[data-size='sm'] {
+		--dry-avatar-size: 32px;
+		--dry-avatar-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+	}
+
+	[data-size='md'] {
+		--dry-avatar-size: var(--dry-space-12);
+		--dry-avatar-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	}
+
+	[data-size='lg'] {
+		--dry-avatar-size: var(--dry-space-16);
+		--dry-avatar-font-size: var(--dry-type-small-size, var(--dry-text-base-size));
+	}
+
+	/* ── Status indicator ─────────────────────────────────────────────────────── */
+
+	[data-avatar-status] {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		aspect-ratio: 1;
+		height: var(--dry-avatar-status-size, 0.625rem);
+		border-radius: 50%;
+		border: 2px solid var(--dry-color-bg-raised, #ffffff);
+		z-index: 1;
+	}
+
+	[data-avatar-status][data-status='online'] {
+		background-color: var(--dry-avatar-status-color, var(--dry-color-fill-success));
+	}
+
+	[data-avatar-status][data-status='offline'] {
+		background-color: var(--dry-avatar-status-color, var(--dry-color-icon));
+	}
+
+	[data-avatar-status][data-status='busy'] {
+		background-color: var(--dry-avatar-status-color, var(--dry-color-fill-error));
+	}
+
+	[data-avatar-status][data-status='away'] {
+		background-color: var(--dry-avatar-status-color, var(--dry-color-fill-warning));
+	}
+
+	/* ── Badge overlay ───────────────────────────────────────────────────────── */
+
+	[data-avatar-badge] {
+		position: absolute;
+		top: -2px;
+		right: -2px;
+		z-index: 1;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+	src?: string;
+	alt?: string;
+	fallback?: string;
+	size?: 'sm' | 'md' | 'lg';
+	shape?: 'circle' | 'square';
+	status?: 'online' | 'offline' | 'busy' | 'away';
+	badge?: Snippet;
+	children?: Snippet;
+}
+declare const Avatar: import('svelte').Component<Props, {}, ''>;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/avatar/index.d.ts

@@ -0,0 +1,6 @@
+import type { AvatarProps as PrimitiveAvatarProps } from '@dryui/primitives';
+export interface AvatarProps extends PrimitiveAvatarProps {
+	size?: 'sm' | 'md' | 'lg';
+	shape?: 'circle' | 'square';
+}
+export { default as Avatar } from './avatar.svelte';

package/dist/avatar/index.js

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