@lotics/ui 1.5.0 → 1.6.0

package/src/select_item.tsx

@@ -0,0 +1,57 @@
+import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+interface SelectItemProps {
+  children: React.ReactNode;
+  testID?: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A bordered, optionally-pressable container — the selectable-row look used on
+ * auth screens (organization picker, login choices). Frozen at the original
+ * Card styling (white, 1px border, radius 8, padding 16) so those screens stay
+ * visually stable while Card itself evolves toward a flatter dashboard look.
+ */
+export function SelectItem(props: SelectItemProps) {
+  const { children, testID, onPress, style } = props;
+
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        onPress={() => {
+          onPress();
+        }}
+        style={(state) => {
+          const hovered = (state as { hovered?: boolean }).hovered;
+          return [styles.container, hovered && styles.hovered, style];
+        }}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View testID={testID} style={[styles.container, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: colors.background,
+    borderColor: colors.border,
+    borderWidth: 1,
+  },
+  hovered: {
+    outlineColor: colors.zinc["900"],
+    outlineWidth: 2,
+    outlineStyle: "solid",
+  },
+});