@satellatickets/ui 0.1.0 → 0.2.1

package/dist/web/index.js

@@ -1,64 +1,32 @@
-import { UIContext, buttonIconSize, createUIContextValue, iconSizePx, textVariantStyles, useBrand, useButton, useColorScheme, useTheme } from "@satellatickets/core";
-import { jsx, jsxs } from "react/jsx-runtime";
+'use client';
+import { FormFieldContext, ToastContext, UIContext, buttonIconSize, createFormFieldValue, createToastStore, createUIContextValue, firstEnabledTab, getTabInDirection, iconButtonIconSize, iconSizePx, inputIconSize, isFeedbackTone, textVariantStyles, useBrand, useButton, useColorScheme, useControllableState, useFormFieldControl, useLink, useTheme, useToast } from "@satellatickets/core";
 import { cssVariables } from "@satellatickets/tokens";
-import { useMemo, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useMemo, useRef, useState, 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"
+//#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"
 };
-//#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
+/**
+* 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
 };
-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 = {
@@ -357,6 +325,10 @@ function renderElement(element, index) {
 		}, index);
 	}
 }
+/** Variable CSS del color: un color de texto o el icono de un estado de feedback. */
+function colorVariable(color) {
+	return isFeedbackTone(color) ? cssVariables[`color.feedback.${color}.icon`] : cssVariables[`color.text.${color}`];
+}
 function Icon({ name, size = "md", color = "primary", label, className, testID }) {
 	const px = iconSizePx[size];
 	const decorative = label === void 0;
@@ -366,7 +338,7 @@ function Icon({ name, size = "md", color = "primary", label, className, testID }
 		height: px,
 		viewBox: `0 0 24 24`,
 		fill: "none",
-		stroke: `var(${cssVariables[`color.text.${color}`]})`,
+		stroke: `var(${colorVariable(color)})`,
 		strokeWidth: 2,
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
@@ -379,6 +351,23 @@ function Icon({ name, size = "md", color = "primary", label, className, testID }
 	});
 }
 //#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/spinner/Spinner.module.css
 var Spinner_module_default = {
 	"icon": "sui-icon-iFfE_q",
@@ -388,9 +377,10 @@ var Spinner_module_default = {
 //#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.
+* Indicador de carga indeterminada: el icono `loader-circle` girando. 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, className, testID }) {
 	const decorative = label === void 0;
@@ -409,31 +399,179 @@ function Spinner({ size = "md", color = "primary", label, className, testID }) {
 	});
 }
 //#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"
+//#region src/icon-button/IconButton.module.css
+var IconButton_module_default = {
+	"lg": "sui-lg-f0wlja",
+	"md": "sui-md-f0wlja",
+	"sm": "sui-sm-f0wlja"
 };
 //#endregion
