@satellatickets/core 0.0.0 → 0.2.0

package/README.md

@@ -19,12 +19,12 @@ theme.color.action.primary;
 
 ## Qué contiene
 
-| Qué                     | Ejemplos                                                                        |
-| ----------------------- | ------------------------------------------------------------------------------- |
-| Contratos de props      | `ButtonProps`, `BadgeProps`, `BoxProps`, `StackProps`, `TextProps`, `IconProps` |
-| Constantes de variantes | `buttonVariants`, `badgeVariants`, `textVariants`, `iconSizes`                  |
-| Tema                    | `UIContext`, `useTheme`, `useColorScheme`, `useBrand`, `resolveTheme`           |
-| Hooks headless          | `useButton`                                                                     |
+| Qué                     | Ejemplos                                                                          |
+| ----------------------- | --------------------------------------------------------------------------------- |
+| Contratos de props      | `ButtonProps`, `BadgeProps`, `BoxProps`, `StackProps`, `TextProps`, `IconProps`   |
+| Constantes de variantes | `buttonVariants`, `badgeVariants`, `textVariants`, `iconSizes`                    |
+| Tema                    | `UIContext`, `useTheme`, `useColorScheme`, `useBrand`, `resolveTheme`             |
+| Hooks headless          | `useButton`, `useLink`, `useControllableState`, `useFormFieldControl`, `useToast` |
 
 Las variantes se exportan como arrays `as const`, además de como tipos, para poder recorrerlas: en historias, en selectores o en tests.
 

package/dist/index.d.ts

@@ -1,5 +1,62 @@
 import { ReactNode } from "react";
 import { BrandName, Theme, ThemeName, ThemeOverrides } from "@satellatickets/tokens";
