@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Display/Display.MenuButton.tsx

@@ -0,0 +1,103 @@
+import { ComponentType, ReactNode } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { theme } from "../theme";
+import { tv, type VariantProps } from "../theme/tw";
+import { Typography } from "../Typography";
+
+const menuButton = tv({
+  slots: {
+    container: "flex-row items-center py-3 px-4 bg-bg-card",
+    iconContainer: "mr-3 w-8 h-8 rounded-lg items-center justify-center",
+    content: "flex-1",
+    label: "",
+    rightContainer: "ml-2",
+    chevronContainer: "ml-2 w-5 h-5 items-center justify-center",
+    chevron: "text-xl",
+  },
+  variants: {
+    variant: {
+      default: {
+        iconContainer: "bg-bg-hover",
+        label: "text-text-primary",
+      },
+      danger: {
+        iconContainer: "bg-danger-light",
+        label: "text-danger",
+      },
+    },
+    showDivider: {
+      true: {
+        container: "border-b border-border-default",
+      },
+    },
+    disabled: {
+      true: {
+        container: "opacity-40",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    showDivider: true,
+    disabled: false,
+  },
+});
+
+interface MenuButtonProps extends VariantProps<typeof menuButton> {
+  icon?: ComponentType<{ size?: number; color?: string }>;
+  label: string;
+  description?: string;
+  onPress?: () => void;
+  rightComponent?: ReactNode;
+  className?: string;
+}
+
+function MenuButton({
+  icon: Icon,
+  label,
+  description,
+  onPress,
+  rightComponent,
+  showDivider = true,
+  variant = "default",
+  disabled = false,
+  className,
+}: MenuButtonProps) {
+  const styles = menuButton({ variant, showDivider, disabled });
+  const isDanger = variant === "danger";
+  const isClickable = !!onPress && !disabled;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.5}
+      className={styles.container({ className })}
+      disabled={disabled || !onPress}
+      onPress={onPress}
+    >
+      {Icon && (
+        <View className={styles.iconContainer()}>
+          <Icon color={isDanger ? theme.danger : theme.text.secondary} size={20} />
+        </View>
+      )}
+      <View className={styles.content()}>
+        <Typography.Text className={styles.label()} variant="body">
+          {label}
+        </Typography.Text>
+        {description && (
+          <Typography.Text className="text-text-secondary" variant="bodySmall">
+            {description}
+          </Typography.Text>
+        )}
+      </View>
+      {rightComponent && <View className={styles.rightContainer()}>{rightComponent}</View>}
+      {!rightComponent && isClickable && (
+        <View className={styles.chevronContainer()}>
+          <Typography.Text className={styles.chevron()}>›</Typography.Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+export default MenuButton;

package/sincpro_mobile_ui/Display/Display.Monetary.tsx

@@ -0,0 +1,60 @@
+import type { StyleProp, TextStyle } from "react-native";
+
+import { formatTwoDecimals } from "../lib/monetary";
+import { typographyVariants } from "../theme/typography";
+import { Typography } from "../Typography";
+
+interface MonetaryFieldProps {
+  value: number | string | null | undefined;
+  currencySymbol?: string;
+  prefix?: string;
+  /** @deprecated Use className="text-{color}" instead */
+  color?: string;
+  textVariant?: keyof typeof typographyVariants;
+  /** @deprecated Use className for styling */
+  style?: StyleProp<TextStyle>;
+  /** @deprecated Use className="text-{color}" instead */
+  symbolColor?: string;
+  semibold?: boolean;
+  bold?: boolean;
+  className?: string;
+}
+
+function MonetaryField({
+  value,
+  currencySymbol = "₡",
+  prefix = "",
+  color,
+  textVariant = "body",
+  style = {},
+  symbolColor,
+  semibold = true,
+  bold = false,
+  className,
+}: MonetaryFieldProps) {
+  const isEmptyValue = value === null || value === undefined || value === "";
+  const formatted = isEmptyValue ? "0.00" : formatTwoDecimals(value);
+
+  return (
+    <Typography.Text
+      bold={bold}
+      className={className}
+      color={color}
+      semibold={semibold && !bold}
+      style={style as any}
+      variant={textVariant}
+    >
+      <Typography.Text
+        className={className}
+        color={symbolColor || color}
+        variant={textVariant}
+      >
+        {currencySymbol}
+      </Typography.Text>{" "}
+      {prefix && `${prefix} `}
+      {formatted}
+    </Typography.Text>
+  );
+}
+
+export default MonetaryField;

package/sincpro_mobile_ui/Display/index.ts

@@ -0,0 +1,28 @@
+import Avatar from "./Display.Avatar";
+import Badge, { type BadgeProps, BadgeVariants } from "./Display.Badge";
+import CopyableText from "./Display.CopyableText";
+import CountRecords from "./Display.CountRecords";
+import Date from "./Display.Date";
+import Divider from "./Display.Divider";
+import Icon from "./Display.Icon";
+import Logo from "./Display.Logo";
+import MenuButton from "./Display.MenuButton";
+import Monetary from "./Display.Monetary";
+
+export const Display = {
+  Badge,
+  BadgeVariants,
+  Avatar,
+  CopyableText,
+  Date,
+  Divider,
+  Icon,
+  CountRecords,
+  Logo,
+  MenuButton,
+  Monetary,
+};
+
+export { type BadgeProps, BadgeVariants };
+
+export default Display;

package/sincpro_mobile_ui/Feedback/ErrorBoundary.tsx

@@ -0,0 +1,51 @@
+import React, { Component, ReactNode } from "react";
+
+import FeedbackError from "./Feedback.Error";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: (error: Error, retry: () => void) => ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error, this.handleRetry);
+      }
+
+      return (
+        <FeedbackError
+          message={this.state.error.message || "Ocurrió un error inesperado"}
+          onRetry={this.handleRetry}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/sincpro_mobile_ui/Feedback/Feedback.DomainSplashScreen.tsx

@@ -0,0 +1,135 @@
+import type React from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+import GradientContainer from "../layouts/GradientContainer";
+import { Typography } from "../Typography";
+
+interface DomainSplashScreenProps {
+  domainName: string;
+  isLoading: boolean;
+  children: ReactNode;
+  onComplete?: () => void;
+  minDuration?: number;
+}
+
+function DomainSplashScreen({
+  domainName,
+  isLoading,
+  children,
+  onComplete,
+  minDuration = 300,
+}: DomainSplashScreenProps) {
+  const progressValue = useSharedValue(0);
+  const opacityValue = useSharedValue(1);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const handleComplete = useCallback(() => {
+    if (onComplete) {
+      onComplete();
+    }
+  }, [onComplete]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      progressValue.value = withTiming(100, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+
+      setTimeout(() => {
+        opacityValue.value = withTiming(0, {
+          duration: 400,
+          easing: Easing.out(Easing.ease),
+        });
+      }, 100);
+      return;
+    }
+
+    const startTime = Date.now();
+    const totalDuration = 2500;
+
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const newProgress = Math.min((elapsed / totalDuration) * 100, 100);
+      progressValue.value = newProgress;
+
+      if (newProgress >= 100) {
+        clearInterval(interval);
+        setIsComplete(true);
+        setTimeout(() => {
+          opacityValue.value = withTiming(
+            0,
+            {
+              duration: 800,
+              easing: Easing.out(Easing.ease),
+            },
+            (finished) => {
+              if (finished) {
+                scheduleOnRN(handleComplete);
+              }
+            },
+          );
+        }, 500);
+      }
+    }, 50);
+
+    return () => clearInterval(interval);
+  }, [isLoading]);
+
+  const progressBarStyle = useAnimatedStyle(() => ({
+    width: `${progressValue.value}%`,
+  }));
+
+  const splashStyle = useAnimatedStyle(() => ({
+    opacity: opacityValue.value,
+  }));
+
+  return (
+    <View style={styles.container}>
+      {children}
+      <Animated.View
+        pointerEvents={isLoading ? "auto" : "none"}
+        style={[StyleSheet.absoluteFillObject, splashStyle]}
+      >
+        <GradientContainer className="flex-1 justify-center items-center px-8">
+          <View className="w-full items-center gap-6">
+            <Typography.Text className="text-2xl font-bold text-white">
+              {isComplete ? "¡Listo!" : `Cargando ${domainName}`}
+            </Typography.Text>
+
+            {!isComplete && (
+              <View className="w-full bg-transparent border border-white/30 rounded-full h-4 overflow-hidden">
+                <Animated.View
+                  className="bg-white rounded-full h-4 shadow-lg"
+                  style={progressBarStyle}
+                />
+              </View>
+            )}
+
+            {isComplete && (
+              <Typography.Text className="text-sm text-white/80">
+                Ya puedes comenzar a usar {domainName}.
+              </Typography.Text>
+            )}
+          </View>
+        </GradientContainer>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default DomainSplashScreen;

package/sincpro_mobile_ui/Feedback/Feedback.Empty.tsx

@@ -0,0 +1,29 @@
+import { View } from "react-native";
+
+import { Display } from "../Display";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+interface EmptyProps {
+  handleGoHome?: () => void;
+  className?: string;
+}
+
+function Empty({ handleGoHome, className }: EmptyProps) {
+  return (
+    <View className={cn("flex-1 items-center justify-center px-4", className)}>
+      <Display.Icon name="sad-cry" size={80} type="fontawesome5" />
+      <Typography.Text className="pt-4 text-text-primary" semibold variant="h3">
+        ¡Oops!
+      </Typography.Text>
+      <Typography.Text
+        className="pt-2 text-center text-base leading-5.5 text-text-secondary"
+        variant="h5"
+      >
+        No se encontraron registros disponibles.
+      </Typography.Text>
+    </View>
+  );
+}
+
+export default Empty;

package/sincpro_mobile_ui/Feedback/Feedback.Error.tsx

@@ -0,0 +1,47 @@
+import { View } from "react-native";
+
+import { Display } from "../Display";
+import Button from "../Form/Form.Button";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+interface ErrorProps {
+  message?: string;
+  onRetry?: () => void;
+  onBack?: () => void;
+  onHome?: () => void;
+  className?: string;
+}
+
+function Error({ message, onRetry, onBack, onHome, className }: ErrorProps) {
+  return (
+    <View className={cn("flex-1 items-center justify-center px-4", className)}>
+      <Display.Icon color="#ef4444" name="exclamation-circle" size={80} type="fontawesome5" />
+      <Typography.Text className="pt-4 text-text-primary" semibold variant="h3">
+        ¡Error!
+      </Typography.Text>
+      <Typography.Text
+        className="pt-2 text-center text-base leading-5.5 text-text-secondary"
+        variant="h5"
+      >
+        {message || "Ocurrió un error al cargar la información"}
+      </Typography.Text>
+      <View className="mt-8 w-full gap-3">
+        {onRetry && <Button className="w-full" onPress={onRetry} title="Reintentar" />}
+        {onBack && (
+          <Button className="w-full" onPress={onBack} title="Volver" variant="secondary" />
+        )}
+        {onHome && (
+          <Button
+            className="w-full"
+            onPress={onHome}
+            title="Ir al inicio"
+            variant="outline"
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+export default Error;

package/sincpro_mobile_ui/Feedback/Feedback.Loading.tsx

@@ -0,0 +1,27 @@
+import type React from "react";
+import { View } from "react-native";
+
+import { cn } from "../theme/tw";
+import Spinner from "./Feedback.Spinner";
+
+interface LoadingStateProps {
+  message?: string;
+  size?: "small" | "large";
+  style?: object;
+  className?: string;
+}
+
+function LoadingState({
+  message = "Actualizando lista de órdenes",
+  size = "small",
+  style = {},
+  className,
+}: LoadingStateProps) {
+  return (
+    <View className={cn("flex-1 justify-center items-center", className)} style={style}>
+      <Spinner className="mb-5" size={size} text={message} />
+    </View>
+  );
+}
+
+export default LoadingState;

package/sincpro_mobile_ui/Feedback/Feedback.Spinner.tsx

@@ -0,0 +1,34 @@
+import type React from "react";
+import { ActivityIndicator, View, type ViewStyle } from "react-native";
+
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+export interface SpinnerProps {
+  size?: "small" | "large";
+  color?: string;
+  text?: string;
+  style?: ViewStyle;
+  className?: string;
+}
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = "large",
+  color = "#FF7B0A",
+  text,
+  style,
+  className,
+}) => {
+  return (
+    <View className={cn("items-center justify-center", className)} style={style}>
+      <ActivityIndicator color={color} size={size} />
+      {text && (
+        <Typography.Text className="mt-2.5 text-base" variant="body">
+          {text}
+        </Typography.Text>
+      )}
+    </View>
+  );
+};
+
+export default Spinner;

package/sincpro_mobile_ui/Feedback/Feedback.Splash.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Image, type ImageSourcePropType, View } from "react-native";
+
+import GradientContainer from "../layouts/GradientContainer";
+import Loading from "./Feedback.Loading";
+
+interface SplashScreenProps {
+  isReady: boolean;
+  logo?: ImageSourcePropType;
+  minDuration?: number;
+  message?: string;
+  children?: ReactNode;
+}
+
+function renderLogo(logo?: ImageSourcePropType) {
+  if (!logo) {
+    return null;
+  }
+  return <Image className="w-[250px] h-[200px] mb-12" resizeMode="contain" source={logo} />;
+}
+
+function Splash({
+  isReady,
+  logo,
+  minDuration = 800,
+  message = "Inicializando...",
+  children,
+}: SplashScreenProps) {
+  const [showContent, setShowContent] = useState(false);
+  const minDurationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (minDurationTimeoutRef.current) {
+      clearTimeout(minDurationTimeoutRef.current);
+    }
+
+    if (!isReady) {
+      setShowContent(false);
+      return;
+    }
+
+    minDurationTimeoutRef.current = setTimeout(() => {
+      setShowContent(true);
+    }, minDuration);
+
+    return () => {
+      if (minDurationTimeoutRef.current) {
+        clearTimeout(minDurationTimeoutRef.current);
+      }
+    };
+  }, [isReady, minDuration]);
+
+  if (!showContent) {
+    return (
+      <GradientContainer className="flex-1">
+        <View className="flex-1 justify-center items-center">
+          {renderLogo(logo)}
+          <Loading message={message} size="large" />
+        </View>
+      </GradientContainer>
+    );
+  }
+
+  return children;
+}
+
+export default Splash;

package/sincpro_mobile_ui/Feedback/index.ts

@@ -0,0 +1,17 @@
+import DomainSplashScreen from "./Feedback.DomainSplashScreen";
+import Empty from "./Feedback.Empty";
+import Error from "./Feedback.Error";
+import Loading from "./Feedback.Loading";
+import Spinner from "./Feedback.Spinner";
+
+export { ErrorBoundary } from "./ErrorBoundary";
+
+export const Feedback = {
+  Loading,
+  Spinner,
+  Empty,
+  Error,
+  DomainSplashScreen,
+};
+
+export default Feedback;