+//#region src/icon-button/IconButton.web.tsx
+const variantClass$3 = {
+	primary: Button_module_default.primary,
+	secondary: Button_module_default.secondary,
+	ghost: Button_module_default.ghost,
+	danger: Button_module_default.danger
+};
+const sizeClass$3 = {
+	sm: IconButton_module_default.sm,
+	md: IconButton_module_default.md,
+	lg: IconButton_module_default.lg
+};
+function IconButton({ icon, label, variant = "ghost", size = "md", disabled = false, loading = false, onPress, type = "button", className, style, testID, ref }) {
+	const { interactive, press } = useButton({
+		disabled,
+		loading,
+		onPress
+	});
+	const iconSize = iconButtonIconSize[size];
+	function handleClick(event) {
+		if (!interactive) event.preventDefault();
+		press();
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		className: cx(Button_module_default.root, variantClass$3[variant], sizeClass$3[size], loading && Button_module_default.loading, className),
+		style,
+		disabled,
+		"aria-disabled": loading ? true : void 0,
+		"aria-busy": loading ? true : void 0,
+		"aria-label": label,
+		"data-testid": testID,
+		onClick: handleClick,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: Button_module_default.content,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				size: iconSize
+			})
+		}), loading ? /* @__PURE__ */ jsx("span", {
+			className: Button_module_default.spinner,
+			children: /* @__PURE__ */ jsx(Spinner, { size: iconSize })
+		}) : null]
+	});
+}
+//#endregion
+//#region src/alert/Alert.module.css
+var Alert_module_default = {
+	"close": "sui-close-hPKSzG",
+	"content": "sui-content-hPKSzG",
+	"danger": "sui-danger-hPKSzG",
+	"description": "sui-description-hPKSzG",
+	"icon": "sui-icon-hPKSzG",
+	"info": "sui-info-hPKSzG",
+	"root": "sui-root-hPKSzG",
+	"success": "sui-success-hPKSzG",
+	"title": "sui-title-hPKSzG",
+	"warning": "sui-warning-hPKSzG"
+};
+//#endregion
+//#region src/alert/Alert.web.tsx
+const toneClass = {
+	success: Alert_module_default.success,
+	warning: Alert_module_default.warning,
+	danger: Alert_module_default.danger,
+	info: Alert_module_default.info
+};
+function Alert({ tone = "info", title, onClose, closeLabel, className, style, testID, children }) {
+	const hasDescription = children !== void 0 && children !== null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(Alert_module_default.root, toneClass[tone], className),
+		style,
+		role: feedbackUrgent[tone] ? "alert" : "status",
+		"data-testid": testID,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: Alert_module_default.icon,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: feedbackIcon[tone],
+					size: "md",
+					color: tone
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Alert_module_default.content,
+				children: [title === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					className: Alert_module_default.title,
+					children: title
+				}), hasDescription ? /* @__PURE__ */ jsx("div", {
+					className: Alert_module_default.description,
+					children
+				}) : null]
+			}),
+			onClose === void 0 ? null : /* @__PURE__ */ jsx(IconButton, {
+				icon: "x",
+				label: closeLabel,
+				size: "sm",
+				variant: "ghost",
+				onPress: onClose,
+				className: Alert_module_default.close
+			})
+		]
+	});
+}
+//#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$2 = {
+	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$2[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 src/button/Button.web.tsx
-const variantClass = {
+const variantClass$1 = {
 	primary: Button_module_default.primary,
 	secondary: Button_module_default.secondary,
 	ghost: Button_module_default.ghost,
 	danger: Button_module_default.danger
 };
-const sizeClass = {
+const sizeClass$2 = {
 	sm: Button_module_default.sm,
 	md: Button_module_default.md,
 	lg: Button_module_default.lg
@@ -452,7 +590,7 @@ function Button({ variant = "primary", size = "md", disabled = false, loading =
 	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),
+		className: cx(Button_module_default.root, variantClass$1[variant], sizeClass$2[size], fullWidth && Button_module_default.fullWidth, loading && Button_module_default.loading, className),
 		style,
 		disabled,
 		"aria-disabled": loading ? true : void 0,
@@ -483,6 +621,598 @@ function Button({ variant = "primary", size = "md", disabled = false, loading =
 	});
 }
 //#endregion
+//#region src/card/Card.module.css
+var Card_module_default = {
+	"elevated": "sui-elevated-So50QW",
+	"interactive": "sui-interactive-So50QW",
+	"outlined": "sui-outlined-So50QW",
+	"root": "sui-root-So50QW"
+};
+//#endregion
+//#region src/card/Card.web.tsx
+const variantClass = {
+	outlined: Card_module_default.outlined,
+	elevated: Card_module_default.elevated
+};
+function Card({ variant = "outlined", padding = 4, onPress, accessibilityLabel, className, style, testID, ref, children }) {
+	const vars = { "--card-padding": `var(${cssVariables[`space.${padding}`]})` };
+	const classes = cx(Card_module_default.root, variantClass[variant], onPress !== void 0 && Card_module_default.interactive, className);
+	if (onPress === void 0) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes,
+		style: {
+			...vars,
+			...style
+		},
+		"data-testid": testID,
+		children
+	});
+	function handleKeyDown(event) {
+		if (event.target !== event.currentTarget) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onPress?.();
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "button",
+		tabIndex: 0,
+		className: classes,
+		style: {
+			...vars,
+			...style
+		},
+		"aria-label": accessibilityLabel,
+		"data-testid": testID,
+		onClick: onPress,
+		onKeyDown: handleKeyDown,
+		children
+	});
+}
+//#endregion
+//#region src/_internal/mergeRefs.ts
+/** Un solo `ref` que actualiza varios: el interno del componente y el que recibe por props. */
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref !== null && ref !== void 0) ref.current = node;
+	};
+}
+//#endregion
+//#region src/checkbox/Checkbox.module.css
+var Checkbox_module_default = {
+	"box": "sui-box-iE7-OG",
+	"check": "sui-check-iE7-OG",
+	"dash": "sui-dash-iE7-OG",
+	"disabled": "sui-disabled-iE7-OG",
+	"input": "sui-input-iE7-OG",
+	"invalid": "sui-invalid-iE7-OG",
+	"label": "sui-label-iE7-OG",
+	"mark": "sui-mark-iE7-OG",
+	"root": "sui-root-iE7-OG"
+};
+//#endregion
+//#region src/checkbox/Checkbox.web.tsx
+function Checkbox({ checked, defaultChecked, indeterminate = false, onCheckedChange, disabled = false, invalid = false, required = false, accessibilityLabel, id, name, value, className, style, testID, ref, children }) {
+	const input = useRef(null);
+	const setRef = useMemo(() => mergeRefs(input, ref), [ref]);
+	useEffect(() => {
+		if (input.current !== null) input.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx(Checkbox_module_default.root, disabled && Checkbox_module_default.disabled, className),
+		style,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: setRef,
+				type: "checkbox",
+				className: Checkbox_module_default.input,
+				id,
+				name,
+				value,
+				...checked === void 0 ? { defaultChecked } : { checked },
+				onChange: (event) => onCheckedChange?.(event.target.checked),
+				disabled,
+				"aria-label": accessibilityLabel,
+				"aria-invalid": invalid ? true : void 0,
+				"aria-required": required ? true : void 0,
+				"data-testid": testID
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: cx(Checkbox_module_default.box, invalid && Checkbox_module_default.invalid),
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "check",
+					size: "sm",
+					color: "onPrimary",
+					className: cx(Checkbox_module_default.mark, Checkbox_module_default.check)
+				}), /* @__PURE__ */ jsx(Icon, {
+					name: "minus",
+					size: "sm",
+					color: "onPrimary",
+					className: cx(Checkbox_module_default.mark, Checkbox_module_default.dash)
+				})]
+			}),
+			children === void 0 || children === null ? null : /* @__PURE__ */ jsx("span", {
+				className: Checkbox_module_default.label,
+				children
+			})
+		]
+	});
+}
+//#endregion
+//#region src/divider/Divider.module.css
+var Divider_module_default = {
+	"horizontal": "sui-horizontal-Ea_Ija",
+	"root": "sui-root-Ea_Ija",
+	"vertical": "sui-vertical-Ea_Ija"
+};
+//#endregion
+//#region src/divider/Divider.web.tsx
+const orientationClass = {
+	horizontal: Divider_module_default.horizontal,
+	vertical: Divider_module_default.vertical
+};
+function Divider({ orientation = "horizontal", className, testID }) {
+	const classes = cx(Divider_module_default.root, orientationClass[orientation], className);
+	return orientation === "horizontal" ? /* @__PURE__ */ jsx("hr", {
+		className: classes,
+		"data-testid": testID
+	}) : /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		className: classes,
+		"data-testid": testID
+	});
+}
+//#endregion
+//#region src/form-field/FormField.module.css
+var FormField_module_default = {
+	"disabled": "sui-disabled-E2FhZq",
+	"error": "sui-error-E2FhZq",
+	"errorIcon": "sui-errorIcon-E2FhZq",
+	"help": "sui-help-E2FhZq",
+	"label": "sui-label-E2FhZq",
+	"required": "sui-required-E2FhZq",
+	"root": "sui-root-E2FhZq"
+};
+//#endregion
+//#region src/form-field/FormField.web.tsx
+/**
+* Etiqueta, ayuda y error de un control (ADR-037). El `<label>` apunta al `id` que
+* toma el control, y la ayuda y el error se enlazan con `aria-describedby`.
+*/
+function FormField({ label, help, error, required = false, disabled = false, className, testID, children }) {
+	const baseId = useId();
+	const field = useMemo(() => createFormFieldValue(baseId, {
+		label,
+		help,
+		error,
+		disabled,
+		required
+	}), [
+		baseId,
+		label,
+		help,
+		error,
+		disabled,
+		required
+	]);
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: field,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(FormField_module_default.root, disabled && FormField_module_default.disabled, className),
+			"data-testid": testID,
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: FormField_module_default.label,
+					htmlFor: field.controlId,
+					children: [label, required ? /* @__PURE__ */ jsx("span", {
+						className: FormField_module_default.required,
+						"aria-hidden": "true",
+						children: " *"
+					}) : null]
+				}),
+				children,
+				field.help === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					id: field.helpId,
+					className: FormField_module_default.help,
+					children: field.help
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-live": "polite",
+					children: field.error === void 0 ? null : /* @__PURE__ */ jsxs("p", {
+						id: field.errorId,
+						className: FormField_module_default.error,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: FormField_module_default.errorIcon,
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "circle-alert",
+								size: "sm",
+								color: "danger"
+							})
+						}), field.error]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/_internal/field.module.css
+var field_module_default = {
+	"control": "sui-control-jPIPoq",
+	"disabled": "sui-disabled-jPIPoq",
+	"field": "sui-field-jPIPoq",
+	"invalid": "sui-invalid-jPIPoq",
+	"readOnly": "sui-readOnly-jPIPoq"
+};
+//#endregion
+//#region src/input/Input.module.css
+var Input_module_default = {
+	"input": "sui-input-DAA5va",
+	"lg": "sui-lg-DAA5va",
+	"md": "sui-md-DAA5va",
+	"root": "sui-root-DAA5va",
+	"sm": "sui-sm-DAA5va"
+};
+//#endregion
+//#region src/input/Input.web.tsx
+const typeAttributes = {
+	text: { type: "text" },
+	email: { type: "email" },
+	password: { type: "password" },
+	search: { type: "search" },
+	tel: { type: "tel" },
+	url: { type: "url" },
+	number: {
+		type: "text",
+		inputMode: "decimal"
+	}
+};
+const sizeClass$1 = {
+	sm: Input_module_default.sm,
+	md: Input_module_default.md,
+	lg: Input_module_default.lg
+};
+function Input({ value, defaultValue, onChangeText, placeholder, type = "text", size = "md", disabled, readOnly = false, invalid, required, iconStart, iconEnd, maxLength, onFocus, onBlur, onSubmit, accessibilityLabel, id, name, autoComplete, className, style, testID, ref }) {
+	const control = useFormFieldControl({
+		id,
+		invalid,
+		disabled,
+		required
+	});
+	const attributes = typeAttributes[type];
+	const iconSize = inputIconSize[size];
+	const iconColor = control.disabled ? "disabled" : "muted";
+	function handleMouseDown(event) {
+		const input = event.currentTarget.querySelector("input");
+		if (input === null || event.target === input || control.disabled) return;
+		event.preventDefault();
+		input.focus();
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Enter" && !event.nativeEvent.isComposing) onSubmit?.();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(field_module_default.field, Input_module_default.root, sizeClass$1[size], control.invalid && field_module_default.invalid, readOnly && field_module_default.readOnly, control.disabled && field_module_default.disabled, className),
+		style,
+		onMouseDown: handleMouseDown,
+		children: [
+			iconStart === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				name: iconStart,
+				size: iconSize,
+				color: iconColor
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				id: control.id,
+				className: cx(field_module_default.control, Input_module_default.input),
+				type: attributes.type,
+				inputMode: attributes.inputMode,
+				name,
+				autoComplete,
+				...value === void 0 ? { defaultValue } : { value },
+				onChange: (event) => onChangeText?.(event.target.value),
+				placeholder,
+				disabled: control.disabled,
+				readOnly,
+				maxLength,
+				"aria-label": accessibilityLabel,
+				"aria-describedby": control.describedBy,
+				"aria-invalid": control.invalid ? true : void 0,
+				"aria-required": control.required ? true : void 0,
+				"data-testid": testID,
+				onFocus,
+				onBlur,
+				onKeyDown: handleKeyDown
+			}),
+			iconEnd === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				name: iconEnd,
+				size: iconSize,
+				color: iconColor
+			})
+		]
+	});
+}
+//#endregion
+//#region src/link/Link.module.css
+var Link_module_default = {
+	"always": "sui-always-5twIfq",
+	"hover": "sui-hover-5twIfq",
+	"root": "sui-root-5twIfq",
+	"typed": "sui-typed-5twIfq",
+	"uppercase": "sui-uppercase-5twIfq"
+};
+//#endregion
+//#region src/link/Link.web.tsx
+const underlineClass = {
+	always: Link_module_default.always,
+	hover: Link_module_default.hover
+};
+function Link({ href, variant, color = "link", underline = "always", onPress, accessibilityLabel, target, rel, className, style, testID, ref, children }) {
+	const { press } = useLink({ onPress });
+	const spec = variant === void 0 ? void 0 : textVariantStyles[variant];
+	const vars = { "--link-color": `var(${cssVariables[`color.text.${color}`]})` };
+	if (spec !== void 0) {
+		vars["--link-family"] = `var(${cssVariables[`font.family.${spec.family}`]})`;
+		vars["--link-size"] = `var(${cssVariables[`font.size.${spec.size}`]})`;
+		vars["--link-line-height"] = `var(${cssVariables[`font.lineHeight.${spec.size}`]})`;
+		vars["--link-weight"] = `var(${cssVariables[`font.weight.${spec.weight}`]})`;
+		if (spec.letterSpacing !== void 0) vars["--link-letter-spacing"] = `${spec.letterSpacing}px`;
+	}
+	function handleClick(event) {
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		if (!press()) event.preventDefault();
+	}
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		href,
+		target,
+		rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+		className: cx(Link_module_default.root, underlineClass[underline], spec !== void 0 && Link_module_default.typed, spec?.uppercase && Link_module_default.uppercase, className),
+		style: {
+			...vars,
+			...style
+		},
+		"aria-label": accessibilityLabel,
+		"data-testid": testID,
+		onClick: handleClick,
+		children
+	});
+}
+//#endregion
+//#region src/modal/Modal.module.css
+var Modal_module_default = {
+	"body": "sui-body-M_CPgW",
+	"close": "sui-close-M_CPgW",
+	"description": "sui-description-M_CPgW",
+	"dialog": "sui-dialog-M_CPgW",
+	"footer": "sui-footer-M_CPgW",
+	"header": "sui-header-M_CPgW",
+	"root": "sui-root-M_CPgW",
+	"sheet": "sui-sheet-M_CPgW",
+	"title": "sui-title-M_CPgW",
+	"titles": "sui-titles-M_CPgW"
+};
+//#endregion
+//#region src/modal/ModalDialog.web.tsx
+const presentationClass = {
+	dialog: Modal_module_default.dialog,
+	sheet: Modal_module_default.sheet
+};
+/**
+* La implementación que comparten `Modal` y `Sheet` (ADR-040): un `<dialog>` real
+* abierto con `showModal()`. El foco, la inercia del fondo y el apilamiento los
+* resuelve el navegador.
+*/
+function ModalDialog({ presentation, open, onClose, title, description, closeLabel, dismissible = true, footer, className, style, testID, ref, children }) {
+	const dialog = useRef(null);
+	const setRef = useMemo(() => mergeRefs(dialog, ref), [ref]);
+	const titleId = useId();
+	const descriptionId = useId();
+	useEffect(() => {
+		const element = dialog.current;
+		if (element === null) return;
+		if (open && !element.open) element.showModal();
+		else if (!open && element.open) element.close();
+	}, [open]);
+	function handleCancel(event) {
+		event.preventDefault();
+		if (dismissible) onClose();
+	}
+	function handleNativeClose() {
+		if (open) onClose();
+	}
+	function handleClick(event) {
+		if (event.target === event.currentTarget && dismissible) onClose();
+	}
+	const hasBody = children !== void 0 && children !== null;
+	const hasFooter = footer !== void 0 && footer !== null;
+	return /* @__PURE__ */ jsx("dialog", {
+		ref: setRef,
+		className: cx(Modal_module_default.root, presentationClass[presentation], className),
+		style,
+		"aria-labelledby": titleId,
+		"aria-describedby": description === void 0 ? void 0 : descriptionId,
+		"data-testid": testID,
+		onCancel: handleCancel,
+		onClose: handleNativeClose,
+		onClick: handleClick,
+		children: open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: Modal_module_default.header,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: Modal_module_default.titles,
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: Modal_module_default.title,
+						children: title
+					}), description === void 0 ? null : /* @__PURE__ */ jsx("p", {
+						id: descriptionId,
+						className: Modal_module_default.description,
+						children: description
+					})]
+				}), closeLabel === void 0 ? null : /* @__PURE__ */ jsx(IconButton, {
+					icon: "x",
+					label: closeLabel,
+					size: "sm",
+					variant: "ghost",
+					onPress: onClose,
+					className: Modal_module_default.close
+				})]
+			}),
+			hasBody ? /* @__PURE__ */ jsx("div", {
+				className: Modal_module_default.body,
+				children
+			}) : null,
+			hasFooter ? /* @__PURE__ */ jsx("div", {
+				className: Modal_module_default.footer,
+				children: footer
+			}) : null
+		] }) : null
+	});
+}
+//#endregion
+//#region src/modal/Modal.web.tsx
+/** Un diálogo centrado (ADR-040). */
+function Modal(props) {
+	return /* @__PURE__ */ jsx(ModalDialog, {
+		...props,
+		presentation: "dialog"
+	});
+}
+//#endregion
+//#region src/select/Select.module.css
+var Select_module_default = {
+	"chevron": "sui-chevron-Rxx4wG",
+	"lg": "sui-lg-Rxx4wG",
+	"md": "sui-md-Rxx4wG",
+	"placeholder": "sui-placeholder-Rxx4wG",
+	"root": "sui-root-Rxx4wG",
+	"select": "sui-select-Rxx4wG",
+	"sm": "sui-sm-Rxx4wG"
+};
+//#endregion
+//#region src/select/Select.web.tsx
+const sizeClass = {
+	sm: Select_module_default.sm,
+	md: Select_module_default.md,
+	lg: Select_module_default.lg
+};
+/**
+* Un `<select>` real (ADR-038): el teclado, los lectores de pantalla y el selector del
+* sistema en móvil son los del navegador.
+*/
+function Select({ options, value, defaultValue, onValueChange, placeholder, size = "md", disabled, invalid, required, accessibilityLabel, id, name, className, style, testID, ref }) {
+	const control = useFormFieldControl({
+		id,
+		invalid,
+		disabled,
+		required
+	});
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(field_module_default.field, Select_module_default.root, sizeClass[size], control.invalid && field_module_default.invalid, control.disabled && field_module_default.disabled, className),
+		style,
+		children: [/* @__PURE__ */ jsxs("select", {
+			ref,
+			id: control.id,
+			className: cx(field_module_default.control, Select_module_default.select, current === "" && Select_module_default.placeholder),
+			name,
+			value: current,
+			onChange: (event) => setCurrent(event.target.value),
+			disabled: control.disabled,
+			"aria-label": accessibilityLabel,
+			"aria-describedby": control.describedBy,
+			"aria-invalid": control.invalid ? true : void 0,
+			"aria-required": control.required ? true : void 0,
+			"data-testid": testID,
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				hidden: true,
+				children: placeholder ?? ""
+			}), options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				disabled: option.disabled,
+				children: option.label
+			}, option.value))]
+		}), /* @__PURE__ */ jsx("span", {
+			className: Select_module_default.chevron,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "chevron-down",
+				size: inputIconSize[size],
+				color: control.disabled ? "disabled" : "muted"
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/sheet/Sheet.web.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.module.css
+var Skeleton_module_default = {
+	"bar": "sui-bar-KsqoQq",
+	"circle": "sui-circle-KsqoQq",
+	"line": "sui-line-KsqoQq",
+	"pulse": "sui-pulse-KsqoQq",
+	"rectangle": "sui-rectangle-KsqoQq",
+	"root": "sui-root-KsqoQq"
+};
+//#endregion
+//#region src/skeleton/Skeleton.web.tsx
+const shapeClass = {
+	text: Skeleton_module_default.line,
+	rectangle: Skeleton_module_default.rectangle,
+	circle: Skeleton_module_default.circle
+};
+function dimension(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+/** Decorativo: los lectores de pantalla lo ignoran. */
+function Skeleton({ shape = "text", width, height, variant = "body", lines = 1, className, style, testID }) {
+	const vars = {};
+	if (width !== void 0) vars["--skeleton-width"] = dimension(width);
+	if (shape === "text") {
+		const spec = textVariantStyles[variant];
+		vars["--skeleton-font-size"] = `var(${cssVariables[`font.size.${spec.size}`]})`;
+		vars["--skeleton-line-height"] = `var(${cssVariables[`font.lineHeight.${spec.size}`]})`;
+		return /* @__PURE__ */ jsx("span", {
+			className: cx(Skeleton_module_default.root, className),
+			style: {
+				...vars,
+				...style
+			},
+			"aria-hidden": "true",
+			"data-testid": testID,
+			children: Array.from({ length: Math.max(1, lines) }, (_, index) => /* @__PURE__ */ jsx("span", { className: cx(Skeleton_module_default.bar, shapeClass.text) }, index))
+		});
+	}
+	if (height !== void 0) vars["--skeleton-height"] = dimension(height);
+	return /* @__PURE__ */ jsx("span", {
+		className: cx(Skeleton_module_default.root, Skeleton_module_default.bar, shapeClass[shape], className),
+		style: {
+			...vars,
+			...style
+		},
+		"aria-hidden": "true",
+		"data-testid": testID
+	});
+}
+//#endregion
 //#region src/stack/Stack.module.css
 var Stack_module_default = {
 	"alignCenter": "sui-alignCenter-oAyu1G",
@@ -530,6 +1260,126 @@ function Stack({ direction = "column", gap, align = "stretch", justify = "start"
 	});
 }
 //#endregion
+//#region src/switch/Switch.module.css
+var Switch_module_default = {
+	"disabled": "sui-disabled-WH6kOa",
+	"input": "sui-input-WH6kOa",
+	"label": "sui-label-WH6kOa",
+	"root": "sui-root-WH6kOa",
+	"thumb": "sui-thumb-WH6kOa",
+	"track": "sui-track-WH6kOa"
+};
+//#endregion
+//#region src/switch/Switch.web.tsx
+function Switch({ checked, defaultChecked, onCheckedChange, disabled = false, accessibilityLabel, id, name, value, className, style, testID, ref, children }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx(Switch_module_default.root, disabled && Switch_module_default.disabled, className),
+		style,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				type: "checkbox",
+				role: "switch",
+				className: Switch_module_default.input,
+				id,
+				name,
+				value,
+				...checked === void 0 ? { defaultChecked } : { checked },
+				onChange: (event) => onCheckedChange?.(event.target.checked),
+				disabled,
+				"aria-label": accessibilityLabel,
+				"data-testid": testID
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: Switch_module_default.track,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", { className: Switch_module_default.thumb })
+			}),
+			children === void 0 || children === null ? null : /* @__PURE__ */ jsx("span", {
+				className: Switch_module_default.label,
+				children
+			})
+		]
+	});
+}
+//#endregion
+//#region src/tabs/Tabs.module.css
+var Tabs_module_default = {
+	"list": "sui-list-5aOC0W",
+	"panel": "sui-panel-5aOC0W",
+	"root": "sui-root-5aOC0W",
+	"selected": "sui-selected-5aOC0W",
+	"tab": "sui-tab-5aOC0W"
+};
+//#endregion
+//#region src/tabs/Tabs.web.tsx
+const keyDirection = {
+	ArrowRight: "next",
+	ArrowLeft: "previous",
+	Home: "first",
+	End: "last"
+};
+function Tabs({ items, value, defaultValue, onValueChange, accessibilityLabel, className, style, testID }) {
+	const baseId = useId();
+	const [selected, setSelected] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? firstEnabledTab(items) ?? "",
+		onChange: onValueChange
+	});
+	const tabs = useRef(/* @__PURE__ */ new Map());
+	const selectedIndex = items.findIndex((item) => item.value === selected);
+	const active = items[selectedIndex];
+	const panelId = `${baseId}-panel`;
+	function handleKeyDown(event) {
+		const direction = keyDirection[event.key];
+		if (direction === void 0) return;
+		event.preventDefault();
+		const next = getTabInDirection(items, selected, direction);
+		setSelected(next);
+		tabs.current.get(next)?.focus();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(Tabs_module_default.root, className),
+		style,
+		"data-testid": testID,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			"aria-label": accessibilityLabel,
+			className: Tabs_module_default.list,
+			children: items.map((item, index) => {
+				const isSelected = item.value === selected;
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (node) => {
+						if (node === null) tabs.current.delete(item.value);
+						else tabs.current.set(item.value, node);
+					},
+					type: "button",
+					role: "tab",
+					id: `${baseId}-tab-${index}`,
+					"aria-selected": isSelected,
+					"aria-controls": isSelected && item.content !== void 0 ? panelId : void 0,
+					tabIndex: isSelected ? 0 : -1,
+					disabled: item.disabled,
+					className: cx(Tabs_module_default.tab, isSelected && Tabs_module_default.selected),
+					onClick: () => setSelected(item.value),
+					onKeyDown: handleKeyDown,
+					children: [item.icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+						name: item.icon,
+						size: "sm"
+					}), item.label]
+				}, item.value);
+			})
+		}), active?.content === void 0 || active.content === null ? null : /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			id: panelId,
+			"aria-labelledby": `${baseId}-tab-${selectedIndex}`,
+			tabIndex: 0,
+			className: Tabs_module_default.panel,
+			children: active.content
+		})]
+	});
+}
+//#endregion
 //#region src/text/Text.module.css
 var Text_module_default = {
 	"center": "sui-center-ca3VdW",
@@ -580,6 +1430,139 @@ function Text({ variant = "body", color = "primary", align, truncate = false, as
 	});
 }
 //#endregion
