@satellatickets/ui 0.1.0 → 0.2.1

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
 
@@ -70,11 +70,13 @@ Los hooks `useTheme()`, `useColorScheme()` y `useBrand()` dan acceso al tema res
 
 ## Componentes
 
-| Grupo       | Componentes                    |
-| ----------- | ------------------------------ |
-| Fundamentos | `Box`, `Stack`, `Text`, `Icon` |
-| Acciones    | `Button`                       |
-| Feedback    | `Badge`, `Spinner`             |
+| Grupo       | Componentes                                                           |
+| ----------- | --------------------------------------------------------------------- |
+| Fundamentos | `Box`, `Stack`, `Text`, `Icon`                                        |
+| Acciones    | `Button`, `IconButton`, `Link`                                        |
+| Formularios | `Input`, `TextArea`, `Checkbox`, `Switch`, `Select`, `FormField`      |
+| Feedback    | `Alert`, `Badge`, `Skeleton`, `Spinner` y los toasts con `useToast()` |
+| Superficies | `Card`, `Divider`, `Modal`, `Sheet`, `Tabs`                           |
 
 Cada componente declara su madurez en el catálogo. Todos son todavía `experimental`: su API puede cambiar en cualquier `minor` mientras la librería esté en `0.x`. Fija la versión exacta y lee el `CHANGELOG` al actualizar.
 

package/dist/native/index.d.ts

@@ -1,6 +1,16 @@
-import { BadgeProps, BadgeProps as BadgeProps$1, BoxProps, BoxProps as BoxProps$1, ButtonProps as ButtonProps$1, ColorScheme, IconProps as IconProps$1, SpinnerProps, SpinnerProps as SpinnerProps$1, StackProps, StackProps as StackProps$1, TextProps, TextProps as TextProps$1, ThemeMode, UIProviderProps, UIProviderProps as UIProviderProps$1, useBrand, useColorScheme, useTheme } from "@satellatickets/core";
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native";
+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 { StyleProp, Text as Text$1, TextInput, TextStyle, View, ViewStyle } from "react-native";
 import { Ref } from "react";
