@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/theme/tw.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from "clsx";
+/**
+ * Utility function to merge Tailwind classes with proper precedence.
+ * Uses clsx for conditional classes and tailwind-merge to resolve conflicts.
+ *
+ * @example
+ * cn('px-4 py-2', isActive && 'bg-primary', className)
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+export { tv, type VariantProps } from "tailwind-variants";

package/lib/theme/tw.js

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Utility function to merge Tailwind classes with proper precedence.
+ * Uses clsx for conditional classes and tailwind-merge to resolve conflicts.
+ *
+ * @example
+ * cn('px-4 py-2', isActive && 'bg-primary', className)
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+// Re-export tailwind-variants for component variants
+export { tv } from "tailwind-variants";

package/lib/theme/types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * ============================================================================
+ * THEME SYSTEM - SIMPLE & SEMANTIC
+ * ============================================================================
+ *
+ * Sistema simplificado de theming sin hooks ni context.
+ * Importación directa de tokens según dominio activo.
+ */
+export interface ShadowStyle {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+export interface ThemeTokens {
+    /** Nombre del theme */
+    name: string;
+    /** Color primario - botones principales, links, estados activos */
+    primary: string;
+    /** Color secundario - botones secundarios, elementos de bajo perfil (gris) */
+    secondary: string;
+    /** Color de acento - highlights, badges importantes, CTAs secundarios (naranja/indigo) */
+    accent: string;
+    /** Fondos */
+    bg: {
+        page: string;
+        card: string;
+        popover: string;
+        muted: string;
+        accent: string;
+        hover: string;
+        disabled: string;
+    };
+    /** Textos */
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        muted: string;
+        accent: string;
+        inverse: string;
+        disabled: string;
+        onPrimary: string;
+        onSecondary: string;
+        onAccent: string;
+        onDanger: string;
+        onSuccess: string;
+    };
+    /** Iconos */
+    icon: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        inverse: string;
+        disabled: string;
+    };
+    /** Bordes */
+    border: {
+        default: string;
+        light: string;
+        strong: string;
+        focus: string;
+    };
+    /** Estados semánticos */
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    /** Estados semánticos - Versiones claras */
+    successLight: string;
+    warningLight: string;
+    dangerLight: string;
+    infoLight: string;
+    /** Focus & Input */
+    ring: string;
+    input: string;
+    /** Gradientes (para LinearGradient) */
+    gradient: {
+        primary: readonly [string, string];
+        accent: readonly [string, string];
+    };
+    /** Sombras (React Native) */
+    shadow: {
+        sm: ShadowStyle;
+        md: ShadowStyle;
+        lg: ShadowStyle;
+    };
+}

package/lib/theme/types.js

@@ -0,0 +1,9 @@
+/**
+ * ============================================================================
+ * THEME SYSTEM - SIMPLE & SEMANTIC
+ * ============================================================================
+ *
+ * Sistema simplificado de theming sin hooks ni context.
+ * Importación directa de tokens según dominio activo.
+ */
+export {};

package/lib/theme/typography.d.ts