+//#region src/form-field/context.d.ts
+/** Lo que `FormField` publica para el control que envuelve (ADR-037). */
+export interface FormFieldValue {
+  /** `id` del control. `FormField` lo usa en el `htmlFor` de su etiqueta (web). */
+  controlId: string;
+  /** `id` del texto de ayuda, si lo hay (web). */
+  helpId: string | undefined;
+  /** `id` del mensaje de error, si lo hay (web). */
+  errorId: string | undefined;
+  label: string;
+  help: string | undefined;
+  error: string | undefined;
+  disabled: boolean;
+  required: boolean;
+}
+export interface FormFieldValueOptions {
+  label: string;
+  help?: string | undefined;
+  error?: string | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+}
+/** Construye el valor del contexto a partir de un id base (el de `useId()`). */
+export declare function createFormFieldValue(baseId: string, { label, help, error, disabled, required }: FormFieldValueOptions): FormFieldValue;
+/** `null` fuera de un `FormField`. */
+export declare const FormFieldContext: import("react").Context<FormFieldValue | null>;
+/** Las props propias de un control que se combinan con las de su `FormField`. */
+export interface FormFieldControlOptions {
+  id?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  accessibilityLabel?: string | undefined;
+}
+/** Lo que un control necesita para enlazarse con su `FormField`, en web y en nativo. */
+export interface FormFieldControl {
+  /** `id` del control (web): el propio o el que espera la etiqueta del campo. */
+  id: string | undefined;
+  /** Ids de la ayuda y el error para `aria-describedby` (web). */
+  describedBy: string | undefined;
+  /** Nombre accesible (nativo): el propio o la etiqueta del campo. */
+  accessibilityLabel: string | undefined;
+  /** El error y la ayuda, uno tras otro, para `accessibilityHint` (nativo). */
+  accessibilityHint: string | undefined;
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+/**
+ * Combina las props de un control con las de su `FormField`. Las del control
+ * mandan en `id` y nombre accesible; `invalid`, `disabled` y `required` se suman:
+ * basta con que lo diga uno de los dos.
+ */
+export declare function resolveFormFieldControl(field: FormFieldValue | null, { id, invalid, disabled, required, accessibilityLabel }?: FormFieldControlOptions): FormFieldControl;
+/** Enlaza un control con el `FormField` que lo contiene, si lo hay. */
+export declare function useFormFieldControl(options?: FormFieldControlOptions): FormFieldControl;
+//#endregion
 //#region src/hooks/use-button.d.ts
 export interface UseButtonOptions {
   disabled?: boolean | undefined;
@@ -21,6 +78,127 @@ export interface UseButtonResult {
  */
 export declare function useButton({ disabled, loading, onPress }: UseButtonOptions): UseButtonResult;
 //#endregion
+//#region src/hooks/use-controllable-state.d.ts
+export interface UseControllableStateOptions<T> {
+  /** Valor controlado por la app. Si existe, manda sobre el estado interno. */
+  value?: T | undefined;
+  /** Valor inicial cuando el componente guarda su propio estado. */
+  defaultValue: T;
+  /** Se llama con el valor nuevo cuando cambia, en los dos modos. */
+  onChange?: ((value: T) => void) | undefined;
+}
+/**
+ * Estado controlado o no, a elección de la app (ADR-037). Con `value`, el componente
+ * solo avisa del cambio y espera a que la app le pase el valor nuevo; sin él, guarda
+ * el estado a partir de `defaultValue`. No avisa si el valor no cambia.
+ */
+export declare function useControllableState<T>({ value, defaultValue, onChange }: UseControllableStateOptions<T>): [T, (next: T) => void];
+//#endregion
+//#region src/types/text.d.ts
+export declare const textVariants: readonly ["hero", "display", "title", "heading", "subheading", "body", "bodySmall", "label", "caption", "code"];
+export type TextVariant = (typeof textVariants)[number];
+export type TextColorToken = keyof Theme['color']['text'];
+export declare const textColors: TextColorToken[];
+export declare const textAligns: readonly ["left", "center", "right"];
+export type TextAlign = (typeof textAligns)[number];
+/** Tokens que componen una variante tipográfica; ambas vistas los leen del tema. */
+export interface TextVariantStyle {
+  family: keyof Theme['font']['family'];
+  /** Tamaño; `font.lineHeight` comparte las mismas claves (lo comprueba el typecheck de las vistas). */
+  size: keyof Theme['font']['size'];
+  weight: keyof Theme['font']['weight'];
+  uppercase?: boolean;
+  /** Espaciado entre letras en px. */
+  letterSpacing?: number;
+  /** Nivel de encabezado semántico (h1–h4) si la variante es un título. */
+  headingLevel?: 1 | 2 | 3 | 4;
+}
+/** Escala tipográfica de Satella: Unbounded para titulares, Hanken Grotesk para texto, IBM Plex Mono para etiquetas. */
+export declare const textVariantStyles: Readonly<Record<TextVariant, TextVariantStyle>>;
+export interface TextProps {
+  variant?: TextVariant | undefined;
+  color?: TextColorToken | undefined;
+  align?: TextAlign | undefined;
+  /** Una sola línea con puntos suspensivos. */
+  truncate?: boolean | undefined;
+  testID?: string | undefined;
+  children?: ReactNode;
+}
+//#endregion
+//#region src/types/link.d.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.
+ */
+export declare const linkUnderlines: readonly ["always", "hover"];
+export type LinkUnderline = (typeof linkUnderlines)[number];
+/** Lo que recibe `onPress` de un `Link`: permite cancelar la navegación por defecto. */
+export interface LinkPressEvent {
+  /** Cancela la navegación por defecto, por ejemplo para hacerla con el router de la app. */
+  preventDefault: () => void;
+  readonly defaultPrevented: boolean;
+}
+export interface LinkProps {
+  /** Destino. En web es el `href` del `<a>`; en nativo se abre con `Linking`. */
+  href: string;
+  /**
+   * Tipografía, con las mismas variantes que `Text`. Sin ella hereda la del texto
+   * que lo contiene; fuera de un `Text`, usa `body`.
+   */
+  variant?: TextVariant | undefined;
+  /** Color del texto (por defecto `link`). */
+  color?: TextColorToken | undefined;
+  underline?: LinkUnderline | undefined;
+  /**
+   * Se llama antes de navegar. Con `event.preventDefault()` la librería no navega y
+   * la app decide qué hacer. En web no se llama si el clic lleva un modificador
+   * (Ctrl, Cmd, Mayús, Alt) o no es del botón principal: ahí manda el navegador.
+   */
+  onPress?: ((event: LinkPressEvent) => void) | undefined;
+  /** Nombre accesible cuando el texto visible no basta para describir el destino. */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+  children: ReactNode;
+}
+//#endregion
+//#region src/hooks/use-link.d.ts
+export interface UseLinkOptions {
+  onPress?: ((event: LinkPressEvent) => void) | undefined;
+}
+export interface UseLinkResult {
+  /**
+   * Llama a `onPress` y devuelve `true` si la navegación por defecto debe seguir,
+   * es decir, si nadie llamó a `preventDefault()`.
+   */
+  press: () => boolean;
+}
+/**
+ * Comportamiento de `Link` común a web y nativo: `onPress` se llama antes de navegar
+ * y puede cancelar la navegación por defecto. Cada vista aporta esa navegación
+ * (el `<a>` en web, `Linking` en nativo).
+ */
+export declare function useLink({ onPress }: UseLinkOptions): UseLinkResult;
+//#endregion
+//#region src/tabs/navigation.d.ts
+/** Lo mínimo que hace falta saber de una pestaña para moverse entre ellas. */
+export interface NavigableTab {
+  value: string;
+  disabled?: boolean | undefined;
+}
+/** Hacia dónde mueve el foco una tecla: flechas, Inicio y Fin. */
+export declare const tabDirections: readonly ["next", "previous", "first", "last"];
+export type TabDirection = (typeof tabDirections)[number];
+/** La primera pestaña habilitada: la elegida por defecto. `undefined` si no hay ninguna. */
+export declare function firstEnabledTab(items: readonly NavigableTab[]): string | undefined;
+/**
+ * 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.
+ */
+export declare function getTabInDirection(items: readonly NavigableTab[], current: string, direction: TabDirection): string;
+//#endregion
 //#region src/types/ui-provider.d.ts
 /** Modo de tema que acepta `UIProvider` (ADR-010). */
 export declare const themeModes: readonly ["light", "dark", "system"];
@@ -59,6 +237,121 @@ export declare function mergeTheme(base: Theme, overrides: ThemeOverrides): Them
 export declare function resolveTheme(scheme: ThemeName, brand?: BrandName): Theme;
 export declare function resolveColorScheme(mode: ThemeMode, systemScheme: ColorScheme): ColorScheme;
 //#endregion
+//#region src/types/feedback.d.ts
+/**
+ * Los cuatro significados de `color.feedback` en los tokens: éxito, aviso, error e
+ * información. Los comparten los componentes que comunican un estado.
+ */
+export declare const feedbackTones: readonly ["success", "warning", "danger", "info"];
+export type FeedbackTone = (typeof feedbackTones)[number];
+export declare function isFeedbackTone(value: string): value is FeedbackTone;
+//#endregion
+//#region src/types/toast.d.ts
+/** Acción opcional de un toast, por ejemplo "Deshacer". */
+export interface ToastAction {
+  label: string;
+  onPress: () => void;
+}
+/** Lo que recibe `show()` de `useToast` (ADR-039). */
+export interface ToastOptions {
+  /** Qué comunica (por defecto `info`). Fija el icono y la urgencia con que se anuncia. */
+  tone?: FeedbackTone | undefined;
+  /** El mensaje, en una línea. */
+  title: string;
+  /** Detalle opcional. */
+  description?: string | undefined;
+  /**
+   * Milisegundos hasta que se cierra solo (por defecto 5000). Con `0` no se cierra
+   * solo: necesita `closeLabel`, una `action` o una llamada a `dismiss`.
+   */
+  duration?: number | undefined;
+  /** Botón de acción. Al pulsarlo se llama a `onPress` y el toast se cierra. */
+  action?: ToastAction | undefined;
+  /**
+   * Si existe, el toast muestra un botón de cierre con este nombre accesible
+   * ("Cerrar aviso"). La librería no trae textos propios.
+   */
+  closeLabel?: string | undefined;
+}
+/** Un toast ya en la cola: sus opciones resueltas y su identificador. */
+export interface ToastItem {
+  id: string;
+  tone: FeedbackTone;
+  title: string;
+  description: string | undefined;
+  duration: number;
+  action: ToastAction | undefined;
+  closeLabel: string | undefined;
+}
+/** Lo que devuelve `useToast`. */
+export interface ToastApi {
+  /** Muestra un toast y devuelve su `id`. */
+  show: (options: ToastOptions) => string;
+  /** Cierra el toast con ese `id`; sin `id`, los cierra todos. */
+  dismiss: (id?: string) => void;
+}
+//#endregion
+//#region src/toast/store.d.ts
+/** Milisegundos que un toast permanece visible si no se indica otra cosa. */
+export declare const TOAST_DEFAULT_DURATION = 5000;
+/** Toasts visibles a la vez. Al llegar uno más, se retira el más antiguo. */
+export declare const TOAST_MAX_VISIBLE = 3;
+interface ToastStore extends ToastApi {
+  /** Para `useSyncExternalStore`: avisa de cada cambio y devuelve cómo dejar de escuchar. */
+  subscribe: (listener: () => void) => () => void;
+  /** Los toasts visibles, del más antiguo al más reciente. Cambia de identidad con cada cambio. */
+  getSnapshot: () => readonly ToastItem[];
+  /** Detiene el cierre automático, por ejemplo mientras el puntero está sobre los toasts. */
+  pause: () => void;
+  /** Reanuda el cierre automático con el tiempo que le quedaba a cada toast. */
+  resume: () => void;
+}
+/**
+ * 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.
+ */
+export declare function createToastStore(): ToastStore;
+//#endregion
+//#region src/toast/context.d.ts
+/** La cola de toasts del `UIProvider` más cercano; `null` fuera de uno. */
+export declare const ToastContext: import("react").Context<ToastStore | null>;
+/**
+ * Muestra y cierra toasts (ADR-039). Necesita un `UIProvider` por encima: es él quien
+ * guarda la cola y los pinta.
+ */
+export declare function useToast(): ToastApi;
+//#endregion
+//#region src/types/alert.d.ts
+interface AlertBaseProps {
+  /** Qué comunica (por defecto `info`). Fija el color y el icono. */
+  tone?: FeedbackTone | undefined;
+  /** Resumen en una línea. */
+  title?: string | undefined;
+  /** Explicación o siguiente paso. */
+  children?: ReactNode;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+interface AlertStaticProps extends AlertBaseProps {
+  onClose?: undefined;
+  closeLabel?: undefined;
+}
+interface AlertClosableProps extends AlertBaseProps {
+  /** Si existe, el aviso muestra un botón para cerrarlo y la llama al pulsarlo. */
+  onClose: () => void;
+  /**
+   * Nombre accesible del botón de cierre ("Cerrar aviso"). Es obligatorio con
+   * `onClose`: la librería no trae textos propios.
+   */
+  closeLabel: string;
+}
+/**
+ * Contrato de `Alert`: un mensaje dentro de la página que no desaparece solo. `danger`
+ * y `warning` se anuncian de inmediato a los lectores de pantalla; `success` e `info`,
+ * cuando terminan lo que estén leyendo.
+ */
+export type AlertProps = AlertStaticProps | AlertClosableProps;
+//#endregion
 //#region src/types/badge.d.ts
 /**
  * Variantes de `Badge` (ADR-009): una por cada color de `color.feedback`. Las historias
@@ -146,46 +439,123 @@ export interface ButtonProps<IconName extends string = string> {
   children: ReactNode;
 }
 //#endregion
-//#region src/types/text.d.ts
-export declare const textVariants: readonly ["hero", "display", "title", "heading", "subheading", "body", "bodySmall", "label", "caption", "code"];
-export type TextVariant = (typeof textVariants)[number];
-export type TextColorToken = keyof Theme['color']['text'];
-export declare const textColors: TextColorToken[];
-export declare const textAligns: readonly ["left", "center", "right"];
-export type TextAlign = (typeof textAligns)[number];
-/** Tokens que componen una variante tipográfica; ambas vistas los leen del tema. */
-export interface TextVariantStyle {
-  family: keyof Theme['font']['family'];
-  /** Tamaño; `font.lineHeight` comparte las mismas claves (lo comprueba el typecheck de las vistas). */
-  size: keyof Theme['font']['size'];
-  weight: keyof Theme['font']['weight'];
-  uppercase?: boolean;
-  /** Espaciado entre letras en px. */
-  letterSpacing?: number;
-  /** Nivel de encabezado semántico (h1–h4) si la variante es un título. */
-  headingLevel?: 1 | 2 | 3 | 4;
+//#region src/types/card.d.ts
+/**
+ * Variantes de `Card` (ADR-009): `outlined` se apoya en el borde; `elevated` añade
+ * sombra para separarse de lo que tiene debajo.
+ */
+export declare const cardVariants: readonly ["outlined", "elevated"];
+export type CardVariant = (typeof cardVariants)[number];
+/**
+ * Contrato de `Card`: una superficie que agrupa contenido relacionado. Con `onPress`
+ * toda la tarjeta es pulsable; en ese caso no debe contener otros controles.
+ */
+export interface CardProps {
+  variant?: CardVariant | undefined;
+  /** Relleno interior (por defecto 4). Con `0`, el contenido llega hasta el borde, por ejemplo una imagen. */
+  padding?: SpaceToken | undefined;
+  /** Hace pulsable toda la tarjeta, con ratón, teclado o toque. */
+  onPress?: (() => void) | undefined;
+  /**
+   * Nombre accesible de una tarjeta pulsable. Sin él, es su contenido, que suele ser lo
+   * correcto. Si se indica, tiene que incluir el texto visible: quien navega por voz
+   * dice lo que ve.
+   */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+  children?: ReactNode;
 }
-/** Escala tipográfica de Satella: Unbounded para titulares, Hanken Grotesk para texto, IBM Plex Mono para etiquetas. */
-export declare const textVariantStyles: Readonly<Record<TextVariant, TextVariantStyle>>;
-export interface TextProps {
-  variant?: TextVariant | undefined;
-  color?: TextColorToken | undefined;
-  align?: TextAlign | undefined;
-  /** Una sola línea con puntos suspensivos. */
-  truncate?: boolean | undefined;
+//#endregion
+//#region src/types/checkbox.d.ts
+/** Contrato de `Checkbox`: una opción que se marca o no, con su etiqueta como `children`. */
+export interface CheckboxProps {
+  /** Estado controlado por la app. Sin él, guarda su propio estado (ADR-037). */
+  checked?: boolean | undefined;
+  /** Estado inicial cuando guarda su propio estado. */
+  defaultChecked?: boolean | undefined;
+  /**
+   * Ni marcado ni sin marcar: representa a un grupo donde solo algunas opciones lo
+   * están. Es solo visual; al pulsarlo pasa a marcado o sin marcar según `checked`.
+   */
+  indeterminate?: boolean | undefined;
+  /** Se llama con el estado nuevo al pulsarlo. */
+  onCheckedChange?: ((checked: boolean) => void) | undefined;
+  /** No se puede pulsar ni enfocar. */
+  disabled?: boolean | undefined;
+  /** El estado no es válido, por ejemplo unas condiciones sin aceptar. */
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  /** Nombre accesible cuando no hay etiqueta visible. */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
   testID?: string | undefined;
+  /** Etiqueta. Pulsarla también marca la casilla. */
   children?: ReactNode;
 }
 //#endregion
+//#region src/types/control.d.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.
+ */
+export declare const controlSizes: readonly ["sm", "md", "lg"];
+export type ControlSize = (typeof controlSizes)[number];
+//#endregion
+//#region src/types/divider.d.ts
+/** Orientación de `Divider` (ADR-009). */
+export declare const dividerOrientations: readonly ["horizontal", "vertical"];
+export type DividerOrientation = (typeof dividerOrientations)[number];
+/** Contrato de `Divider`: una línea fina que separa dos bloques de contenido. */
+export interface DividerProps {
+  /**
+   * `horizontal` (por defecto) separa bloques apilados. `vertical` separa elementos de
+   * una fila y ocupa su altura.
+   */
+  orientation?: DividerOrientation | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
+//#region src/types/form-field.d.ts
+/**
+ * Contrato de `FormField`: la etiqueta, la ayuda y el error de un control, enlazados
+ * con él para los lectores de pantalla (ADR-037). Envuelve un `Input`, un `TextArea`
+ * o un `Select`.
+ */
+export interface FormFieldProps {
+  /** Etiqueta visible. Es texto porque en nativo hace de nombre accesible del control. */
+  label: string;
+  /** Ayuda bajo el control: formato esperado, para qué se usa el dato. */
+  help?: string | undefined;
+  /** Mensaje de error. Si existe, el control se marca como inválido. */
+  error?: string | undefined;
+  /** Marca la etiqueta como obligatoria y lo comunica al control. */
+  required?: boolean | undefined;
+  /** Deshabilita el control. */
+  disabled?: boolean | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+  /** El control. */
+  children: ReactNode;
+}
+//#endregion
 //#region src/types/icon.d.ts
-export declare const iconSizes: readonly ["sm", "md", "lg"];
+export declare const iconSizes: readonly ["sm", "md", "lg", "xl"];
 export type IconSize = (typeof iconSizes)[number];
 /** Tamaño en px/puntos de cada icono. */
 export declare const iconSizePx: {
   sm: number;
   md: number;
   lg: number;
+  xl: number;
 };
+/**
+ * Color de un icono: un color de texto o el de un estado de feedback (`success`,
+ * `warning`, `danger`, `info`), que usa el token `color.feedback.<estado>.icon`.
+ */
+export type IconColor = TextColorToken | FeedbackTone;
 /**
  * Contrato de `Icon`. El conjunto de nombres lo aporta `@satellatickets/icons`,
  * que está fuera de `core` (ADR-002), por eso el nombre es un parámetro de tipo.
@@ -193,24 +563,214 @@ export declare const iconSizePx: {
 export interface IconProps<Name extends string = string> {
   name: Name;
   size?: IconSize | undefined;
-  color?: TextColorToken | undefined;
+  color?: IconColor | undefined;
   /** Texto alternativo. Sin él, el icono es decorativo y se oculta a los lectores de pantalla. */
   label?: string | undefined;
   testID?: string | undefined;
 }
 //#endregion
+//#region src/types/icon-button.d.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.
+ */
+export declare const iconButtonIconSize: {
+  readonly sm: "sm";
+  readonly md: "md";
+  readonly lg: "lg";
+};
+/**
+ * Contrato de `IconButton`: un `Button` cuadrado cuyo único contenido es un icono.
+ * Comparte variantes y tamaños con `Button` (`buttonVariants`). El conjunto de iconos
+ * lo aporta `@satellatickets/icons`, que está fuera de `core` (ADR-002), por eso el
+ * nombre es un parámetro de tipo.
+ */
+export interface IconButtonProps<IconName extends string = string> {
+  icon: IconName;
+  /**
+   * Nombre accesible. Es obligatorio porque no hay texto visible: describe la
+   * acción ("Cerrar"), no el dibujo ("Aspa").
+   */
+  label: string;
+  /** Jerarquía visual de la acción (por defecto `ghost`). */
+  variant?: ButtonVariant | undefined;
+  size?: ButtonSize | undefined;
+  /** No se puede pulsar ni enfocar. */
+  disabled?: boolean | undefined;
+  /** Acción en curso: sustituye el icono por un spinner y no dispara `onPress`, pero conserva el foco. */
+  loading?: boolean | undefined;
+  /** Se pulsa con ratón, teclado o toque. Nombre neutral: la vista web lo mapea a `click`. */
+  onPress?: (() => void) | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
+//#region src/types/input.d.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.
+ */
+export declare const inputTypes: readonly ["text", "email", "password", "search", "tel", "url", "number"];
+export type InputType = (typeof inputTypes)[number];
+/** Tamaño de los iconos de un `Input` para cada tamaño de campo. */
+export declare const inputIconSize: {
+  readonly sm: "sm";
+  readonly md: "md";
+  readonly lg: "md";
+};
+/**
+ * Contrato de `Input`: un campo de texto de una línea. El conjunto de iconos lo aporta
+ * `@satellatickets/icons`, que está fuera de `core` (ADR-002), por eso el nombre es
+ * un parámetro de tipo.
+ */
+export interface InputProps<IconName extends string = string> {
+  /** Texto controlado por la app. Sin él, el campo guarda su propio estado (ADR-037). */
+  value?: string | undefined;
+  /** Texto inicial cuando el campo guarda su propio estado. */
+  defaultValue?: string | undefined;
+  /** Se llama con el texto nuevo en cada cambio. */
+  onChangeText?: ((text: string) => void) | undefined;
+  placeholder?: string | undefined;
+  /** Qué se escribe (por defecto `text`). */
+  type?: InputType | undefined;
+  size?: ControlSize | undefined;
+  /** No se puede editar ni enfocar. */
+  disabled?: boolean | undefined;
+  /** Se puede enfocar y copiar, pero no editar. */
+  readOnly?: boolean | undefined;
+  /** El valor no es válido. Dentro de un `FormField` con `error` se activa solo. */
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  /** Icono decorativo delante del texto. */
+  iconStart?: IconName | undefined;
+  /** Icono decorativo detrás del texto. */
+  iconEnd?: IconName | undefined;
+  maxLength?: number | undefined;
+  onFocus?: (() => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  /** Se pulsa Intro, o la tecla de envío del teclado en pantalla. */
+  onSubmit?: (() => void) | undefined;
+  /** Nombre accesible cuando no hay un `FormField` que lo etiquete. */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
+//#region src/types/modal.d.ts
+/**
+ * Contrato de `Modal` y de `Sheet` (ADR-040): un diálogo que interrumpe lo que hay
+ * debajo. `Modal` se centra; `Sheet` se ancla al borde inferior.
+ */
+export interface ModalProps {
+  /** Si está abierto. Lo decide la app. */
+  open: boolean;
+  /**
+   * El diálogo pide cerrarse: Escape, pulsar fuera, el botón atrás de Android o su
+   * botón de cierre. La app responde poniendo `open` a `false`.
+   */
+  onClose: () => void;
+  /** Título visible. Es también su nombre accesible. */
+  title: string;
+  /** Texto bajo el título. Los lectores de pantalla lo leen al abrirse. */
+  description?: string | undefined;
+  /**
+   * Si existe, muestra un botón de cierre con este nombre accesible ("Cerrar"). La
+   * librería no trae textos propios.
+   */
+  closeLabel?: string | undefined;
+  /**
+   * Con `false`, ni Escape, ni pulsar fuera, ni el botón atrás lo cierran: es para una
+   * pregunta que exige respuesta. Por defecto `true`.
+   */
+  dismissible?: boolean | undefined;
+  /** Acciones al pie, normalmente botones. */
+  footer?: ReactNode;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+  children?: ReactNode;
+}
+/** `Sheet` tiene el mismo contrato que `Modal`: solo cambia dónde se coloca. */
+export type SheetProps = ModalProps;
+/** Las dos presentaciones de un diálogo. */
+export declare const modalPresentations: readonly ["dialog", "sheet"];
+export type ModalPresentation = (typeof modalPresentations)[number];
+//#endregion
+//#region src/types/select.d.ts
+/** Una opción de `Select`. */
+export interface SelectOption {
+  /** Lo que recibe `onValueChange`. No puede ser una cadena vacía: eso es "sin elegir". */
+  value: string;
+  /** Lo que se muestra. */
+  label: string;
+  disabled?: boolean | undefined;
+}
+/** Contrato de `Select`: elegir una opción de una lista (ADR-038). */
+export interface SelectProps {
+  options: readonly SelectOption[];
+  /** Opción elegida, controlada por la app. Sin ella, guarda su propio estado (ADR-037). */
+  value?: string | undefined;
+  /** Opción inicial cuando guarda su propio estado. */
+  defaultValue?: string | undefined;
+  /** Se llama con el `value` de la opción elegida. */
+  onValueChange?: ((value: string) => void) | undefined;
+  /** Texto que se muestra mientras no hay ninguna opción elegida. */
+  placeholder?: string | undefined;
+  size?: ControlSize | undefined;
+  /** No se puede abrir ni enfocar. */
+  disabled?: boolean | undefined;
+  /** El valor no es válido. Dentro de un `FormField` con `error` se activa solo. */
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  /** Nombre accesible cuando no hay un `FormField` que lo etiquete. */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
+//#region src/types/skeleton.d.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.
+ */
+export declare const skeletonShapes: readonly ["text", "rectangle", "circle"];
+export type SkeletonShape = (typeof skeletonShapes)[number];
+/**
+ * Contrato de `Skeleton`: el hueco de un contenido que todavía se está cargando. Es
+ * decorativo; que la zona está cargando lo comunica quien lo contiene.
+ */
+export interface SkeletonProps {
+  /** Forma (por defecto `text`). */
+  shape?: SkeletonShape | undefined;
+  /**
+   * Ancho, en puntos o como porcentaje del contenedor (`'60%'`). Por defecto ocupa
+   * todo el ancho; en `circle`, mide lo mismo que de alto.
+   */
+  width?: number | `${number}%` | undefined;
+  /** Alto en puntos. En `text` no se usa: lo fija `variant`. */
+  height?: number | undefined;
+  /** Con `text`: la variante de `Text` cuyo hueco ocupa (por defecto `body`). */
+  variant?: TextVariant | undefined;
+  /** Con `text`: número de líneas (por defecto 1). Si hay varias, la última es más corta. */
+  lines?: number | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
 //#region src/types/spinner.d.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.
  */
-export declare const spinnerSizes: readonly ["sm", "md", "lg"];
+export declare const spinnerSizes: readonly ["sm", "md", "lg", "xl"];
 export type SpinnerSize = IconSize;
 /** Tamaño en px/puntos de cada spinner. */
 export declare const spinnerSizePx: {
   sm: number;
   md: number;
   lg: number;
+  xl: number;
 };
 export interface SpinnerProps {
   size?: SpinnerSize | undefined;
@@ -239,4 +799,89 @@ export interface StackProps extends BoxProps {
   wrap?: boolean | undefined;
 }
 //#endregion
-export type { UIContextValue };
+//#region src/types/switch.d.ts
+/**
+ * Contrato de `Switch`: un ajuste que se activa o desactiva con efecto inmediato.
+ * Para una opción que se confirma al enviar un formulario, usa `Checkbox`.
+ */
+export interface SwitchProps {
+  /** Estado controlado por la app. Sin él, guarda su propio estado (ADR-037). */
+  checked?: boolean | undefined;
+  /** Estado inicial cuando guarda su propio estado. */
+  defaultChecked?: boolean | undefined;
+  /** Se llama con el estado nuevo al pulsarlo. */
+  onCheckedChange?: ((checked: boolean) => void) | undefined;
+  /** No se puede pulsar ni enfocar. */
+  disabled?: boolean | undefined;
+  /** Nombre accesible cuando no hay etiqueta visible. */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+  /** Etiqueta. Pulsarla también cambia el interruptor. */
+  children?: ReactNode;
+}
+//#endregion
+//#region src/types/tabs.d.ts
+/** Una pestaña de `Tabs`. */
+export interface TabItem<IconName extends string = string> {
+  /** Lo que recibe `onValueChange`. */
+  value: string;
+  /** Texto de la pestaña. */
+  label: string;
+  /** Icono decorativo delante del texto. */
+  icon?: IconName | undefined;
+  disabled?: boolean | undefined;
+  /**
+   * Contenido de su panel. Sin él, `Tabs` solo pinta las pestañas y la app decide qué
+   * mostrar con `value`, por ejemplo para filtrar una lista.
+   */
+  content?: ReactNode;
+}
+/**
+ * Contrato de `Tabs`: varias vistas del mismo nivel entre las que se cambia sin salir de
+ * la página. El conjunto de iconos lo aporta `@satellatickets/icons`, que está fuera de
+ * `core` (ADR-002), por eso el nombre es un parámetro de tipo.
+ */
+export interface TabsProps<IconName extends string = string> {
+  items: readonly TabItem<IconName>[];
+  /** Pestaña elegida, controlada por la app. Sin ella, guarda su propio estado (ADR-037). */
+  value?: string | undefined;
+  /** Pestaña inicial cuando guarda su propio estado. Por defecto, la primera habilitada. */
+  defaultValue?: string | undefined;
+  /** Se llama con el `value` de la pestaña elegida. */
+  onValueChange?: ((value: string) => void) | undefined;
+  /** Nombre accesible del grupo de pestañas ("Mis entradas"). */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
+//#region src/types/text-area.d.ts
+/** Contrato de `TextArea`: un campo de texto de varias líneas. */
+export interface TextAreaProps {
+  /** Texto controlado por la app. Sin él, el campo guarda su propio estado (ADR-037). */
+  value?: string | undefined;
+  /** Texto inicial cuando el campo guarda su propio estado. */
+  defaultValue?: string | undefined;
+  /** Se llama con el texto nuevo en cada cambio. */
+  onChangeText?: ((text: string) => void) | undefined;
+  placeholder?: string | undefined;
+  /** Líneas visibles sin desplazarse (por defecto 3). Fija la altura mínima. */
+  rows?: number | undefined;
+  /** No se puede editar ni enfocar. */
+  disabled?: boolean | undefined;
+  /** Se puede enfocar y copiar, pero no editar. */
+  readOnly?: boolean | undefined;
+  /** El valor no es válido. Dentro de un `FormField` con `error` se activa solo. */
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  maxLength?: number | undefined;
+  onFocus?: (() => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  /** Nombre accesible cuando no hay un `FormField` que lo etiquete. */
+  accessibilityLabel?: string | undefined;
+  /** `data-testid` en web, `testID` en nativo. */
+  testID?: string | undefined;
+}
+//#endregion
+export type { ToastStore, UIContextValue };

package/dist/index.js

@@ -1,5 +1,59 @@
-import { createContext, useCallback, useContext } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 import { brands, themes } from "@satellatickets/tokens";
+//#region src/form-field/context.ts
+/** Un texto vacío cuenta como ausente: `error={errores.email}` suele llegar así. */
+function present(text) {
+	return text === void 0 || text === "" ? void 0 : text;
+}
+/** Construye el valor del contexto a partir de un id base (el de `useId()`). */
+function createFormFieldValue(baseId, { label, help, error, disabled = false, required = false }) {
+	const helpText = present(help);
+	const errorText = present(error);
+	return {
+		controlId: `${baseId}-control`,
+		helpId: helpText === void 0 ? void 0 : `${baseId}-help`,
+		errorId: errorText === void 0 ? void 0 : `${baseId}-error`,
+		label,
+		help: helpText,
+		error: errorText,
+		disabled,
+		required
+	};
+}
+/** `null` fuera de un `FormField`. */
+const FormFieldContext = createContext(null);
+/**
+* Combina las props de un control con las de su `FormField`. Las del control
+* mandan en `id` y nombre accesible; `invalid`, `disabled` y `required` se suman:
+* basta con que lo diga uno de los dos.
+*/
+function resolveFormFieldControl(field, { id, invalid = false, disabled = false, required = false, accessibilityLabel } = {}) {
+	if (field === null) return {
+		id,
+		describedBy: void 0,
+		accessibilityLabel,
+		accessibilityHint: void 0,
+		invalid,
+		disabled,
+		required
+	};
+	const describedBy = [field.helpId, field.errorId].filter((part) => part !== void 0).join(" ");
+	const hint = [field.error, field.help].filter((part) => part !== void 0).join(" ");
+	return {
+		id: id ?? field.controlId,
+		describedBy: describedBy === "" ? void 0 : describedBy,
+		accessibilityLabel: accessibilityLabel ?? field.label,
+		accessibilityHint: hint === "" ? void 0 : hint,
+		invalid: invalid || field.error !== void 0,
+		disabled: disabled || field.disabled,
+		required: required || field.required
+	};
+}
+/** Enlaza un control con el `FormField` que lo contiene, si lo hay. */
+function useFormFieldControl(options) {
+	return resolveFormFieldControl(useContext(FormFieldContext), options);
+}
+//#endregion
 //#region src/hooks/use-button.ts
 /**
 * Comportamiento de `Button` común a web y nativo: un botón deshabilitado o que
@@ -18,6 +72,78 @@ function useButton({ disabled = false, loading = false, onPress }) {
 	};
 }
 //#endregion
+//#region src/hooks/use-controllable-state.ts
+/**
+* Estado controlado o no, a elección de la app (ADR-037). Con `value`, el componente
+* solo avisa del cambio y espera a que la app le pase el valor nuevo; sin él, guarda
+* el estado a partir de `defaultValue`. No avisa si el valor no cambia.
+*/
+function useControllableState({ value, defaultValue, onChange }) {
+	const [internal, setInternal] = useState(defaultValue);
+	const controlled = value !== void 0;
+	const current = controlled ? value : internal;
+	return [current, useCallback((next) => {
+		if (Object.is(next, current)) return;
+		if (!controlled) setInternal(next);
+		onChange?.(next);
+	}, [
+		controlled,
+		current,
+		onChange
+	])];
+}
+//#endregion
+//#region src/hooks/use-link.ts
+/**
+* Comportamiento de `Link` común a web y nativo: `onPress` se llama antes de navegar
+* y puede cancelar la navegación por defecto. Cada vista aporta esa navegación
+* (el `<a>` en web, `Linking` en nativo).
+*/
+function useLink({ onPress }) {
+	return { press: useCallback(() => {
+		let prevented = false;
+		onPress?.({
+			preventDefault: () => {
+				prevented = true;
+			},
+			get defaultPrevented() {
+				return prevented;
+			}
+		});
+		return !prevented;
+	}, [onPress]) };
+}
+//#endregion
+//#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;
+}
+/**
+* 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 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);
@@ -78,6 +204,110 @@ function useBrand() {
 	return useContext(UIContext).brand;
 }
 //#endregion
+//#region src/toast/context.ts
+/** La cola de toasts del `UIProvider` más cercano; `null` fuera de uno. */
+const ToastContext = createContext(null);
+/**
+* Muestra y cierra toasts (ADR-039). Necesita un `UIProvider` por encima: es él quien
+* guarda la cola y los pinta.
+*/
+function useToast() {
+	const store = useContext(ToastContext);
+	if (store === null) throw new Error("useToast necesita un <UIProvider> por encima: es él quien pinta los toasts.");
+	return store;
+}
+//#endregion
+//#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 {
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot: () => items,
+		show,
+		dismiss,
+		pause,
+		resume
+	};
+}
+//#endregion
 //#region src/types/badge.ts
 /**
 * Variantes de `Badge` (ADR-009): una por cada color de `color.feedback`. Las historias
@@ -120,23 +350,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 +573,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 { FormFieldContext, TOAST_DEFAULT_DURATION, TOAST_MAX_VISIBLE, ToastContext, UIContext, backgroundTokens, badgeVariants, borderColorTokens, buttonIconSize, buttonVariants, cardVariants, controlSizes, createFormFieldValue, createToastStore, createUIContextValue, dividerOrientations, feedbackTones, firstEnabledTab, getTabInDirection, iconButtonIconSize, iconSizePx, iconSizes, inputIconSize, inputTypes, isFeedbackTone, linkUnderlines, mergeTheme, modalPresentations, radiusTokens, resolveColorScheme, resolveFormFieldControl, resolveTheme, shadowTokens, skeletonShapes, spaceTokens, spinnerSizePx, spinnerSizes, stackAligns, stackDirections, stackJustifies, tabDirections, textAligns, textColors, textVariantStyles, textVariants, themeModes, useBrand, useButton, useColorScheme, useControllableState, useFormFieldControl, useLink, useTheme, useToast, useUIContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satellatickets/core",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "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": {
@@ -26,7 +26,7 @@
     "react": ">=19.0"
   },
   "dependencies": {
-    "@satellatickets/tokens": "0.0.0"
+    "@satellatickets/tokens": "0.1.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",