@towsila/expo-ui-library 1.0.0

package/src/components/ui/input.tsx

@@ -0,0 +1,121 @@
+import React, { useState, ComponentProps } from "react";
+import { StyleProp, Text, TextInput, TextInputProps, View, ViewProps } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+import { Ionicons } from "@expo/vector-icons";
+import ErrorMessage from "./error";
+interface InputProps extends TextInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder: string;
+  iconLeft?: ComponentProps<typeof Ionicons>["name"];
+  iconRight?: ComponentProps<typeof Ionicons>["name"];
+  onPressIconRight?: () => void;
+  error?: string;
+  label?:string;
+  onClearError: () => void;
+  style?: StyleProp<ViewProps>;
+  labelFontFamily?: string;
+  textFontFamily?: string;
+}
+
+export default function Input({
+  value,
+  onChangeText,
+  placeholder,
+  style,
+  iconLeft,
+  iconRight,
+  onPressIconRight,
+  error,
+  label,
+  onClearError,
+  labelFontFamily = Fonts.montserrat.semiBold,
+  textFontFamily = Fonts.montserrat.regular,
+  ...rest
+}: InputProps) {
+  const { colors } = useAppTheme();
+  const [focused, setFocused] = useState(false);
+  return (
+    <View style={[style, {marginBottom: 4}]}>
+      {label &&  (
+        <Text style={{ 
+          color: colors.text.primary, 
+          fontSize: textSize.xs, 
+          fontFamily: labelFontFamily, 
+          marginBottom: 6, 
+        }}>
+          {label}
+        </Text>
+      )}
+      <View style={{position: "relative"}}>
+        {/* icon left */}
+        {iconLeft && (
+          <Ionicons 
+          name={iconLeft}
+          size={18}
+          color={error ? colors.semantic.error : focused ? colors.primary : colors.text.secondary}
+          style={{
+              position: "absolute",
+              left: 14,
+              top: "50%",
+              transform: [{ translateY: -9 }],
+              zIndex: 1,
+            }}
+          />
+        )}
+        {/* input */}
+        <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={{
+            height: 50,
+            borderRadius: 10,
+            fontSize: textSize.sm,
+            backgroundColor: colors.background.main,
+            color: colors.text.primary,
+            fontFamily: textFontFamily,
+            paddingLeft: iconLeft ? 42 : 16,
+            paddingRight: iconRight ? 42 : 16,
+            borderColor: error
+              ? colors.semantic.error
+              : focused
+              ? colors.primary
+              : colors.semantic.border,
+            borderWidth: error ? 1 : focused ? 1.5 : 0.5,
+          }}
+          {...rest}
+        />
+        {/* icon right */}
+        {iconRight && (
+          <Ionicons
+            name={iconRight}
+            size={18}
+            color={colors.text.secondary}
+            onPress={onPressIconRight}
+            style={{
+              position: "absolute",
+              right: 14,
+              top: "50%",
+              transform: [{ translateY: -9 }],
+              zIndex: 1,
+            }}
+          />
+        )}
+      </View>
+      {error &&  (
+        <ErrorMessage message={error}/>
+      )}
+    </View>
+  );
+}

