@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Form/Form.MonetaryInput.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { View } from "react-native";
+import CurrencyInput from "react-native-currency-input";
+
+import { parseToMonetaryNumber } from "../lib/monetary";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+
+const monetaryBox = tv({
+  base: "justify-center items-center bg-bg-card rounded-lg",
+  variants: {
+    focused: {
+      true: "border-2 border-border-focus",
+      false: "border border-border-default",
+    },
+  },
+  defaultVariants: { focused: false },
+});
+
+interface MonetaryInputProps {
+  amount?: number;
+  onChange?: (value: number) => void;
+  currencySymbol?: string;
+  placeholder?: string;
+}
+
+function MonetaryInput({
+  amount,
+  onChange,
+  currencySymbol = "₡",
+  placeholder = "Escriba el monto",
+}: MonetaryInputProps) {
+  const [raw, setRaw] = useState<number>(parseToMonetaryNumber(amount));
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleChange = (amount: number) => {
+    setRaw(amount);
+    onChange?.(parseToMonetaryNumber(amount));
+  };
+
+  return (
+    <View className="flex-row">
+      <View className={monetaryBox({ focused: isFocused, className: "w-10 h-10" })}>
+        <Typography.Text className="text-xl" variant="body">
+          {currencySymbol}
+        </Typography.Text>
+      </View>
+      <View
+        className={monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" })}
+      >
+        <CurrencyInput
+          delimiter="."
+          keyboardType="numeric"
+          onBlur={() => setIsFocused(false)}
+          onChangeValue={handleChange}
+          onFocus={() => setIsFocused(true)}
+          placeholder={placeholder}
+          separator=","
+          value={raw}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default MonetaryInput;

package/sincpro_mobile_ui/Form/Form.PasswordInput.tsx

@@ -0,0 +1,42 @@
+import { Ionicons } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import InputField from "./Form.InputField";
+
+export interface PasswordFieldProps {
+  label: string;
+  error?: string;
+  inputProps: React.ComponentProps<typeof InputField>["inputProps"];
+}
+
+const PasswordField: React.FC<PasswordFieldProps> = ({ label, error, inputProps }) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <View className="mb-4 relative">
+      <InputField
+        error={error}
+        inputProps={{
+          ...inputProps,
+          secureTextEntry: !showPassword,
+          autoComplete: "off",
+          importantForAutofill: "no",
+        }}
+        label={label}
+      />
+      <TouchableOpacity
+        className="absolute right-3 bottom-[25px]"
+        onPress={() => setShowPassword(!showPassword)}
+      >
+        <Ionicons
+          className="text-text-primary"
+          name={showPassword ? "eye-off-outline" : "eye-outline"}
+          size={24}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default PasswordField;

package/sincpro_mobile_ui/Form/Form.QuantitySelector.tsx

@@ -0,0 +1,81 @@
+import type React from "react";
+import { StyleProp, TouchableOpacity, View, ViewStyle } from "react-native";
+import { tv } from "tailwind-variants";
+
+import { Display } from "../Display";
+import { Typography } from "../Typography";
+
+const quantitySelector = 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-[40px] items-center px-3",
+  },
+  variants: {
+    disabled: {
+      true: {
+        button: "opacity-50",
+      },
+    },
+  },
+});
+
+interface QuantitySelectorProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+function QuantitySelector({
+  value,
+  onChange,
+  min = 1,
+  max = 999,
+  style,
+}: QuantitySelectorProps) {
+  const handleDecrement = () => {
+    if (value > min) {
+      onChange(value - 1);
+    }
+  };
+
+  const handleIncrement = () => {
+    if (value < max) {
+      onChange(value + 1);
+    }
+  };
+
+  const decrementStyles = quantitySelector({ disabled: value <= min });
+  const incrementStyles = quantitySelector({ disabled: value >= max });
+  const containerStyles = quantitySelector();
+
+  return (
+    <View className={containerStyles.container()} style={style}>
+      <TouchableOpacity
+        className={decrementStyles.button()}
+        disabled={value <= min}
+        onPress={handleDecrement}
+      >
+        <Display.Icon name="minus" size={16} type="feather" />
+      </TouchableOpacity>
+
+      <View className={containerStyles.valueContainer()}>
+        <Typography.Text semibold variant="body">
+          {value}
+        </Typography.Text>
+      </View>
+
+      <TouchableOpacity
+        className={incrementStyles.button()}
+        disabled={value >= max}
+        onPress={handleIncrement}
+      >
+        <Display.Icon name="plus" size={16} type="feather" />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+export default QuantitySelector;

package/sincpro_mobile_ui/Form/Form.RadioButton.tsx

@@ -0,0 +1,52 @@
+import { TouchableOpacity, View } from "react-native";
+import { tv } from "tailwind-variants";
+
+import { Typography } from "../Typography";
+
+const radioButton = tv({
+  slots: {
+    container:
+      "flex-row items-center py-2.5 px-3 rounded-lg border-[1.5px] border-border-default bg-bg-card",
+    radioCircle:
+      "w-[18px] h-[18px] rounded-full border-2 border-border-default mr-2 justify-center items-center",
+    radioInner: "w-[9px] h-[9px] rounded-full",
+    label: "flex-1",
+  },
+  variants: {
+    selected: {
+      true: {
+        container: "border-accent bg-accent/10",
+        radioCircle: "border-accent",
+        radioInner: "bg-accent",
+        label: "text-text-primary font-semibold",
+      },
+      false: {
+        label: "text-text-secondary",
+      },
+    },
+  },
+  defaultVariants: { selected: false },
+});
+
+interface RadioButtonProps {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+}
+
+function RadioButton({ label, selected, onPress }: RadioButtonProps) {
+  const styles = radioButton({ selected });
+
+  return (
+    <TouchableOpacity activeOpacity={0.7} className={styles.container()} onPress={onPress}>
+      <View className={styles.radioCircle()}>
+        {selected && <View className={styles.radioInner()} />}
+      </View>
+      <Typography.Text className={styles.label()} variant="bodySmall">
+        {label}
+      </Typography.Text>
+    </TouchableOpacity>
+  );
+}
+
+export default RadioButton;

package/sincpro_mobile_ui/Form/Form.SearchBar.tsx

@@ -0,0 +1,64 @@
+import type React from "react";
+import { useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native";
+
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+
+const Icon = Display.Icon;
+
+const searchBarContainer = tv({
+  base: "flex-row items-center bg-bg-card rounded-lg px-2 h-10 shadow-sm",
+  variants: {
+    focused: {
+      true: "border-2 border-border-focus",
+      false: "border border-border-default",
+    },
+  },
+  defaultVariants: { focused: false },
+});
+
+interface SearchBarProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+function SearchBar({
+  value,
+  onChangeText,
+  placeholder = "Search",
+  className,
+}: SearchBarProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <View className={cn(searchBarContainer({ focused: isFocused }), className)}>
+      <View className="mr-1 ml-0.5 items-center justify-center h-full">
+        <Icon className="text-text-tertiary" name="search" size={18} type="ionicons" />
+      </View>
+      <TextInput
+        className="flex-1 h-full text-sm py-0 px-1.5 text-text-primary"
+        onBlur={() => setIsFocused(false)}
+        onChangeText={onChangeText}
+        onFocus={() => setIsFocused(true)}
+        placeholder={placeholder}
+        placeholderTextColor={theme.text.tertiary}
+        value={value}
+      />
+      {value.length > 0 && (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          className="mr-0.5 ml-1 items-center justify-center h-full px-1"
+          onPress={() => onChangeText("")}
+        >
+          <Icon className="text-text-tertiary" name="x" size={18} type="feather" />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+export default SearchBar;

package/sincpro_mobile_ui/Form/Form.TextInput.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { TextInput, TextInputProps } from "react-native";
+
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+
+export interface TextInputFProps extends TextInputProps {
+  error?: string;
+  className?: string;
+}
+
+const TextInputF: FC<TextInputFProps> = ({ className, ...props }) => {
+  return (
+    <TextInput
+      {...props}
+      className={cn(
+        "border border-input rounded-md h-11 px-3 py-2 text-text-primary",
+        className,
+      )}
+      placeholderTextColor={theme.text.tertiary}
+      style={props.style}
+    />
+  );
+};
+
+export default TextInputF;

package/sincpro_mobile_ui/Form/index.ts

@@ -0,0 +1,46 @@
+import ButtonWithIcon from "./Form.Button";
+import Checkbox from "./Form.Checkbox";
+import ControlledCheckbox from "./Form.ControlledCheckbox";
+import ControlledDropdown, { type DropdownOption } from "./Form.ControlledDropdown";
+import ControlledInput from "./Form.ControlledInput";
+import ControlledMonetaryInput from "./Form.ControlledMonetaryInput";
+import ControlledRadioButton from "./Form.ControlledRadioButton";
+import Dropdown from "./Form.Dropdown";
+import { FilterButton, FilterButtonGroup } from "./Form.FilterButton";
+import FractionalQuantityInput from "./Form.FractionalQuantityInput";
+import IconButton from "./Form.IconButton";
+import Input from "./Form.Input";
+import InputField from "./Form.InputField";
+import MonetaryInput from "./Form.MonetaryInput";
+import PasswordInput from "./Form.PasswordInput";
+import QuantitySelector from "./Form.QuantitySelector";
+import RadioButton from "./Form.RadioButton";
+import SearchBar from "./Form.SearchBar";
+import TextInput from "./Form.TextInput";
+
+export const Form = {
+  TextInput,
+  Input,
+  InputField,
+  Button: ButtonWithIcon,
+  IconButton,
+  PasswordInput,
+  QuantitySelector,
+  FractionalQuantityInput,
+  RadioButton,
+  Checkbox,
+  SearchBar,
+  Dropdown,
+  MonetaryInput,
+  ControlledInput,
+  ControlledRadioButton,
+  ControlledCheckbox,
+  ControlledDropdown,
+  ControlledMonetaryInput,
+  FilterButton,
+  FilterButtonGroup,
+};
+
+export { type DropdownOption };
+
+export default Form;

package/sincpro_mobile_ui/Navigation/Navigation.Header.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { Display } from "../Display";
+import GradientContainer from "../layouts/GradientContainer";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+export interface HeaderProps {
+  title?: string;
+  logo?: ReactNode;
+  backButton?: boolean;
+  handleBackButton?: () => void;
+  className?: string;
+}
+
+const Header = ({ title, logo, backButton, handleBackButton, className }: HeaderProps) => {
+  const onBackPress = handleBackButton ?? (() => {});
+
+  return (
+    <GradientContainer className={cn("pt-10 pb-3.5 px-4", className)}>
+      <View className="relative items-center justify-center">
+        {backButton && (
+          <TouchableOpacity
+            className="absolute top-0 left-0 z-10 border border-white p-1.5 rounded"
+            onPress={onBackPress}
+          >
+            <Display.Icon
+              color={theme.text.inverse}
+              name="chevron-back"
+              size={25}
+              type="ionicons"
+            />
+          </TouchableOpacity>
+        )}
+        <View className="items-center justify-center">
+          {logo || <Display.Logo size="medium" />}
+          {title && (
+            <Typography.Text className="text-white" variant="h4">
+              {title}
+            </Typography.Text>
+          )}
+        </View>
+      </View>
+    </GradientContainer>
+  );
+};
+
+export default Header;

package/sincpro_mobile_ui/Navigation/Navigation.HeaderToolbar.tsx

@@ -0,0 +1,111 @@
+import type React from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { Display } from "../Display";
+import GradientContainer from "../layouts/GradientContainer";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+const Icon = Display.Icon;
+const Text = Typography.Text;
+
+interface HeaderToolbarProps {
+  title?: string;
+  logo?: boolean;
+  centerTitle?: boolean;
+  subtitle?: string;
+  onBack?: () => void;
+  rightComponent?: React.ReactNode;
+  flat?: boolean;
+  children?: React.ReactNode;
+  withBackground?: boolean;
+  className?: string;
+}
+
+function HeaderToolbar({
+  title = "",
+  subtitle,
+  onBack,
+  rightComponent,
+  centerTitle = false,
+  flat = false,
+  children,
+  logo = false,
+  withBackground = true,
+  className,
+}: HeaderToolbarProps) {
+  const borderRadius = flat ? "rounded-none" : "rounded-b-[20px]";
+  const paddingBottom = flat ? "pb-0" : "pb-4";
+
+  function renderToolbar() {
+    return (
+      <>
+        <View className="flex-row items-center justify-between px-3.5 pt-2.5 h-16 relative">
+          {onBack && (
+            <TouchableOpacity
+              className="mr-3.5 border border-white rounded-lg items-center justify-center mb-3.5 p-1.5 z-[1]"
+              onPress={onBack}
+            >
+              <Icon
+                color={theme.text.inverse}
+                name="chevron-back"
+                size={25}
+                type="ionicons"
+              />
+            </TouchableOpacity>
+          )}
+
+          {logo && (
+            <View className="absolute left-0 right-0 items-center justify-center z-0">
+              <Display.Logo size="medium" />
+            </View>
+          )}
+
+          {!logo && (
+            <View
+              className={cn(
+                "flex-1",
+                centerTitle && "absolute left-0 right-0 items-center justify-center z-[1]",
+              )}
+            >
+              <Text
+                className="text-white"
+                numberOfLines={1}
+                style={{ top: centerTitle ? 0 : -4 }}
+                variant={centerTitle ? "h4" : "h6"}
+              >
+                {title}
+              </Text>
+              {subtitle && (
+                <Text
+                  className="text-white"
+                  style={{ top: centerTitle ? 0 : -4 }}
+                  variant="bodySmall"
+                >
+                  {subtitle}
+                </Text>
+              )}
+            </View>
+          )}
+
+          {rightComponent && <View className="ml-auto">{rightComponent}</View>}
+        </View>
+
+        <View>{children}</View>
+      </>
+    );
+  }
+
+  return withBackground ? (
+    <GradientContainer
+      className={cn("shadow-lg shadow-black/70", borderRadius, paddingBottom, className)}
+    >
+      {renderToolbar()}
+    </GradientContainer>
+  ) : (
+    <>{renderToolbar()}</>
+  );
+}
+
+export default HeaderToolbar;

package/sincpro_mobile_ui/Navigation/Navigation.RowItem.tsx

@@ -0,0 +1,33 @@
+import { TouchableOpacity, View } from "react-native";
+
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { IRowItemProps } from "../views/types/IListView";
+
+function RowItem({ item, className }: IRowItemProps<any> & { className?: string }) {
+  function rowContent() {
+    return (
+      <View className="flex-1">
+        <Typography.Text className="flex-1" variant="title">
+          {item.rowTitle}
+        </Typography.Text>
+        <Typography.Text className="mt-0.5 text-text-secondary" variant="bodySmall">
+          {item.rowSubtitle}
+        </Typography.Text>
+      </View>
+    );
+  }
+
+  return item.readonly ? (
+    <View className={cn("flex-row items-center py-2.5", className)}>{rowContent()}</View>
+  ) : (
+    <TouchableOpacity
+      className={cn("flex-row items-center py-2.5", className)}
+      onPress={item.onPress}
+    >
+      {rowContent()}
+    </TouchableOpacity>
+  );
+}
+
+export default RowItem;

package/sincpro_mobile_ui/Navigation/Navigation.TabIcon.tsx

@@ -0,0 +1,45 @@
+import { ComponentType } from "react";
+import { View } from "react-native";
+
+import { Display } from "../Display";
+import { cn } from "../theme/tw";
+
+const Icon = Display.Icon;
+
+interface TabIconProps {
+  focused: boolean;
+  size?: number;
+  customIcon?: ComponentType<{ size?: number; color?: string }>;
+  type?: "custom" | "ionicons" | "fontawesome" | "material" | "fontawesome5";
+  name?: any;
+  className?: string;
+}
+
+function TabIcon({
+  focused,
+  size = 24,
+  customIcon,
+  type = "custom",
+  name,
+  className,
+}: TabIconProps) {
+  return (
+    <View
+      className={cn(
+        "justify-center items-center h-9 w-14 rounded-2xl",
+        focused && "bg-primary shadow-sm",
+        className,
+      )}
+    >
+      <Icon
+        className={focused ? "text-white" : "text-text-secondary"}
+        customIcon={customIcon}
+        name={name}
+        size={size}
+        type={type}
+      />
+    </View>
+  );
+}
+
+export default TabIcon;

package/sincpro_mobile_ui/Navigation/Navigation.TabItem.tsx

@@ -0,0 +1,43 @@
+import { ComponentType, FC } from "react";
+import { View } from "react-native";
+
+import { Display } from "../Display";
+import { cn } from "../theme/tw";
+
+export interface TabIconProps {
+  focused: boolean;
+  size?: number;
+  customIcon?: ComponentType<{ size?: number; color?: string }>;
+  type?: "custom" | "ionicons" | "fontawesome" | "material" | "fontawesome5";
+  name?: any;
+  className?: string;
+}
+
+const TabIcon: FC<TabIconProps> = ({
+  focused,
+  size = 24,
+  customIcon,
+  type = "custom",
+  name,
+  className,
+}) => {
+  return (
+    <View
+      className={cn(
+        "justify-center items-center w-12 h-12 rounded-full",
+        focused ? "bg-primary shadow-md" : "bg-transparent",
+        className,
+      )}
+    >
+      <Display.Icon
+        color={focused ? "#FFFFFF" : "#6B7280"}
+        customIcon={customIcon}
+        name={name}
+        size={size}
+        type={type as any}
+      />
+    </View>
+  );
+};
+
+export default TabIcon;

package/sincpro_mobile_ui/Navigation/index.ts

@@ -0,0 +1,15 @@
+import Header from "./Navigation.Header";
+import HeaderToolbar from "./Navigation.HeaderToolbar";
+import RowItem from "./Navigation.RowItem";
+import TabIcon from "./Navigation.TabIcon";
+import TabItem from "./Navigation.TabItem";
+
+export const Navigation = {
+  Header,
+  HeaderToolbar,
+  TabItem,
+  TabIcon,
+  RowItem,
+};
+
+export default Navigation;