@onairos/react-native 1.0.0 → 1.0.1

package/lib/commonjs/components/Overlay.js

@@ -266,553 +266,4 @@ const styles = _reactNative.StyleSheet.create({
     marginLeft: 4
   }
 });
-//# sourceMappingURL=Overlay.js.map     setLoginError('Please enter both username and password');
-      return;
-    }
-    setIsLoading(true);
-    setLoginError('');
-    try {
-      const response = await _axios.default.post(`${API_URL}/login`, {
-        username,
-        password
-      });
-      if (response.status === 200) {
-        // Store the token
-        await _asyncStorage.default.setItem('onairosToken', response.data.token);
-        await _asyncStorage.default.setItem('username', username);
-
-        // Update authentication state
-        await onLoginSuccess(username, false);
-      } else {
-        setLoginError('Invalid username or password');
-      }
-    } catch (error) {
-      console.error('Login failed:', error);
-      setLoginError('Login failed. Please check your credentials.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Render login form
-  const renderLoginForm = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.loginContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.loginTitle
-  }, "Sign in to Onairos"), loginError ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.errorText
-  }, loginError) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.inputContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.inputLabel
-  }, "Username"), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
-    style: styles.input,
-    value: username,
-    onChangeText: setUsername,
-    placeholder: "Enter your username",
-    autoCapitalize: "none"
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.inputContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.inputLabel
-  }, "Password"), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
-    style: styles.input,
-    value: password,
-    onChangeText: setPassword,
-    placeholder: "Enter your password",
-    secureTextEntry: true
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.loginButton,
-    onPress: handleUsernameLogin,
-    disabled: isLoading
-  }, isLoading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    color: "#fff",
-    size: "small"
-  }) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.loginButtonText
-  }, "Sign In")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.divider
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.dividerLine
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.dividerText
-  }, "OR"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.dividerLine
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.othentButton,
-    onPress: handleOthentLogin,
-    disabled: isLoading
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-    source: {
-      uri: 'https://onairos.sirv.com/Images/othent-logo.png'
-    },
-    style: styles.othentLogo
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.othentButtonText
-  }, "Continue with Othent")));
-
-  // Render onboarding step
-  const renderOnboarding = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.onboardingContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.onboardingTitle
-  }, "Connect Your Accounts"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.onboardingSubtitle
-  }, "Select the social media accounts you want to connect to Onairos"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.socialAccountsContainer
-  }, socialPlatforms.map(platform => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    key: platform.id,
-    style: [styles.socialAccount, selectedSocialAccounts.includes(platform.id) && styles.selectedSocialAccount],
-    onPress: () => toggleSocialAccount(platform.id)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-    source: {
-      uri: platform.icon
-    },
-    style: styles.socialIcon
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.socialName
-  }, platform.name), selectedSocialAccounts.includes(platform.id) && /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
-    name: "check-circle",
-    size: 24,
-    color: "#4CAF50",
-    style: styles.checkIcon
-  })))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: [styles.nextButton, selectedSocialAccounts.length === 0 && styles.disabledButton],
-    onPress: startTraining,
-    disabled: selectedSocialAccounts.length === 0 || isTraining
-  }, isTraining ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    color: "#fff",
-    size: "small"
-  }) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.nextButtonText
-  }, "Continue")));
-
-  // Render training progress
-  const renderTraining = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.trainingContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.trainingTitle
-  }, "Training Your Model"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.trainingSubtitle
-  }, "Please wait while we train your personalized AI model"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.progressBarContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.progressBar, {
-      width: `${trainingProgress}%`
-    }]
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.progressText
-  }, trainingProgress, "% Complete"));
-
-  // Render PIN creation step
-  const renderCreatePin = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.pinContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.pinTitle
-  }, "Create Your PIN"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.pinSubtitle
-  }, "This PIN will be used to secure your data"), pinError ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.errorText
-  }, pinError) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.inputContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.inputLabel
-  }, "PIN"), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
-    style: styles.input,
-    value: pin,
-    onChangeText: setPin,
-    placeholder: "Enter a 4-digit PIN",
-    keyboardType: "numeric",
-    secureTextEntry: true,
-    maxLength: 4
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.inputContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.inputLabel
-  }, "Confirm PIN"), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
-    style: styles.input,
-    value: confirmPin,
-    onChangeText: setConfirmPin,
-    placeholder: "Confirm your PIN",
-    keyboardType: "numeric",
-    secureTextEntry: true,
-    maxLength: 4
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.nextButton,
-    onPress: handleCreatePin,
-    disabled: isLoading
-  }, isLoading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    color: "#fff",
-    size: "small"
-  }) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.nextButtonText
-  }, "Complete Setup")));
-
-  // Render data request step
-  const renderDataRequest = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.dataRequestContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.dataRequestTitle
-  }, dataRequester, " is requesting access to your data"), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    style: styles.requestsScrollView
-  }, Object.keys(requestData).map(key => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    key: key,
-    style: styles.requestSection
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.requestSectionTitle
-  }, key, " Data Request"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.requestDescription
-  }, requestData[key].descriptions), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: [styles.requestToggle, selectedConnections.some(conn => conn.key === key && conn.dataRequester === dataRequester) && styles.requestToggleSelected],
-    onPress: () => toggleDataRequest(dataRequester, key, 0, requestData[key].type, requestData[key].reward)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.requestToggleText
-  }, selectedConnections.some(conn => conn.key === key && conn.dataRequester === dataRequester) ? 'Selected' : 'Select'))))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.actionButtonsContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.rejectButton,
-    onPress: rejectDataRequest
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.rejectButtonText
-  }, "Reject")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: [styles.approveButton, !allowSubmit && styles.disabledButton],
-    onPress: sendDataRequest,
-    disabled: !allowSubmit || isLoading
-  }, isLoading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    color: "#fff",
-    size: "small"
-  }) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.approveButtonText
-  }, "Approve"))));
-
-  // Render content based on current step
-  const renderContent = () => {
-    if (!isAuthenticated && currentStep !== 'onboarding') {
-      return renderLoginForm();
-    }
-    switch (currentStep) {
-      case 'onboarding':
-        return renderOnboarding();
-      case 'training':
-        return renderTraining();
-      case 'createPin':
-        return renderCreatePin();
-      case 'dataRequest':
-        return renderDataRequest();
-      default:
-        return renderDataRequest();
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNativeModal.default, {
-    isVisible: true,
-    onBackdropPress: onClose,
-    onBackButtonPress: onClose,
-    style: styles.modal,
-    swipeDirection: "down",
-    onSwipeComplete: onClose,
-    propagateSwipe: true,
-    avoidKeyboard: true
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
-    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
-    style: styles.keyboardAvoidingView
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.modalContent
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.modalHeader
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.dragIndicator
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.closeButton,
-    onPress: onClose
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
-    name: "close",
-    size: 24,
-    color: "#333"
-  }))), renderContent())));
-};
-const styles = _reactNative.StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0
-  },
-  keyboardAvoidingView: {
-    width: '100%'
-  },
-  modalContent: {
-    backgroundColor: 'white',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    paddingHorizontal: 20,
-    paddingBottom: 20,
-    maxHeight: height * 0.8
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 10,
-    position: 'relative'
-  },
-  dragIndicator: {
-    width: 40,
-    height: 5,
-    backgroundColor: '#ccc',
-    borderRadius: 3
-  },
-  closeButton: {
-    position: 'absolute',
-    right: 0,
-    top: 10
-  },
-  // Login styles
-  loginContainer: {
-    padding: 16
-  },
-  loginTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 20,
-    textAlign: 'center'
-  },
-  inputContainer: {
-    marginBottom: 16
-  },
-  inputLabel: {
-    fontSize: 16,
-    marginBottom: 8,
-    color: '#333'
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16
-  },
-  loginButton: {
-    backgroundColor: '#2196F3',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginTop: 8
-  },
-  loginButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold'
-  },
-  divider: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 20
-  },
-  dividerLine: {
-    flex: 1,
-    height: 1,
-    backgroundColor: '#ccc'
-  },
-  dividerText: {
-    marginHorizontal: 10,
-    color: '#666'
-  },
-  othentButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#ddd'
-  },
-  othentLogo: {
-    width: 24,
-    height: 24,
-    marginRight: 10
-  },
-  othentButtonText: {
-    fontSize: 16,
-    color: '#333'
-  },
-  // Onboarding styles
-  onboardingContainer: {
-    padding: 16
-  },
-  onboardingTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8
-  },
-  onboardingSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 20
-  },
-  socialAccountsContainer: {
-    marginBottom: 20
-  },
-  socialAccount: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    marginBottom: 10
-  },
-  selectedSocialAccount: {
-    borderColor: '#4CAF50',
-    backgroundColor: 'rgba(76, 175, 80, 0.1)'
-  },
-  socialIcon: {
-    width: 24,
-    height: 24,
-    marginRight: 16
-  },
-  socialName: {
-    fontSize: 16,
-    flex: 1
-  },
-  checkIcon: {
-    marginLeft: 8
-  },
-  nextButton: {
-    backgroundColor: '#4CAF50',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center'
-  },
-  nextButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold'
-  },
-  disabledButton: {
-    backgroundColor: '#ccc'
-  },
-  // Training styles
-  trainingContainer: {
-    padding: 16,
-    alignItems: 'center'
-  },
-  trainingTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8
-  },
-  trainingSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 30,
-    textAlign: 'center'
-  },
-  progressBarContainer: {
-    width: '100%',
-    height: 12,
-    backgroundColor: '#e0e0e0',
-    borderRadius: 6,
-    overflow: 'hidden',
-    marginBottom: 16
-  },
-  progressBar: {
-    height: '100%',
-    backgroundColor: '#4CAF50'
-  },
-  progressText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#4CAF50'
-  },
-  // PIN styles
-  pinContainer: {
-    padding: 16
-  },
-  pinTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8
-  },
-  pinSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 20
-  },
-  errorText: {
-    color: 'red',
-    marginBottom: 16
-  },
-  // Data request styles
-  dataRequestContainer: {
-    padding: 16
-  },
-  dataRequestTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 16
-  },
-  requestsScrollView: {
-    maxHeight: 300
-  },
-  requestSection: {
-    marginBottom: 20,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8
-  },
-  requestSectionTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 8
-  },
-  requestDescription: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 16
-  },
-  requestToggle: {
-    backgroundColor: '#f5f5f5',
-    padding: 12,
-    borderRadius: 8,
-    alignItems: 'center'
-  },
-  requestToggleSelected: {
-    backgroundColor: '#4CAF50'
-  },
-  requestToggleText: {
-    fontWeight: 'bold'
-  },
-  actionButtonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 20
-  },
-  rejectButton: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginRight: 8
-  },
-  rejectButtonText: {
-    color: '#333',
-    fontSize: 16,
-    fontWeight: 'bold'
-  },
-  approveButton: {
-    flex: 1,
-    backgroundColor: '#4CAF50',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginLeft: 8
-  },
-  approveButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold'
-  }
-});
-var _default = exports.default = Overlay;
 //# sourceMappingURL=Overlay.js.map

