@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Form/Form.Button.tsx

@@ -0,0 +1,461 @@
+import { LinearGradient } from "expo-linear-gradient";
+import type React from "react";
+import { FC, useCallback } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { runOnJS } from "react-native-reanimated";
+
+import { useConfirmationContext } from "../Dialog/Confirmation.context";
+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";
+}
+
+// ============================================================================
+// BUTTON COMPONENT
+// ============================================================================
+
+export interface ButtonProps extends VariantProps<typeof button> {
+  title: string;
+  onPress?: () => void;
+  confirm?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  icon?: React.ReactNode;
+}
+
+const Button: FC<ButtonProps> = ({
+  title,
+  onPress,
+  confirm,
+  variant = "primary",
+  size = "medium",
+  loading = false,
+  disabled = false,
+  className,
+  icon,
+}) => {
+  const { show, hide } = useConfirmationContext();
+
+  const textColorClass = textColor({
+    variant: (variant as any) ?? "primary",
+    disabled,
+  });
+  const loadingColorValue = getLoadingColor((variant as any) ?? "primary");
+  const textVariantValue = getTextVariant((size as any) ?? "medium");
+
+  const handlePress = useCallback(() => {
+    if (confirm && onPress) {
+      show({
+        title: "Confirmar acción",
+        message: confirm,
+        confirmText: "Confirmar",
+        cancelText: "Cancelar",
+        onConfirm: () => {
+          hide();
+          runOnJS(onPress)();
+        },
+        onCancel: () => hide(),
+      });
+    } else if (onPress) {
+      runOnJS(onPress)();
+    }
+  }, [onPress, confirm, show, hide]);
+
+  if (variant === "link") {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.7}
+        className={className}
+        disabled={disabled || loading}
+        onPress={handlePress}
+      >
+        {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;
+
+    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={handlePress}
+        >
+          <View
+            className={button({ size, disabled })}
+            style={{ backgroundColor: "transparent" }}
+          >
+            {loading ? (
+              <ActivityIndicator color={loadingColorValue} size="small" />
+            ) : (
+              <>
+                {icon ? <View className="mr-2">{icon}</View> : null}
+                <Typography.Text
+                  allowFontScaling={false}
+                  bold
+                  className={textColorClass}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  variant={textVariantValue}
+                >
+                  {title}
+                </Typography.Text>
+              </>
+            )}
+          </View>
+        </TouchableOpacity>
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      className={button({ variant, size, disabled, className })}
+      disabled={disabled || loading}
+      onPress={handlePress}
+    >
+      {loading ? (
+        <ActivityIndicator color={loadingColorValue} size="small" />
+      ) : (
+        <>
+          {icon ? <View className="mr-2">{icon}</View> : null}
+          <Typography.Text
+            allowFontScaling={false}
+            bold
+            className={textColorClass}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            variant={textVariantValue}
+          >
+            {title}
+          </Typography.Text>
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+// ============================================================================
+// BUTTON ICON COMPONENT
+// ============================================================================
+
+export interface ButtonIconProps extends VariantProps<typeof buttonIcon> {
+  icon: string;
+  onPress?: () => void;
+  confirm?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const ButtonIcon: FC<ButtonIconProps> = ({
+  icon,
+  onPress,
+  confirm,
+  variant = "primary",
+  size = "medium",
+  loading = false,
+  disabled = false,
+  className,
+}) => {
+  const { show, hide } = useConfirmationContext();
+
+  const iconColorValue = getIconColor((variant as any) ?? "primary", disabled);
+  const iconSizeValue = getIconSize((size as any) ?? "medium");
+  const loadingColorValue = getLoadingColor((variant as any) ?? "primary");
+
+  const handlePress = useCallback(() => {
+    if (confirm && onPress) {
+      show({
+        title: "Confirmar acción",
+        message: confirm,
+        confirmText: "Confirmar",
+        cancelText: "Cancelar",
+        onConfirm: () => {
+          hide();
+          runOnJS(onPress)();
+        },
+        onCancel: () => hide(),
+      });
+    } else if (onPress) {
+      runOnJS(onPress)();
+    }
+  }, [onPress, confirm, show, hide]);
+
+  if (variant === "primary") {
+    return (
+      <LinearGradient
+        colors={disabled ? ["#93c5fd", "#60a5fa"] : ["#2563eb", "#1d4ed8"]}
+        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={handlePress}
+        >
+          <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={handlePress}
+    >
+      {loading ? (
+        <ActivityIndicator color={loadingColorValue} size="small" />
+      ) : (
+        <Display.Icon color={iconColorValue} name={icon} size={iconSizeValue} />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+// ============================================================================
+// COMPOUND COMPONENT
+// ============================================================================
+
+const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });
+
+export default ButtonWithIcon;

package/sincpro_mobile_ui/Form/Form.Checkbox.tsx

@@ -0,0 +1,89 @@
+import { Checkbox } from "expo-checkbox";
+import { Pressable, View } from "react-native";
+
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+interface RowCheckBoxProps {
+  mainText?: string;
+  subText?: string;
+  rightText?: string;
+  leftComponent?: React.ReactNode;
+  rightComponent?: React.ReactNode;
+  isChecked?: boolean;
+  onCheck?: (isChecked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+function RowCheckBox({
+  mainText,
+  subText,
+  rightText,
+  rightComponent,
+  leftComponent,
+  isChecked = false,
+  onCheck = () => {},
+  disabled = false,
+  className,
+}: RowCheckBoxProps) {
+  const handlePress = () => {
+    if (!disabled) {
+      onCheck(!isChecked);
+    }
+  };
+
+  const renderLeftComponent = () => {
+    if (leftComponent) {
+      return leftComponent;
+    }
+    return (
+      <>
+        {mainText && <Typography.Text semibold>{mainText}</Typography.Text>}
+        {subText && (
+          <Typography.Text className="text-text-secondary" variant="bodySmall">
+            {subText}
+          </Typography.Text>
+        )}
+      </>
+    );
+  };
+
+  const renderRightComponent = () => {
+    if (rightComponent) {
+      return rightComponent;
+    }
+    if (rightText) {
+      return <Typography.Text variant="body">{rightText}</Typography.Text>;
+    }
+    return null;
+  };
+
+  return (
+    <Pressable
+      className={cn(
+        "flex-row justify-between items-center",
+        disabled && "opacity-50",
+        className,
+      )}
+      disabled={disabled}
+      onPress={handlePress}
+    >
+      <View>{renderLeftComponent()}</View>
+
+      <View className="flex-row items-center">
+        {renderRightComponent()}
+        <Checkbox
+          className="ml-2"
+          color={theme.primary}
+          disabled={disabled}
+          pointerEvents="none"
+          value={isChecked}
+        />
+      </View>
+    </Pressable>
+  );
+}
+
+export default RowCheckBox;

package/sincpro_mobile_ui/Form/Form.ControlledCheckbox.tsx

@@ -0,0 +1,34 @@
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
+
+import Checkbox from "./Form.Checkbox";
+
+interface ControlledCheckboxProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  subText?: string;
+}
+
+function ControlledCheckbox<T extends FieldValues>({
+  control,
+  name,
+  label,
+  subText,
+}: ControlledCheckboxProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, value } }) => (
+        <Checkbox
+          isChecked={value || false}
+          mainText={label}
+          onCheck={onChange}
+          subText={subText}
+        />
+      )}
+    />
+  );
+}
+
+export default ControlledCheckbox;

package/sincpro_mobile_ui/Form/Form.ControlledDropdown.tsx

@@ -0,0 +1,22 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+}
+
+interface ControlledDropdownProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  options: DropdownOption[];
+  placeholder?: string;
+}
+
+function ControlledDropdown<T extends FieldValues>(_props: ControlledDropdownProps<T>) {
+  throw new Error(
+    "ControlledDropdown is not implemented yet. Use Form.Dropdown with manual Controller instead.",
+  );
+}
+
+export default ControlledDropdown;

package/sincpro_mobile_ui/Form/Form.ControlledInput.tsx

@@ -0,0 +1,53 @@
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
+
+import Input from "./Form.Input";
+
+interface ControlledInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  placeholder?: string;
+  keyboardType?: "default" | "numeric" | "email-address" | "phone-pad";
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  multiline?: boolean;
+  numberOfLines?: number;
+  rules?: any;
+  error?: string;
+}
+
+function ControlledInput<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  keyboardType,
+  autoCapitalize,
+  multiline,
+  numberOfLines,
+  rules,
+  error,
+}: ControlledInputProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, onBlur, value } }) => (
+        <Input
+          autoCapitalize={autoCapitalize}
+          error={error}
+          keyboardType={keyboardType}
+          label={label}
+          multiline={multiline}
+          numberOfLines={numberOfLines}
+          onBlur={onBlur}
+          onChangeText={onChange}
+          placeholder={placeholder}
+          value={value}
+        />
+      )}
+      rules={rules}
+    />
+  );
+}
+
+export default ControlledInput;

package/sincpro_mobile_ui/Form/Form.ControlledMonetaryInput.tsx

@@ -0,0 +1,41 @@
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
+
+import MonetaryInput from "./Form.MonetaryInput";
+
+interface ControlledMonetaryInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  placeholder?: string;
+  currency?: string;
+  rules?: any;
+  error?: string;
+}
+
+function ControlledMonetaryInput<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  currency = "CRC",
+  rules,
+  error,
+}: ControlledMonetaryInputProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, onBlur, value } }) => (
+        <MonetaryInput
+          amount={value}
+          currencySymbol={currency}
+          onChange={onChange}
+          placeholder={placeholder}
+        />
+      )}
+      rules={rules}
+    />
+  );
+}
+
+export default ControlledMonetaryInput;