@towsila/expo-ui-library 1.0.0

package/src/components/ui/sharpDynamicForm.tsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
+import Input from "./input";
+import { Field } from "../../types/formFields";
+import { useAppTheme } from "../../context/ThemeContext";
+import { validateForm } from "../../utils/inputValidator/registerValidator";
+import { Ionicons } from "@expo/vector-icons";
+import { Fonts, textSize } from "../../tokens/typography";
+import SharpInput from "./sharpInput";
+import Arrow from "../../assets/customIcons/arrow.svg";
+import ArrowBack from "../../assets/customIcons/arrow_back.svg";
+import EyeIcon from "../../assets/customIcons/eye.svg";
+import EyeOffIcon from "../../assets/customIcons/eye_off.svg"
+interface Props {
+  fields: Field[];
+  formState: Record<string, string>;
+  setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  errors: Record<string, string>;
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  clearError: (name: string) => void;
+  onStepChange?: (step: number, total: number) => void;
+  nextLabel?: string;
+  backLabel?: string;
+}
+// can i split it into 2 not only move the password if the number of fields is > 4
+function splitIntoSteps(fields: Field[]): Field[][] {
+  const info = fields.filter((f) => f.type !== "password");
+  const security = fields.filter((f) => f.type === "password");
+  return [info, security].filter((s) => s.length > 0);
+}
+
+export const SharpDynamicForm: React.FC<Props> = ({
+  fields,
+  formState,
+  setFormState,
+  errors,
+  setErrors,
+  clearError,
+  onStepChange,
+  nextLabel,
+  backLabel,
+}) => {
+  const [showPasswordField, setShowPasswordField] = useState<Record<string, boolean>>({});
+  const [currentStep, setCurrentStep] = useState(0);
+  const { colors } = useAppTheme();
+
+  const steps = splitIntoSteps(fields);
+  const totalSteps = steps.length;
+  const stepFields = steps[currentStep] ?? [];
+
+  const goNext = () => {
+    // validate current step fields before proceeding
+    const newErrors = validateForm(stepFields, formState);
+    setErrors((prev) => ({ ...prev, ...newErrors }));
+    if (Object.keys(newErrors).length > 0) return;
+
+    const next = Math.min(currentStep + 1, totalSteps - 1);
+    setCurrentStep(next);
+    onStepChange?.(next, totalSteps);
+  };
+
+  const goPrev = () => {
+    const prev = Math.max(currentStep - 1, 0);
+    setCurrentStep(prev);
+    onStepChange?.(prev, totalSteps);
+  };
+
+  const renderInput = (field: Field) => (
+    <View key={field.name} style={{ marginBottom: 10 }}>
+      <SharpInput
+        value={formState[field.name] || ""}
+        onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
+        iconLeft={field.svgIcon}
+        iconRight={
+          field.secureTextEntry
+            ? (color) => showPasswordField[field.name]
+            ? <EyeOffIcon width={18} height={18} color={color} />
+            : <EyeIcon width={18} height={18} color={color} />
+          : undefined
+        }
+        placeholder={field.placeholder}
+        onPressIconRight={
+          field.secureTextEntry
+            ? () => setShowPasswordField((prev) => ({ ...prev, [field.name]: !prev[field.name] }))
+            : undefined
+        }
+        secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
+        returnKeyType="next"
+        error={errors[field.name]}
+        onClearError={() => clearError(field.name)}
+        label={field.label}
+      />
+    </View>
+  );
+
+  return (
+    <View style={{ gap: 4 }}>
+
+      {/* Stepper — only show if more than 1 step */}
+      {totalSteps > 1 && (
+        <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 12 }}>
+          {/* Back arrow */}
+          <View style={{ flex: 1 }}>
+          {currentStep > 0 && backLabel && (
+            <TouchableOpacity onPress={goPrev} style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: 6 }}>
+                <ArrowBack width={16} height={16} color={colors.text.secondary}/>
+                <Text style={{ color: colors.text.secondary, fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.sm }}>
+                {backLabel}
+                </Text>
+            </TouchableOpacity>
+          )}
+          </View>
+
+          {/* Pills */}
+          <View style={{ flexDirection: "row", gap: 8 }}>
+            {steps.map((_, i) => (
+              <View key={i} style={{
+                width: i === currentStep ? 28 : 10,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: i <= currentStep ? colors.primary : colors.text.placeholder + "40",
+              }} />
+            ))}
+          </View>
+          <View style={{ flex: 1 }} />
+        </View>
+      )}
+
+      {/* Fields */}
+        {stepFields.map((f) => renderInput(f))}
+
+      {/* Navigation */}
+      {totalSteps > 1 && (
+        <View style={{ gap: 10, marginTop: 4 }}>
+          {currentStep < totalSteps - 1 && (
+            <TouchableOpacity onPress={goNext} style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 6 }}>
+                <Text style={{ color: colors.text.secondary, fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.sm }}>
+                {nextLabel}
+                </Text>
+                <Arrow width={16} height={16} color={colors.text.secondary}/>
+            </TouchableOpacity>
+            )}
+          
+        </View>
+      )}
+    </View>
+  );
+};

