@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/primitives/BaseButton.tsx

@@ -0,0 +1,404 @@
+import { LinearGradient } from "expo-linear-gradient";
+import type React from "react";
+import { FC } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { tv, type VariantProps } from "../theme/tw";
+import { Typography } from "../Typography";
+
+// ============================================================================
+// STYLE VARIANTS
+// ============================================================================
+
+const button = tv({
+  base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+  variants: {
+    variant: {
+      primary: "shadow-sm",
+      accent: "shadow-sm",
+      secondary: "bg-bg-card border border-primary shadow-sm",
+      outline: "bg-transparent border border-primary",
+      outlineDanger: "bg-transparent border border-danger",
+      outlineBlack: "bg-transparent border border-border-strong",
+      flat: "bg-text-primary/10",
+      link: "bg-transparent min-h-0",
+      transparent: "bg-transparent border border-border-light",
+    },
+    size: {
+      small: "py-1.5 px-3 min-h-[36px]",
+      medium: "py-2.5 px-4 min-h-[44px]",
+      large: "py-3 px-5 min-h-[48px]",
+    },
+    disabled: {
+      true: "opacity-70",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "medium",
+  },
+});
+
+const buttonIcon = tv({
+  base: "rounded-lg items-center justify-center aspect-square",
+  variants: {
+    variant: {
+      primary: "shadow-sm",
+      accent: "shadow-sm",
+      secondary: "bg-bg-card border border-primary shadow-sm",
+      outline: "bg-transparent border border-primary",
+      outlineDanger: "bg-transparent border border-danger",
+      outlineBlack: "bg-transparent border border-border-strong",
+      flat: "bg-text-primary/10",
+      link: "bg-transparent",
+      transparent: "bg-transparent border border-border-light",
+    },
+    size: {
+      small: "w-9 h-9",
+      medium: "w-11 h-11",
+      large: "w-[52px] h-[52px]",
+    },
+    disabled: {
+      true: "opacity-70",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "medium",
+  },
+});
+
+const textColor = tv({
+  variants: {
+    variant: {
+      primary: "text-white",
+      accent: "text-white",
+      secondary: "text-primary",
+      outline: "text-primary",
+      outlineDanger: "text-danger",
+      outlineBlack: "text-text-primary",
+      flat: "text-text-primary",
+      link: "text-primary",
+      transparent: "text-white",
+    },
+    disabled: {
+      true: "opacity-50",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      disabled: true,
+      className: "text-white/70",
+    },
+    {
+      variant: "accent",
+      disabled: true,
+      className: "text-white/70",
+    },
+    {
+      variant: "transparent",
+      disabled: true,
+      className: "text-white/70",
+    },
+    {
+      variant: ["secondary", "outline", "link"],
+      disabled: true,
+      className: "text-text-secondary",
+    },
+    {
+      variant: "outlineDanger",
+      disabled: true,
+      className: "text-danger/50",
+    },
+    {
+      variant: "outlineBlack",
+      disabled: true,
+      className: "text-text-primary/50",
+    },
+    {
+      variant: "flat",
+      disabled: true,
+      className: "text-text-primary/50",
+    },
+  ],
+  defaultVariants: {
+    variant: "primary",
+    disabled: false,
+  },
+});
+
+// ============================================================================
+// COLOR & SIZE MAPS (Dynamic with theme)
+// ============================================================================
+
+function getLoadingColorDynamic(variant: string): string {
+  const map: Record<string, string> = {
+    primary: theme.text.inverse,
+    accent: theme.text.inverse,
+    secondary: theme.primary,
+    outline: theme.primary,
+    outlineDanger: theme.danger,
+    outlineBlack: theme.text.primary,
+    flat: theme.text.primary,
+    link: theme.primary,
+    transparent: theme.text.inverse,
+  };
+  return map[variant] ?? theme.text.inverse;
+}
+
+function getIconColorDynamic(variant: string, disabled: boolean): string {
+  if (disabled) {
+    const disabledMap: Record<string, string> = {
+      primary: theme.icon.inverse + "70",
+      accent: theme.icon.inverse + "70",
+      secondary: theme.icon.disabled,
+      outline: theme.icon.disabled,
+      outlineDanger: theme.danger + "7f",
+      outlineBlack: theme.text.primary + "7f",
+      flat: theme.text.primary + "7f",
+      link: theme.icon.disabled,
+      transparent: theme.icon.inverse + "70",
+    };
+    return disabledMap[variant] ?? theme.icon.disabled;
+  }
+
+  const enabledMap: Record<string, string> = {
+    primary: theme.icon.inverse,
+    accent: theme.icon.inverse,
+    secondary: theme.primary,
+    outline: theme.primary,
+    outlineDanger: theme.danger,
+    outlineBlack: theme.text.primary,
+    flat: theme.text.primary,
+    link: theme.primary,
+    transparent: theme.icon.inverse,
+  };
+  return enabledMap[variant] ?? theme.icon.inverse;
+}
+
+const iconSizeMap = {
+  small: 16,
+  medium: 20,
+  large: 28,
+} as const;
+
+const textVariantMap = {
+  small: "buttonSmall" as const,
+  medium: "button" as const,
+  large: "buttonLarge" as const,
+} as const;
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+function getLoadingColor(variant: string): string {
+  return getLoadingColorDynamic(variant);
+}
+
+function getIconColor(variant: string, disabled: boolean): string {
+  return getIconColorDynamic(variant, disabled);
+}
+
+function getIconSize(size: string): number {
+  return iconSizeMap[size as keyof typeof iconSizeMap] ?? 20;
+}
+
+function getTextVariant(size: string): "buttonSmall" | "button" | "buttonLarge" {
+  return textVariantMap[size as keyof typeof textVariantMap] ?? "button";
+}
+
+// ============================================================================
+// BASE BUTTON COMPONENT (NO Dialog dependency)
+// ============================================================================
+
+export interface BaseButtonProps extends VariantProps<typeof button> {
+  title: string;
+  onPress?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  icon?: React.ReactNode;
+}
+
+export const BaseButton: FC<BaseButtonProps> = ({
+  title,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  loading = false,
+  disabled = false,
+  className,
+  icon,
+}) => {
+  const textColorClass = textColor({
+    variant: (variant as any) ?? "primary",
+    disabled,
+  });
+  const loadingColorValue = getLoadingColor((variant as any) ?? "primary");
+  const textVariantValue = getTextVariant((size as any) ?? "medium");
+
+  if (variant === "link") {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.7}
+        className={className}
+        disabled={disabled || loading}
+        onPress={onPress}
+      >
+        {loading ? (
+          <ActivityIndicator color={loadingColorValue} size="small" />
+        ) : (
+          <Typography.Text className={textColorClass} variant={textVariantValue}>
+            {title}
+          </Typography.Text>
+        )}
+      </TouchableOpacity>
+    );
+  }
+
+  if (variant === "primary" || variant === "accent") {
+    const gradientColors: readonly [string, string] =
+      variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
+
+    const hasFlex = className?.includes("flex-1");
+
+    return (
+      <View className={className} style={hasFlex ? { flex: 1 } : undefined}>
+        <LinearGradient
+          colors={gradientColors}
+          end={{ x: 1, y: 1 }}
+          start={{ x: 0, y: 0 }}
+          style={{
+            borderRadius: 8,
+            opacity: disabled ? 0.7 : 1,
+          }}
+        >
+          <TouchableOpacity
+            activeOpacity={0.8}
+            disabled={disabled || loading}
+            onPress={onPress}
+          >
+            <View
+              className={button({ size, disabled })}
+              style={{ backgroundColor: "transparent" }}
+            >
+              {icon && !loading && <View className="mr-2">{icon}</View>}
+              {loading ? (
+                <ActivityIndicator color={loadingColorValue} size="small" />
+              ) : (
+                <Typography.Text className={textColorClass} variant={textVariantValue}>
+                  {title}
+                </Typography.Text>
+              )}
+            </View>
+          </TouchableOpacity>
+        </LinearGradient>
+      </View>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      className={button({ variant, size, disabled, className })}
+      disabled={disabled || loading}
+      onPress={onPress}
+    >
+      {icon && !loading && <View className="mr-2">{icon}</View>}
+      {loading ? (
+        <ActivityIndicator color={loadingColorValue} size="small" />
+      ) : (
+        <Typography.Text className={textColorClass} variant={textVariantValue}>
+          {title}
+        </Typography.Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+// ============================================================================
+// BASE BUTTON ICON COMPONENT (NO Dialog dependency)
+// ============================================================================
+
+export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon> {
+  icon: string;
+  onPress?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const BaseButtonIcon: FC<BaseButtonIconProps> = ({
+  icon,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  loading = false,
+  disabled = false,
+  className,
+}) => {
+  const iconColorValue = getIconColor((variant as any) ?? "primary", disabled);
+  const loadingColorValue = getLoadingColor((variant as any) ?? "primary");
+  const iconSizeValue = getIconSize((size as any) ?? "medium");
+
+  if (variant === "primary" || variant === "accent") {
+    const gradientColors: readonly [string, string] =
+      variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
+
+    return (
+      <LinearGradient
+        colors={gradientColors}
+        end={{ x: 1, y: 1 }}
+        start={{ x: 0, y: 0 }}
+        style={{
+          borderRadius: 8,
+          opacity: disabled ? 0.7 : 1,
+        }}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          disabled={disabled || loading}
+          onPress={onPress}
+        >
+          <View
+            className={buttonIcon({ size, disabled })}
+            style={{ backgroundColor: "transparent" }}
+          >
+            {loading ? (
+              <ActivityIndicator color={loadingColorValue} size="small" />
+            ) : (
+              <Display.Icon color={iconColorValue} name={icon} size={iconSizeValue} />
+            )}
+          </View>
+        </TouchableOpacity>
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      className={buttonIcon({ variant, size, disabled, className })}
+      disabled={disabled || loading}
+      onPress={onPress}
+    >
+      {loading ? (
+        <ActivityIndicator color={loadingColorValue} size="small" />
+      ) : (
+        <Display.Icon color={iconColorValue} name={icon} size={iconSizeValue} />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+// ============================================================================
+// COMPOUND COMPONENT
+// ============================================================================
+
+const BaseButtonWithIcon = Object.assign(BaseButton, { Icon: BaseButtonIcon });
+
+export default BaseButtonWithIcon;

package/sincpro_mobile_ui/primitives/Box.tsx

@@ -0,0 +1,14 @@
+import { View, ViewProps } from "react-native";
+
+import { cn } from "../theme/tw";
+
+interface BoxProps extends ViewProps {
+  className?: string;
+}
+
+function Box({ className, style, ...props }: BoxProps) {
+  return <View className={cn(className)} style={style} {...props} />;
+}
+
+export default Box;
+export { Box };

package/sincpro_mobile_ui/primitives/Row.tsx

@@ -0,0 +1,55 @@
+import { View, ViewProps } from "react-native";
+
+import { cn } from "../theme/tw";
+
+interface RowProps extends ViewProps {
+  spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+  align?: "start" | "center" | "end" | "stretch";
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+  wrap?: boolean;
+  className?: string;
+}
+
+function Row({
+  spacing = 2,
+  align = "center",
+  justify = "start",
+  wrap = false,
+  className,
+  style,
+  ...props
+}: RowProps) {
+  const alignMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+  };
+
+  const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+  };
+
+  return (
+    <View
+      className={cn(
+        "flex flex-row",
+        `gap-${spacing}`,
+        alignMap[align],
+        justifyMap[justify],
+        wrap && "flex-wrap",
+        className,
+      )}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+export default Row;
+export { Row };

package/sincpro_mobile_ui/primitives/Stack.tsx

@@ -0,0 +1,29 @@
+import { View, ViewProps } from "react-native";
+
+import { cn } from "../theme/tw";
+
+interface StackProps extends ViewProps {
+  spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+  align?: "start" | "center" | "end" | "stretch";
+  className?: string;
+}
+
+function Stack({ spacing = 4, align = "stretch", className, style, ...props }: StackProps) {
+  const alignMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+  };
+
+  return (
+    <View
+      className={cn("flex flex-col", `gap-${spacing}`, alignMap[align], className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+export default Stack;
+export { Stack };

package/sincpro_mobile_ui/primitives/index.ts

@@ -0,0 +1,3 @@
+export { Box } from "./Box";
+export { Row } from "./Row";
+export { Stack } from "./Stack";

package/sincpro_mobile_ui/providers/index.ts

@@ -0,0 +1 @@
+// Empty - all providers removed

package/sincpro_mobile_ui/theme/active.ts

@@ -0,0 +1,12 @@
+import { DEFAULT_THEME } from "./default";
+import type { ThemeTokens } from "./types";
+
+const activeTheme: ThemeTokens = { ...DEFAULT_THEME };
+
+export function setActiveTheme(tokens: ThemeTokens): void {
+  Object.assign(activeTheme as object, tokens);
+}
+
+export function getActiveTheme(): ThemeTokens {
+  return activeTheme;
+}

package/sincpro_mobile_ui/theme/components/ThemedActivityIndicator.tsx

@@ -0,0 +1,29 @@
+import type { ActivityIndicatorProps } from "react-native";
+import { ActivityIndicator as RNActivityIndicator } from "react-native";
+
+/**
+ * ============================================================================
+ * THEMED ACTIVITY INDICATOR
+ * ============================================================================
+ *
+ * Wrapper de ActivityIndicator que usa color primary.
+ * NOTA: Como no podemos usar hooks, usa el color hardcoded de Distribution.
+ * Para cambiar color, pasar prop color directamente.
+ *
+ * USO:
+ * ```tsx
+ * <ThemedActivityIndicator />
+ * <ThemedActivityIndicator size="large" color="#8B5CF6" />
+ * ```
+ */
+
+interface ThemedActivityIndicatorProps extends Omit<ActivityIndicatorProps, "color"> {
+  color?: string;
+}
+
+export function ThemedActivityIndicator({
+  color = "#0075FF",
+  ...props
+}: ThemedActivityIndicatorProps) {
+  return <RNActivityIndicator color={color} {...props} />;
+}

package/sincpro_mobile_ui/theme/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * ============================================================================
+ * THEMED COMPONENTS - Barrel Export
+ * ============================================================================
+ *
+ * Componentes que necesitan acceso a tokens del theme vía hook.
+ * Estos son el 1% de casos donde className no es suficiente.
+ */
+
+export { ThemedActivityIndicator } from "./ThemedActivityIndicator";

package/sincpro_mobile_ui/theme/default.ts

@@ -0,0 +1,81 @@
+import type { ThemeTokens } from "./types";
+
+export const DEFAULT_THEME: ThemeTokens = {
+  name: "default",
+  primary: "#2563EB",
+  secondary: "#64748B",
+  accent: "#F59E0B",
+  bg: {
+    page: "#F9FAFB",
+    card: "#FFFFFF",
+    popover: "#FFFFFF",
+    muted: "#F3F4F6",
+    accent: "#EFF6FF",
+    hover: "#F3F4F6",
+    disabled: "#F3F4F6",
+  },
+  text: {
+    primary: "#0F172A",
+    secondary: "#475569",
+    tertiary: "#94A3B8",
+    muted: "#64748B",
+    accent: "#1E40AF",
+    inverse: "#FFFFFF",
+    disabled: "#94A3B8",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#FFFFFF",
+    onAccent: "#FFFFFF",
+    onDanger: "#FFFFFF",
+    onSuccess: "#FFFFFF",
+  },
+  icon: {
+    primary: "#0F172A",
+    secondary: "#64748B",
+    tertiary: "#94A3B8",
+    inverse: "#FFFFFF",
+    disabled: "#CBD5E1",
+  },
+  border: {
+    default: "#E5E7EB",
+    light: "#F3F4F6",
+    strong: "#D1D5DB",
+    focus: "#2563EB",
+  },
+  success: "#16A34A",
+  warning: "#F59E0B",
+  danger: "#DC2626",
+  info: "#2563EB",
+  successLight: "#DCFCE7",
+  warningLight: "#FEF3C7",
+  dangerLight: "#FEE2E2",
+  infoLight: "#DBEAFE",
+  ring: "#2563EB",
+  input: "#E5E7EB",
+  gradient: {
+    primary: ["#2563EB", "#1E40AF"],
+    accent: ["#F59E0B", "#D97706"],
+  },
+  shadow: {
+    sm: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    md: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 6,
+      elevation: 3,
+    },
+    lg: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.1,
+      shadowRadius: 15,
+      elevation: 5,
+    },
+  },
+};