@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Dialog/Dialog.Confirmation.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Modal, TouchableWithoutFeedback, View } from "react-native";
+
+import { BaseButton } from "../primitives/BaseButton";
+import { theme } from "../theme";
+import Typography from "../Typography/Typography.Text";
+
+export interface Props {
+  auxTitle?: string;
+  subtitle?: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  visible: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+const ConfirmationDialog: React.FC<Props> = ({
+  visible,
+  onCancel,
+  onConfirm,
+  auxTitle = "cambios",
+  subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?",
+  confirmButtonText = "Sí",
+  cancelButtonText = "No, continuar aquí",
+}) => {
+  return (
+    <Modal animationType="fade" onRequestClose={onCancel} transparent visible={visible}>
+      <TouchableWithoutFeedback onPress={onCancel}>
+        <View className="flex-1 justify-center items-center p-6 bg-black/50">
+          <TouchableWithoutFeedback>
+            <View
+              className="rounded-xl p-3 w-full max-w-xs mx-auto"
+              style={{ backgroundColor: theme.bg.popover, ...theme.shadow.md }}
+            >
+              <Typography className="mb-1.5 text-sm" variant="body">
+                <Typography semibold variant="body">
+                  {auxTitle}
+                </Typography>
+              </Typography>
+              <Typography className="mb-3 text-xs leading-tight" variant="body">
+                {subtitle}
+              </Typography>
+              <View className="flex-row gap-2">
+                <BaseButton
+                  className="flex-1"
+                  onPress={onCancel}
+                  size="small"
+                  title={cancelButtonText}
+                  variant="outlineBlack"
+                />
+                <BaseButton
+                  className="flex-1"
+                  onPress={onConfirm}
+                  size="small"
+                  title={confirmButtonText}
+                  variant="primary"
+                />
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+export default ConfirmationDialog;

package/sincpro_mobile_ui/Dialog/Dialog.EditValue.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useRef } from "react";
+import { FlatList, Modal, TextInput, TouchableOpacity, View } from "react-native";
+
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+
+export interface EditableValueModalChip {
+  key?: string;
+  label: string;
+  onPress: () => void;
+}
+
+export interface EditableValueModalProps {
+  visible: boolean;
+  title: string;
+  value: string;
+  onChangeValue: (text: string) => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+  placeholder?: string;
+  helperText?: string | React.ReactNode;
+  chips?: EditableValueModalChip[];
+  keyboardType?: "default" | "numeric" | "decimal-pad";
+  rightAdornment?: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  autoFocus?: boolean;
+  testID?: string;
+}
+
+function EditableValueModal({
+  visible,
+  title,
+  value,
+  onChangeValue,
+  onConfirm,
+  onCancel,
+  placeholder,
+  helperText,
+  chips,
+  keyboardType = "decimal-pad",
+  rightAdornment,
+  confirmLabel = "Aplicar",
+  cancelLabel = "Cancelar",
+  autoFocus = true,
+  testID,
+}: EditableValueModalProps) {
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (visible && autoFocus) {
+      const t = setTimeout(() => inputRef.current?.focus(), 60);
+      return () => clearTimeout(t);
+    }
+  }, [visible, autoFocus]);
+
+  return (
+    <Modal animationType="fade" onRequestClose={onCancel} transparent visible={visible}>
+      <View className="flex-1 justify-center p-6 bg-black/40">
+        <View
+          className="rounded-xl p-4"
+          style={{ backgroundColor: theme.bg.popover, ...theme.shadow.md }}
+          testID={testID}
+        >
+          <Typography.Text className="mb-3" semibold variant="h6">
+            {title}
+          </Typography.Text>
+          <View className="flex-row items-center">
+            <TextInput
+              className="flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary"
+              keyboardType={keyboardType}
+              onChangeText={onChangeValue}
+              onSubmitEditing={onConfirm}
+              placeholder={placeholder}
+              ref={inputRef}
+              returnKeyType="done"
+              value={value}
+            />
+            {rightAdornment && <View className="ml-2">{rightAdornment}</View>}
+          </View>
+          {helperText ? (
+            <View className="mt-2">
+              {typeof helperText === "string" ? (
+                <Typography.Text className="opacity-70" variant="bodySmall">
+                  {helperText}
+                </Typography.Text>
+              ) : (
+                helperText
+              )}
+            </View>
+          ) : null}
+          {chips && chips.length > 0 && (
+            <FlatList
+              contentContainerClassName="gap-2 py-3"
+              data={chips}
+              horizontal
+              keyExtractor={(c, i) => c.key || `${c.label}-${i}`}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  className="px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30"
+                  onPress={item.onPress}
+                >
+                  <Typography.Text semibold variant="bodySmall">
+                    {item.label}
+                  </Typography.Text>
+                </TouchableOpacity>
+              )}
+            />
+          )}
+          <View className="flex-row justify-end gap-3">
+            <TouchableOpacity
+              className="px-4 py-2.5 rounded-lg bg-bg-hover"
+              onPress={onCancel}
+            >
+              <Typography.Text semibold variant="body">
+                {cancelLabel}
+              </Typography.Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className="px-4 py-2.5 rounded-lg bg-accent"
+              onPress={onConfirm}
+            >
+              <Typography.Text className="text-text-inverse" semibold variant="body">
+                {confirmLabel}
+              </Typography.Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export default EditableValueModal;