package/src/components/ui/languageSelect.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
+import { LANGUAGES } from "../../constants/language";
+import { Language } from "../../context/LanguageContext";
+
+interface LanguageSelectProps {
+  value: Language;
+  onChange: (code: Language) => void;
+}
+
+export default function LanguageSelect({ value, onChange }: LanguageSelectProps) {
+  const { colors } = useAppTheme();
+  const [open, setOpen] = useState(false);
+
+  const selected = LANGUAGES.find((l) => l.code === value) ?? LANGUAGES[0];
+
+  return (
+    <View style={{ position: "relative", zIndex: open ? 100 : 1 }}>
+      {/* Selected value / trigger */}
+      <TouchableOpacity
+        onPress={() => setOpen((prev) => !prev)}
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10}}>
+          <Image source={selected.logo} style={{ width: 20, height: 20, borderRadius: 10 }} />
+          <Text style={{
+            fontFamily: Fonts.montserrat.regular,
+            fontSize: textSize.sm,
+            color: colors.text.primary,
+          }}>
+            {selected.code}
+          </Text>
+        </View>
+        <Ionicons
+          name={open ? "chevron-up" : "chevron-down"}
+          size={18}
+          color={colors.text.secondary}
+        />
+      </TouchableOpacity>
+
+      {/* Expanded options — absolutely positioned so it floats over content below instead of pushing it down */}
+      {open && (
+        <View style={{
+          position: "absolute",
+          top: "100%",
+          left: -40,
+          right: 0,
+          marginTop: 10,
+          backgroundColor: colors.background.card,
+          borderRadius: 10,
+          overflow: "hidden",
+          elevation: 6, // Android shadow
+          shadowColor: "#000", // iOS shadow
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.15,
+          shadowRadius: 6,
+          width:100
+        }}>
+          {LANGUAGES.map((lang) => (
+            <TouchableOpacity
+              key={lang.code}
+              onPress={() => {
+                onChange(lang.code);
+                setOpen(false);
+              }}
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 6,
+                paddingVertical: 14,
+                paddingHorizontal: 14,
+              }}
+            >
+              <Image source={lang.logo} style={{ width: 20, height: 20, borderRadius: 10 }} />
+              <Text style={{
+                fontFamily: Fonts.montserrat.regular,
+                fontSize: textSize.sm,
+                color: colors.text.primary,
+                flex: 1,
+              }}>
+                {lang.code}
+              </Text>
+              {lang.code === value && (
+                <Ionicons name="checkmark" size={20} color={colors.primary} />
+              )}
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/ui/pageIndicator.tsx

@@ -0,0 +1,58 @@
+import { View, StyleSheet } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+
+type Props = {
+  total?: number;
+  current?: number;
+  borderColor: string;
+  color?: string;
+  defaultColor:string;
+};
+
+const SIZE = 15;
+const CENTER = SIZE / 2;
+
+export default function PageIndicator({
+  total = 3,
+  current = 1,
+  borderColor = "black",
+  color = "white",
+  defaultColor,
+}: Props) {
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: total }).map((_, index) => (
+        <Svg
+          key={index}
+          width={SIZE}
+          height={SIZE}
+          viewBox={`0 0 ${SIZE} ${SIZE}`}
+        >
+          {/* Outer circle (border) */}
+          <Circle
+            cx={CENTER}
+            cy={CENTER}
+            r={CENTER - 0.5}
+            fill={borderColor}
+          />
+
+          {/* Inner circle */}
+          <Circle
+            cx={CENTER - 1} // Move slightly right -> thinner left border
+            cy={CENTER}
+            r={CENTER - 3}
+            fill={current === index ? color : defaultColor}
+          />
+        </Svg>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+  },
+});

package/src/components/ui/passwordRequirmentCard.tsx

@@ -0,0 +1,55 @@
+import { View, Text } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+
+interface PasswordRequirementsCardProps {
+  checks: boolean[];   // ← array of booleans instead of named object
+  cardItems: string[];
+  cardTitle?: string;
+}
+
+export default function PasswordRequirementsCard({
+  checks,
+  cardItems,
+  cardTitle,
+}: PasswordRequirementsCardProps) {
+  const { colors } = useAppTheme();
+
+  return (
+    <View style={{
+      backgroundColor: colors.background.card,
+      borderRadius: 14,
+      padding: 16,
+      gap: 10,
+    }}>
+      {cardTitle && (
+        <Text style={{
+          fontSize: textSize.sm,
+          fontFamily: Fonts.montserrat.semiBold,
+          color: colors.text.primary,
+          marginBottom: 4,
+        }}>
+          {cardTitle}
+        </Text>
+      )}
+
+      {cardItems.map((item, index) => (
+        <View key={index} style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Ionicons
+            name={checks[index] ? "checkmark-circle" : "ellipse-outline"}
+            size={16}
+            color={checks[index] ? colors.semantic.success : colors.text.secondary}
+          />
+          <Text style={{
+            fontSize: textSize.sm,
+            fontFamily: Fonts.montserrat.regular,
+            color: checks[index] ? colors.text.primary : colors.text.secondary,
+          }}>
+            {item}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/ui/sharpButton.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, View, LayoutChangeEvent } from "react-native";
+import { Fonts, textSize } from "../../tokens/typography";
+import { useAppTheme } from "../../context/ThemeContext";
+import SharpContainer from "./sharpContainer"
+
+type ButtonProps = {
+  text: string;
+  bgColor?: string;
+  textColor?: string;
+  onPress?: () => void;
+  fontSize?: number;
+  fontFamily?: string;
+  height?: number;
+  loading?: boolean;
+  borderColor?: string;
+};
+
+
+export default function SharpButton({
+  text,
+  bgColor = "transparent",
+  textColor,
+  borderColor, 
+  onPress,
+  fontSize = textSize.md,
+  fontFamily = Fonts.montserrat.semiBold,
+  height = 56,
+  loading,
+}: ButtonProps) {
+  const { colors } = useAppTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.8}
+      disabled={loading}
+    >
+      <SharpContainer height={height} bgColor={bgColor} borderColor={borderColor ?? colors.text.primary}>
+      <View style={styles.contentContainer}>
+        {loading ? (
+          <ActivityIndicator color={textColor ?? colors.text.primary} size="small" />
+        ) : (
+          <Text style={{
+            fontSize,
+            fontFamily: fontFamily,
+            color: textColor ?? colors.text.primary,
+            textAlign: "center",
+          }}>
+            {text}
+          </Text>
+        )}
+      </View>
+      </SharpContainer>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 2,
+    paddingHorizontal: 24,
+  },
+});

package/src/components/ui/sharpContainer.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
+import Svg, { Path, Defs, LinearGradient as SvgGradient, Stop } from "react-native-svg";
+
+interface SharpElementProps{
+    height: number;
+    bgColor: string;
+    borderColor: string;
+    children: React.ReactNode;
+}
+export default function SharpElement({height, bgColor, borderColor, children}:SharpElementProps){
+    const [dims, setDims] = useState({ w: 300, h: height });
+    
+      const onLayout = (e: LayoutChangeEvent) => {
+        const { width, height: h } = e.nativeEvent.layout;
+        setDims({ w: width, h });
+      };
+    
+      const W = dims.w - 8;
+      const H = dims.h;
+    
+      // anchors — all relative to real W and H
+      const skewX  = 10;          // horizontal skew offset (fixed, looks good at any width)
+      const skewYT = H * 0.05;   // top edge vertical skew at right side
+      const skewYB = H * 0.95;   // bottom edge vertical skew at right side
+      const crT    = H * 0.25;   // top-right corner end
+      const crB    = H * 0.75;   // bottom-right corner start
+    
+      // main shape
+      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(
+        <View
+        onLayout={onLayout}
+        style={{ width: "100%", height, justifyContent: "center" }}
+        >
+        <View style={StyleSheet.absoluteFill}>
+                <Svg
+                  width="100%"
+                  height="100%"
+                  viewBox={`0 0 ${W} ${H}`}
+                >
+                  <Defs>
+                    {/* Button fill gradient */}
+                    <SvgGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+                      <Stop offset="0%"   stopColor={bgColor} stopOpacity="0.65" />
+                      <Stop offset="70%" stopColor={bgColor} stopOpacity="1"    />
+                    </SvgGradient>
+        
+                    {/* Border highlight gradient */}
+                    <SvgGradient id="highlightGrad" 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)" />
+        
+                  {/* ── 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)"
+                    strokeWidth={6}
+                    strokeLinejoin="miter"
+                    transform="translate(2 3)"
+                  />
+        
+                  {/* ── Shadow: bottom ── */}
+                  <Path
+                    d={`
+                      M ${W-skewX},${crB}
+                      L ${skewX+50},${H-0.5}
+                    `}
+        
+                   
+                    fill="none"
+                    stroke="url(#highlightGrad)"
+                    strokeWidth={6}
+                    strokeLinejoin="miter"
+                    transform="translate(2 3)"
+                  />
+        
+                  {/* ── Shadow: left ── */}
+                  <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)"
+                  />
+                  <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+50},${H+3}
+                    `}
+                    
+                    fill="none"
+                    stroke={borderColor}
+                    strokeWidth={6}
+                    strokeLinejoin="miter"
+                  />
+        
+                  {/* ── Border: left ── */}
+                      
+                  <Path
+                    d={`
+                      M ${skewX},0
+                      L 0,${crT}
+                    `}
+                    fill="none"
+                    stroke={borderColor}
+                    strokeWidth={2.5}
+                    strokeLinejoin="miter"
+                  />
+                  <Path
+                    d={`
+                      M -1,${crT-1}
+                      L 0,${H-14}
+                      L 1,${H-14}
+                      L 1,${crT+1}
+                      Z
+                    `}
+                    fill={borderColor}
+                  />
+                </Svg>
+              </View>
+              {children}
+              </View>
+      )
+    
+}