@satellatickets/ui 0.0.0-stage → 0.1.0

package/dist/web/index.js

@@ -0,0 +1,626 @@
+import { UIContext, buttonIconSize, createUIContextValue, iconSizePx, textVariantStyles, useBrand, useButton, useColorScheme, useTheme } from "@satellatickets/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVariables } from "@satellatickets/tokens";
+import { useMemo, useSyncExternalStore } from "react";
+//#region src/_internal/cx.ts
+/** Une clases CSS ignorando valores falsos. */
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/badge/Badge.module.css
+var Badge_module_default = {
+	"danger": "sui-danger-iCOp0a",
+	"info": "sui-info-iCOp0a",
+	"root": "sui-root-iCOp0a",
+	"success": "sui-success-iCOp0a",
+	"warning": "sui-warning-iCOp0a"
+};
+//#endregion
+//#region src/badge/Badge.web.tsx
+const variantClass$1 = {
+	success: Badge_module_default.success,
+	warning: Badge_module_default.warning,
+	danger: Badge_module_default.danger,
+	info: Badge_module_default.info
+};
+function Badge({ variant = "info", className, testID, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx(Badge_module_default.root, variantClass$1[variant], className),
+		"data-testid": testID,
+		children
+	});
+}
+//#endregion
+//#region src/box/Box.module.css
+var Box_module_default = { "root": "sui-root-fYQz2a" };
+//#endregion
+//#region src/box/Box.web.tsx
+function Box({ as: Tag = "div", padding, paddingX, paddingY, background, radius, borderColor, shadow, flex, className, style, testID, children }) {
+	const vars = {};
+	if (padding !== void 0) vars["--box-padding"] = `var(${cssVariables[`space.${padding}`]})`;
+	if (paddingX !== void 0) vars["--box-padding-x"] = `var(${cssVariables[`space.${paddingX}`]})`;
+	if (paddingY !== void 0) vars["--box-padding-y"] = `var(${cssVariables[`space.${paddingY}`]})`;
+	if (background !== void 0) vars["--box-background"] = `var(${cssVariables[`color.bg.${background}`]})`;
+	if (radius !== void 0) vars["--box-radius"] = `var(${cssVariables[`radius.${radius}`]})`;
+	if (borderColor !== void 0) {
+		vars["--box-border-color"] = `var(${cssVariables[`color.border.${borderColor}`]})`;
+		vars["--box-border-width"] = `var(${cssVariables["borderWidth.thin"]})`;
+	}
+	if (shadow !== void 0) vars["--box-shadow"] = `var(${cssVariables[`shadow.${shadow}`]})`;
+	if (flex !== void 0) vars["--box-flex"] = String(flex);
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx(Box_module_default.root, className),
+		style: {
+			...vars,
+			...style
+		},
+		"data-testid": 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.module.css
+var Icon_module_default = { "root": "sui-root-JxbEOq" };
+//#endregion
+//#region src/icon/Icon.web.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, className, testID }) {
+	const px = iconSizePx[size];
+	const decorative = label === void 0;
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cx(Icon_module_default.root, className),
+		width: px,
+		height: px,
+		viewBox: `0 0 24 24`,
+		fill: "none",
+		stroke: `var(${cssVariables[`color.text.${color}`]})`,
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		role: decorative ? void 0 : "img",
+		"aria-label": label,
+		"aria-hidden": decorative ? true : void 0,
+		focusable: "false",
+		"data-testid": testID,
+		children: [decorative ? null : /* @__PURE__ */ jsx("title", { children: label }), icons[name].map(renderElement)]
+	});
+}
+//#endregion
+//#region src/spinner/Spinner.module.css
+var Spinner_module_default = {
+	"icon": "sui-icon-iFfE_q",
+	"root": "sui-root-iFfE_q",
+	"spin": "sui-spin-iFfE_q"
+};
+//#endregion
+//#region src/spinner/Spinner.web.tsx
+/**
+* Indicador de carga indeterminada. Versión mínima (ROADMAP Fase 3): el icono
+* `loader-circle` girando. Con `label` es una barra de progreso indeterminada
+* para los lectores de pantalla; sin él, es decorativo.
+*/
+function Spinner({ size = "md", color = "primary", label, className, testID }) {
+	const decorative = label === void 0;
+	return /* @__PURE__ */ jsx("span", {
+		className: cx(Spinner_module_default.root, className),
+		role: decorative ? void 0 : "progressbar",
+		"aria-label": label,
+		"aria-hidden": decorative ? true : void 0,
+		"data-testid": testID,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "loader-circle",
+			size,
+			color,
+			className: Spinner_module_default.icon
+		})
+	});
+}
+//#endregion
+//#region src/button/Button.module.css
+var Button_module_default = {
+	"content": "sui-content-FZ-IiW",
+	"danger": "sui-danger-FZ-IiW",
+	"fullWidth": "sui-fullWidth-FZ-IiW",
+	"ghost": "sui-ghost-FZ-IiW",
+	"label": "sui-label-FZ-IiW",
+	"lg": "sui-lg-FZ-IiW",
+	"loading": "sui-loading-FZ-IiW",
+	"md": "sui-md-FZ-IiW",
+	"primary": "sui-primary-FZ-IiW",
+	"root": "sui-root-FZ-IiW",
+	"secondary": "sui-secondary-FZ-IiW",
+	"sm": "sui-sm-FZ-IiW",
+	"spinner": "sui-spinner-FZ-IiW"
+};
+//#endregion
+//#region src/button/Button.web.tsx
+const variantClass = {
+	primary: Button_module_default.primary,
+	secondary: Button_module_default.secondary,
+	ghost: Button_module_default.ghost,
+	danger: Button_module_default.danger
+};
+const sizeClass = {
+	sm: Button_module_default.sm,
+	md: Button_module_default.md,
+	lg: Button_module_default.lg
+};
+function Button({ variant = "primary", size = "md", disabled = false, loading = false, iconStart, iconEnd, fullWidth = false, onPress, accessibilityLabel, type = "button", className, style, testID, ref, children }) {
+	const { interactive, press } = useButton({
+		disabled,
+		loading,
+		onPress
+	});
+	const iconSize = buttonIconSize[size];
+	function handleClick(event) {
+		if (!interactive) event.preventDefault();
+		press();
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		className: cx(Button_module_default.root, variantClass[variant], sizeClass[size], fullWidth && Button_module_default.fullWidth, loading && Button_module_default.loading, className),
+		style,
+		disabled,
+		"aria-disabled": loading ? true : void 0,
+		"aria-busy": loading ? true : void 0,
+		"aria-label": accessibilityLabel,
+		"data-testid": testID,
+		onClick: handleClick,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: Button_module_default.content,
+			children: [
+				iconStart === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+					name: iconStart,
+					size: iconSize
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: Button_module_default.label,
+					children
+				}),
+				iconEnd === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+					name: iconEnd,
+					size: iconSize
+				})
+			]
+		}), loading ? /* @__PURE__ */ jsx("span", {
+			className: Button_module_default.spinner,
+			children: /* @__PURE__ */ jsx(Spinner, { size: iconSize })
+		}) : null]
+	});
+}
+//#endregion
+//#region src/stack/Stack.module.css
+var Stack_module_default = {
+	"alignCenter": "sui-alignCenter-oAyu1G",
+	"alignEnd": "sui-alignEnd-oAyu1G",
+	"alignStart": "sui-alignStart-oAyu1G",
+	"alignStretch": "sui-alignStretch-oAyu1G",
+	"column": "sui-column-oAyu1G",
+	"justifyAround": "sui-justifyAround-oAyu1G",
+	"justifyBetween": "sui-justifyBetween-oAyu1G",
+	"justifyCenter": "sui-justifyCenter-oAyu1G",
+	"justifyEnd": "sui-justifyEnd-oAyu1G",
+	"justifyStart": "sui-justifyStart-oAyu1G",
+	"row": "sui-row-oAyu1G",
+	"stack": "sui-stack-oAyu1G",
+	"wrap": "sui-wrap-oAyu1G"
+};
+//#endregion
+//#region src/stack/Stack.web.tsx
+const directionClass = {
+	column: Stack_module_default.column,
+	row: Stack_module_default.row
+};
+const alignClass$1 = {
+	stretch: Stack_module_default.alignStretch,
+	start: Stack_module_default.alignStart,
+	center: Stack_module_default.alignCenter,
+	end: Stack_module_default.alignEnd
+};
+const justifyClass = {
+	start: Stack_module_default.justifyStart,
+	center: Stack_module_default.justifyCenter,
+	end: Stack_module_default.justifyEnd,
+	between: Stack_module_default.justifyBetween,
+	around: Stack_module_default.justifyAround
+};
+function Stack({ direction = "column", gap, align = "stretch", justify = "start", wrap = false, className, style, ...boxProps }) {
+	const gapStyle = gap === void 0 ? void 0 : { "--stack-gap": `var(${cssVariables[`space.${gap}`]})` };
+	return /* @__PURE__ */ jsx(Box, {
+		...boxProps,
+		className: cx(Stack_module_default.stack, directionClass[direction], alignClass$1[align], justifyClass[justify], wrap && Stack_module_default.wrap, className),
+		style: {
+			...gapStyle,
+			...style
+		}
+	});
+}
+//#endregion
+//#region src/text/Text.module.css
+var Text_module_default = {
+	"center": "sui-center-ca3VdW",
+	"left": "sui-left-ca3VdW",
+	"right": "sui-right-ca3VdW",
+	"root": "sui-root-ca3VdW",
+	"truncate": "sui-truncate-ca3VdW",
+	"uppercase": "sui-uppercase-ca3VdW"
+};
+//#endregion
+//#region src/text/Text.web.tsx
+const defaultElement = {
+	hero: "h1",
+	display: "h1",
+	title: "h2",
+	heading: "h3",
+	subheading: "h4",
+	body: "p",
+	bodySmall: "p",
+	label: "span",
+	caption: "span",
+	code: "code"
+};
+const alignClass = {
+	left: Text_module_default.left,
+	center: Text_module_default.center,
+	right: Text_module_default.right
+};
+function Text({ variant = "body", color = "primary", align, truncate = false, as, className, style, testID, children }) {
+	const spec = textVariantStyles[variant];
+	const Tag = as ?? defaultElement[variant];
+	const vars = {
+		"--text-family": `var(${cssVariables[`font.family.${spec.family}`]})`,
+		"--text-size": `var(${cssVariables[`font.size.${spec.size}`]})`,
+		"--text-line-height": `var(${cssVariables[`font.lineHeight.${spec.size}`]})`,
+		"--text-weight": `var(${cssVariables[`font.weight.${spec.weight}`]})`,
+		"--text-color": `var(${cssVariables[`color.text.${color}`]})`
+	};
+	if (spec.letterSpacing !== void 0) vars["--text-letter-spacing"] = `${spec.letterSpacing}px`;
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx(Text_module_default.root, spec.uppercase && Text_module_default.uppercase, align && alignClass[align], truncate && Text_module_default.truncate, className),
+		style: {
+			...vars,
+			...style
+		},
+		"data-testid": testID,
+		children
+	});
+}
+//#endregion
+//#region src/ui-provider/UIProvider.module.css
+var UIProvider_module_default = { "root": "sui-root-QoB9YG" };
+//#endregion
+//#region src/ui-provider/UIProvider.web.tsx
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribe(onChange) {
+	if (typeof window === "undefined") return () => {};
+	const media = window.matchMedia(DARK_QUERY);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+function getSnapshot() {
+	return typeof window !== "undefined" && window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+function getServerSnapshot() {
+	return "light";
+}
+/** Esquema preferido por el sistema (`prefers-color-scheme`), estable en SSR. */
+function useSystemColorScheme() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+/**
+* Activa tema y marca para todo lo que envuelve (ADR-010). Pone `data-theme` y
+* `data-brand` en un contenedor sin caja propia; `tokens.css` hace el resto.
+*/
+function UIProvider({ theme = "system", brand, children }) {
+	const system = useSystemColorScheme();
+	const value = useMemo(() => createUIContextValue(theme, system, brand), [
+		theme,
+		system,
+		brand
+	]);
+	return /* @__PURE__ */ jsx(UIContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: UIProvider_module_default.root,
+			"data-theme": value.colorScheme,
+			"data-brand": brand,
+			children
+		})
+	});
+}
+//#endregion
+export { Badge, Box, Button, Icon, Spinner, Stack, Text, UIProvider, useBrand, useColorScheme, useTheme };