package/sincpro_mobile_ui/Dialog/index.ts

@@ -0,0 +1,23 @@
+import { BottomSheet } from "./BottomSheet";
+import { ConfirmationProvider, useConfirmationContext } from "./Confirmation.context";
+import Confirmation from "./Dialog.Confirmation";
+import EditValue, {
+  type EditableValueModalChip,
+  type EditableValueModalProps,
+} from "./Dialog.EditValue";
+
+export const Dialog = {
+  Confirmation,
+  BottomSheet,
+  EditValue,
+};
+
+export {
+  BottomSheet,
+  ConfirmationProvider,
+  type EditableValueModalChip,
+  type EditableValueModalProps,
+  useConfirmationContext,
+};
+
+export default Dialog;

package/sincpro_mobile_ui/Display/Display.Avatar.tsx

@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { View } from "react-native";
+
+import { cn, tv, type VariantProps } from "../theme/tw";
+import { Typography } from "../Typography";
+
+const avatar = tv({
+  base: "justify-center items-center rounded-full shadow-sm",
+  variants: {
+    size: {
+      small: "w-8 h-8",
+      medium: "w-10 h-10",
+      large: "w-12 h-12",
+      xlarge: "w-16 h-16",
+    },
+    colorScheme: {
+      default: "bg-bg-hover",
+      primary: "bg-primary/20",
+      secondary: "bg-secondary/20",
+      success: "bg-success-light",
+      warning: "bg-warning-light",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "default",
+  },
+});
+
+export interface AvatarProps extends Omit<VariantProps<typeof avatar>, "size"> {
+  initials: string;
+  size?: number;
+  className?: string;
+}
+
+const Avatar: FC<AvatarProps> = ({ initials, size, colorScheme = "default", className }) => {
+  // Map size prop to Tailwind text classes
+  const getTextSize = () => {
+    if (size && size <= 32) return "text-xs";
+    if (size && size <= 40) return "text-sm";
+    if (size && size <= 48) return "text-base";
+    return "text-lg";
+  };
+
+  return (
+    <View
+      className={cn(avatar({ colorScheme }), className)}
+      style={size ? { width: size, height: size } : undefined}
+    >
+      <Typography.Text
+        className={cn("text-text-primary font-semibold", getTextSize())}
+        variant="body"
+      >
+        {initials}
+      </Typography.Text>
+    </View>
+  );
+};
+
+export default Avatar;

package/sincpro_mobile_ui/Display/Display.Badge.tsx

@@ -0,0 +1,72 @@
+import { Text, View } from "react-native";
+
+import { tv, type VariantProps } from "../theme/tw";
+
+const badge = tv({
+  slots: {
+    root: "px-2.5 py-1.5 rounded-lg self-start",
+    text: "text-xs font-semibold",
+  },
+  variants: {
+    variant: {
+      info: {
+        root: "bg-info-light",
+        text: "text-info",
+      },
+      infoDark: {
+        root: "bg-info",
+        text: "text-text-on-primary",
+      },
+      warning: {
+        root: "bg-warning-light",
+        text: "text-warning",
+      },
+      success: {
+        root: "bg-success-light",
+        text: "text-success",
+      },
+      successDark: {
+        root: "bg-success",
+        text: "text-text-on-primary",
+      },
+      danger: {
+        root: "bg-danger-light",
+        text: "text-danger",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "info",
+  },
+});
+
+export type BadgeVariant = VariantProps<typeof badge>["variant"];
+
+export enum BadgeVariants {
+  INFO = "info",
+  WARNING = "warning",
+  SUCCESS = "success",
+  INFO_DARK = "infoDark",
+  DANGER = "danger",
+  SUCCESS_DARK = "successDark",
+}
+
+export type BadgeProps = {
+  label: string;
+  variant: BadgeVariants | BadgeVariant | string;
+  className?: string;
+};
+
+function Badge({ label, variant, className }: BadgeProps) {
+  const styles = badge({ variant: variant as BadgeVariant });
+
+  return (
+    <View className={styles.root({ className })}>
+      <Text className={styles.text()} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+export default Badge;

package/sincpro_mobile_ui/Display/Display.CopyableText.tsx

@@ -0,0 +1,38 @@
+import * as Clipboard from "expo-clipboard";
+import { TouchableOpacity } from "react-native";
+
+import { Typography } from "../Typography";
+
+type CopyableTextProps =
+  | {
+      value: string;
+      getValue?: never;
+      label?: string;
+      className?: string;
+    }
+  | {
+      value?: never;
+      getValue: () => string;
+      label?: string;
+      className?: string;
+    };
+
+function CopyableText({ value, getValue, label, className }: CopyableTextProps) {
+  const hasStaticValue = value !== undefined;
+  const displayText = label || value;
+
+  const handleCopy = async () => {
+    const textToCopy = hasStaticValue ? value : getValue();
+    await Clipboard.setStringAsync(textToCopy);
+  };
+
+  return (
+    <TouchableOpacity onPress={handleCopy}>
+      <Typography.Text className={className || "text-primary"} semibold variant="bodySmall">
+        {displayText}
+      </Typography.Text>
+    </TouchableOpacity>
+  );
+}
+
+export default CopyableText;

package/sincpro_mobile_ui/Display/Display.CountRecords.tsx

@@ -0,0 +1,26 @@
+import { View } from "react-native";
+
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+
+interface IProps {
+  name?: string;
+  count: number;
+  withPadding?: boolean;
+  className?: string;
+}
+
+function CountRecords({ name, count, withPadding = true, className }: IProps) {
+  return (
+    <View className={cn("flex-row py-2", withPadding && "px-4", className)}>
+      <Typography.Text semibold variant="bodySmall">
+        {"Total "} {`${name || "Registros"} `}
+      </Typography.Text>
+      <Typography.Text className="text-text-secondary" variant="bodySmall">
+        ( {count} )
+      </Typography.Text>
+    </View>
+  );
+}
+
+export default CountRecords;

package/sincpro_mobile_ui/Display/Display.Date.tsx

@@ -0,0 +1,59 @@
+import type { StyleProp, TextStyle } from "react-native";
+
+import { formatDate } from "../lib/date";
+import { typographyVariants } from "../theme/typography";
+import { Typography } from "../Typography";
+
+type DateFormat = "short" | "long" | "numeric";
+
+interface DateFieldProps {
+  value: string | Date | null | undefined;
+  format?: DateFormat;
+  prefix?: string;
+  textVariant?: keyof typeof typographyVariants;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+  semibold?: boolean;
+  bold?: boolean;
+  className?: string;
+  showTime?: boolean;
+  timezone?: string;
+}
+
+function DateField({
+  value,
+  format = "short",
+  prefix = "",
+  textVariant = "body",
+  color,
+  style = {},
+  semibold = false,
+  bold = false,
+  className,
+  showTime = true,
+  timezone,
+}: DateFieldProps) {
+  const locale = "es-CR";
+
+  const formatted = value
+    ? formatDate(value, timezone, {
+        showTime,
+        locale,
+      })
+    : "-";
+
+  return (
+    <Typography.Text
+      bold={bold}
+      className={className}
+      color={color}
+      semibold={semibold && !bold}
+      style={style as any}
+      variant={textVariant}
+    >
+      {prefix ? `${prefix}${formatted}` : formatted}
+    </Typography.Text>
+  );
+}
+
+export default DateField;

package/sincpro_mobile_ui/Display/Display.Divider.tsx

@@ -0,0 +1,40 @@
+import { View } from "react-native";
+
+import { cn, tv, type VariantProps } from "../theme/tw";
+
+const divider = tv({
+  base: "w-full bg-border-divider",
+  variants: {
+    spacing: {
+      none: "my-0",
+      sm: "my-1",
+      md: "my-2",
+      lg: "my-3",
+    },
+    colorScheme: {
+      light: "bg-border-divider opacity-50",
+      default: "bg-border-divider",
+      dark: "bg-border-divider opacity-100",
+    },
+  },
+  defaultVariants: {
+    spacing: "md",
+    colorScheme: "default",
+  },
+});
+
+interface DividerProps extends VariantProps<typeof divider> {
+  thickness?: number;
+  className?: string;
+}
+
+function Divider({ thickness = 1, spacing, colorScheme, className }: DividerProps) {
+  return (
+    <View
+      className={cn(divider({ spacing, colorScheme }), className)}
+      style={{ height: thickness }}
+    />
+  );
+}
+
+export default Divider;

package/sincpro_mobile_ui/Display/Display.Icon.tsx

@@ -0,0 +1,69 @@
+import {
+  AntDesign,
+  Feather,
+  FontAwesome,
+  FontAwesome5,
+  Ionicons,
+  MaterialCommunityIcons,
+  MaterialIcons,
+  SimpleLineIcons,
+} from "@expo/vector-icons";
+import { ComponentType, FC } from "react";
+import { View } from "react-native";
+
+import { IconType } from "../lib/icon";
+import { theme } from "../theme";
+
+export interface IconProps {
+  name?: any;
+  size?: number;
+  color?: string;
+  type?: IconType;
+  customIcon?: ComponentType<{ size?: number; color?: string }>;
+  className?: string;
+}
+
+const Icon: FC<IconProps> = ({
+  name,
+  size = 24,
+  color,
+  type = "ionicons",
+  customIcon,
+  className,
+}) => {
+  const iconColor = color || theme.text.primary;
+
+  const renderIcon = () => {
+    if (type === "custom" && customIcon) {
+      const CustomIconComponent = customIcon;
+      return <CustomIconComponent color={iconColor} size={size} />;
+    }
+
+    switch (type) {
+      case "ionicons":
+        return <Ionicons color={iconColor} name={name} size={size} />;
+      case "fontawesome":
+        return <FontAwesome color={iconColor} name={name} size={size} />;
+      case "material":
+        return <MaterialIcons color={iconColor} name={name} size={size} />;
+      case "fontawesome5":
+        return <FontAwesome5 color={iconColor} name={name} size={size} />;
+      case "simplelineicons":
+        return <SimpleLineIcons color={iconColor} name={name} size={size} />;
+      case "antdesign":
+        return <AntDesign color={iconColor} name={name} size={size} />;
+      case "feather":
+        return <Feather color={iconColor} name={name} size={size} />;
+      case "MaterialCommunityIcons":
+        return <MaterialCommunityIcons color={iconColor} name={name} size={size} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View className={`justify-center items-center ${className || ""}`}>{renderIcon()}</View>
+  );
+};
+
+export default Icon;

package/sincpro_mobile_ui/Display/Display.Logo.tsx

@@ -0,0 +1,51 @@
+import { FC } from "react";
+import { Image, type ImageSourcePropType, View } from "react-native";
+
+import { tv, type VariantProps } from "../theme/tw";
+
+const logo = tv({
+  slots: {
+    container: "items-center justify-center",
+    image: "",
+  },
+  variants: {
+    size: {
+      small: {
+        image: "w-[120px] h-[80px]",
+      },
+      medium: {
+        image: "w-[180px] h-[100px]",
+      },
+      large: {
+        image: "w-[250px] h-[250px]",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export interface LogoProps extends VariantProps<typeof logo> {
+  source?: ImageSourcePropType;
+  className?: string;
+}
+
+function renderImage(imageClassName: string, source?: ImageSourcePropType) {
+  if (!source) {
+    return null;
+  }
+  return <Image className={imageClassName} resizeMode="contain" source={source} />;
+}
+
+const Logo: FC<LogoProps> = ({ source, size = "medium", className }) => {
+  const styles = logo({ size });
+
+  return (
+    <View className={styles.container({ className })}>
+      {renderImage(styles.image(), source)}
+    </View>
+  );
+};
+
+export default Logo;