@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/theme/globals.css

@@ -0,0 +1,67 @@
+/**
+ * AUTO-GENERATED from apk/domains/index.ts
+ * Active Domain: distribution
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Primary Colors */
+  --primary: 37 99 235;
+  --secondary: 107 114 128;
+  --accent: 249 115 22;
+
+  /* Backgrounds */
+  --bg-page: 249 250 251;
+  --bg-card: 255 255 255;
+  --bg-popover: 255 255 255;
+  --bg-muted: 243 244 246;
+  --bg-accent: 219 234 254;
+  --bg-hover: 243 244 246;
+  --bg-disabled: 249 250 251;
+
+  /* Text */
+  --text-primary: 17 24 39;
+  --text-secondary: 107 114 128;
+  --text-tertiary: 156 163 175;
+  --text-muted: 107 114 128;
+  --text-accent: 30 64 175;
+  --text-inverse: 255 255 255;
+  --text-disabled: 209 213 219;
+  --text-on-primary: 255 255 255;
+  --text-on-secondary: 255 255 255;
+  --text-on-accent: 255 255 255;
+  --text-on-danger: 255 255 255;
+  --text-on-success: 255 255 255;
+
+  /* Icons */
+  --icon-primary: 17 24 39;
+  --icon-secondary: 107 114 128;
+  --icon-tertiary: 156 163 175;
+  --icon-inverse: 255 255 255;
+  --icon-disabled: 209 213 219;
+
+  /* Borders */
+  --border-default: 229 231 235;
+  --border-light: 243 244 246;
+  --border-strong: 209 213 219;
+  --border-focus: 37 99 235;
+
+  /* Focus & Input */
+  --ring: 37 99 235;
+  --input: 229 231 235;
+
+  /* Semantic */
+  --success: 16 185 129;
+  --warning: 249 115 22;
+  --danger: 239 68 68;
+  --info: 37 99 235;
+
+  /* Semantic Light */
+  --success-light: 209 250 229;
+  --warning-light: 255 237 213;
+  --danger-light: 254 226 226;
+  --info-light: 219 234 254;
+}

package/sincpro_mobile_ui/theme/index.ts

@@ -0,0 +1,4 @@
+export { getActiveTheme, setActiveTheme } from "./active";
+export { ThemedActivityIndicator } from "./components";
+export { theme } from "./theme";
+export type { ThemeTokens } from "./types";

package/sincpro_mobile_ui/theme/theme.ts

@@ -0,0 +1,16 @@
+/**
+ * ============================================================================
+ * THEME CONSTANT - Acceso directo al theme activo
+ * ============================================================================
+ *
+ * Constante que resuelve automáticamente el theme según el dominio activo.
+ * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
+ *
+ * @example
+ * import { theme } from "./";
+ * const color = theme.primary;
+ */
+
+import { getActiveTheme } from "./active";
+
+export const theme = getActiveTheme();

package/sincpro_mobile_ui/theme/tw.ts

