@satellatickets/ui 0.0.0-stage → 0.1.0

package/dist/native/index.js

@@ -0,0 +1,699 @@
+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 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
+};
+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,
+		children
+	});
+}
+//#endregion
+//#region ../icons/src/icons.ts
+const icons = {
+	"arrow-left": [{
+		"type": "path",
+		"d": "m12 19-7-7 7-7"
+	}, {
+		"type": "path",
+		"d": "M19 12H5"
+	}],
+	"arrow-right": [{
+		"type": "path",
+		"d": "M5 12h14"
+	}, {
+		"type": "path",
+		"d": "m12 5 7 7-7 7"
+	}],
+	"calendar": [
+		{
+			"type": "path",
+			"d": "M8 2v3"
+		},
+		{
+			"type": "path",
+			"d": "M16 2v3"
+		},
+		{
+			"type": "rect",
+			"x": 3,
+			"y": 3,
+			"width": 18,
+			"height": 18,
+			"rx": 2
+		},
+		{
+			"type": "path",
+			"d": "M3 9h18"
+		}
+	],
+	"check": [{
+		"type": "path",
+		"d": "M20 6 9 17l-5-5"
+	}],
+	"chevron-down": [{
+		"type": "path",
+		"d": "m6 9 6 6 6-6"
+	}],
+	"chevron-left": [{
+		"type": "path",
+		"d": "m15 18-6-6 6-6"
+	}],
+	"chevron-right": [{
+		"type": "path",
+		"d": "m9 18 6-6-6-6"
+	}],
+	"chevron-up": [{
+		"type": "path",
+		"d": "m18 15-6-6-6 6"
+	}],
+	"circle-alert": [
+		{
+			"type": "circle",
+			"cx": 12,
+			"cy": 12,
+			"r": 10
+		},
+		{
+			"type": "line",
+			"x1": 12,
+			"y1": 8,
+			"x2": 12,
+			"y2": 12
+		},
+		{
+			"type": "line",
+			"x1": 12,
+			"y1": 16,
+			"x2": 12.01,
+			"y2": 16
+		}
+	],
+	"circle-check": [{
+		"type": "circle",
+		"cx": 12,
+		"cy": 12,
+		"r": 10
+	}, {
+		"type": "path",
+		"d": "m16 9-5.5 5.5L8 12"
+	}],
+	"circle-x": [
+		{
+			"type": "circle",
+			"cx": 12,
+			"cy": 12,
+			"r": 10
+		},
+		{
+			"type": "path",
+			"d": "m15 9-6 6"
+		},
+		{
+			"type": "path",
+			"d": "m9 9 6 6"
+		}
+	],
+	"eye-off": [
+		{
+			"type": "path",
+			"d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+		},
+		{
+			"type": "path",
+			"d": "M14.084 14.158a3 3 0 0 1-4.242-4.242"
+		},
+		{
+			"type": "path",
+			"d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+		},
+		{
+			"type": "path",
+			"d": "m2 2 20 20"
+		}
+	],
+	"eye": [{
+		"type": "path",
+		"d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+	}, {
+		"type": "circle",
+		"cx": 12,
+		"cy": 12,
+		"r": 3
+	}],
+	"globe": [
+		{
+			"type": "circle",
+			"cx": 12,
+			"cy": 12,
+			"r": 10
+		},
+		{
+			"type": "path",
+			"d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+		},
+		{
+			"type": "path",
+			"d": "M2 12h20"
+		}
+	],
+	"info": [
+		{
+			"type": "circle",
+			"cx": 12,
+			"cy": 12,
+			"r": 10
+		},
+		{
+			"type": "path",
+			"d": "M12 16v-4"
+		},
+		{
+			"type": "path",
+			"d": "M12 8h.01"
+		}
+	],
+	"loader-circle": [{
+		"type": "path",
+		"d": "M21 12a9 9 0 1 1-6.219-8.56"
+	}],
+	"map-pin": [{
+		"type": "path",
+		"d": "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+	}, {
+		"type": "circle",
+		"cx": 12,
+		"cy": 10,
+		"r": 3
+	}],
+	"menu": [
+		{
+			"type": "path",
+			"d": "M4 5h16"
+		},
+		{
+			"type": "path",
+			"d": "M4 12h16"
+		},
+		{
+			"type": "path",
+			"d": "M4 19h16"
+		}
+	],
+	"minus": [{
+		"type": "path",
+		"d": "M5 12h14"
+	}],
+	"plus": [{
+		"type": "path",
+		"d": "M5 12h14"
+	}, {
+		"type": "path",
+		"d": "M12 5v14"
+	}],
+	"search": [{
+		"type": "path",
+		"d": "m21 21-4.34-4.34"
+	}, {
+		"type": "circle",
+		"cx": 11,
+		"cy": 11,
+		"r": 8
+	}],
+	"settings": [{
+		"type": "path",
+		"d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+	}, {
+		"type": "circle",
+		"cx": 12,
+		"cy": 12,
+		"r": 3
+	}],
+	"ticket": [
+		{
+			"type": "path",
+			"d": "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"
+		},
+		{
+			"type": "path",
+			"d": "M13 5v2"
+		},
+		{
+			"type": "path",
+			"d": "M13 17v2"
+		},
+		{
+			"type": "path",
+			"d": "M13 11v2"
+		}
+	],
+	"triangle-alert": [
+		{
+			"type": "path",
+			"d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+		},
+		{
+			"type": "path",
+			"d": "M12 9v4"
+		},
+		{
+			"type": "path",
+			"d": "M12 17h.01"
+		}
+	],
+	"user": [{
+		"type": "path",
+		"d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+	}, {
+		"type": "circle",
+		"cx": 12,
+		"cy": 7,
+		"r": 4
+	}],
+	"x": [{
+		"type": "path",
+		"d": "M18 6 6 18"
+	}, {
+		"type": "path",
+		"d": "m6 6 12 12"
+	}]
+};
+//#endregion
+//#region src/icon/Icon.native.tsx
+function renderElement(element, index) {
+	switch (element.type) {
+		case "path": return /* @__PURE__ */ jsx(Path, { d: element.d }, index);
+		case "circle": return /* @__PURE__ */ jsx(Circle, {
+			cx: element.cx,
+			cy: element.cy,
+			r: element.r
+		}, index);
+		case "line": return /* @__PURE__ */ jsx(Line, {
+			x1: element.x1,
+			y1: element.y1,
+			x2: element.x2,
+			y2: element.y2
+		}, index);
+		case "rect": return /* @__PURE__ */ jsx(Rect, {
+			x: element.x,
+			y: element.y,
+			width: element.width,
+			height: element.height,
+			...element.rx === void 0 ? {} : { rx: element.rx }
+		}, index);
+	}
+}
+function Icon({ name, size = "md", color = "primary", label, style, testID }) {
+	const t = useTheme$1();
+	const px = iconSizePx[size];
+	const decorative = label === void 0;
+	const optional = {
+		...style === void 0 ? {} : { style },
+		...testID === void 0 ? {} : { testID },
+		...decorative ? {
+			accessibilityElementsHidden: true,
+			importantForAccessibility: "no-hide-descendants"
+		} : {
+			accessible: true,
+			accessibilityRole: "image",
+			accessibilityLabel: label
+		}
+	};
+	return /* @__PURE__ */ jsx(Svg, {
+		width: px,
+		height: px,
+		viewBox: `0 0 24 24`,
+		fill: "none",
+		stroke: t.color.text[color],
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...optional,
+		children: icons[name].map(renderElement)
+	});
+}
+//#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.
+*/
+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;
+	useEffect(() => {
+		const loop = Animated.loop(Animated.timing(rotation, {
+			toValue: 1,
+			duration,
+			easing: Easing.linear,
+			useNativeDriver: true
+		}));
+		loop.start();
+		return () => loop.stop();
+	}, [rotation, duration]);
+	const px = spinnerSizePx[size];
+	const rotate = rotation.interpolate({
+		inputRange: [0, 1],
+		outputRange: ["0deg", "360deg"]
+	});
+	const accessibility = label === void 0 ? {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants"
+	} : {
+		accessible: true,
+		accessibilityRole: "progressbar",
+		accessibilityLabel: label,
+		accessibilityState: { busy: true }
+	};
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [{
+			width: px,
+			height: px,
+			transform: [{ rotate }]
+		}, style],
+		testID,
+		...accessibility,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "loader-circle",
+			size,
+			color
+		})
+	});
+}
+//#endregion
+//#region src/button/Button.native.tsx
+const variantStyles = {
+	primary: (t) => ({
+		background: t.color.action.primary,
+		pressed: t.color.action.primaryActive,
+		disabled: t.color.action.disabled,
+		border: "transparent",
+		content: "onPrimary"
+	}),
+	secondary: (t) => ({
+		background: t.color.action.secondary,
+		pressed: t.color.action.secondaryActive,
+		disabled: t.color.action.disabled,
+		border: t.color.border.default,
+		content: "primary"
+	}),
+	ghost: (t) => ({
+		background: "transparent",
+		pressed: t.color.bg.muted,
+		disabled: "transparent",
+		border: "transparent",
+		content: "primary"
+	}),
+	danger: (t) => ({
+		background: t.color.action.danger,
+		pressed: t.color.action.dangerActive,
+		disabled: t.color.action.disabled,
+		border: "transparent",
+		content: "onDanger"
+	})
+};
+const sizeStyles = {
+	sm: (t) => ({
+		minHeight: t.size.control.sm,
+		paddingHorizontal: t.space[3],
+		paddingVertical: t.space[1],
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm
+	}),
+	md: (t) => ({
+		minHeight: t.size.control.md,
+		paddingHorizontal: t.space[4],
+		paddingVertical: t.space[2],
+		fontSize: t.font.size.sm,
+		lineHeight: t.font.lineHeight.sm
+	}),
+	lg: (t) => ({
+		minHeight: t.size.control.lg,
+		paddingHorizontal: t.space[5],
+		paddingVertical: t.space[3],
+		fontSize: t.font.size.md,
+		lineHeight: t.font.lineHeight.md
+	})
+};
+const styles = StyleSheet.create({
+	base: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	fullWidth: { width: "100%" },
+	content: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 1
+	},
+	hidden: { opacity: 0 },
+	spinner: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		alignItems: "center",
+		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({
+		disabled,
+		loading,
+		onPress
+	});
+	const [focused, setFocused] = useState(false);
+	const colors = variantStyles[variant](t);
+	const dimensions = sizeStyles[size](t);
+	const content = disabled ? "disabled" : colors.content;
+	const iconSize = buttonIconSize[size];
+	const container = {
+		minHeight: dimensions.minHeight,
+		paddingHorizontal: dimensions.paddingHorizontal,
+		paddingVertical: dimensions.paddingVertical,
+		borderRadius: t.radius.md,
+		borderWidth: t.borderWidth.thin,
+		borderColor: disabled ? "transparent" : colors.border
+	};
+	const focusRing = {
+		outlineStyle: "solid",
+		outlineColor: t.color.border.focus,
+		outlineWidth: t.borderWidth.thick,
+		outlineOffset: t.borderWidth.thick
+	};
+	const label = {
+		flexShrink: 1,
+		fontSize: dimensions.fontSize,
+		lineHeight: dimensions.lineHeight,
+		fontWeight: t.font.weight.medium,
+		color: t.color.text[content],
+		textAlign: "center"
+	};
+	const family = t.font.family.sans;
+	if (family !== void 0) label.fontFamily = family;
+	const hitSlop = Math.max(0, (t.size.control.md - dimensions.minHeight) / 2);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		ref,
+		accessibilityRole: "button",
+		accessibilityLabel,
+		accessibilityState: {
+			disabled: !interactive,
+			busy: loading
+		},
+		disabled: !interactive,
+		hitSlop,
+		onPress: press,
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		testID,
+		style: ({ pressed }) => [
+			styles.base,
+			container,
+			{ backgroundColor: disabled ? colors.disabled : pressed ? colors.pressed : colors.background },
+			fullWidth && styles.fullWidth,
+			focused && focusRing,
+			style
+		],
+		children: [/* @__PURE__ */ jsxs(View, {
+			style: [
+				styles.content,
+				{ gap: t.space[2] },
+				loading && styles.hidden
+			],
+			children: [
+				iconStart === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+					name: iconStart,
+					size: iconSize,
+					color: content
+				}),
+				renderLabel(children, label),
+				iconEnd === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+					name: iconEnd,
+					size: iconSize,
+					color: content
+				})
+			]
+		}), loading ? /* @__PURE__ */ jsx(View, {
+			style: styles.spinner,
+			children: /* @__PURE__ */ jsx(Spinner, {
+				size: iconSize,
+				color: content
+			})
+		}) : null]
+	});
+}
+//#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/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
+	});
+}
+//#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
+	});
+}
+//#endregion
+export { Badge, Box, Button, Icon, Spinner, Stack, Text, UIProvider, useBrand, useColorScheme, useTheme };