package/src/components/ui/sharpInput.tsx

@@ -0,0 +1,148 @@
+import React, { useState, ComponentProps } from "react";
+import { Text, TextInput, TextInputProps, View, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+import ErrorMessage from "./error";
+import SharpContainer from "./sharpContainer";
+interface InputProps extends TextInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  iconLeft?: (color: string)=>React.ReactNode;
+  iconRight?:(color: string)=>React.ReactNode;
+  onPressIconRight?: () => void;
+  error?: string;
+  label?: string;
+  onClearError?: () => void;
+  height?: number;
+  prefix?: React.ReactNode;
+  bgColor?:string;
+}
+
+export default function SharpInput({
+  value,
+  onChangeText,
+  placeholder,
+  iconLeft,
+  iconRight,
+  onPressIconRight,
+  error,
+  label,
+  onClearError,
+  height = 50,
+  prefix,
+  bgColor,
+  ...rest
+}: InputProps) {
+  const { colors } = useAppTheme();
+  const [focused, setFocused] = useState(false);
+
+  // Determine border color based on state
+  const getBorderColor = () => {
+    if (error) return colors.semantic.error;
+    if (focused) return colors.primary;
+    return colors.semantic.border; // default border color
+  };
+
+  return (
+    <View style={{ marginBottom: 4 }}>
+      {label && (
+        <Text
+          style={{
+            color: colors.text.primary,
+            fontSize: textSize.xs,
+            fontFamily: Fonts.montserrat.semiBold,
+            marginBottom: 6,
+          }}
+        >
+          {label}
+        </Text>
+      )}
+
+      {/* Sharp container wraps the input + icons */}
+      <SharpContainer
+        height={height}
+        bgColor={bgColor ?? colors.background.main}
+        borderColor={getBorderColor()} // dynamic border
+        
+      >
+        <View style={styles.inputWrapper}>
+          {iconLeft && (
+            <View style={styles.iconLeft}>
+              {iconLeft(getBorderColor())}
+            </View>
+          )}
+          {prefix && (
+            <View style={styles.prefix}>
+              {prefix}
+            </View>
+          )}
+
+          <TextInput
+            value={value}
+            onChangeText={(text) => {
+              onChangeText(text);
+              if (error) onClearError?.();
+            }}
+            placeholder={placeholder}
+            placeholderTextColor={colors.text.secondary}
+            onFocus={() => {
+              setFocused(true);
+              if (error) onClearError?.();
+            }}
+            onBlur={() => setFocused(false)}
+            style={[
+              styles.input,
+              {
+                color: colors.text.primary,
+                paddingLeft: iconLeft ? 42 : 16,
+                paddingRight: iconRight ? 42 : 16,
+                backgroundColor: "transparent", // let SharpContainer handle background
+              },
+            ]}
+            {...rest}
+          />
+
+          {iconRight && (
+            <TouchableOpacity onPress={onPressIconRight} style={styles.iconRight}>
+              {iconRight(colors.semantic.border)}
+            </TouchableOpacity>
+          )}
+        </View>
+      </SharpContainer>
+
+      {error && <ErrorMessage message={error} />}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  inputWrapper: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 4, // small inner padding
+  },
+  iconLeft: {
+    position: "absolute",
+    left: 14,
+    zIndex: 1,
+  },
+  iconRight: {
+    position: "absolute",
+    right: 14,
+    zIndex: 1,
+  },
+  input: {
+    flex: 1,
+    height: "100%",
+    fontSize: textSize.sm,
+    fontFamily: Fonts.montserrat.regular,
+    // No background, no border – SharpContainer provides shape
+  },
+  prefix:{
+    flexDirection: "row",
+    gap: 4,
+    alignItems:"center"
+  }
+});