@@ -0,0 +1,16 @@
+import { type ClassValue, 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: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Re-export tailwind-variants for component variants
+export { tv, type VariantProps } from "tailwind-variants";

package/sincpro_mobile_ui/theme/types.ts

@@ -0,0 +1,109 @@
+/**
+ * ============================================================================
+ * THEME SYSTEM - SIMPLE & SEMANTIC
+ * ============================================================================
+ *
+ * Sistema simplificado de theming sin hooks ni context.
+ * Importación directa de tokens según dominio activo.
+ */
+
+// ----------------------------------------------------------------------------
+// Shadow Tokens (React Native)
+// ----------------------------------------------------------------------------
+
+export interface ShadowStyle {
+  shadowColor: string;
+  shadowOffset: { width: number; height: number };
+  shadowOpacity: number;
+  shadowRadius: number;
+  elevation: number;
+}
+
+// ----------------------------------------------------------------------------
+// Theme Tokens (SIMPLIFICADO)
+// ----------------------------------------------------------------------------
+
+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; // Fondo de pantallas
+    card: string; // Cards, modales, inputs
+    popover: string; // Dropdowns, tooltips, context menus
+    muted: string; // Superficies secundarias, filas alternas
+    accent: string; // Estados seleccionados, filas activas
+    hover: string; // Hover states
+    disabled: string; // Disabled states
+  };
+
+  /** Textos */
+  text: {
+    primary: string; // Texto principal
+    secondary: string; // Texto secundario
+    tertiary: string; // Placeholders, texto terciario
+    muted: string; // Texto sobre bg.muted
+    accent: string; // Texto sobre bg.accent
+    inverse: string; // Texto sobre colores (blanco)
+    disabled: string; // Texto disabled
+    onPrimary: string; // Texto sobre color primary
+    onSecondary: string; // Texto sobre color secondary (gris)
+    onAccent: string; // Texto sobre color accent
+    onDanger: string; // Texto sobre color danger
+    onSuccess: string; // Texto sobre color success
+  };
+  /** Iconos */
+  icon: {
+    primary: string; // Icono principal
+    secondary: string; // Icono secundario
+    tertiary: string; // Icono terciario
+    inverse: string; // Icono sobre colores (blanco)
+    disabled: string; // Icono disabled
+  };
+  /** Bordes */
+  border: {
+    default: string; // Bordes normales
+    light: string; // Bordes suaves
+    strong: string; // Bordes marcados
+    focus: string; // Color de focus
+  };
+
+  /** 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; // Focus outline color
+  input: string; // Input border color
+
+  /** Gradientes (para LinearGradient) */
+  gradient: {
+    primary: readonly [string, string];
+    accent: readonly [string, string];
+  };
+
+  /** Sombras (React Native) */
+  shadow: {
+    sm: ShadowStyle;
+    md: ShadowStyle;
+    lg: ShadowStyle;
+  };
+}

package/sincpro_mobile_ui/theme/typography.ts