+//#region src/text-area/TextArea.module.css
+var TextArea_module_default = { "root": "sui-root-c4Gv8W" };
+//#endregion
+//#region src/text-area/TextArea.web.tsx
+function TextArea({ value, defaultValue, onChangeText, placeholder, rows = 3, disabled, readOnly = false, invalid, required, maxLength, onFocus, onBlur, accessibilityLabel, id, name, className, style, testID, ref }) {
+	const control = useFormFieldControl({
+		id,
+		invalid,
+		disabled,
+		required
+	});
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		id: control.id,
+		className: cx(field_module_default.field, TextArea_module_default.root, control.invalid && field_module_default.invalid, readOnly && field_module_default.readOnly, control.disabled && field_module_default.disabled, className),
+		style,
+		rows,
+		name,
+		...value === void 0 ? { defaultValue } : { value },
+		onChange: (event) => onChangeText?.(event.target.value),
+		placeholder,
+		disabled: control.disabled,
+		readOnly,
+		maxLength,
+		"aria-label": accessibilityLabel,
+		"aria-describedby": control.describedBy,
+		"aria-invalid": control.invalid ? true : void 0,
+		"aria-required": control.required ? true : void 0,
+		"data-testid": testID,
+		onFocus,
+		onBlur
+	});
+}
+//#endregion
+//#region src/toast/Toast.module.css
+var Toast_module_default = {
+	"actions": "sui-actions-8N5mCG",
+	"content": "sui-content-8N5mCG",
+	"description": "sui-description-8N5mCG",
+	"enter": "sui-enter-8N5mCG",
+	"icon": "sui-icon-8N5mCG",
+	"root": "sui-root-8N5mCG",
+	"title": "sui-title-8N5mCG",
+	"viewport": "sui-viewport-8N5mCG"
+};
+//#endregion
+//#region src/toast/Toast.web.tsx
+/**
+* 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;
+	return /* @__PURE__ */ jsxs("div", {
+		className: Toast_module_default.root,
+		role: feedbackUrgent[tone] ? "alert" : "status",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: Toast_module_default.icon,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: feedbackIcon[tone],
+					size: "md",
+					color: tone
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Toast_module_default.content,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: Toast_module_default.title,
+					children: title
+				}), description === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					className: Toast_module_default.description,
+					children: description
+				})]
+			}),
+			action === void 0 && closeLabel === void 0 ? null : /* @__PURE__ */ jsxs("div", {
+				className: Toast_module_default.actions,
+				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.web.tsx
+/**
+* La zona donde aparecen los toasts de un `UIProvider` (ADR-039). Existe siempre,
+* aunque esté vacía: así los lectores de pantalla anuncian cada toast al llegar.
+*/
+function ToastViewport({ store }) {
+	const toasts = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	return /* @__PURE__ */ jsx("div", {
+		className: Toast_module_default.viewport,
+		"aria-live": "polite",
+		onMouseEnter: store.pause,
+		onMouseLeave: store.resume,
+		onFocus: store.pause,
+		onBlur: store.resume,
+		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.module.css
 var UIProvider_module_default = { "root": "sui-root-QoB9YG" };
 //#endregion
@@ -603,7 +1586,8 @@ function useSystemColorScheme() {
 }
 /**
 * 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.
+* `data-brand` en un contenedor sin caja propia; `tokens.css` hace el resto. También
+* guarda la cola de toasts y los pinta (ADR-039).
 */
 function UIProvider({ theme = "system", brand, children }) {
 	const system = useSystemColorScheme();
@@ -612,15 +1596,19 @@ function UIProvider({ theme = "system", brand, children }) {
 		system,
 		brand
 	]);
+	const toasts = useToastHost();
 	return /* @__PURE__ */ jsx(UIContext.Provider, {
 		value,
-		children: /* @__PURE__ */ jsx("div", {
-			className: UIProvider_module_default.root,
-			"data-theme": value.colorScheme,
-			"data-brand": brand,
-			children
+		children: /* @__PURE__ */ jsx(ToastContext.Provider, {
+			value: toasts.store,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: UIProvider_module_default.root,
+				"data-theme": value.colorScheme,
+				"data-brand": brand,
+				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 };