@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/dynect/Autocomplete.vue

@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+export interface AutocompleteOption {
+	label: string;
+	value: string | number;
+	description?: string;
+	avatar?: string;
+	icon?: string;
+	disabled?: boolean;
+	[key: string]: any;
+}
+
+export interface AutocompleteGroup {
+	label: string;
+	options: AutocompleteOption[];
+}
+
+type AutocompleteSize = 'sm' | 'base' | 'lg' | 'xl';
+type AutocompleteState = 'default' | 'success' | 'danger';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled';
+
+// ── Size classes ──────────────────────────────────────────────────────────────
+const sizeClasses: Record<AutocompleteSize, string> = {
+	sm: 'py-2 px-2.5 text-sm',
+	base: 'py-2.5 px-3 text-sm',
+	lg: 'py-3 px-3.5 text-base',
+	xl: 'py-3.5 px-4 text-base',
+};
+
+// ── Variants ──────────────────────────────────────────────────────────────────
+const inputWrapperVariants = cva('flex items-center w-full rounded-xl border', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium dark:bg-bg-secondary-medium border-border-base-medium dark:border-border-base-medium focus-within:border-border-brand',
+			success: 'bg-bg-success-soft dark:bg-bg-success-soft border-border-success-subtle dark:border-border-success-subtle focus-within:border-border-success',
+			danger: 'bg-bg-danger-soft dark:bg-bg-danger-soft border-border-danger-subtle dark:border-border-danger-subtle focus-within:border-border-danger',
+			disabled: 'bg-bg-disabled dark:bg-bg-disabled border-border-base-medium dark:border-border-base-medium cursor-not-allowed opacity-60',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputIconVariants = cva('', {
+	variants: {
+		state: {
+			default: 'text-text-body-subtle dark:text-text-body-subtle',
+			success: 'text-text-fg-success-strong dark:text-text-fg-success-strong bg-bg-success-medium dark:bg-bg-success-medium border-border-success-subtle dark:border-border-success-subtle focus-within:border-border-success',
+			danger: 'text-text-fg-danger-strong dark:text-text-fg-danger-strong bg-bg-danger-medium dark:bg-bg-danger-medium border-border-danger-subtle dark:border-border-danger-subtle focus-within:border-border-danger',
+			disabled: 'text-text-fg-disabled dark:text-text-fg-disabled',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputTextVariants = cva('w-full text-left min-w-0 bg-transparent outline-none disabled:cursor-not-allowed', {
+	variants: {
+		state: {
+			default: 'text-text-heading dark:text-text-heading placeholder:text-text-body-subtle dark:placeholder:text-text-body-subtle',
+			success: 'text-text-fg-success-strong dark:text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong dark:text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled dark:text-text-fg-disabled placeholder:text-text-fg-disabled dark:placeholder:text-text-fg-disabled',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+const props = withDefaults(
+	defineProps<{
+		// Core
+		options?: AutocompleteOption[] | AutocompleteGroup[] | string[] | number[];
+		placeholder?: string;
+		label?: string;
+		name?: string;
+		id?: HTMLAttributes['id'];
+		class?: HTMLAttributes['class'];
+		inputClass?: HTMLAttributes['class'];
+		dropdownClass?: HTMLAttributes['class'];
+
+		// Validation
+		required?: boolean;
+		disabled?: boolean;
+		description?: string;
+		tooltip?: string;
+
+		// Appearance
+		size?: AutocompleteSize;
+		state?: AutocompleteState;
+		labelClass?: string;
+		descriptionClass?: string;
+		errorClass?: string;
+		leadingIcon?: string;
+
+		/** Show clear (×) button when there is a value */
+		clearable?: boolean;
+		/** Show "Recent" / group headings in dropdown */
+		showGroups?: boolean;
+		/** Max height of the dropdown list */
+		maxHeight?: string;
+
+		// Keys for normalised option objects
+		valueKey?: string;
+		labelKey?: string;
+		descriptionKey?: string;
+		avatarKey?: string;
+
+		// Empty state
+		emptyText?: string;
+	}>(),
+	{
+		placeholder: 'Placeholder text',
+		size: 'base',
+		clearable: true,
+		showGroups: true,
+		maxHeight: '320px',
+		emptyText: 'No results found.',
+		valueKey: 'value',
+		labelKey: 'label',
+		descriptionKey: 'description',
+		avatarKey: 'avatar',
+		options: () => [],
+	}
+);
+
+// ── Model ─────────────────────────────────────────────────────────────────────
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `autocomplete-${fallbackId}`);
+
+const modelValue = defineModel<any>('modelValue', { required: false });
+
+const { errorMessage, handleBlur } = useField(() => resolvedId.value || props.name || 'autocomplete', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+
+// ── State resolution ──────────────────────────────────────────────────────────
+const variantState = computed<VariantState>(() => {
+	if (props.disabled) return 'disabled';
+	if (props.state && props.state !== 'default') return props.state;
+	return errorMessage.value ? 'danger' : 'default';
+});
+
+const sz = computed(() => props.size ?? 'base');
+const wrapperCls = computed(() => inputWrapperVariants({ state: variantState.value }));
+const iconCls = computed(() => inputIconVariants({ state: variantState.value }));
+const textColorCls = computed(() => inputTextVariants({ state: variantState.value }));
+const textCls = computed(() => cn(textColorCls.value, sizeClasses[sz.value]));
+const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h-5' : 'w-4 h-4'));
+
+// ── Options normalisation ────────────────────────────────────────────────────
+const isGrouped = computed<boolean>(() => {
+	const first = props.options?.[0];
+	return !!first && typeof first === 'object' && 'options' in first;
+});
+
+const normaliseOption = (o: any): AutocompleteOption => {
+	if (typeof o === 'string' || typeof o === 'number') return { label: String(o), value: o };
+	return {
+		label: o[props.labelKey] ?? o.label ?? String(o.value),
+		value: o[props.valueKey] ?? o.value,
+		description: o[props.descriptionKey] ?? o.description,
+		avatar: o[props.avatarKey] ?? o.avatar,
+		icon: o.icon,
+		disabled: o.disabled,
+		...o,
+	} as AutocompleteOption;
+};
+
+const flatOptions = computed<AutocompleteOption[]>(() => {
+	if (!props.options?.length) return [];
+	if (isGrouped.value) {
+		return (props.options as AutocompleteGroup[]).flatMap((g) => g.options.map(normaliseOption));
+	}
+	return (props.options as any[]).map(normaliseOption);
+});
+
+const groupedOptions = computed<AutocompleteGroup[]>(() => {
+	if (!props.options?.length) return [];
+	if (isGrouped.value) {
+		return (props.options as AutocompleteGroup[]).map((g) => ({
+			label: g.label,
+			options: g.options.map(normaliseOption),
+		}));
+	}
+	// Flat list wrapped in a single unnamed group
+	return [{ label: '', options: flatOptions.value }];
+});
+
+// ── Search / filter ──────────────────────────────────────────────────────────
+const searchQuery = ref('');
+const open = ref(false);
+
+const filteredGroups = computed<AutocompleteGroup[]>(() => {
+	const q = searchQuery.value.toLowerCase().trim();
+	if (!q) return groupedOptions.value;
+	return groupedOptions.value
+		.map((g) => ({
+			label: g.label,
+			options: g.options.filter((o) => o.label.toLowerCase().includes(q) || (o.description && o.description.toLowerCase().includes(q))),
+		}))
+		.filter((g) => g.options.length > 0);
+});
+
+const hasResults = computed(() => filteredGroups.value.some((g) => g.options.length > 0));
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+const displayValue = computed<string>(() => {
+	if (modelValue.value == null || modelValue.value === '') return '';
+	const found = flatOptions.value.find((o) => String(o.value) === String(modelValue.value));
+	return found ? found.label : String(modelValue.value);
+});
+
+function selectOption(option: AutocompleteOption) {
+	modelValue.value = option.value;
+	searchQuery.value = '';
+	open.value = false;
+}
+
+function clearValue() {
+	modelValue.value = null;
+	searchQuery.value = '';
+}
+</script>
+
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Combobox -->
+		<Combobox v-model="modelValue" v-model:open="open" v-model:search-term="searchQuery" :disabled="disabled">
+			<ComboboxAnchor :class="cn(wrapperCls, props.class)">
+				<!-- Leading icon -->
+				<div v-if="leadingIcon" :class="cn(iconCls, 'flex shrink-0 items-center bg-transparent! pl-2.5')">
+					<Icon :name="leadingIcon" :class="iconSize" />
+				</div>
+
+				<!-- Combobox Input -->
+				<ComboboxInput :id="resolvedId" :display-value="() => displayValue" :placeholder="placeholder" :class="cn(textCls, 'border-0 bg-transparent shadow-none')" @blur="handleBlur" />
+
+				<!-- Clear button -->
+				<div v-if="clearable && !disabled && modelValue != null && modelValue !== ''" :class="cn(iconCls, 'flex shrink-0 items-center bg-transparent! pr-2.5')">
+					<ComboboxCancel :class="iconSize + ' hover:opacity-70 disabled:pointer-events-none'">
+						<Icon name="lucide:x" :class="iconSize" />
+					</ComboboxCancel>
+				</div>
+			</ComboboxAnchor>
+
+			<!-- Dropdown List -->
+			<ComboboxList :class="cn('bg-bg-primary dark:bg-bg-primary border-border-base-medium dark:border-border-base-medium w-(--reka-combobox-trigger-width) rounded-xl border shadow-md', dropdownClass)">
+				<ComboboxViewport :class="cn('scroll-py-1 overflow-x-hidden overflow-y-auto p-2')" :style="{ maxHeight: maxHeight }">
+					<!-- Results -->
+					<template v-if="hasResults">
+						<template v-for="group in filteredGroups" :key="group.label">
+							<!-- Group -->
+							<ComboboxGroup v-if="showGroups && group.label" :heading="group.label" class="mb-1">
+								<!-- Options -->
+								<ComboboxItem
+									v-for="option in group.options"
+									:key="String(option.value)"
+									:value="String(option.value)"
+									:disabled="option.disabled"
+									:class="
+										cn(
+											'flex w-full items-center justify-between rounded-lg px-2 py-2 text-left text-sm',
+											'disabled:pointer-events-none disabled:opacity-50',
+											String(option.value) === String(modelValue) ? 'bg-bg-tertiary-medium dark:bg-bg-tertiary-medium text-text-heading dark:text-text-heading' : 'text-text-body dark:text-text-body'
+										)
+									"
+									@select="() => selectOption(option)"
+								>
+									<!-- Left: icon/avatar + label -->
+									<div class="flex min-w-0 flex-1 items-center gap-1.5">
+										<!-- Avatar slot -->
+										<template v-if="option.avatar || $slots.optionAvatar">
+											<slot name="optionAvatar" :option="option">
+												<img :src="option.avatar" :alt="option.label" class="size-4.5 shrink-0 rounded-full object-cover" >
+											</slot>
+										</template>
+
+										<!-- Icon slot -->
+										<template v-else-if="option.icon || $slots.optionIcon">
+											<slot name="optionIcon" :option="option">
+												<Icon :name="option.icon!" class="text-text-body-subtle size-4 shrink-0" />
+											</slot>
+										</template>
+
+										<!-- Default search icon when no avatar/icon -->
+										<template v-else>
+											<slot name="optionLeading" :option="option">
+												<Icon name="lucide:search" class="text-text-body-subtle dark:text-text-body-subtle size-4 shrink-0" />
+											</slot>
+										</template>
+
+										<!-- Label + optional description -->
+										<div class="min-w-0 flex-1">
+											<slot name="optionLabel" :option="option">
+												<span class="block truncate leading-5 font-medium">{{ option.label }}</span>
+											</slot>
+											<span v-if="option.description" class="text-text-body-subtle dark:text-text-body-subtle block truncate text-xs leading-4">
+												{{ option.description }}
+											</span>
+										</div>
+									</div>
+
+									<!-- Right: trailing action slot -->
+									<div class="ml-2 flex shrink-0 items-center gap-1.5">
+										<slot name="optionTrailing" :option="option">
+											<button v-if="String(option.value) === String(modelValue)" tabindex="-1" type="button" class="text-text-body-subtle hover:text-text-heading size-3.5" @click.stop.prevent="clearValue">
+												<Icon name="lucide:x" class="size-3.5" />
+											</button>
+										</slot>
+									</div>
+								</ComboboxItem>
+							</ComboboxGroup>
+
+							<!-- Ungrouped options -->
+							<template v-else>
+								<ComboboxItem
+									v-for="option in group.options"
+									:key="String(option.value)"
+									:value="String(option.value)"
+									:disabled="option.disabled"
+									:class="
+										cn(
+											'flex w-full items-center justify-between rounded-lg px-2 py-2 text-left text-sm',
+											'disabled:pointer-events-none disabled:opacity-50',
+											String(option.value) === String(modelValue) ? 'bg-bg-tertiary-medium dark:bg-bg-tertiary-medium text-text-heading dark:text-text-heading' : 'text-text-body dark:text-text-body'
+										)
+									"
+									@select="() => selectOption(option)"
+								>
+									<!-- Left: icon/avatar + label -->
+									<div class="flex min-w-0 flex-1 items-center gap-1.5">
+										<!-- Avatar slot -->
+										<template v-if="option.avatar || $slots.optionAvatar">
+											<slot name="optionAvatar" :option="option">
+												<img :src="option.avatar" :alt="option.label" class="size-4.5 shrink-0 rounded-full object-cover" >
+											</slot>
+										</template>
+
+										<!-- Icon slot -->
+										<template v-else-if="option.icon || $slots.optionIcon">
+											<slot name="optionIcon" :option="option">
+												<Icon :name="option.icon!" class="text-text-body-subtle size-4 shrink-0" />
+											</slot>
+										</template>
+
+										<!-- Default search icon when no avatar/icon -->
+										<template v-else>
+											<slot name="optionLeading" :option="option">
+												<Icon name="lucide:search" class="text-text-body-subtle dark:text-text-body-subtle size-4 shrink-0" />
+											</slot>
+										</template>
+
+										<!-- Label + optional description -->
+										<div class="min-w-0 flex-1">
+											<slot name="optionLabel" :option="option">
+												<span class="block truncate leading-5 font-medium">{{ option.label }}</span>
+											</slot>
+											<span v-if="option.description" class="text-text-body-subtle dark:text-text-body-subtle block truncate text-xs leading-4">
+												{{ option.description }}
+											</span>
+										</div>
+									</div>
+
+									<!-- Right: trailing action slot -->
+									<div class="ml-2 flex shrink-0 items-center gap-1.5">
+										<slot name="optionTrailing" :option="option">
+											<button v-if="String(option.value) === String(modelValue)" tabindex="-1" type="button" class="text-text-body-subtle hover:text-text-heading size-3.5" @click.stop.prevent="clearValue">
+												<Icon name="lucide:x" class="size-3.5" />
+											</button>
+										</slot>
+									</div>
+								</ComboboxItem>
+							</template>
+						</template>
+					</template>
+
+					<!-- Empty state -->
+					<ComboboxEmpty v-else>
+						<slot name="empty">
+							<div class="text-text-body-subtle dark:text-text-body-subtle py-6 text-center text-sm">
+								{{ emptyText }}
+							</div>
+						</slot>
+					</ComboboxEmpty>
+				</ComboboxViewport>
+
+				<!-- Footer slot (e.g. "Add new user" button) -->
+				<slot name="footer" />
+			</ComboboxList>
+		</Combobox>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>

package/src/runtime/components/dynect/Avatar.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Variants ────────────────────────────────────────────────────────────────
+const avatarVariants = cva('relative flex shrink-0 rounded-full ring-1 ring-border-base dark:ring-border-base', {
+	variants: {
+		size: {
+			xs: 'size-4.5',
+			sm: 'size-6',
+			base: 'size-8',
+			lg: 'size-11',
+			xl: 'size-14',
+			'2xl': 'size-20',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const fallbackVariants = cva('flex size-full items-center justify-center rounded-full bg-bg-tertiary font-semibold text-text-body', {
+	variants: {
+		size: {
+			xs: 'text-[8px]',
+			sm: 'text-xxs',
+			base: 'text-xs',
+			lg: 'text-sm',
+			xl: 'text-base',
+			'2xl': 'text-xl',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const statusVariants = cva('absolute rounded-full bg-bg-success ring-2 ring-bg-white', {
+	variants: {
+		size: {
+			xs: 'size-1.5 bottom-0 right-0',
+			sm: 'size-2 bottom-0 right-0',
+			base: 'size-2.5 bottom-0 right-0',
+			lg: 'size-3 bottom-0.5 right-0.5',
+			xl: 'size-3.5 bottom-0.5 right-0.5',
+			'2xl': 'size-4 bottom-1 right-1',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const removeButtonVariants = cva('absolute flex items-center justify-center rounded-full bg-bg-tertiary ring-1 ring-border-base cursor-pointer hover:bg-bg-quaternary', {
+	variants: {
+		size: {
+			xs: 'size-3 -top-0.5 -right-0.5 [&_svg]:size-2',
+			sm: 'size-3.5 -top-0.5 -right-0.5 [&_svg]:size-2.5',
+			base: 'size-4 top-0 right-0 [&_svg]:size-2.5',
+			lg: 'size-4 top-0.5 right-0.5 [&_svg]:size-3',
+			xl: 'size-5 top-0.5 right-0.5 [&_svg]:size-3',
+			'2xl': 'size-5 top-0.5 right-0.5 [&_svg]:size-3',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+type AvatarVariants = VariantProps<typeof avatarVariants>;
+
+const iconSizeMap: Record<string, string> = {
+	xs: 'size-2.5',
+	sm: 'size-3',
+	base: 'size-4',
+	lg: 'size-5',
+	xl: 'size-6',
+	'2xl': 'size-6',
+};
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface Props {
+	/** Image source URL */
+	src?: string | undefined | null;
+	/** Alt text for the image */
+	alt?: string;
+	/** Fallback initials or text shown when no image */
+	fallback?: string;
+	/** Avatar size */
+	size?: AvatarVariants['size'];
+	/** Show online status indicator dot */
+	status?: boolean;
+	/** Show remove/dismiss button */
+	removable?: boolean;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'base',
+	status: false,
+	removable: false,
+});
+
+const emit = defineEmits<(e: 'remove') => void>();
+</script>
+
+<template>
+	<AvatarRoot data-slot="avatar" :class="cn(avatarVariants({ size }), props.class)">
+		<!-- Image — AvatarFallback auto-shows when src is empty or image fails to load -->
+		<AvatarImage data-slot="avatar-image" :src="src ?? ''" :alt="alt" class="aspect-square size-full rounded-full object-cover" />
+
+		<!-- Fallback: initials, icon, or custom slot -->
+		<AvatarFallback data-slot="avatar-fallback" :class="cn(fallbackVariants({ size }))">
+			<slot name="fallback">
+				<slot name="icon">
+					<Icon v-if="!fallback" name="lucide:user" :class="iconSizeMap[size ?? 'base']" />
+				</slot>
+				<span v-if="fallback">{{ getAvatarText(fallback) }}</span>
+			</slot>
+		</AvatarFallback>
+
+		<!-- Status dot -->
+		<span v-if="status" data-slot="avatar-status" :class="statusVariants({ size })" />
+
+		<!-- Remove button -->
+		<DynectButton v-if="removable" data-slot="avatar-remove" type="button" color="ghost" size="xs" icon-only :class="removeButtonVariants({ size })" @click.stop="emit('remove')">
+			<Icon name="lucide:x" />
+		</DynectButton>
+	</AvatarRoot>
+</template>

package/src/runtime/components/dynect/AvatarGroup.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Variants ────────────────────────────────────────────────────────────────
+const groupVariants = cva('flex items-center overflow-hidden', {
+	variants: {
+		size: {
+			sm: '-space-x-2',
+			base: '-space-x-3.5',
+			lg: '-space-x-4',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const counterVariants = cva('flex shrink-0 items-center justify-center rounded-full bg-bg-tertiary font-medium text-text-body ring-2 ring-bg-white', {
+	variants: {
+		size: {
+			sm: 'size-6 text-xxs ring-1',
+			base: 'size-8 text-xs ring-2',
+			lg: 'size-11 text-sm ring-2',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+type GroupVariants = VariantProps<typeof groupVariants>;
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface Props {
+	size?: GroupVariants['size'];
+	/** Number shown in the counter badge (+N). Hidden when 0. */
+	extra?: number;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'base',
+	extra: 0,
+});
+</script>
+
+<template>
+	<div data-slot="avatar-group" :class="cn(groupVariants({ size }), props.class)">
+		<slot />
+
+		<!-- Counter badge -->
+		<div v-if="extra > 0" data-slot="avatar-group-counter" :class="counterVariants({ size })">+{{ extra }}</div>
+	</div>
+</template>

package/src/runtime/components/dynect/AvatarLabel.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Variants ────────────────────────────────────────────────────────────────
+const wrapperVariants = cva('flex items-center', {
+	variants: {
+		size: {
+			sm: 'gap-1.5',
+			base: 'gap-2',
+			lg: 'gap-2.5',
+			xl: 'gap-2.5',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const nameVariants = cva('font-medium text-text-heading', {
+	variants: {
+		size: {
+			sm: 'text-xs',
+			base: 'text-sm',
+			lg: 'text-base',
+			xl: 'text-xl',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const supportingVariants = cva('text-text-body font-normal', {
+	variants: {
+		size: {
+			sm: 'text-xs',
+			base: 'text-sm',
+			lg: 'text-base',
+			xl: 'text-lg',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+type LabelVariants = VariantProps<typeof wrapperVariants>;
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface Props {
+	/** Avatar image URL */
+	src?: string;
+	/** Avatar fallback initials */
+	fallback?: string;
+	/** Primary name / heading text */
+	name: string;
+	/** Secondary supporting text (e.g. email) */
+	supporting?: string;
+	size?: LabelVariants['size'];
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'base',
+});
+</script>
+
+<template>
+	<div data-slot="avatar-label" :class="cn(wrapperVariants({ size }), props.class)">
+		<!-- Avatar -->
+		<DynectAvatar :src="src" :fallback="fallback" :size="size ?? 'base'" />
+
+		<!-- Text block -->
+		<div v-if="supporting" class="flex flex-col gap-1.5">
+			<span :class="nameVariants({ size })">{{ name }}</span>
+			<span :class="supportingVariants({ size })">{{ supporting }}</span>
+		</div>
+		<span v-else :class="nameVariants({ size })">{{ name }}</span>
+	</div>
+</template>