@towsila/expo-ui-library 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/ui/sharpDropdown.tsx

@@ -0,0 +1,165 @@
+import { useState, useRef } from "react";
+import { Text, View, TouchableOpacity, 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 SharpDropdownProps {
+  options: Option[];
+  value: string | null;
+  onChange: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  onClearError?: () => void;
+  height?: number;
+  bgColor?: string;
+}
+
+export default function SharpDropdown({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Select an option",
+  error,
+  onClearError,
+  height = 50,
+  bgColor,
+}: SharpDropdownProps) {
+  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, h) => {
+      setDropdownPos({ x, y: y + h + 4, 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>
+      )}
+
+      {/* Sharp trigger — same as SharpInput */}
+      <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} />}
+
+      {/* Normal rounded dropdown options */}
+      <Modal visible={open} transparent animationType="none">
+        <TouchableOpacity
+          style={{ flex: 1 }}
+          activeOpacity={1}
+          onPress={() => setOpen(false)}
+        >
+          <View style={{
+            position: "absolute",
+            top: dropdownPos.y,
+            left: dropdownPos.x,
+            width: dropdownPos.width,
+            backgroundColor: colors.background.card,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: colors.semantic.border,
+            elevation: 10,
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.15,
+            shadowRadius: 6,
+            overflow: "hidden",
+          }}>
+            {options.map((opt, index) => (
+              <TouchableOpacity
+                key={opt.value}
+                onPress={() => {
+                  onChange(opt.value);
+                  setOpen(false);
+                }}
+                style={{
+                  padding: 14,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  borderBottomWidth: index < options.length - 1 ? 1 : 0,
+                  borderBottomColor: colors.background.main,
+                  backgroundColor: value === opt.value ? colors.primary + "15" : "transparent",
+                }}
+              >
+                <Text style={{
+                  fontSize: textSize.sm,
+                  fontFamily: value === opt.value ? Fonts.montserrat.semiBold : Fonts.montserrat.regular,
+                  color: value === opt.value ? colors.primary : colors.text.primary,
+                }}>
+                  {opt.label}
+                </Text>
+                {value === opt.value && (
+                  <Ionicons name="checkmark" size={16} color={colors.primary} />
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+}

package/src/index.ts

@@ -59,4 +59,5 @@ export {default as Badge} from "./components/ui/badge";
 export {default as WarningModel} from "./components/ui/warningModel";
 export {default as Toast} from "./components/ui/toast";
 export {default as AccountStatusScreen} from "./components/screens/AccountStatusScreen";
-export {sendEmail} from "./service/sendEmail";
+export {sendEmail} from "./service/sendEmail";
+export {default as SharpDropdown} from "./components/ui/sharpDropdown";