+import { Theme } from "@satellatickets/tokens";
+//#region src/alert/Alert.types.d.ts
+/** Extensión solo nativa del contrato. */
+type AlertNativeProps = AlertProps$1 & {
+  style?: StyleProp<ViewStyle> | undefined;
+};
+//#endregion
+//#region src/alert/Alert.native.d.ts
+export declare function Alert({ tone, title, onClose, closeLabel, style, testID, children }: AlertNativeProps): import("react").JSX.Element;
+//#endregion
 //#region src/badge/Badge.types.d.ts
 /** Extensión solo nativa del contrato. */
 interface BadgeNativeProps extends BadgeProps$1 {
@@ -45,11 +55,166 @@ interface ButtonNativeProps extends ButtonProps {
 }
 //#endregion
 //#region src/button/Button.native.d.ts
+declare const variantStyles: {
+  primary: (t: Theme) => {
+    background: string;
+    pressed: string;
+    disabled: string;
+    border: string;
+    content: "onPrimary";
+  };
+  secondary: (t: Theme) => {
+    background: string;
+    pressed: string;
+    disabled: string;
+    border: string;
+    content: "primary";
+  };
+  ghost: (t: Theme) => {
+    background: string;
+    pressed: string;
+    disabled: string;
+    border: string;
+    content: "primary";
+  };
+  danger: (t: Theme) => {
+    background: string;
+    pressed: string;
+    disabled: string;
+    border: string;
+    content: "onDanger";
+  };
+};
 export declare function Button({ variant, size, disabled, loading, iconStart, iconEnd, fullWidth, onPress, accessibilityLabel, style, testID, ref, children }: ButtonNativeProps): import("react").JSX.Element;
 //#endregion
+//#region src/card/Card.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface CardNativeProps extends CardProps$1 {
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<View> | undefined;
+}
+//#endregion
+//#region src/card/Card.native.d.ts
+export declare function Card({ variant, padding, onPress, accessibilityLabel, style, testID, ref, children }: CardNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/checkbox/Checkbox.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface CheckboxNativeProps extends CheckboxProps$1 {
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<View> | undefined;
+}
+//#endregion
+//#region src/checkbox/Checkbox.native.d.ts
+export declare function Checkbox({ checked, defaultChecked, indeterminate, onCheckedChange, disabled, invalid, accessibilityLabel, style, testID, ref, children }: CheckboxNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/divider/Divider.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface DividerNativeProps extends DividerProps$1 {
+  style?: StyleProp<ViewStyle> | undefined;
+}
+//#endregion
+//#region src/divider/Divider.native.d.ts
+/** En nativo es decorativo: los lectores de pantalla no anuncian separadores. */
+export declare function Divider({ orientation, style, testID }: DividerNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/form-field/FormField.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface FormFieldNativeProps extends FormFieldProps$1 {
+  style?: StyleProp<ViewStyle> | undefined;
+}
+//#endregion
+//#region src/form-field/FormField.native.d.ts
+/**
+ * Etiqueta, ayuda y error de un control (ADR-037). En nativo no hay `htmlFor`: el
+ * control toma la etiqueta como nombre accesible y la ayuda y el error como pista.
+ */
+export declare function FormField({ label, help, error, required, disabled, style, testID, children }: FormFieldNativeProps): import("react").JSX.Element;
+//#endregion
 //#region src/icon/Icon.native.d.ts
 export declare function Icon({ name, size, color, label, style, testID }: IconNativeProps): import("react").JSX.Element;
 //#endregion
+//#region src/icon-button/IconButton.types.d.ts
+/** Contrato de `IconButton` con el conjunto de iconos de la librería. */
+type IconButtonProps = IconButtonProps$1<IconName>;
+/** Extensión solo nativa del contrato. */
+interface IconButtonNativeProps extends IconButtonProps {
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<View> | undefined;
+}
+//#endregion
+//#region src/icon-button/IconButton.native.d.ts
+export declare function IconButton({ icon, label, variant, size, disabled, loading, onPress, style, testID, ref }: IconButtonNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/input/Input.types.d.ts
+/** Contrato de `Input` con el conjunto de iconos de la librería. */
+type InputProps = InputProps$1<IconName>;
+/** Extensión solo nativa del contrato. */
+interface InputNativeProps extends InputProps {
+  /** Se aplica a la caja del campo, no al `TextInput`. */
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<TextInput> | undefined;
+}
+//#endregion
+//#region src/input/Input.native.d.ts
+export declare function Input({ value, defaultValue, onChangeText, placeholder, type, size, disabled, readOnly, invalid, required, iconStart, iconEnd, maxLength, onFocus, onBlur, onSubmit, accessibilityLabel, style, testID, ref }: InputNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/link/Link.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface LinkNativeProps extends LinkProps$1 {
+  style?: StyleProp<TextStyle> | undefined;
+  ref?: Ref<Text$1> | undefined;
+}
+//#endregion
+//#region src/link/Link.native.d.ts
+export declare function Link({ href, variant, color, underline, onPress, accessibilityLabel, style, testID, ref, children }: LinkNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/modal/Modal.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface ModalNativeProps extends ModalProps$1 {
+  /** Se aplica a la superficie del diálogo, no al fondo. */
+  style?: StyleProp<ViewStyle> | undefined;
+}
+//#endregion
+//#region src/modal/Modal.native.d.ts
+/** Un diálogo centrado (ADR-040). */
+export declare function Modal(props: ModalNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/select/Select.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface SelectNativeProps extends SelectProps$1 {
+  /** Se aplica al disparador, la caja que muestra la opción elegida. */
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<View> | undefined;
+}
+//#endregion
+//#region src/select/Select.native.d.ts
+/**
+ * Un disparador con aspecto de `Input` que abre una lista modal (ADR-038). 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;
+//#endregion
+//#region src/sheet/Sheet.types.d.ts
+type SheetNativeProps = ModalNativeProps;
+//#endregion
+//#region src/sheet/Sheet.native.d.ts
+/** Un diálogo anclado al borde inferior (ADR-040). Comparte todo con `Modal` salvo dónde se coloca. */
+export declare function Sheet(props: SheetNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/skeleton/Skeleton.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface SkeletonNativeProps extends SkeletonProps$1 {
+  style?: StyleProp<ViewStyle> | undefined;
+}
+//#endregion
+//#region src/skeleton/Skeleton.native.d.ts
+/**
+ * El hueco de un contenido que se está cargando. Late entre dos fondos del tema: una
+ * capa con `bg.muted` aparece y desaparece sobre `bg.subtle`, con el driver nativo. Con
+ * movimiento reducido se queda quieto.
+ */
+export declare function Skeleton({ shape, width, height, variant, lines, style, testID }: SkeletonNativeProps): import("react").JSX.Element;
+//#endregion
 //#region src/spinner/Spinner.types.d.ts
 interface SpinnerNativeProps extends SpinnerProps$1 {
   style?: StyleProp<ViewStyle> | undefined;
@@ -57,10 +222,10 @@ interface SpinnerNativeProps extends SpinnerProps$1 {
 //#endregion
 //#region src/spinner/Spinner.native.d.ts
 /**
- * Indicador de carga indeterminada. Versión mínima (ROADMAP Fase 3): el icono
- * `loader-circle` girando con `Animated` y el driver nativo, sin dependencias extra.
- * 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 `Animated` y
+ * el driver nativo, sin dependencias extra. 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.
  */
 export declare function Spinner({ size, color, label, style, testID }: SpinnerNativeProps): import("react").JSX.Element;
 //#endregion
@@ -72,6 +237,33 @@ interface StackNativeProps extends StackProps$1 {
 //#region src/stack/Stack.native.d.ts
 export declare function Stack({ direction, gap, align, justify, wrap, style, ...boxProps }: StackNativeProps): import("react").JSX.Element;
 //#endregion
+//#region src/switch/Switch.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface SwitchNativeProps extends SwitchProps$1 {
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<View> | undefined;
+}
+//#endregion
+//#region src/switch/Switch.native.d.ts
+export declare function Switch({ checked, defaultChecked, onCheckedChange, disabled, accessibilityLabel, style, testID, ref, children }: SwitchNativeProps): import("react").JSX.Element;
+//#endregion
+//#region src/tabs/Tabs.types.d.ts
+/** Una pestaña, con el conjunto de iconos de la librería. */
+type TabItem = TabItem$1<IconName>;
+/** Contrato de `Tabs` con el conjunto de iconos de la librería. */
+type TabsProps = TabsProps$1<IconName>;
+/** Extensión solo nativa del contrato. */
+interface TabsNativeProps extends TabsProps {
+  style?: StyleProp<ViewStyle> | undefined;
+}
+//#endregion
+//#region src/tabs/Tabs.native.d.ts
+/**
+ * Pestañas subrayadas. Si no caben, la lista se desplaza en horizontal. En nativo no hay
+ * teclado de flechas: cada pestaña se pulsa.
+ */
+export declare function Tabs({ items, value, defaultValue, onValueChange, accessibilityLabel, style, testID }: TabsNativeProps): import("react").JSX.Element;
+//#endregion
 //#region src/text/Text.types.d.ts
 interface TextNativeProps extends TextProps$1 {
   numberOfLines?: number | undefined;
@@ -81,11 +273,23 @@ interface TextNativeProps extends TextProps$1 {
 //#region src/text/Text.native.d.ts
 export declare function Text({ variant, color, align, truncate, numberOfLines, style, testID, children }: TextNativeProps): import("react").JSX.Element;
 //#endregion
+//#region src/text-area/TextArea.types.d.ts
+/** Extensión solo nativa del contrato. */
+interface TextAreaNativeProps extends TextAreaProps$1 {
+  /** Se aplica a la caja del campo, no al `TextInput`. */
+  style?: StyleProp<ViewStyle> | undefined;
+  ref?: Ref<TextInput> | undefined;
+}
+//#endregion
+//#region src/text-area/TextArea.native.d.ts
+export declare function TextArea({ value, defaultValue, onChangeText, placeholder, rows, disabled, readOnly, invalid, required, maxLength, onFocus, onBlur, accessibilityLabel, style, testID, ref }: TextAreaNativeProps): import("react").JSX.Element;
+//#endregion
 //#region src/ui-provider/UIProvider.native.d.ts
 /**
  * Activa tema y marca para todo lo que envuelve (ADR-010). Entrega el tema
- * resuelto por contexto; `system` sigue a `Appearance`.
+ * resuelto por contexto; `system` sigue a `Appearance`. También guarda la cola de
+ * toasts y los pinta sobre la vista que lo contiene (ADR-039).
  */
 export declare function UIProvider({ theme, brand, children }: UIProviderProps$1): import("react").JSX.Element;
 //#endregion
-export { type BadgeNativeProps, type BadgeProps, type BoxNativeProps, type BoxProps, type ButtonNativeProps, type ButtonProps, type ColorScheme, type IconName, type IconNativeProps, type IconProps, type SpinnerNativeProps, type SpinnerProps, type StackNativeProps, type StackProps, type TextNativeProps, type TextProps, type ThemeMode, type UIProviderProps, useBrand, useColorScheme, useTheme };
+export { type AlertNativeProps, type AlertProps, type BadgeNativeProps, type BadgeProps, type BoxNativeProps, type BoxProps, type ButtonNativeProps, type ButtonProps, type CardNativeProps, type CardProps, type CheckboxNativeProps, type CheckboxProps, type ColorScheme, type DividerNativeProps, type DividerProps, type FormFieldNativeProps, type FormFieldProps, type IconButtonNativeProps, type IconButtonProps, type IconName, type IconNativeProps, type IconProps, type InputNativeProps, type InputProps, type LinkNativeProps, type LinkPressEvent, type LinkProps, type ModalNativeProps, type ModalProps, type SelectNativeProps, type SelectOption, type SelectProps, type SheetNativeProps, type SheetProps, type SkeletonNativeProps, type SkeletonProps, type SpinnerNativeProps, type SpinnerProps, type StackNativeProps, type StackProps, type SwitchNativeProps, type SwitchProps, type TabItem, type TabsNativeProps, type TabsProps, type TextAreaNativeProps, type TextAreaProps, type TextNativeProps, type TextProps, type ThemeMode, type ToastAction, type ToastApi, type ToastOptions, type UIProviderProps, useBrand, useColorScheme, useTheme, useToast, type variantStyles };