@towsila/expo-ui-library 1.0.19 → 1.0.21

package/package.json

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

package/src/index.ts

@@ -60,4 +60,3 @@ 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 {default as SharpDropdown} from "./components/ui/sharpDropdown";

package/src/components/ui/sharpDropdown.tsx

@@ -1,165 +0,0 @@
-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>
-  );
-}