@dryui/ui 3.0.0 → 4.0.1

package/src/avatar/avatar.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+
+	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 data-shape={shape} class={className} {...rest}>
+		<span role="img" aria-label={alt} data-avatar {...variantAttrs({ size, shape })}>
+			{#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
+		{...variantAttrs({ size, 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));
+
+		position: relative;
+		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;
+		outline: 1px solid var(--dry-image-edge);
+		outline-offset: -1px;
+		overflow: hidden;
+		user-select: none;
+	}
+
+	[data-avatar] img {
+		position: absolute;
+		inset: 0;
+		block-size: 100%;
+		aspect-ratio: 1;
+		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 ─────────────────────────────────────────────────────── */
+
+	/* For circular avatars the corner is empty space; offset the dot inward
+	   by ~6% so its centre lands on the rim near the 4-5 o'clock position. */
+	[data-avatar-status] {
+		position: absolute;
+		bottom: var(--dry-avatar-status-offset, 6%);
+		right: var(--dry-avatar-status-offset, 6%);
+		aspect-ratio: 1;
+		height: var(--dry-avatar-status-size, 28%);
+		max-height: 14px;
+		min-height: 8px;
+		border-radius: 50%;
+		border: 2px solid var(--dry-color-bg-base);
+		box-shadow: 0 0 0 1px color-mix(in srgb, var(--dry-color-stroke-weak) 60%, transparent);
+		z-index: 1;
+	}
+
+	[data-avatar-wrapper][data-shape='square'] [data-avatar-status] {
+		bottom: 0;
+		right: 0;
+		transform: translate(25%, 25%);
+	}
+
+	[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/src/avatar/index.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+	src?: string;
+	alt?: string;
+	fallback?: string;
+	size?: 'sm' | 'md' | 'lg';
+	shape?: 'circle' | 'square';
+	status?: 'online' | 'offline' | 'busy' | 'away';
+	badge?: Snippet;
+	children?: Snippet | undefined;
+}
+
+export { default as Avatar } from './avatar.svelte';

package/src/backdrop/backdrop.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Backdrop',
+	description: 'Full-screen overlay behind modals and dialogs',
+	category: 'overlay',
+	tags: ['overlay', 'modal', 'backdrop', 'scrim']
+};

package/src/backdrop/backdrop.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Portal } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		open?: boolean;
+		invisible?: boolean;
+		children?: Snippet;
+	}
+
+	let { open = false, invisible = false, children, class: className, ...rest }: Props = $props();
+</script>
+
+{#if open}
+	<Portal>
+		<div
+			data-backdrop
+			data-invisible={invisible || undefined}
+			aria-hidden={children ? undefined : true}
+			class={className}
+			{...rest}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</Portal>
+{/if}
+
+<style>
+	[data-backdrop] {
+		--dry-backdrop-bg: var(--dry-color-overlay-backdrop);
+		--dry-backdrop-blur: 10px;
+		--dry-backdrop-padding: var(--dry-space-6);
+
+		position: fixed;
+		inset: 0;
+		z-index: var(--dry-layer-overlay);
+		display: grid;
+		align-items: center;
+		padding: var(--dry-backdrop-padding);
+		background: var(--dry-backdrop-bg);
+		backdrop-filter: blur(var(--dry-backdrop-blur));
+		-webkit-backdrop-filter: blur(var(--dry-backdrop-blur));
+	}
+
+	[data-backdrop][data-invisible] {
+		background: transparent;
+		backdrop-filter: none;
+		-webkit-backdrop-filter: none;
+	}
+</style>

package/src/backdrop/index.ts

@@ -0,0 +1,3 @@
+export type { BackdropProps } from '@dryui/primitives';
+
+export { default as Backdrop } from './backdrop.svelte';

package/src/badge/badge.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Badge',
+	description: 'Small status indicator label',
+	category: 'display',
+	tags: ['status', 'count', 'label', 'tag']
+};

package/src/badge/badge.svelte

