@satellatickets/ui 0.2.0 → 0.3.0

package/README.md

@@ -35,7 +35,7 @@ Requiere `react-dom >=19.0`. Importa los estilos **una vez**, en la entrada de l
 import '@satellatickets/ui/styles.css';
 ```
 
-Es un CSS estático, sin runtime de estilos: funciona con SSR y Server Components, y cambiar de tema no re-renderiza nada.
+Es un CSS estático, sin runtime de estilos: funciona con SSR, y cambiar de tema no re-renderiza nada. En Next.js, los componentes se importan directamente desde una página o un layout, sin envolverlos: el paquete ya lleva `"use client"`.
 
 ### React Native
 
@@ -51,7 +51,7 @@ No hay nada más que configurar: Metro resuelve la versión nativa del paquete.
 
 ### Fuentes
 
-La librería nombra las familias de Satella (Unbounded, Hanken Grotesk e IBM Plex Mono) pero no las empaqueta: las carga cada app, con `next/font` o un `<link>` en web y con `expo-font` en nativo. Si una fuente no está cargada, se usa la del sistema.
+La librería nombra las familias de Satella (Unbounded, Hanken Grotesk e IBM Plex Mono) pero no las empaqueta: las carga cada app, con `@fontsource` o un `<link>` en web y con `expo-font` en nativo. Si una fuente no está cargada, se usa la del sistema.
 
 ## Tema y marca
 

package/dist/native/index.d.ts

@@ -189,7 +189,7 @@ interface SelectNativeProps extends SelectProps$1 {
 //#endregion
 //#region src/select/Select.native.d.ts
 /**
- * Un disparador con aspecto de `Input` que abre una lista modal (ADR-038). React
+ * Un disparador con aspecto de `Input` que abre una lista modal (ADR-042). React
  * Native no trae ningún selector, y así `Select` no añade dependencias.
  */
 export declare function Select({ options, value, defaultValue, onValueChange, placeholder, size, disabled, invalid, required, accessibilityLabel, style, testID, ref }: SelectNativeProps): import("react").JSX.Element;

package/dist/native/index.js

@@ -1536,7 +1536,7 @@ const styles$6 = StyleSheet.create({
 	}
 });
 /**
-* Un disparador con aspecto de `Input` que abre una lista modal (ADR-038). React
+* Un disparador con aspecto de `Input` que abre una lista modal (ADR-042). 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 }) {

package/dist/web/index.d.ts

@@ -1,3 +1,4 @@
+
 import { AlertProps, AlertProps as AlertProps$1, BadgeProps, BadgeProps as BadgeProps$1, BoxProps, BoxProps as BoxProps$1, ButtonProps as ButtonProps$1, CardProps, CardProps as CardProps$1, CheckboxProps, CheckboxProps as CheckboxProps$1, ColorScheme, DividerProps, DividerProps as DividerProps$1, FormFieldProps, FormFieldProps as FormFieldProps$1, IconButtonProps as IconButtonProps$1, IconProps as IconProps$1, InputProps as InputProps$1, LinkPressEvent, LinkProps, LinkProps as LinkProps$1, ModalProps, ModalProps as ModalProps$1, SelectOption, SelectProps, SelectProps as SelectProps$1, SheetProps, SkeletonProps, SkeletonProps as SkeletonProps$1, SpinnerProps, SpinnerProps as SpinnerProps$1, StackProps, StackProps as StackProps$1, SwitchProps, SwitchProps as SwitchProps$1, TabItem as TabItem$1, TabsProps as TabsProps$1, TextAreaProps, TextAreaProps as TextAreaProps$1, TextProps, TextProps as TextProps$1, ThemeMode, ToastAction, ToastApi, ToastOptions, UIProviderProps, UIProviderProps as UIProviderProps$1, useBrand, useColorScheme, useTheme, useToast } from "@satellatickets/core";
 import { CSSProperties, Ref } from "react";
 import "react-native";
@@ -181,20 +182,22 @@ export declare function Modal(props: ModalWebProps): import("react").JSX.Element
 //#region src/select/Select.types.d.ts
 /** Extensión solo web del contrato (ADR-009): atributos de formulario y escape hatches. */
 interface SelectWebProps extends SelectProps$1 {
-  /** `id` del `<select>`. Dentro de un `FormField` no hace falta: lo pone él. */
+  /** `id` del botón que abre la lista. Dentro de un `FormField` no hace falta: lo pone él. */
   id?: string | undefined;
   /** Nombre con el que viaja en un `<form>`. */
   name?: string | undefined;
-  /** Se aplican a la caja del campo, no al `<select>`. */
+  /** Se aplican a la caja del campo, no al botón. */
   className?: string | undefined;
   style?: CSSProperties | undefined;
-  ref?: Ref<HTMLSelectElement> | undefined;
+  /** El botón que abre la lista (ADR-042). */
+  ref?: Ref<HTMLButtonElement> | undefined;
 }
 //#endregion
 //#region src/select/Select.web.d.ts
 /**
- * Un `<select>` real (ADR-038): el teclado, los lectores de pantalla y el selector del
- * sistema en móvil son los del navegador.
+ * Un botón que abre una lista propia (ADR-042). El foco no sale del botón: la opción
+ * resaltada se comunica con `aria-activedescendant`, y la lista se pinta en la capa
+ * superior del navegador, por encima de todo y sin que la recorte ningún contenedor.
  */
 export declare function Select({ options, value, defaultValue, onValueChange, placeholder, size, disabled, invalid, required, accessibilityLabel, id, name, className, style, testID, ref }: SelectWebProps): import("react").JSX.Element;
 //#endregion

package/dist/web/index.js

@@ -1,7 +1,8 @@
-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";
+'use client';
+import { FormFieldContext, ToastContext, UIContext, buttonIconSize, createFormFieldValue, createToastStore, createUIContextValue, findOptionByText, firstEnabledTab, getOptionInDirection, getTabInDirection, iconButtonIconSize, iconSizePx, inputIconSize, isFeedbackTone, textVariantStyles, useBrand, useButton, useColorScheme, useControllableState, useFormFieldControl, useLink, useTheme, useToast } from "@satellatickets/core";
 import { cssVariables } from "@satellatickets/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 //#region src/_internal/cx.ts
 /** Une clases CSS ignorando valores falsos. */
 function cx(...parts) {
@@ -1084,13 +1085,19 @@ function Modal(props) {
 //#endregion
 //#region src/select/Select.module.css
 var Select_module_default = {
+	"active": "sui-active-Rxx4wG",
 	"chevron": "sui-chevron-Rxx4wG",
+	"disabled": "sui-disabled-Rxx4wG",
+	"focused": "sui-focused-Rxx4wG",
+	"label": "sui-label-Rxx4wG",
 	"lg": "sui-lg-Rxx4wG",
+	"list": "sui-list-Rxx4wG",
 	"md": "sui-md-Rxx4wG",
+	"option": "sui-option-Rxx4wG",
 	"placeholder": "sui-placeholder-Rxx4wG",
 	"root": "sui-root-Rxx4wG",
-	"select": "sui-select-Rxx4wG",
-	"sm": "sui-sm-Rxx4wG"
+	"sm": "sui-sm-Rxx4wG",
+	"trigger": "sui-trigger-Rxx4wG"
 };
 //#endregion
 //#region src/select/Select.web.tsx
@@ -1099,57 +1106,260 @@ const sizeClass = {
 	md: Select_module_default.md,
 	lg: Select_module_default.lg
 };
+const keyDirection$1 = {
+	ArrowDown: "next",
+	ArrowUp: "previous",
+	Home: "first",
+	End: "last",
+	PageDown: "nextPage",
+	PageUp: "previousPage"
+};
+/** Pasado este tiempo sin escribir, la siguiente letra empieza una búsqueda nueva. */
+const SEARCH_TIMEOUT_MS = 500;
+/** Lo escrito para buscar una opción y el momento de la última letra. */
+const NO_SEARCH = {
+	text: "",
+	at: Number.NEGATIVE_INFINITY
+};
 /**
-* Un `<select>` real (ADR-038): el teclado, los lectores de pantalla y el selector del
-* sistema en móvil son los del navegador.
+* Un botón que abre una lista propia (ADR-042). El foco no sale del botón: la opción
+* resaltada se comunica con `aria-activedescendant`, y la lista se pinta en la capa
+* superior del navegador, por encima de todo y sin que la recorte ningún contenedor.
 */
 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
+		required,
+		accessibilityLabel
 	});
 	const [current, setCurrent] = useControllableState({
 		value,
 		defaultValue: defaultValue ?? "",
 		onChange: onValueChange
 	});
+	const [opened, setOpened] = useState(false);
+	const [active, setActive] = useState();
+	const baseId = useId();
+	const root = useRef(null);
+	const list = useRef(null);
+	const search = useRef(NO_SEARCH);
+	const pointer = useRef(void 0);
+	if (opened && control.disabled) setOpened(false);
+	const open = opened && !control.disabled;
+	const selected = options.find((option) => option.value === current);
+	const activeIndex = open ? options.findIndex((option) => option.value === active?.value) : -1;
+	const listId = `${baseId}-list`;
+	const activeId = activeIndex === -1 ? void 0 : `${baseId}-option-${activeIndex}`;
+	/** Abre la lista con una opción resaltada: la indicada o, si no, la elegida. */
+	function show(keyboard, highlighted = selected?.disabled === true ? void 0 : selected) {
+		setActive(highlighted === void 0 ? void 0 : {
+			value: highlighted.value,
+			keyboard
+		});
+		setOpened(true);
+		if (keyboard) pointer.current = void 0;
+	}
+	function choose(next) {
+		setCurrent(next);
+		setOpened(false);
+	}
+	useLayoutEffect(() => {
+		const anchor = root.current;
+		const popup = list.current;
+		if (!open || anchor === null || popup === null) return;
+		let above = false;
+		const place = () => {
+			const { top, bottom, left, width } = anchor.getBoundingClientRect();
+			const viewport = document.documentElement.clientHeight;
+			popup.dataset.side = above ? "top" : "bottom";
+			popup.style.setProperty("--select-list-left", `${left}px`);
+			popup.style.setProperty("--select-list-width", `${width}px`);
+			popup.style.setProperty("--select-list-offset", `${above ? viewport - top : bottom}px`);
+			popup.style.setProperty("--select-list-space", `${above ? top : viewport - bottom}px`);
+		};
+		const { top, bottom, width } = anchor.getBoundingClientRect();
+		popup.style.setProperty("--select-list-width", `${width}px`);
+		if (typeof popup.showPopover === "function" && !popup.matches(":popover-open")) popup.showPopover();
+		const wanted = popup.offsetHeight + parseFloat(getComputedStyle(popup).marginTop) * 2;
+		const below = document.documentElement.clientHeight - bottom;
+		above = below < wanted && top > below;
+		place();
+		const chosen = popup.querySelector("[aria-selected=\"true\"]");
+		if (chosen !== null) popup.scrollTop = chosen.offsetTop - (popup.clientHeight - chosen.offsetHeight) / 2;
+		const handlePointerDown = (event) => {
+			if (event.target instanceof Node && !anchor.contains(event.target)) setOpened(false);
+		};
+		const handleScroll = (event) => {
+			if (event.target instanceof Node && popup.contains(event.target)) return;
+			place();
+		};
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		window.addEventListener("scroll", handleScroll, true);
+		window.addEventListener("resize", place);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown, true);
+			window.removeEventListener("scroll", handleScroll, true);
+			window.removeEventListener("resize", place);
+		};
+	}, [open]);
+	useLayoutEffect(() => {
+		if (activeId !== void 0) document.getElementById(activeId)?.scrollIntoView({ block: "nearest" });
+	}, [activeId]);
+	function handleClick(event) {
+		event.currentTarget.focus();
+		pointer.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (open) setOpened(false);
+		else show(false);
+	}
+	function handlePointerMove(event, option) {
+		if (event.pointerType === "touch") return;
+		const last = pointer.current;
+		pointer.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (last === void 0 || last.x === event.clientX && last.y === event.clientY) return;
+		if (option.disabled === true) return;
+		if (active?.value !== option.value || active.keyboard) setActive({
+			value: option.value,
+			keyboard: false
+		});
+	}
+	function handleKeyDown(event) {
+		const { key } = event;
+		if (event.ctrlKey || event.metaKey) return;
+		const searching = event.timeStamp - search.current.at < SEARCH_TIMEOUT_MS;
+		if (key.length === 1 && !event.altKey && (key !== " " || searching)) {
+			event.preventDefault();
+			const text = searching ? search.current.text + key : key;
+			search.current = {
+				text,
+				at: event.timeStamp
+			};
+			const match = findOptionByText(options, text, open ? active?.value : selected?.value);
+			const option = options.find((candidate) => candidate.value === match);
+			if (!open) show(true, option);
+			else if (option !== void 0) setActive({
+				value: option.value,
+				keyboard: true
+			});
+			return;
+		}
+		const direction = keyDirection$1[key];
+		const confirms = key === "Enter" || key === " ";
+		if (direction === void 0 && !confirms && key !== "Escape" && key !== "Tab") return;
+		search.current = NO_SEARCH;
+		if (key === "Escape") {
+			if (!open) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setOpened(false);
+			return;
+		}
+		if (key === "Tab") {
+			if (open && active !== void 0) choose(active.value);
+			return;
+		}
+		event.preventDefault();
+		if (!open) {
+			const value = direction === "first" || direction === "last" ? getOptionInDirection(options, void 0, direction) : void 0;
+			show(true, options.find((option) => option.value === value));
+			return;
+		}
+		if (confirms || event.altKey && key === "ArrowUp") {
+			if (active === void 0) setOpened(false);
+			else choose(active.value);
+			return;
+		}
+		if (direction === void 0 || event.altKey) return;
+		const next = getOptionInDirection(options, active?.value, direction);
+		setActive(next === void 0 ? void 0 : {
+			value: next,
+			keyboard: true
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
 		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"
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				ref,
+				type: "button",
+				role: "combobox",
+				id: control.id,
+				className: cx(field_module_default.control, Select_module_default.trigger, selected === void 0 && Select_module_default.placeholder),
+				disabled: control.disabled,
+				"aria-haspopup": "listbox",
+				"aria-expanded": open,
+				"aria-controls": open ? listId : void 0,
+				"aria-activedescendant": activeId,
+				"aria-label": accessibilityLabel,
+				"aria-describedby": control.describedBy,
+				"aria-invalid": control.invalid ? true : void 0,
+				"aria-required": control.required ? true : void 0,
+				"data-testid": testID,
+				onClick: handleClick,
+				onKeyDown: handleKeyDown,
+				onKeyUp: (event) => {
+					if (event.key === " ") event.preventDefault();
+				},
+				onBlur: () => setOpened(false),
+				children: selected?.label ?? placeholder ?? ""
+			}),
+			/* @__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"
+				})
+			}),
+			open ? /* @__PURE__ */ jsx("div", {
+				ref: list,
+				popover: "manual",
+				role: "listbox",
+				id: listId,
+				tabIndex: -1,
+				"aria-label": control.accessibilityLabel,
+				className: Select_module_default.list,
+				onMouseDown: (event) => event.preventDefault(),
+				children: options.map((option, index) => {
+					const isSelected = option.value === current;
+					const isDisabled = option.disabled === true;
+					const isActive = index === activeIndex;
+					return /* @__PURE__ */ jsxs("div", {
+						id: `${baseId}-option-${index}`,
+						role: "option",
+						"aria-selected": isSelected,
+						"aria-disabled": isDisabled ? true : void 0,
+						className: cx(Select_module_default.option, isActive && (active?.keyboard === true ? Select_module_default.focused : Select_module_default.active), isDisabled && Select_module_default.disabled),
+						onClick: isDisabled ? void 0 : () => choose(option.value),
+						onPointerMove: (event) => handlePointerMove(event, option),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: Select_module_default.label,
+							children: option.label
+						}), isSelected ? /* @__PURE__ */ jsx(Icon, {
+							name: "check",
+							size: inputIconSize[size],
+							color: "link"
+						}) : null]
+					}, option.value);
+				})
+			}) : null,
+			name === void 0 ? null : /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: current,
+				disabled: control.disabled
 			})
-		})]
+		]
 	});
 }
 //#endregion

package/dist/web/styles.css

@@ -784,27 +784,26 @@
   --select-icon: var(--space-5);
 }
 
-.sui-select-Rxx4wG {
+.sui-trigger-Rxx4wG {
   min-height: calc(var(--select-height) - var(--border-width-thin) * 2);
   padding: var(--space-0) calc(var(--select-padding-x) + var(--select-icon) + var(--space-2))
     var(--space-0) var(--select-padding-x);
   border-radius: inherit;
+  text-align: start;
   text-overflow: ellipsis;
+  white-space: nowrap;
   cursor: inherit;
+  -webkit-tap-highlight-color: transparent;
   align-self: stretch;
+  overflow: hidden;
 }
 
 .sui-placeholder-Rxx4wG {
   color: var(--color-text-muted);
 }
 
-.sui-select-Rxx4wG option {
-  background-color: var(--color-bg-surface);
-  color: var(--color-text-primary);
-}
-
-.sui-select-Rxx4wG option:disabled {
-  color: var(--color-text-disabled);
+.sui-placeholder-Rxx4wG:disabled {
+  color: inherit;
 }
 
 .sui-chevron-Rxx4wG {
@@ -812,10 +811,85 @@
   right: var(--select-padding-x);
   bottom: var(--space-0);
   pointer-events: none;
+  transition: transform var(--duration-fast);
   align-items: center;
   display: flex;
   position: absolute;
 }
+
+.sui-trigger-Rxx4wG[aria-expanded="true"] + .sui-chevron-Rxx4wG {
+  transform: rotate(180deg);
+}
+
+.sui-list-Rxx4wG {
+  inset: auto;
+  top: var(--select-list-offset);
+  left: var(--select-list-left);
+  z-index: var(--z-index-dropdown);
+  box-sizing: border-box;
+  width: max-content;
+  min-width: var(--select-list-width);
+  max-width: calc(100vw - var(--select-list-left, 0px) - var(--space-2));
+  max-height: min(calc(var(--size-control-md) * 7),
+    calc(var(--select-list-space, 100vh) - var(--space-1) * 2));
+  margin: var(--space-1) var(--space-0);
+  padding: var(--space-1);
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--space-1);
+  scrollbar-color: var(--color-border-strong) transparent;
+  scrollbar-width: thin;
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-elevated);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text-primary);
+  cursor: default;
+  position: fixed;
+  overflow-y: auto;
+}
+
+.sui-list-Rxx4wG[data-side="top"] {
+  top: auto;
+  bottom: var(--select-list-offset);
+}
+
+.sui-option-Rxx4wG {
+  align-items: center;
+  gap: var(--space-2);
+  box-sizing: border-box;
+  min-height: var(--select-height);
+  padding: var(--space-2) calc(var(--select-padding-x) - var(--space-1));
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+}
+
+.sui-label-Rxx4wG {
+  overflow-wrap: anywhere;
+  flex: auto;
+  min-width: 0;
+}
+
+.sui-active-Rxx4wG, .sui-option-Rxx4wG:active:not(.sui-disabled-Rxx4wG) {
+  background-color: var(--color-bg-muted);
+}
+
+.sui-focused-Rxx4wG {
+  outline: var(--border-width-thick) solid var(--color-border-focus);
+  outline-offset: calc(var(--border-width-thick) * -1);
+}
+
+.sui-disabled-Rxx4wG {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sui-chevron-Rxx4wG {
+    transition: none;
+  }
+}
 .sui-root-KsqoQq {
   --skeleton-width: initial;
   --skeleton-height: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satellatickets/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Componentes de satella-ui con una sola API para React (web) y React Native",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@satellatickets/core": "0.2.0",
+    "@satellatickets/core": "0.3.0",
     "@satellatickets/tokens": "0.1.0"
   },
   "devDependencies": {
@@ -80,8 +80,8 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "@satellatickets/eslint-config": "0.0.0",
-    "@satellatickets/icons": "0.0.0",
-    "@satellatickets/tsconfig": "0.0.0"
+    "@satellatickets/tsconfig": "0.0.0",
+    "@satellatickets/icons": "0.0.0"
   },
   "scripts": {
     "build": "tsdown",