@sincpro/mobile-ui 0.1.2 → 0.1.4

package/sincpro_mobile_ui/primitives/BaseButton.tsx

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

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

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

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

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

package/sincpro_mobile_ui/providers/index.ts

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

package/sincpro_mobile_ui/theme/active.ts

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

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

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

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