svelte-kit-vice/src/uix/eidos/components/date-field/README.md

Eidos DateField

Fecha de revision: 2026-05-19.

Baseline

Air no tenia un DateField equivalente en la rama anterior. La referencia local real es Soma date-field, que ya implementa la edicion segmentada, y la receta Eidos solo envuelve esa superficie con tamanos, variante visual y paleta de intents.

Superficie

<DateField bind:value placeholder={today} size="md" variant="surface" color="primary">
	<DateField.Label>Arrival</DateField.Label>
	<DateField.Input name="arrival">
		{#snippet children({ segments })}
			{#each segments as { part, value } (part + value)}
				<DateField.Segment {part}>{value}</DateField.Segment>
			{/each}
		{/snippet}
	</DateField.Input>
</DateField>

Partes publicas: Label, Input, Segment, HiddenInput.

Comparativa

Capacidad	Soma/Eidos	React Aria	Ark UI	Bits UI
Input segmentado	Si	Si	Si	Si
Dia/mes/ano	Si	Si	Si	Si
Hora/minuto/segundo	Si	Si	Si	Si
AM/PM y zona horaria	Si	Si	Si	Si
granularity	Si	Si	Si	Si
hideTimeZone	Si	Si	Si	Si
minValue / maxValue	Si	Si	Si	Si
Validacion custom	Si	Si	Si	Si
Segmentos readonly	Si	No	No	Si
Input hidden para forms	Si	Via DateInput	Si	Si
Integracion con Field	Si	Via Form/TextField	Via Field	Manual
Variante/tamano/paleta visual	Si, Eidos	CSS externo	CSS externo	CSS externo

Decisiones

• No se exporta Provider ni Root publico. La forma Eidos es <DateField> con hijos attached.
• Eidos no implementa logica de calendario ni popover. Eso pertenece a DatePicker, no a DateField.
• HiddenInput se mantiene como parte publica por simetria con Soma, pero el caso normal ya lo renderiza DateField.Input cuando recibe name.
• size, variant y color pertenecen a Eidos porque solo afectan receta visual; value, placeholder, granularity, locale, dir, validacion y navegacion de segmentos pertenecen a Soma.
• Los eventos declarados por Morfo son commit-set y commit-clear; la edicion continua de segmentos no se modela como evento perceptivo por cada pulsacion.

Gaps

Gap	Decision
Popover/calendario	Fuera de DateField; debe vivir en DatePicker.
Formatting visual extra	Usar locale, hourCycle y granularity de Soma.
Rango visual doble	Fuera de este componente; pertenece a range/date picker.

Referencias

• Soma DateField: src/uix/soma/components/date-field/README.md
• React Aria DateField: https://react-spectrum.adobe.com/react-aria/DateField.html
• Ark UI Date Picker / Field: https://ark-ui.com/docs/components/date-picker
• Bits UI Date Field: https://bits-ui.com/docs/components/date-field