@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/theme/default.js

@@ -11,6 +11,7 @@ export const DEFAULT_THEME = {
         accent: "#EFF6FF",
         hover: "#F3F4F6",
         disabled: "#F3F4F6",
+        inverse: "#0E1714",
     },
     text: {
         primary: "#0F172A",

package/dist/theme/define.d.ts

@@ -3,16 +3,16 @@ export type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
 /**
- * Define un theme completo y tipado (API potente: el framework parametriza
- * todos los tokens explícitamente).
+ * Defines a complete, typed theme (powerful API: the framework parametrizes
+ * every token explicitly).
  */
 export declare function defineTheme(tokens: ThemeTokens): ThemeTokens;
 /**
- * Combina un theme base con overrides parciales (deep merge tipado). Primitiva
- * para construir APIs simples encima (ej. createTheme del core).
+ * Merges a base theme with partial overrides (typed deep merge). Primitive
+ * to build simpler APIs on top (e.g. the core's createTheme).
  */
 export declare function mergeTheme(base: ThemeTokens, overrides?: DeepPartial<ThemeTokens>): ThemeTokens;
 /**
- * Theme por defecto + overrides parciales en un solo paso.
+ * Default theme + partial overrides in a single step.
  */
 export declare function extendTheme(overrides?: DeepPartial<ThemeTokens>): ThemeTokens;

package/dist/theme/define.js

@@ -13,21 +13,21 @@ function deepMerge(base, override) {
     return out;
 }
 /**
- * Define un theme completo y tipado (API potente: el framework parametriza
- * todos los tokens explícitamente).
+ * Defines a complete, typed theme (powerful API: the framework parametrizes
+ * every token explicitly).
  */
 export function defineTheme(tokens) {
     return tokens;
 }
 /**
- * Combina un theme base con overrides parciales (deep merge tipado). Primitiva
- * para construir APIs simples encima (ej. createTheme del core).
+ * Merges a base theme with partial overrides (typed deep merge). Primitive
+ * to build simpler APIs on top (e.g. the core's createTheme).
  */
 export function mergeTheme(base, overrides = {}) {
     return deepMerge(base, overrides);
 }
 /**
- * Theme por defecto + overrides parciales en un solo paso.
+ * Default theme + partial overrides in a single step.
  */
 export function extendTheme(overrides = {}) {
     return deepMerge(DEFAULT_THEME, overrides);

package/dist/theme/index.d.ts

@@ -1,7 +1,10 @@
-export { getActiveTheme, setActiveTheme } from "../theme/active";
+export { getActiveTheme, setActiveTheme, subscribeTheme, } from "../theme/active";
 export { ThemedActivityIndicator } from "../theme/components";
 export { themeToVars } from "../theme/css-vars";
+export { DEFAULT_DARK_THEME } from "../theme/dark";
 export { DEFAULT_THEME } from "../theme/default";
 export { type DeepPartial, defineTheme, extendTheme, mergeTheme, } from "../theme/define";
 export { theme } from "../theme/theme";
 export type { ShadowStyle, ThemeTokens } from "../theme/types";
+export { configureFonts, fontFamilies, type FontRole, resetFonts, useAppFonts, variantFontRole, } from "../theme/typography";
+export { useTheme } from "../theme/useTheme";

package/dist/theme/index.js

@@ -1,6 +1,9 @@
-export { getActiveTheme, setActiveTheme } from "../theme/active";
+export { getActiveTheme, setActiveTheme, subscribeTheme, } from "../theme/active";
 export { ThemedActivityIndicator } from "../theme/components";
 export { themeToVars } from "../theme/css-vars";
+export { DEFAULT_DARK_THEME } from "../theme/dark";
 export { DEFAULT_THEME } from "../theme/default";
 export { defineTheme, extendTheme, mergeTheme, } from "../theme/define";
 export { theme } from "../theme/theme";
+export { configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "../theme/typography";
+export { useTheme } from "../theme/useTheme";

package/dist/theme/theme.d.ts

@@ -3,7 +3,7 @@
  * THEME CONSTANT - Acceso directo al theme activo
  * ============================================================================
  *
- * Constante que resuelve automáticamente el theme según el dominio activo.
+ * Constant that resolves the active theme automatically.
  * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
  *
  * @example

package/dist/theme/theme.js

@@ -3,7 +3,7 @@
  * THEME CONSTANT - Acceso directo al theme activo
  * ============================================================================
  *
- * Constante que resuelve automáticamente el theme según el dominio activo.
+ * Constant that resolves the active theme automatically.
  * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
  *
  * @example

package/dist/theme/types.d.ts

@@ -3,8 +3,8 @@
  * THEME SYSTEM - SIMPLE & SEMANTIC
  * ============================================================================
  *
- * Sistema simplificado de theming sin hooks ni context.
- * Importación directa de tokens según dominio activo.
+ * Simplified theming system without hooks or context.
+ * Tokens are read directly from the active theme.
  */
 export interface ShadowStyle {
     shadowColor: string;
@@ -17,15 +17,15 @@ export interface ShadowStyle {
     elevation: number;
 }
 export interface ThemeTokens {
-    /** Nombre del theme */
+    /** Theme name */
     name: string;
-    /** Color primario - botones principales, links, estados activos */
+    /** Primary color - main buttons, links, active states */
     primary: string;
-    /** Color secundario - botones secundarios, elementos de bajo perfil (gris) */
+    /** Secondary color - secondary buttons, low-profile elements (gray) */
     secondary: string;
-    /** Color de acento - highlights, badges importantes, CTAs secundarios (naranja/indigo) */
+    /** Accent color - highlights, important badges, secondary CTAs (orange/indigo) */
     accent: string;
-    /** Fondos */
+    /** Backgrounds */
     bg: {
         page: string;
         card: string;
@@ -34,8 +34,9 @@ export interface ThemeTokens {
         accent: string;
         hover: string;
         disabled: string;
+        inverse?: string;
     };
-    /** Textos */
+    /** Text */
     text: {
         primary: string;
         secondary: string;
@@ -50,7 +51,7 @@ export interface ThemeTokens {
         onDanger: string;
         onSuccess: string;
     };
-    /** Iconos */
+    /** Icons */
     icon: {
         primary: string;
         secondary: string;
@@ -58,19 +59,19 @@ export interface ThemeTokens {
         inverse: string;
         disabled: string;
     };
-    /** Bordes */
+    /** Borders */
     border: {
         default: string;
         light: string;
         strong: string;
         focus: string;
     };
-    /** Estados semánticos */
+    /** Semantic states */
     success: string;
     warning: string;
     danger: string;
     info: string;
-    /** Estados semánticos - Versiones claras */
+    /** Semantic states - light variants */
     successLight: string;
     warningLight: string;
     dangerLight: string;
@@ -78,12 +79,12 @@ export interface ThemeTokens {
     /** Focus & Input */
     ring: string;
     input: string;
-    /** Gradientes (para LinearGradient) */
+    /** Gradients (for LinearGradient) */
     gradient: {
         primary: readonly [string, string];
         accent: readonly [string, string];
     };
-    /** Sombras (React Native) */
+    /** Shadows (React Native) */
     shadow: {
         sm: ShadowStyle;
         md: ShadowStyle;

package/dist/theme/types.js

@@ -3,7 +3,7 @@
  * THEME SYSTEM - SIMPLE & SEMANTIC
  * ============================================================================
  *
- * Sistema simplificado de theming sin hooks ni context.
- * Importación directa de tokens según dominio activo.
+ * Simplified theming system without hooks or context.
+ * Tokens are read directly from the active theme.
  */
 export {};

package/dist/theme/typography.d.ts

@@ -1,17 +1,26 @@
 import type { TextStyle } from "react-native";
-export declare const fontFamilies: {
-    readonly light: "Montserrat_300Light";
-    readonly regular: "Montserrat_400Regular";
-    readonly medium: "Montserrat_500Medium";
-    readonly semiBold: "Montserrat_600SemiBold";
-    readonly extraBold: "Montserrat_800ExtraBold";
-};
+export type FontRole = "light" | "regular" | "medium" | "semiBold" | "extraBold" | "mono" | "monoMedium" | "titleRegular" | "titleMedium" | "title" | "titleBlack";
+export declare const fontFamilies: Record<FontRole, string>;
+/**
+ * Configura las familias de fuente del DS (rol → nombre de familia ya cargada por la app).
+ * Mutación in-place del singleton, así los componentes la leen en vivo. Ejemplo:
+ * `configureFonts({ title: "Satoshi-Bold", titleBlack: "Satoshi-Black" })`.
+ */
+export declare function configureFonts(overrides: Partial<Record<FontRole, string>>): void;
+/** Restablece las familias a los defaults (Inter + Fira Code). Útil en tests/stories. */
+export declare function resetFonts(): void;
 export declare const fontWeights: {
     readonly light: "300";
     readonly regular: "400";
     readonly medium: "500";
     readonly semiBold: "600";
     readonly extraBold: "800";
+    readonly mono: "400";
+    readonly monoMedium: "500";
+    readonly titleRegular: "400";
+    readonly titleMedium: "500";
+    readonly title: "700";
+    readonly titleBlack: "900";
 };
 export declare const fontSizes: {
     readonly xs: 10;
@@ -46,138 +55,161 @@ export declare const letterSpacing: {
 export declare const typographyVariants: {
     readonly display: {
         readonly fontSize: 48;
-        readonly fontFamily: "Montserrat_800ExtraBold";
-        readonly fontWeight: "800";
+        readonly fontFamily: string;
+        readonly fontWeight: "900";
         readonly lineHeight: number;
         readonly letterSpacing: -0.25;
     };
     readonly h1: {
         readonly fontSize: 32;
-        readonly fontFamily: "Montserrat_800ExtraBold";
-        readonly fontWeight: "800";
+        readonly fontFamily: string;
+        readonly fontWeight: "700";
         readonly lineHeight: number;
         readonly letterSpacing: -0.25;
     };
     readonly h2: {
         readonly fontSize: 28;
-        readonly fontFamily: "Montserrat_600SemiBold";
-        readonly fontWeight: "600";
+        readonly fontFamily: string;
+        readonly fontWeight: "700";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly h3: {
         readonly fontSize: 24;
-        readonly fontFamily: "Montserrat_600SemiBold";
-        readonly fontWeight: "600";
+        readonly fontFamily: string;
+        readonly fontWeight: "700";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly h4: {
         readonly fontSize: 20;
-        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontFamily: string;
         readonly fontWeight: "500";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly h5: {
         readonly fontSize: 18;
-        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontFamily: string;
         readonly fontWeight: "500";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly h6: {
         readonly fontSize: 16;
-        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontFamily: string;
         readonly fontWeight: "500";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly bodyLarge: {
         readonly fontSize: 16;
-        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontFamily: string;
         readonly fontWeight: "400";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly body: {
         readonly fontSize: 14;
-        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontFamily: string;
         readonly fontWeight: "400";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly bodySmall: {
         readonly fontSize: 13;
-        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontFamily: string;
         readonly fontWeight: "400";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly label: {
         readonly fontSize: 14;
-        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontFamily: string;
         readonly fontWeight: "500";
         readonly lineHeight: number;
         readonly letterSpacing: 0.25;
     };
     readonly labelSmall: {
         readonly fontSize: 13;
-        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontFamily: string;
         readonly fontWeight: "500";
         readonly lineHeight: number;
         readonly letterSpacing: 0.25;
     };
+    readonly data: {
+        readonly fontSize: 16;
+        readonly fontFamily: string;
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly dataLarge: {
+        readonly fontSize: 28;
+        readonly fontFamily: string;
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: -0.25;
+    };
+    readonly overline: {
+        readonly fontSize: 11;
+        readonly fontFamily: string;
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0.6;
+        readonly textTransform: "uppercase";
+    };
     readonly caption: {
         readonly fontSize: 13;
-        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontFamily: string;
         readonly fontWeight: "400";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly captionSmall: {
         readonly fontSize: 10;
-        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontFamily: string;
         readonly fontWeight: "400";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly button: {
         readonly fontSize: 14;
-        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontFamily: string;
         readonly fontWeight: "600";
         readonly lineHeight: number;
         readonly letterSpacing: 0.25;
     };
     readonly buttonSmall: {
         readonly fontSize: 13;
-        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontFamily: string;
         readonly fontWeight: "600";
         readonly lineHeight: number;
         readonly letterSpacing: 0.25;
     };
     readonly buttonLarge: {
         readonly fontSize: 16;
-        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontFamily: string;
         readonly fontWeight: "600";
         readonly lineHeight: number;
         readonly letterSpacing: 0.25;
     };
     readonly title: {
         readonly fontSize: 18;
-        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontFamily: string;
         readonly fontWeight: "600";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
     readonly subtitle: {
         readonly fontSize: 16;
-        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontFamily: string;
         readonly fontWeight: "500";
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
 };
+export declare const variantFontRole: Record<keyof typeof typographyVariants, FontRole>;
 export declare const createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
 export declare const createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
     lineHeight?: keyof typeof lineHeights;
@@ -186,19 +218,19 @@ export declare const createCustomTextStyle: (fontSize: keyof typeof fontSizes, f
 }) => TextStyle;
 export declare const useAppFonts: () => boolean;
 export declare const Typography: {
-    readonly fontFamilies: {
-        readonly light: "Montserrat_300Light";
-        readonly regular: "Montserrat_400Regular";
-        readonly medium: "Montserrat_500Medium";
-        readonly semiBold: "Montserrat_600SemiBold";
-        readonly extraBold: "Montserrat_800ExtraBold";
-    };
+    readonly fontFamilies: Record<FontRole, string>;
     readonly fontWeights: {
         readonly light: "300";
         readonly regular: "400";
         readonly medium: "500";
         readonly semiBold: "600";
         readonly extraBold: "800";
+        readonly mono: "400";
+        readonly monoMedium: "500";
+        readonly titleRegular: "400";
+        readonly titleMedium: "500";
+        readonly title: "700";
+        readonly titleBlack: "900";
     };
     readonly fontSizes: {
         readonly xs: 10;
@@ -233,144 +265,169 @@ export declare const Typography: {
     readonly variants: {
         readonly display: {
             readonly fontSize: 48;
-            readonly fontFamily: "Montserrat_800ExtraBold";
-            readonly fontWeight: "800";
+            readonly fontFamily: string;
+            readonly fontWeight: "900";
             readonly lineHeight: number;
             readonly letterSpacing: -0.25;
         };
         readonly h1: {
             readonly fontSize: 32;
-            readonly fontFamily: "Montserrat_800ExtraBold";
-            readonly fontWeight: "800";
+            readonly fontFamily: string;
+            readonly fontWeight: "700";
             readonly lineHeight: number;
             readonly letterSpacing: -0.25;
         };
         readonly h2: {
             readonly fontSize: 28;
-            readonly fontFamily: "Montserrat_600SemiBold";
-            readonly fontWeight: "600";
+            readonly fontFamily: string;
+            readonly fontWeight: "700";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly h3: {
             readonly fontSize: 24;
-            readonly fontFamily: "Montserrat_600SemiBold";
-            readonly fontWeight: "600";
+            readonly fontFamily: string;
+            readonly fontWeight: "700";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly h4: {
             readonly fontSize: 20;
-            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontFamily: string;
             readonly fontWeight: "500";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly h5: {
             readonly fontSize: 18;
-            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontFamily: string;
             readonly fontWeight: "500";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly h6: {
             readonly fontSize: 16;
-            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontFamily: string;
             readonly fontWeight: "500";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly bodyLarge: {
             readonly fontSize: 16;
-            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontFamily: string;
             readonly fontWeight: "400";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly body: {
             readonly fontSize: 14;
-            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontFamily: string;
             readonly fontWeight: "400";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly bodySmall: {
             readonly fontSize: 13;
-            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontFamily: string;
             readonly fontWeight: "400";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly label: {
             readonly fontSize: 14;
-            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontFamily: string;
             readonly fontWeight: "500";
             readonly lineHeight: number;
             readonly letterSpacing: 0.25;
         };
         readonly labelSmall: {
             readonly fontSize: 13;
-            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontFamily: string;
             readonly fontWeight: "500";
             readonly lineHeight: number;
             readonly letterSpacing: 0.25;
         };
+        readonly data: {
+            readonly fontSize: 16;
+            readonly fontFamily: string;
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly dataLarge: {
+            readonly fontSize: 28;
+            readonly fontFamily: string;
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: -0.25;
+        };
+        readonly overline: {
+            readonly fontSize: 11;
+            readonly fontFamily: string;
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0.6;
+            readonly textTransform: "uppercase";
+        };
         readonly caption: {
             readonly fontSize: 13;
-            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontFamily: string;
             readonly fontWeight: "400";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly captionSmall: {
             readonly fontSize: 10;
-            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontFamily: string;
             readonly fontWeight: "400";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly button: {
             readonly fontSize: 14;
-            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontFamily: string;
             readonly fontWeight: "600";
             readonly lineHeight: number;
             readonly letterSpacing: 0.25;
         };
         readonly buttonSmall: {
             readonly fontSize: 13;
-            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontFamily: string;
             readonly fontWeight: "600";
             readonly lineHeight: number;
             readonly letterSpacing: 0.25;
         };
         readonly buttonLarge: {
             readonly fontSize: 16;
-            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontFamily: string;
             readonly fontWeight: "600";
             readonly lineHeight: number;
             readonly letterSpacing: 0.25;
         };
         readonly title: {
             readonly fontSize: 18;
-            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontFamily: string;
             readonly fontWeight: "600";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
         readonly subtitle: {
             readonly fontSize: 16;
-            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontFamily: string;
             readonly fontWeight: "500";
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
     };
+    readonly variantFontRole: Record<"button" | "title" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyLarge" | "body" | "bodySmall" | "label" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
     readonly createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
     readonly createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
         lineHeight?: keyof typeof lineHeights;
         letterSpacing?: keyof typeof letterSpacing;
         color?: string;
     }) => TextStyle;
+    readonly configureFonts: typeof configureFonts;
+    readonly resetFonts: typeof resetFonts;
     readonly useAppFonts: () => boolean;
 };
 export default Typography;