@satellatickets/core 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,82 +1,127 @@
-import { createContext, useCallback, useContext } from "react";
-import { brands, themes } from "@satellatickets/tokens";
-//#region src/hooks/use-button.ts
+
+import { n as resolveColorScheme, r as resolveTheme, t as mergeTheme } from "./resolve-theme-DbIlzBBD.js";
+import { themes } from "@satellatickets/tokens";
+export * from "./client.js";
+//#region src/tabs/navigation.ts
+/** Hacia dónde mueve el foco una tecla: flechas, Inicio y Fin. */
+const tabDirections = [
+	"next",
+	"previous",
+	"first",
+	"last"
+];
+/** La primera pestaña habilitada: la elegida por defecto. `undefined` si no hay ninguna. */
+function firstEnabledTab(items) {
+	return items.find((item) => item.disabled !== true)?.value;
+}
 /**
-* Comportamiento de `Button` común a web y nativo: un botón deshabilitado o que
-* está cargando no dispara `onPress`. Cada vista añade su accesibilidad
-* (`disabled`/`aria-busy` en web, `accessibilityState` en nativo).
+* La pestaña a la que lleva una tecla desde la actual, saltando las deshabilitadas.
+* `next` y `previous` dan la vuelta al llegar al final. Si no hay otra a la que ir,
+* devuelve la actual.
 */
