From 4faf279c3e396d480362d9f58b050cda1d9f1a40 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Sat, 13 Dec 2025 20:05:27 -0300
Subject: [PATCH] feat: refine login page functionality by adding validation,
 improving error handling, and enhancing user feedback mechanisms

---
 apps/web/src/lib/components/ui/Button.svelte | 128 +++++++++
 apps/web/src/lib/components/ui/Input.svelte  | 174 +++++++++++
 apps/web/src/lib/components/ui/Select.svelte | 287 +++++++++++++++++++
 3 files changed, 589 insertions(+)
 create mode 100644 apps/web/src/lib/components/ui/Button.svelte
 create mode 100644 apps/web/src/lib/components/ui/Input.svelte
 create mode 100644 apps/web/src/lib/components/ui/Select.svelte

diff --git a/apps/web/src/lib/components/ui/Button.svelte b/apps/web/src/lib/components/ui/Button.svelte
new file mode 100644
index 0000000..e7ab5d8
--- /dev/null
+++ b/apps/web/src/lib/components/ui/Button.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import ShineEffect from '$lib/components/ShineEffect.svelte';
+
+	type Size = 'sm' | 'md' | 'lg' | 'icon';
+	type Variant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'link';
+
+	type Classes = Partial<{
+		button: string;
+		content: string;
+		spinner: string;
+	}>;
+
+	interface Props {
+		type?: HTMLButtonAttributes['type'];
+		disabled?: boolean;
+		loading?: boolean;
+		loadingText?: string;
+
+		size?: Size;
+		variant?: Variant;
+		fullWidth?: boolean;
+		shine?: boolean;
+
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+
+		classes?: Classes;
+		class?: string;
+	}
+
+	let {
+		type = 'button',
+		disabled = false,
+		loading = false,
+		loadingText,
+
+		size = 'md',
+		variant = 'primary',
+		fullWidth = false,
+		shine = false,
+
+		left,
+		right,
+		children,
+
+		classes,
+		class: className = ''
+	}: Props = $props();
+
+	const isDisabled = $derived(disabled || loading);
+
+	const sizeClass = $derived(
+		size === 'sm'
+			? 'px-3 py-2 text-sm'
+			: size === 'lg'
+				? 'px-5 py-4 text-base'
+				: size === 'icon'
+					? 'p-2'
+					: 'px-4 py-3.5 text-sm'
+	);
+
+	const base =
+		'relative inline-flex items-center justify-center gap-2 rounded-xl font-bold transition-all duration-300 overflow-hidden';
+
+	const variantClass = $derived(
+		variant === 'primary'
+			? 'bg-primary hover:bg-primary-focus hover:shadow-primary/25 text-primary-content shadow-lg'
+			: variant === 'secondary'
+				? 'bg-base-200 hover:bg-base-300 text-base-content'
+				: variant === 'ghost'
+					? 'bg-transparent hover:bg-base-200/60 text-base-content'
+					: variant === 'outline'
+						? 'border-base-content/20 hover:bg-base-200/40 text-base-content border'
+						: variant === 'danger'
+							? 'bg-error hover:bg-error/90 text-error-content shadow-lg'
+							: 'bg-transparent hover:underline text-primary px-0 py-0 rounded-none'
+	);
+
+	const widthClass = $derived(fullWidth ? 'w-full' : '');
+	const disabledClass = 'disabled:cursor-not-allowed disabled:opacity-50';
+
+	const buttonClass = $derived(
+		[base, sizeClass, variantClass, widthClass, disabledClass, classes?.button, className]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<button {type} class={buttonClass} disabled={isDisabled}>
+	<div
+		class={['relative z-10 flex items-center justify-center gap-2', classes?.content].filter(
+			Boolean
+		)}
+	>
+		{#if loading}
+			<span
+				class={[
+					'border-primary-content/30 border-t-primary-content h-5 w-5 animate-spin rounded-full border-2',
+					classes?.spinner
+				].filter(Boolean)}
+			></span>
+			{#if loadingText}
+				<span>{loadingText}</span>
+			{/if}
+		{:else}
+			{#if left}
+				<span class="[&_svg]:h-4 [&_svg]:w-4">
+					{@render left()}
+				</span>
+			{/if}
+
+			{@render children?.()}
+
+			{#if right}
+				<span class="[&_svg]:h-4 [&_svg]:w-4">
+					{@render right()}
+				</span>
+			{/if}
+		{/if}
+	</div>
+
+	{#if shine}
+		<ShineEffect />
+	{/if}
+</button>
diff --git a/apps/web/src/lib/components/ui/Input.svelte b/apps/web/src/lib/components/ui/Input.svelte
new file mode 100644
index 0000000..f170a9d
--- /dev/null
+++ b/apps/web/src/lib/components/ui/Input.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Size = 'sm' | 'md' | 'lg';
+	type Variant = 'filled' | 'outline';
+
+	type Classes = Partial<{
+		root: string;
+		labelRow: string;
+		label: string;
+		control: string;
+		input: string;
+		helperText: string;
+		errorText: string;
+	}>;
+
+	interface Props {
+		id: string;
+		label: string;
+		value?: string;
+
+		type?: HTMLInputAttributes['type'];
+		name?: string;
+		placeholder?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+
+		error?: string | null;
+		helperText?: string | null;
+
+		size?: Size;
+		variant?: Variant;
+		fullWidth?: boolean;
+
+		left?: Snippet;
+		right?: Snippet;
+
+		inputProps?: Omit<
+			HTMLInputAttributes,
+			| 'id'
+			| 'type'
+			| 'name'
+			| 'placeholder'
+			| 'autocomplete'
+			| 'disabled'
+			| 'required'
+			| 'readOnly'
+			| 'value'
+		>;
+
+		classes?: Classes;
+		class?: string;
+	}
+
+	let {
+		id,
+		label,
+		value = $bindable(''),
+
+		type = 'text',
+		name,
+		placeholder = '',
+		autocomplete,
+		disabled = false,
+		readonly = false,
+		required = false,
+
+		error = null,
+		helperText = null,
+
+		size = 'md',
+		variant = 'filled',
+		fullWidth = true,
+
+		left,
+		right,
+
+		inputProps,
+		classes,
+		class: className = ''
+	}: Props = $props();
+
+	const invalid = $derived(!!error);
+	const hasLeft = $derived(!!left);
+	const hasRight = $derived(!!right);
+
+	const paddingY = $derived(size === 'sm' ? 'py-2.5' : size === 'lg' ? 'py-3.5' : 'py-3');
+	const paddingX = 'px-4';
+	const paddingLeft = $derived(hasLeft ? 'pl-11' : '');
+	const paddingRight = $derived(hasRight ? 'pr-11' : '');
+
+	const baseInput =
+		'border-base-content/10 bg-base-200/25 text-base-content placeholder-base-content/40 focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+
+	const variantClass = $derived(variant === 'outline' ? 'bg-transparent' : 'bg-base-200/25');
+
+	const inputClass = $derived(
+		[
+			baseInput,
+			variantClass,
+			fullWidth ? 'w-full' : '',
+			paddingX,
+			paddingY,
+			paddingLeft,
+			paddingRight,
+			classes?.input
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<Field.Root {invalid} {required} {disabled} class={['space-y-2', classes?.root, className]}>
+	<div class={['flex items-center justify-between gap-3', classes?.labelRow].filter(Boolean)}>
+		<Field.Label
+			for={id}
+			class={[
+				'text-base-content/60 text-xs font-semibold tracking-wider uppercase',
+				classes?.label
+			].filter(Boolean)}
+		>
+			{label}
+		</Field.Label>
+		{@render right?.()}
+	</div>
+
+	<div class={['group relative', classes?.control].filter(Boolean)}>
+		{#if left}
+			<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+				<div class="text-base-content/50 [&_svg]:h-4 [&_svg]:w-4">
+					{@render left()}
+				</div>
+			</div>
+		{/if}
+
+		<Field.Input
+			{id}
+			{type}
+			{name}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{autocomplete}
+			{required}
+			bind:value
+			{...inputProps}
+			class={inputClass}
+		/>
+
+		{#if right}
+			<div class="absolute inset-y-0 right-0 flex items-center pr-4">
+				<div class="text-base-content/70 [&_svg]:h-4 [&_svg]:w-4">
+					{@render right()}
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	{#if helperText && !error}
+		<Field.HelperText class={['text-base-content/50 text-sm', classes?.helperText].filter(Boolean)}>
+			{helperText}
+		</Field.HelperText>
+	{/if}
+
+	{#if error}
+		<Field.ErrorText class={['text-error text-sm font-medium', classes?.errorText].filter(Boolean)}>
+			{error}
+		</Field.ErrorText>
+	{/if}
+</Field.Root>
diff --git a/apps/web/src/lib/components/ui/Select.svelte b/apps/web/src/lib/components/ui/Select.svelte
new file mode 100644
index 0000000..d94f806
--- /dev/null
+++ b/apps/web/src/lib/components/ui/Select.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { Select, createListCollection } from '@ark-ui/svelte/select';
+	import type { Snippet } from 'svelte';
+	import { Check, ChevronDown, X } from 'lucide-svelte';
+
+	type Size = 'sm' | 'md' | 'lg';
+	type Variant = 'filled' | 'outline';
+
+	export interface SelectItem {
+		label: string;
+		value: string;
+		disabled?: boolean;
+		group?: string;
+	}
+
+	type Classes = Partial<{
+		root: string;
+		labelRow: string;
+		label: string;
+		control: string;
+		trigger: string;
+		content: string;
+		item: string;
+		helperText: string;
+		errorText: string;
+	}>;
+
+	interface Props {
+		id: string;
+		label: string;
+		items: SelectItem[];
+
+		value?: string[];
+		name?: string;
+		placeholder?: string;
+
+		disabled?: boolean;
+		readOnly?: boolean;
+		required?: boolean;
+		error?: string | null;
+		helperText?: string | null;
+
+		size?: Size;
+		variant?: Variant;
+		fullWidth?: boolean;
+
+		multiple?: boolean;
+		clearable?: boolean;
+		maxSelected?: number;
+
+		positioning?: Select.RootProps<SelectItem>['positioning'];
+
+		/** Slot ao lado do label (ex.: link, ação, etc.) */
+		labelRight?: Snippet;
+		/** Slot antes do texto no trigger (ex.: ícone) */
+		triggerLeft?: Snippet;
+
+		classes?: Classes;
+		class?: string;
+	}
+
+	let {
+		id,
+		label,
+		items,
+		value = $bindable<string[]>([]),
+		name,
+		placeholder = 'Selecione...',
+
+		disabled = false,
+		readOnly = false,
+		required = false,
+		error = null,
+		helperText = null,
+
+		size = 'md',
+		variant = 'filled',
+		fullWidth = true,
+
+		multiple = false,
+		clearable = true,
+		maxSelected,
+		positioning,
+
+		labelRight,
+		triggerLeft,
+		classes,
+		class: className = ''
+	}: Props = $props();
+
+	const invalid = $derived(!!error);
+	const hasGroups = $derived(items.some((i) => i.group));
+	const canClear = $derived(clearable && value.length > 0 && !disabled && !readOnly);
+
+	const collection = $derived(
+		createListCollection<SelectItem>({
+			items
+		})
+	);
+
+	const groups = $derived.by(() => {
+		if (!hasGroups) return [];
+		const record: Record<string, SelectItem[]> = {};
+		for (const item of items) {
+			const key = item.group ?? 'Opções';
+			const arr = record[key] ?? [];
+			arr.push(item);
+			record[key] = arr;
+		}
+		return Object.entries(record);
+	});
+
+	const paddingY = $derived(size === 'sm' ? 'py-2.5' : size === 'lg' ? 'py-3.5' : 'py-3');
+	const paddingX = 'px-4';
+
+	const baseTrigger =
+		'border-base-content/10 bg-base-200/25 text-base-content focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+
+	const variantClass = $derived(variant === 'outline' ? 'bg-transparent' : 'bg-base-200/25');
+
+	const triggerClass = $derived(
+		[
+			baseTrigger,
+			variantClass,
+			fullWidth ? 'w-full' : '',
+			'flex items-center justify-between gap-3 text-left',
+			paddingX,
+			paddingY,
+			classes?.trigger
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const contentClass = $derived(
+		[
+			'bg-base-100 border-base-200 w-[var(--reference-width)] overflow-hidden rounded-xl border shadow-lg',
+			'max-h-72',
+			'z-50',
+			classes?.content
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	function handleValueChange(details: { value: string[] }) {
+		let next = details.value;
+		if (
+			typeof maxSelected === 'number' &&
+			maxSelected >= 0 &&
+			multiple &&
+			next.length > maxSelected
+		) {
+			next = next.slice(0, maxSelected);
+		}
+		value = next;
+	}
+</script>
+
+<Field.Root {invalid} {required} {disabled} class={['space-y-2', classes?.root, className]}>
+	<div class={['flex items-center justify-between gap-3', classes?.labelRow].filter(Boolean)}>
+		<Field.Label
+			for={id}
+			class={[
+				'text-base-content/60 text-xs font-semibold tracking-wider uppercase',
+				classes?.label
+			].filter(Boolean)}
+		>
+			{label}
+		</Field.Label>
+		{@render labelRight?.()}
+	</div>
+
+	<Select.Root
+		{collection}
+		{disabled}
+		{required}
+		{readOnly}
+		{invalid}
+		{multiple}
+		{positioning}
+		{value}
+		onValueChange={handleValueChange}
+	>
+		<Select.Control class={classes?.control}>
+			<Select.Trigger {id} class={triggerClass}>
+				<div class="flex min-w-0 flex-1 items-center gap-2">
+					{#if triggerLeft}
+						<span class="text-base-content/60 shrink-0 [&_svg]:h-4 [&_svg]:w-4">
+							{@render triggerLeft()}
+						</span>
+					{/if}
+					<Select.ValueText
+						{placeholder}
+						class="text-base-content/90 data-placeholder-shown:text-base-content/40 truncate"
+					/>
+				</div>
+
+				<div class="flex shrink-0 items-center gap-2">
+					{#if canClear}
+						<Select.ClearTrigger
+							aria-label="Limpar seleção"
+							class="text-base-content/50 hover:text-base-content/80 inline-flex items-center justify-center rounded-md p-1 transition-colors"
+						>
+							<X class="h-4 w-4" />
+						</Select.ClearTrigger>
+					{/if}
+					<Select.Indicator class="text-base-content/60 [&_svg]:h-4 [&_svg]:w-4">
+						<ChevronDown />
+					</Select.Indicator>
+				</div>
+			</Select.Trigger>
+		</Select.Control>
+
+		<Portal>
+			<Select.Positioner>
+				<Select.Content class={contentClass}>
+					<div class="p-1">
+						{#if hasGroups}
+							{#each groups as [groupLabel, groupItems] (groupLabel)}
+								<Select.ItemGroup class="mb-1 last:mb-0">
+									<Select.ItemGroupLabel
+										class="text-base-content/50 px-3 py-2 text-xs font-semibold tracking-wider uppercase"
+									>
+										{groupLabel}
+									</Select.ItemGroupLabel>
+									{#each groupItems as item (item.value)}
+										<Select.Item
+											{item}
+											class={[
+												'text-base-content relative flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm',
+												'data-highlighted:bg-base-200 data-highlighted:text-base-content',
+												'data-[state=checked]:bg-primary/10',
+												'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+												classes?.item
+											].filter(Boolean)}
+										>
+											<Select.ItemText class="min-w-0 flex-1 truncate">{item.label}</Select.ItemText
+											>
+											<Select.ItemIndicator class="text-primary shrink-0">
+												<Check class="h-4 w-4" />
+											</Select.ItemIndicator>
+										</Select.Item>
+									{/each}
+								</Select.ItemGroup>
+							{/each}
+						{:else}
+							{#each items as item (item.value)}
+								<Select.Item
+									{item}
+									class={[
+										'text-base-content relative flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm',
+										'data-highlighted:bg-base-200 data-highlighted:text-base-content',
+										'data-[state=checked]:bg-primary/10',
+										'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+										classes?.item
+									].filter(Boolean)}
+								>
+									<Select.ItemText class="min-w-0 flex-1 truncate">{item.label}</Select.ItemText>
+									<Select.ItemIndicator class="text-primary shrink-0">
+										<Check class="h-4 w-4" />
+									</Select.ItemIndicator>
+								</Select.Item>
+							{/each}
+						{/if}
+					</div>
+				</Select.Content>
+			</Select.Positioner>
+		</Portal>
+
+		<Select.HiddenSelect {name} />
+	</Select.Root>
+
+	{#if helperText && !error}
+		<Field.HelperText class={['text-base-content/50 text-sm', classes?.helperText].filter(Boolean)}>
+			{helperText}
+		</Field.HelperText>
+	{/if}
+
+	{#if error}
+		<Field.ErrorText class={['text-error text-sm font-medium', classes?.errorText].filter(Boolean)}>
+			{error}
+		</Field.ErrorText>
+	{/if}
+</Field.Root>