@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,355 @@
+<template>
+	<div>
+		<DynectFormLabel as="div" :label="label" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<label v-if="props.variant === 'default'" :for="resolvedId" :class="dropzoneClasses" @dragenter.prevent="toggleActive" @dragleave.prevent="toggleActive" @dragover.prevent @drop.prevent="handleDrop">
+			<div class="flex w-full flex-col items-center gap-4">
+				<slot name="body">
+					<div v-if="!props.isMobile" class="flex flex-col items-center gap-2 text-center">
+						<Icon name="lucide:upload" class="size-6" :class="iconColorClass" />
+						<p class="text-sm font-normal" :class="textColorClass">Click to upload or drag and drop</p>
+						<p class="text-xs font-medium" :class="textColorClass">{{ formatAllowedExtensions }}. Max {{ props.maxSizeLimit }} MB</p>
+					</div>
+					<div v-if="props.isMobile">
+						<Icon name="lucide:upload" class="size-4" :class="iconColorClass" />
+					</div>
+				</slot>
+
+				<DynectButton v-if="!props.isMobile" type="button" color="dark" size="xs" :disabled="props.disabled" left-icon="lucide:search" @click.prevent="fileInputRef?.click()"> Browse file </DynectButton>
+			</div>
+		</label>
+
+		<!-- Simple variant -->
+		<div v-else-if="props.variant === 'simple'" class="flex items-center gap-4">
+			<!-- 64×64 image preview thumbnail -->
+			<div class="border-border-base bg-bg-tertiary relative size-16 shrink-0 overflow-hidden rounded-xl border">
+				<img v-if="previewFile && isImageFile(previewFile)" :src="getFileUrl(previewFile)" :alt="getFileName(previewFile)" class="size-full object-cover" >
+				<div v-else-if="previewFile" class="flex size-full items-center justify-center">
+					<Icon name="lucide:file-text" class="text-text-body-subtle size-8" />
+				</div>
+				<div v-else class="size-full" style="background-image: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%); background-size: 16px 16px" />
+				<button v-if="previewFile" type="button" class="absolute top-1 right-1 flex size-4 items-center justify-center rounded-full bg-black/50 text-white hover:bg-red-500" @click="deleteFile(0)">
+					<Icon name="lucide:x" class="size-3" />
+				</button>
+			</div>
+
+			<!-- File input control + description/error -->
+			<div class="flex flex-1 flex-col">
+				<label :for="resolvedId" :class="simpleInputWrapperClasses" @dragenter.prevent="toggleActive" @dragleave.prevent="toggleActive" @dragover.prevent @drop.prevent="handleDrop">
+					<!-- Left: "Choose files" button section -->
+					<div :class="simpleChooseBtnClasses">
+						<span class="text-sm font-normal" :class="simpleTextColorClass">Choose files</span>
+					</div>
+					<!-- Right: selected filename or placeholder -->
+					<div class="bg-bg-secondary-medium dark:bg-bg-secondary-medium flex min-w-0 flex-1 items-center px-2.5">
+						<span class="line-clamp-1 w-full text-sm font-normal" :class="simpleTextColorClass">
+							{{ selectedFileName || 'No file chosen' }}
+						</span>
+					</div>
+				</label>
+
+				<!-- Description -->
+				<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+				<!-- Error Message -->
+				<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+			</div>
+		</div>
+
+		<div v-if="allFiles.length > 0 && props.variant === 'default'" class="mt-4 w-full">
+			<ul class="grid max-w-fit grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-3">
+				<li v-for="(src, index) in allFiles" :key="index" class="group relative size-24 rounded-sm border" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
+					<img v-if="isImageFile(src)" :src="getFileUrl(src)" :alt="getFileName(src) + index" class="size-full rounded-sm object-cover" >
+					<div v-else class="flex size-full shrink-0 items-center justify-center rounded-sm bg-gray-100">
+						<Icon name="lucide:file-text" class="size-10 text-gray-500" />
+					</div>
+					<div v-if="isHovering" class="absolute inset-0 flex flex-col items-center justify-center truncate rounded-sm bg-black/50 opacity-100 transition-opacity duration-300">
+						<div class="text-xxs h-full w-full content-end truncate p-2 text-center text-white">
+							<div class="truncate">{{ getFileName(src) }}</div>
+							<div>{{ getFileSize(src) }}</div>
+						</div>
+					</div>
+					<DynectButton
+						color="ghost"
+						size="xs"
+						:icon-only="true"
+						:aria-label="`Remove ${getFileName(src)}`"
+						class="absolute top-2 right-2 flex size-4 items-center justify-center rounded-full bg-black/50 text-white transition-opacity duration-300 group-hover:bg-red-500 group-hover:opacity-100 group-hover:hover:text-white"
+						@click="deleteFile(index)"
+					>
+						<Icon name="lucide:x" class="size-3.5" />
+					</DynectButton>
+				</li>
+			</ul>
+		</div>
+
+		<!-- Description (default variant only) -->
+		<DynectFormDescription v-if="!errorMessage && props.variant === 'default'" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message (default variant only) -->
+		<DynectFormError v-if="props.variant === 'default'" :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+
+		<!-- Shared hidden file input (used by both variants via fileInputRef) -->
+		<input :id="resolvedId" ref="fileInputRef" type="file" :multiple="props.isMultiple" :accept="acceptedFileTypes" :disabled="props.disabled" name="file" class="hidden" @change="handleFileSelect" >
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+defineOptions({
+	name: 'Dropzone',
+});
+
+interface Props {
+	id?: HTMLAttributes['id'];
+	allowedExt?: string[];
+	maxSizeLimit?: number;
+	maxFileLimit?: number;
+	isMultiple?: boolean;
+	variant?: 'default' | 'simple';
+	isMobile?: boolean;
+	disabled?: boolean;
+	data?: any;
+	label?: string;
+	name?: string;
+	required?: boolean;
+	description?: string;
+	tooltip?: string;
+	labelClass?: string;
+	descriptionClass?: string;
+	errorClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	allowedExt: () => ['jpg', 'jpeg', 'png', 'pdf'],
+	maxSizeLimit: 30,
+	maxFileLimit: 1,
+	isMultiple: false,
+	isMobile: false,
+	disabled: false,
+	variant: 'default',
+	data: undefined,
+});
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `dropzone-${fallbackId}`);
+
+const model = defineModel('modelValue', {
+	required: false,
+	validator: (value: any) => {
+		if (value) {
+			if (Array.isArray(value)) {
+				return value.every((file) => file instanceof File);
+			}
+			return value instanceof File || typeof value === 'string';
+		}
+		return true;
+	},
+});
+
+// Type for handling both File objects and URL strings
+type FileItem = File | { url: string; name: string; isExisting: true };
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const isHovering = ref<boolean>(false);
+
+const {
+	droppedFile,
+	toggleActive,
+	deleteFile: deleteDroppedFile,
+	selectedFile,
+} = useDropzone({
+	allowedExt: props.allowedExt,
+	maxSizeLimit: props.maxSizeLimit,
+	maxFileLimit: props.maxFileLimit,
+});
+
+const existingFiles = ref<FileItem[]>([]);
+
+const initializeExistingFiles = () => {
+	if (!props.data) {
+		existingFiles.value = [];
+		return;
+	}
+	const urls: any = Array.isArray(props.data) ? props.data : [props.data];
+	existingFiles.value = urls.map((url: any, index: number) => ({
+		url,
+		name: url.split('/').pop() || `File ${index + 1}`,
+		isExisting: true as const,
+	}));
+};
+
+onMounted(async () => {
+	initializeExistingFiles();
+});
+
+watch(
+	() => props.data,
+	() => {
+		initializeExistingFiles();
+	},
+	{ deep: true }
+);
+
+const emit = defineEmits(['delete:file']);
+
+const allFiles = computed(() => [...existingFiles.value, ...droppedFile.value]);
+
+const deleteFile = (index: number) => {
+	emit('delete:file', index);
+	if (props.isMultiple) {
+		(model.value as File[]).splice(index, 1);
+		deleteDroppedFile(index);
+	} else {
+		model.value = null;
+		droppedFile.value = [];
+	}
+};
+
+const acceptedFileTypes = computed(() => props.allowedExt.map((ext: string) => `.${ext}`).join(','));
+
+const formatAllowedExtensions = computed(() => {
+	const extensions = props.allowedExt.slice(0, 3);
+	const remaining = props.allowedExt.length - 3;
+	return remaining > 0 ? `${extensions.join(', ')} +${remaining} more` : extensions.join(', ');
+});
+
+// Resolve dropzone state: success > danger > disabled > default
+type DropzoneState = 'success' | 'danger' | 'disabled' | 'default';
+
+const dropzoneState = computed<DropzoneState>(() => {
+	if (allFiles.value.length > 0) return 'success';
+	if (errorMessage.value) return 'danger';
+	if (props.disabled) return 'disabled';
+	return 'default';
+});
+
+// State-based styling maps
+const STATE_STYLES: any = {
+	background: {
+		success: 'bg-bg-success-soft border-border-success-subtle',
+		danger: 'bg-bg-danger-soft border-border-danger-subtle',
+		disabled: 'bg-bg-secondary-medium cursor-not-allowed border-border-base-medium',
+		default: 'bg-bg-secondary-medium border-border-base-medium hover:bg-bg-tertiary',
+	},
+	text: {
+		success: 'text-emerald-900',
+		danger: 'text-rose-900',
+		disabled: 'text-gray-400',
+		default: 'text-gray-500',
+	},
+	icon: {
+		success: 'text-emerald-900',
+		danger: 'text-rose-900',
+		disabled: 'text-brand-400',
+		default: 'text-brand-500',
+	},
+} as const;
+
+const dropzoneClasses = computed(() => {
+	const base = ['relative flex w-full cursor-pointer flex-col items-center justify-center gap-4 rounded-xl border border-dashed', props.isMobile ? 'max-w-fit p-2.5' : 'px-8 py-8'];
+	return [...base, STATE_STYLES.background[dropzoneState.value]];
+});
+
+const textColorClass = computed(() => STATE_STYLES.text[dropzoneState.value]);
+const iconColorClass = computed(() => STATE_STYLES.icon[dropzoneState.value]);
+
+// Simple variant state-based styles
+const SIMPLE_STATE_STYLES = {
+	wrapper: {
+		success: 'border-border-success',
+		danger: 'border-border-danger',
+		disabled: 'cursor-not-allowed opacity-60',
+		default: 'border-border-base hover:border-border-base-medium',
+	},
+	button: {
+		success: 'bg-bg-success-soft border-r border-r-border-success dark:border-r-border-success',
+		danger: 'bg-bg-danger-soft border-r border-r-border-danger-subtle dark:border-r-border-danger-subtle',
+		disabled: 'bg-bg-disabled border-r border-r-border-base dark:border-r-border-base',
+		default: 'bg-bg-tertiary border-r border-r-border-base dark:border-r-border-base',
+	},
+	text: {
+		success: 'text-text-fg-success',
+		danger: 'text-text-fg-danger',
+		disabled: 'text-text-fg-disabled',
+		default: 'text-text-body-subtle',
+	},
+} as const;
+
+const simpleInputWrapperClasses = computed(() => ['flex h-10 w-full cursor-pointer overflow-hidden rounded-xl border', SIMPLE_STATE_STYLES.wrapper[dropzoneState.value]]);
+
+const simpleChooseBtnClasses = computed(() => ['flex shrink-0 items-center px-2.5', SIMPLE_STATE_STYLES.button[dropzoneState.value]]);
+
+const simpleTextColorClass = computed(() => SIMPLE_STATE_STYLES.text[dropzoneState.value]);
+
+// First file for simple variant preview thumbnail
+const previewFile = computed(() => allFiles.value[0] ?? null);
+const selectedFileName = computed(() => (previewFile.value ? getFileName(previewFile.value) : ''));
+
+// Store object URLs for cleanup
+const objectUrls = ref<Map<File, string>>(new Map());
+
+const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp']);
+
+// Helper to extract file extension
+const getFileExtension = (filename: string): string => filename.split('.').pop()?.toLowerCase() || '';
+
+const getFileUrl = (item: FileItem): string => {
+	if (item instanceof File) {
+		if (!objectUrls.value.has(item)) {
+			const url = URL.createObjectURL(item);
+			objectUrls.value.set(item, url);
+		}
+		return objectUrls.value.get(item)!;
+	}
+	return item.url;
+};
+
+const isImageFile = (item: FileItem): boolean => {
+	if (item instanceof File) {
+		return IMAGE_EXTENSIONS.has(getFileExtension(item.name)) || item.type.startsWith('image/');
+	}
+	const urlPath = item.url.split('?')[0] || '';
+	return IMAGE_EXTENSIONS.has(getFileExtension(urlPath));
+};
+
+const getFileName = (item: FileItem): string => item.name;
+
+const getFileSize = (item: FileItem): string => {
+	if (item instanceof File) {
+		return formatFileSize(item.size);
+	}
+	return '';
+};
+
+onUnmounted(() => {
+	objectUrls.value.forEach((url: string) => URL.revokeObjectURL(url));
+	objectUrls.value.clear();
+});
+
+const handleDrop = (event: DragEvent) => selectedFile(event, 'drop', fileInputRef);
+const handleFileSelect = (event: Event) => selectedFile(event, 'select', fileInputRef);
+
+const formatFileSize = (bytes: number): string => {
+	const kb = bytes / 1024;
+	const mb = kb / 1024;
+	if (mb >= 1) {
+		return `${mb.toFixed(2)} MB`;
+	}
+	return `${kb.toFixed(2)} KB`;
+};
+
+const { errorMessage } = useField(() => resolvedId.value || props.name || 'dropzone', undefined, {
+	initialValue: model.value,
+	syncVModel: true,
+});
+
+watch(
+	droppedFile,
+	(newFiles: File[]) => {
+		model.value = props.isMultiple ? newFiles : newFiles[0];
+	},
+	{ deep: true }
+);
+</script>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { CalendarEvent, ViewMode } from '@/components/base/event-calendar/types';
+
+// Re-export types for convenience
+export type { CalendarEvent, ViewMode, EventColor, EventStatus, RecurringPattern } from '@/components/base/event-calendar/types';
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface Props {
+	/** Array of calendar events to display */
+	events?: CalendarEvent[];
+	/** Initial view mode: 'month' | 'week' | 'day' | 'agenda' */
+	initialView?: ViewMode;
+	/** Whether the calendar is in loading state */
+	loading?: boolean;
+	/** Disable drag and drop for events */
+	disableDrag?: boolean;
+	/** Custom class for the calendar container */
+	class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	events: () => [],
+	initialView: 'month',
+	loading: false,
+	disableDrag: false,
+});
+
+// ── Emits ────────────────────────────────────────────────────────────────────
+const emit = defineEmits<{
+	/** Fired when an event is added or updated */
+	(e: 'eventAdd' | 'eventUpdate', event: CalendarEvent): void;
+	/** Fired when an event is deleted */
+	(e: 'eventDelete', eventId: string): void;
+}>();
+
+// ── Computed ─────────────────────────────────────────────────────────────────
+const calendarEvents = computed(() => props.events || []);
+
+// ── Event Handlers ───────────────────────────────────────────────────────────
+const handleEventAdd = (event: CalendarEvent) => {
+	emit('eventAdd', event);
+};
+
+const handleEventUpdate = (event: CalendarEvent) => {
+	emit('eventUpdate', event);
+};
+
+const handleEventDelete = (eventId: string) => {
+	emit('eventDelete', eventId);
+};
+</script>
+
+<template>
+	<div :class="props.class">
+		<!-- Loading State -->
+		<div v-if="loading" class="bg-background border-border flex h-full min-h-150 items-center justify-center rounded-lg border p-6">
+			<div class="flex flex-col items-center gap-3">
+				<Icon name="lucide:loader-circle" class="text-primary size-8 animate-spin" />
+				<p class="text-muted-foreground text-sm">Loading calendar...</p>
+			</div>
+		</div>
+
+		<!-- Calendar -->
+		<BaseEventCalendar v-else :events="calendarEvents" :initial-view="initialView" :disable-drag="disableDrag" @event-add="handleEventAdd" @event-update="handleEventUpdate" @event-delete="handleEventDelete" />
+	</div>
+</template>

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

