3.6 KiB

Raw Blame History

Eidos Flex

display:flex container. Eidos-native: añade los props container-side (direction, align, justify, wrap, rowGap, columnGap) sobre la superficie completa de Box, del que hereda estructura y se renderiza a través de él. Item-side props (alignSelf, gridColumn, flex, grow, …) viven en el hijo Box.

Superficie

<Flex direction="row" align="center" justify="space-between" gap={3} padding={4}>
	<Box>Start</Box>
	<Box>Middle</Box>
	<Box>End</Box>
</Flex>

Baseline

Origen: air/components/layout/flex (rama morfo-runtime). Misma adaptación que Box: drop del prefijo air-, vars renombradas a --flex-*, var(--space-N) en lugar de var(--air-space-N), resolución vía ActiveEidos.resolve.

Composición: Flex se renderiza a través de <Box> con display="flex" fijo. El DOM final es un único <div data-box data-flex> — el recipe de Flex añade selectores [data-box][data-flex] { … } sobre los de Box. Los props heredados (padding, margin, size, position) se pasan intactos al Box raíz.

Comparativa

Capacidad	UIX	Radix Themes	Chakra UI	Mantine
`direction` (row/column +reverse)	Sí	Sí	Sí (`flexDirection`)	Sí
`align` → align-items	Sí	Sí	Sí (`alignItems`)	Sí
`justify` → justify-content	Sí	Sí	Sí (`justifyContent`)	Sí
`wrap` → flex-wrap	Sí	Sí	Sí (`flexWrap`)	Sí
`gap` + `rowGap` / `columnGap`	Sí	Sí (`gap`, `gapX`, `gapY`)	Sí	Sí
`inline` boolean (inline-flex)	Sí	Vía `display="inline-flex"`	Sí	Sí (`inline`)
`alignContent` (multi-line cross)	Sí	Sí	Sí	Sí
Item props heredados de Box	Sí (composición)	Sí	Sí (style-props todo en Box)	— split
Responsive	Sí	Sí	Sí	Sí

Decisiones

Hereda Box por composición, no por mixin — Flex renderiza a través de <Box> con display="flex" fijo. Mantiene el contrato Box-as-foundation y permite que [data-box] siga siendo el selector canónico para todo lo que pinta como box.
align/justify cortos — preferimos align sobre alignItems (Mantine convention). Coincide con Radix Themes; difiere de Chakra.
inline boolean en vez de display="inline-flex" — ergonomía; el resto de la API queda consistente con Box (un solo display).
Item props NO en Flex — flex, grow, alignSelf, gridColumn van en el <Box> hijo. Split estilo Radix.

Eventos Sema

0 eventos. Pasivo — sólo organiza hijos. Mismas reglas que Box.

Gaps

Gap	Disposición	Detalle
`alignContent` (multi-line cross-axis)	✅ implementado en `ec66999b` siguiente commit	Cubierto.
Helpers `HStack` / `VStack` (alias direction-fijo)	diferir	Ergonomía Chakra. UIX usa `<Stack direction="…">`. Reconsiderar si la fricción es real.
`inline-flex` shorthand alternativo (e.g. `<InlineFlex>`)	descartar	`inline` boolean cubre el caso.
Slot `divider` entre hijos (separator automático)	diferir	Patrón Chakra Stack. Más natural en Stack que en Flex.

Referencias

Radix Themes Flex: https://www.radix-ui.com/themes/docs/components/flex
Chakra UI Flex: https://chakra-ui.com/docs/components/flex
Mantine Flex: https://mantine.dev/core/flex/
MDN flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout

Passive justification

Visual-only (scope: ['eidos']). Una sola part Provider, marker [data-flex]. Sin estados ni keyboard ni ARIA ni eventos. El recipe consume --flex-* writeable inline.

3.6 KiB Raw Blame History