@@ -0,0 +1,334 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+	import { getPageHeaderMetaCtx } from '@dryui/primitives/page-header';
+	import { resolveAlias } from '../internal/color-aliases.js';
+	import type { BadgeColor } from './index.js';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		variant?: 'solid' | 'outline' | 'soft' | 'dot';
+		color?: BadgeColor;
+		size?: 'sm' | 'md';
+		children?: Snippet;
+		pulse?: boolean;
+		icon?: Snippet;
+		/**
+		 * Tabular-nums + min-width so numeric counts don't jitter as values
+		 * change (e.g. 9 → 10, 99 → 100). Applies `font-variant-numeric`
+		 * from `--dry-numeric-variant` and a 1.5em min-width.
+		 */
+		numeric?: boolean;
+	}
+
+	let {
+		variant: variantProp,
+		color: colorProp,
+		size: sizeProp,
+		class: className,
+		children,
+		pulse,
+		icon,
+		numeric = false,
+		...rest
+	}: Props = $props();
+
+	const ctx = getPageHeaderMetaCtx();
+	const variant = $derived(variantProp ?? ctx?.variant ?? 'soft');
+	const color = $derived<BadgeColor>(colorProp ?? ctx?.color ?? 'gray');
+	const size = $derived(sizeProp ?? ctx?.size ?? 'sm');
+	const resolvedColor = $derived(resolveAlias(color, 'gray'));
+	const isDot = $derived(variant === 'dot');
+	const hasIcon = $derived(!!icon && !isDot);
+</script>
+
+<span
+	class={className}
+	data-badge={isDot ? undefined : ''}
+	data-dot={isDot ? '' : undefined}
+	data-numeric={numeric && !isDot ? 'true' : undefined}
+	{...variantAttrs({
+		variant: isDot ? undefined : variant,
+		color: resolvedColor,
+		size: isDot ? undefined : size,
+		'data-icon-only': hasIcon ? '' : undefined,
+		'data-pulse': pulse ? '' : undefined
+	})}
+	{...rest}
+>
+	{#if isDot}
+		<!-- dot variant renders no content -->
+	{:else if icon}
+		{@render icon()}
+	{:else if children}
+		{@render children()}
+	{/if}
+</span>
+
+<style>
+	[data-badge] {
+		justify-self: start;
+		/* Component tokens (Tier 3) */
+		--_badge-bg-default: var(--dry-color-fill);
+		--_badge-color-default: var(--dry-color-text-weak);
+		--_badge-border-default: transparent;
+		--_badge-font-size-default: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--_badge-padding-x-default: var(--dry-space-2);
+		--_badge-padding-y-default: var(--dry-space-0_5);
+		--_badge-radius-default: var(--dry-radius-full);
+		--_badge-bg: var(--dry-badge-bg, var(--_badge-bg-default));
+		--_badge-color: var(--dry-badge-color, var(--_badge-color-default));
+		--_badge-border: var(--dry-badge-border, var(--_badge-border-default));
+		--_badge-font-size: var(--dry-badge-font-size, var(--_badge-font-size-default));
+		--_badge-padding-x: var(--dry-badge-padding-x, var(--_badge-padding-x-default));
+		--_badge-padding-y: var(--dry-badge-padding-y, var(--_badge-padding-y-default));
+		--_badge-radius: var(--dry-badge-radius, var(--_badge-radius-default));
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		align-items: center;
+		gap: var(--dry-space-1);
+		padding: var(--_badge-padding-y) var(--_badge-padding-x);
+		font-size: var(--_badge-font-size);
+		font-family: var(--dry-font-sans);
+		font-weight: 500;
+		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
+		color: var(--_badge-color);
+		background: var(--_badge-bg);
+		border: 1px solid var(--_badge-border);
+		border-radius: var(--_badge-radius);
+		white-space: nowrap;
+		user-select: none;
+	}
+
+	/* ── Sizes ────────────────────────────────────────────────────────────────── */
+
+	[data-size='sm'] {
+		--_badge-font-size-default: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--_badge-padding-x-default: var(--dry-space-2);
+		--_badge-padding-y-default: var(--dry-space-0_5);
+	}
+
+	[data-size='md'] {
+		--_badge-font-size-default: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--_badge-padding-x-default: var(--dry-space-2_5);
+		--_badge-padding-y-default: var(--dry-space-0_5);
+	}
+
+	/* ── Variant: solid ───────────────────────────────────────────────────────── */
+
+	[data-variant='solid'] {
+		--_badge-border-default: transparent;
+	}
+
+	[data-variant='solid'][data-color='gray'] {
+		--_badge-bg-default: var(--dry-color-fill-inverse);
+		--_badge-color-default: var(--dry-color-text-inverse);
+	}
+
+	[data-variant='solid'][data-color='blue'] {
+		--_badge-bg-default: var(--dry-color-fill-brand);
+		--_badge-color-default: var(--dry-color-on-brand);
+	}
+
+	[data-variant='solid'][data-color='red'] {
+		--_badge-bg-default: var(--dry-color-fill-error);
+		--_badge-color-default: var(--dry-color-on-error);
+	}
+
+	[data-variant='solid'][data-color='green'] {
+		--_badge-bg-default: var(--dry-color-fill-success);
+		--_badge-color-default: var(--dry-color-on-success);
+	}
+
+	[data-variant='solid'][data-color='yellow'] {
+		--_badge-bg-default: var(--dry-color-fill-yellow);
+		--_badge-color-default: var(--dry-color-on-warning);
+	}
+
+	[data-variant='solid'][data-color='purple'] {
+		--_badge-bg-default: var(--dry-color-fill-purple);
+		--_badge-color-default: var(--dry-color-on-purple);
+	}
+
+	[data-variant='solid'][data-color='orange'] {
+		--_badge-bg-default: var(--dry-color-fill-orange);
+		--_badge-color-default: var(--dry-color-on-orange);
+	}
+
+	/* ── Variant: outline ─────────────────────────────────────────────────────── */
+
+	[data-variant='outline'] {
+		--_badge-bg-default: transparent;
+	}
+
+	[data-variant='outline'][data-color='gray'] {
+		--_badge-color-default: var(--dry-color-text-weak);
+		--_badge-border-default: var(--dry-color-stroke-weak);
+	}
+
+	[data-variant='outline'][data-color='blue'] {
+		--_badge-color-default: var(--dry-color-text-brand);
+		--_badge-border-default: var(--dry-color-stroke-brand);
+	}
+
+	[data-variant='outline'][data-color='red'] {
+		--_badge-color-default: var(--dry-color-text-error);
+		--_badge-border-default: var(--dry-color-stroke-error);
+	}
+
+	[data-variant='outline'][data-color='green'] {
+		--_badge-color-default: var(--dry-color-text-success);
+		--_badge-border-default: var(--dry-color-stroke-success);
+	}
+
+	[data-variant='outline'][data-color='yellow'] {
+		--_badge-color-default: var(--dry-color-text-warning);
+		--_badge-border-default: var(--dry-color-stroke-warning);
+	}
+
+	[data-variant='outline'][data-color='purple'] {
+		--_badge-color-default: var(--dry-color-text-purple);
+		--_badge-border-default: var(--dry-color-stroke-purple);
+	}
+
+	[data-variant='outline'][data-color='orange'] {
+		--_badge-color-default: color-mix(
+			in srgb,
+			var(--dry-color-text-warning) 60%,
+			var(--dry-color-text-error)
+		);
+		--_badge-border-default: color-mix(
+			in srgb,
+			var(--dry-color-stroke-warning) 60%,
+			var(--dry-color-stroke-error)
+		);
+	}
+
+	/* ── Variant: soft ────────────────────────────────────────────────────────── */
+
+	[data-variant='soft'] {
+		--_badge-border-default: var(--dry-color-stroke-weak);
+	}
+
+	[data-variant='soft'][data-color='gray'] {
+		--_badge-bg-default: var(--dry-color-fill);
+		--_badge-color-default: var(--dry-color-text-weak);
+	}
+
+	[data-variant='soft'][data-color='blue'] {
+		--_badge-bg-default: var(--dry-color-fill-brand-weak);
+		--_badge-color-default: var(--dry-color-text-brand);
+	}
+
+	[data-variant='soft'][data-color='red'] {
+		--_badge-bg-default: var(--dry-color-fill-error-weak);
+		--_badge-color-default: var(--dry-color-text-error);
+		--_badge-border-default: var(--dry-color-stroke-error);
+	}
+
+	[data-variant='soft'][data-color='green'] {
+		--_badge-bg-default: var(--dry-color-fill-success-weak);
+		--_badge-color-default: var(--dry-color-text-success);
+	}
+
+	[data-variant='soft'][data-color='yellow'] {
+		--_badge-bg-default: var(--dry-color-fill-warning-weak);
+		--_badge-color-default: var(--dry-color-text-warning);
+	}
+
+	[data-variant='soft'][data-color='purple'] {
+		--_badge-bg-default: var(--dry-color-fill-purple-weak);
+		--_badge-color-default: var(--dry-color-text-purple);
+	}
+
+	[data-variant='soft'][data-color='orange'] {
+		--_badge-bg-default: color-mix(
+			in srgb,
+			var(--dry-color-fill-warning-weak) 50%,
+			var(--dry-color-fill-error-weak)
+		);
+		--_badge-color-default: color-mix(
+			in srgb,
+			var(--dry-color-text-warning) 50%,
+			var(--dry-color-text-error)
+		);
+	}
+
+	/* ── Variant: dot ────────────────────────────────────────────────────────── */
+
+	[data-dot] {
+		aspect-ratio: 1;
+		height: 0.5rem;
+		padding: 0;
+		border-radius: 50%;
+		display: inline-block;
+		line-height: 0;
+		font-size: 0;
+	}
+
+	[data-dot][data-color='gray'] {
+		background-color: var(--dry-color-icon);
+	}
+	[data-dot][data-color='red'] {
+		background-color: var(--dry-color-fill-error);
+	}
+	[data-dot][data-color='green'] {
+		background-color: var(--dry-color-fill-success);
+	}
+	[data-dot][data-color='blue'] {
+		background-color: var(--dry-color-fill-brand);
+	}
+	[data-dot][data-color='yellow'] {
+		background-color: var(--dry-color-fill-yellow);
+	}
+	[data-dot][data-color='purple'] {
+		background-color: var(--dry-color-fill-purple);
+	}
+	[data-dot][data-color='orange'] {
+		background-color: color-mix(
+			in srgb,
+			var(--dry-color-fill-warning) 70%,
+			var(--dry-color-fill-error)
+		);
+	}
+
+	/* ── Pulse animation ─────────────────────────────────────────────────────── */
+
+	@keyframes dry-badge-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	[data-pulse] {
+		animation: dry-badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-dot][data-pulse] {
+			animation: none;
+		}
+	}
+
+	/* ── Icon-only layout ────────────────────────────────────────────────────── */
+
+	[data-icon-only] {
+		display: inline-grid;
+		place-items: center;
+		padding: var(--dry-space-0_5, 0.125rem);
+	}
+
+	/* ── Numeric counts ────────────────────────────────────────────────────────
+	   Tabular-nums + min-width so values like "9" and "10" occupy the same
+	   footprint and don't jitter the surrounding layout as counts change. */
+	[data-numeric='true'] {
+		font-variant-numeric: var(--dry-numeric-variant);
+		min-width: 1.5em;
+		text-align: center;
+	}
+</style>

package/src/badge/index.ts

@@ -0,0 +1,12 @@
+import type { BadgeProps as PrimitiveBadgeProps } from '@dryui/primitives';
+import type { AliasableColor } from '../internal/color-aliases.js';
+
+export type BadgeColor = AliasableColor;
+
+export interface BadgeProps extends PrimitiveBadgeProps {
+	variant?: 'solid' | 'outline' | 'soft' | 'dot';
+	color?: BadgeColor;
+	size?: 'sm' | 'md';
+}
+
+export { default as Badge } from './badge.svelte';

package/src/beam/beam.meta.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Beam',
+	description:
+		'Animated linear light streak surface for directional highlights and shimmer accents',
+	category: 'visual',
+	tags: ['beam', 'light', 'streak', 'shimmer', 'effect']
+};