@@ -0,0 +1,271 @@
+import {
+  Montserrat_300Light,
+  Montserrat_400Regular,
+  Montserrat_500Medium,
+  Montserrat_600SemiBold,
+  Montserrat_800ExtraBold,
+  useFonts,
+} from "@expo-google-fonts/montserrat";
+import type { TextStyle } from "react-native";
+
+/* -------------------- Font Families & Weights -------------------- */
+export const fontFamilies = {
+  light: "Montserrat_300Light",
+  regular: "Montserrat_400Regular",
+  medium: "Montserrat_500Medium",
+  semiBold: "Montserrat_600SemiBold",
+  extraBold: "Montserrat_800ExtraBold",
+} as const;
+
+export const fontWeights = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  semiBold: "600",
+  extraBold: "800",
+} as const;
+
+/* -------------------- Font Sizes -------------------- */
+export const fontSizes = {
+  xs: 10,
+  sm: 13,
+  base: 14,
+  lg: 16,
+  xl: 18,
+  "2xl": 20,
+  "3xl": 24,
+  "4xl": 28,
+  "5xl": 32,
+  "6xl": 36,
+  "7xl": 48,
+  "8xl": 64,
+} as const;
+
+/* -------------------- Line Heights -------------------- */
+export const lineHeights = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+} as const;
+
+/* -------------------- Letter Spacing -------------------- */
+export const letterSpacing = {
+  tighter: -0.5,
+  tight: -0.25,
+  normal: 0,
+  wide: 0.25,
+  wider: 0.5,
+  widest: 1,
+} as const;
+
+/* -------------------- Typography Variants -------------------- */
+export const typographyVariants = {
+  // Display
+  display: {
+    fontSize: fontSizes["7xl"],
+    fontFamily: fontFamilies.extraBold,
+    fontWeight: fontWeights.extraBold,
+    lineHeight: fontSizes["7xl"] * lineHeights.tight,
+    letterSpacing: letterSpacing.tight,
+  },
+
+  // Headings
+  h1: {
+    fontSize: fontSizes["5xl"],
+    fontFamily: fontFamilies.extraBold,
+    fontWeight: fontWeights.extraBold,
+    lineHeight: fontSizes["5xl"] * lineHeights.tight,
+    letterSpacing: letterSpacing.tight,
+  },
+  h2: {
+    fontSize: fontSizes["4xl"],
+    fontFamily: fontFamilies.semiBold,
+    fontWeight: fontWeights.semiBold,
+    lineHeight: fontSizes["4xl"] * lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+  },
+  h3: {
+    fontSize: fontSizes["3xl"],
+    fontFamily: fontFamilies.semiBold,
+    fontWeight: fontWeights.semiBold,
+    lineHeight: fontSizes["3xl"] * lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+  },
+  h4: {
+    fontSize: fontSizes["2xl"],
+    fontFamily: fontFamilies.medium,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes["2xl"] * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+  h5: {
+    fontSize: fontSizes.xl,
+    fontFamily: fontFamilies.medium,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes.xl * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+  h6: {
+    fontSize: fontSizes.lg,
+    fontFamily: fontFamilies.medium,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes.lg * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+
+  // Body
+  bodyLarge: {
+    fontSize: fontSizes.lg,
+    fontFamily: fontFamilies.regular,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.lg * lineHeights.relaxed,
+    letterSpacing: letterSpacing.normal,
+  },
+  body: {
+    fontSize: fontSizes.base,
+    fontFamily: fontFamilies.regular,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.base * lineHeights.relaxed,
+    letterSpacing: letterSpacing.normal,
+  },
+  bodySmall: {
+    fontSize: fontSizes.sm,
+    fontFamily: fontFamilies.regular,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.sm * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+
+  // Label
+  label: {
+    fontSize: fontSizes.base,
+    fontFamily: fontFamilies.medium,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes.base * lineHeights.normal,
+    letterSpacing: letterSpacing.wide,
+  },
+  labelSmall: {
+    fontSize: fontSizes.sm,
+    fontFamily: fontFamilies.medium,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes.sm * lineHeights.normal,
+    letterSpacing: letterSpacing.wide,
+  },
+
+  // Caption
+  caption: {
+    fontSize: fontSizes.sm,
+    fontFamily: fontFamilies.regular,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.sm * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+  captionSmall: {
+    fontSize: fontSizes.xs,
+    fontFamily: fontFamilies.regular,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.xs * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+
+  // Buttons
+  button: {
+    fontSize: fontSizes.base,
+    fontFamily: fontFamilies.semiBold,
+    fontWeight: fontWeights.semiBold,
+    lineHeight: fontSizes.base * lineHeights.none,
+    letterSpacing: letterSpacing.wide,
+  },
+  buttonSmall: {
+    fontSize: fontSizes.sm,
+    fontFamily: fontFamilies.semiBold,
+    fontWeight: fontWeights.semiBold,
+    lineHeight: fontSizes.sm * lineHeights.none,
+    letterSpacing: letterSpacing.wide,
+  },
+  buttonLarge: {
+    fontSize: fontSizes.lg,
+    fontFamily: fontFamilies.semiBold,
+    fontWeight: fontWeights.semiBold,
+    lineHeight: fontSizes.lg * lineHeights.none,
+    letterSpacing: letterSpacing.wide,
+  },
+
+  // Legacy
+  title: {
+    fontSize: fontSizes.xl,
+    fontFamily: fontFamilies.semiBold,
+    fontWeight: fontWeights.semiBold,
+    lineHeight: fontSizes.xl * lineHeights.snug,
+    letterSpacing: letterSpacing.normal,
+  },
+  subtitle: {
+    fontSize: fontSizes.lg,
+    fontFamily: fontFamilies.medium,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes.lg * lineHeights.normal,
+    letterSpacing: letterSpacing.normal,
+  },
+} as const;
+
+/* -------------------- Utility Functions -------------------- */
+export const createTextStyle = (
+  variant: keyof typeof typographyVariants,
+  overrides?: Partial<TextStyle>,
+): TextStyle => ({
+  ...typographyVariants[variant],
+  ...overrides,
+});
+
+export const createCustomTextStyle = (
+  fontSize: keyof typeof fontSizes,
+  fontFamily: keyof typeof fontFamilies,
+  options?: {
+    lineHeight?: keyof typeof lineHeights;
+    letterSpacing?: keyof typeof letterSpacing;
+    color?: string;
+  },
+): TextStyle => {
+  const size = fontSizes[fontSize];
+  const line = options?.lineHeight ? lineHeights[options.lineHeight] : lineHeights.normal;
+  const spacing = options?.letterSpacing ?? "normal";
+
+  return {
+    fontSize: size,
+    fontFamily: fontFamilies[fontFamily],
+    fontWeight: fontWeights[fontFamily],
+    lineHeight: size * line,
+    letterSpacing: letterSpacing[spacing],
+    ...(options?.color && { color: options.color }),
+  };
+};
+
+/* -------------------- Font Loader -------------------- */
+export const useAppFonts = () => {
+  const [loaded] = useFonts({
+    Montserrat_300Light,
+    Montserrat_400Regular,
+    Montserrat_500Medium,
+    Montserrat_600SemiBold,
+    Montserrat_800ExtraBold,
+  });
+  return loaded;
+};
+
+/* -------------------- Typography Object -------------------- */
+export const Typography = {
+  fontFamilies,
+  fontWeights,
+  fontSizes,
+  lineHeights,
+  letterSpacing,
+  variants: typographyVariants,
+  createTextStyle,
+  createCustomTextStyle,
+  useAppFonts,
+} as const;
+
+export default Typography;

package/sincpro_mobile_ui/theme/useTheme.ts

@@ -0,0 +1,3 @@
+import { getActiveTheme } from "./active";
+
+export const theme = getActiveTheme();

package/sincpro_mobile_ui/views/AuthFormView.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+import { View } from "react-native";
+
+import { Display } from "../Display";
+import AuthContainer from "../layouts/AuthContainer";
+import { Typography } from "../Typography";
+
+const Logo = Display.Logo;
+const Text = Typography.Text;
+
+interface AuthFormProps {
+  title?: string;
+  description?: string;
+  onBack?: () => void;
+  FormNode: ReactNode;
+}
+
+function AuthFormView({ title, description, onBack, FormNode }: AuthFormProps) {
+  const renderTitle = () => {
+    if (!title) return null;
+    return (
+      <Text semibold variant="h4">
+        {title}
+      </Text>
+    );
+  };
+
+  const renderDescription = () => {
+    if (!description) return null;
+    return <Text variant="body">{description}</Text>;
+  };
+
+  return (
+    <AuthContainer header={<Logo size="large" />} onBackPress={onBack}>
+      <View className="m-4">
+        <View className="mb-5">
+          {renderTitle()}
+          {renderDescription()}
+        </View>
+        {FormNode}
+      </View>
+    </AuthContainer>
+  );
+}
+
+export default AuthFormView;

package/sincpro_mobile_ui/views/FormViewV2.context.tsx

@@ -0,0 +1,79 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+interface FormViewContextValue<T> {
+  name: string;
+  description?: string;
+  item: T | null;
+  isLoading: boolean;
+  isEmpty: boolean;
+  hasError: boolean;
+  errorMessage?: string;
+  readonly: boolean;
+  showRefreshing: boolean;
+  setShowRefreshing: (value: boolean) => void;
+  onRefresh?: () => Promise<void>;
+  onRetry?: () => void;
+  onBack?: () => void;
+}
+
+const Context = createContext<FormViewContextValue<any> | null>(null);
+
+export function FormViewProvider<T>({
+  name,
+  description,
+  item,
+  isLoading = false,
+  isEmpty = false,
+  hasError = false,
+  errorMessage,
+  readonly = false,
+  onRefresh,
+  onRetry,
+  onBack,
+  children,
+}: {
+  name: string;
+  description?: string;
+  item: T | null;
+  isLoading?: boolean;
+  isEmpty?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+  readonly?: boolean;
+  onRefresh?: () => Promise<void>;
+  onRetry?: () => void;
+  onBack?: () => void;
+  children: ReactNode;
+}) {
+  const [showRefreshing, setShowRefreshing] = useState(false);
+
+  return (
+    <Context.Provider
+      value={{
+        name,
+        description,
+        item,
+        isLoading,
+        isEmpty,
+        hasError,
+        errorMessage,
+        readonly,
+        showRefreshing,
+        setShowRefreshing,
+        onRefresh,
+        onRetry,
+        onBack,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+}
+
+export function useFormView<T>() {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useFormView must be used within FormViewV2");
+  }
+  return context as FormViewContextValue<T>;
+}