package/src/components/ui/sharpOtpInput.tsx

@@ -0,0 +1,228 @@
+import { useRef, useState } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import Svg, { Path, Defs, LinearGradient as SvgGradient, Stop } from "react-native-svg";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+
+interface OtpInputProps {
+  length?: number;
+  onComplete?: (code: string) => void;
+  onChange?: (code: string) => void;
+  bgColor?: string;
+}
+
+const BOX = 70;
+
+function SharpBox({ bgColor, borderColor, id }: { bgColor: string; borderColor: string; id: string }) {
+  // match SharpElement exactly — W is dims.w - 8, H is dims.h
+  const W = BOX - 8;
+  const H = BOX;
+
+  const skewX  = 10;
+  const skewYT = H * 0.05;
+  const skewYB = H * 0.95;
+  const crT    = H * 0.25;
+  const crB    = H * 0.75;
+
+  const bg = `
+    M ${skewX},0
+    L ${W - skewX},${skewYT}
+    L ${W},${crT}
+    L ${W},${crB}
+    L ${W - skewX},${skewYB}
+    L ${skewX},${H}
+    L 0,${crB}
+    L 0,${crT}
+    Z
+  `;
+
+  return (
+    <Svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${W} ${H}`}
+      style={StyleSheet.absoluteFill}
+    >
+      <Defs>
+        <SvgGradient id={`btnGrad_${id}`} x1="0%" y1="0%" x2="100%" y2="0%">
+          <Stop offset="0%"  stopColor={bgColor} stopOpacity="0.65" />
+          <Stop offset="70%" stopColor={bgColor} stopOpacity="1" />
+        </SvgGradient>
+
+        <SvgGradient id={`highlightGrad_${id}`} x1="0%" y1="0%" x2="100%" y2="100%">
+          <Stop offset="0%"  stopColor={borderColor} stopOpacity="0.65" />
+          <Stop offset="60%" stopColor={bgColor}      stopOpacity="1" />
+        </SvgGradient>
+      </Defs>
+
+      {/* Background */}
+      <Path d={bg} fill={`url(#btnGrad_${id})`} />
+
+      {/* Shadow: top + right */}
+      <Path
+        d={`
+          M ${skewX},-1.6
+          L ${W - skewX},${skewYT + 3}
+          L ${W - skewX},${crT + 5}
+          L ${W},${crB - 16}
+        `}
+        fill="none"
+        stroke={`url(#highlightGrad_${id})`}
+        strokeWidth={6}
+        strokeLinejoin="miter"
+        transform="translate(2 3)"
+      />
+
+      {/* Shadow: bottom */}
+      <Path
+        d={`
+          M ${W - skewX},${crB}
+          L ${skewX + 10},${H - 0.5}
+        `}
+        fill="none"
+        stroke={`url(#highlightGrad_${id})`}
+        strokeWidth={6}
+        strokeLinejoin="miter"
+        transform="translate(2 3)"
+      />
+
+      {/* Shadow: left top */}
+      <Path
+        d={`
+          M ${skewX + 0.2},-1.4
+          L -0.5,${crT - 2}
+        `}
+        fill="none"
+        stroke={borderColor + "99"}
+        strokeWidth={2.7}
+        strokeLinejoin="miter"
+        transform="translate(2 3)"
+      />
+
+      {/* Shadow: left body */}
+      <Path
+        d={`
+          M -1,${crT - 3}
+          L -1,${H - 20}
+          L -0.5,${H - 20}
+          L 1,${crT - 2}
+          Z
+        `}
+        fill={borderColor + "99"}
+        transform="translate(2 3)"
+      />
+
+      {/* Border: top + right */}
+      <Path
+        d={`
+          M ${skewX},-0.5
+          L ${W - skewX},${skewYT}
+          L ${W},${crT}
+          L ${W},${crB}
+        `}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={6}
+        strokeLinejoin="miter"
+      />
+
+      {/* Border: bottom */}
+      <Path
+        d={`
+          M ${W + 1},${crB - 2.2}
+          L ${W - skewX},${skewYB}
+          L ${skewX + 10},${H + 2}
+        `}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={6}
+        strokeLinejoin="miter"
+      />
+
+      {/* Border: left top diagonal */}
+      <Path
+        d={`
+          M ${skewX},0
+          L 0,${crT}
+        `}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={2.5}
+        strokeLinejoin="miter"
+      />
+
+      {/* Border: left body fill */}
+      <Path
+        d={`
+          M -1,${crT - 1}
+          L 0,${H - 14}
+          L 1,${H - 14}
+          L 1,${crT + 1}
+          Z
+        `}
+        fill={borderColor}
+      />
+    </Svg>
+  );
+}
+
+export default function SharpOtpInput({ length = 6, onComplete, onChange, bgColor }: OtpInputProps) {
+  const { colors } = useAppTheme();
+  const [digits, setDigits] = useState<string[]>(Array(length).fill(""));
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const refs = useRef<TextInput[]>([]);
+
+  const handleChange = (text: string, index: number) => {
+    const newDigits = [...digits];
+    newDigits[index] = text;
+    setDigits(newDigits);
+
+    const code = newDigits.join("");
+    onChange?.(code);
+
+    if (text && index < length - 1) {
+      refs.current[index + 1]?.focus();
+    } else if (!text && index > 0) {
+      refs.current[index - 1]?.focus();
+    }
+
+    if (code.length === length && newDigits.every((d) => d !== "")) {
+      onComplete?.(code);
+    }
+  };
+
+  return (
+    <View style={{ flexDirection: "row", justifyContent: "center", gap: 10 }}>
+      {digits.map((digit, index) => (
+        <View key={index} style={{ width: BOX, height: BOX }}>
+          <SharpBox
+            bgColor={bgColor ?? colors.background.main}
+            borderColor={focusedIndex === index ? colors.primary : colors.semantic.border}
+            id={`otp_${index}`}
+          />
+          <TextInput
+  ref={(r) => { if (r) refs.current[index] = r; }}
+  style={{
+    position: "absolute",
+    width: BOX,
+    height: BOX,
+    fontSize: textSize.md,
+    color: colors.text.primary,
+    fontFamily: Fonts.montserrat.regular,
+    textAlign: "center",
+    backgroundColor: "transparent",
+  }}
+  placeholder="•"
+  placeholderTextColor={colors.text.placeholder}
+  keyboardType="number-pad"
+  maxLength={1}
+  value={digit}
+  onChangeText={(text) => handleChange(text, index)}
+  onFocus={() => setFocusedIndex(index)}
+  onBlur={() => setFocusedIndex(null)}
+/>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/ui/sharpSelect.tsx

@@ -0,0 +1,155 @@
+import { useState, useRef } from "react";
+import { Text, View, TouchableOpacity, ScrollView, Modal } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
+import { Ionicons } from "@expo/vector-icons";
+import SharpContainer from "./sharpContainer";
+import ErrorMessage from "./error";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SharpSelectProps {
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  onClearError?: () => void;
+  height?: number;
+  bgColor?: string;
+}
+
+export default function SharpSelect({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Select an option",
+  error,
+  onClearError,
+  height = 50,
+  bgColor,
+}: SharpSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [dropdownPos, setDropdownPos] = useState({ x: 0, y: 0, width: 0 });
+  const triggerRef = useRef<View>(null);
+  const { colors } = useAppTheme();
+
+  const selectedLabel = options.find((o) => o.value === value)?.label;
+
+  const getBorderColor = () => {
+    if (error) return colors.semantic.error;
+    if (open) return colors.primary;
+    return colors.semantic.border;
+  };
+
+  const handleOpen = () => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setDropdownPos({ x, y: y + height, width });
+      setOpen(true);
+    });
+    onClearError?.();
+  };
+
+  return (
+    <View style={{ marginBottom: 4 }}>
+      {label && (
+        <Text style={{
+          color: colors.text.primary,
+          fontSize: textSize.xs,
+          fontFamily: Fonts.montserrat.semiBold,
+          marginBottom: 6,
+        }}>
+          {label}
+        </Text>
+      )}
+
+      <TouchableOpacity onPress={() => open ? setOpen(false) : handleOpen()} activeOpacity={0.8}>
+        <View ref={triggerRef}>
+          <SharpContainer
+            height={height}
+            bgColor={bgColor ?? colors.background.main}
+            borderColor={getBorderColor()}
+          >
+            <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }}>
+              <Text style={{
+                fontSize: textSize.sm,
+                fontFamily: Fonts.montserrat.regular,
+                color: selectedLabel ? colors.text.primary : colors.text.secondary,
+              }}>
+                {selectedLabel ?? placeholder}
+              </Text>
+              <Ionicons name={open ? "chevron-up" : "chevron-down"} size={16} color={colors.text.secondary} />
+            </View>
+          </SharpContainer>
+        </View>
+      </TouchableOpacity>
+
+      {error && <ErrorMessage message={error} />}
+
+      {/* Modal dropdown positioned below trigger */}
+      <Modal visible={open} transparent animationType="none">
+        {/* backdrop to close */}
+        <TouchableOpacity
+          style={{ flex: 1 }}
+          activeOpacity={1}
+          onPress={() => setOpen(false)}
+        >
+          <View style={{
+            position: "absolute",
+            top: dropdownPos.y + 4,
+            left: dropdownPos.x,
+            width: dropdownPos.width,
+            backgroundColor: bgColor ?? colors.background.card,
+            borderRadius: 10,
+            maxHeight: 220,
+            elevation: 10,
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.15,
+            shadowRadius: 6,
+            overflow: "hidden",
+          }}>
+            <ScrollView
+              bounces={false}
+              keyboardShouldPersistTaps="handled"
+              nestedScrollEnabled
+            >
+              {options.map((opt, index) => (
+                <TouchableOpacity
+                  key={opt.value}
+                  onPress={() => {
+                    onChange(opt.value);
+                    setOpen(false);
+                  }}
+                  style={{
+                    paddingVertical: 14,
+                    paddingHorizontal: 16,
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    borderBottomWidth: index < options.length - 1 ? 1 : 0,
+                    borderBottomColor: colors.background.main,
+                    backgroundColor: opt.value === value ? colors.primary + "15" : "transparent",
+                  }}
+                >
+                  <Text style={{
+                    fontSize: textSize.sm,
+                    fontFamily: opt.value === value ? Fonts.montserrat.semiBold : Fonts.montserrat.regular,
+                    color: opt.value === value ? colors.primary : colors.text.primary,
+                  }}>
+                    {opt.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+}