package/lib/commonjs/components/PinInput.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PinInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
+var _constants = require("../constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PinInput = ({
+  onSubmit,
+  minLength = 8,
+  requireSpecialChar = true,
+  requireNumber = true
+}) => {
+  const [pin, setPin] = (0, _react.useState)('');
+  const [error, setError] = (0, _react.useState)(null);
+  const [showPin, setShowPin] = (0, _react.useState)(false);
+  const validatePin = (0, _react.useCallback)(value => {
+    if (value.length < minLength) {
+      return `PIN must be at least ${minLength} characters`;
+    }
+    if (requireSpecialChar && !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+      return 'PIN must include a special character';
+    }
+    if (requireNumber && !/\d/.test(value)) {
+      return 'PIN must include a number';
+    }
+    return null;
+  }, [minLength, requireSpecialChar, requireNumber]);
+  const handleSubmit = (0, _react.useCallback)(() => {
+    const validationError = validatePin(pin);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+    onSubmit(pin);
+  }, [pin, validatePin, onSubmit]);
+  const handlePinChange = (0, _react.useCallback)(value => {
+    setPin(value);
+    setError(null);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.title
+  }, "Create your PIN"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.subtitle
+  }, "This PIN will be used to secure your account"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.inputContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    style: styles.input,
+    value: pin,
+    onChangeText: handlePinChange,
+    secureTextEntry: !showPin,
+    placeholder: "Enter PIN",
+    keyboardType: "numeric",
+    maxLength: 20,
+    autoCapitalize: "none",
+    autoCorrect: false
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: styles.visibilityButton,
+    onPress: () => setShowPin(!showPin)
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
+    name: showPin ? 'visibility-off' : 'visibility',
+    size: 24,
+    color: _constants.COLORS.text.secondary
+  }))), error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.error
+  }, error), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.requirements
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.requirementTitle
+  }, "PIN Requirements:"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requirement, pin.length >= minLength && styles.requirementMet]
+  }, "\u2022 At least ", minLength, " characters"), requireSpecialChar && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requirement, /[!@#$%^&*(),.?":{}|<>]/.test(pin) && styles.requirementMet]
+  }, "\u2022 Include a special character"), requireNumber && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.requirement, /\d/.test(pin) && styles.requirementMet]
+  }, "\u2022 Include a number")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.submitButton, !pin && styles.submitButtonDisabled],
+    onPress: handleSubmit,
+    disabled: !pin
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.submitButtonText
+  }, "Continue")));
+};
+exports.PinInput = PinInput;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: _constants.COLORS.text.primary
+  },
+  subtitle: {
+    fontSize: 14,
+    color: _constants.COLORS.text.secondary,
+    marginBottom: 24
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: _constants.COLORS.border,
+    borderRadius: 8,
+    marginBottom: 16
+  },
+  input: {
+    flex: 1,
+    padding: 12,
+    fontSize: 16
+  },
+  visibilityButton: {
+    padding: 12
+  },
+  error: {
+    color: _constants.COLORS.error,
+    marginBottom: 16
+  },
+  requirements: {
+    marginBottom: 24
+  },
+  requirementTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: _constants.COLORS.text.primary
+  },
+  requirement: {
+    fontSize: 14,
+    color: _constants.COLORS.text.secondary,
+    marginBottom: 4
+  },
+  requirementMet: {
+    color: _constants.COLORS.success
+  },
+  submitButton: {
+    backgroundColor: _constants.COLORS.primary,
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: 'center'
+  },
+  submitButtonDisabled: {
+    opacity: 0.5
+  },
+  submitButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600'
+  }
+});
+//# sourceMappingURL=PinInput.js.map