@sincpro/mobile-ui 0.1.2 → 0.1.3

package/sincpro_mobile_ui/Form/Form.ControlledRadioButton.tsx

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

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

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

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

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

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

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