Field

<script lang="ts">
	import { Field, Input } from '@archeblack/ui';

	let name = $state('Portal de clientes');
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Nombre del proyecto">
		<Input bind:value={name} />
	</Field>
</div>

<script lang="ts">
	import { Field, Input } from '@archeblack/ui';

	let email = $state('');
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Correo de facturación" hint="Enviaremos las facturas a esta dirección.">
		<Input type="email" bind:value={email} placeholder="nombre@empresa.com" />
	</Field>
</div>

<script lang="ts">
	import { Field, Input } from '@archeblack/ui';

	let subdomain = $state('portal clientes');

	// El mensaje dice qué hacer, no solo qué está mal.
	const error = $derived(
		/^[a-z0-9-]*$/.test(subdomain) ? undefined : 'Usa solo minúsculas, números y guiones.'
	);
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Subdominio" {error} hint="Es la dirección pública del proyecto.">
		<Input bind:value={subdomain} suffix=".arche.app" />
	</Field>
</div>

<script lang="ts">
	import { Field, Input } from '@archeblack/ui';
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 20rem)">
	<Field label="Nombre del equipo" required>
		<Input autocomplete="organization" />
	</Field>
	<Field
		label="ID del proyecto"
		hint="No se puede cambiar: se asigna al crear el proyecto."
		disabled
	>
		<Input value="prj_7f3a92c1" />
	</Field>
</div>

<script lang="ts">
	import { tick } from 'svelte';
	import { Button, Field, Input, Select, Textarea } from '@archeblack/ui';

	let name = $state('');
	let email = $state('');
	let subdomain = $state('');
	let region = $state('');
	let description = $state('');
	let submitted = $state(false);
	let saved = $state(false);

	// Los errores aparecen después del primer envío, no mientras la persona escribe por primera vez.
	const errors = $derived({
		name: name.trim() ? undefined : 'Escribe un nombre para el proyecto.',
		email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
			? undefined
			: 'Escribe un correo con el formato nombre@empresa.com.',
		subdomain: /^[a-z0-9-]+$/.test(subdomain)
			? undefined
			: 'Usa solo minúsculas, números y guiones.',
		region: region ? undefined : 'Elige dónde se alojan los datos.'
	});
	/** El error de un campo, solo después del primer envío. */
	const errorOf = (field: keyof typeof errors) => (submitted ? errors[field] : undefined);

	async function submit(event: SubmitEvent) {
		event.preventDefault();
		const form = event.currentTarget as HTMLFormElement;
		submitted = true;
		saved = !Object.values(errors).some(Boolean);
		if (!saved) {
			// Espera a que los campos muestren su error y lleva el foco al primero.
			await tick();
			form.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
		}
	}
</script>

<form
	novalidate
	onsubmit={submit}
	style:display="grid"
	style:gap="var(--arche-spacing-6)"
	style:width="min(100%, 26rem)"
>
	<p style:margin="0" style:color="var(--arche-color-text-muted)">
		Los campos con * son obligatorios.
	</p>
	<Field label="Nombre del proyecto" required error={errorOf('name')}>
		<Input bind:value={name} autocomplete="off" />
	</Field>
	<Field
		label="Correo de facturación"
		hint="Enviaremos las facturas a esta dirección."
		required
		error={errorOf('email')}
	>
		<Input type="email" bind:value={email} placeholder="nombre@empresa.com" autocomplete="email" />
	</Field>
	<Field label="Subdominio" required error={errorOf('subdomain')}>
		<Input bind:value={subdomain} suffix=".arche.app" autocomplete="off" />
	</Field>
	<Field label="Región" required error={errorOf('region')}>
		<Select bind:value={region} placeholder="Elige una región">
			<option value="sa">Sudamérica (São Paulo)</option>
			<option value="us">EE. UU. Este (Virginia)</option>
			<option value="eu">Europa (Irlanda)</option>
		</Select>
	</Field>
	<Field label="Descripción" hint="Opcional. La ve todo el equipo.">
		<Textarea bind:value={description} rows={3} />
	</Field>
	<div style:display="flex" style:align-items="center" style:gap="var(--arche-spacing-4)">
		<Button type="submit" variant="primary">Crear proyecto</Button>
		<span role="status" style:color="var(--arche-color-text-muted)">
			{saved ? 'Proyecto listo para crear.' : ''}
		</span>
	</div>
</form>