@@ -0,0 +1,162 @@
+<template>
+	<DropdownMenu v-model:open="modelOpen">
+		<DropdownMenuTrigger as-child>
+			<DynectButton size="sm" color="secondary">
+				<Icon name="lucide:funnel" class="size-4" />
+				Filters
+			</DynectButton>
+		</DropdownMenuTrigger>
+
+		<DropdownMenuContent align="end">
+			<div class="bg-bg-white flex w-80 flex-col overflow-hidden">
+				<!-- Header -->
+				<div class="border-border-base flex items-center justify-between border-b px-2 pt-2 pb-4">
+					<span class="text-text-heading text-base leading-6 font-medium">Filters</span>
+					<div class="flex items-center gap-2">
+						<DynectButton v-if="showSaveView" size="sm" color="ghost" class="h-auto p-0 text-sm font-normal hover:bg-transparent" @click="emit('save-view')"> Save view </DynectButton>
+						<span v-if="showSaveView" class="bg-border-base size-1.5 rounded-full" />
+						<DynectButton size="sm" color="ghost" class="h-auto p-0 text-sm font-normal hover:bg-transparent" @click="handleClearAll"> Clear all </DynectButton>
+					</div>
+				</div>
+
+				<!-- Filter Groups (Accordion) -->
+				<LazyAccordion :type="'multiple'" :default-value="Array.from(openGroups)" collapsible class="flex-1 overflow-y-auto" @update:model-value="handleAccordionChange">
+					<AccordionItem v-for="group in groups" :key="group.key" :value="group.key" class="border-border-base border-b px-2 last:border-b-0">
+						<!-- Accordion Trigger -->
+						<AccordionTrigger class="group flex w-full items-center justify-between gap-6 py-2.5 no-underline hover:bg-transparent hover:no-underline">
+							<span class="group-data-[state=open]:text-text-heading group-data-[state=closed]:text-text-body flex-1 text-left text-sm leading-5 font-medium">
+								{{ group.label }}
+							</span>
+							<template #icon>
+								<Icon name="lucide:chevron-down" class="group-data-[state=open]:text-text-heading group-data-[state=closed]:text-text-body size-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+							</template>
+						</AccordionTrigger>
+
+						<!-- Accordion Content -->
+						<AccordionContent class="pb-2">
+							<div class="flex flex-col gap-1">
+								<div v-for="option in group.options" :key="option.value" class="hover:bg-bg-secondary flex cursor-pointer items-center justify-between gap-1.5 rounded-lg px-2 py-2" :class="{ 'bg-gray-100': isSelected(group.key, option.value) }" @click="toggleOption(group.key, option.value)">
+									<div class="flex min-w-0 flex-1 items-center gap-1.5">
+										<!-- Checkbox -->
+										<DynectCheckbox :model-value="isSelected(group.key, option.value)" @click.stop />
+										<span class="text-text-body truncate text-sm leading-none font-medium">
+											{{ option.label }}
+										</span>
+									</div>
+									<span v-if="option.count !== undefined" class="text-text-body shrink-0 text-xs leading-none"> ({{ option.count }}) </span>
+								</div>
+							</div>
+						</AccordionContent>
+					</AccordionItem>
+				</LazyAccordion>
+
+				<!-- Footer Buttons -->
+				<div class="flex items-center gap-3 px-2 pt-0 pb-2">
+					<DynectButton color="secondary" size="base" class="flex-1" @click="handleReset"> Reset </DynectButton>
+					<DynectButton color="brand" size="base" class="flex-1" @click="handleApply"> Apply </DynectButton>
+				</div>
+			</div>
+		</DropdownMenuContent>
+	</DropdownMenu>
+</template>
+
+<script setup lang="ts">
+export interface FilterOption {
+	label: string;
+	value: string;
+	count?: number;
+}
+
+export interface FilterGroup {
+	key: string;
+	label: string;
+	options: FilterOption[];
+}
+
+export type FilterSelections = Record<string, string[]>;
+
+interface Props {
+	groups: FilterGroup[];
+	defaultOpen?: string[];
+	showSaveView?: boolean;
+	colorButton?: 'brand' | 'dynect' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'secondary' | 'tertiary' | 'ghost' | 'link' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	defaultOpen: () => [],
+	showSaveView: false,
+	colorButton: 'secondary',
+});
+
+const modelFilterValue = defineModel<FilterSelections>('modelValue', {
+	required: false,
+});
+
+const modelOpen = defineModel<boolean>('open', {
+	required: false,
+});
+
+const emit = defineEmits<{
+	apply: [value: FilterSelections];
+	reset: [];
+	'clear-all': [];
+	'save-view': [];
+}>();
+
+// Track which accordion groups are open
+const openGroups = ref<Set<string>>(new Set(props.defaultOpen));
+
+// Internal selection state, synced with modelValue
+const selections = ref<FilterSelections>({ ...modelFilterValue.value });
+
+watch(
+	() => modelFilterValue.value,
+	(val) => {
+		selections.value = { ...val };
+	},
+	{ deep: true }
+);
+
+function handleAccordionChange(values: string | string[] | undefined) {
+	// Update openGroups based on accordion state
+	if (values) {
+		openGroups.value = new Set(Array.isArray(values) ? values : [values]);
+	} else {
+		openGroups.value = new Set();
+	}
+}
+
+function isSelected(groupKey: string, value: string): boolean {
+	return (selections.value[groupKey] ?? []).includes(value);
+}
+
+function toggleOption(groupKey: string, value: string) {
+	const current = selections.value[groupKey] ?? [];
+	const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+
+	selections.value = {
+		...selections.value,
+		[groupKey]: updated,
+	};
+}
+
+function handleApply() {
+	modelOpen.value = false;
+	modelFilterValue.value = selections.value;
+	emit('apply', selections.value);
+}
+
+function handleReset() {
+	selections.value = {};
+	modelFilterValue.value = {};
+	modelOpen.value = false;
+	emit('reset');
+}
+
+function handleClearAll() {
+	selections.value = {};
+	modelFilterValue.value = {};
+	modelOpen.value = false;
+	emit('clear-all');
+}
+</script>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+interface Props {
+	/** Description text to display */
+	description?: string;
+	/** ID for aria-describedby */
+	id?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+	<p v-if="$slots.description || description" :id="id" :class="cn('text-text-body mt-1.5 text-xs leading-5', props.class)">
+		<slot name="description">{{ description }}</slot>
+	</p>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+interface Props {
+	/** Error message to display */
+	error?: string;
+	/** ID for aria-describedby */
+	id?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+	<span v-if="error" :id="id" :class="cn('text-text-fg-danger text-xs leading-5', props.class)">
+		{{ error }}
+	</span>
+</template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+interface Props {
+	/** Label text */
+	label?: string;
+	/** ID of the form control */
+	id?: string;
+	/** Show required asterisk */
+	required?: boolean;
+	/** Tooltip text */
+	tooltip?: string;
+	/** Description text */
+	description?: string;
+	/** Error message */
+	error?: string;
+	/** Additional classes for the wrapper */
+	class?: HTMLAttributes['class'];
+	/** Additional classes for the label */
+	labelClass?: string;
+	/** Additional classes for the description */
+	descriptionClass?: string;
+	/** Additional classes for the error */
+	errorClass?: string;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+	<div :class="cn('w-full', props.class)">
+		<!-- Label with required indicator and tooltip -->
+		<DynectFormLabel :label="label" :for="id" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Form control slot -->
+		<slot />
+
+		<!-- Description (only show if no error) -->
+		<DynectFormDescription v-if="!error" :id="id ? `${id}-description` : undefined" :description="description" :class="descriptionClass" />
+
+		<!-- Error message -->
+		<DynectFormError :id="id ? `${id}-error` : undefined" :error="error" :class="errorClass" />
+	</div>
+</template>