@@ -0,0 +1,376 @@
+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 declare const fontWeights: {
+    readonly light: "300";
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly semiBold: "600";
+    readonly extraBold: "800";
+};
+export declare const fontSizes: {
+    readonly xs: 10;
+    readonly sm: 13;
+    readonly base: 14;
+    readonly lg: 16;
+    readonly xl: 18;
+    readonly "2xl": 20;
+    readonly "3xl": 24;
+    readonly "4xl": 28;
+    readonly "5xl": 32;
+    readonly "6xl": 36;
+    readonly "7xl": 48;
+    readonly "8xl": 64;
+};
+export declare const lineHeights: {
+    readonly none: 1;
+    readonly tight: 1.25;
+    readonly snug: 1.375;
+    readonly normal: 1.5;
+    readonly relaxed: 1.625;
+    readonly loose: 2;
+};
+export declare const letterSpacing: {
+    readonly tighter: -0.5;
+    readonly tight: -0.25;
+    readonly normal: 0;
+    readonly wide: 0.25;
+    readonly wider: 0.5;
+    readonly widest: 1;
+};
+export declare const typographyVariants: {
+    readonly display: {
+        readonly fontSize: 48;
+        readonly fontFamily: "Montserrat_800ExtraBold";
+        readonly fontWeight: "800";
+        readonly lineHeight: number;
+        readonly letterSpacing: -0.25;
+    };
+    readonly h1: {
+        readonly fontSize: 32;
+        readonly fontFamily: "Montserrat_800ExtraBold";
+        readonly fontWeight: "800";
+        readonly lineHeight: number;
+        readonly letterSpacing: -0.25;
+    };
+    readonly h2: {
+        readonly fontSize: 28;
+        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontWeight: "600";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly h3: {
+        readonly fontSize: 24;
+        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontWeight: "600";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly h4: {
+        readonly fontSize: 20;
+        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly h5: {
+        readonly fontSize: 18;
+        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly h6: {
+        readonly fontSize: 16;
+        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly bodyLarge: {
+        readonly fontSize: 16;
+        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly body: {
+        readonly fontSize: 14;
+        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly bodySmall: {
+        readonly fontSize: 13;
+        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly label: {
+        readonly fontSize: 14;
+        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0.25;
+    };
+    readonly labelSmall: {
+        readonly fontSize: 13;
+        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0.25;
+    };
+    readonly caption: {
+        readonly fontSize: 13;
+        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly captionSmall: {
+        readonly fontSize: 10;
+        readonly fontFamily: "Montserrat_400Regular";
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly button: {
+        readonly fontSize: 14;
+        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontWeight: "600";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0.25;
+    };
+    readonly buttonSmall: {
+        readonly fontSize: 13;
+        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontWeight: "600";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0.25;
+    };
+    readonly buttonLarge: {
+        readonly fontSize: 16;
+        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontWeight: "600";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0.25;
+    };
+    readonly title: {
+        readonly fontSize: 18;
+        readonly fontFamily: "Montserrat_600SemiBold";
+        readonly fontWeight: "600";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+    readonly subtitle: {
+        readonly fontSize: 16;
+        readonly fontFamily: "Montserrat_500Medium";
+        readonly fontWeight: "500";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
+};
+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;
+    letterSpacing?: keyof typeof letterSpacing;
+    color?: string;
+}) => 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 fontWeights: {
+        readonly light: "300";
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semiBold: "600";
+        readonly extraBold: "800";
+    };
+    readonly fontSizes: {
+        readonly xs: 10;
+        readonly sm: 13;
+        readonly base: 14;
+        readonly lg: 16;
+        readonly xl: 18;
+        readonly "2xl": 20;
+        readonly "3xl": 24;
+        readonly "4xl": 28;
+        readonly "5xl": 32;
+        readonly "6xl": 36;
+        readonly "7xl": 48;
+        readonly "8xl": 64;
+    };
+    readonly lineHeights: {
+        readonly none: 1;
+        readonly tight: 1.25;
+        readonly snug: 1.375;
+        readonly normal: 1.5;
+        readonly relaxed: 1.625;
+        readonly loose: 2;
+    };
+    readonly letterSpacing: {
+        readonly tighter: -0.5;
+        readonly tight: -0.25;
+        readonly normal: 0;
+        readonly wide: 0.25;
+        readonly wider: 0.5;
+        readonly widest: 1;
+    };
+    readonly variants: {
+        readonly display: {
+            readonly fontSize: 48;
+            readonly fontFamily: "Montserrat_800ExtraBold";
+            readonly fontWeight: "800";
+            readonly lineHeight: number;
+            readonly letterSpacing: -0.25;
+        };
+        readonly h1: {
+            readonly fontSize: 32;
+            readonly fontFamily: "Montserrat_800ExtraBold";
+            readonly fontWeight: "800";
+            readonly lineHeight: number;
+            readonly letterSpacing: -0.25;
+        };
+        readonly h2: {
+            readonly fontSize: 28;
+            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontWeight: "600";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly h3: {
+            readonly fontSize: 24;
+            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontWeight: "600";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly h4: {
+            readonly fontSize: 20;
+            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly h5: {
+            readonly fontSize: 18;
+            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly h6: {
+            readonly fontSize: 16;
+            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly bodyLarge: {
+            readonly fontSize: 16;
+            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly body: {
+            readonly fontSize: 14;
+            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly bodySmall: {
+            readonly fontSize: 13;
+            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly label: {
+            readonly fontSize: 14;
+            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0.25;
+        };
+        readonly labelSmall: {
+            readonly fontSize: 13;
+            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0.25;
+        };
+        readonly caption: {
+            readonly fontSize: 13;
+            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly captionSmall: {
+            readonly fontSize: 10;
+            readonly fontFamily: "Montserrat_400Regular";
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly button: {
+            readonly fontSize: 14;
+            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontWeight: "600";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0.25;
+        };
+        readonly buttonSmall: {
+            readonly fontSize: 13;
+            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontWeight: "600";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0.25;
+        };
+        readonly buttonLarge: {
+            readonly fontSize: 16;
+            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontWeight: "600";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0.25;
+        };
+        readonly title: {
+            readonly fontSize: 18;
+            readonly fontFamily: "Montserrat_600SemiBold";
+            readonly fontWeight: "600";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+        readonly subtitle: {
+            readonly fontSize: 16;
+            readonly fontFamily: "Montserrat_500Medium";
+            readonly fontWeight: "500";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
+    };
+    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 useAppFonts: () => boolean;
+};
+export default Typography;