@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Form/Form.ControlledRadioButton.tsx

@@ -0,0 +1,33 @@
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
+
+import RadioButton from "./Form.RadioButton";
+
+interface ControlledRadioButtonProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  value: any;
+}
+
+function ControlledRadioButton<T extends FieldValues>({
+  control,
+  name,
+  label,
+  value,
+}: ControlledRadioButtonProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, value: selectedValue } }) => (
+        <RadioButton
+          label={label}
+          onPress={() => onChange(value)}
+          selected={selectedValue === value}
+        />
+      )}
+    />
+  );
+}
+
+export default ControlledRadioButton;

package/sincpro_mobile_ui/Form/Form.Dropdown.tsx

@@ -0,0 +1,171 @@
+import { useState } from "react";
+import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { tv } from "tailwind-variants";
+
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+
+const dropdown = tv({
+  slots: {
+    button: "flex-row justify-between items-center rounded-lg px-3",
+    overlay: "flex-1 bg-black/40 justify-center items-center",
+    dropdownContainer: "rounded-xl mx-5 max-w-[320px] w-[90%] max-h-[70%]",
+    header: "flex-row justify-between items-center px-4 py-3 border-b border-border-default",
+    optionsList: "p-1",
+    option: "py-3 px-3 rounded-lg my-0.5",
+    separator: "h-[1px] bg-border-light mx-3",
+  },
+  variants: {
+    variant: {
+      primary: {
+        button: "bg-primary",
+      },
+      secondary: {
+        button: "bg-bg-card border border-primary",
+      },
+      outline: {
+        button: "bg-transparent border border-primary",
+      },
+    },
+    size: {
+      xs: {
+        button: "py-1.5 min-h-[32px]",
+      },
+      small: {
+        button: "py-2 min-h-[36px]",
+      },
+      medium: {
+        button: "py-2.5 min-h-[40px]",
+      },
+      large: {
+        button: "py-3 min-h-[44px]",
+      },
+    },
+    disabled: {
+      true: {
+        option: "opacity-50",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "small",
+  },
+});
+
+export interface DropdownOption {
+  id: string;
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+interface DropdownButtonProps {
+  title: string;
+  options: DropdownOption[];
+  variant?: "primary" | "secondary" | "outline";
+  size?: "xs" | "small" | "medium" | "large";
+}
+
+function DropdownButton({
+  title,
+  options,
+  variant = "secondary",
+  size = "small",
+}: DropdownButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOptionPress = (option: DropdownOption) => {
+    if (!option.disabled) {
+      option.onPress();
+      setIsOpen(false);
+    }
+  };
+
+  const styles = dropdown({ variant, size });
+
+  const textColorClass = {
+    primary: "text-text-on-primary",
+    outline: "text-primary",
+    secondary: "text-primary",
+  }[variant];
+
+  const iconColor = {
+    primary: theme.text.onPrimary,
+    outline: theme.primary,
+    secondary: theme.primary,
+  }[variant];
+
+  const textVariant = {
+    large: "body" as const,
+    medium: "body" as const,
+    xs: "bodySmall" as const,
+    small: "bodySmall" as const,
+  }[size];
+
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        className={styles.button()}
+        onPress={() => setIsOpen(true)}
+      >
+        <Typography.Text className={textColorClass} variant={textVariant}>
+          {title}
+        </Typography.Text>
+        <Display.Icon color={iconColor} name="chevron-down" size={16} type="feather" />
+      </TouchableOpacity>
+
+      <Modal animationType="fade" transparent visible={isOpen}>
+        <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
+          <View className={styles.overlay()}>
+            <TouchableWithoutFeedback>
+              <View
+                className={styles.dropdownContainer()}
+                style={{
+                  backgroundColor: theme.bg.popover,
+                  ...theme.shadow.lg,
+                }}
+              >
+                <View className={styles.header()}>
+                  <Typography.Text className="text-text-primary" semibold variant="bodyLarge">
+                    {title}
+                  </Typography.Text>
+                  <TouchableOpacity onPress={() => setIsOpen(false)}>
+                    <Display.Icon name="x" size={20} type="feather" />
+                  </TouchableOpacity>
+                </View>
+
+                <View className={styles.optionsList()}>
+                  {options.map((option, index) => (
+                    <View key={option.id}>
+                      <TouchableOpacity
+                        activeOpacity={0.7}
+                        className={dropdown({ disabled: option.disabled }).option()}
+                        disabled={option.disabled}
+                        onPress={() => handleOptionPress(option)}
+                      >
+                        <Typography.Text
+                          className={
+                            option.disabled ? "text-text-disabled" : "text-text-primary"
+                          }
+                          variant="body"
+                        >
+                          {option.title}
+                        </Typography.Text>
+                      </TouchableOpacity>
+                      {index < options.length - 1 && <View className={styles.separator()} />}
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+}
+
+export default DropdownButton;

package/sincpro_mobile_ui/Form/Form.FilterButton.tsx

@@ -0,0 +1,59 @@
+import { FC } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+
+const filterButton = tv({
+  base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
+  variants: {
+    active: {
+      true: "bg-primary border-0",
+      false: "bg-transparent border border-brand-primary",
+    },
+  },
+  defaultVariants: {
+    active: false,
+  },
+});
+
+const filterText = tv({
+  base: "font-bold",
+  variants: {
+    active: {
+      true: "text-white",
+      false: "text-primary",
+    },
+  },
+  defaultVariants: {
+    active: false,
+  },
+});
+
+export interface FilterButtonProps {
+  title: string;
+  active: boolean;
+  onPress: () => void;
+}
+
+export const FilterButton: FC<FilterButtonProps> = ({ title, active, onPress }) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      className={filterButton({ active })}
+      onPress={onPress}
+    >
+      <Typography.Text className={filterText({ active })} variant="buttonSmall">
+        {title}
+      </Typography.Text>
+    </TouchableOpacity>
+  );
+};
+
+interface FilterButtonGroupProps {
+  children: React.ReactNode;
+}
+
+export function FilterButtonGroup({ children }: FilterButtonGroupProps) {
+  return <View className="flex-row gap-2 p-3">{children}</View>;
+}

package/sincpro_mobile_ui/Form/Form.FractionalQuantityInput.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useMemo, useState } from "react";
+import { StyleProp, TouchableOpacity, View, ViewStyle } from "react-native";
+import { tv } from "tailwind-variants";
+
+import { Dialog, type EditableValueModalChip } from "../Dialog";
+import { Display } from "../Display";
+import { normalizeQuantity, roundTo } from "../lib/quantity";
+import { Typography } from "../Typography";
+
+const fractionalQuantityInput = tv({
+  slots: {
+    container: "flex-row items-center border border-brand-accent rounded-full px-1",
+    button: "w-9 h-9 rounded-full justify-center items-center",
+    valueContainer: "min-w-[60px] items-center px-3",
+  },
+  variants: {
+    disabled: {
+      true: {
+        button: "opacity-40",
+      },
+    },
+  },
+});
+
+interface FractionalQuantityInputProps {
+  value: number;
+  onChange: (value: number) => void;
+  precision?: number;
+  minIncrement?: number;
+  maxValue?: number;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  quickAddIncrements?: number[];
+}
+
+function parseLocalizedNumber(raw: string): number {
+  let s = raw.trim();
+  if (s === "") return 0;
+  s = s.replace(/[^0-9.,+-]/g, "");
+  const hasComma = s.includes(",");
+  const hasDot = s.includes(".");
+  if (hasComma && (!hasDot || s.lastIndexOf(",") > s.lastIndexOf("."))) {
+    s = s.replace(/\./g, "").replace(/,/g, ".");
+  } else {
+    if (!hasComma && hasDot) {
+      if (/^\d{1,3}(\.\d{3})+$/.test(s)) {
+        s = s.replace(/\./g, "");
+      } else if (s.split(".").length - 1 > 1) {
+        const parts = s.split(".");
+        const decimal = parts.pop();
+        s = parts.join("") + "." + decimal;
+      }
+    } else if (hasComma && hasDot) {
+      s = s.replace(/,/g, "");
+    }
+    s = s.replace(/,/g, "");
+  }
+  const n = parseFloat(s);
+  if (isNaN(n)) return 0;
+  return n;
+}
+
+function FractionalQuantityInput({
+  value,
+  onChange,
+  precision = 2,
+  minIncrement,
+  maxValue = 999999,
+  style,
+  disabled,
+  quickAddIncrements,
+}: FractionalQuantityInputProps) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [draft, setDraft] = useState(String(value));
+
+  const effectiveIncrement = useMemo(() => {
+    if (minIncrement && minIncrement > 0) return minIncrement;
+    return 1 / Math.pow(10, precision);
+  }, [minIncrement, precision]);
+
+  const chips = useMemo(() => {
+    if (quickAddIncrements && quickAddIncrements.length > 0) return quickAddIncrements;
+    const base = effectiveIncrement;
+    if (base >= 1) return [1, 2, 5];
+    if (base >= 0.5) return [0.5, 1, 2];
+    if (base >= 0.25) return [0.25, 0.5, 1];
+    if (base >= 0.1) return [0.1, 0.25, 0.5];
+    return [base, base * 2, base * 5];
+  }, [effectiveIncrement, quickAddIncrements]);
+
+  const applyValue = useCallback(
+    (next: number) => {
+      if (next < 0) next = 0;
+      if (next > maxValue) next = maxValue;
+      next = normalizeQuantity(next, effectiveIncrement, precision);
+      onChange(next);
+    },
+    [onChange, maxValue, effectiveIncrement, precision],
+  );
+
+  function handleDecrement() {
+    applyValue(value - 1);
+  }
+
+  function handleIncrement() {
+    applyValue(value + 1);
+  }
+
+  function openModal() {
+    setDraft(String(value));
+    setModalVisible(true);
+  }
+
+  function confirmDraft() {
+    let parsed = parseLocalizedNumber(draft);
+    parsed = roundTo(parsed, precision);
+    if (parsed < 0) parsed = 0;
+    if (parsed > maxValue) parsed = maxValue;
+    onChange(parsed);
+    setModalVisible(false);
+  }
+
+  const formatted = useMemo(() => value.toFixed(precision), [value, precision]);
+
+  const modalChips: EditableValueModalChip[] = (chips as number[]).map((item) => ({
+    label: `+${item}`,
+    onPress: () => {
+      const base = parseLocalizedNumber(draft) || 0;
+      const next = roundTo(base + item, precision);
+      setDraft(String(next));
+    },
+  }));
+
+  const decrementStyles = fractionalQuantityInput({ disabled: disabled || value <= 0 });
+  const incrementStyles = fractionalQuantityInput({ disabled });
+  const containerStyles = fractionalQuantityInput();
+
+  return (
+    <View
+      accessibilityLabel={`Cantidad ${formatted}`}
+      className={containerStyles.container()}
+      style={style}
+    >
+      <TouchableOpacity
+        className={decrementStyles.button()}
+        disabled={disabled || value <= 0}
+        onPress={handleDecrement}
+      >
+        <Display.Icon name="minus" size={16} type="feather" />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        className={containerStyles.valueContainer()}
+        disabled={disabled}
+        onPress={openModal}
+      >
+        <Typography.Text semibold variant="body">
+          {formatted}
+        </Typography.Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        className={incrementStyles.button()}
+        disabled={disabled}
+        onPress={handleIncrement}
+      >
+        <Display.Icon name="plus" size={16} type="feather" />
+      </TouchableOpacity>
+
+      <Dialog.EditValue
+        chips={modalChips}
+        keyboardType="decimal-pad"
+        onCancel={() => setModalVisible(false)}
+        onChangeValue={setDraft}
+        onConfirm={confirmDraft}
+        placeholder={`0${precision > 0 ? ",".padEnd(precision + 1, "0") : ""}`}
+        rightAdornment={
+          <Typography.Text className="ml-1" variant="body">
+            (mín {effectiveIncrement})
+          </Typography.Text>
+        }
+        title="Editar cantidad"
+        value={draft}
+        visible={modalVisible}
+      />
+    </View>
+  );
+}
+
+export default FractionalQuantityInput;

package/sincpro_mobile_ui/Form/Form.IconButton.tsx

@@ -0,0 +1,102 @@
+import { ActivityIndicator, TouchableOpacity } from "react-native";
+
+import { Display } from "../Display";
+import { IconType } from "../lib/icon";
+import { theme } from "../theme";
+import { tv, type VariantProps } from "../theme/tw";
+
+const iconButton = tv({
+  base: "rounded-lg items-center justify-center",
+  variants: {
+    variant: {
+      primary: "bg-primary",
+      secondary: "bg-bg-card border border-primary",
+      tertiary: "bg-accent",
+      ghost: "bg-transparent",
+    },
+    size: {
+      small: "w-8 h-8",
+      medium: "w-10 h-10",
+      large: "w-12 h-12",
+    },
+    rounded: {
+      true: "rounded-full",
+    },
+    disabled: {
+      true: "opacity-50",
+    },
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "medium",
+    rounded: false,
+    disabled: false,
+  },
+});
+
+interface IconButtonProps extends VariantProps<typeof iconButton> {
+  icon?: string;
+  type?: IconType;
+  onPress: () => void;
+  loading?: boolean;
+  iconColor?: string;
+  className?: string;
+}
+
+function IconButton({
+  icon,
+  type = "feather",
+  onPress,
+  variant = "ghost",
+  size = "medium",
+  loading = false,
+  disabled = false,
+  rounded = false,
+  iconColor,
+  className,
+}: IconButtonProps) {
+  const getLoadingColor = () => {
+    switch (variant) {
+      case "primary":
+      case "tertiary":
+        return theme.primary;
+      case "secondary":
+      case "ghost":
+        return theme.primary;
+      default:
+        return theme.primary;
+    }
+  };
+
+  const getIconColor = () => {
+    if (iconColor) return iconColor;
+    switch (variant) {
+      case "primary":
+      case "tertiary":
+        return theme.primary;
+      case "secondary":
+        return theme.primary;
+      case "ghost":
+        return theme.primary;
+      default:
+        return theme.primary;
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      className={iconButton({ variant, size, rounded, disabled, className })}
+      disabled={disabled || loading}
+      onPress={onPress}
+    >
+      {loading ? (
+        <ActivityIndicator color={getLoadingColor()} size="small" />
+      ) : (
+        <Display.Icon color={getIconColor()} name={icon} size={24} type={type} />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+export default IconButton;

package/sincpro_mobile_ui/Form/Form.Input.tsx

@@ -0,0 +1,88 @@
+import type React from "react";
+import { useState } from "react";
+import { TextInput, type TextInputProps, View } from "react-native";
+
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { Typography } from "../Typography";
+
+const inputContainer = tv({
+  base: "rounded-lg bg-bg-card shadow-sm",
+  variants: {
+    state: {
+      error: "border-2 border-danger",
+      focused: "border-2 border-ring",
+      default: "border border-input",
+    },
+  },
+  defaultVariants: { state: "default" },
+});
+
+interface FormInputProps extends TextInputProps {
+  label: string;
+  error?: string;
+  tooltip?: string;
+  className?: string;
+}
+
+function FormInput({
+  label,
+  error,
+  tooltip,
+  style,
+  multiline = false,
+  numberOfLines = 1,
+  onFocus,
+  onBlur,
+  className,
+  ...props
+}: FormInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const hasError = Boolean(error);
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const getState = () => {
+    if (hasError) return "error";
+    if (isFocused) return "focused";
+    return "default";
+  };
+
+  return (
+    <View className={cn("mb-2", className)}>
+      <Typography.Text className="mb-1 font-medium text-text-primary" variant="bodySmall">
+        {label}
+      </Typography.Text>
+      <View className={inputContainer({ state: getState() })}>
+        <TextInput
+          className={cn(
+            "px-3 py-2.5 text-sm min-h-[44px] text-text-primary",
+            multiline && "min-h-[64px] pt-2.5",
+          )}
+          multiline={multiline}
+          numberOfLines={numberOfLines}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          placeholderTextColor={theme.text.tertiary}
+          textAlignVertical={multiline ? "top" : "center"}
+          {...props}
+        />
+      </View>
+      {hasError && (
+        <Typography.Text className="mt-0.5 text-danger" variant="bodySmall">
+          {error}
+        </Typography.Text>
+      )}
+    </View>
+  );
+}
+
+export default FormInput;

package/sincpro_mobile_ui/Form/Form.InputField.tsx

@@ -0,0 +1,66 @@
+import React, { FC, useState } from "react";
+import { TextInputProps, View } from "react-native";
+
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import TextInputF from "./Form.TextInput";
+
+const inputFieldBorder = tv({
+  base: "rounded p-2",
+  variants: {
+    state: {
+      error: "border-2 border-danger",
+      focused: "border-2 border-ring",
+      default: "border border-input",
+    },
+  },
+  defaultVariants: { state: "default" },
+});
+
+export interface InputFieldProps extends TextInputProps {
+  label: string;
+  inputProps: React.ComponentProps<typeof TextInputF>;
+  error?: string;
+}
+
+const InputField: FC<InputFieldProps> = ({ label, inputProps, error }) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const hasError = Boolean(error);
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true);
+    inputProps?.onFocus?.(e);
+  };
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false);
+    inputProps?.onBlur?.(e);
+  };
+
+  const getState = () => {
+    if (hasError) return "error";
+    if (isFocused) return "focused";
+    return "default";
+  };
+
+  return (
+    <View className="mb-4">
+      <Typography.Text className="mb-1" variant="bodyLarge">
+        {label}
+      </Typography.Text>
+      <TextInputF
+        className={inputFieldBorder({ state: getState() })}
+        {...inputProps}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+      />
+      {error && (
+        <Typography.Text className="mt-1 text-danger" variant="bodySmall">
+          {error}
+        </Typography.Text>
+      )}
+    </View>
+  );
+};
+
+export default InputField;