-function useButton({ disabled = false, loading = false, onPress }) {
-	const interactive = !disabled && !loading;
-	return {
-		disabled,
-		loading,
-		interactive,
-		press: useCallback(() => {
-			if (interactive) onPress?.();
-		}, [interactive, onPress])
-	};
+function getTabInDirection(items, current, direction) {
+	const enabled = items.filter((item) => item.disabled !== true).map((item) => item.value);
+	if (enabled.length === 0) return current;
+	const [first] = enabled;
+	const last = enabled[enabled.length - 1];
+	if (first === void 0 || last === void 0) return current;
+	if (direction === "first") return first;
+	if (direction === "last") return last;
+	const index = enabled.indexOf(current);
+	if (index === -1) return direction === "next" ? first : last;
+	return enabled[(index + (direction === "next" ? 1 : -1) + enabled.length) % enabled.length] ?? current;
 }
 //#endregion
-//#region src/theme/resolve-theme.ts
-function isPlainObject(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function merge(base, overrides) {
-	const result = { ...base };
-	for (const [key, value] of Object.entries(overrides)) {
-		if (value === void 0) continue;
-		const current = base[key];
-		result[key] = isPlainObject(current) && isPlainObject(value) ? merge(current, value) : value;
+//#region src/toast/store.ts
+/** Milisegundos que un toast permanece visible si no se indica otra cosa. */
+const TOAST_DEFAULT_DURATION = 5e3;
+/** Toasts visibles a la vez. Al llegar uno más, se retira el más antiguo. */
+const TOAST_MAX_VISIBLE = 3;
+/**
+* La cola de toasts de un `UIProvider` (ADR-039): alta, baja, cierre automático, pausa
+* y límite de visibles. No depende de React ni de la plataforma.
+*/
+function createToastStore() {
+	let items = [];
+	let paused = false;
+	let nextId = 0;
+	const timers = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	function emit(next) {
+		items = next;
+		for (const listener of listeners) listener();
+	}
+	function stop(id) {
+		const timer = timers.get(id);
+		if (timer?.handle !== void 0) clearTimeout(timer.handle);
+		timers.delete(id);
+	}
+	function start(id, remaining) {
+		const timer = {
+			handle: void 0,
+			startedAt: Date.now(),
+			remaining
+		};
+		if (!paused) timer.handle = setTimeout(() => dismiss(id), remaining);
+		timers.set(id, timer);
+	}
+	function dismiss(id) {
+		if (id === void 0) {
+			if (items.length === 0) return;
+			for (const item of items) stop(item.id);
+			emit([]);
+			return;
+		}
+		if (!items.some((item) => item.id === id)) return;
+		stop(id);
+		emit(items.filter((item) => item.id !== id));
+	}
+	function show(options) {
+		nextId += 1;
+		const item = {
+			id: `toast-${nextId}`,
+			tone: options.tone ?? "info",
+			title: options.title,
+			description: options.description,
+			duration: options.duration ?? 5e3,
+			action: options.action,
+			closeLabel: options.closeLabel
+		};
+		const next = [...items, item];
+		for (const old of next.splice(0, Math.max(0, next.length - 3))) stop(old.id);
+		if (item.duration > 0) start(item.id, item.duration);
+		emit(next);
+		return item.id;
+	}
+	function pause() {
+		if (paused) return;
+		paused = true;
+		const now = Date.now();
+		for (const timer of timers.values()) {
+			if (timer.handle !== void 0) clearTimeout(timer.handle);
+			timer.handle = void 0;
+			timer.remaining = Math.max(0, timer.remaining - (now - timer.startedAt));
+		}
+	}
+	function resume() {
+		if (!paused) return;
+		paused = false;
+		for (const [id, timer] of timers) start(id, timer.remaining);
 	}
-	return result;
-}
-/** Combina los overrides de una marca sobre un tema (ADR-010). Los arrays (sombras) se sustituyen enteros. */
-function mergeTheme(base, overrides) {
-	return merge(base, overrides);
-}
-const cache = /* @__PURE__ */ new Map();
-/** Tema resuelto para un esquema y una marca; memoizado para que la identidad sea estable. */
-function resolveTheme(scheme, brand) {
-	const key = `${scheme}/${brand ?? ""}`;
-	const cached = cache.get(key);
-	if (cached) return cached;
-	const base = themes[scheme];
-	const overrides = brand === void 0 ? void 0 : brands[brand]?.[scheme];
-	const resolved = overrides === void 0 ? base : mergeTheme(base, overrides);
-	cache.set(key, resolved);
-	return resolved;
-}
-function resolveColorScheme(mode, systemScheme) {
-	return mode === "system" ? systemScheme : mode;
-}
-//#endregion
-//#region src/theme/context.ts
-function createUIContextValue(mode, systemScheme, brand) {
-	const colorScheme = resolveColorScheme(mode, systemScheme);
 	return {
-		theme: resolveTheme(colorScheme, brand),
-		colorScheme,
-		mode,
-		brand
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot: () => items,
+		show,
+		dismiss,
+		pause,
+		resume
 	};
 }
-/** Sin `UIProvider` se usa el tema claro por defecto, para que los componentes funcionen aislados. */
-const UIContext = createContext(createUIContextValue("light", "light"));
-function useUIContext() {
-	return useContext(UIContext);
-}
-/** Tema resuelto (tokens con la marca aplicada). Imprescindible en las vistas nativas (ADR-008). */
-function useTheme() {
-	return useContext(UIContext).theme;
-}
-/** `'light' | 'dark'` ya resuelto, también con `theme="system"`. */
-function useColorScheme() {
-	return useContext(UIContext).colorScheme;
-}
-function useBrand() {
-	return useContext(UIContext).brand;
-}
 //#endregion
 //#region src/types/badge.ts
 /**
@@ -120,23 +165,120 @@ const buttonIconSize = {
 	lg: "md"
 };
 //#endregion
+//#region src/types/card.ts
+/**
+* Variantes de `Card` (ADR-009): `outlined` se apoya en el borde; `elevated` añade
+* sombra para separarse de lo que tiene debajo.
+*/
+const cardVariants = ["outlined", "elevated"];
+//#endregion
+//#region src/types/control.ts
+/**
+* Alturas de los controles interactivos de una línea (`Input`, `Select`). Coinciden
+* con `size.control` de los tokens y con los tamaños de `Button`, para que un campo y
+* un botón del mismo tamaño queden alineados en una fila.
+*/
+const controlSizes = [
+	"sm",
+	"md",
+	"lg"
+];
+//#endregion
+//#region src/types/divider.ts
+/** Orientación de `Divider` (ADR-009). */
+const dividerOrientations = ["horizontal", "vertical"];
+//#endregion
+//#region src/types/feedback.ts
+/**
+* Los cuatro significados de `color.feedback` en los tokens: éxito, aviso, error e
+* información. Los comparten los componentes que comunican un estado.
+*/
+const feedbackTones = [
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+function isFeedbackTone(value) {
+	return feedbackTones.includes(value);
+}
+//#endregion
 //#region src/types/icon.ts
 const iconSizes = [
 	"sm",
 	"md",
-	"lg"
+	"lg",
+	"xl"
 ];
 /** Tamaño en px/puntos de cada icono. */
 const iconSizePx = {
 	sm: 16,
 	md: 20,
-	lg: 24
+	lg: 24,
+	xl: 32
+};
+//#endregion
+//#region src/types/icon-button.ts
+/**
+* Tamaño del icono para cada tamaño de `IconButton`. Es un paso mayor que en
+* `Button`, porque aquí el icono es todo el contenido.
+*/
+const iconButtonIconSize = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
 };
 //#endregion
+//#region src/types/input.ts
+/**
+* Qué se escribe en un `Input` (ADR-009). Cada vista lo traduce a su plataforma:
+* el atributo `type` y el teclado en web, y el teclado, las mayúsculas automáticas
+* y el autocompletado en nativo.
+*/
+const inputTypes = [
+	"text",
+	"email",
+	"password",
+	"search",
+	"tel",
+	"url",
+	"number"
+];
+/** Tamaño de los iconos de un `Input` para cada tamaño de campo. */
+const inputIconSize = {
+	sm: "sm",
+	md: "md",
+	lg: "md"
+};
+//#endregion
+//#region src/types/link.ts
+/**
+* Cuándo se subraya un `Link` (ADR-009). `always` es lo correcto dentro de un párrafo:
+* el color solo no basta para distinguir un enlace. `hover` lo subraya al pasar el
+* puntero o enfocarlo en web, y mientras se pulsa en nativo.
+*/
+const linkUnderlines = ["always", "hover"];
+//#endregion
+//#region src/types/modal.ts
+/** Las dos presentaciones de un diálogo. */
+const modalPresentations = ["dialog", "sheet"];
+//#endregion
+//#region src/types/skeleton.ts
+/**
+* Formas de `Skeleton` (ADR-009): `text` ocupa el hueco de una línea de `Text`,
+* `rectangle` el de una imagen o un control, y `circle` el de un avatar.
+*/
+const skeletonShapes = [
+	"text",
+	"rectangle",
+	"circle"
+];
+//#endregion
 //#region src/types/spinner.ts
 /**
 * `Spinner` comparte la escala de `Icon`: así puede ocupar el sitio de un icono
 * (por ejemplo, dentro de un botón que carga) sin mover el resto del contenido.
+* `xl` es para la carga de una página o de una sección entera.
 */
 const spinnerSizes = iconSizes;
 /** Tamaño en px/puntos de cada spinner. */
@@ -246,4 +388,4 @@ const themeModes = [
 	"system"
 ];
 //#endregion
-export { UIContext, backgroundTokens, badgeVariants, borderColorTokens, buttonIconSize, buttonVariants, createUIContextValue, iconSizePx, iconSizes, mergeTheme, radiusTokens, resolveColorScheme, resolveTheme, shadowTokens, spaceTokens, spinnerSizePx, spinnerSizes, stackAligns, stackDirections, stackJustifies, textAligns, textColors, textVariantStyles, textVariants, themeModes, useBrand, useButton, useColorScheme, useTheme, useUIContext };
+export { TOAST_DEFAULT_DURATION, TOAST_MAX_VISIBLE, backgroundTokens, badgeVariants, borderColorTokens, buttonIconSize, buttonVariants, cardVariants, controlSizes, createToastStore, dividerOrientations, feedbackTones, firstEnabledTab, getTabInDirection, iconButtonIconSize, iconSizePx, iconSizes, inputIconSize, inputTypes, isFeedbackTone, linkUnderlines, mergeTheme, modalPresentations, radiusTokens, resolveColorScheme, resolveTheme, shadowTokens, skeletonShapes, spaceTokens, spinnerSizePx, spinnerSizes, stackAligns, stackDirections, stackJustifies, tabDirections, textAligns, textColors, textVariantStyles, textVariants, themeModes };

package/dist/resolve-theme-DbIlzBBD.js

@@ -0,0 +1,36 @@
+
+import { brands, themes } from "@satellatickets/tokens";
+//#region src/theme/resolve-theme.ts
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function merge(base, overrides) {
+	const result = { ...base };
+	for (const [key, value] of Object.entries(overrides)) {
+		if (value === void 0) continue;
+		const current = base[key];
+		result[key] = isPlainObject(current) && isPlainObject(value) ? merge(current, value) : value;
+	}
+	return result;
+}
+/** Combina los overrides de una marca sobre un tema (ADR-010). Los arrays (sombras) se sustituyen enteros. */
+function mergeTheme(base, overrides) {
+	return merge(base, overrides);
+}
+const cache = /* @__PURE__ */ new Map();
+/** Tema resuelto para un esquema y una marca; memoizado para que la identidad sea estable. */
+function resolveTheme(scheme, brand) {
+	const key = `${scheme}/${brand ?? ""}`;
+	const cached = cache.get(key);
+	if (cached) return cached;
+	const base = themes[scheme];
+	const overrides = brand === void 0 ? void 0 : brands[brand]?.[scheme];
+	const resolved = overrides === void 0 ? base : mergeTheme(base, overrides);
+	cache.set(key, resolved);
+	return resolved;
+}
+function resolveColorScheme(mode, systemScheme) {
+	return mode === "system" ? systemScheme : mode;
+}
+//#endregion
+export { resolveColorScheme as n, resolveTheme as r, mergeTheme as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satellatickets/core",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Lógica headless de satella-ui: contratos de props, constantes de variantes, contexto de tema y hooks compartidos por React y React Native",
   "license": "MIT",
   "repository": {