@sincpro/mobile-ui 0.1.2 → 0.1.4

package/sincpro_mobile_ui/theme/globals.css

@@ -1,67 +0,0 @@
-/**
- * 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

@@ -1,4 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/**
- * ============================================================================
- * 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

@@ -1,16 +0,0 @@
-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

@@ -1,109 +0,0 @@
-/**
- * ============================================================================
- * 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

@@ -1,271 +0,0 @@
-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

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

package/sincpro_mobile_ui/views/AuthFormView.tsx

@@ -1,46 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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>;
-}