Eidos DatePicker
DatePicker is a visual wrapper over Soma's composed picker. It does not own
calendar math: the popup grid is still CalendarProvider, while typing lives in
DateFieldProvider and disclosure lives in PopoverProvider.
Incidencia abierta 2026-05-20
No cerrar este componente como terminado. La demo y el wrapper quedaron por
debajo del contrato UIX:
- El popup no se adapto de forma fiable a la posicion del trigger; debe poder
abrir hacia la izquierda cuando el espacio a la derecha no sea correcto.
- El modo de un mes y dos meses dejo problemas visuales: espacios residuales,
cabecera repetida o mal centrada, flechas sin distribucion correcta y meses
demasiado juntos.
minValue / maxValue necesitan controles claros en la demo y validacion de
pares incoherentes con error visible o logger UIX.- El modo modal/no-modal debe estar implementado y visible. En modo modal debe
haber accion explicita de seleccionar/cerrar y boton de borrar.
- Los controles de demo solo son validos si cambian algo observable en el
stage.
paged navigation, segmentos o limites no pueden quedar como props
decorativas.
- Morfo no esta completo para toda la superficie compuesta de DateField +
Calendar + Popover + DatePicker; no se puede suplir con
data-* manuales en
la demo.
Baseline
| Source |
Result |
morfo-runtime:src/uix/air/components/date-picker |
Not present |
morfo-runtime:src/uix/terra/date-picker |
Present, with real [data-date-picker] root and calendar bridge |
| Current Soma |
Refactored to restore the real root and forward Calendar snippet props |
Composition
| DatePicker part |
Source of behavior |
| Root |
Soma DatePicker.Provider coordinates shared value, placeholder and open state |
| Trigger / Content |
Soma Popover provider + Eidos Popover visuals |
| Input / Segment / HiddenInput |
Soma DateField provider + Eidos DateField visuals |
| Calendar |
Soma DatePicker.Calendar, which creates CalendarProvider |
| Header / Grid / Day parts |
Eidos Calendar wrappers, backed by the Calendar context |
Sema
Correccion 2026-05-20: no documentar este wrapper como "0 eventos" ni usarlo
como justificacion para una demo sin trazabilidad. DatePicker puede no poseer
todo el calculo de calendario, pero su experiencia publica compone acciones de
Popover, DateField y Calendar. La demo debe mostrar esa superficie compuesta:
| Action |
Event owner |
| Open / close popover |
Popover |
| Edit date segments |
DateField |
| Select / unselect / navigate days |
Calendar |
Solo se evita un evento propio de DatePicker cuando de verdad no anade una
accion nueva. Aun asi, el README y la demo deben listar los eventos heredados,
sus targets y como se observan en data-event.
External References
- React Aria: DatePicker combines a DateField and Calendar popover.
- Bits UI: DatePicker is made of Date Field, Calendar and Popover.
- Ark UI: DatePicker owns open/input state and delegates selection to its calendar view.
- shadcn-svelte: Date Picker is composition of Popover plus Calendar.
Decisions
- Keep Calendar as the single source for month generation, min/max validation,
selection, headings, week numbers and day flags.
- Keep DatePicker as an adapter over DateField + Popover + Calendar.
- Use Eidos Calendar subparts inside
DatePicker.Calendar; do not create a
second calendar recipe.
Comparativa
| Capacidad |
Bits UI |
Ark UI |
React Aria |
shadcn-svelte |
UIX |
| Surface compound (root + parts) |
✓ |
✓ |
✓ |
✓ |
✓ |
| ARIA semantics + keyboard nav |
✓ |
✓ |
✓ |
parcial |
✓ via morfo |
| Variantes visuales (size / variant) |
parcial |
parcial |
n/a |
tailwind |
✓ recipe |
| Form integration |
parcial |
parcial |
✓ |
parcial |
✓ via Field |
| Eventos sema declarativos |
n/a |
n/a |
n/a |
n/a |
✓ |
Decisiones
- El wrapper Eidos se mantiene fino: ergonomía visual + tokens.
Comportamiento y ARIA viven en Soma + Morfo.
- Strings públicos usan idlangref bajo
components.{kebab}.*,
con catálogo en src/uix/langs/components/{kebab}.ts.
- Eventos sema declarados en el morfo cubren los cambios de estado
que cargan peso perceptivo (commit, signal). Las navegaciones
internas por teclado son focus moves, no eventos.
- Cuando la API necesita comportamiento nuevo, va a Soma / Morfo
primero; Eidos sólo expone la receta visual del resultado.
Gaps
| Gap |
Disposición |
Detalle |
| API extendida sobre las referencias externas |
diferir |
Sólo si llega un caso de uso real. Mantener la superficie estable. |
| Cobertura adicional de variantes visuales |
diferir |
El recipe cubre sm/md/lg + solid/outline/ghost. Más variantes requieren caso concreto. |
| Documentación per-prop exhaustiva |
implementar |
Cuando se cierre el ciclo de remediación de cada componente. |
| Tests browser-level del flujo completo (Playwright) |
implementar |
Cobertura visual + interacciones. Se hace en una pasada conjunta de tests. |
Passive justification
Componente passive por diseño: no gestiona estado mutable propio,
no responde a teclado más allá del foco del navegador, no emite
eventos sema propios. El feedback perceptivo correspondiente al
cambio que rodea al componente (validación, progreso, transición)
pertenece a quien orquesta ese cambio — Form / Field / Toast /
Dialog — no al componente visual.
dev
546aa8d0ee