@satellatickets/ui 0.1.0 → 0.2.1

package/dist/native/index.js

@@ -1,73 +1,37 @@
-import { UIContext, buttonIconSize, createUIContextValue, iconSizePx, spinnerSizePx, textVariantStyles, useBrand, useButton, useColorScheme, useTheme, useTheme as useTheme$1 } from "@satellatickets/core";
-import { Animated, Easing, Pressable, StyleSheet, Text as Text$1, View, useColorScheme as useColorScheme$1 } from "react-native";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, useEffect, useMemo, useState } from "react";
+import { FormFieldContext, ToastContext, UIContext, buttonIconSize, createFormFieldValue, createToastStore, createUIContextValue, firstEnabledTab, iconButtonIconSize, iconSizePx, inputIconSize, isFeedbackTone, spinnerSizePx, textVariantStyles, useBrand, useButton, useColorScheme, useControllableState, useFormFieldControl, useLink, useTheme, useTheme as useTheme$1, useToast } from "@satellatickets/core";
+import { AccessibilityInfo, Animated, Easing, Linking, Modal as Modal$1, Pressable, ScrollView, StyleSheet, Text as Text$1, TextInput, View, useColorScheme as useColorScheme$1 } from "react-native";
+import { Children, createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Svg, { Circle, Line, Path, Rect } from "react-native-svg";
-//#region src/badge/Badge.native.tsx
-const variantColors = {
-	success: (t) => t.color.feedback.success,
-	warning: (t) => t.color.feedback.warning,
-	danger: (t) => t.color.feedback.danger,
-	info: (t) => t.color.feedback.info
+//#region src/_internal/feedback.ts
+/** El icono refuerza el color: el tono no depende solo de él. */
+const feedbackIcon = {
+	success: "circle-check",
+	warning: "triangle-alert",
+	danger: "circle-x",
+	info: "info"
+};
+/**
+* Si el tono interrumpe al lector de pantalla (`alert`, `assertive`) o espera a que
+* termine de leer (`status`, `polite`).
+*/
+const feedbackUrgent = {
+	success: false,
+	warning: true,
+	danger: true,
+	info: false
 };
-const styles$1 = StyleSheet.create({ base: {
-	flexDirection: "row",
-	alignItems: "center"
-} });
-function Badge({ variant = "info", style, testID, children }) {
-	const t = useTheme$1();
-	const colors = variantColors[variant](t);
-	const container = {
-		paddingVertical: t.space[1],
-		paddingHorizontal: t.space[2],
-		borderRadius: t.radius.full,
-		borderWidth: t.borderWidth.thin,
-		borderColor: colors.border,
-		backgroundColor: colors.bg
-	};
-	const label = {
-		flexShrink: 1,
-		fontSize: t.font.size.xs,
-		lineHeight: t.font.lineHeight.xs,
-		fontWeight: t.font.weight.medium,
-		color: colors.text
-	};
-	const family = t.font.family.sans;
-	if (family !== void 0) label.fontFamily = family;
-	return /* @__PURE__ */ jsx(View, {
-		testID,
-		style: [
-			styles$1.base,
-			container,
-			style
-		],
-		children: /* @__PURE__ */ jsx(Text$1, {
-			style: label,
-			children
-		})
-	});
-}
 //#endregion
-//#region src/box/Box.native.tsx
-function Box({ padding, paddingX, paddingY, background, radius, borderColor, shadow, flex, style, testID, children }) {
-	const t = useTheme$1();
-	const computed = {};
-	if (padding !== void 0) computed.padding = t.space[padding];
-	if (paddingX !== void 0) computed.paddingHorizontal = t.space[paddingX];
-	if (paddingY !== void 0) computed.paddingVertical = t.space[paddingY];
-	if (background !== void 0) computed.backgroundColor = t.color.bg[background];
-	if (radius !== void 0) computed.borderRadius = t.radius[radius];
-	if (borderColor !== void 0) {
-		computed.borderWidth = t.borderWidth.thin;
-		computed.borderColor = t.color.border[borderColor];
-	}
-	if (shadow !== void 0) computed.boxShadow = t.shadow[shadow];
-	if (flex !== void 0) computed.flex = flex;
-	return /* @__PURE__ */ jsx(View, {
-		style: [computed, style],
-		testID,
+//#region src/_internal/label.native.tsx
+/**
+* El texto como `children` se envuelve en `<Text>`, porque React Native no admite texto
+* suelto dentro de una vista; cualquier otro contenido se deja tal cual (CLAUDE.md §5).
+*/
+function renderLabel(children, style) {
+	return Children.toArray(children).every((child) => typeof child === "string" || typeof child === "number") ? /* @__PURE__ */ jsx(Text$1, {
+		style,
 		children
-	});
+	}) : children;
 }
 //#endregion
 //#region ../icons/src/icons.ts
@@ -385,7 +349,7 @@ function Icon({ name, size = "md", color = "primary", label, style, testID }) {
 		height: px,
 		viewBox: `0 0 24 24`,
 		fill: "none",
-		stroke: t.color.text[color],
+		stroke: isFeedbackTone(color) ? t.color.feedback[color].icon : t.color.text[color],
 		strokeWidth: 2,
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
@@ -394,17 +358,39 @@ function Icon({ name, size = "md", color = "primary", label, style, testID }) {
 	});
 }
 //#endregion
+//#region src/_internal/useReducedMotion.native.ts
+/**
+* `true` si el usuario ha pedido reducir el movimiento en los ajustes del sistema. Es
+* el equivalente nativo de `@media (prefers-reduced-motion: reduce)` en web.
+*/
+function useReducedMotion() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		let mounted = true;
+		AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+			if (mounted && enabled) setReduced(true);
+		});
+		const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduced);
+		return () => {
+			mounted = false;
+			subscription.remove();
+		};
+	}, []);
+	return reduced;
+}
+//#endregion
 //#region src/spinner/Spinner.native.tsx
 /**
-* Indicador de carga indeterminada. Versión mínima (ROADMAP Fase 3): el icono
-* `loader-circle` girando con `Animated` y el driver nativo, sin dependencias extra.
-* Con `label` es una barra de progreso indeterminada para los lectores de
-* pantalla; sin él, es decorativo.
+* Indicador de carga indeterminada: el icono `loader-circle` girando con `Animated` y
+* el driver nativo, sin dependencias extra. Con `label` es una barra de progreso
+* indeterminada para los lectores de pantalla; sin él, es decorativo. Con movimiento
+* reducido gira más despacio, pero no se detiene: parado no diría que algo está en curso.
 */
 function Spinner({ size = "md", color = "primary", label, style, testID }) {
 	const t = useTheme$1();
 	const [rotation] = useState(() => new Animated.Value(0));
-	const duration = t.duration.slow * 2;
+	const reducedMotion = useReducedMotion();
+	const duration = t.duration.slow * (reducedMotion ? 8 : 2);
 	useEffect(() => {
 		const loop = Animated.loop(Animated.timing(rotation, {
 			toValue: 1,
@@ -499,7 +485,7 @@ const sizeStyles = {
 		lineHeight: t.font.lineHeight.md
 	})
 };
-const styles = StyleSheet.create({
+const styles$16 = StyleSheet.create({
 	base: {
 		flexDirection: "row",
 		alignItems: "center",
@@ -523,13 +509,6 @@ const styles = StyleSheet.create({
 		justifyContent: "center"
 	}
 });
-/** El texto como `children` se envuelve en `<Text>`; cualquier otro contenido se deja tal cual. */
-function renderLabel(children, style) {
-	return Children.toArray(children).every((child) => typeof child === "string" || typeof child === "number") ? /* @__PURE__ */ jsx(Text$1, {
-		style,
-		children
-	}) : children;
-}
 function Button({ variant = "primary", size = "md", disabled = false, loading = false, iconStart, iconEnd, fullWidth = false, onPress, accessibilityLabel, style, testID, ref, children }) {
 	const t = useTheme$1();
 	const { interactive, press } = useButton({
@@ -582,18 +561,18 @@ function Button({ variant = "primary", size = "md", disabled = false, loading =
 		onBlur: () => setFocused(false),
 		testID,
 		style: ({ pressed }) => [
-			styles.base,
+			styles$16.base,
 			container,
 			{ backgroundColor: disabled ? colors.disabled : pressed ? colors.pressed : colors.background },
-			fullWidth && styles.fullWidth,
+			fullWidth && styles$16.fullWidth,
 			focused && focusRing,
 			style
 		],
 		children: [/* @__PURE__ */ jsxs(View, {
 			style: [
-				styles.content,
+				styles$16.content,
 				{ gap: t.space[2] },
-				loading && styles.hidden
+				loading && styles$16.hidden
 			],
 			children: [
 				iconStart === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
@@ -609,7 +588,7 @@ function Button({ variant = "primary", size = "md", disabled = false, loading =
 				})
 			]
 		}), loading ? /* @__PURE__ */ jsx(View, {
-			style: styles.spinner,
+			style: styles$16.spinner,
 			children: /* @__PURE__ */ jsx(Spinner, {
 				size: iconSize,
 				color: content
@@ -618,82 +597,1740 @@ function Button({ variant = "primary", size = "md", disabled = false, loading =
 	});
 }
 //#endregion
-//#region src/stack/Stack.native.tsx
-const alignItems = {
-	stretch: "stretch",
-	start: "flex-start",
-	center: "center",
-	end: "flex-end"
-};
-const justifyContent = {
-	start: "flex-start",
-	center: "center",
-	end: "flex-end",
-	between: "space-between",
-	around: "space-around"
-};
-function Stack({ direction = "column", gap, align = "stretch", justify = "start", wrap = false, style, ...boxProps }) {
+//#region src/icon-button/IconButton.native.tsx
+const styles$15 = StyleSheet.create({ base: {
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0
+} });
+function IconButton({ icon, label, variant = "ghost", size = "md", disabled = false, loading = false, onPress, style, testID, ref }) {
 	const t = useTheme$1();
-	const layout = {
-		flexDirection: direction,
-		alignItems: alignItems[align],
-		justifyContent: justifyContent[justify],
-		flexWrap: wrap ? "wrap" : "nowrap"
+	const { interactive, press } = useButton({
+		disabled,
+		loading,
+		onPress
+	});
+	const [focused, setFocused] = useState(false);
+	const colors = variantStyles[variant](t);
+	const side = t.size.control[size];
+	const content = disabled ? "disabled" : colors.content;
+	const iconSize = iconButtonIconSize[size];
+	const container = {
+		width: side,
+		height: side,
+		borderRadius: t.radius.md,
+		borderWidth: t.borderWidth.thin,
+		borderColor: disabled ? "transparent" : colors.border
 	};
-	if (gap !== void 0) layout.gap = t.space[gap];
-	return /* @__PURE__ */ jsx(Box, {
-		...boxProps,
-		style: [layout, style]
+	const focusRing = {
+		outlineStyle: "solid",
+		outlineColor: t.color.border.focus,
+		outlineWidth: t.borderWidth.thick,
+		outlineOffset: t.borderWidth.thick
+	};
+	const hitSlop = Math.max(0, (t.size.control.md - side) / 2);
+	return /* @__PURE__ */ jsx(Pressable, {
+		ref,
+		accessibilityRole: "button",
+		accessibilityLabel: label,
+		accessibilityState: {
+			disabled: !interactive,
+			busy: loading
+		},
+		disabled: !interactive,
+		hitSlop,
+		onPress: press,
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		testID,
+		style: ({ pressed }) => [
+			styles$15.base,
+			container,
+			{ backgroundColor: disabled ? colors.disabled : pressed ? colors.pressed : colors.background },
+			focused && focusRing,
+			style
+		],
+		children: loading ? /* @__PURE__ */ jsx(Spinner, {
+			size: iconSize,
+			color: content
+		}) : /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: iconSize,
+			color: content
+		})
 	});
 }
 //#endregion
-//#region src/text/Text.native.tsx
-const textAlign = {
-	left: "left",
-	center: "center",
-	right: "right"
+//#region src/alert/Alert.native.tsx
+const styles$14 = StyleSheet.create({
+	root: {
+		flexDirection: "row",
+		alignItems: "flex-start",
+		alignSelf: "stretch"
+	},
+	message: {
+		flex: 1,
+		minWidth: 0,
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	icon: {
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	content: {
+		flex: 1,
+		minWidth: 0
+	},
+	close: { flexShrink: 0 }
+});
+function Alert({ tone = "info", title, onClose, closeLabel, style, testID, children }) {
+	const t = useTheme$1();
+	const colors = t.color.feedback[tone];
+	const hasDescription = children !== void 0 && children !== null;
+	const titleLine = t.font.lineHeight.md;
+	const descriptionLine = t.font.lineHeight.sm;
+	const container = {
+		gap: t.space[3],
+		paddingVertical: t.space[3],
+		paddingHorizontal: t.space[4],
+		borderWidth: t.borderWidth.thin,
+		borderRadius: t.radius.md,
+		borderColor: colors.border,
+		backgroundColor: colors.bg
+	};
+	const titleStyle = {
+		fontSize: t.font.size.md,
+		lineHeight: titleLine,
+		fontWeight: t.font.weight.semibold,
+		color: colors.text
+	};
+	const descriptionStyle = {
+		fontSize: t.font.size.sm,
+		lineHeight: descriptionLine,
+		fontWeight: t.font.weight.regular,
+		color: colors.text
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) {
+		titleStyle.fontFamily = family;
+		descriptionStyle.fontFamily = family;
+	}
+	const closeOffset = (titleLine - t.size.control.sm) / 2;
+	return /* @__PURE__ */ jsxs(View, {
+		style: [
+			styles$14.root,
+			container,
+			style
+		],
+		testID,
+		children: [/* @__PURE__ */ jsxs(View, {
+			accessible: true,
+			accessibilityRole: "alert",
+			accessibilityLiveRegion: feedbackUrgent[tone] ? "assertive" : "polite",
+			style: [styles$14.message, { gap: t.space[3] }],
+			children: [/* @__PURE__ */ jsx(View, {
+				style: [styles$14.icon, { height: titleLine }],
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: feedbackIcon[tone],
+					size: "md",
+					color: tone
+				})
+			}), /* @__PURE__ */ jsxs(View, {
+				style: styles$14.content,
+				children: [title === void 0 ? null : /* @__PURE__ */ jsx(Text$1, {
+					style: titleStyle,
+					children: title
+				}), hasDescription ? /* @__PURE__ */ jsx(View, {
+					style: title === void 0 ? { paddingVertical: (titleLine - descriptionLine) / 2 } : null,
+					children: renderLabel(children, descriptionStyle)
+				}) : null]
+			})]
+		}), onClose === void 0 ? null : /* @__PURE__ */ jsx(IconButton, {
+			icon: "x",
+			label: closeLabel,
+			size: "sm",
+			variant: "ghost",
+			onPress: onClose,
+			style: [styles$14.close, {
+				marginVertical: closeOffset,
+				marginRight: -t.space[2]
+			}]
+		})]
+	});
+}
+//#endregion
+//#region src/badge/Badge.native.tsx
+const variantColors = {
+	success: (t) => t.color.feedback.success,
+	warning: (t) => t.color.feedback.warning,
+	danger: (t) => t.color.feedback.danger,
+	info: (t) => t.color.feedback.info
 };
-function Text({ variant = "body", color = "primary", align, truncate = false, numberOfLines, style, testID, children }) {
+const styles$13 = StyleSheet.create({ base: {
+	flexDirection: "row",
+	alignItems: "center"
+} });
+function Badge({ variant = "info", style, testID, children }) {
 	const t = useTheme$1();
-	const spec = textVariantStyles[variant];
-	const computed = {
-		fontSize: t.font.size[spec.size],
-		lineHeight: t.font.lineHeight[spec.size],
-		fontWeight: t.font.weight[spec.weight],
-		color: t.color.text[color]
+	const colors = variantColors[variant](t);
+	const container = {
+		paddingVertical: t.space[1],
+		paddingHorizontal: t.space[2],
+		borderRadius: t.radius.full,
+		borderWidth: t.borderWidth.thin,
+		borderColor: colors.border,
+		backgroundColor: colors.bg
 	};
-	const family = t.font.family[spec.family];
-	if (family !== void 0) computed.fontFamily = family;
-	if (align !== void 0) computed.textAlign = textAlign[align];
-	if (spec.uppercase) computed.textTransform = "uppercase";
-	if (spec.letterSpacing !== void 0) computed.letterSpacing = spec.letterSpacing;
-	return /* @__PURE__ */ jsx(Text$1, {
-		style: [computed, style],
-		numberOfLines: truncate ? 1 : numberOfLines,
-		ellipsizeMode: "tail",
-		accessibilityRole: spec.headingLevel === void 0 ? void 0 : "header",
-		"aria-level": spec.headingLevel,
+	const label = {
+		flexShrink: 1,
+		fontSize: t.font.size.xs,
+		lineHeight: t.font.lineHeight.xs,
+		fontWeight: t.font.weight.medium,
+		color: colors.text
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) label.fontFamily = family;
+	return /* @__PURE__ */ jsx(View, {
 		testID,
-		children
+		style: [
+			styles$13.base,
+			container,
+			style
+		],
+		children: /* @__PURE__ */ jsx(Text$1, {
+			style: label,
+			children
+		})
 	});
 }
 //#endregion
-//#region src/ui-provider/UIProvider.native.tsx
-/**
-* Activa tema y marca para todo lo que envuelve (ADR-010). Entrega el tema
-* resuelto por contexto; `system` sigue a `Appearance`.
-*/
-function UIProvider({ theme = "system", brand, children }) {
-	const system = useColorScheme$1() === "dark" ? "dark" : "light";
-	const value = useMemo(() => createUIContextValue(theme, system, brand), [
-		theme,
-		system,
-		brand
-	]);
-	return /* @__PURE__ */ jsx(UIContext.Provider, {
-		value,
-		children
+//#region src/box/Box.native.tsx
+function Box({ padding, paddingX, paddingY, background, radius, borderColor, shadow, flex, style, testID, children }) {
+	const t = useTheme$1();
+	const computed = {};
+	if (padding !== void 0) computed.padding = t.space[padding];
+	if (paddingX !== void 0) computed.paddingHorizontal = t.space[paddingX];
+	if (paddingY !== void 0) computed.paddingVertical = t.space[paddingY];
+	if (background !== void 0) computed.backgroundColor = t.color.bg[background];
+	if (radius !== void 0) computed.borderRadius = t.radius[radius];
+	if (borderColor !== void 0) {
+		computed.borderWidth = t.borderWidth.thin;
+		computed.borderColor = t.color.border[borderColor];
+	}
+	if (shadow !== void 0) computed.boxShadow = t.shadow[shadow];
+	if (flex !== void 0) computed.flex = flex;
+	return /* @__PURE__ */ jsx(View, {
+		style: [computed, style],
+		testID,
+		children
+	});
+}
+//#endregion
+//#region src/card/Card.native.tsx
+const variantStyle = {
+	outlined: (t) => ({ backgroundColor: t.color.bg.surface }),
+	elevated: (t) => ({
+		backgroundColor: t.color.bg.elevated,
+		boxShadow: t.shadow.md
+	})
+};
+const styles$12 = StyleSheet.create({ root: {
+	alignSelf: "stretch",
+	overflow: "hidden"
+} });
+function Card({ variant = "outlined", padding = 4, onPress, accessibilityLabel, style, testID, ref, children }) {
+	const t = useTheme$1();
+	const [focused, setFocused] = useState(false);
+	const container = {
+		padding: t.space[padding],
+		borderWidth: t.borderWidth.thin,
+		borderRadius: t.radius.lg,
+		borderColor: t.color.border.default,
+		...variantStyle[variant](t)
+	};
+	if (onPress === void 0) return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: [
+			styles$12.root,
+			container,
+			style
+		],
+		testID,
+		children
+	});
+	const focusRing = {
+		outlineStyle: "solid",
+		outlineColor: t.color.border.focus,
+		outlineWidth: t.borderWidth.thick,
+		outlineOffset: t.borderWidth.thick
+	};
+	return /* @__PURE__ */ jsx(Pressable, {
+		ref,
+		accessibilityRole: "button",
+		accessibilityLabel,
+		onPress,
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		testID,
+		style: ({ pressed }) => [
+			styles$12.root,
+			container,
+			pressed && { backgroundColor: t.color.bg.subtle },
+			focused && focusRing,
+			style
+		],
+		children
+	});
+}
+//#endregion
+//#region src/checkbox/Checkbox.native.tsx
+const styles$11 = StyleSheet.create({
+	root: {
+		flexDirection: "row",
+		alignItems: "flex-start",
+		alignSelf: "flex-start"
+	},
+	box: {
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	label: { flexShrink: 1 }
+});
+function Checkbox({ checked, defaultChecked = false, indeterminate = false, onCheckedChange, disabled = false, invalid = false, accessibilityLabel, style, testID, ref, children }) {
+	const t = useTheme$1();
+	const [isChecked, setChecked] = useControllableState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const [focused, setFocused] = useState(false);
+	const filled = isChecked || indeterminate;
+	const size = t.space[5];
+	const lineHeight = t.font.lineHeight.md;
+	const box = {
+		width: size,
+		height: size,
+		marginTop: (lineHeight - size) / 2,
+		borderRadius: t.radius.xs,
+		borderWidth: t.borderWidth.thin,
+		borderColor: disabled ? "transparent" : filled ? t.color.action.primary : invalid ? t.color.feedback.danger.icon : t.color.border.strong,
+		backgroundColor: disabled ? t.color.action.disabled : filled ? t.color.action.primary : t.color.bg.surface
+	};
+	const focusRing = {
+		outlineStyle: "solid",
+		outlineColor: t.color.border.focus,
+		outlineWidth: t.borderWidth.thick,
+		outlineOffset: t.borderWidth.thick
+	};
+	const label = {
+		flexShrink: 1,
+		fontSize: t.font.size.md,
+		lineHeight,
+		color: disabled ? t.color.text.disabled : t.color.text.primary
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) label.fontFamily = family;
+	const mark = disabled ? "disabled" : "onPrimary";
+	const minHeight = t.space[6];
+	const hitSlop = Math.max(0, (t.size.control.md - minHeight) / 2);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		ref,
+		accessibilityRole: "checkbox",
+		accessibilityLabel,
+		accessibilityState: {
+			checked: indeterminate ? "mixed" : isChecked,
+			disabled
+		},
+		disabled,
+		hitSlop,
+		onPress: () => setChecked(!isChecked),
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		testID,
+		style: [
+			styles$11.root,
+			{
+				gap: t.space[2],
+				minHeight
+			},
+			style
+		],
+		children: [/* @__PURE__ */ jsx(View, {
+			style: [
+				styles$11.box,
+				box,
+				focused && focusRing
+			],
+			children: indeterminate ? /* @__PURE__ */ jsx(Icon, {
+				name: "minus",
+				size: "sm",
+				color: mark
+			}) : isChecked ? /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				size: "sm",
+				color: mark
+			}) : null
+		}), children === void 0 || children === null ? null : renderLabel(children, label)]
+	});
+}
+//#endregion
+//#region src/divider/Divider.native.tsx
+const orientationStyle = {
+	horizontal: (t) => ({
+		alignSelf: "stretch",
+		height: t.borderWidth.thin
+	}),
+	vertical: (t) => ({
+		alignSelf: "stretch",
+		width: t.borderWidth.thin
+	})
+};
+const styles$10 = StyleSheet.create({ root: { flexShrink: 0 } });
+/** En nativo es decorativo: los lectores de pantalla no anuncian separadores. */
+function Divider({ orientation = "horizontal", style, testID }) {
+	const t = useTheme$1();
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no",
+		style: [
+			styles$10.root,
+			orientationStyle[orientation](t),
+			{ backgroundColor: t.color.border.default },
+			style
+		],
+		testID
+	});
+}
+//#endregion
+//#region src/form-field/FormField.native.tsx
+const styles$9 = StyleSheet.create({
+	root: { alignSelf: "stretch" },
+	label: { alignSelf: "flex-start" },
+	error: {
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	errorIcon: { justifyContent: "center" },
+	errorText: { flex: 1 }
+});
+const hiddenFromScreenReaders$1 = {
+	accessibilityElementsHidden: true,
+	importantForAccessibility: "no"
+};
+/**
+* Etiqueta, ayuda y error de un control (ADR-037). En nativo no hay `htmlFor`: el
+* control toma la etiqueta como nombre accesible y la ayuda y el error como pista.
+*/
+function FormField({ label, help, error, required = false, disabled = false, style, testID, children }) {
+	const t = useTheme$1();
+	const baseId = useId();
+	const field = useMemo(() => createFormFieldValue(baseId, {
+		label,
+		help,
+		error,
+		disabled,
+		required
+	}), [
+		baseId,
+		label,
+		help,
+		error,
+		disabled,
+		required
+	]);
+	const small = {
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) small.fontFamily = family;
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: field,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [
+				styles$9.root,
+				{ gap: t.space[1] },
+				style
+			],
+			testID,
+			children: [
+				/* @__PURE__ */ jsxs(Text$1, {
+					style: [
+						styles$9.label,
+						small,
+						{
+							fontWeight: t.font.weight.medium,
+							color: disabled ? t.color.text.disabled : t.color.text.primary
+						}
+					],
+					...hiddenFromScreenReaders$1,
+					children: [label, required ? /* @__PURE__ */ jsx(Text$1, {
+						style: { color: t.color.feedback.danger.text },
+						children: " *"
+					}) : null]
+				}),
+				children,
+				field.help === void 0 ? null : /* @__PURE__ */ jsx(Text$1, {
+					style: [small, { color: t.color.text.muted }],
+					...hiddenFromScreenReaders$1,
+					children: field.help
+				}),
+				field.error === void 0 ? null : /* @__PURE__ */ jsxs(View, {
+					style: [styles$9.error, { gap: t.space[1] }],
+					accessibilityLiveRegion: "polite",
+					children: [/* @__PURE__ */ jsx(View, {
+						style: [styles$9.errorIcon, { height: t.font.lineHeight.sm }],
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "circle-alert",
+							size: "sm",
+							color: "danger"
+						})
+					}), /* @__PURE__ */ jsx(Text$1, {
+						style: [
+							styles$9.errorText,
+							small,
+							{ color: t.color.feedback.danger.text }
+						],
+						children: field.error
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/_internal/field.native.ts
+/**
+* La caja de los controles de texto (`Input`, `TextArea`, `Select`): borde, fondo y
+* estados. Es el equivalente nativo de `field.module.css`.
+*
+* El borde en reposo es `border.strong`: el contorno de un campo tiene que
+* distinguirse del fondo con un contraste de 3:1.
+*/
+function fieldContainerStyle(t, { focused, invalid, disabled, readOnly }) {
+	const accent = invalid ? t.color.feedback.danger.icon : t.color.border.focus;
+	const style = {
+		borderWidth: t.borderWidth.thin,
+		borderRadius: t.radius.md,
+		borderColor: disabled ? "transparent" : invalid || focused ? accent : t.color.border.strong,
+		backgroundColor: disabled ? t.color.action.disabled : readOnly ? t.color.bg.subtle : t.color.bg.surface
+	};
+	if (focused && !disabled) {
+		style.outlineStyle = "solid";
+		style.outlineColor = accent;
+		style.outlineWidth = t.borderWidth.thin;
+	}
+	return style;
+}
+/** Tipografía del texto que se escribe o se muestra dentro de la caja. */
+function fieldTextStyle(t, disabled) {
+	const style = {
+		fontSize: t.font.size.md,
+		fontWeight: t.font.weight.regular,
+		color: disabled ? t.color.text.disabled : t.color.text.primary
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) style.fontFamily = family;
+	return style;
+}
+//#endregion
+//#region src/input/Input.native.tsx
+const typeProps = {
+	text: {},
+	email: {
+		keyboardType: "email-address",
+		autoCapitalize: "none",
+		autoCorrect: false,
+		autoComplete: "email",
+		textContentType: "emailAddress"
+	},
+	password: {
+		secureTextEntry: true,
+		autoCapitalize: "none",
+		autoCorrect: false,
+		autoComplete: "current-password",
+		textContentType: "password"
+	},
+	search: {
+		returnKeyType: "search",
+		autoCapitalize: "none"
+	},
+	tel: {
+		keyboardType: "phone-pad",
+		autoComplete: "tel",
+		textContentType: "telephoneNumber"
+	},
+	url: {
+		keyboardType: "url",
+		autoCapitalize: "none",
+		autoCorrect: false,
+		autoComplete: "url",
+		textContentType: "URL"
+	},
+	number: { keyboardType: "decimal-pad" }
+};
+const paddingHorizontal$1 = {
+	sm: (t) => t.space[3],
+	md: (t) => t.space[3],
+	lg: (t) => t.space[4]
+};
+const styles$8 = StyleSheet.create({
+	base: {
+		flexDirection: "row",
+		alignItems: "center",
+		alignSelf: "stretch"
+	},
+	input: {
+		flex: 1,
+		minWidth: 0,
+		alignSelf: "stretch",
+		paddingVertical: 0,
+		paddingHorizontal: 0
+	}
+});
+function Input({ value, defaultValue, onChangeText, placeholder, type = "text", size = "md", disabled, readOnly = false, invalid, required, iconStart, iconEnd, maxLength, onFocus, onBlur, onSubmit, accessibilityLabel, style, testID, ref }) {
+	const t = useTheme$1();
+	const control = useFormFieldControl({
+		invalid,
+		disabled,
+		required,
+		accessibilityLabel
+	});
+	const [focused, setFocused] = useState(false);
+	const iconSize = inputIconSize[size];
+	const iconColor = control.disabled ? "disabled" : "muted";
+	const translated = typeProps[type];
+	return /* @__PURE__ */ jsxs(View, {
+		style: [
+			styles$8.base,
+			fieldContainerStyle(t, {
+				focused,
+				invalid: control.invalid,
+				disabled: control.disabled,
+				readOnly
+			}),
+			{
+				minHeight: t.size.control[size],
+				paddingHorizontal: paddingHorizontal$1[size](t),
+				gap: t.space[2]
+			},
+			style
+		],
+		children: [
+			iconStart === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				name: iconStart,
+				size: iconSize,
+				color: iconColor
+			}),
+			/* @__PURE__ */ jsx(TextInput, {
+				ref,
+				nativeID: control.id,
+				style: [styles$8.input, fieldTextStyle(t, control.disabled)],
+				...translated,
+				...value === void 0 ? defaultValue === void 0 ? {} : { defaultValue } : { value },
+				onChangeText,
+				placeholder,
+				placeholderTextColor: t.color.text.muted,
+				selectionColor: t.color.border.focus,
+				editable: !control.disabled && !readOnly,
+				maxLength,
+				accessibilityLabel: control.accessibilityLabel,
+				accessibilityHint: control.accessibilityHint,
+				accessibilityState: { disabled: control.disabled },
+				"aria-required": control.required ? true : void 0,
+				testID,
+				onFocus: () => {
+					setFocused(true);
+					onFocus?.();
+				},
+				onBlur: () => {
+					setFocused(false);
+					onBlur?.();
+				},
+				onSubmitEditing: onSubmit
+			}),
+			iconEnd === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				name: iconEnd,
+				size: iconSize,
+				color: iconColor
+			})
+		]
+	});
+}
+//#endregion
+//#region src/text/TextAncestor.native.ts
+/**
+* `true` dentro de un `Text` de la librería. React Native propaga la tipografía de un
+* `Text` a los `Text` que contiene; `Link` lo consulta para heredarla en vez de fijar
+* la suya. En web no hace falta: CSS ya hereda.
+*/
+const TextAncestorContext = createContext(false);
+//#endregion
+//#region src/link/Link.native.tsx
+const underlinedAtRest = {
+	always: true,
+	hover: false
+};
+function Link({ href, variant, color = "link", underline = "always", onPress, accessibilityLabel, style, testID, ref, children }) {
+	const t = useTheme$1();
+	const insideText = useContext(TextAncestorContext);
+	const { press } = useLink({ onPress });
+	const [pressed, setPressed] = useState(false);
+	const spec = variant === void 0 ? insideText ? void 0 : textVariantStyles.body : textVariantStyles[variant];
+	const computed = {
+		color: t.color.text[pressed ? "primary" : color],
+		textDecorationLine: underlinedAtRest[underline] || pressed ? "underline" : "none"
+	};
+	if (spec !== void 0) {
+		computed.fontSize = t.font.size[spec.size];
+		computed.lineHeight = t.font.lineHeight[spec.size];
+		computed.fontWeight = t.font.weight[spec.weight];
+		const family = t.font.family[spec.family];
+		if (family !== void 0) computed.fontFamily = family;
+		if (spec.uppercase) computed.textTransform = "uppercase";
+		if (spec.letterSpacing !== void 0) computed.letterSpacing = spec.letterSpacing;
+	}
+	function handlePress() {
+		if (!press()) return;
+		Linking.openURL(href).catch((error) => {
+			if (__DEV__) console.warn(`Link: no se pudo abrir "${href}".`, error);
+		});
+	}
+	return /* @__PURE__ */ jsx(Text$1, {
+		ref,
+		accessibilityRole: "link",
+		accessibilityLabel,
+		onPress: handlePress,
+		onPressIn: () => setPressed(true),
+		onPressOut: () => setPressed(false),
+		suppressHighlighting: true,
+		style: [computed, style],
+		testID,
+		children: /* @__PURE__ */ jsx(TextAncestorContext.Provider, {
+			value: true,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/modal/ModalDialog.native.tsx
+const presentationStyle = {
+	dialog: (t) => ({
+		animation: "fade",
+		overlay: {
+			justifyContent: "center",
+			padding: t.space[4]
+		},
+		surface: {
+			maxWidth: t.space[24] * 5,
+			maxHeight: "90%",
+			borderRadius: t.radius.xl,
+			borderWidth: t.borderWidth.thin
+		}
+	}),
+	sheet: (t) => ({
+		animation: "slide",
+		overlay: { justifyContent: "flex-end" },
+		surface: {
+			maxHeight: "90%",
+			borderTopLeftRadius: t.radius.xl,
+			borderTopRightRadius: t.radius.xl,
+			borderTopWidth: t.borderWidth.thin,
+			paddingBottom: t.space[8]
+		}
+	})
+};
+const styles$7 = StyleSheet.create({
+	overlay: { flex: 1 },
+	backdrop: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	},
+	surface: {
+		alignSelf: "center",
+		width: "100%",
+		overflow: "hidden"
+	},
+	header: {
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	titles: {
+		flex: 1,
+		minWidth: 0
+	},
+	close: { flexShrink: 0 },
+	body: {
+		flexGrow: 0,
+		flexShrink: 1
+	},
+	footer: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		justifyContent: "flex-end"
+	}
+});
+/**
+* La implementación que comparten `Modal` y `Sheet` (ADR-040): el `Modal` de React
+* Native, que pinta una ventana por encima de la app y avisa del botón atrás de Android.
+*/
+function ModalDialog({ presentation, open, onClose, title, description, closeLabel, dismissible = true, footer, style, testID, children }) {
+	const t = useTheme$1();
+	const shape = presentationStyle[presentation](t);
+	const padding = t.space[5];
+	const titleLine = t.font.lineHeight.lg;
+	const titleStyle = {
+		fontSize: t.font.size.lg,
+		lineHeight: titleLine,
+		fontWeight: t.font.weight.semibold,
+		color: t.color.text.primary
+	};
+	const descriptionStyle = {
+		marginTop: t.space[1],
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm,
+		color: t.color.text.secondary
+	};
+	const bodyText = {
+		fontSize: t.font.size.md,
+		lineHeight: t.font.lineHeight.md,
+		color: t.color.text.primary
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) {
+		titleStyle.fontFamily = family;
+		descriptionStyle.fontFamily = family;
+		bodyText.fontFamily = family;
+	}
+	const hasBody = children !== void 0 && children !== null;
+	const hasFooter = footer !== void 0 && footer !== null;
+	const closeOffset = (titleLine - t.size.control.sm) / 2;
+	return /* @__PURE__ */ jsx(Modal$1, {
+		visible: open,
+		transparent: true,
+		animationType: shape.animation,
+		statusBarTranslucent: true,
+		onRequestClose: () => {
+			if (dismissible) onClose();
+		},
+		testID: testID === void 0 ? void 0 : `${testID}-modal`,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [
+				styles$7.overlay,
+				shape.overlay,
+				{ backgroundColor: t.color.bg.overlay }
+			],
+			children: [/* @__PURE__ */ jsx(Pressable, {
+				style: styles$7.backdrop,
+				onPress: dismissible ? onClose : void 0,
+				accessible: false,
+				importantForAccessibility: "no",
+				testID: testID === void 0 ? void 0 : `${testID}-backdrop`
+			}), /* @__PURE__ */ jsxs(View, {
+				accessibilityViewIsModal: true,
+				style: [
+					styles$7.surface,
+					{
+						padding,
+						gap: t.space[4],
+						borderColor: t.color.border.default,
+						backgroundColor: t.color.bg.elevated,
+						boxShadow: t.shadow.lg
+					},
+					shape.surface,
+					style
+				],
+				testID,
+				children: [
+					/* @__PURE__ */ jsxs(View, {
+						style: [styles$7.header, { gap: t.space[3] }],
+						children: [/* @__PURE__ */ jsxs(View, {
+							style: styles$7.titles,
+							children: [/* @__PURE__ */ jsx(Text$1, {
+								accessibilityRole: "header",
+								style: titleStyle,
+								children: title
+							}), description === void 0 ? null : /* @__PURE__ */ jsx(Text$1, {
+								style: descriptionStyle,
+								children: description
+							})]
+						}), closeLabel === void 0 ? null : /* @__PURE__ */ jsx(IconButton, {
+							icon: "x",
+							label: closeLabel,
+							size: "sm",
+							variant: "ghost",
+							onPress: onClose,
+							style: [styles$7.close, {
+								marginVertical: closeOffset,
+								marginRight: -t.space[2]
+							}]
+						})]
+					}),
+					hasBody ? /* @__PURE__ */ jsx(ScrollView, {
+						style: styles$7.body,
+						children: renderLabel(children, bodyText)
+					}) : null,
+					hasFooter ? /* @__PURE__ */ jsx(View, {
+						style: [styles$7.footer, { gap: t.space[3] }],
+						children: footer
+					}) : null
+				]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/modal/Modal.native.tsx
+/** Un diálogo centrado (ADR-040). */
+function Modal(props) {
+	return /* @__PURE__ */ jsx(ModalDialog, {
+		...props,
+		presentation: "dialog"
+	});
+}
+//#endregion
+//#region src/select/Select.native.tsx
+const paddingHorizontal = {
+	sm: (t) => t.space[3],
+	md: (t) => t.space[3],
+	lg: (t) => t.space[4]
+};
+const styles$6 = StyleSheet.create({
+	trigger: {
+		flexDirection: "row",
+		alignItems: "center",
+		alignSelf: "stretch"
+	},
+	value: {
+		flex: 1,
+		minWidth: 0
+	},
+	overlay: {
+		flex: 1,
+		justifyContent: "center"
+	},
+	backdrop: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	},
+	list: {
+		alignSelf: "stretch",
+		maxHeight: "70%",
+		overflow: "hidden"
+	},
+	option: {
+		flexDirection: "row",
+		alignItems: "center"
+	},
+	optionLabel: {
+		flex: 1,
+		minWidth: 0
+	}
+});
+/**
+* Un disparador con aspecto de `Input` que abre una lista modal (ADR-038). React
+* Native no trae ningún selector, y así `Select` no añade dependencias.
+*/
+function Select({ options, value, defaultValue, onValueChange, placeholder, size = "md", disabled, invalid, required, accessibilityLabel, style, testID, ref }) {
+	const t = useTheme$1();
+	const control = useFormFieldControl({
+		invalid,
+		disabled,
+		required,
+		accessibilityLabel
+	});
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const [open, setOpen] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const selected = options.find((option) => option.value === current);
+	const iconSize = inputIconSize[size];
+	const text = fieldTextStyle(t, control.disabled);
+	const list = {
+		borderRadius: t.radius.lg,
+		borderWidth: t.borderWidth.thin,
+		borderColor: t.color.border.default,
+		backgroundColor: t.color.bg.elevated,
+		paddingVertical: t.space[2]
+	};
+	const title = {
+		paddingHorizontal: t.space[4],
+		paddingVertical: t.space[2],
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm,
+		fontWeight: t.font.weight.medium,
+		color: t.color.text.muted
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) title.fontFamily = family;
+	function choose(next) {
+		setCurrent(next);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Pressable, {
+		ref,
+		accessibilityRole: "combobox",
+		accessibilityLabel: control.accessibilityLabel,
+		accessibilityHint: control.accessibilityHint,
+		accessibilityValue: { text: selected?.label ?? placeholder ?? "" },
+		accessibilityState: {
+			disabled: control.disabled,
+			expanded: open
+		},
+		"aria-required": control.required ? true : void 0,
+		disabled: control.disabled,
+		onPress: () => setOpen(true),
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		testID,
+		style: [
+			styles$6.trigger,
+			fieldContainerStyle(t, {
+				focused: focused || open,
+				invalid: control.invalid,
+				disabled: control.disabled,
+				readOnly: false
+			}),
+			{
+				minHeight: t.size.control[size],
+				paddingHorizontal: paddingHorizontal[size](t),
+				gap: t.space[2]
+			},
+			style
+		],
+		children: [/* @__PURE__ */ jsx(Text$1, {
+			numberOfLines: 1,
+			style: [
+				styles$6.value,
+				text,
+				selected === void 0 && !control.disabled && { color: t.color.text.muted }
+			],
+			children: selected?.label ?? placeholder ?? ""
+		}), /* @__PURE__ */ jsx(Icon, {
+			name: "chevron-down",
+			size: iconSize,
+			color: control.disabled ? "disabled" : "muted"
+		})]
+	}), /* @__PURE__ */ jsx(Modal$1, {
+		visible: open,
+		transparent: true,
+		animationType: "fade",
+		statusBarTranslucent: true,
+		onRequestClose: () => setOpen(false),
+		testID: testID === void 0 ? void 0 : `${testID}-modal`,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [styles$6.overlay, {
+				padding: t.space[6],
+				backgroundColor: t.color.bg.overlay
+			}],
+			children: [/* @__PURE__ */ jsx(Pressable, {
+				style: styles$6.backdrop,
+				onPress: () => setOpen(false),
+				accessible: false,
+				importantForAccessibility: "no",
+				testID: testID === void 0 ? void 0 : `${testID}-backdrop`
+			}), /* @__PURE__ */ jsxs(View, {
+				style: [styles$6.list, list],
+				children: [control.accessibilityLabel === void 0 ? null : /* @__PURE__ */ jsx(Text$1, {
+					style: title,
+					accessibilityRole: "header",
+					children: control.accessibilityLabel
+				}), /* @__PURE__ */ jsx(ScrollView, {
+					accessibilityRole: "radiogroup",
+					children: options.map((option) => {
+						const isSelected = option.value === current;
+						const isDisabled = option.disabled === true;
+						return /* @__PURE__ */ jsxs(Pressable, {
+							accessibilityRole: "radio",
+							accessibilityState: {
+								checked: isSelected,
+								disabled: isDisabled
+							},
+							disabled: isDisabled,
+							onPress: () => choose(option.value),
+							style: ({ pressed }) => [styles$6.option, {
+								minHeight: t.size.control.md,
+								paddingHorizontal: t.space[4],
+								gap: t.space[3],
+								backgroundColor: pressed ? t.color.bg.muted : "transparent"
+							}],
+							children: [/* @__PURE__ */ jsx(Text$1, {
+								style: [styles$6.optionLabel, fieldTextStyle(t, isDisabled)],
+								children: option.label
+							}), isSelected ? /* @__PURE__ */ jsx(Icon, {
+								name: "check",
+								size: "md",
+								color: "link"
+							}) : null]
+						}, option.value);
+					})
+				})]
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region src/sheet/Sheet.native.tsx
+/** Un diálogo anclado al borde inferior (ADR-040). Comparte todo con `Modal` salvo dónde se coloca. */
+function Sheet(props) {
+	return /* @__PURE__ */ jsx(ModalDialog, {
+		...props,
+		presentation: "sheet"
+	});
+}
+//#endregion
+//#region src/skeleton/Skeleton.native.tsx
+const shapeRadius = {
+	text: (t) => t.radius.xs,
+	rectangle: (t) => t.radius.md,
+	circle: (t) => t.radius.full
+};
+const styles$5 = StyleSheet.create({
+	bar: { overflow: "hidden" },
+	fill: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	}
+});
+const hiddenFromScreenReaders = {
+	accessibilityElementsHidden: true,
+	importantForAccessibility: "no-hide-descendants"
+};
+/**
+* El hueco de un contenido que se está cargando. Late entre dos fondos del tema: una
+* capa con `bg.muted` aparece y desaparece sobre `bg.subtle`, con el driver nativo. Con
+* movimiento reducido se queda quieto.
+*/
+function Skeleton({ shape = "text", width, height, variant = "body", lines = 1, style, testID }) {
+	const t = useTheme$1();
+	const reducedMotion = useReducedMotion();
+	const [pulse] = useState(() => new Animated.Value(1));
+	const duration = t.duration.slow * 4;
+	useEffect(() => {
+		if (reducedMotion) {
+			pulse.setValue(1);
+			return;
+		}
+		const loop = Animated.loop(Animated.sequence([Animated.timing(pulse, {
+			toValue: 0,
+			duration,
+			easing: Easing.inOut(Easing.ease),
+			useNativeDriver: true
+		}), Animated.timing(pulse, {
+			toValue: 1,
+			duration,
+			easing: Easing.inOut(Easing.ease),
+			useNativeDriver: true
+		})]));
+		loop.start();
+		return () => loop.stop();
+	}, [
+		pulse,
+		duration,
+		reducedMotion
+	]);
+	const radius = shapeRadius[shape](t);
+	function bar(dimensions, key) {
+		return /* @__PURE__ */ jsx(View, {
+			style: [
+				styles$5.bar,
+				{
+					borderRadius: radius,
+					backgroundColor: t.color.bg.subtle
+				},
+				dimensions
+			],
+			children: /* @__PURE__ */ jsx(Animated.View, { style: [styles$5.fill, {
+				backgroundColor: t.color.bg.muted,
+				opacity: pulse
+			}] })
+		}, key);
+	}
+	if (shape === "text") {
+		const spec = textVariantStyles[variant];
+		const fontSize = t.font.size[spec.size];
+		const marginVertical = (t.font.lineHeight[spec.size] - fontSize) / 2;
+		const count = Math.max(1, lines);
+		return /* @__PURE__ */ jsx(View, {
+			style,
+			testID,
+			...hiddenFromScreenReaders,
+			children: Array.from({ length: count }, (_, index) => bar({
+				height: fontSize,
+				marginVertical,
+				width: count > 1 && index === count - 1 ? "60%" : width ?? "100%"
+			}, index))
+		});
+	}
+	const fallback = t.size.control.md;
+	const dimensions = shape === "circle" ? {
+		width: width ?? height ?? fallback,
+		height: height ?? fallback
+	} : {
+		width: width ?? "100%",
+		height: height ?? fallback
+	};
+	if (shape === "circle" && height === void 0 && typeof width === "number") dimensions.height = width;
+	return /* @__PURE__ */ jsx(View, {
+		style,
+		testID,
+		...hiddenFromScreenReaders,
+		children: bar(dimensions)
+	});
+}
+//#endregion
+//#region src/stack/Stack.native.tsx
+const alignItems = {
+	stretch: "stretch",
+	start: "flex-start",
+	center: "center",
+	end: "flex-end"
+};
+const justifyContent = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around"
+};
+function Stack({ direction = "column", gap, align = "stretch", justify = "start", wrap = false, style, ...boxProps }) {
+	const t = useTheme$1();
+	const layout = {
+		flexDirection: direction,
+		alignItems: alignItems[align],
+		justifyContent: justifyContent[justify],
+		flexWrap: wrap ? "wrap" : "nowrap"
+	};
+	if (gap !== void 0) layout.gap = t.space[gap];
+	return /* @__PURE__ */ jsx(Box, {
+		...boxProps,
+		style: [layout, style]
+	});
+}
+//#endregion
+//#region src/switch/Switch.native.tsx
+const styles$4 = StyleSheet.create({
+	root: {
+		flexDirection: "row",
+		alignItems: "flex-start",
+		alignSelf: "flex-start"
+	},
+	track: {
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	label: { flexShrink: 1 }
+});
+function Switch({ checked, defaultChecked = false, onCheckedChange, disabled = false, accessibilityLabel, style, testID, ref, children }) {
+	const t = useTheme$1();
+	const [isChecked, setChecked] = useControllableState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const [focused, setFocused] = useState(false);
+	const [progress] = useState(() => new Animated.Value(isChecked ? 1 : 0));
+	const width = t.space[10];
+	const height = t.space[6];
+	const gap = t.borderWidth.thick;
+	const thumb = height - gap * 2;
+	const duration = useReducedMotion() ? 0 : t.duration.fast;
+	useEffect(() => {
+		const animation = Animated.timing(progress, {
+			toValue: isChecked ? 1 : 0,
+			duration,
+			useNativeDriver: true
+		});
+		animation.start();
+		return () => animation.stop();
+	}, [
+		progress,
+		isChecked,
+		duration
+	]);
+	const translateX = progress.interpolate({
+		inputRange: [0, 1],
+		outputRange: [0, width - height]
+	});
+	const track = {
+		width,
+		height,
+		padding: gap,
+		borderRadius: t.radius.full,
+		backgroundColor: disabled ? t.color.action.disabled : isChecked ? t.color.action.primary : t.color.border.strong
+	};
+	const focusRing = {
+		outlineStyle: "solid",
+		outlineColor: t.color.border.focus,
+		outlineWidth: t.borderWidth.thick,
+		outlineOffset: t.borderWidth.thick
+	};
+	const label = {
+		flexShrink: 1,
+		fontSize: t.font.size.md,
+		lineHeight: t.font.lineHeight.md,
+		color: disabled ? t.color.text.disabled : t.color.text.primary
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) label.fontFamily = family;
+	const hitSlop = Math.max(0, (t.size.control.md - height) / 2);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		ref,
+		accessibilityRole: "switch",
+		accessibilityLabel,
+		accessibilityState: {
+			checked: isChecked,
+			disabled
+		},
+		disabled,
+		hitSlop,
+		onPress: () => setChecked(!isChecked),
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		testID,
+		style: [
+			styles$4.root,
+			{
+				gap: t.space[3],
+				minHeight: height
+			},
+			style
+		],
+		children: [/* @__PURE__ */ jsx(View, {
+			style: [
+				styles$4.track,
+				track,
+				focused && focusRing
+			],
+			children: /* @__PURE__ */ jsx(Animated.View, { style: {
+				width: thumb,
+				height: thumb,
+				borderRadius: t.radius.full,
+				backgroundColor: disabled ? t.color.text.disabled : t.color.text.onPrimary,
+				transform: [{ translateX }]
+			} })
+		}), children === void 0 || children === null ? null : renderLabel(children, label)]
+	});
+}
+//#endregion
+//#region src/tabs/Tabs.native.tsx
+const styles$3 = StyleSheet.create({
+	root: { alignSelf: "stretch" },
+	list: { flexGrow: 0 },
+	tab: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+});
+/**
+* Pestañas subrayadas. Si no caben, la lista se desplaza en horizontal. En nativo no hay
+* teclado de flechas: cada pestaña se pulsa.
+*/
+function Tabs({ items, value, defaultValue, onValueChange, accessibilityLabel, style, testID }) {
+	const t = useTheme$1();
+	const [selected, setSelected] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? firstEnabledTab(items) ?? "",
+		onChange: onValueChange
+	});
+	const active = items.find((item) => item.value === selected);
+	const label = {
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm,
+		fontWeight: t.font.weight.medium
+	};
+	const panelText = {
+		fontSize: t.font.size.md,
+		lineHeight: t.font.lineHeight.md,
+		color: t.color.text.primary
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) {
+		label.fontFamily = family;
+		panelText.fontFamily = family;
+	}
+	return /* @__PURE__ */ jsxs(View, {
+		style: [styles$3.root, style],
+		testID,
+		children: [/* @__PURE__ */ jsx(ScrollView, {
+			horizontal: true,
+			showsHorizontalScrollIndicator: false,
+			accessibilityRole: "tablist",
+			accessibilityLabel,
+			style: [styles$3.list, {
+				borderBottomWidth: t.borderWidth.thin,
+				borderBottomColor: t.color.border.default
+			}],
+			contentContainerStyle: { gap: t.space[1] },
+			children: items.map((item) => {
+				const isSelected = item.value === selected;
+				const isDisabled = item.disabled === true;
+				const color = isDisabled ? "disabled" : isSelected ? "primary" : "secondary";
+				return /* @__PURE__ */ jsxs(Pressable, {
+					accessibilityRole: "tab",
+					accessibilityState: {
+						selected: isSelected,
+						disabled: isDisabled
+					},
+					disabled: isDisabled,
+					onPress: () => setSelected(item.value),
+					style: ({ pressed }) => [styles$3.tab, {
+						minHeight: t.size.control.md,
+						paddingHorizontal: t.space[3],
+						gap: t.space[2],
+						borderBottomWidth: t.borderWidth.thick,
+						borderBottomColor: isSelected ? t.color.action.primary : "transparent",
+						borderTopLeftRadius: t.radius.sm,
+						borderTopRightRadius: t.radius.sm,
+						backgroundColor: pressed ? t.color.bg.muted : "transparent"
+					}],
+					children: [item.icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+						name: item.icon,
+						size: "sm",
+						color
+					}), /* @__PURE__ */ jsx(Text$1, {
+						style: [label, { color: t.color.text[color] }],
+						children: item.label
+					})]
+				}, item.value);
+			})
+		}), active?.content === void 0 || active.content === null ? null : /* @__PURE__ */ jsx(View, {
+			style: { paddingTop: t.space[4] },
+			children: renderLabel(active.content, panelText)
+		})]
+	});
+}
+//#endregion
+//#region src/text/Text.native.tsx
+const textAlign = {
+	left: "left",
+	center: "center",
+	right: "right"
+};
+function Text({ variant = "body", color = "primary", align, truncate = false, numberOfLines, style, testID, children }) {
+	const t = useTheme$1();
+	const spec = textVariantStyles[variant];
+	const computed = {
+		fontSize: t.font.size[spec.size],
+		lineHeight: t.font.lineHeight[spec.size],
+		fontWeight: t.font.weight[spec.weight],
+		color: t.color.text[color]
+	};
+	const family = t.font.family[spec.family];
+	if (family !== void 0) computed.fontFamily = family;
+	if (align !== void 0) computed.textAlign = textAlign[align];
+	if (spec.uppercase) computed.textTransform = "uppercase";
+	if (spec.letterSpacing !== void 0) computed.letterSpacing = spec.letterSpacing;
+	return /* @__PURE__ */ jsx(Text$1, {
+		style: [computed, style],
+		numberOfLines: truncate ? 1 : numberOfLines,
+		ellipsizeMode: "tail",
+		accessibilityRole: spec.headingLevel === void 0 ? void 0 : "header",
+		"aria-level": spec.headingLevel,
+		testID,
+		children: /* @__PURE__ */ jsx(TextAncestorContext.Provider, {
+			value: true,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/text-area/TextArea.native.tsx
+const styles$2 = StyleSheet.create({
+	base: { alignSelf: "stretch" },
+	input: {
+		paddingVertical: 0,
+		paddingHorizontal: 0,
+		textAlignVertical: "top"
+	}
+});
+function TextArea({ value, defaultValue, onChangeText, placeholder, rows = 3, disabled, readOnly = false, invalid, required, maxLength, onFocus, onBlur, accessibilityLabel, style, testID, ref }) {
+	const t = useTheme$1();
+	const control = useFormFieldControl({
+		invalid,
+		disabled,
+		required,
+		accessibilityLabel
+	});
+	const [focused, setFocused] = useState(false);
+	const lineHeight = t.font.lineHeight.md;
+	return /* @__PURE__ */ jsx(View, {
+		style: [
+			styles$2.base,
+			fieldContainerStyle(t, {
+				focused,
+				invalid: control.invalid,
+				disabled: control.disabled,
+				readOnly
+			}),
+			{
+				paddingVertical: t.space[2],
+				paddingHorizontal: t.space[3]
+			},
+			style
+		],
+		children: /* @__PURE__ */ jsx(TextInput, {
+			ref,
+			nativeID: control.id,
+			multiline: true,
+			style: [
+				styles$2.input,
+				fieldTextStyle(t, control.disabled),
+				{
+					lineHeight,
+					minHeight: lineHeight * rows
+				}
+			],
+			...value === void 0 ? defaultValue === void 0 ? {} : { defaultValue } : { value },
+			onChangeText,
+			placeholder,
+			placeholderTextColor: t.color.text.muted,
+			selectionColor: t.color.border.focus,
+			editable: !control.disabled && !readOnly,
+			maxLength,
+			accessibilityLabel: control.accessibilityLabel,
+			accessibilityHint: control.accessibilityHint,
+			accessibilityState: { disabled: control.disabled },
+			"aria-required": control.required ? true : void 0,
+			testID,
+			onFocus: () => {
+				setFocused(true);
+				onFocus?.();
+			},
+			onBlur: () => {
+				setFocused(false);
+				onBlur?.();
+			}
+		})
+	});
+}
+//#endregion
+//#region src/toast/Toast.native.tsx
+const styles$1 = StyleSheet.create({
+	root: {
+		flexDirection: "row",
+		alignItems: "flex-start",
+		width: "100%"
+	},
+	message: {
+		flex: 1,
+		minWidth: 0,
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	icon: {
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	content: {
+		flex: 1,
+		minWidth: 0
+	},
+	actions: {
+		flexDirection: "row",
+		alignItems: "center",
+		flexShrink: 0
+	}
+});
+/**
+* La tarjeta de un toast. Es interna: los toasts se muestran con `useToast` y los
+* pinta `UIProvider` (ADR-039).
+*/
+function Toast({ toast, onDismiss }) {
+	const { tone, title, description, action, closeLabel } = toast;
+	const t = useTheme$1();
+	const reducedMotion = useReducedMotion();
+	const [entered] = useState(() => new Animated.Value(0));
+	const duration = reducedMotion ? 0 : t.duration.normal;
+	useEffect(() => {
+		const animation = Animated.timing(entered, {
+			toValue: 1,
+			duration,
+			useNativeDriver: true
+		});
+		animation.start();
+		return () => animation.stop();
+	}, [entered, duration]);
+	const titleLine = t.font.lineHeight.md;
+	const container = {
+		gap: t.space[3],
+		maxWidth: t.space[24] * 4,
+		paddingVertical: t.space[3],
+		paddingHorizontal: t.space[4],
+		borderWidth: t.borderWidth.thin,
+		borderRadius: t.radius.lg,
+		borderColor: t.color.border.strong,
+		backgroundColor: t.color.bg.elevated,
+		boxShadow: t.shadow.lg
+	};
+	const titleStyle = {
+		fontSize: t.font.size.md,
+		lineHeight: titleLine,
+		fontWeight: t.font.weight.medium,
+		color: t.color.text.primary
+	};
+	const descriptionStyle = {
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm,
+		color: t.color.text.secondary
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) {
+		titleStyle.fontFamily = family;
+		descriptionStyle.fontFamily = family;
+	}
+	const actionsOffset = (titleLine - t.size.control.sm) / 2;
+	return /* @__PURE__ */ jsxs(Animated.View, {
+		style: [
+			styles$1.root,
+			container,
+			{
+				opacity: entered,
+				transform: [{ translateY: entered.interpolate({
+					inputRange: [0, 1],
+					outputRange: [t.space[2], 0]
+				}) }]
+			}
+		],
+		children: [/* @__PURE__ */ jsxs(View, {
+			accessible: true,
+			accessibilityRole: "alert",
+			accessibilityLiveRegion: feedbackUrgent[tone] ? "assertive" : "polite",
+			style: [styles$1.message, { gap: t.space[3] }],
+			children: [/* @__PURE__ */ jsx(View, {
+				style: [styles$1.icon, { height: titleLine }],
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: feedbackIcon[tone],
+					size: "md",
+					color: tone
+				})
+			}), /* @__PURE__ */ jsxs(View, {
+				style: styles$1.content,
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					style: titleStyle,
+					children: title
+				}), description === void 0 ? null : /* @__PURE__ */ jsx(Text$1, {
+					style: descriptionStyle,
+					children: description
+				})]
+			})]
+		}), action === void 0 && closeLabel === void 0 ? null : /* @__PURE__ */ jsxs(View, {
+			style: [styles$1.actions, {
+				gap: t.space[1],
+				marginVertical: actionsOffset,
+				marginRight: -t.space[2]
+			}],
+			children: [action === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onPress: () => {
+					action.onPress();
+					onDismiss();
+				},
+				children: action.label
+			}), closeLabel === void 0 ? null : /* @__PURE__ */ jsx(IconButton, {
+				icon: "x",
+				label: closeLabel,
+				size: "sm",
+				variant: "ghost",
+				onPress: onDismiss
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/toast/ToastViewport.native.tsx
+const styles = StyleSheet.create({ viewport: {
+	position: "absolute",
+	right: 0,
+	bottom: 0,
+	left: 0,
+	alignItems: "center"
+} });
+/**
+* La zona donde aparecen los toasts de un `UIProvider` (ADR-039). No recibe toques:
+* solo las tarjetas.
+*/
+function ToastViewport({ store }) {
+	const t = useTheme$1();
+	const toasts = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const announced = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const visible = new Set(toasts.map((toast) => toast.id));
+		for (const toast of toasts) {
+			if (announced.current.has(toast.id)) continue;
+			announced.current.add(toast.id);
+			AccessibilityInfo.announceForAccessibility(toast.description === void 0 ? toast.title : `${toast.title}. ${toast.description}`);
+		}
+		for (const id of announced.current) if (!visible.has(id)) announced.current.delete(id);
+	}, [toasts]);
+	if (toasts.length === 0) return null;
+	return /* @__PURE__ */ jsx(View, {
+		pointerEvents: "box-none",
+		style: [styles.viewport, {
+			zIndex: t.zIndex.toast,
+			gap: t.space[2],
+			padding: t.space[4],
+			paddingBottom: t.space[10]
+		}],
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(Toast, {
+			toast,
+			onDismiss: () => store.dismiss(toast.id)
+		}, toast.id))
+	});
+}
+//#endregion
+//#region src/toast/useToastHost.ts
+/**
+* La cola de toasts de un `UIProvider` (ADR-039). Uno anidado, por ejemplo para cambiar
+* de marca en una sección, reutiliza la del de fuera: solo hay una zona de avisos por app.
+*/
+function useToastHost() {
+	const outer = useContext(ToastContext);
+	const [own] = useState(() => outer === null ? createToastStore() : null);
+	useEffect(() => () => own?.dismiss(), [own]);
+	return {
+		store: outer ?? own ?? createToastStore(),
+		own: outer === null ? own : null
+	};
+}
+//#endregion
+//#region src/ui-provider/UIProvider.native.tsx
+/**
+* Activa tema y marca para todo lo que envuelve (ADR-010). Entrega el tema
+* resuelto por contexto; `system` sigue a `Appearance`. También guarda la cola de
+* toasts y los pinta sobre la vista que lo contiene (ADR-039).
+*/
+function UIProvider({ theme = "system", brand, children }) {
+	const system = useColorScheme$1() === "dark" ? "dark" : "light";
+	const value = useMemo(() => createUIContextValue(theme, system, brand), [
+		theme,
+		system,
+		brand
+	]);
+	const toasts = useToastHost();
+	return /* @__PURE__ */ jsx(UIContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsxs(ToastContext.Provider, {
+			value: toasts.store,
+			children: [children, toasts.own === null ? null : /* @__PURE__ */ jsx(ToastViewport, { store: toasts.own })]
+		})
 	});
 }
 //#endregion
-export { Badge, Box, Button, Icon, Spinner, Stack, Text, UIProvider, useBrand, useColorScheme, useTheme };
+export { Alert, Badge, Box, Button, Card, Checkbox, Divider, FormField, Icon, IconButton, Input, Link, Modal, Select, Sheet, Skeleton, Spinner, Stack, Switch, Tabs, Text, TextArea, UIProvider, useBrand, useColorScheme, useTheme, useToast };