@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/layouts/AuthContainer.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from "react";
+import {
+  Dimensions,
+  Keyboard,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import GradientContainer from "./GradientContainer";
+
+interface AuthContainerProps {
+  header: ReactNode;
+  children: ReactNode;
+  onBackPress?: () => void;
+  className?: string;
+}
+
+function AuthContainer({ header, children, onBackPress, className }: AuthContainerProps) {
+  const screenHeight = Dimensions.get("window").height;
+
+  return (
+    <GradientContainer className={cn("flex-1", className)}>
+      <SafeAreaView className="flex-1" edges={["top"]}>
+        <View className="flex-1">
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View
+              className="justify-center items-center relative"
+              style={{ height: screenHeight * 0.3 }}
+            >
+              {onBackPress && (
+                <TouchableOpacity
+                  className="absolute top-4 left-4 p-2 z-[1]"
+                  onPress={onBackPress}
+                >
+                  <Display.Icon
+                    color={theme.text.inverse}
+                    name="arrow-back"
+                    size={24}
+                    type="ionicons"
+                  />
+                </TouchableOpacity>
+              )}
+              {header}
+            </View>
+          </TouchableWithoutFeedback>
+          <View
+            className="flex-1 bg-bg-card rounded-t-3xl shadow-lg"
+            style={{ minHeight: screenHeight * 0.7 }}
+          >
+            <KeyboardAwareScrollView
+              bottomOffset={50}
+              bounces={false}
+              className="flex-1"
+              contentContainerClassName="flex-grow pb-10"
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+            >
+              <View className="p-4">{children}</View>
+            </KeyboardAwareScrollView>
+          </View>
+        </View>
+      </SafeAreaView>
+    </GradientContainer>
+  );
+}
+
+export default AuthContainer;

package/sincpro_mobile_ui/layouts/Container.tsx

@@ -0,0 +1,40 @@
+import React, { FC, ReactNode } from "react";
+import { StatusBar, ViewStyle } from "react-native";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
+
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+
+type ContainerProps = {
+  children: ReactNode;
+  style?: ViewStyle;
+  statusBarColor?: string;
+  barStyle?: "light-content" | "dark-content";
+  statusBarHidden?: boolean;
+  edges?: Edge[];
+  className?: string;
+};
+
+const Container: FC<ContainerProps> = ({
+  children,
+  style,
+  statusBarColor = theme.primary,
+  barStyle = "light-content",
+  statusBarHidden = false,
+  edges = ["top", "bottom", "left", "right"],
+  className,
+}) => {
+  return (
+    <SafeAreaView className={cn("flex-1 bg-bg-page", className)} edges={edges} style={style}>
+      <StatusBar
+        backgroundColor={statusBarColor}
+        barStyle={barStyle}
+        hidden={statusBarHidden}
+        translucent={false}
+      />
+      {children}
+    </SafeAreaView>
+  );
+};
+
+export default Container;

package/sincpro_mobile_ui/layouts/GradientContainer.tsx

@@ -0,0 +1,22 @@
+import { LinearGradient } from "expo-linear-gradient";
+import { ReactNode } from "react";
+
+import { theme } from "../theme";
+
+interface GradientContainerProps {
+  children: ReactNode;
+  style?: object;
+  className?: string;
+}
+
+const GradientContainer = ({ children, style, className }: GradientContainerProps) => {
+  const gradientColors = theme.gradient.primary;
+
+  return (
+    <LinearGradient className={className} colors={[...gradientColors]} style={style}>
+      {children}
+    </LinearGradient>
+  );
+};
+
+export default GradientContainer;

package/sincpro_mobile_ui/layouts/PlainLayout.tsx

@@ -0,0 +1,14 @@
+import { memo, ReactNode } from "react";
+import { View } from "react-native";
+
+interface PlainLayoutProps {
+  children?: ReactNode;
+}
+
+const PlainLayout = memo(({ children }: PlainLayoutProps) => {
+  return <View className="flex-1">{children}</View>;
+});
+
+PlainLayout.displayName = "PlainLayout";
+
+export default PlainLayout;

package/sincpro_mobile_ui/layouts/ScrollContainer.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { cn } from "../theme/tw";
+
+type ScrollContainerProps = {
+  children: ReactNode;
+  contentContainerStyle?: object;
+  className?: string;
+};
+
+function ScrollContainer({
+  children,
+  contentContainerStyle = {},
+  className,
+}: ScrollContainerProps) {
+  return (
+    <SafeAreaView className={cn("flex-1 bg-bg-card", className)}>
+      <StatusBar barStyle="dark-content" translucent={false} />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        className="flex-1"
+      >
+        <ScrollView
+          contentContainerStyle={[{ flexGrow: 1, padding: 16 }, contentContainerStyle]}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <View className="flex-1">{children}</View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+export default ScrollContainer;

package/sincpro_mobile_ui/layouts/TabNavigatorLayout.tsx

@@ -0,0 +1,154 @@
+import React, { Children, isValidElement, ReactElement, ReactNode } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { Display } from "../Display";
+import { Typography } from "../Typography";
+import Container from "./Container";
+
+interface TabNavigatorLayoutProps {
+  className?: string;
+  children?: ReactNode;
+  content?: ReactNode;
+  currentPath?: string;
+  onTabPress?: (path: string) => void;
+  persistentComponent?: ReactNode;
+  persistentRoutePath?: string;
+}
+
+interface TabProps {
+  path: string;
+  label: string;
+  Icon: any;
+  onReselect?: () => void;
+}
+
+interface TabNavigatorProps {
+  items: TabProps[];
+  currentPath?: string;
+  onTabPress?: (path: string) => void;
+}
+
+function TabIcon({ focused, Icon }: { focused: boolean; Icon: any }): ReactElement {
+  return (
+    <View className="justify-center items-center w-10 h-10">
+      {focused && <View className="absolute w-10 h-10 rounded-full bg-primary" />}
+      <Display.Icon
+        color={focused ? "#FFFFFF" : "#6B7280"}
+        customIcon={Icon}
+        size={24}
+        type="custom"
+      />
+    </View>
+  );
+}
+
+function TabNavigator({
+  items,
+  currentPath,
+  onTabPress,
+}: TabNavigatorProps): ReactElement | null {
+  const insets = useSafeAreaInsets();
+  const Text = Typography.Text;
+
+  if (!items.length) return null;
+
+  return (
+    <View
+      className="border-t border-border-default bg-bg-card"
+      style={{ paddingBottom: Math.max(insets.bottom, 8) }}
+    >
+      <View className="mt-2 h-16 flex-row justify-around items-center px-2">
+        {items.map(({ path, label, Icon, onReselect }) => {
+          const focused = currentPath === path;
+
+          return (
+            <TouchableOpacity
+              className="items-center justify-center flex-1"
+              key={path}
+              onPress={() => {
+                if (focused && onReselect) {
+                  onReselect();
+                  return;
+                }
+                onTabPress?.(path);
+              }}
+            >
+              <TabIcon focused={focused} Icon={Icon} />
+              <Text
+                className={`text-xs mt-1.5 font-medium ${focused ? "text-primary" : "text-text-secondary"}`}
+              >
+                {label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function Tabs({ children: tabsChildren }: { children?: ReactNode }) {
+  return <>{tabsChildren}</>;
+}
+
+function Tab(_props: TabProps) {
+  return null;
+}
+
+function TabNavigatorLayoutComponent({
+  className,
+  children,
+  content,
+  currentPath,
+  onTabPress,
+  persistentComponent,
+  persistentRoutePath,
+}: TabNavigatorLayoutProps): ReactElement {
+  const tabs: TabProps[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Tabs) {
+      const tabsChildren = (child.props as { children?: ReactNode }).children;
+
+      Children.forEach(tabsChildren, (tabChild) => {
+        if (!isValidElement(tabChild)) return;
+        if (tabChild.type === Tab) {
+          tabs.push(tabChild.props as TabProps);
+        }
+      });
+    }
+  });
+
+  const isPersistentRouteActive =
+    persistentRoutePath && currentPath ? currentPath.includes(persistentRoutePath) : false;
+
+  return (
+    <Container className={className} edges={["top", "left", "right"]}>
+      <View className="flex-1 bg-bg-page">
+        {persistentComponent && (
+          <View style={{ flex: 1, display: isPersistentRouteActive ? "flex" : "none" }}>
+            {persistentComponent}
+          </View>
+        )}
+        <View style={{ flex: 1, display: isPersistentRouteActive ? "none" : "flex" }}>
+          {content}
+        </View>
+      </View>
+      <TabNavigator currentPath={currentPath} items={tabs} onTabPress={onTabPress} />
+    </Container>
+  );
+}
+
+type TabLayoutComponent = ((props: TabNavigatorLayoutProps) => ReactElement) & {
+  Tabs: typeof Tabs;
+  Tab: typeof Tab;
+};
+
+const TabNavigatorLayout = Object.assign(TabNavigatorLayoutComponent, {
+  Tabs,
+  Tab,
+}) as TabLayoutComponent;
+
+export default TabNavigatorLayout;

package/sincpro_mobile_ui/lib/date.ts

@@ -0,0 +1,149 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import { getLocales } from "expo-localization";
+
+const DEFAULT_TIMEZONE = "America/Costa_Rica";
+const DEFAULT_LOCALE = "es-CR";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+interface FormatDateOptions {
+  locale?: string | null;
+  showTime?: boolean; // Si no se especifica se auto-detecta según si la entrada trae hora
+}
+
+/**
+ * Formatea una fecha en la zona horaria indicada respetando la granularidad de la entrada.
+ *
+ * Reglas de detección:
+ * 1. Si `input` es un string 'YYYY-MM-DD' (solo fecha) => se interpreta como medianoche (00:00:00)
+ *    en la zona horaria destino y se devuelve SOLO la parte de fecha (sin hora).
+ * 2. Si `input` incluye componente de tiempo (ISO completo o Date) => se convierte a la zona destino
+ *    y se muestra fecha + hora (HH:MM) salvo que se fuerce lo contrario mediante `options.showTime`.
+ * 3. Cuando `options.showTime` es `true` o `false` se sobre‑escribe la auto‑detección.
+ * 4. Si `timezone` es null/undefined o inválido se retorna la cadena "Error de formateo".
+ *
+ * Localización:
+ * - Usa el primer locale del dispositivo (`expo-localization`) como predeterminado.
+ * - Puedes forzar uno diferente con `options.locale` (ej: 'es-CR', 'en-US').
+ *
+ * Seguridad de zona horaria:
+ * - El parse de una fecha sin hora NO se hace en la zona local del dispositivo para luego convertir,
+ *   sino directamente en la zona destino para evitar corrimientos de día.
+ *
+ * Ejemplos:
+ * ```ts
+ * formatDate('2025-09-02', 'America/Costa_Rica');
+ * // => "2 de septiembre de 2025"
+ *
+ * formatDate('2025-09-02T18:30:00Z', 'America/Costa_Rica');
+ * // => "2 de septiembre de 2025, 12:30 p. m." (dependiendo del locale real)
+ *
+ * formatDate(new Date('2025-09-02T23:15:00Z'), 'Europe/Madrid');
+ * // => "3 de septiembre de 2025, 01:15" (cambio de día por zona +02)
+ *
+ * formatDate('2025-09-02', 'America/Costa_Rica', { showTime: true });
+ * // => "2 de septiembre de 2025, 12:00 a. m." (fuerza hora)
+ * ```
+ *
+ * @param input      Fecha (string ISO, 'YYYY-MM-DD' o instancia Date)
+ * @param timezone   Zona horaria IANA (ej: 'America/Costa_Rica', 'Asia/Tokyo'). Si es null/undefined usa Costa Rica
+ * @param options    Opcional: locale forzado y/o bandera para mostrar hora
+ * @returns          Cadena localizada o "Error de formateo" si no se puede procesar
+ */
+export function formatDate(
+  input: string | Date,
+  timezone: string | null | undefined,
+  options?: FormatDateOptions,
+): string {
+  // Usar timezone por defecto si no se proporciona
+  const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
+
+  const fallbackLocale = DEFAULT_LOCALE.split("-")[0]; // "es" from "es-CR"
+  const deviceLocale = getLocales()?.[0]?.languageTag ?? fallbackLocale;
+  const usedLocale = options?.locale ?? deviceLocale;
+
+  try {
+    const rawStr = typeof input === "string" ? input : input.toISOString();
+    const isDateOnly = /^\d{4}-\d{2}-\d{2}$/.test(rawStr);
+
+    // Auto-detect showTime si no se pasa explicitamente
+    const effectiveShowTime =
+      options?.showTime !== undefined
+        ? options.showTime
+        : !isDateOnly && /T\d{2}:\d{2}/.test(rawStr); // tiene componente hora
+
+    const dateInstance = isDateOnly
+      ? dayjs.tz(`${rawStr}T00:00:00`, effectiveTimezone)
+      : dayjs.utc(rawStr).tz(effectiveTimezone);
+    const dateInZone = dateInstance.toDate();
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      timeZone: effectiveTimezone,
+    };
+
+    if (effectiveShowTime) {
+      formatOptions.hour = "2-digit";
+      formatOptions.minute = "2-digit";
+    }
+
+    return new Intl.DateTimeFormat(usedLocale, formatOptions).format(dateInZone);
+  } catch (error) {
+    console.warn("Error formateando fecha:", error);
+    return "Error de formateo";
+  }
+}
+
+/**
+ * Formatea una fecha usando automáticamente el timezone por defecto (Costa Rica).
+ * Útil para casos donde no se tiene acceso al timezone del usuario.
+ *
+ * @param input      Fecha (string ISO, 'YYYY-MM-DD' o instancia Date)
+ * @param options    Opcional: locale forzado y/o bandera para mostrar hora
+ * @returns          Cadena localizada en timezone de Costa Rica
+ */
+export function formatDateWithDefaultTimezone(
+  input: string | Date,
+  options?: FormatDateOptions,
+): string {
+  return formatDate(input, DEFAULT_TIMEZONE, options);
+}
+
+/**
+ * Obtiene la fecha actual en formato YYYY-MM-DD en el timezone especificado.
+ * Útil para crear fechas de programación que respeten el timezone del usuario.
+ *
+ * @param timezone Zona horaria IANA. Si es null/undefined usa Costa Rica
+ * @returns Fecha actual en formato YYYY-MM-DD en el timezone especificado
+ */
+export function getCurrentDateInTimezone(timezone?: string | null): string {
+  const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
+  try {
+    return dayjs().tz(effectiveTimezone).format("YYYY-MM-DD");
+  } catch (error) {
+    console.warn("Error obteniendo fecha actual en timezone:", error);
+    return dayjs().format("YYYY-MM-DD"); // Fallback to local
+  }
+}
+
+/**
+ * Obtiene la fecha y hora actual en formato ISO en el timezone especificado.
+ * Útil para timestamps que necesiten reflejar el timezone del usuario.
+ *
+ * @param timezone Zona horaria IANA. Si es null/undefined usa Costa Rica
+ * @returns Fecha actual en formato ISO en el timezone especificado
+ */
+export function getCurrentDateTimeInTimezone(timezone?: string | null): string {
+  const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
+  try {
+    return dayjs().tz(effectiveTimezone).toISOString();
+  } catch (error) {
+    console.warn("Error obteniendo fecha/hora actual en timezone:", error);
+    return dayjs().toISOString(); // Fallback to local
+  }
+}

package/sincpro_mobile_ui/lib/icon.ts

@@ -0,0 +1,10 @@
+export type IconType =
+  | "ionicons"
+  | "fontawesome"
+  | "material"
+  | "fontawesome5"
+  | "simplelineicons"
+  | "antdesign"
+  | "custom"
+  | "feather"
+  | "MaterialCommunityIcons";

package/sincpro_mobile_ui/lib/monetary.ts

@@ -0,0 +1,33 @@
+import { Big } from "big.js";
+
+export function parseToMonetaryNumber(input?: string | number | null): number {
+  if (input == null) return 0;
+  const s = String(input).trim();
+  if (!/[0-9]/.test(s)) return 0;
+
+  const cleaned = s.replace(/[^0-9.-]+/g, "");
+  try {
+    return Number(new Big(cleaned).toString());
+  } catch {
+    return 0;
+  }
+}
+
+export function formatTwoDecimals(value?: number | string | null): string {
+  const raw = parseToMonetaryNumber(value);
+  const rounded = new Big(raw).toFixed(2);
+  const num = Number(rounded);
+  return new Intl.NumberFormat("de-DE", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(num);
+}
+
+export function calculateDiscountedTotal(total: number, discount: number): number {
+  if (discount === 0) {
+    return 0;
+  }
+
+  const result = (parseToMonetaryNumber(total) * discount) / 100;
+  return parseToMonetaryNumber(result);
+}

package/sincpro_mobile_ui/lib/quantity.ts

@@ -0,0 +1,52 @@
+import { Big } from "big.js";
+
+/** Redondea a la precisión indicada usando round half up */
+export function roundTo(value: number, precision: number): number {
+  if (isNaN(value)) return 0;
+  const factor = new Big(10).pow(precision);
+  return Number(new Big(value).times(factor).round(0, 1).div(factor).toString());
+}
+
+/** Normaliza la cantidad al múltiplo más cercano del incremento mínimo */
+export function normalizeQuantity(
+  value: number,
+  minIncrement: number,
+  precision: number,
+): number {
+  if (!isFinite(value)) return 0;
+  if (value < 0) value = 0;
+  if (minIncrement <= 0) return roundTo(value, precision);
+  const steps = Math.round(value / minIncrement);
+  const normalized = steps * minIncrement;
+  return roundTo(normalized, precision);
+}
+
+/** Convierte un valor a entero escalado según precisión para cálculos seguros */
+export function toScaledInt(value: number, precision: number): number {
+  if (!isFinite(value)) return 0;
+  const factor = Math.pow(10, precision);
+  return Math.round(value * factor);
+}
+
+export function fromScaledInt(scaled: number, precision: number): number {
+  const factor = Math.pow(10, precision);
+  return scaled / factor;
+}
+
+/** Multiplicación segura evitando errores binarios típicos */
+export function safeMul(a: number, b: number, precision: number): number {
+  const factor = Math.pow(10, precision);
+  return (Math.round(a * factor) * Math.round(b * factor)) / (factor * factor);
+}
+
+/** Valida si un valor es múltiplo del incremento mínimo dentro de la precisión */
+export function isMultipleOfIncrement(
+  value: number,
+  minIncrement: number,
+  precision: number,
+): boolean {
+  if (minIncrement <= 0) return true;
+  const scaledValue = toScaledInt(value, precision + 3); // extra precisión para reducir error
+  const scaledInc = toScaledInt(minIncrement, precision + 3);
+  return scaledValue % scaledInc === 0;
+}

package/sincpro_mobile_ui/lib/serializer.ts

@@ -0,0 +1,59 @@
+export function safeJsonStringify(obj: any, pretty: boolean = false): string {
+  const seen = new WeakSet();
+
+  if (pretty) {
+    return JSON.stringify(
+      obj,
+      (key, value) => {
+        if (key.startsWith("_")) {
+          return undefined;
+        }
+
+        if (value instanceof Map) {
+          return Object.fromEntries(value);
+        }
+
+        if (value instanceof Set) {
+          return Array.from(value);
+        }
+
+        if (typeof value === "object" && value !== null) {
+          if (seen.has(value)) {
+            return "[Circular]";
+          }
+          seen.add(value);
+        }
+
+        return value;
+      },
+      2,
+    );
+  }
+
+  return JSON.stringify(obj, (key, value) => {
+    if (key.startsWith("_")) {
+      return undefined;
+    }
+
+    if (value instanceof Map) {
+      return Object.fromEntries(value);
+    }
+
+    if (value instanceof Set) {
+      return Array.from(value);
+    }
+
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return "[Circular]";
+      }
+      seen.add(value);
+    }
+
+    return value;
+  });
+}
+
+export function safeJsonParse(json: string): any {
+  return JSON.parse(json);
+}

package/sincpro_mobile_ui/lib/timezone.ts

@@ -0,0 +1,4 @@
+export interface TimezoneLocale {
+  timezone: string;
+  locale: string;
+}

package/sincpro_mobile_ui/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/sincpro_mobile_ui/notifications/index.ts

@@ -0,0 +1,2 @@
+// Notification components will be added here
+export {};